/* =============================================================
   Event 27.04.2026 — Editorial dark theme with amber accent.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* Surfaces */
  --bg:           #0e0e10;
  --bg-2:         #141210;
  --surface:      #181613;
  --surface-2:    #211d18;
  --surface-3:    #2a251f;

  /* Lines */
  --line:         rgba(248,234,205,0.07);
  --line-strong:  rgba(248,234,205,0.14);

  /* Text */
  --text:         #FAF6EE;
  --text-soft:    #B5AC97;
  --text-muted:   #7A7567;
  --text-dim:     #4f4a40;

  /* Accent — Юркас brand cream (Уверенность + Красота) */
  --accent:       #F8EACD;
  --accent-hover: #FCEFD7;
  --accent-soft:  rgba(248,234,205,0.10);
  --accent-line:  rgba(248,234,205,0.30);
  --on-accent:    #0e0e10;

  /* Status */
  --danger:       #ef4444;
  --danger-soft:  rgba(239,68,68,0.10);
  --success:      #10b981;
  --success-soft: rgba(16,185,129,0.10);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, monospace;

  /* Radii */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;

  /* Shadows */
  --shadow:    0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11','ss01','ss03';
}

/* Page-wide background image (event hall + Юркас mark).
   Use `contain` so the whole composition is visible — no bottom crop.
   Image is ~16:9, so on most desktops it fills the viewport almost
   edge-to-edge; any tiny gap is filled by --bg (matches the dark photo). */
body {
  background:
    url('/bg.png') center center / contain no-repeat fixed,
    var(--bg);
  background-color: var(--bg);
}

/* Tiny cream halos for brand warmth (over the photo). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(248,234,205,0.05), transparent 62%),
    radial-gradient(720px 560px at -8% 108%, rgba(248,234,205,0.03), transparent 60%);
}

/* On mobile fixed backgrounds are unreliable (iOS) — fall back to scroll. */
@media (max-width: 760px) {
  body {
    background-attachment: scroll;
  }
}

/* Grain overlay (very subtle) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Layout ---------- */
/* Central frosted-glass panel: page background (event photo) stays
   visible on the sides, blurred under the panel. */
.container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 28px 96px;
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(14,14,16,0.72) 0%,
      rgba(14,14,16,0.82) 60%,
      rgba(14,14,16,0.88) 100%);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 60px rgba(0,0,0,0.45);
}

.admin-shell { max-width: 1100px; }

/* On narrow screens the photo is hidden by the panel anyway — drop the
   side borders and reduce horizontal padding for breathing room. */
@media (max-width: 760px) {
  .container {
    border-left: 0;
    border-right: 0;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: none;
  }
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  line-height: 1;
}
.topbar .brand-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(248,234,205,0.45);
}
/* Box ratio matches the full source PNG (822×199 ≈ 4.13:1) so the
   wordmark, including the «р» descender, is shown in full. */
.topbar .brand-logo {
  display: block;
  width: 210px;
  height: 51px;
  background-color: var(--accent);
  -webkit-mask: url('/logo.png') no-repeat center / contain;
          mask: url('/logo.png') no-repeat center / contain;
}
@media (max-width: 540px) {
  .topbar .brand-logo {
    width: 170px;
    height: 41px;
  }
}
/* The descender of «р» is decorative — visually the body of «юркас»
   sits in the upper ~73 % of the PNG. Geometric centring of the right
   block would therefore drop it below the body of the letters, so we
   shift it up by the same offset that the optical centre is above the
   geometric centre of the box (~12 % of the box height). */
.topbar .right {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  line-height: 1;
  transform: translateY(-6px);
}
@media (max-width: 540px) {
  .topbar .right {
    transform: translateY(-5px);
  }
}

