/* ============================================================
   XBoom — единый файл стилей. Тёмная тема. Дашборд-лейаут.
   1) токены 2) база 3) кнопки/формы 4) язык 5) оболочка
   6) сайдбар 7) топбар 8) hero 9) табы 10) игры 11) чат
   12) auth 13) stub 14) админка 15) адаптив
   ============================================================ */

/* 1) токены ------------------------------------------------- */
:root{
  /* нейтральный тёмный фон (как в Oasis), без фиолетового */
  --bg:#15151a; --bg-2:#1d1d23; --bg-3:#25252d; --bg-4:#2e2e38;
  --border:#2b2b33; --border-2:#393942;
  --text:#f3f3f6; --text-dim:#9a9aa6; --text-mut:#6a6a76;
  /* оранжевый акцент */
  --accent:#f5860a; --accent-2:#ffa12e; --accent-grad:linear-gradient(135deg,#ffa733,#f5790a);
  --gold:#f5b301; --gold-grad:linear-gradient(135deg,#ffc24d,#f5980a);
  --blue-grad:linear-gradient(120deg,#16335f,#2456a0 55%,#3f7bd1);
  --green:#22c55e; --red:#ef4444;
  --radius:14px; --radius-sm:10px; --shadow:0 10px 40px rgba(0,0,0,.5);
  --sb-w:232px; --chat-w:300px;
}

/* 2) база --------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.inline{display:inline}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px}

/* 3) кнопки / формы ---------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-weight:600;font-size:14px;border-radius:var(--radius-sm);padding:10px 18px;transition:filter .15s,transform .05s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent-grad);color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--gold{background:var(--gold-grad);color:#241200}
.btn--ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--border-2)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}
.btn--lg{padding:14px 26px;font-size:16px}
.btn--sm{padding:7px 12px;font-size:13px}
.btn--block{width:100%}
.btn--tg{background:#229ed9;color:#fff}
.btn--google{background:#fff;color:#1f1f1f}
.btn--danger{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}

.form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field__lbl{font-size:13px;color:var(--text-dim)}
.input{background:var(--bg);border:1px solid var(--border-2);color:var(--text);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:15px;width:100%;transition:border-color .15s}
.input:focus{outline:none;border-color:var(--accent)}
.input--sm{padding:7px 9px;font-size:13px;width:auto}
select.input{cursor:pointer}
.alert{border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-bottom:14px}
.alert--err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.alert--ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#86efac}

/* 4) язык --------------------------------------------------- */
.lang{position:relative}
.lang__btn{background:transparent;border:1px solid var(--border-2);color:var(--text-dim);border-radius:999px;padding:7px 12px;font-size:13px;cursor:pointer}
.lang__menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;min-width:160px;display:none;box-shadow:var(--shadow);z-index:60}
.lang.open .lang__menu{display:block}
.lang__menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--text-dim);font-size:14px}
.lang__menu a:hover,.lang__menu a.active{background:var(--bg-3);color:var(--text)}

/* 5) оболочка ---------------------------------------------- */
.shell{display:flex;min-height:100vh}
.mn{flex:1;min-width:0;display:flex;flex-direction:column}
.body{flex:1;display:flex;min-height:0}
.content{flex:1;min-width:0;padding:22px 26px;overflow:auto}

