/* ================= APP SHELL ================= */
.app{
  height:100vh;height:100dvh;display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  gap:var(--gap);padding:var(--gap);
  transition:grid-template-columns var(--t);
}
.app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:40;
  border:1px solid var(--line);
}
.sidebar__brand{
  display:flex;align-items:center;gap:11px;padding:20px 18px 15px;position:relative;
}
/* знак: звезда на орбите в градиентном «шильдике» */
.brand__mark{
  width:36px;height:36px;flex:none;border-radius:12px;font-size:17px;
  background:var(--grad-accent);color:var(--cream);
  display:grid;place-items:center;
  box-shadow:0 6px 15px rgba(27,58,123,.32), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .5s var(--e-spring);
}
.sidebar__brand:hover .brand__mark{transform:rotate(-12deg) scale(1.06)}
[data-theme="neon"] .brand__mark{box-shadow:0 6px 18px rgba(139,107,245,.4)}
/* название: акцидентный шрифт, крупно и плотно */
.brand__text{
  font-family:var(--font-display);
  font-weight:900;font-size:17px;line-height:1;letter-spacing:-.005em;
  text-transform:uppercase;white-space:nowrap;color:var(--text);
  margin-top:1px;
}
.sidebar__collapse{
  margin-left:auto;width:26px;height:26px;font-size:13px;color:var(--text-3);
  border-radius:8px;transition:var(--t-fast);
}
.sidebar__collapse:hover{background:var(--surface-3);color:var(--text)}

.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 12px 12px;display:flex;flex-direction:column;gap:2px}
.nav__group{margin-top:14px;padding:0 10px 6px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.nav__item{
  display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--r-sm);
  color:var(--text-2);font-weight:600;font-size:13.5px;white-space:nowrap;position:relative;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav__item span[data-icon]{font-size:16px;flex:none;transition:transform var(--t-fast)}
.nav__item:hover{background:var(--surface-2);color:var(--text)}
.nav__item:hover span[data-icon]{transform:translateX(1px) scale(1.06)}
.nav__item.is-active{background:var(--accent-soft);color:var(--accent-2);font-weight:700}
[data-theme="dark"] .nav__item.is-active,[data-theme="neon"] .nav__item.is-active{color:var(--peri)}
.nav__item.is-active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;
  border-radius:0 4px 4px 0;background:var(--grad-accent);
}
.nav__item .nav__count{
  margin-left:auto;font-size:11px;font-weight:800;background:var(--surface-3);color:var(--text-2);
  min-width:22px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
}
.nav__item.is-active .nav__count{background:var(--accent);color:#fff}
.nav__item .lock{margin-left:auto;font-size:12px;color:var(--text-3)}

.sidebar__foot{padding:12px;border-top:1px solid var(--line)}

/* level card */
.levelcard{
  background:var(--grad-accent);color:#fff;border-radius:var(--r-lg);padding:14px;
  box-shadow:var(--sh-accent);position:relative;overflow:hidden;cursor:pointer;
  transition:transform var(--t);
}
.levelcard:hover{transform:translateY(-2px)}
.levelcard::after{
  content:"";position:absolute;inset:auto -30px -40px auto;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.12)
}
.levelcard__top{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;opacity:.85;
  text-transform:uppercase;letter-spacing:.08em;position:relative}
.levelcard__lvl{font-size:22px;font-weight:800;margin-top:2px;display:flex;align-items:baseline;gap:6px;position:relative}
.levelcard__lvl small{font-size:11.5px;font-weight:600;opacity:.8}
.levelcard__bar{height:6px;border-radius:99px;background:rgba(255,255,255,.25);margin-top:10px;overflow:hidden;position:relative}
.levelcard__bar i{display:block;height:100%;border-radius:99px;background:#fff;transition:width .6s var(--e-out)}
.levelcard__meta{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;font-weight:600;opacity:.9;position:relative}

/* collapsed state */
.app.is-collapsed .brand__text,
.app.is-collapsed .nav__item .nav__label,
.app.is-collapsed .nav__item .nav__count,
.app.is-collapsed .nav__group,
.app.is-collapsed .levelcard__top,
.app.is-collapsed .levelcard__meta,
.app.is-collapsed .levelcard__lvl small{display:none}
.app.is-collapsed .nav__item{justify-content:center;padding:0}
.app.is-collapsed .sidebar__brand{justify-content:center;padding:20px 0 14px}
.app.is-collapsed .sidebar__collapse{position:absolute;right:8px;top:8px;margin:0;transform:rotate(180deg)}
.app.is-collapsed .levelcard{padding:10px;text-align:center}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;gap:var(--gap);min-width:0;min-height:0}

.topbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  height:64px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;
}
.topbar__burger{display:none}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:8px}

.search{position:relative;display:flex;align-items:center;gap:9px;background:var(--surface-2);
  border:1px solid transparent;border-radius:var(--r-full);height:42px;padding:0 12px 0 14px;
  width:min(380px,42vw);transition:var(--t);color:var(--text-3)}
.search:focus-within{background:var(--surface);border-color:var(--peri);box-shadow:0 0 0 4px var(--accent-soft);width:min(460px,52vw)}
.search input{border:0;background:none;outline:0;flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--text)}
.search input::placeholder{color:var(--text-3)}
.search__results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);max-height:420px;overflow:auto;z-index:60;padding:6px;
  animation:fadeUp .18s var(--e-out)
}

.icon-btn{
  width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-2);
  font-size:17px;transition:var(--t-fast);position:relative;flex:none;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn:active{transform:scale(.94)}
.badge{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--surface);font-style:normal;
}
.badge--warn{background:var(--danger)}

.pill-btn{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:var(--r-full);
  background:var(--grad-accent);color:#fff;font-weight:700;font-size:13px;box-shadow:var(--sh-accent);
  transition:var(--t);
}
.pill-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pill-btn:active{transform:translateY(0) scale(.97)}

.user{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 10px;border-radius:var(--r-full);
  cursor:pointer;transition:var(--t-fast)}
.user:hover{background:var(--surface-2)}
.user__name{font-weight:700;font-size:13px;white-space:nowrap}
.user__avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:var(--grad-cream);color:var(--navy);border:2px solid var(--peri);flex:none;overflow:hidden;
}
[data-theme="dark"] .user__avatar,[data-theme="neon"] .user__avatar{color:var(--peri)}

.content{
  flex:1;min-height:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-1);display:flex;flex-direction:column;overflow:hidden;
}

/* FAB (mobile) */
.fab{
  position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:20px;z-index:45;
  background:var(--grad-accent);color:#fff;font-size:22px;display:none;place-items:center;
  box-shadow:var(--sh-accent);transition:var(--t)
}
.fab:active{transform:scale(.92)}

.sidebar-scrim{display:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){ :root{--sidebar-w:214px} .search{width:min(300px,34vw)} }
@media (max-width:900px){
  .app{grid-template-columns:1fr;padding:10px;gap:10px}
  .app.is-collapsed{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:260px;border-radius:0 var(--r-xl) var(--r-xl) 0;
    transform:translateX(-102%);transition:transform .3s var(--e-out);z-index:80;
  }
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(10,16,32,.45);z-index:70;
    animation:fadeIn .2s}
  .sidebar__collapse{display:none}
  .topbar__burger{display:grid}
  .topbar{height:58px;padding:0 10px;border-radius:var(--r-lg)}
  .content{border-radius:var(--r-lg)}
  .fab{display:grid}
  .hide-sm{display:none!important}
  .search{width:auto;flex:1}
  .search kbd{display:none}
}
@media (max-width:520px){
  .topbar__right{gap:2px}
  #focusBtn,#questBtn{display:none}
  .user__avatar{width:32px;height:32px}
}

/* индикатор синхронизации на аватаре */
.user{position:relative}
.syncdot{
  position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--surface);background:var(--text-3);transition:var(--t);display:none;
}
.syncdot.is-on{display:block}
.syncdot[data-state="syncing"]{background:var(--warn);animation:pulse 1.1s infinite}
.syncdot[data-state="ok"]{background:var(--ok)}
.syncdot[data-state="offline"]{background:var(--text-3)}
.syncdot[data-state="error"]{background:var(--danger)}