:root{
  --bg1:#0b0b12; --bg2:#0e0f25; --bg3:#12163a;
  --glass: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: #e9ecf1; --text-dim: #c9cfdb;
  --radius: 16px;
}
*{ box-sizing:border-box }
html,body{ margin:0; height:100%; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",Arial }
body{
  color:var(--text);
  background:
    radial-gradient(70vw 70vh at -10% -10%, #4c86ff22 10%, transparent 60%),
    radial-gradient(60vw 60vh at 120% 10%, #ff4cc822 10%, transparent 70%),
    linear-gradient(180deg, var(--bg2), var(--bg3) 60%, var(--bg1));
}

/* Карточки, кнопки, бейджи */
.card{ background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); padding:12px; backdrop-filter: blur(8px) }
.btn{ border:1px solid var(--border); background:linear-gradient(180deg,#ffffff12,#ffffff06); color:var(--text);
      padding:10px 14px; border-radius:14px; cursor:pointer; transition:transform .08s ease, background .2s; text-decoration:none; display:inline-block }
.btn:active{ transform:translateY(1px); background:linear-gradient(180deg,#ffffff18,#ffffff08) }
.badge{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#ffffff12; display:inline-flex; align-items:center; gap:6px }
.small{ font-size:12px; color:var(--text-dim) }
.row{ display:flex; gap:8px; align-items:center; }
.grid{ display:grid; gap:10px }

/* HUD (верхняя панель) */
.hud{ position:sticky; top:0; z-index:50; padding:10px 12px; background:linear-gradient(180deg,#0008,#0000); }
.hud-inner{ display:flex; align-items:center; justify-content:space-between; }
.energy{ height:8px; border-radius:999px; background:#ffffff12; border:1px solid var(--border); overflow:hidden }
.energy > i{ display:block; height:100%; background:linear-gradient(90deg,#52f6a3,#62e7ff); width:0 }

/* Низ — док/меню */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:25;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#0000,#0007 65%);
  border-top:1px solid #ffffff14 }
.dock-inner{ max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.dock .btn{ font-size:13px; padding:10px 8px; text-align:center }

/* Контейнер контента */
.container{ max-width:960px; margin:16px auto 100px; padding:0 12px }

/* Таблицы */
table{ width:100%; border-collapse:collapse; font-size:14px }
th,td{ padding:6px 4px; border-bottom:1px solid var(--border) }
th{ color:var(--text-dim); font-weight:600; text-align:left }
td.r{ text-align:right } td.c{ text-align:center }

/* Toast & лог */
#toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); z-index:9999; width:92%; max-width:520px }
.toast{ background:#000c; color:#fff; border-radius:12px; padding:10px 12px; margin-top:8px; animation:tIn .18s ease }
@keyframes tIn{ from{ transform:translate(-50%,10px); opacity:.5 } to{ transform:translate(-50%,0); opacity:1 } }
#logPanel{ position:fixed; right:12px; bottom:86px; width:360px; max-height:50vh; overflow:auto; border-radius:12px;
  padding:10px; background:#000b; color:#fff; font:12px/1.35 ui-monospace,Consolas,Menlo,monospace; display:none; z-index:50 }
.fab{ position:fixed; right:12px; bottom:12px; border:0; border-radius:999px; padding:10px 14px; background:#000; color:#fff; opacity:.8; z-index:51 }

/* Заглушка «откройте из бота» */
.guard{ margin:20vh auto; max-width:560px; text-align:center }
.guard .hint{ margin-top:8px; color:var(--text-dim) }