/* Личный кабинет lk.zapret.moe. Палитра, шрифты и эмблема — те же, что у
   status.zapret.moe (status_page/site/static/css/tokens.css): два сайта
   проекта выглядят одной семьёй. Шрифты сайт отдаёт из того же каталога
   (cabinet/web/app.py::BRAND_FONTS). Скриптов нет: всё, что двигается или
   раскрывается, сделано CSS и <details>. Тёмная тема — основная. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/onest-cyrillic-400.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/onest-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-cyrillic-500.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/onest-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-cyrillic-600.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/onest-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --ground: #0c0f14;
  --panel: #131820;
  --panel-2: #19202a;
  --line: #232b36;
  --line-soft: #1b222c;
  --ink: #e3e8ef;
  --ink-2: #aab3c0;
  --muted: #7d8795;
  --accent: #6ea8fe;
  --accent-ink: #0c0f14;
  --accent-soft: rgba(110, 168, 254, 0.14);
  --ok: #3fb950;
  --ok-soft: rgba(63, 185, 80, 0.13);
  --warn: #d6a031;
  --warn-ink: #e9c572;
  --warn-soft: rgba(214, 160, 49, 0.12);
  --down-ink: #f2a39c;
  --down-soft: rgba(242, 86, 77, 0.12);
  --dots: rgba(227, 232, 239, 0.06);
  --sans: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.3, .7, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground: #f4f5f7; --panel: #ffffff; --panel-2: #f7f8fa; --line: #e0e4ea; --line-soft: #eceff3;
    --ink: #161b22; --ink-2: #3d4652; --muted: #5f6975;
    --accent: #1f6fd6; --accent-ink: #ffffff; --accent-soft: rgba(31, 111, 214, 0.1);
    --ok: #1f883d; --ok-soft: rgba(31, 136, 61, 0.1);
    --warn: #b07a00; --warn-ink: #8a5d00; --warn-soft: rgba(176, 122, 0, 0.1);
    --down-ink: #b3372e; --down-soft: rgba(207, 34, 46, 0.08);
    --dots: rgba(22, 27, 34, 0.07);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ground);
  /* Сетка точек — тот же приём, что у status.zapret.moe: видна в зазорах. */
  background-image: radial-gradient(var(--dots) 1px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, p { margin: 0; }

/* ——— Эмблема: щит, кольцо и ядро (рисунок из status_page/site/templates/macros.html). ——— */
.emblem { position: relative; display: inline-block; flex: none; width: 26px; height: 26px; }
.emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.em-shield { fill: color-mix(in srgb, var(--ok) 13%, transparent); stroke: var(--ok); stroke-width: 1.5; stroke-linejoin: round; }
.em-ring { fill: none; stroke: var(--ok); stroke-opacity: .4; stroke-width: .9; stroke-dasharray: 1.6 2.2; }
.em-core { fill: var(--ok); }
.em-orbit { display: none; }

/* ——— Шапка и подвал ——— */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1760px; margin: 0 auto; padding: 20px 32px 8px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.brand small { color: var(--muted); font-weight: 400; font-size: 14px; }

.foot { max-width: 1760px; margin: 0 auto; padding: 8px 32px 32px; color: var(--muted); font-size: 14px; }
.staged .foot { text-align: center; }
.foot p + p { margin-top: 4px; }

/* ——— Кнопки ——— */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: filter .15s var(--ease), transform .15s var(--ease);
}
.button:hover, button:hover { filter: brightness(1.08); }
.button:active, button:active { transform: translateY(1px); }
.button.wide, button.wide { width: 100%; }
.quiet {
  min-height: 36px; padding: 0 14px; border-radius: 10px;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
  font-weight: 500; font-size: 14px;
}
.quiet:hover { filter: none; color: var(--ink); border-color: var(--muted); }

/* ——— Сцена входа: одна колонка по центру экрана ——— */
.stage { display: grid; place-items: center; min-height: calc(100dvh - 140px); padding: 24px 20px; }
.gate { width: 100%; max-width: 440px; text-align: center; }
.gate .emblem { width: 72px; height: 72px; margin-bottom: 22px; }
.gate h1 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.gate .lead { margin-top: 12px; color: var(--ink-2); text-wrap: balance; }
/* Имя кнопки бота не рвётся между строками. */
.key { white-space: nowrap; color: var(--ink); font-weight: 500; }
.gate .button, .gate form { margin-top: 28px; }
.gate .after { margin-top: 14px; color: var(--muted); font-size: 14px; }
.gate .steps + .after { margin-top: 18px; text-align: left; padding-left: 46px; }

/* Орбита вокруг ядра — единственное движение кабинета и только на сцене. */
.gate .em-orbit {
  display: block; position: absolute; left: 28.33%; top: 26.67%; width: 43.33%; height: 43.33%;
  animation: orbit 9s linear infinite;
}
.gate .em-orbit b { position: absolute; left: 50%; top: 0; width: 21%; height: 21%; border-radius: 50%; background: var(--ink); translate: -50% -50%; }
@keyframes orbit { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .gate .em-orbit { animation: none; } }