/* ---------- Section labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow .num { color: var(--accent); }
.eyebrow .bar {
  width: 22px; height: 1px;
  background: var(--line-strong);
}

/* ---------- Hero ---------- */
.hero { margin-bottom: 56px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { text-shadow: 0 4px 30px rgba(0,0,0,0.55); }

.hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(40px, 9vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.hero h1 .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: none;
}
.hero h1 .quote {
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: none;
}

/* ---------- Hero mobile banner (bg-2.png) ----------
   Показываем только на мобильных под H1 — растягиваем за padding контейнера
   на полную ширину экрана, без обрезки (натуральные пропорции). */
.hero-mobile-banner { display: none; }
@media (max-width: 760px) {
  .hero-mobile-banner {
    display: block;
    margin: 22px -20px 4px;
  }
  .hero-mobile-banner img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.hero .lead {
  margin: 22px 0 0;
  max-width: 540px;
  color: var(--text-soft);
  font-size: clamp(15px, 3.4vw, 17px);
  line-height: 1.55;
}
.hero .lead b { color: var(--text); font-weight: 600; }

.meta-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.meta-cell {
  background: var(--bg-2);
  padding: 16px 18px;
}
.meta-cell .k {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.meta-cell .v {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .meta-grid { grid-template-columns: 1fr; }
}

/* ---------- Section heading (large) ---------- */
.section {
  margin-top: 56px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}
.section-head .index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.12em;
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 5.6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.section-head .rule {
  flex: 1; height: 1px; background: var(--line-strong);
  align-self: center;
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
}
.card.tight { padding: 18px; }
.card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
:where(.card p) { margin: 0 0 15px; color: var(--text-soft); }
:where(.card p:last-child) { margin-bottom: 0; }

/* Form card needs to sit ABOVE all subsequent siblings */
#formCard {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

/* ---------- Form ---------- */
.form-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.form-sub {
  margin: 0 0 48px;
  color: var(--text-soft);
  font-size: 15px;
}


.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.field label .req { color: var(--accent); margin-left: 4px; }

.input,
.combobox-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder,
.combobox-input::placeholder { color: var(--text-muted); font-weight: 400; }
.input:hover,
.combobox-input:hover { border-color: rgba(255,255,255,0.22); }
.input:focus,
.combobox-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg);
}

.field-hint {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ---------- Participants list (multi-FIO) ---------- */
.participants {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.participant-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.participant-row .fullname-input {
  flex: 1;
  padding-right: 44px;
}
.participant-remove {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.participant-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.participant-remove svg { width: 14px; height: 14px; }

.btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: transparent;
  border: 1px dashed rgba(248, 234, 205, 0.35);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-add:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.btn-add span[aria-hidden] {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* ---------- Combobox (input + chevron) ---------- */
.combobox { position: relative; }
.combobox-input { padding-right: 46px; }
.combobox-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted);
  border: 0; border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.combobox-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.combobox-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.combobox.open .combobox-toggle svg { transform: rotate(180deg); }
.combobox.open .combobox-input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Portaled dropdown — appended to <body> as .combobox-portal */
.combobox-portal {
  position: fixed;
  z-index: 9999;
  background: #161618;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.combobox-portal::-webkit-scrollbar { width: 8px; }
.combobox-portal::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14); border-radius: 999px;
}

.combobox-option {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
  display: flex; align-items: center; gap: 10px;
}
.combobox-option:hover,
.combobox-option.active {
  background: var(--accent-soft);
  color: var(--text);
}
.combobox-option.active { box-shadow: inset 0 0 0 1px var(--accent-line); }
.combobox-option mark {
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-weight: 700;
}
.combobox-option.empty {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
  padding: 14px 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: var(--r);
  padding: 15px 20px;
  cursor: pointer;
  transition: background .15s, transform .08s, box-shadow .15s, opacity .2s;
  box-shadow: 0 8px 24px rgba(246,195,74,0.18);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn .arrow {
  display: inline-flex; align-items: center;
  transition: transform .2s;
}
.btn:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.40);
  box-shadow: none;
}
.btn-danger:hover { background: var(--danger-soft); }

/* ---------- Alerts ---------- */
.alert {
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 14px;
  margin-top: 14px;
  display: none;
  border: 1px solid transparent;
}
.alert.show { display: block; }
.alert.error {
  background: var(--danger-soft);
  border-color: rgba(239,68,68,0.30);
  color: #fecaca;
}
.alert.success {
  background: var(--success-soft);
  border-color: rgba(16,185,129,0.32);
  color: #a7f3d0;
}

/* ---------- Success state ---------- */
.success-screen { padding: 36px 24px; text-align: left; }
.success-screen .check {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.success-screen .check svg { width: 28px; height: 28px; color: var(--on-accent); }
.success-screen h2 {
  margin: 0 0 8px;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
}
.success-screen p { color: var(--text-soft); margin: 0; }

/* ---------- Timing timeline ---------- */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 12px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line-strong);
}
.t-row {
  position: relative;
  padding: 14px 0 14px 40px;
  border-bottom: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
}
.t-row:last-child { border-bottom: 0; }
.t-row::before {
  content: "";
  position: absolute;
  left: 6px; top: 22px;
  width: 13px; height: 13px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--line-strong);
}
.t-row.accent::before { border-color: var(--accent); background: var(--accent); }
.t-row.break::before { background: var(--bg-2); }

