* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; min-height: 100vh; }
.container {max-width: 1400px;margin: 0 auto;padding: 20px;}
.card {background: rgba(255,255,255,0.05);border-radius: 15px;padding: 20px 10px;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.1);}
.btn { padding: 10px 25px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.3s;     text-decoration: none;}
.btn-primary { background: linear-gradient(45deg, #ff6b6b, #feca57); color: #000;    text-decoration: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,107,107,0.4); }
.btn-success { background: linear-gradient(45deg, #26de81, #20bf6b); color: #fff;    text-decoration: none; }
.btn-danger { background: linear-gradient(45deg, #eb3b5a, #fc5c65); color: #fff;    text-decoration: none; }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff;     text-decoration: none;}
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 {grid-template-columns: repeat(3, 1fr);}
.grid-5 {grid-template-columns: repeat(6, 1fr);}
.img-thumbnail { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #aaa; }
.form-control {width: 100%;padding: 12px;border-radius: 8px;border: 1px solid rgba(255,255,255,0.2);background: rgb(24 30 54);color: #fff;}
.form-control:focus { outline: none; border-color: #ff6b6b; }
.header { background: rgba(0,0,0,0.3); padding: 20px 0; margin-bottom: 30px; }
.header h1 { text-align: center; background: linear-gradient(45deg, #0093ff, #ff00e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav {display: flex;justify-content: center;gap: 10px;margin-top: 20px;}
.nav a {color: #fff;text-decoration: none;padding: 8px;border-radius: 8px;transition: 0.3s;}
.nav a:hover, .nav a.active { background: rgba(255,255,255,0.1); }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; }
.modal.active { display: flex; }
.modal-content { background: #1a1a2e; padding: 30px; border-radius: 15px; max-width: 800px; max-height: 90vh; overflow-y: auto; width: 90%; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.close-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.price-tag { font-size: 24px; color: #ff6b6b; font-weight: bold; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; margin: 2px; }
.badge-diamond { background: #45aaf2; }
.badge-ticket { background: #feca57; color: #000; }
.badge-goddess { background: #ff6b6b; }
.character-card { text-align: center; }
.character-card img {width: 110px;height: 154px;object-fit: cover;border-radius: 50%;margin-bottom: 10px;}
.costume-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.costume-item {width: 100%;text-align: center;}
.costume-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.costume-item p { font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar .form-control { width: 150px; }
@media (max-width: 768px) {
    .grid-3, .grid-4, .grid-5 {grid-template-columns: repeat(1, 1fr);}
    .filter-bar .form-control { width: 100%; }
}