/* ============ SIDEBAR — aside, brand, nav, language rail, level stepper, user/xp widgets ============ */


.app{display:flex;min-height:100vh}
aside{width:240px;flex:0 0 240px;background:var(--sidebar-bg);color:var(--sidebar-text);
      position:sticky;top:0;height:100vh;overflow-y:auto;
      display:flex;flex-direction:column;z-index:50;transition:transform .25s ease,background .3s ease}
aside::-webkit-scrollbar{width:6px}
aside::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

.brand{padding:20px 18px 16px;border-bottom:0;position:relative}
.brand::after{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);margin:18px -18px 0}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.brand-text h1{font-size:18px;margin:0;color:#fff;font-weight:700;letter-spacing:-0.2px}
.brand-text .sub{font-size:10px;color:var(--sidebar-accent);opacity:0.85;margin-top:3px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.icon-btn{background:none;border:1px solid rgba(255,255,255,.10);color:#cfd6df;
          width:36px;height:36px;border-radius:7px;cursor:pointer;display:flex;
          align-items:center;justify-content:center;transition:all .2s;padding:0;flex:0 0 36px;box-shadow:none}
.icon-btn:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.20);transform:translateY(-1px)}
.icon-btn svg{width:16px;height:16px}
.mobile-header .lang-switch{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;overflow:hidden;font-size:11px;font-weight:600}
.mobile-header .lang-switch button{background:transparent;border:0;padding:5px 10px;color:var(--muted);cursor:pointer;transition:all .15s;font:inherit;font-weight:600;box-shadow:none;letter-spacing:.5px}
.mobile-header .lang-switch button:hover{color:var(--text);transform:none;box-shadow:none}
.mobile-header .lang-switch button.active{background:var(--accent);color:#fff}

/* ===== Language rail ===== */
.lang-rail{position:relative;display:flex;gap:28px;padding:6px 4px 10px;margin-top:14px}
.lang-btn{background:transparent;border:0;padding:6px 0;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--sidebar-text);opacity:0.55;cursor:pointer;transition:opacity .2s,color .2s;box-shadow:none;min-width:28px;text-align:left}
.lang-btn:hover{opacity:0.9;color:#fff;transform:none;box-shadow:none}
.lang-btn.active{opacity:1;color:#fff}
.lang-underline{position:absolute;bottom:4px;height:2px;width:28px;background:linear-gradient(90deg,var(--sidebar-accent),var(--sidebar-glow));border-radius:2px;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none;box-shadow:0 0 8px var(--sidebar-glow-shadow,rgba(0,0,0,.35))}
.lang-rail[data-active="sk"] .lang-underline{transform:translateX(4px)}
.lang-rail[data-active="en"] .lang-underline{transform:translateX(60px)}

nav{padding:6px 0 24px;flex:1}
nav .group{padding:18px 22px 6px;font-size:10px;color:var(--sidebar-accent);text-transform:uppercase;
           letter-spacing:1.6px;font-weight:700;opacity:.7}
nav a{display:flex;align-items:center;gap:11px;padding:8px 22px;color:var(--sidebar-text);
      text-decoration:none;font-size:13.5px;border-left:2px solid transparent;
      transition:background .12s,color .12s,border-color .12s;font-weight:500}
nav a:hover{background:var(--sidebar-hover-bg);color:#fff}
nav a.active{background:var(--sidebar-active-bg);color:var(--sidebar-text-active);
             border-left-color:var(--sidebar-accent);font-weight:600}
nav a.active .nav-icon{color:var(--sidebar-text-active);opacity:1}
nav .nav-icon{width:16px;height:16px;flex:0 0 16px;opacity:.55;transition:opacity .12s}
nav a:hover .nav-icon{opacity:.9}
nav a.no-icon{padding-left:22px}
nav a.no-icon::before{content:'';display:inline-block;width:16px;flex:0 0 16px}
nav .kbd{margin-left:auto;font-size:10px;background:rgba(255,255,255,.06);
         padding:1px 6px;border-radius:3px;font-family:"SF Mono",Menlo,monospace;color:#6a7a78}

/* ===== Sidebar nav groups (P03) ===== */
/* ===== Sidebar nav groups (P03) ===== */
.nav-home{display:flex;align-items:center;gap:11px;padding:8px 22px;color:var(--sidebar-text);
          text-decoration:none;font-size:13.5px;font-weight:500;border-left:2px solid transparent;
          transition:background .12s,color .12s,border-color .12s}
.nav-home:hover{background:var(--sidebar-hover-bg);color:#fff}
.nav-home.active{background:var(--sidebar-active-bg);color:var(--sidebar-text-active);
                 border-left-color:var(--sidebar-accent);font-weight:600}
.nav-home .nav-icon{width:16px;height:16px;flex:0 0 16px;opacity:.55;transition:opacity .12s}
.nav-home:hover .nav-icon,.nav-home.active .nav-icon{opacity:1}
.nav-group-header{display:flex;align-items:center;gap:11px;width:100%;padding:8px 22px;
                  background:transparent;border:0;border-radius:0;border-left:2px solid transparent;
                  color:var(--sidebar-text);font:600 13.5px/1.4 inherit;cursor:pointer;
                  text-align:left;box-shadow:none;transition:background .12s,color .12s}
.nav-group-header:hover{background:var(--sidebar-hover-bg);color:#fff;transform:none;box-shadow:none}
.nav-group-header .nav-icon{width:16px;height:16px;flex:0 0 16px;opacity:.55;transition:opacity .12s}
.nav-group-header:hover .nav-icon{opacity:.9}
.nav-group-header .chevron{width:13px;height:13px;flex:0 0 13px;margin-left:auto;
                           opacity:.45;transition:transform .2s;pointer-events:none}
.nav-group.expanded .nav-group-header .chevron{transform:rotate(90deg)}
.nav-group-items{max-height:0;overflow:hidden;transition:max-height .25s ease}
.nav-group.expanded .nav-group-items{max-height:600px}
.nav-group-items a{padding:7px 22px 7px 36px!important}
.nav-group-items a .kbd{margin-left:auto}

/* ============ LEVEL TOGGLE + LEVEL STEPPER ============ */
/* ============ LEVEL TOGGLE ============ */
body[data-level="beg"]    [data-level="adv"],
body[data-level="beg"]    [data-level="pro"],
body[data-level="adv"]    [data-level="pro"]{display:none!important}
@keyframes nav-flash{0%{opacity:0.55;transform:translateX(-2px)}100%{opacity:1;transform:translateX(0)}}
nav.level-changing a{animation:nav-flash .28s ease-out}
.level-label{font-size:10px;color:var(--sidebar-accent);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;opacity:0.65;margin:22px 0 10px;padding-left:2px}
.level-stepper{position:relative;padding:4px 0 4px 4px;display:flex;flex-direction:column;gap:0}
.ls-line{position:absolute;left:13px;top:13px;bottom:13px;width:2px;border-radius:1px}
.ls-line-bg{background:rgba(255,255,255,.08)}
.ls-line-fg{background:linear-gradient(180deg,var(--sidebar-accent),var(--sidebar-glow));transition:bottom .35s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px var(--sidebar-glow-shadow,rgba(0,0,0,.4))}
.level-stepper[data-active="beg"] .ls-line-fg{bottom:calc(100% - 13px);height:0}
.level-stepper[data-active="adv"] .ls-line-fg{bottom:50%}
.level-stepper[data-active="pro"] .ls-line-fg{bottom:13px}
.ls-step{position:relative;z-index:2;background:transparent;border:0;padding:8px 6px 8px 0;display:flex;align-items:center;gap:14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--sidebar-text);text-align:left;width:100%;box-shadow:none;transition:background .15s;border-radius:7px}
.ls-step:hover{background:rgba(255,255,255,.04);transform:none;box-shadow:none}
.ls-step:focus-visible{outline:2px solid var(--sidebar-accent);outline-offset:2px}
.ls-dot{position:relative;width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--sidebar-bg);border:2px solid rgba(255,255,255,.15);transition:all .2s}
.ls-content{display:flex;flex-direction:column;gap:1px}
.ls-name{font-size:13px;font-weight:600;color:var(--sidebar-text);letter-spacing:0.1px;line-height:1.2}
.ls-state{font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:rgba(255,255,255,.35);line-height:1.3;margin-top:2px}
.ls-step[data-state="completed"] .ls-dot{background:var(--sidebar-accent);border-color:var(--sidebar-glow);color:#fff}
.ls-step[data-state="completed"] .ls-icon-check{display:block;width:12px;height:12px;color:#fff}
.ls-step[data-state="completed"] .ls-name{color:rgba(255,255,255,.78)}
.ls-step[data-state="completed"] .ls-state{color:var(--sidebar-accent)}
.ls-step[data-state="active"] .ls-dot{background:var(--sidebar-bg);border-color:var(--sidebar-accent);border-width:2.5px}
.ls-step[data-state="active"] .ls-inner-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--sidebar-glow);box-shadow:0 0 6px var(--sidebar-glow-shadow,rgba(0,0,0,.6))}
.ls-step[data-state="active"] .ls-pulse{display:block;position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--sidebar-glow);opacity:0;animation:ls-pulse 2s ease-out infinite}
@keyframes ls-pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.ls-step[data-state="active"] .ls-name{color:#fff;font-weight:700;font-size:14px}
.ls-step[data-state="active"] .ls-state{color:var(--sidebar-accent);font-weight:700}
.ls-step[data-state="locked"]{cursor:pointer;opacity:0.55}
.ls-step[data-state="locked"]:hover{opacity:0.75;background:rgba(255,255,255,.03)}
.ls-step[data-state="locked"] .ls-dot{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.35)}
.ls-step[data-state="locked"] .ls-icon-lock{display:block;width:10px;height:10px}
.ls-step[data-state="locked"] .ls-state{color:rgba(255,255,255,.25)}
.ls-icon,.ls-inner-dot,.ls-pulse{display:none}

/* ============ USER + XP WIDGETS ============ */
.user-widget{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:16px 0 0;
             background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px}
.user-widget[hidden]{display:none}
.user-widget:hover{background:rgba(255,255,255,.06)}

/* ===== XP widget (P04) ===== */
.xp-widget{padding:10px 12px;margin-top:8px;background:rgba(255,255,255,.04);
           border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.xp-widget[hidden]{display:none}
.xp-level{font-size:12px;color:var(--sidebar-accent);font-weight:700;margin-bottom:6px}
.xp-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:4px}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
         transition:width .4s ease;border-radius:3px}
.xp-meta{font-size:10px;color:var(--sidebar-text);text-align:right;opacity:.7}
.user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
             font-weight:700;font-size:13px;color:#fff;flex:0 0 32px;
             background:linear-gradient(135deg,var(--user-color,#d97706),rgba(0,0,0,.35));
             position:relative;overflow:hidden}
.user-avatar::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.30),transparent 50%);pointer-events:none}
.user-meta{flex:1;min-width:0}
.user-name{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.user-role{font-size:10px;color:var(--sidebar-accent);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:2px}

body[data-role="guest"] [data-deny~="guest"]{display:none!important}

/* ===== Premium nav group ===== */
/* --_p: dedicated gold/amber token per theme — never uses sidebar-accent which can blend in */
.nav-group--premium{border-top:1px solid rgba(217,119,6,.25);border-bottom:1px solid rgba(217,119,6,.25)}
[data-theme="circuit"] .nav-group--premium{border-top:1px solid rgba(251,191,36,.25);border-bottom:1px solid rgba(251,191,36,.25)}
[data-theme="winxp"] .nav-group--premium{border-top:1px solid rgba(255,212,90,.30);border-bottom:1px solid rgba(255,212,90,.30)}
.nav-group--premium .nav-group-header{
  --_p:#d97706; /* default: amber gold */
  position:relative;
  overflow:hidden;
  border-left:2px solid var(--_p) !important;
  background-color:rgba(217,119,6,.07);
}
/* diagonal hatch */
.nav-group--premium .nav-group-header::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    135deg,
    transparent 0, transparent 4px,
    rgba(217,119,6,.10) 4px, rgba(217,119,6,.10) 5px
  );
  pointer-events:none;
  z-index:0;
}
.nav-group--premium .nav-group-header > *{position:relative;z-index:1}
.nav-group--premium .nav-group-header .nav-icon--premium{
  color:var(--_p);
  opacity:1 !important;
}
.nav-group--premium .nav-group-header span:first-of-type{
  color:var(--_p);
  font-weight:700;
}
/* Circuit — amber gold stands out against teal sidebar */
[data-theme="circuit"] .nav-group--premium .nav-group-header{
  --_p:#fbbf24;
  background-color:rgba(251,191,36,.07);
}
[data-theme="circuit"] .nav-group--premium .nav-group-header::before{
  background-image:repeating-linear-gradient(
    135deg,
    transparent 0, transparent 4px,
    rgba(251,191,36,.12) 4px, rgba(251,191,36,.12) 5px
  );
}
[data-theme="circuit"] .nav-group--premium .nav-group-header .nav-icon--premium{
  filter:drop-shadow(0 0 5px rgba(251,191,36,.5));
}
/* Win XP Luna — gold stands out on blue sidebar */
[data-theme="winxp"] .nav-group--premium .nav-group-header{
  --_p:#FFD45A;
  background-color:rgba(255,212,90,.10);
}
[data-theme="winxp"] .nav-group--premium .nav-group-header::before{
  background-image:repeating-linear-gradient(
    135deg,
    transparent 0, transparent 4px,
    rgba(255,212,90,.15) 4px, rgba(255,212,90,.15) 5px
  );
}
/* Win98 — gold on silver */
[data-theme="win98"] .nav-group--premium .nav-group-header{
  --_p:#b8860b;
  background-color:rgba(184,134,11,.08);
}
/* Dark variants keep amber */
[data-theme="dark"] .nav-group--premium .nav-group-header,
[data-theme="circuit-dark"] .nav-group--premium .nav-group-header{
  --_p:#fbbf24;
  background-color:rgba(251,191,36,.07);
}