/* ═══════════════════════════════════════════
   ТОКЕНЫ — единая система дизайна
   Палитра «Пробуждение» v2.3
═══════════════════════════════════════════ */
:root {
  --accent:        #C9932A;
  --accent-light:  #D4A843;
  --accent-dim:    rgba(201,147,42,.15);
  --accent-glow:   rgba(201,147,42,.35);
  --green:         #7BAF6E;
  --green-dim:     rgba(123,175,110,.15);
  --red:           #C4614A;
  --red-dim:       rgba(196,97,74,.15);
  --amber:         #D4A843;
  --amber-dim:     rgba(212,168,67,.15);
  --bg:            #1A1008;
  --surface:       #241608;
  --surface-2:     #2E1C0C;
  --border:        rgba(201,147,42,.2);
  --text:          #F5EDD8;
  --text-2:        #C9A96E;
  --muted:         #8A7355;
  --r-xs:   6px;  --r-sm:   8px;  --r-md:   12px;
  --r-lg:  16px;  --r-xl:  20px;  --r-full: 999px;
  --gap-xs: 4px;  --gap-sm: 8px;  --gap-md: 12px;
  --gap-lg: 16px; --gap-xl: 24px;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.4);
  --shadow-md:     0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:     0 8px 28px rgba(0,0,0,.6);
  --shadow-accent: 0 4px 18px rgba(201,147,42,.4);
  --ease:       cubic-bezier(.4,0,.2,1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   350ms;
}

