/* ── Shared Sidebar Navigation ── */
:root {
    --bg-dark: #0f0f1a;
    --bg-card: #1a1a2e;
    --accent-x: #ff6b6b;
    --accent-o: #4ecdc4;
    --accent-gold: #ffd93d;
    --accent-purple: #a855f7;
    --text: #eaeaea;
    --grid-line: #2d2d44;
    --sidebar-w: 240px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Noto Sans TC',sans-serif;
    min-height:100vh;
    background:var(--bg-dark);
    background-image:
        radial-gradient(ellipse at 20% 20%,rgba(78,205,196,.08) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 80%,rgba(255,107,107,.08) 0%,transparent 50%);
    color:var(--text);
    display:flex;
}

/* Sidebar */
.sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w); background:rgba(15,15,26,.97);
    backdrop-filter:blur(16px);
    border-right:1px solid rgba(255,255,255,.06);
    z-index:200; display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
}
.sidebar.open { transform:translateX(0); }

.sidebar-brand {
    padding:1.2rem 1.2rem .8rem;
    font-size:1.3rem; font-weight:900;
    background:linear-gradient(135deg,var(--accent-x),var(--accent-o));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-decoration:none; display:block;
}
.sidebar-section {
    padding:.5rem .8rem .2rem;
    font-size:.65rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; opacity:.35;
}
.sidebar-nav { list-style:none; padding:.2rem .6rem; }
.sidebar-nav li { margin-bottom:2px; }
.sidebar-link {
    display:flex; align-items:center; gap:.6rem;
    padding:.65rem .8rem; border-radius:10px;
    font-size:.88rem; font-weight:700;
    color:rgba(234,234,234,.55); text-decoration:none;
    transition:background .15s,color .15s;
}
.sidebar-link:hover { background:rgba(255,255,255,.06); color:var(--text); }
.sidebar-link.active { background:rgba(255,255,255,.08); color:var(--text); }
.sidebar-link .nav-emoji { font-size:1.1rem; }

.sidebar-footer {
    margin-top:auto; padding:1rem;
    font-size:.7rem; opacity:.25; text-align:center;
}

/* Overlay */
.sidebar-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:190;
    opacity:0; pointer-events:none; transition:opacity .3s;
}
.sidebar-overlay.show { opacity:1; pointer-events:auto; }

/* Top bar (mobile) */
.topbar {
    position:fixed; top:0; left:0; right:0; height:52px;
    background:rgba(15,15,26,.95); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; padding:0 1rem; z-index:180;
}
.hamburger {
    background:none; border:none; color:var(--text); font-size:1.5rem;
    cursor:pointer; padding:.3rem; border-radius:8px;
    transition:background .15s; line-height:1;
}
.hamburger:hover { background:rgba(255,255,255,.08); }
.topbar-title {
    margin-left:.8rem; font-size:1rem; font-weight:900;
    background:linear-gradient(135deg,var(--accent-x),var(--accent-o));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Main content area */
.main-content {
    flex:1; display:flex; flex-direction:column;
    align-items:center; padding:68px 1rem 1.5rem;
    min-height:100vh; width:100%;
}

/* Desktop: sidebar always visible */
@media (min-width:900px) {
    .sidebar { transform:translateX(0); }
    .sidebar-overlay { display:none !important; }
    .topbar { left:var(--sidebar-w); }
    .main-content { margin-left:var(--sidebar-w); padding-top:68px; }
}