:root {
  color-scheme: dark;
  --bg: #090b13;
  --panel: #121625;
  --panel-2: #181e31;
  --line: #29314a;
  --text: #f6f7fb;
  --muted: #929bb5;
  --accent: #7c6cff;
  --accent-2: #9b8cff;
  --green: #33d49d;
  --red: #ff647c;
  --yellow: #f5b94b;
  font-family: Inter, "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 15% 0, #1c1b3c 0, var(--bg) 38rem); color: var(--text); min-height: 100vh; }
a { color: #aaa0ff; text-decoration: none; }
button, .button, input, textarea { font: inherit; }
.topbar { height: 68px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(9,11,19,.88); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand span, .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #dd69d2); font-weight: 900; color: white; box-shadow: 0 8px 24px #7766ff44; }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.topbar nav form { margin: 0; }
.link-button { background: none; padding: 0; border: 0; color: #aaa0ff; cursor: pointer; }
.container { width: min(1180px, calc(100% - 36px)); margin: 46px auto 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
h1 { font-size: clamp(28px, 4vw, 42px); margin: 4px 0 8px; letter-spacing: -.03em; }
h2 { margin: 0 0 18px; font-size: 19px; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; margin: 0; }
.muted { color: var(--muted); }
.panel { background: linear-gradient(160deg, rgba(24,30,49,.95), rgba(16,20,34,.95)); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 18px 70px #0003; margin-bottom: 22px; }
.panel.narrow { max-width: 560px; margin: 70px auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { min-height: 145px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 22px; display: flex; flex-direction: column; }
.stat span { color: var(--muted); }
.stat strong { font-size: 36px; margin: 12px 0 6px; }
.stat small { color: #6f7892; }
.button, button { border: 1px solid #424c68; color: var(--text); background: #20273b; border-radius: 10px; padding: 11px 16px; cursor: pointer; display: inline-block; }
.button:hover, button:hover { border-color: var(--accent); }
.primary { background: linear-gradient(135deg, var(--accent), #6650ed); border-color: transparent; font-weight: 700; box-shadow: 0 9px 30px #7462ff33; }
.warning { background: #463510; border-color: #775a15; color: #ffd882; }
.danger { background: #451c29; border-color: #753046; color: #ff9bad; }
.block { width: 100%; margin: 0 0 10px; text-align: center; }
.stack { display: grid; gap: 16px; }
.stack.mini { gap: 9px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
label { display: grid; gap: 8px; color: #cfd4e3; font-size: 14px; }
input, textarea { width: 100%; border: 1px solid #343d58; color: var(--text); background: #0d111d; border-radius: 10px; padding: 12px 13px; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #7c6cff20; }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-grid .wide, .form-actions { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; }
.confirm-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 22px; }
.actions form { margin-bottom: 12px; }
.danger-zone { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.check { display: flex; grid-template-columns: none; flex-direction: row; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.check input { width: auto; margin-top: 3px; }
.switch-row { grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--line); background: #0f1422; border-radius: 12px; padding: 14px 16px; }
.switch-row span { display: grid; gap: 5px; }
.switch-row small { color: var(--muted); }
.switch { appearance: none; width: 48px; height: 27px; border-radius: 99px; background: #343c54; padding: 3px; transition: .2s; cursor: pointer; }
.switch::before { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: white; transition: .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(19px); }
.details { display: grid; grid-template-columns: 130px 1fr; gap: 12px 18px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.code-list code, table code { color: #c7c0ff; white-space: normal; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th { color: var(--muted); text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 12px; border-bottom: 1px solid var(--line); }
td { padding: 14px 12px; border-bottom: 1px solid #242b40; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.table-title { color: var(--text); display: block; font-weight: 700; margin-bottom: 5px; }
td small { color: var(--muted); }
.badge { display: inline-flex; align-items: center; border: 1px solid; border-radius: 99px; padding: 5px 9px; font-size: 12px; }
.badge.draft { color: #aab2c8; border-color: #4a5269; }
.badge.scheduled { color: #8fbaff; border-color: #315385; }
.badge.active { color: var(--green); border-color: #21664f; }
.badge.drawing { color: var(--yellow); border-color: #785b20; }
.badge.drawn { color: #bcadff; border-color: #594c9f; }
.badge.cancelled { color: #ff8da0; border-color: #743448; }
.status-line { display: flex; gap: 12px; align-items: center; color: var(--muted); }
.winner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.winner { border: 1px solid var(--line); background: #0f1422; padding: 16px; border-radius: 12px; display: grid; gap: 6px; }
.winner strong { color: #c8c0ff; }
.winner small { color: var(--muted); }
.alert { border: 1px solid; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; }
.alert.error { background: #401824; border-color: #783349; color: #ffafbc; }
.alert.success { background: #10362c; border-color: #266650; color: #93ebca; }
.empty { color: var(--muted); padding: 38px 12px; text-align: center; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); border: 1px solid var(--line); border-radius: 22px; padding: 34px; background: linear-gradient(160deg, #181e31, #0f1320); box-shadow: 0 26px 90px #0008; }
.login-card .brand-mark { margin-bottom: 24px; }
.preview-card { max-width: 760px; margin: 0 auto 22px; padding: 28px; border-radius: 18px; background: #172415; border: 1px solid #30432d; }
.telegram-message { background: white; color: #15171c; border-radius: 14px; padding: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.telegram-message code { color: #574ca2; }
.fake-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; color: #258bd6; text-align: center; }
.fake-buttons span { border-top: 1px solid #ddd; padding: 8px 4px 0; }
.fake-buttons span:last-child { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .stats, .detail-grid, .winner-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide, .form-actions { grid-column: auto; }
  .topbar nav a:nth-child(-n+2) { display: none; }
  .container { margin-top: 28px; }
  .page-head { align-items: flex-start; flex-direction: column; }
}