:root {
    --bg: #f4f6ff;
    --bg-soft: rgba(255,255,255,0.88);
    --card: rgba(255,255,255,0.86);
    --panel: rgba(18, 14, 30, 0.86);
    --text: #181426;
    --muted: #6f6880;
    --line: rgba(25, 18, 42, 0.10);
    --magenta: #de17ff;
    --magenta-2: #ff2ec1;
    --cyan: #39c7ff;
    --green: #4de49d;
    --orange: #ffb347;
    --shadow: 0 14px 38px rgba(15, 10, 30, 0.14);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 14px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="dark"] {
    --bg: #090811;
    --bg-soft: rgba(20, 16, 33, 0.90);
    --card: rgba(19, 15, 30, 0.94);
    --panel: rgba(19, 15, 30, 0.94);
    --text: #f8f6ff;
    --muted: #b7aec8;
    --line: rgba(255,255,255,0.10);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { background: var(--bg); color: var(--text); }
body {
    background:
        radial-gradient(circle at 0% 0%, rgba(222, 23, 255, 0.22), transparent 26rem),
        radial-gradient(circle at 100% 0%, rgba(57, 199, 255, 0.20), transparent 28rem),
        linear-gradient(180deg, rgba(6, 7, 18, 0.35), transparent 22rem),
        var(--bg);
    color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
img { max-width: 100%; display: block; }
.app-frame { min-height: 100vh; display: grid; grid-template-columns: 100px minmax(0,1fr); }
.side-nav {
    position: sticky; top: 0; height: 100vh; padding: 18px 12px;
    display:flex; flex-direction:column; gap:12px;
    border-right:1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
    backdrop-filter: blur(16px);
    z-index: 6;
}
.brand { display:grid; place-items:center; gap:6px; margin-bottom:8px; font-weight:900; font-size:.72rem; }
.brand-mark, .app-logo {
    width:48px; height:48px; border-radius:18px; display:grid; place-items:center;
    color:#fff; font-weight:950; background:linear-gradient(135deg,var(--magenta),var(--cyan));
    box-shadow: 0 14px 30px rgba(222,23,255,.28);
}
.side-link, .bottom-link {
    position:relative; min-height:68px; border-radius:18px; border:1px solid transparent;
    display:grid; justify-items:center; align-content:center; gap:6px; padding:8px 6px;
    color:var(--muted); font-size:.74rem; font-weight:850;
}
.side-link.active, .bottom-link.active {
    color:#fff; background:linear-gradient(135deg,var(--magenta),var(--magenta-2)); box-shadow:0 16px 28px rgba(222,23,255,.26);
}
.nav-ico {
    width:30px; height:30px; border-radius:12px; background:rgba(255,255,255,.16);
    display:grid; place-items:center; padding:5px;
}
.nav-ico img { width:100%; height:100%; object-fit:contain; }
.badge { position:absolute; top:7px; right:9px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#fff; color:#12101e; display:grid; place-items:center; font-size:.64rem; font-weight:900; }
.app-main { width:min(100%, 1120px); margin:0 auto; padding:18px 22px 110px; }
.top-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.profile-anchor { display:flex; align-items:center; gap:12px; min-width:0; }
.profile-mini {
    width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg,#221c36,#141021);
    overflow:hidden; display:grid; place-items:center; color:#fff; font-weight:900; box-shadow:var(--shadow);
    border:1px solid var(--line);
}
.profile-mini img { width:100%; height:100%; object-fit:cover; }
.profile-copy { display:grid; gap:4px; }
.profile-copy small, .eyebrow { color:var(--magenta); font-size:.72rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.profile-copy strong { font-size: clamp(1.35rem, 2.5vw, 2rem); line-height:1; }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.status-pill, .icon-btn {
    min-height:48px; padding:0 14px; border-radius:16px; border:1px solid var(--line); background:var(--card);
    display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); color:var(--text); font-weight:800;
}
.status-pill img { width:22px; height:22px; object-fit:contain; }
.status-pill.accent { background:linear-gradient(135deg, rgba(48,21,73,.9), rgba(28,61,96,.9)); color:#fff; }
.icon-btn { width:48px; justify-content:center; padding:0; }
.flash-stack { display:grid; gap:10px; margin-bottom:14px; }
.flash { padding:14px 16px; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--card); }
.flash-success { border-color: rgba(77,228,157,.4); }
.flash-error { border-color: rgba(255,112,112,.45); }
.hero-shell, .feature-grid, .menu-grid, .news-list, .admin-grid { display:grid; gap:16px; margin-bottom:16px; }
.two-up { grid-template-columns: repeat(2, minmax(0,1fr)); }
.three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hero-panel, .feature-card, .app-box, .event-banner, .news-hero, .panel, .menu-tile, .auth-card {
    background: color-mix(in srgb, var(--card) 92%, transparent); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.hero-panel {
    padding:22px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:18px;
}
.hero-copy h1, .feature-card h2, .app-box h3, .event-banner h2, .panel h2, .auth-card h2 { margin:0; line-height:1.04; }
.hero-copy p, .feature-card p, .app-box p, .event-banner p, .panel p, .news-hero p, .menu-tile span, .schedule-row span, .feature-card small { color:var(--muted); }
.hero-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.stat-box {
    min-height:110px; border-radius:18px; padding:14px; background:linear-gradient(160deg, rgba(50,26,74,.92), rgba(22,17,35,.96));
    color:#fff; display:grid; align-content:center; justify-items:start; gap:6px;
}
.stat-box img { width:26px; height:26px; object-fit:contain; }
.stat-box strong { font-size:1.45rem; }
.stat-box span { color:rgba(255,255,255,.8); font-size:.88rem; }
.feature-card, .app-box, .news-hero, .event-banner, .panel { padding:18px; position:relative; overflow:hidden; }
.feature-card.live-card.is-live { background:linear-gradient(135deg, rgba(44,18,50,.96), rgba(17,60,67,.92)); }
.feature-card.album-hero { background:linear-gradient(135deg, rgba(31,26,57,.96), rgba(53,31,82,.96)); }
.feature-card.promo-card { background:linear-gradient(135deg, rgba(17,30,58,.96), rgba(18,18,38,.96)); }
.feature-top, .box-head, .panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.feature-tag, .mini-chip, .timer-pill, .ribbon, .rarity-pill {
    display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; border-radius:999px; font-size:.72rem; font-weight:950; letter-spacing:.04em;
}
.feature-tag { background:rgba(255,255,255,.12); color:#fff; }
.feature-tag.new { background:linear-gradient(135deg,var(--orange),#ff7b34); color:#22131f; }
.mini-chip, .timer-pill { background:rgba(255,255,255,.12); color:#fff; }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.primary-btn, .ghost-btn {
    min-height:50px; border-radius:16px; padding:0 18px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; font-weight:900;
}
.primary-btn { background:linear-gradient(135deg,var(--magenta),var(--magenta-2)); color:#fff; box-shadow:0 12px 26px rgba(222,23,255,.26); }
.ghost-btn { border-color:var(--line); background:rgba(255,255,255,.08); color:var(--text); }
.copy-field, input[type=text], input[type=email], input[type=password], input[type=date], input[type=color], textarea {
    width:100%; min-height:50px; border-radius:16px; border:1px solid var(--line); background:rgba(0,0,0,.14); color:var(--text); padding:12px 14px;
}
textarea { min-height:130px; resize:vertical; }
.show-mini-list, .top-list, .schedule-list { display:grid; gap:10px; }
.show-mini-list { margin:0; padding:0; list-style:none; }
.show-mini-list li, .top-row, .schedule-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.06);
}
.show-mini-list li b, .schedule-row b { min-width:62px; }
.show-mini-list li span { flex:1; }
.top-list.compact .top-row { padding:12px 12px; }
.event-banner { min-height:220px; }
.event-banner.orange { background:linear-gradient(145deg, rgba(110,49,10,.88), rgba(220,144,61,.88)); color:#fff; }
.event-banner.blue { background:linear-gradient(145deg, rgba(17,47,111,.88), rgba(33,149,224,.88)); color:#fff; }
.banner-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.ribbon { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,var(--magenta),#ff675b); color:#fff; }
.news-hero { background:linear-gradient(145deg, rgba(19,24,46,.96), rgba(42,17,51,.95)); }
.progress-pill { width:100%; height:14px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin:12px 0 8px; }
.progress-pill span { display:block; height:100%; border-radius:inherit; background:linear-gradient(135deg,var(--cyan),var(--green)); }
.form-grid { display:grid; gap:12px; }
.two-col { grid-template-columns:repeat(2, minmax(0,1fr)); }
.full { grid-column:1/-1; }
label { display:grid; gap:8px; font-weight:700; }
.check-row { display:flex; align-items:center; gap:10px; font-weight:700; }
.check-row input { width:18px; height:18px; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(100%, 820px); padding:24px; }
.auth-card.wide { width:min(100%, 1020px); }
.app-logo { margin-bottom:12px; }
.panel-head h2 { margin:0; }
.card-album { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.collect-card {
    --card-color:#d900ff;
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), rgba(0,0,0,.10));
    border:1px solid var(--line); border-radius:24px; padding:14px; box-shadow:var(--shadow); position:relative;
}
.collect-card::before { content:""; position:absolute; inset:0; border-radius:inherit; border-top:4px solid var(--card-color); pointer-events:none; }
.rarity-pill { background:color-mix(in srgb, var(--card-color) 65%, white); color:#211026; margin-bottom:10px; }
.collect-art { min-height:160px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.08)); margin-bottom:12px; overflow:hidden; }
.collect-art b { font-size:4rem; }
.collect-card h3 { margin:0 0 6px; }
.collect-card em { color:var(--muted); font-style:normal; }
.avatar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:14px; }
.avatar-tile { border:1px solid var(--line); background:var(--card); border-radius:22px; padding:12px; text-align:center; box-shadow:var(--shadow); }
.avatar-preview { aspect-ratio:1/1; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.06); overflow:hidden; margin-bottom:10px; }
.news-card img { width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:18px; margin-bottom:14px; }
.chat-shell { display:grid; gap:12px; }
.chat-list { display:grid; gap:10px; max-height:62vh; overflow:auto; }
.chat-bubble { border:1px solid var(--line); background:var(--card); border-radius:20px; padding:14px; box-shadow:var(--shadow); }
.chat-bubble time { color:var(--muted); font-size:.8rem; }
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.menu-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.menu-tile {
    padding:18px; display:grid; gap:8px; min-height:150px; align-content:start;
}
.tile-ico { width:48px; height:48px; border-radius:16px; background:rgba(255,255,255,.10); display:grid; place-items:center; padding:8px; }
.tile-ico img { width:100%; height:100%; object-fit:contain; }
.menu-tile b { font-size:1.1rem; }
.menu-tile.admin { box-shadow: inset 0 0 0 1px rgba(222,23,255,.5), var(--shadow); }
.logout-tile button { all:unset; display:grid; gap:8px; cursor:pointer; }
.admin-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; }
.schedule-row { grid-template-columns:minmax(90px,auto) minmax(0,1fr) auto; display:grid; align-items:center; }
.schedule-row.live { box-shadow: inset 0 0 0 1px rgba(77,228,157,.5); }
.schedule-row em { font-style:normal; color:var(--muted); }
.empty-state { padding:20px; border-radius:18px; border:1px dashed var(--line); color:var(--muted); text-align:center; }
.bottom-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:20; display:none; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(9,8,17,0), rgba(9,8,17,.35) 20%, rgba(9,8,17,.96)); backdrop-filter: blur(18px);
}
.bottom-link { flex:1; min-height:72px; }
.bottom-link .nav-ico { width:28px; height:28px; }
.bottom-link span:last-child { font-size:.72rem; }
.profile-preview { display:grid; gap:12px; }
.profile-image { width:90px; height:90px; border-radius:28px; overflow:hidden; background:linear-gradient(135deg,#231a39,#15111f); color:#fff; display:grid; place-items:center; }
.profile-image img { width:100%; height:100%; object-fit:cover; }
.legal { line-height:1.65; }
@media (max-width: 1080px) {
    .hero-panel, .two-up, .three-up, .admin-grid { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
    .app-frame { grid-template-columns:1fr; }
    .side-nav { display:none; }
    .app-main { padding:16px 14px 108px; }
    .bottom-nav { display:flex; }
    .menu-grid { grid-template-columns:1fr; }
    .two-col { grid-template-columns:1fr; }
    .top-bar { align-items:flex-start; }
    .top-actions { width:100%; justify-content:flex-end; }
    .status-pill { min-height:42px; padding:0 12px; }
    .profile-mini { width:52px; height:52px; }
    .profile-copy strong { font-size:1.7rem; }
}
@media (max-width: 560px) {
    .hero-stats { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .stat-box { min-height:96px; padding:12px; }
    .feature-card, .app-box, .event-banner, .panel, .auth-card, .hero-panel, .news-hero { border-radius:20px; }
    .primary-btn, .ghost-btn { width:100%; }
    .cta-row { display:grid; }
    .status-pill b { max-width:56px; overflow:hidden; text-overflow:ellipsis; }
}