.t-time {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.t-label { color: var(--text-soft); font-size: 15px; }
.t-label b { color: var(--text); font-weight: 600; }

@media (max-width: 520px) {
  .t-row { grid-template-columns: 1fr; gap: 4px; padding-left: 36px; }
  .t-row::before { top: 18px; left: 4px; }
  .timeline::before { left: 10px; }
  .t-time { font-size: 12px; }
}

/* ---------- Audience grid ---------- */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .aud-grid { grid-template-columns: 1fr; }
}
.aud {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.aud .ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.aud .ico svg { width: 18px; height: 18px; }
.aud h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.aud p { margin: 0; font-size: 14px; color: var(--text-soft); line-height: 1.5; }

/* ---------- Program parts ---------- */
.parts { display: grid; gap: 16px; }

.part {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.part-head {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(246,195,74,0.04), transparent 80%);
}
.part-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  color: var(--accent);
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  display: inline-flex; align-items: center;
}
.part-title {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--text);
  display: inline-flex; align-items: center;
}
.part-body { padding: 8px 20px 16px; }
.part-body ul { list-style: none; margin: 0; padding: 0; }
.part-body li {
  position: relative;
  padding: 12px 0 12px 22px;
  color: var(--text-soft);
  border-top: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.part-body li:first-child { border-top: 0; }
.part-body li::before {
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 10px; height: 1px;
  background: var(--accent);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   Admin
   ============================================================ */

/* Tabs */
.tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: var(--r);
  margin-bottom: 22px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
  border: 0;
  background: transparent;
  white-space: nowrap;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--accent);
  color: var(--on-accent);
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar .search { flex: 1 1 240px; min-width: 0; }
.toolbar .stats {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.toolbar .actions {
  display: flex; gap: 8px;
  margin-left: auto;
}
.toolbar .actions .btn {
  width: auto;
  padding: 10px 14px;
  font-size: 13px;
}

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .col-id { width: 60px; color: var(--text-muted); font-family: var(--font-mono); }
.table .col-date { width: 170px; color: var(--text-soft); white-space: nowrap; font-family: var(--font-mono); font-size: 13px; }
.table .col-name { width: 260px; font-weight: 600; }

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Mobile cards */
.cards-list { display: none; padding: 6px; }
.cards-list .item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin: 8px;
}
.cards-list .item .row {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.cards-list .item .name { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.cards-list .item .company { color: var(--text-soft); font-size: 14px; }

@media (max-width: 720px) {
  .table { display: none; }
  .cards-list { display: block; }
}

/* Login */
.login-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 420px;
  padding: 32px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.login-card .eyebrow { margin-bottom: 16px; }
.login-card h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.login-card p {
  margin: 0 0 22px;
  color: var(--text-soft);
  font-size: 14px;
}

/* Utilities */
.hidden { display: none !important; }
.spacer { height: 8px; }
.spacer-lg { height: 24px; }