/* ═══════════════════════════════════════════
   СБРОС И БАЗА
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════
   АНИМАЦИИ
═══════════════════════════════════════════ */
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp     { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn      { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes spin         { to{transform:rotate(360deg)} }
@keyframes shimmer      { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes progressFill { from{width:0%} }
@keyframes xpPop        { 0%{transform:scale(1)} 45%{transform:scale(1.18);color:var(--accent)} 100%{transform:scale(1)} }
@keyframes streakFlame  { 0%,100%{transform:scaleY(1) rotate(-2deg)} 50%{transform:scaleY(1.12) rotate(2deg)} }
@keyframes confettiFall { to{transform:translateY(120px) rotate(540deg);opacity:0} }
@keyframes levelUpBounce{ 0%{transform:scale(0)} 60%{transform:scale(1.08)} 80%{transform:scale(.96)} 100%{transform:scale(1)} }
@keyframes ripple       { from{transform:scale(0);opacity:.5} to{transform:scale(2.5);opacity:0} }
@keyframes starsBurst   { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translateY(-40px) scale(0)} }
@keyframes particleRise { 0%{transform:translateY(0) translateX(0) scale(1);opacity:0} 10%{opacity:1} 90%{opacity:.6} 100%{transform:translateY(-100vh) translateX(var(--drift)) scale(.3);opacity:0} }
@keyframes wheelParticle{ 0%{transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:1} 100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(0);opacity:0} }
@keyframes toastSlideUp { from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes toastSlideDown{from{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} to{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96)} }

/* ═══════════════════════════════════════════
   СТРАНИЦЫ / ПОДСТРАНИЦЫ
═══════════════════════════════════════════ */
.page           { display:none; padding:var(--gap-md); animation:fadeIn var(--dur-slow) var(--ease); }
.page.active    { display:block; }
.sub-page       { display:none; }
.sub-page.active{ display:block; }

/* ═══════════════════════════════════════════
   НИЖНЯЯ НАВИГАЦИЯ
═══════════════════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex; align-items:stretch;
  background:rgba(20,12,4,.92);
  border-top:1px solid rgba(201,147,42,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.bn-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 4px 9px; gap:4px; cursor:pointer; position:relative;
  user-select:none; transition:opacity var(--dur-fast) var(--ease);
}
.bn-item:active { opacity:.7; }
.bn-indicator {
  position:absolute; top:0; left:20%; right:20%; height:2px;
  border-radius:0 0 2px 2px; background:transparent;
  transition:background var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.bn-item.active .bn-indicator { background:#C9932A; box-shadow:0 0 10px rgba(201,147,42,.7),0 0 20px rgba(201,147,42,.3); }
.nav-icon { width:22px; height:22px; flex-shrink:0; transition:filter var(--dur-normal) var(--ease); }
.nav-icon-inner { fill:none; stroke:#8A7355; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-normal) var(--ease); }
.bn-item.active .nav-icon-inner { stroke:#D4A843; }
.bn-item.active .nav-icon { filter:drop-shadow(0 0 5px rgba(201,147,42,.5)); }
.bn-label { font-size:10px; font-weight:500; color:#8A7355; letter-spacing:.02em; transition:color var(--dur-normal) var(--ease); white-space:nowrap; }
.bn-item.active .bn-label { color:#D4A843; }

/* ═══════════════════════════════════════════
   КОНТЕНТ-ТАБЫ (сетка 4×2)
═══════════════════════════════════════════ */
.ctabs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  padding:var(--gap-sm); margin:0 calc(-1 * var(--gap-md)) var(--gap-md);
  background:rgba(10,6,0,.4); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(12px);
}
.ctab {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; border-radius:var(--r-md); cursor:pointer;
  transition:background var(--dur-fast),opacity var(--dur-fast);
  user-select:none; border:1px solid transparent;
}
.ctab:active { opacity:.7; }
.ctab.active { background:rgba(201,147,42,.1); border-color:rgba(201,147,42,.25); }
.ctab-icon   { width:18px; height:18px; transition:filter var(--dur-normal); }
.ctab-inner  { fill:none; stroke:#8A7355; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-normal); }
.ctab.active .ctab-inner { stroke:#D4A843; }
.ctab.active .ctab-icon  { filter:drop-shadow(0 0 3px rgba(201,147,42,.5)); }
.ctab span   { font-size:9px; color:#8A7355; font-weight:500; transition:color var(--dur-normal); text-align:center; white-space:nowrap; }
.ctab.active span { color:#D4A843; }

/* Суб-табы (Админ) */
.sub-tabs { display:flex; border-bottom:1px solid var(--border); margin:0 calc(-1 * var(--gap-md)) var(--gap-md); overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:10; background:var(--surface); backdrop-filter:blur(12px); }
.sub-tabs::-webkit-scrollbar { display:none; }
.sub-tab { flex-shrink:0; padding:10px var(--gap-md); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color var(--dur-normal) var(--ease),border-color var(--dur-normal) var(--ease); user-select:none; }
.sub-tab.active { color:#D4A843; border-bottom-color:#C9932A; }

/* Профиль-табы */
.profile-tabs { display:flex; background:rgba(10,6,0,.5); border-bottom:1px solid rgba(201,147,42,.15); margin:0 calc(-1 * var(--gap-md)) var(--gap-md); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.ptab { flex:1; display:flex; flex-direction:column; align-items:center; padding:9px 4px 8px; gap:3px; cursor:pointer; position:relative; user-select:none; transition:opacity var(--dur-fast); }
.ptab:active { opacity:.7; }
.ptab-ind { position:absolute; top:0; left:15%; right:15%; height:2px; border-radius:0 0 2px 2px; background:transparent; transition:background var(--dur-normal),box-shadow var(--dur-normal); }
.ptab.active .ptab-ind { background:#C9932A; box-shadow:0 0 10px rgba(201,147,42,.7),0 0 20px rgba(201,147,42,.3); }
.ptab-icon  { width:20px; height:20px; transition:filter var(--dur-normal); }
.ptab-inner { fill:none; stroke:#8A7355; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-normal); }
.ptab.active .ptab-inner { stroke:#D4A843; }
.ptab.active .ptab-icon  { filter:drop-shadow(0 0 4px rgba(201,147,42,.5)); }
.ptab span  { font-size:9.5px; font-weight:500; color:#8A7355; transition:color var(--dur-normal); white-space:nowrap; }
.ptab.active span { color:#D4A843; }

/* ═══════════════════════════════════════════
   КАРТОЧКИ
═══════════════════════════════════════════ */
.card { background:var(--surface); border-radius:var(--r-lg); padding:var(--gap-md); margin-bottom:var(--gap-sm); box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); }
.card:active { transform:scale(.985); box-shadow:none; }
.card-title  { font-size:13px; font-weight:600; margin-bottom:var(--gap-sm); color:var(--text); letter-spacing:-.01em; }
.card-animate { animation:fadeInUp var(--dur-slow) var(--ease) both; }
.card-animate:nth-child(1){animation-delay:.04s} .card-animate:nth-child(2){animation-delay:.08s}
.card-animate:nth-child(3){animation-delay:.12s} .card-animate:nth-child(4){animation-delay:.16s}
.card-animate:nth-child(5){animation-delay:.20s} .card-animate:nth-child(6){animation-delay:.24s}
.achievement-card { position:relative; overflow:hidden; }
.achievement-card::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); background-size:200% 100%; animation:shimmer 3s infinite; }

/* ═══════════════════════════════════════════
   КНОПКИ
═══════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--gap-xs); padding:12px var(--gap-lg); font-size:14px; font-weight:500; border:none; border-radius:var(--r-md); cursor:pointer; transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); position:relative; overflow:hidden; user-select:none; white-space:nowrap; }
.btn:active { opacity:.82; transform:scale(.96); }
.btn-primary::before { content:''; position:absolute; inset:0; background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%); transform:scale(0); opacity:0; transition:transform .4s,opacity .4s; border-radius:inherit; }
.btn-primary:active::before { animation:ripple .4s var(--ease) forwards; }
.btn-primary { background:linear-gradient(135deg,#8B5E0A,#C9932A,#D4A843); color:#1A1008; box-shadow:0 4px 16px rgba(201,147,42,.35); font-weight:600; }
.btn-primary:active { box-shadow:none; }
.btn-ghost   { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-success { background:rgba(123,175,110,.15); color:#9FCC92; border:1px solid rgba(123,175,110,.25); }
.btn-danger  { background:rgba(196,97,74,.15); color:#D4826E; border:1px solid rgba(196,97,74,.25); }
.btn-sm      { padding:4px 10px; font-size:11.5px; border-radius:var(--r-xs); }
.btn-cancel  { flex:1; padding:13px; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); border-radius:var(--r-md); font-size:14px; cursor:pointer; transition:opacity var(--dur-fast); }
.btn-cancel:active { opacity:.7; }

/* ═══════════════════════════════════════════
   ИНПУТЫ
═══════════════════════════════════════════ */
.input { width:100%; padding:11px var(--gap-md); border:1.5px solid var(--border); border-radius:var(--r-md); font-size:14px; background:rgba(0,0,0,.25); color:var(--text); outline:none; transition:border-color var(--dur-normal) var(--ease),box-shadow var(--dur-normal) var(--ease); margin-bottom:var(--gap-sm); }
.input:focus { border-color:rgba(201,147,42,.5); box-shadow:0 0 0 3px rgba(201,147,42,.12); }
.input::placeholder { color:var(--muted); }
.input-sm { padding:7px 10px; font-size:12.5px; border-radius:var(--r-sm); margin-bottom:0; }

/* ═══════════════════════════════════════════
   БЕЙДЖИ, ТАБЛИЦЫ, ЛОАДЕР, ТОСТ
═══════════════════════════════════════════ */
.badge { display:inline-block; padding:2px 8px; border-radius:var(--r-full); font-size:11px; font-weight:500; animation:scaleIn var(--dur-normal) var(--ease); }
.badge-green  { background:rgba(123,175,110,.18); color:#9FCC92; }
.badge-red    { background:rgba(196,97,74,.18);   color:#D4826E; }
.badge-amber  { background:rgba(212,168,67,.18);  color:var(--amber); }
.badge-gray   { background:rgba(201,147,42,.1);   color:var(--muted); }
.badge-accent { background:var(--accent-dim);     color:var(--accent); }

table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; color:var(--muted); font-weight:500; padding:5px 7px; border-bottom:1px solid var(--border); font-size:11.5px; letter-spacing:.02em; text-transform:uppercase; }
td { padding:7px; border-bottom:1px solid var(--border); color:var(--text); }
tr:last-child td { border-bottom:none; }
.week-table th { text-align:right; }
.week-table th:first-child { text-align:left; }
.week-table td { text-align:right; }
.week-table td:first-child { text-align:left; color:var(--muted); }

.loader { display:flex; align-items:center; justify-content:center; padding:44px var(--gap-lg); color:var(--muted); font-size:13px; gap:var(--gap-sm); }
.loader::before { content:''; width:16px; height:16px; border:2px solid rgba(201,147,42,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .75s linear infinite; flex-shrink:0; }

.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:rgba(36,22,8,.95); color:#F5EDD8; padding:11px 20px; border-radius:var(--r-full); font-size:13.5px; font-weight:500; z-index:9999; max-width:84%; text-align:center; box-shadow:var(--shadow-lg),0 0 0 1px rgba(201,147,42,.3); pointer-events:none; animation:toastSlideUp .3s var(--ease); white-space:nowrap; backdrop-filter:blur(8px); }
.toast.hiding { animation:toastSlideDown .25s var(--ease) forwards; }

/* ═══════════════════════════════════════════
   СЕКЦИЯ-ЗАГОЛОВОК, РЕСУРС-БАРЫ, СЕРВИСЫ
═══════════════════════════════════════════ */
.section-heading { font-size:13px; font-weight:600; color:var(--text); margin:var(--gap-lg) 0 var(--gap-sm); letter-spacing:-.01em; display:flex; align-items:center; gap:var(--gap-xs); }
.section-heading::after { content:''; flex:1; height:1px; background:var(--border); margin-left:var(--gap-xs); }

.svc-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); }
.svc-row:last-child { border-bottom:none; }
.svc-right { display:flex; gap:var(--gap-sm); align-items:center; }

.res-bar   { display:flex; align-items:center; gap:var(--gap-sm); margin-bottom:7px; }
.res-label { font-size:11.5px; color:var(--muted); width:36px; }
.res-track { flex:1; background:var(--border); border-radius:var(--r-full); height:7px; overflow:hidden; }
.res-fill  { height:7px; border-radius:var(--r-full); background:linear-gradient(90deg,#5A8C4E,#7BAF6E); transition:width .6s var(--ease); animation:progressFill .6s var(--ease) both; }
.res-fill.warn   { background:linear-gradient(90deg,#A07820,#C9932A); }
.res-fill.danger { background:linear-gradient(90deg,#8C3828,#C4614A); }
.res-num   { font-size:11.5px; color:var(--muted); width:30px; text-align:right; font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════
   XP, STAT-GRID, CHART
═══════════════════════════════════════════ */
.xp-bar-track { background:var(--border); border-radius:var(--r-full); height:9px; overflow:hidden; }
.xp-bar-fill  { height:9px; border-radius:var(--r-full); background:linear-gradient(90deg,#8B5E0A,#C9932A,#D4A843); animation:progressFill .9s cubic-bezier(.4,0,.2,1) both; box-shadow:0 0 10px rgba(201,147,42,.5); }
.xp-number    { display:inline-block; animation:xpPop .4s var(--ease); font-variant-numeric:tabular-nums; }

.stat-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-xs); margin-bottom:var(--gap-lg); }
.stat-item  { background:rgba(0,0,0,.2); border-radius:var(--r-md); padding:10px var(--gap-xs); text-align:center; border:1px solid var(--border); }
.stat-value { font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.stat-label { font-size:10px; color:var(--muted); margin-top:2px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }

.chart-wrap { position:relative; height:180px; margin-top:var(--gap-sm); }

/* ═══════════════════════════════════════════
   ВИТРИНА
═══════════════════════════════════════════ */
#page-showcase { padding:0; background:linear-gradient(170deg,#1C1208 0%,#2C1A0A 40%,#1A1208 100%) !important; min-height:calc(100dvh - 64px); position:relative; }
#showcase-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
#page-showcase::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to top,rgba(28,18,8,.8),transparent); pointer-events:none; }

.showcase-header      { text-align:center; padding:32px var(--gap-lg) 24px; position:relative; }
.showcase-logo-icon   { font-size:44px; margin:0 auto 12px; line-height:1; filter:drop-shadow(0 0 12px rgba(201,147,42,.5)); }
.showcase-script-title{ font-family:'Georgia','Times New Roman',serif; font-style:italic; font-size:36px; font-weight:400; color:#F5EDD8; letter-spacing:.02em; margin-bottom:8px; line-height:1.2; text-shadow:0 2px 20px rgba(212,168,67,.4); }
.showcase-subtitle    { font-size:12.5px; color:#C9932A; letter-spacing:.08em; text-transform:uppercase; font-weight:400; opacity:.85; }
.showcase-divider     { width:60px; height:1px; background:linear-gradient(90deg,transparent,#C9932A,transparent); margin:16px auto; }
.showcase-desc-text   { font-size:13.5px; color:rgba(245,237,216,.7); line-height:1.65; padding:0 var(--gap-lg); margin-bottom:8px; }
.showcase-buttons     { padding:0 var(--gap-md) var(--gap-xl); position:relative; z-index:1; }
.showcase-link { display:flex; align-items:center; gap:var(--gap-md); padding:14px var(--gap-md); background:rgba(255,255,255,.04); border-radius:var(--r-md); text-decoration:none; color:#F5EDD8; margin-bottom:10px; border:1px solid rgba(201,147,42,.25); transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); animation:fadeInUp var(--dur-slow) var(--ease) both; backdrop-filter:blur(4px); }
.showcase-link:active { transform:scale(.97); background:rgba(201,147,42,.12); border-color:rgba(201,147,42,.5); }
.showcase-link .showcase-icon  { width:40px; height:40px; background:rgba(201,147,42,.15); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; border:1px solid rgba(201,147,42,.2); }
.showcase-link .showcase-title { font-size:14.5px; font-weight:400; flex:1; letter-spacing:.01em; }
.showcase-link .showcase-arrow { color:#C9932A; font-size:18px; opacity:.7; }
.showcase-footer { text-align:center; padding:var(--gap-lg) var(--gap-md) var(--gap-xl); color:rgba(245,237,216,.35); font-size:10.5px; position:relative; z-index:1; border-top:1px solid rgba(201,147,42,.1); margin-top:var(--gap-sm); }

/* ═══════════════════════════════════════════
   МОДАЛКИ
═══════════════════════════════════════════ */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; align-items:flex-end; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s var(--ease); }
.modal.open { display:flex; }
.modal-box  { background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--gap-lg); width:100%; max-width:480px; animation:fadeInUp .25s var(--ease); box-shadow:var(--shadow-lg); border-top:1px solid var(--border); }
.modal-title{ font-size:15px; font-weight:600; margin-bottom:var(--gap-lg); color:var(--text); letter-spacing:-.02em; }
.modal-btns { display:flex; gap:var(--gap-sm); margin-top:var(--gap-sm); }
.schedule-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.schedule-modal-box { background:var(--surface); border-radius:var(--r-xl); padding:var(--gap-xl); margin:var(--gap-lg); width:100%; max-width:400px; box-shadow:var(--shadow-lg); animation:scaleIn .25s var(--ease); border:1px solid var(--border); }

/* ═══════════════════════════════════════════
   DEV BAR / LOGIN / МЕДИА / ФОРМАТИРОВАНИЕ
═══════════════════════════════════════════ */
.dev-bar { display:none; align-items:center; gap:var(--gap-sm); padding:6px var(--gap-md); background:rgba(10,6,0,.85); border-bottom:1px solid var(--border); font-size:12px; backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; overflow-x:auto; scrollbar-width:none; }
.dev-bar::-webkit-scrollbar { display:none; }
.role-switcher { display:flex; gap:3px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:var(--r-full); padding:2px; flex-shrink:0; }
.role-btn { padding:3px 10px; border:none; border-radius:var(--r-full); background:transparent; color:var(--muted); font-size:11px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background var(--dur-fast),color var(--dur-fast); }
.role-btn.active { background:rgba(201,147,42,.25); color:#D4A843; border:1px solid rgba(201,147,42,.35); }
.dev-toggle { width:42px; height:22px; border-radius:var(--r-full); background:var(--accent); cursor:pointer; position:relative; transition:background var(--dur-normal) var(--ease); flex-shrink:0; }
.dev-toggle-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left var(--dur-normal) var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2); }

.login-screen { display:none; min-height:100dvh; flex-direction:column; align-items:center; justify-content:center; gap:var(--gap-xl); padding:var(--gap-xl); text-align:center; background:radial-gradient(ellipse at 50% 30%,rgba(201,147,42,.12) 0%,transparent 70%); }
.login-logo   { width:72px; height:72px; background:rgba(201,147,42,.12); border-radius:var(--r-xl); display:flex; align-items:center; justify-content:center; font-size:36px; border:1.5px solid rgba(201,147,42,.25); }

.media-preview      { display:flex; align-items:center; justify-content:space-between; padding:9px var(--gap-md); background:var(--surface-2); border-radius:var(--r-md); border:1px solid var(--border); margin-bottom:var(--gap-sm); animation:scaleIn var(--dur-normal) var(--ease); }
.media-upload-label { display:flex; align-items:center; justify-content:center; gap:var(--gap-sm); padding:11px; border:1.5px dashed var(--border); border-radius:var(--r-md); cursor:pointer; font-size:13px; color:var(--muted); transition:border-color var(--dur-normal),background var(--dur-normal); }
.media-upload-label:hover { border-color:rgba(201,147,42,.5); background:rgba(201,147,42,.08); color:var(--accent); }

.fmt-btns { display:flex; gap:var(--gap-xs); flex-wrap:wrap; margin-bottom:var(--gap-sm); }
.fmt-btn  { padding:5px 12px; border:1.5px solid var(--border); border-radius:var(--r-xs); background:transparent; font-size:13px; cursor:pointer; color:var(--text); transition:background var(--dur-fast),border-color var(--dur-fast); }
.fmt-btn:hover  { background:rgba(201,147,42,.1); border-color:rgba(201,147,42,.4); }
.fmt-btn:active { opacity:.7; transform:scale(.95); }

.format-hint { display:none; font-size:11.5px; color:var(--amber); padding:6px 10px; background:var(--amber-dim); border-radius:var(--r-sm); margin-bottom:var(--gap-sm); }

/* ═══════════════════════════════════════════
   ПРОФИЛЬ — Hero, Path, Ref, Quests
═══════════════════════════════════════════ */
.profile-hero { background:linear-gradient(160deg,var(--surface),rgba(201,147,42,.07)); border:1px solid var(--border); border-radius:var(--r-xl); padding:22px var(--gap-lg) 18px; text-align:center; margin-bottom:var(--gap-sm); position:relative; overflow:hidden; }
.profile-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(201,147,42,.1),transparent 70%); pointer-events:none; }
.profile-level-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(201,147,42,.12); border:1px solid rgba(201,147,42,.25); border-radius:var(--r-full); padding:4px 13px; font-size:11px; color:#D4A843; font-weight:500; letter-spacing:.03em; margin-bottom:14px; }
.profile-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,rgba(60,30,8,.8),rgba(100,56,16,.8)); border:2px solid rgba(201,147,42,.35); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 0 24px rgba(201,147,42,.18); }
.profile-name { font-size:20px; font-weight:700; letter-spacing:-.03em; margin-bottom:0; color:var(--text); }
.xp-row-labels { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-bottom:5px; }

.level-path     { padding:4px 0 8px; }
.level-path-row { display:flex; align-items:flex-start; justify-content:space-between; position:relative; }
.lp-item        { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0; z-index:1; }
.lp-connector   { flex:1; height:2px; background:rgba(201,147,42,.15); margin-top:16px; }
.lp-circle      { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; border:2px solid transparent; flex-shrink:0; }
.lp-done        { background:rgba(201,147,42,.2); border-color:rgba(201,147,42,.45); }
.lp-cur         { background:rgba(201,147,42,.15); border-color:#C9932A; box-shadow:0 0 14px rgba(201,147,42,.4); }
.lp-lock        { background:rgba(0,0,0,.25); border-color:rgba(201,147,42,.08); opacity:.4; }
.lp-name        { font-size:8px; color:var(--muted); text-align:center; max-width:48px; line-height:1.25; word-break:break-word; hyphens:auto; }
.lp-name-cur    { color:#D4A843; font-weight:600; }

.ref-row      { display:flex; align-items:center; gap:var(--gap-md); padding:13px var(--gap-md); background:linear-gradient(135deg,rgba(201,147,42,.07),var(--surface)); border:1px solid rgba(201,147,42,.2); border-radius:var(--r-lg); margin-bottom:var(--gap-sm); }
.ref-icon-wrap{ width:40px; height:40px; border-radius:50%; background:rgba(201,147,42,.12); border:1px solid rgba(201,147,42,.2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ref-texts    { flex:1; }
.ref-title    { font-size:13px; font-weight:600; color:var(--text); margin-bottom:1px; }
.ref-sub      { font-size:11px; color:var(--muted); }
.ref-copy-btn { flex-shrink:0; padding:7px 14px; font-size:11.5px; }

.quest-row       { display:flex; align-items:center; gap:var(--gap-sm); padding:11px var(--gap-md); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:var(--gap-xs); transition:opacity var(--dur-fast); }
.quest-done      { opacity:.55; }
.quest-ico       { font-size:22px; flex-shrink:0; }
.quest-body      { flex:1; }
.quest-name      { font-size:13px; font-weight:500; color:var(--text); }
.quest-desc      { font-size:10.5px; color:var(--muted); margin-top:1px; }
.quest-prog-track{ height:3px; background:rgba(201,147,42,.12); border-radius:var(--r-full); overflow:hidden; margin-top:5px; }
.quest-prog-fill { height:3px; background:linear-gradient(90deg,#8B5E0A,#C9932A); border-radius:var(--r-full); transition:width .5s var(--ease); }
.quest-reward    { text-align:right; flex-shrink:0; }

.shop-balance-card { text-align:center; padding:var(--gap-lg); margin-bottom:var(--gap-sm); background:linear-gradient(135deg,rgba(201,147,42,.1),var(--surface)); border:1px solid rgba(201,147,42,.25); border-radius:var(--r-xl); }
.shop-stars-val    { font-size:32px; font-weight:700; color:#D4A843; letter-spacing:-.02em; }

/* ═══════════════════════════════════════════
   ЛИДЕРБОРД, КОЛЕСО
═══════════════════════════════════════════ */
.leader-header { text-align:center; padding:var(--gap-md) 0 var(--gap-lg); }
.leader-title  { font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.leader-sub    { font-size:11.5px; color:var(--muted); margin-top:3px; }
.leader-row    { display:flex; align-items:center; gap:var(--gap-md); padding:11px var(--gap-md); border-radius:var(--r-lg); margin-bottom:var(--gap-xs); background:var(--surface); box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:transform var(--dur-fast); }
.leader-row.is-me { border-color:rgba(201,147,42,.4); background:rgba(201,147,42,.08); }

.wheel-pointer      { font-size:26px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.wheel-prizes-legend{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:var(--gap-md); }
.wheel-prize-chip   { display:flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:var(--r-full); color:rgba(255,255,255,.9); text-shadow:0 1px 2px rgba(0,0,0,.4); }

/* ── Premium анимированная рамка ─────────────────────────── */
@keyframes premiumRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes premiumPulse {
  0%, 100% { opacity: .8; }
  50%       { opacity: 1; }
}

.premium-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.premium-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    #C9932A 0deg,
    #F5EDD8 60deg,
    #D4A843 120deg,
    #8B5E0A 180deg,
    #C9932A 240deg,
    #F5EDD8 300deg,
    #C9932A 360deg
  );
  animation: premiumRotate 3s linear infinite, premiumPulse 2s ease-in-out infinite;
  z-index: 0;
}

.premium-avatar-wrap::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--surface);
  z-index: 1;
}

.premium-avatar-wrap .profile-avatar {
  position: relative;
  z-index: 2;
}

.premium-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(201,147,42,.9));
  animation: premiumPulse 2s ease-in-out infinite;
}

/* ── Premium частицы — CSS-only ─────────────────────────── */
@keyframes orbitA { 0%{transform:rotate(0deg) translateX(46px) rotate(0deg)} 100%{transform:rotate(360deg) translateX(46px) rotate(-360deg)} }
@keyframes orbitB { 0%{transform:rotate(120deg) translateX(46px) rotate(-120deg)} 100%{transform:rotate(480deg) translateX(46px) rotate(-480deg)} }
@keyframes orbitC { 0%{transform:rotate(240deg) translateX(46px) rotate(-240deg)} 100%{transform:rotate(600deg) translateX(46px) rotate(-600deg)} }
@keyframes orbitD { 0%{transform:rotate(60deg) translateX(50px) rotate(-60deg)} 100%{transform:rotate(420deg) translateX(50px) rotate(-420deg)} }
@keyframes orbitE { 0%{transform:rotate(180deg) translateX(50px) rotate(-180deg)} 100%{transform:rotate(540deg) translateX(50px) rotate(-540deg)} }
@keyframes orbitF { 0%{transform:rotate(300deg) translateX(42px) rotate(-300deg)} 100%{transform:rotate(660deg) translateX(42px) rotate(-660deg)} }
@keyframes sparkle { 0%,100%{opacity:.3;transform:scale(.6)} 50%{opacity:1;transform:scale(1)} }

.premium-particle { position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; pointer-events:none; z-index:5; }
.premium-particle:nth-child(1) { background:rgba(201,147,42,.9); animation:orbitA 3s linear infinite, sparkle 1.2s ease-in-out infinite; }
.premium-particle:nth-child(2) { background:rgba(245,237,216,.9); animation:orbitB 3s linear infinite, sparkle 1.5s ease-in-out .4s infinite; width:4px;height:4px; }
.premium-particle:nth-child(3) { background:rgba(212,168,67,.9); animation:orbitC 3s linear infinite, sparkle 1.8s ease-in-out .8s infinite; }
.premium-particle:nth-child(4) { background:rgba(255,220,100,.8); animation:orbitD 4s linear infinite, sparkle 1s ease-in-out .2s infinite; width:3px;height:3px; }
.premium-particle:nth-child(5) { background:rgba(201,147,42,.7); animation:orbitE 4s linear infinite, sparkle 1.4s ease-in-out .6s infinite; width:4px;height:4px; }
.premium-particle:nth-child(6) { background:rgba(245,237,216,.8); animation:orbitF 3.5s linear infinite, sparkle 1.6s ease-in-out 1s infinite; width:3px;height:3px; }

/* ── Premium аватар в лидерборде ─────────────────────────── */
.leader-premium-avatar {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(#C9932A 0deg, #F5EDD8 60deg, #D4A843 120deg, #8B5E0A 180deg, #C9932A 240deg, #F5EDD8 300deg, #C9932A 360deg);
  animation: premiumRotate 3s linear infinite;
}

/* ── Фикс позиции частиц — центрируем по аватару ─────────── */
.premium-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.premium-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.premium-avatar-wrap .profile-avatar {
  position: relative;
  z-index: 2;
  font-size: 48px;
  line-height: 1;
}

.premium-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  z-index: 6;
  filter: drop-shadow(0 0 6px rgba(201,147,42,.9));
  animation: premiumPulse 2s ease-in-out infinite;
}

/* ── Premium аватар в лидерборде ─────────────────────────── */
.leader-avatar-premium {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(#C9932A 0deg,#F5EDD8 60deg,#D4A843 120deg,#8B5E0A 180deg,#C9932A 240deg,#F5EDD8 300deg,#C9932A 360deg);
  animation: premiumRotate 3s linear infinite;
  padding: 2px;
  box-sizing: border-box;
}

/* ── Premium профиль v3 — правильное центрирование ──────── */
.premium-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}
.premium-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.premium-orb {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #C9932A;
}
.premium-orb.p1 { animation: orbitA 3s linear infinite, sparkle 1.2s ease-in-out infinite; }
.premium-orb.p2 { animation: orbitB 3s linear infinite, sparkle 1.5s .4s ease-in-out infinite; background:#F5EDD8; width:4px;height:4px;margin:-2px 0 0 -2px; }
.premium-orb.p3 { animation: orbitC 3s linear infinite, sparkle 1.8s .8s ease-in-out infinite; background:#D4A843; }
.premium-orb.p4 { animation: orbitD 4s linear infinite, sparkle 1s .2s ease-in-out infinite; background:#FFE066; width:4px;height:4px;margin:-2px 0 0 -2px; }
.premium-orb.p5 { animation: orbitE 4s linear infinite, sparkle 1.4s .6s ease-in-out infinite; width:5px;height:5px;margin:-2.5px 0 0 -2.5px; }
.premium-orb.p6 { animation: orbitF 3.5s linear infinite, sparkle 1.6s 1s ease-in-out infinite; background:#F5EDD8; width:3px;height:3px;margin:-1.5px 0 0 -1.5px; }
.profile-avatar.prem {
  position: relative;
  z-index: 2;
  font-size: 48px;
  line-height: 1;
}
.premium-crown {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(201,147,42,.9));
  animation: premiumPulse 2s ease-in-out infinite;
}

/* ── Premium wrap v3 — правильное центрирование ─────────── */
.premium-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}
.premium-orbit { position:absolute;inset:0;border-radius:50%; }
.premium-orb {
  position:absolute; top:50%; left:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:#C9932A;
}
.premium-orb.p1{animation:orbitA 3s linear infinite,sparkle 1.2s ease-in-out infinite;}
.premium-orb.p2{animation:orbitB 3s linear infinite,sparkle 1.5s .4s ease-in-out infinite;background:#F5EDD8;width:4px;height:4px;margin:-2px 0 0 -2px;}
.premium-orb.p3{animation:orbitC 3s linear infinite,sparkle 1.8s .8s ease-in-out infinite;background:#D4A843;}
.premium-orb.p4{animation:orbitD 4s linear infinite,sparkle 1s .2s ease-in-out infinite;background:#FFE066;width:4px;height:4px;margin:-2px 0 0 -2px;}
.premium-orb.p5{animation:orbitE 4s linear infinite,sparkle 1.4s .6s ease-in-out infinite;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;}
.premium-orb.p6{animation:orbitF 3.5s linear infinite,sparkle 1.6s 1s ease-in-out infinite;background:#F5EDD8;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;}
.profile-avatar.prem { position:relative;z-index:2;font-size:48px;line-height:1; }
.premium-crown {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:18px; z-index:3;
  filter:drop-shadow(0 0 6px rgba(201,147,42,.9));
  animation:premiumPulse 2s ease-in-out infinite;
}