/* Шаги входа — настоящая последовательность, поэтому с номерами и линией. */
.steps { list-style: none; margin: 28px 0 0; padding: 0; text-align: left; counter-reset: step; }
.steps li { position: relative; padding: 0 0 18px 46px; counter-increment: step; color: var(--ink-2); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14px;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 30px; bottom: 2px; width: 1px; background: var(--line); }
.steps li:last-child { padding-bottom: 0; }

/* ——— Сообщения ——— */
.notice { padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 15px; text-align: left; }
.notice.warn { background: var(--down-soft); color: var(--down-ink); }
.gate .notice { margin-bottom: 24px; }
.muted { color: var(--muted); }

/* ——— Кабинет: слева пропуск и плитки, справа ссылки и платежи ——— */
.board {
  max-width: 1760px; margin: 0 auto; padding: 12px 32px 8px;
  display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start;
}
.side { position: sticky; top: 20px; display: grid; gap: 16px; }
.content { display: grid; gap: 24px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
.panel > h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.panel .hint { color: var(--muted); font-size: 14px; margin: -8px 0 18px; max-width: 72ch; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.fact .label { color: var(--muted); font-size: 14px; }
.fact .value { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.fact .value.on { color: var(--ok); }
.fact .value.off { color: var(--ink-2); }
.fact .note { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Пропуск: подписка — главное на странице. Контур щита — водяной знак. */
.pass { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 26px 28px; }
.pass::after {
  content: ""; position: absolute; z-index: -1; right: -36px; top: -28px; width: 190px; height: 190px; opacity: .8;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 19.5 5.3v5.9c0 4.9-3.2 8.6-7.5 10.1-4.3-1.5-7.5-5.2-7.5-10.1V5.3z' fill='none' stroke='%233fb950' stroke-opacity='.16' stroke-width='.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='11.6' r='5.2' fill='none' stroke='%233fb950' stroke-opacity='.12' stroke-width='.35' stroke-dasharray='1.6 2.2'/%3E%3C/svg%3E");
}
.pass .state { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 500; }
.pass .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pass .state.none { background: var(--warn-soft); color: var(--warn-ink); }
.plan + .plan { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.plan h1 { margin-top: 14px; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.plan .until { margin-top: 8px; color: var(--ink-2); }
.plan .until b { color: var(--ink); font-weight: 600; }
.plan .main { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--accent); vertical-align: middle; }
.features { list-style: none; margin: 18px 0 0; padding: 0; }
.features li { padding: 9px 0; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.pass .empty { margin-top: 14px; color: var(--ink-2); max-width: 420px; }
.pass .button { margin-top: 18px; }
.pass .notice { margin-top: 16px; }

/* Ссылки подписок: адрес выделяется целиком одним нажатием, QR раскрывается. */
.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; align-items: start; }
.link { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; min-width: 0; }
.link h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.link .tag { margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 500; }
.url {
  display: block; padding: 12px 14px; border-radius: 12px;
  background: var(--ground); border: 1px solid var(--line);
  font: 400 13px/1.5 var(--mono); color: var(--ink); word-break: break-all;
  user-select: all; -webkit-user-select: all; cursor: text;
}
.qr-box { margin-top: 10px; }
.qr-box summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; list-style: none; }
.qr-box summary::-webkit-details-marker { display: none; }
.qr-box summary::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: -45deg; transition: rotate .15s var(--ease); }
.qr-box[open] summary::before { rotate: 45deg; }
.qr-box .open, .qr-box[open] .shut { display: none; }
.qr-box[open] .open { display: inline; }
.qr { display: block; margin-top: 12px; width: 200px; height: 200px; padding: 10px; border-radius: 14px; background: #ffffff; image-rendering: pixelated; }
.link .notice { margin-top: 4px; }

/* Платежи */
.payments { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.payments th { padding: 0 8px 10px; text-align: left; color: var(--muted); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--line); }
.payments td { padding: 12px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.payments tr:last-child td { border-bottom: 0; }
.payments th:first-child, .payments td:first-child { padding-left: 0; }
.payments .sum { font-weight: 600; white-space: nowrap; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--panel-2); color: var(--ink-2); }
.pill.paid { background: var(--ok-soft); color: var(--ok); }
.pill.pending { background: var(--warn-soft); color: var(--warn-ink); }
.abandoned { margin-top: 14px; font-size: 14px; }

.who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.who code { font: 400 14px var(--mono); color: var(--ink); }

@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .facts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .side { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .top { padding: 16px 16px 4px; }
  .board { gap: 16px; }
  .brand small { display: none; }
  .board { padding: 8px 16px; }
  .foot { padding: 8px 16px 28px; }
  .panel, .pass { padding: 20px 18px; border-radius: 16px; }
  .plan h1 { font-size: 28px; }
  .fact { padding: 14px 16px; }
  .fact .value { font-size: 22px; }
  .gate h1 { font-size: 26px; }
  .payments th:nth-child(3), .payments td:nth-child(3) { display: none; }
}