/* Онлайн-панель Framyy — в стиле дашборда (ответ Дмитрия 23.10, § 10): токены — копия frontend/src/next/design/tokens.css
   (стиль сайта v2, R295): чёрная страница, белый текст ступенями, оранжевый #ff5b10 — главная кнопка и бренд, бирюза #8ad5fc —
   канты и выделение, прямые углы, Plus Jakarta Sans. Шрифты — свои файлы (ноль внешних загрузок, CSP 'self'). */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('/fonts/pjs-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url('/fonts/pjs-500.woff2') format('woff2'); }
@font-face { font-family: 'Lexend Exa'; font-weight: 500; font-display: swap; src: url('/fonts/lexend-500.woff2') format('woff2'); }

.nx {
  --nx-bg-page: #03060c; --nx-bg-deep: #05080e; --nx-bg-glow: #0d1118;
  --nx-glass-1: rgba(255,255,255,0.04); --nx-glass-2: rgba(255,255,255,0.07); --nx-glass-3: rgba(255,255,255,0.11);
  --nx-line-1: rgba(255,255,255,0.12); --nx-line-2: rgba(255,255,255,0.24);
  --nx-text-100: #ffffff; --nx-text-80: #b3b5b8; --nx-text-60: #9a9ea4; --nx-text-40: #8c9097; --nx-text-30: #5c616a;
  --nx-orange: #ff5b10; --nx-accent: #8ad5fc; --nx-success: #7be3a4; --nx-warning: #ffcf6b; --nx-danger: #ff4d5e;
  --nx-accent-rgb: 138,213,252; --nx-cta-rgb: 255,91,16; --nx-danger-rgb: 255,77,94; --nx-warning-rgb: 255,207,107; --nx-success-rgb: 123,227,164;
  --nx-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-font-logo: 'Lexend Exa', 'Plus Jakarta Sans', sans-serif;
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--nx-bg-page); color: var(--nx-text-100); font: 400 14px/1.45 var(--nx-font);
  -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
a { color: var(--nx-accent); }
.muted { color: var(--nx-text-60); }
.faint { color: var(--nx-text-40); }
.pad { padding: 24px; }
.hidden { display: none !important; }

/* шапка */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: rgba(3,6,12,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nx-line-1); flex-wrap: wrap; }
.logo { font: 500 14px var(--nx-font-logo); letter-spacing: .12em; text-transform: uppercase; }
.logo b { background: linear-gradient(90deg, #8ad5fc, #ff5b10); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { background: none; border: 1px solid transparent; color: var(--nx-text-60); padding: 6px 12px; font: 500 12px var(--nx-font);
  text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.tab:hover { color: var(--nx-text-100); }
.tab[aria-selected="true"] { color: var(--nx-text-100); border-color: var(--nx-line-2); background: var(--nx-glass-2); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; background: var(--nx-orange); color: #fff; font-size: 11px; text-align: center; }
.spacer { flex: 1; }
.lang button { background: none; border: 0; color: var(--nx-text-40); font: 500 12px var(--nx-font); cursor: pointer; padding: 4px 6px; }
.lang button[aria-pressed="true"] { color: var(--nx-text-100); }

/* кнопки и поля */
.btn { border: 1px solid var(--nx-line-2); background: var(--nx-glass-1); color: var(--nx-text-100); padding: 9px 16px;
  font: 500 12px var(--nx-font); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background .2s var(--nx-ease); }
.btn:hover { background: var(--nx-glass-3); }
.btn.primary { background: var(--nx-orange); border-color: var(--nx-orange); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { border-color: rgba(var(--nx-danger-rgb), .6); color: var(--nx-danger); }
.btn:disabled { opacity: .45; cursor: default; }
label { display: block; color: var(--nx-text-60); font-size: 12px; margin: 12px 0 4px; }
input, select, textarea { width: 100%; background: var(--nx-glass-1); border: 1px solid var(--nx-line-1); color: var(--nx-text-100);
  padding: 9px 10px; font: 400 14px var(--nx-font); border-radius: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .tab:focus-visible { outline: 1px solid var(--nx-accent); outline-offset: 1px; }
textarea { min-height: 90px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.err { color: var(--nx-danger); font-size: 13px; margin-top: 8px; }
.ok { color: var(--nx-success); font-size: 13px; margin-top: 8px; }
.warn { color: var(--nx-warning); font-size: 12px; margin-top: 6px; }
.secret { font: 500 14px ui-monospace, monospace; background: var(--nx-glass-2); padding: 10px; word-break: break-all; user-select: all; white-space: pre-wrap; }

/* окно входа */
.auth { max-width: 380px; margin: 12vh auto 0; padding: 28px; border: 1px solid var(--nx-line-1); background: var(--nx-glass-1); }
.auth .qr { display: block; width: 100%; max-width: 220px; height: auto; margin: 16px auto 8px; }
.auth h1 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }

/* доска */
.page { padding: 20px; }
.page.narrow { max-width: 800px; margin: 0 auto; } /* Дмитрий 23.10: «не должно быть больше 800 пикселей» */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.check { display: flex; gap: 6px; align-items: center; color: var(--nx-text-60); font-size: 12px; margin: 0; flex: 0 0 auto; }
.check input { width: auto; }
.board { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(220px, 1fr)); gap: 12px; align-items: start; }
.col { border-top: 1px solid var(--nx-line-2); padding-top: 10px; min-width: 0; }
.col h2 { font: 500 12px var(--nx-font); text-transform: uppercase; letter-spacing: .08em; color: var(--nx-text-60); margin: 0 0 10px; }
.col h2 span { color: var(--nx-text-30); margin-left: 6px; }
.card { display: block; width: 100%; text-align: left; background: var(--nx-glass-1); border: 1px solid var(--nx-line-1); color: inherit;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.card:hover { background: var(--nx-glass-2); border-color: var(--nx-line-2); }
.card .t { font-weight: 500; }
.card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; color: var(--nx-text-40); font-size: 12px; }
.card .kind-bug { color: var(--nx-danger); }
.card .kind-epic { color: var(--nx-accent); }
.card .overdue { color: var(--nx-danger); }
.card .soon { color: var(--nx-warning); }
.card .w { color: var(--nx-warning); }

/* выдвижная панель задачи и формы */
.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--nx-bg-deep); border-left: 1px solid var(--nx-line-2);
  z-index: 11; overflow-y: auto; padding: 20px 22px calc(20px + env(safe-area-inset-bottom)); }
.drawer h2 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.events { margin-top: 18px; border-top: 1px solid var(--nx-line-1); padding-top: 10px; font-size: 12px; color: var(--nx-text-60); }
.events div { padding: 3px 0; }

/* списки: вопросы, входящие, линии, справка, команда */
.list { display: grid; gap: 8px; }
.item { border: 1px solid var(--nx-line-1); background: var(--nx-glass-1); padding: 12px; }
.item h3 { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.item .meta { color: var(--nx-text-40); font-size: 12px; }
.section { margin-bottom: 28px; }
.section > h2 { font: 500 12px var(--nx-font); text-transform: uppercase; letter-spacing: .08em; color: var(--nx-text-60); margin: 0 0 10px; }
.state-new { color: var(--nx-warning); } .state-taken { color: var(--nx-accent); } .state-done { color: var(--nx-success); }
.live { color: var(--nx-success); } .quiet { color: var(--nx-warning); } .stale { color: var(--nx-danger); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--nx-line-1); vertical-align: top; }
th { color: var(--nx-text-40); font-weight: 500; font-size: 12px; }
pre.ref { white-space: pre-wrap; word-break: break-word; font: 400 12px/1.5 ui-monospace, monospace; background: var(--nx-glass-1);
  border: 1px solid var(--nx-line-1); padding: 14px; max-height: 70vh; overflow: auto; }
.qimg { max-width: 100%; margin-top: 8px; border: 1px solid var(--nx-line-1); }

/* телефон: колонки доски листаются вбок, шапка в две строки */
@media (max-width: 760px) {
  .page { padding: 14px; }
  .board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
  .top { padding: 10px 14px; gap: 10px; }
  .top .who { display: none; }
}

/* Списки выбора: тёмная схема у браузера, иначе раскрытый список — белые буквы на белом (Дмитрий 23.10) */
:root { color-scheme: dark; }
select option { background: var(--nx-bg-deep); color: var(--nx-text-100); }

/* Вопрос по частям */
.q { display: grid; gap: 10px; padding: 16px; }
.q .q-title { font-size: 16px; line-height: 1.35; margin: 0; }
.q .meta { margin-top: -6px; }
.q-part { display: grid; gap: 4px; }
.q-label { font-size: 12px; color: var(--nx-text-60); }
details.q-part > summary { cursor: pointer; }
.q-text { margin: 0; color: var(--nx-text-80); white-space: pre-wrap; }
.q-options { display: flex; flex-wrap: wrap; gap: 6px; }
.q-option { font-size: 13px; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.q-answer textarea { min-height: 0; }