/* 6) сайдбар ------------------------------------------------ */
.sb{width:var(--sb-w);flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.sb__logo{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;font-weight:800;font-size:20px;letter-spacing:1px}
.sb__logo-ic{width:34px;height:34px;display:grid;place-items:center;background:var(--gold-grad);border-radius:10px;font-size:18px}
.sb__logo-tx b{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sb__nav{display:flex;flex-direction:column;gap:2px}
.sb__i{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--radius-sm);color:var(--text-dim);font-weight:500;font-size:14px;transition:background .15s,color .15s}
.sb__i:hover{background:var(--bg-3);color:var(--text)}
.sb__i.is-active{background:var(--accent-grad);color:#fff}
.sb__ic{width:22px;text-align:center;font-size:16px;filter:grayscale(.2)}
.sb__tx{flex:1}
.sb__other{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.sb__other-h{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mut);padding:0 11px 8px}
.sb__o{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:13px;color:var(--text-mut)}
.sb__o:hover{color:var(--text-dim)}

/* 7) топбар ------------------------------------------------- */
.top{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--border);
  background:rgba(14,11,26,.7);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.top__burger{display:none;background:transparent;border:0;color:var(--text);font-size:20px;cursor:pointer}
.top__rewards{display:flex;align-items:center;gap:10px;background:var(--bg-3);border:1px solid var(--border-2);border-radius:999px;padding:6px 16px 6px 8px}
.top__gift{width:32px;height:32px;display:grid;place-items:center;background:var(--gold-grad);border-radius:50%;font-size:16px}
.top__rewards-t{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.top__rewards-s{font-size:11px;color:var(--text-mut)}
.top__search{position:relative;flex:1;max-width:420px}
.top__search input{width:100%;background:var(--bg);border:1px solid var(--border-2);color:var(--text);border-radius:999px;padding:10px 16px;font-size:14px}
.top__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.bal{display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--border-2);border-radius:999px;padding:5px 6px 5px 14px}
.bal__sum{font-weight:800;font-size:15px;color:var(--gold)}
.bal__cur{font-size:13px;color:var(--text-dim)}
.bal__plus{width:26px;height:26px;display:grid;place-items:center;background:var(--accent-grad);border-radius:50%;color:#fff;font-weight:700}
.prof{display:flex;align-items:center;gap:8px}
.prof__av{width:34px;height:34px;display:grid;place-items:center;background:var(--accent-grad);border-radius:50%;font-weight:800;color:#fff}
.prof__nm{font-weight:600;font-size:14px}
.prof__out{background:transparent;border:0;color:var(--text-mut);font-size:16px;cursor:pointer}
.prof__out:hover{color:var(--red)}

/* 8) hero --------------------------------------------------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;
  background:radial-gradient(600px 260px at 85% 120%,rgba(255,140,30,.25),transparent 60%),var(--blue-grad);
  border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:30px 32px;margin-bottom:22px}
.hero__txt{max-width:60%}
.hero__title{font-size:34px;line-height:1.12;margin:0 0 10px;font-weight:800}
.hero__sub{font-size:16px;color:#d7d2ee;margin:0 0 20px}
.hero__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero__promo{background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.4);border-radius:10px;padding:11px 16px;font-weight:800;letter-spacing:1px}
.hero__art{font-size:96px;line-height:1;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}

/* 9) табы --------------------------------------------------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:22px}
.tabs__i{background:var(--bg-2);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tabs__i.is-active{background:var(--bg-4);color:var(--text);border-color:var(--accent)}

/* 10) игры -------------------------------------------------- */
.gsec{margin-bottom:28px}
.gsec__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.gsec__title{font-size:19px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.gsec__all{width:30px;height:30px;display:grid;place-items:center;background:var(--bg-3);border-radius:8px;color:var(--text-dim)}
.gsec__all:hover{color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gcard{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .15s,border-color .15s}
.gcard:hover{transform:translateY(-4px);border-color:var(--accent)}
.gcard__img{aspect-ratio:1/1;background:linear-gradient(135deg,#241c45,#171331);position:relative}
.gcard__img::after{content:"🎮";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;opacity:.25}
.gcard__nm{padding:9px 10px;font-size:12px;color:var(--text-dim);text-align:center}

/* 11) чат --------------------------------------------------- */
.chat{width:var(--chat-w);flex-shrink:0;background:var(--bg-2);border-left:1px solid var(--border);display:flex;flex-direction:column;height:calc(100vh - 57px);position:sticky;top:57px}
.chat__h{padding:14px 16px;font-weight:700;font-size:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;color:var(--accent-2)}
.chat__online{padding:8px 16px;font-size:12px;color:var(--green)}
.chat__feed{flex:1;overflow:auto;padding:8px 14px;display:flex;flex-direction:column;gap:12px}
.chat__msg{display:flex;gap:9px}
.chat__av{width:30px;height:30px;border-radius:50%;background:var(--bg-4);flex-shrink:0}
.chat__bub{background:var(--bg-3);border-radius:10px;padding:8px 11px;font-size:12px}
.chat__bub b{display:block;color:var(--accent-2);font-size:11px;margin-bottom:2px}
.chat__bub span{color:var(--text-dim)}
.chat__send{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)}
.chat__send input{flex:1;background:var(--bg);border:1px solid var(--border-2);color:var(--text);border-radius:999px;padding:9px 14px;font-size:13px}
.chat__send button{width:38px;border:0;background:var(--accent-grad);color:#fff;border-radius:50%;cursor:pointer}

/* 12) auth -------------------------------------------------- */
.auth{display:flex;justify-content:center;padding:30px 10px}
.auth__card{width:100%;max-width:420px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.auth__title{margin:0 0 20px;font-size:24px;font-weight:700;text-align:center}
.auth__oauth{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.auth__alt{text-align:center;color:var(--text-dim);font-size:14px;margin:18px 0 0}
.auth__alt a{color:var(--accent-2);font-weight:600}

/* 13) STUB-метка ------------------------------------------- */
.stub{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.5px;line-height:1;
  padding:3px 5px;border-radius:5px;background:rgba(245,134,10,.18);color:var(--gold);
  border:1px solid rgba(245,134,10,.5);vertical-align:middle}
.stub--abs{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.is-stub{opacity:.78}

/* 14) АДМИНКА ----------------------------------------------- */
body.adm{display:flex}
.adm-side{width:230px;flex-shrink:0;background:var(--bg-2);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.adm-logo{font-weight:800;font-size:18px;letter-spacing:1px;margin:4px 8px 18px}
.adm-logo span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.adm-logo small{color:var(--text-mut);font-weight:600;font-size:11px;letter-spacing:1px}
.adm-nav{display:flex;flex-direction:column;gap:3px}
.adm-nav__i{padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-dim);font-weight:500;font-size:14px}
.adm-nav__i:hover{background:var(--bg-3);color:var(--text)}
.adm-nav__i.is-active{background:var(--accent-grad);color:#fff}
.adm-side__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.adm-who{font-size:12px;color:var(--text-mut)}
.adm-back{font-size:13px;color:var(--text-dim)}
.adm-main{flex:1;padding:28px 32px;max-width:1100px}
.adm-h1{font-size:24px;font-weight:700;margin:0 0 22px}
.adm-tabs{display:flex;gap:6px;margin:0 0 22px;border-bottom:1px solid var(--border)}
.adm-tab{padding:10px 16px;color:var(--text-dim);font-weight:600;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.adm-tab:hover{color:var(--text)}
.adm-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}
.adm-muted{color:var(--text-mut);font-size:13px;margin-top:14px}
.adm-note{font-size:11px;color:var(--text-mut)}
.adm-pager{display:flex;align-items:center;gap:14px;justify-content:center;margin:18px 0 4px}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.adm-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.adm-card__n{display:block;font-size:30px;font-weight:800}
.adm-card__l{color:var(--text-dim);font-size:13px}
.adm-form{max-width:560px;display:flex;flex-direction:column;gap:18px}
.adm-fs{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.adm-fs legend{padding:0 8px;color:var(--accent-2);font-weight:700;font-size:13px}
.fs-hint{font-size:12px;color:var(--text-mut);margin-top:4px}
.adm-addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.adm-addrow .input{width:auto;flex:1;min-width:150px}
.adm-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.adm-table th{text-align:left;color:var(--text-dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--border)}
.adm-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.adm-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adm-chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text-dim)}
.dot{font-size:11px;font-weight:600}
.dot--ok{color:var(--green)}.dot--warn{color:var(--gold)}.dot--err{color:var(--red)}.dot--mut{color:var(--text-mut)}
.adm-tags{display:flex;gap:6px;flex-wrap:wrap;margin:3px 0}
.tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.tag--main{background:rgba(245,179,1,.15);color:var(--gold)}
.tag--auth{background:rgba(124,92,255,.18);color:var(--accent-2)}

/* 15) адаптив ---------------------------------------------- */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45}
@media(max-width:1100px){ .chat{display:none} }
@media(max-width:860px){
  .top__rewards-s{display:none}
  .hero__txt{max-width:100%}
  .hero__art{display:none}
}
@media(max-width:760px){
  .sb{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .sb.is-open{transform:none}
  .sb-overlay.is-open{display:block}
  .top__burger{display:block}
  .top__rewards{display:none}
  .prof__nm{display:none}
  .content{padding:16px}
  .hero{padding:22px}
  .hero__title{font-size:26px}
}
@media(max-width:720px){
  body.adm{flex-direction:column}
  .adm-side{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .adm-nav{flex-direction:row;flex-wrap:wrap}
  .adm-main{padding:18px}
}