:root{
  --bg:#070707;
  --bg-2:#0b0b0b;
  --panel:#121212;
  --panel-2:#181818;
  --panel-3:#1f1f1f;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.12);
  --text:#f3f0ea;
  --muted:#9d9588;
  --soft:#c8c1b5;
  --accent:#f6ae00;
  --accent-2:#ffca4d;
  --accent-soft:rgba(246,174,0,.12);
  --shadow:0 18px 60px rgba(0,0,0,.42);
  --radius:24px;
  --danger:#cf4f4f;
  --success:#3cbf7b;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at top,rgba(246,174,0,.05),transparent 18%),linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text)}a{text-decoration:none;color:inherit}img{max-width:100%}
.card{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.01)),var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.eyebrow{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(246,174,0,.2);color:var(--accent-2);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.btn-primary,.btn-secondary,.btn-danger,.tab{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:16px;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:800;transition:.16s ease}
.btn-primary{background:var(--accent);color:#17120a}.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn-secondary,.tab{background:var(--panel-2);border-color:var(--line);color:var(--text)}.btn-secondary:hover,.tab:hover{border-color:rgba(246,174,0,.24);background:var(--panel-3)}
.btn-danger{background:#a83333;color:#fff}.tab.active{background:var(--accent);color:#15110a;border-color:transparent}
.message{min-height:24px;margin-top:12px}.message.ok,.message.error{padding:14px 16px;border-radius:18px}.message.ok{background:rgba(60,191,123,.08);border:1px solid rgba(60,191,123,.2);color:#bdf4d5}.message.error{background:rgba(207,79,79,.11);border:1px solid rgba(207,79,79,.2);color:#ffd0d0}
input,textarea,select{width:100%;background:#0d0d0d;border:1px solid #2a2a2a;color:var(--text);padding:14px 15px;border-radius:16px;outline:none;font:inherit;transition:.16s ease}input:focus,textarea:focus,select:focus{border-color:rgba(246,174,0,.35);box-shadow:0 0 0 4px rgba(246,174,0,.08)}textarea{resize:vertical}label{display:grid;gap:8px;font-weight:700}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.inline-check,.check-row{display:flex;align-items:center;gap:10px;font-weight:700}.inline-check input,.check-row input{width:auto}
.auth-body,.legal-body,.status-body{min-height:100vh;padding:28px}.auth-shell{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:24px}.auth-hero,.auth-panel,.hero-banner,.topbar,.sidebar,.wallet-card,.news-card,.profile-card,.feature-card,.game-card,.feed-item,.mini-card,.kpi,.status-card,.legal,.support-grid>.card,.table-wrap,.dashboard-block{padding:24px}
.form{display:none;gap:14px}.form.active{display:grid}.tabs{display:flex;gap:10px;margin-bottom:18px}.auth-panel{display:flex;flex-direction:column}.links-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}.links-row a{color:var(--muted)}.links-row a:hover{color:var(--text)}
.auth-hero{position:relative;overflow:hidden;min-height:680px;display:flex;flex-direction:column;justify-content:space-between}.auth-hero:after{content:"";position:absolute;right:-140px;bottom:-140px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(246,174,0,.12),transparent 68%)}.auth-hero h1{font-size:clamp(54px,7vw,94px);line-height:.95;margin:22px 0 16px;max-width:760px;letter-spacing:-.04em}.auth-hero p{font-size:18px;max-width:620px;color:var(--soft)}
.layout{display:grid;grid-template-columns:280px 1fr;gap:20px;padding:20px;min-height:100vh}.sidebar{display:flex;flex-direction:column;justify-content:space-between;position:sticky;top:20px;height:calc(100vh - 40px)}.brand{font-size:28px;font-weight:900;letter-spacing:.08em;color:var(--accent)}.sidebar-sub{margin-top:6px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.16em}
.nav-link{display:block;padding:14px 16px;border-radius:16px;margin-top:8px;background:var(--panel-2);border:1px solid transparent;color:var(--text)}.nav-link:hover{border-color:rgba(246,174,0,.18)}.nav-link.active{background:var(--accent);color:#17120a}.nav-admin-link{box-shadow:inset 0 0 0 1px rgba(246,174,0,.18)}
.content{display:grid;gap:20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px}.topbar h1,.hero-banner h2{margin:14px 0 0;font-size:44px;line-height:1.02;letter-spacing:-.03em}.topbar-sub,.section-copy,.muted{color:var(--muted);line-height:1.65}.user-chip{display:flex;align-items:center;gap:12px;background:var(--panel-2);padding:12px 14px;border-radius:22px;border:1px solid var(--line)}.user-chip img{width:58px;height:58px;border-radius:18px;object-fit:cover;background:#202020}.user-chip span,.user-chip small,.subtle{display:block;color:var(--muted);font-size:13px}
.page-section{display:none}.page-section.active{display:block}.hero-banner{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.release-hero{min-height:340px}.hero-copy p{max-width:620px;font-size:17px;color:var(--soft)}.hero-actions,.toolbar,.filters-bar,.admin-subnav,.actions{display:flex;gap:12px;flex-wrap:wrap}.section-spacer{margin-top:18px}.subtle-surface{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.01)),var(--panel-2)}.poster-side{display:grid;gap:14px}
.feature-band,.stats-grid,.wallet-grid,.support-grid,.profile-layout,.games-grid,.news-grid,.kpi-grid,.dashboard-grid,.faq-list{display:grid;gap:18px}.stats-grid.three-up{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1.2fr .8fr}
.mini-card,.feature-card,.game-card,.feed-item,.wallet-card,.news-card,.profile-card,.kpi,.ticket-card,.faq-item{background:var(--panel-2);border:1px solid var(--line);border-radius:22px}.mini-card,.feature-card,.kpi{padding:22px}.mini-card span,.kpi span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.mini-card strong,.kpi strong{display:block;margin-top:10px;font-size:26px}
.games-grid{grid-template-columns:repeat(3,1fr)}.compact-grid{grid-template-columns:repeat(2,1fr)}.game-card{display:flex;flex-direction:column;gap:14px;overflow:hidden}.game-cover{height:210px;border-radius:18px;background-size:cover;background-position:center;background-image:linear-gradient(135deg,#201503,#8b5f08 45%,#111 100%);border:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-end;padding:18px}.game-cover span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff1c8}.game-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}.status-pill,.priority-pill,.ticket-state,.pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(246,174,0,.1);border:1px solid rgba(246,174,0,.18);color:#ffd574;font-size:12px;font-weight:700}.pill.ghost{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--soft)}
.news-grid,.wallet-grid,.profile-layout,.support-grid{grid-template-columns:1fr 1fr}.money{font-size:46px;font-weight:900;color:var(--accent-2)}.stack{display:grid;gap:14px}.feed-item{padding:18px}.feed-item p{margin:0 0 8px;color:var(--soft);line-height:1.6}.feed-item strong{display:block;margin-bottom:6px}
.filters-bar{padding:14px 16px}.filters-bar input{flex:1;min-width:220px}.filters-bar select{min-width:180px}.minimal-filter{padding:0;background:none;border:none}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}.section-head.compact{margin-bottom:18px}.section-head h2{margin:10px 0 0}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}.table th{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.table-wrap{overflow:auto}
.admin-subnav{padding:12px}.admin-pane{display:none}.admin-pane.active{display:block}.support-grid .card h3,.news-card h3,.game-card h3,.feature-card h3,.dashboard-block h3{margin:0 0 10px}.empty-state{padding:24px;text-align:center;color:var(--muted);border-radius:20px;border:1px dashed rgba(246,174,0,.15);background:rgba(255,255,255,.01)}
.ticket-grid{grid-template-columns:.95fr 1.05fr}.ticket-card{padding:18px}.ticket-top,.ticket-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.ticket-title{margin:0;font-size:18px}.ticket-badges{display:flex;gap:8px;flex-wrap:wrap}.priority-high{background:rgba(246,174,0,.12)}.priority-critical{background:rgba(207,79,79,.14);border-color:rgba(207,79,79,.2);color:#ffc5c5}.ticket-state.open{background:rgba(60,191,123,.1);border-color:rgba(60,191,123,.18);color:#9af0c3}.ticket-state.in_progress{background:rgba(246,174,0,.12);border-color:rgba(246,174,0,.18);color:#ffd574}.ticket-state.closed{background:rgba(255,255,255,.05);border-color:var(--line);color:#dbd4cb}.callout{padding:16px;border:1px solid var(--line-strong);border-radius:18px;background:#111}.callout p{margin:8px 0 0;color:var(--soft)}
.faq-list{grid-template-columns:1fr}.faq-item{overflow:hidden}.faq-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:none;border:none;color:var(--text);font:inherit;font-weight:800;cursor:pointer;text-align:left}.faq-answer{display:none;padding:0 20px 20px;color:var(--soft);line-height:1.7}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-icon{transform:rotate(45deg)}.faq-icon{font-size:24px;line-height:1;color:var(--accent-2);transition:.16s ease}
.stack-form{display:grid;gap:14px}.legal{max-width:1040px;margin:0 auto}.legal h1{font-size:46px}.legal h2{margin-top:30px}.legal p,.legal li{line-height:1.75;color:#e9e0d7;font-size:17px}.legal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.status-card{max-width:720px;margin:0 auto;text-align:left}.status-card h1{font-size:48px;margin:16px 0}
code{background:#111;padding:2px 6px;border-radius:8px;border:1px solid var(--line)}
@media (max-width:1220px){.auth-shell,.hero-banner,.news-grid,.wallet-grid,.profile-layout,.support-grid,.dashboard-grid,.ticket-grid{grid-template-columns:1fr}.games-grid,.compact-grid,.stats-grid.three-up,.kpi-grid,.form-row{grid-template-columns:1fr 1fr}.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto}}
@media (max-width:760px){.auth-body,.legal-body,.status-body,.layout{padding:16px}.auth-shell,.games-grid,.compact-grid,.stats-grid.three-up,.kpi-grid,.form-row{grid-template-columns:1fr}.auth-hero h1{font-size:50px}.topbar{flex-direction:column;align-items:flex-start}.topbar h1,.hero-banner h2{font-size:34px}.filters-bar{flex-direction:column}.filters-bar select{width:100%}}

.auth-panel h2{margin:0 0 6px}.auth-panel{justify-content:flex-start}
.premium-hero{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.005)),radial-gradient(circle at 82% 18%,rgba(246,174,0,.08),transparent 22%),var(--panel)}
.news-card{display:grid;gap:14px}.news-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted)}.news-excerpt{margin:0;color:#e8dcc6;font-size:17px;line-height:1.6}.news-body{color:var(--soft);line-height:1.75;white-space:pre-wrap}
.support-layout{grid-template-columns:.9fr 1.1fr}.support-sidebar-box,.support-thread-box{min-height:720px}.ticket-list{align-content:start}.ticket-list-item{display:grid;gap:10px;width:100%;padding:16px 18px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;transition:.16s ease}.ticket-list-item:hover{border-color:rgba(246,174,0,.24);transform:translateY(-1px)}.ticket-list-item.active{border-color:rgba(246,174,0,.35);background:linear-gradient(180deg,rgba(246,174,0,.08),rgba(255,255,255,.01)),var(--panel-2)}.ticket-list-head,.ticket-list-foot,.thread-header,.bubble-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.ticket-list-meta{color:var(--muted);font-size:13px}.thread-view{display:grid;grid-template-rows:auto 1fr auto auto;gap:18px;height:100%}.conversation{display:grid;gap:14px;padding:10px 6px;max-height:430px;overflow:auto}.bubble{max-width:84%;padding:16px 18px;border-radius:22px;border:1px solid var(--line);background:#101010}.bubble.user{justify-self:end;background:linear-gradient(180deg,rgba(246,174,0,.14),rgba(246,174,0,.06)),#17120a;border-color:rgba(246,174,0,.22)}.bubble.admin{justify-self:start;background:#111317}.bubble-body{white-space:pre-wrap;line-height:1.7;color:#eee5d8}.bubble-head small{color:var(--muted)}.thread-form{display:grid;gap:12px;padding-top:10px;border-top:1px solid var(--line)}.align-end{justify-content:flex-end}
.admin-ticket-layout{grid-template-columns:.78fr 1.22fr}.admin-ticket-layout .support-thread-box,.admin-ticket-layout .support-sidebar-box{min-height:760px}
.nav-link.nav-external{background:rgba(255,255,255,.02)}
@media (max-width:1220px){.support-layout,.admin-ticket-layout{grid-template-columns:1fr}.support-sidebar-box,.support-thread-box{min-height:auto}.conversation{max-height:none}}


.compact-auth-hero{min-height:560px}
.auth-panel .form[hidden]{display:none!important}
.auth-panel .message{margin-top:16px}
.news-grid{align-items:start}
.news-card{min-height:220px}
.news-body,.faq-answer,.feed-item p,.section-copy{white-space:pre-wrap}
.thread-actions{display:flex;justify-content:flex-end}
.thread-actions .btn-secondary{min-height:42px}
.ticket-list-item strong{font-size:15px}
.conversation{background:rgba(255,255,255,.015);border:1px solid var(--line);border-radius:20px;padding:16px}
#newsGrid .empty-state,#newsPreview .empty-state{width:100%}

/* =========================
   GLOBAL SPACING FIX
   ========================= */

:root{
  --page-pad: 20px;
  --page-pad-mobile: 16px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 28px;

  --card-pad: 24px;
  --card-pad-compact: 20px;
  --card-pad-mobile: 16px;

  --grid-gap: 20px;
  --grid-gap-mobile: 16px;
}

/* базовая вертикаль */
body{
  line-height: 1.45;
}

h1,h2,h3,h4,h5,h6,p{
  margin: 0;
}

p{
  line-height: 1.65;
}

.panel-body{
  min-height: 100vh;
}

/* =========================
   PAGE LAYOUT
   ========================= */

.layout{
  gap: var(--grid-gap);
  padding: var(--page-pad);
}

.layout-topnav{
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--grid-gap);
}

.content{
  display: grid;
  gap: var(--grid-gap);
  min-width: 0;
}

.page-section{
  display: none;
}

.page-section.active{
  display: block;
}

.page-section > .section-head:first-child{
  margin-bottom: 18px;
}

/* =========================
   CARD CONSISTENCY
   ========================= */

.card{
  border-radius: var(--radius);
}

.auth-hero,
.auth-panel,
.hero-banner,
.topbar,
.sidebar,
.wallet-card,
.news-card,
.profile-card,
.feature-card,
.game-card,
.feed-item,
.mini-card,
.kpi,
.status-card,
.legal,
.support-grid > .card,
.table-wrap,
.dashboard-block{
  padding: var(--card-pad);
}

.ticket-card,
.faq-item{
  border-radius: 22px;
}

.filters-bar{
  padding: 14px 16px;
  border-radius: 20px;
}

.admin-subnav{
  padding: 12px;
  border-radius: 20px;
}

.callout{
  padding: 16px 18px;
}

.empty-state{
  padding: 28px;
}

/* =========================
   TYPOGRAPHY / HEADINGS
   ========================= */

.topbar h1,
.hero-banner h2{
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 16px;
}

.section-head.compact{
  margin-bottom: 16px;
}

.section-head h2{
  margin-top: 10px;
}

.topbar-sub,
.section-copy,
.muted{
  color: var(--muted);
  line-height: 1.65;
}

.hero-copy{
  display: grid;
  align-content: start;
  gap: 16px;
}

.hero-copy p{
  max-width: 620px;
  font-size: 16px;
  color: var(--soft);
}

.support-grid .card h3,
.news-card h3,
.game-card h3,
.feature-card h3,
.dashboard-block h3{
  margin: 0 0 10px;
  line-height: 1.2;
}

/* =========================
   BUTTONS / INPUTS
   ========================= */

.btn-primary,
.btn-secondary,
.btn-danger,
.tab{
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
}

input,
textarea,
select{
  padding: 14px 15px;
  border-radius: 16px;
}

label{
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.stack-form{
  display: grid;
  gap: 14px;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.toolbar,
.hero-actions,
.filters-bar,
.admin-subnav,
.actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.section-spacer{
  margin-top: 18px;
}

/* =========================
   TOP HEADER / TOP NAV
   ========================= */

.app-header{
  position: relative;
  top: auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(246,174,0,.08), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    var(--panel);
  border: 1px solid rgba(255,255,255,.08);
}

.app-header::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(246,174,0,.04), transparent);
  opacity: .7;
}

.app-header-main{
  display: grid;
  gap: 16px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.app-header-side{
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.app-brand{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brand{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--accent);
  line-height: 1;
}

.sidebar-sub{
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.top-nav,
.top-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.top-links{
  justify-content: flex-end;
}

.nav-link{
  margin-top: 0;
}

.top-nav .nav-link,
.top-links .nav-link,
.logout-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: .18s ease;
}

.top-nav .nav-link:hover,
.top-links .nav-link:hover,
.logout-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(246,174,0,.26);
  background:
    linear-gradient(180deg, rgba(246,174,0,.08), rgba(255,255,255,.01)),
    var(--panel-3);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.top-nav .nav-link.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #17120a;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(246,174,0,.18);
}

.nav-admin-link{
  box-shadow: inset 0 0 0 1px rgba(246,174,0,.18);
}

.nav-external{
  color: var(--soft);
  background: rgba(255,255,255,.02);
}

.nav-icon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(246,174,0,.08);
  border: 1px solid rgba(246,174,0,.14);
  color: var(--accent-2);
  font-size: 14px;
  flex: 0 0 28px;
  transition: .18s ease;
}

.top-nav .nav-link:hover .nav-icon,
.top-links .nav-link:hover .nav-icon,
.logout-btn:hover .nav-icon{
  background: rgba(246,174,0,.14);
  border-color: rgba(246,174,0,.22);
}

.top-nav .nav-link.active .nav-icon{
  background: rgba(23,18,10,.12);
  color: #17120a;
}

.logout-btn{
  min-height: 44px;
}

/* =========================
   TOPBAR / HERO
   ========================= */

.topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.topbar-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background:
    radial-gradient(circle at right top, rgba(246,174,0,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.016), rgba(255,255,255,.008)),
    var(--panel);
}

.topbar-side{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.topbar-side .mini-card{
  min-width: 220px;
  background:
    linear-gradient(180deg, rgba(246,174,0,.07), rgba(255,255,255,.01)),
    var(--panel-2);
}

.hero-banner{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
}

.release-hero{
  min-height: 340px;
}

.poster-side{
  display: grid;
  gap: 14px;
}

.subtle-surface{
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01)),
    var(--panel-2);
}

/* =========================
   GRIDS
   ========================= */

.feature-band,
.stats-grid,
.wallet-grid,
.support-grid,
.profile-layout,
.games-grid,
.news-grid,
.kpi-grid,
.dashboard-grid,
.faq-list{
  display: grid;
  gap: 18px;
}

.stats-grid.three-up{
  grid-template-columns: repeat(3, 1fr);
}

.dashboard-grid{
  grid-template-columns: 1.2fr .8fr;
}

.games-grid{
  grid-template-columns: repeat(3, 1fr);
}

.compact-grid{
  grid-template-columns: repeat(2, 1fr);
}

.news-grid,
.wallet-grid,
.profile-layout,
.support-grid{
  grid-template-columns: 1fr 1fr;
}

.news-grid{
  align-items: start;
}

/* =========================
   SMALL CARDS
   ========================= */

.mini-card,
.feature-card,
.game-card,
.feed-item,
.wallet-card,
.news-card,
.profile-card,
.kpi,
.ticket-card,
.faq-item{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 22px;
}

.mini-card,
.feature-card,
.kpi{
  padding: 22px;
}

.mini-card span,
.kpi span{
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.mini-card strong,
.kpi strong{
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.feature-card,
.wallet-card,
.profile-card,
.dashboard-block{
  display: grid;
  gap: 10px;
}

.money{
  font-size: 46px;
  font-weight: 900;
  color: var(--accent-2);
}

/* =========================
   GAME / NEWS / FEED
   ========================= */

.game-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.game-cover{
  height: 210px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(135deg,#201503,#8b5f08 45%,#111 100%);
  border: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.game-cover span{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff1c8;
}

.game-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.news-card{
  display: grid;
  gap: 14px;
  min-height: 220px;
}

.news-topline{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.news-excerpt{
  margin: 0;
  color: #e8dcc6;
  font-size: 17px;
  line-height: 1.6;
}

.news-body,
.faq-answer,
.feed-item p,
.section-copy{
  white-space: pre-wrap;
}

.news-body{
  color: var(--soft);
  line-height: 1.75;
}

.stack{
  display: grid;
  gap: 14px;
}

.feed-item{
  padding: 18px;
}

.feed-item strong{
  display: block;
  margin-bottom: 6px;
}

.feed-item p{
  margin: 0 0 8px;
  color: var(--soft);
  line-height: 1.6;
}

/* =========================
   FILTERS / TABLES
   ========================= */

.filters-bar input{
  flex: 1;
  min-width: 220px;
}

.filters-bar select{
  min-width: 180px;
}

.minimal-filter{
  padding: 0;
  background: none;
  border: none;
}

.table-wrap{
  overflow: auto;
}

.table{
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td{
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}

.table th{
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =========================
   SUPPORT / TICKETS
   ========================= */

.support-layout{
  grid-template-columns: .9fr 1.1fr;
}

.support-sidebar-box,
.support-thread-box{
  min-height: 720px;
}

.ticket-list{
  display: grid;
  gap: 14px;
  align-content: start;
}

.ticket-list-item{
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}

.ticket-list-item:hover{
  border-color: rgba(246,174,0,.24);
  transform: translateY(-1px);
}

.ticket-list-item.active{
  border-color: rgba(246,174,0,.35);
  background:
    linear-gradient(180deg, rgba(246,174,0,.08), rgba(255,255,255,.01)),
    var(--panel-2);
}

.ticket-list-item strong{
  font-size: 15px;
  line-height: 1.3;
}

.ticket-list-head,
.ticket-list-foot,
.thread-header,
.bubble-head,
.ticket-top,
.ticket-meta{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ticket-list-meta{
  color: var(--muted);
  font-size: 13px;
}

.ticket-title{
  margin: 0;
  font-size: 18px;
}

.ticket-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.thread-view{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 18px;
  height: 100%;
}

.conversation{
  display: grid;
  gap: 14px;
  max-height: 430px;
  overflow: auto;
  padding: 16px;
  background: rgba(255,255,255,.015);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.bubble{
  max-width: 84%;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #101010;
}

.bubble.user{
  justify-self: end;
  background: linear-gradient(180deg, rgba(246,174,0,.14), rgba(246,174,0,.06)), #17120a;
  border-color: rgba(246,174,0,.22);
}

.bubble.admin{
  justify-self: start;
  background: #111317;
}

.bubble-body{
  white-space: pre-wrap;
  line-height: 1.7;
  color: #eee5d8;
}

.bubble-head small{
  color: var(--muted);
}

.thread-form{
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.thread-actions{
  display: flex;
  justify-content: flex-end;
}

.thread-actions .btn-secondary{
  min-height: 42px;
}

.admin-ticket-layout{
  grid-template-columns: .78fr 1.22fr;
}

.admin-ticket-layout .support-thread-box,
.admin-ticket-layout .support-sidebar-box{
  min-height: 760px;
}

/* =========================
   FAQ / LEGAL / STATUS
   ========================= */

.faq-list{
  grid-template-columns: 1fr;
}

.faq-item{
  overflow: hidden;
}

.faq-toggle{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.faq-answer{
  display: none;
  padding: 0 20px 20px;
  color: var(--soft);
  line-height: 1.7;
}

.faq-item.open .faq-answer{
  display: block;
}

.faq-item.open .faq-icon{
  transform: rotate(45deg);
}

.faq-icon{
  font-size: 24px;
  line-height: 1;
  color: var(--accent-2);
  transition: .16s ease;
}

.legal{
  max-width: 1040px;
  margin: 0 auto;
}

.legal h1{
  font-size: 46px;
}

.legal h2{
  margin-top: 30px;
}

.legal p,
.legal li{
  line-height: 1.75;
  color: #e9e0d7;
  font-size: 17px;
}

.legal-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.status-card{
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.status-card h1{
  font-size: 48px;
  margin: 16px 0;
}

/* =========================
   PILLS
   ========================= */

.status-pill,
.priority-pill,
.ticket-state,
.pill{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(246,174,0,.1);
  border: 1px solid rgba(246,174,0,.18);
  color: #ffd574;
  font-size: 12px;
  font-weight: 700;
}

.pill.ghost{
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--soft);
}

.priority-high{
  background: rgba(246,174,0,.12);
}

.priority-critical{
  background: rgba(207,79,79,.14);
  border-color: rgba(207,79,79,.2);
  color: #ffc5c5;
}

.ticket-state.open{
  background: rgba(60,191,123,.1);
  border-color: rgba(60,191,123,.18);
  color: #9af0c3;
}

.ticket-state.in_progress{
  background: rgba(246,174,0,.12);
  border-color: rgba(246,174,0,.18);
  color: #ffd574;
}

.ticket-state.closed{
  background: rgba(255,255,255,.05);
  border-color: var(--line);
  color: #dbd4cb;
}

/* =========================
   MISC
   ========================= */

.auth-panel h2{
  margin: 0 0 6px;
}

.auth-panel{
  justify-content: flex-start;
}

.compact-auth-hero{
  min-height: 560px;
}

.auth-panel .form[hidden]{
  display: none !important;
}

.auth-panel .message{
  margin-top: 16px;
}

.premium-hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005)),
    radial-gradient(circle at 82% 18%, rgba(246,174,0,.08), transparent 22%),
    var(--panel);
}

code{
  background: #111;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1220px){
  .auth-shell,
  .hero-banner,
  .news-grid,
  .wallet-grid,
  .profile-layout,
  .support-grid,
  .dashboard-grid,
  .ticket-grid,
  .support-layout,
  .admin-ticket-layout{
    grid-template-columns: 1fr;
  }

  .games-grid,
  .compact-grid,
  .stats-grid.three-up,
  .kpi-grid,
  .form-row{
    grid-template-columns: 1fr 1fr;
  }

  .layout{
    grid-template-columns: 1fr;
  }

  .sidebar{
    position: static;
    height: auto;
  }

  .app-header-side{
    justify-items: start;
    width: 100%;
  }

  .top-links{
    justify-content: flex-start;
  }

  .support-sidebar-box,
  .support-thread-box,
  .admin-ticket-layout .support-thread-box,
  .admin-ticket-layout .support-sidebar-box{
    min-height: auto;
  }

  .conversation{
    max-height: none;
  }

  .topbar-hero{
    grid-template-columns: 1fr;
  }

  .topbar-side{
    justify-content: flex-start;
  }
}

@media (max-width: 760px){
  .auth-body,
  .legal-body,
  .status-body,
  .layout{
    padding: var(--page-pad-mobile);
  }

  .auth-shell,
  .games-grid,
  .compact-grid,
  .stats-grid.three-up,
  .kpi-grid,
  .form-row{
    grid-template-columns: 1fr;
  }

  .auth-hero,
  .auth-panel,
  .hero-banner,
  .topbar,
  .wallet-card,
  .news-card,
  .profile-card,
  .feature-card,
  .game-card,
  .feed-item,
  .mini-card,
  .kpi,
  .status-card,
  .legal,
  .support-grid > .card,
  .table-wrap,
  .dashboard-block{
    padding: var(--card-pad-mobile);
  }

  .app-header{
    padding: 16px;
    gap: 14px;
  }

  .app-header,
  .app-header-main,
  .app-header-side{
    gap: 14px;
  }

  .top-nav,
  .top-links,
  .filters-bar,
  .toolbar,
  .hero-actions,
  .actions{
    flex-direction: column;
    width: 100%;
  }

  .top-nav .nav-link,
  .top-links .nav-link,
  .logout-btn{
    width: 100%;
    justify-content: flex-start;
  }

  .user-chip{
    width: 100%;
  }

  .topbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar h1,
  .hero-banner h2{
    font-size: 34px;
  }

  .topbar-side .mini-card{
    min-width: unset;
    width: 100%;
  }

  .filters-bar select,
  .filters-bar input{
    width: 100%;
    min-width: 0;
  }

  .conversation{
    padding: 14px;
  }

  .bubble{
    max-width: 100%;
  }

  .empty-state{
    padding: 22px;
  }

/* =========================
   PHONE HEADER / NAV FIX
   ========================= */

@media (max-width: 760px){
  .layout,
  .layout-topnav,
  .panel-body{
    padding: 0;
  }

  .layout-topnav{
    gap: 12px;
  }

  .content{
    gap: 12px;
    padding: 0 12px 12px;
  }

  .app-header{
    margin: 12px 12px 0;
    padding: 12px;
    gap: 12px;
    border-radius: 20px;
    overflow: hidden;
  }

  .app-header::before{
    opacity: .35;
  }

  .app-header-main,
  .app-header-side{
    gap: 10px;
    width: 100%;
  }

  .app-brand{
    gap: 2px;
  }

  .brand{
    font-size: 22px;
    letter-spacing: .06em;
  }

  .sidebar-sub{
    font-size: 10px;
    letter-spacing: .14em;
  }

  /* Главное меню: 2 колонки вместо длинной простыни */
  .top-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .top-nav .nav-link{
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0;
    border-radius: 14px;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 1.2;
  }

  .top-nav .nav-link span:last-child{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Юр. ссылки делаем компактнее */
  .top-links{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .top-links .nav-link{
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 14px;
    justify-content: flex-start;
    font-size: 14px;
  }

  .nav-icon{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 8px;
    font-size: 12px;
  }

  .app-header-side{
    justify-items: stretch;
  }

  .user-chip{
    width: 100%;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 16px;
    min-width: 0;
  }

  .user-chip img{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: 0 0 44px;
  }

  .user-chip strong{
    font-size: 13px;
    line-height: 1.2;
  }

  .user-chip span,
  .user-chip small{
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }

  .logout-btn{
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    justify-content: flex-start;
    border-radius: 14px;
  }

  /* Hero ниже делаем компактнее */
  .topbar,
  .topbar-hero{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
  }

  .topbar h1,
  .hero-banner h2{
    font-size: 26px;
    line-height: 1.05;
    margin-top: 8px;
  }

  .topbar-sub,
  .section-copy,
  .hero-copy p{
    font-size: 14px;
    line-height: 1.55;
  }

  .topbar-side{
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-side .mini-card{
    width: 100%;
    min-width: 0;
    padding: 16px;
  }

  /* Остальные сетки на телефон */
  .hero-banner,
  .dashboard-grid,
  .wallet-grid,
  .profile-layout,
  .support-layout,
  .admin-ticket-layout,
  .news-grid,
  .support-grid,
  .games-grid,
  .compact-grid,
  .stats-grid.three-up,
  .kpi-grid,
  .form-row{
    grid-template-columns: 1fr;
  }

  .hero-banner,
  .wallet-card,
  .news-card,
  .profile-card,
  .feature-card,
  .game-card,
  .dashboard-block,
  .support-sidebar-box,
  .support-thread-box,
  .table-wrap{
    padding: 16px;
  }

  .filters-bar,
  .toolbar,
  .hero-actions,
  .actions,
  .support-filter-bar,
  .thread-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .filters-bar input,
  .filters-bar select,
  .support-filter-bar select,
  .support-filter-bar button,
  .thread-actions .btn-secondary,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width: 100%;
    min-width: 0;
  }

  .conversation{
    max-height: none;
    padding: 12px;
    border-radius: 16px;
  }

  .bubble{
    max-width: 100%;
    padding: 14px;
    border-radius: 16px;
  }
}

/* Очень узкие экраны */
@media (max-width: 420px){
  .top-nav{
    grid-template-columns: 1fr;
  }

  .app-header{
    margin: 10px 10px 0;
    padding: 10px;
  }

  .content{
    padding: 0 10px 10px;
  }

  .top-nav .nav-link,
  .top-links .nav-link,
  .logout-btn{
    font-size: 13px;
  }

  .brand{
    font-size: 20px;
  }

/* mobile legal block */

.mobile-legal-drop{
  width:100%;
}

.mobile-legal-toggle{
  list-style:none;
  display:none;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border-radius:14px;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:800;
}

.mobile-legal-toggle::-webkit-details-marker{
  display:none;
}

.mobile-legal-drop[open] .mobile-legal-toggle{
  border-color:rgba(246,174,0,.24);
  background:linear-gradient(180deg, rgba(246,174,0,.08), rgba(255,255,255,.01)), var(--panel-3);
}

@media (min-width:761px){
  .mobile-legal-drop{
    display:contents;
  }

  .mobile-legal-drop .top-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
  }
}

@media (max-width:760px){
  .mobile-legal-toggle{
    display:inline-flex;
  }

  .mobile-legal-drop .top-links{
    display:none;
    margin-top:8px;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .mobile-legal-drop[open] .top-links{
    display:grid;
  }

  .mobile-legal-drop .top-links .nav-link{
    width:100%;
    min-height:42px;
    padding:0 12px;
    margin:0;
    justify-content:flex-start;
    border-radius:14px;
  }
}