/* Общие стили оболочки платформы — та же палитра, что у калькуляторов игр,
   чтобы переход между оболочкой и игрой не "дёргал" по внешнему виду. */
/* шрифт Montserrat и цвета тем подключает shared/theme.css */

:root{
  --bg: #12151c;
  --surface: #1b212b;
  --surface-2: #242b37;
  --surface-3: #2d3542;
  --line: #333c4a;
  --text: #edeae2;
  --text-muted: #8b93a1;
  --gold: #d4a72c;
  --gold-soft: rgba(212,167,44,0.16);
  --accent: var(--gold);
  --live: #ef4444;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}

.shell-topbar{
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
/* бренд в шапке: логотип + название; шапка может быть окрашена по роли (оператор — чёрная, соведущий — синяя) */
.shell-topbar-brand{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.shell-topbar.role-operator{ background: var(--role-operator-bg); color: var(--role-operator-fg); border-bottom-color: transparent; }
.shell-topbar.role-cohost{ background: var(--role-cohost-bg); color: var(--role-cohost-fg); border-bottom-color: transparent; }
.shell-topbar.role-operator .shell-nav-link, .shell-topbar.role-operator .shell-operator-name,
.shell-topbar.role-cohost .shell-nav-link, .shell-topbar.role-cohost .shell-operator-name{ color: inherit; opacity: .85; }
.shell-topbar.role-operator .shell-nav-link:hover, .shell-topbar.role-cohost .shell-nav-link:hover{ opacity: 1; color: inherit; }
.shell-topbar.role-operator .btn-ghost, .shell-topbar.role-cohost .btn-ghost{ color: inherit; border-color: currentColor; }
.shell-topbar.role-operator .btn-ghost:hover, .shell-topbar.role-cohost .btn-ghost:hover{ background: rgba(127,127,127,.2); color: inherit; }
.shell-topbar.role-operator .shell-topbar-title span, .shell-topbar.role-cohost .shell-topbar-title span{ color: inherit; }
.auth-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; }
.auth-brand{ display:flex; justify-content:center; margin-bottom:18px; }
.shell-topbar-title{
  font-family: var(--font-display); font-weight:700; font-size: 20px; margin:0;
}
.shell-topbar-title span{ color: var(--gold); }
.shell-topbar-right{ display:flex; align-items:center; gap:14px; }
.shell-operator-name{ color: var(--text-muted); font-size: 14px; }
.shell-nav-link{ color: var(--text-muted); text-decoration:none; font-size: 14px; }
.shell-nav-link:hover{ color: var(--text); }

.shell-main{ max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }

.btn-gold{
  background: var(--gold); border: 1px solid var(--gold); color: var(--on-gold);
  font-weight:600; font-size:14px; padding: 10px 18px; border-radius: 10px;
  cursor:pointer; transition: filter .12s;
}
.btn-gold:hover{ filter: brightness(1.08); }
.btn-gold:disabled{ opacity:.6; cursor:default; filter:none; }
.btn-ghost{
  background: transparent; border: 1px solid var(--line); color: var(--text-muted);
  font-weight:600; font-size:14px; padding: 10px 18px; border-radius: 10px;
  cursor:pointer; transition: border-color .12s, color .12s;
}
.btn-ghost:hover{ border-color: var(--border-hover); color: var(--text); }

.shell-card{
  background: var(--surface); border:1px solid var(--line); border-radius:16px; padding: 24px;
}

.field-block{ margin-bottom: 18px; }
.field-label{ display:block; font-size:13px; color: var(--text-muted); margin-bottom:6px; }
.shell-input{
  width:100%; padding: 10px 12px; border-radius:10px; border:1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size:14px;
}
.shell-input:focus{ outline:none; border-color: var(--gold); }

.auth-wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding: 24px; }
.auth-card{ width: 100%; max-width: 380px; }
.auth-title{ font-family: var(--font-display); font-weight:700; font-size: 22px; margin: 0 0 4px; }
.auth-sub{ color: var(--text-muted); font-size: 14px; margin: 0 0 22px; }
.auth-toggle{ margin-top:16px; font-size:13px; color: var(--text-muted); text-align:center; }
.auth-toggle a{ color: var(--gold); cursor:pointer; text-decoration:none; }
.auth-message{ font-size:13px; margin-top:14px; padding:10px 12px; border-radius:8px; display:none; }
.auth-message.show{ display:block; }
.auth-message.error{ background: var(--error-bg); color: var(--error-text); }
.auth-message.info{ background: var(--gold-soft); color: var(--gold); }

.game-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; margin-top:20px; }
.game-card{
  background: var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.game-card-title{ font-family: var(--font-display); font-weight:700; font-size:17px; }
.game-card-desc{ color: var(--text-muted); font-size:13px; flex:1; }

.modal-overlay{
  position:fixed; inset:0; background: var(--overlay); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:50;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
  width:100%; max-width: 420px;
}
.modal-title{ font-family: var(--font-display); font-weight:700; font-size:18px; margin:0 0 16px; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.radio-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background: var(--surface-2); cursor:pointer; margin-bottom:8px; }
.radio-row input{ accent-color: var(--gold); }
.modal-error{ color: var(--error-text); font-size:13px; margin-top:8px; display:none; }
.modal-error.show{ display:block; }

.stub-note{ color: var(--text-muted); font-size:14px; }

/* ---- админ-панель ---- */
.shell-main.wide{ max-width: 1200px; }
.admin-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.admin-tab{
  background:none; border:none; color: var(--text-muted); font-family: var(--font-body); font-size:14px; font-weight:600;
  padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.admin-tab:hover{ color: var(--text); }
.admin-tab.active{ color: var(--gold); border-bottom-color: var(--gold); }
.admin-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.admin-toolbar .spacer{ flex:1; }
.admin-table{ width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th{ text-align:left; color: var(--text-muted); font-weight:600; font-size:12px; padding:8px 12px; border-bottom:1px solid var(--line); }
.admin-table td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-table tr.inactive td{ opacity:.55; }
.admin-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.btn-small{ padding:6px 12px; font-size:13px; border-radius:8px; }
.badge{ display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background: var(--surface-3); color: var(--text-muted); }
.badge.ok{ background: var(--ok-bg); color: var(--ok-text); }
.badge.off{ background: var(--error-bg); color: var(--error-text); }
.badge.gold{ background: var(--gold-soft); color: var(--gold); }
.btn-small:disabled{ opacity:.4; cursor:default; }
.dict-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.dict-title{ font-family: var(--font-display); font-size:17px; margin:0; display:flex; align-items:center; gap:8px; }
.dict-search{ width:160px; padding:6px 10px; }
.dict-list{ display:flex; flex-direction:column; max-height:420px; overflow-y:auto; }
.dict-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); }
.dict-name{ min-width:0; font-size:14px; }
.dict-meta{ font-size:12px; color: var(--text-muted); margin-top:2px; }
.filter-card{ margin-bottom:16px; padding:16px; }
.filter-bar{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-bottom:12px; }
.filter-date{ display:flex; align-items:center; gap:8px; color: var(--text-muted); font-size:13px; }
.filter-date .shell-input{ flex:1; min-width:0; }
.filter-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.filter-foot .spacer{ flex:1; }
.check-row{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-muted); cursor:pointer; }
.check-row input{ accent-color: var(--gold); }
.view-box{ max-width: 860px; max-height: 90vh; overflow-y:auto; }
.view-meta{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:10px 18px; margin-bottom:16px; font-size:14px; }
.view-meta span{ display:block; font-size:12px; color: var(--text-muted); }
.cred-box{ background: var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family: ui-monospace, Consolas, monospace; font-size:14px; line-height:1.7; word-break:break-all; }