/* ════════════════════════════════════════════════════════════════════════
   DGMate — Marine Editorial instrument UI.
   Built on the Cargo Planner tokens (tokens.css). One easing, calm motion,
   layered surfaces, monospace data, uppercase letter-spaced micro-labels.
   Readability over atmosphere: data is the centerpiece.
═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{
  background-color:var(--bg);
  color:var(--txt);
  font-family:var(--ff-ui);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Fixed chart background (web/bg-chart.png) — a quiet warm whisper that frames the
   content and never sits under the data. The warm base shows through; the cool sea is
   muted by a desaturating/warming filter + a warm tint overlay. Dimmed in dark theme. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url('bg-chart.png') center center / cover no-repeat;
  opacity:var(--chart-opacity);
  filter:var(--chart-filter);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--chart-tint);
}
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:color-mix(in srgb, var(--acc) 30%, transparent); }

/* shared micro-label — the signature deck-compass treatment */
.micro-label{
  font-family:var(--ff-ui);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--txt3);
}

.mono{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }

/* ───────────────────────── shell ───────────────────────── */
.app{
  max-width:1120px;
  margin:0 auto;
  padding:28px 22px 28px;
}

/* ── hero — deep-navy structural top bar (full-bleed). Working area below stays light. ── */
.hero{ background:var(--navy); border-bottom:1px solid var(--navy2); box-shadow:var(--sh-md); }
.hero-bar{
  max-width:1120px; margin:0 auto; padding:13px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:flex; align-items:center; gap:13px; }
.logo-mark{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); flex-shrink:0; }
/* wordmark — two-tone Manrope ExtraBold (option A); "DG" in hi-vis orange */
.wordmark{
  font-family:var(--ff-display); font-weight:800; font-size:22px;
  letter-spacing:-.02em; color:var(--navy-txt);
}
.wordmark .dg{ color:var(--acc); }
.hero-actions{ display:flex; align-items:center; gap:10px; }
/* DRAFT chip — on navy */
.draft-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:10px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:#ffb27a;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,106,0,.16); border:1px solid rgba(255,106,0,.5);
}
.draft-chip .chip-pip{ width:6px; height:6px; border-radius:50%; background:var(--acc); }

/* hero head — on the light working area, just below the navy bar (generous air) */
.hero-head{ margin:6px 2px 26px; }
.hero-title{
  font-family:var(--ff-display); font-weight:680; font-size:31px;
  letter-spacing:-.022em; line-height:1.05; color:var(--txt); margin:0;
}
.hero-title .lite{ font-weight:500; color:var(--txt2); letter-spacing:-.01em; }
.hero-meta{
  margin:15px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; line-height:1.5;
  font-family:var(--ff-ui); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt2);
}
.hero-meta .d{ color:var(--txt3); }

/* language toggle (EN / UA) — on navy */
.lang-toggle{ display:inline-flex; border:1px solid var(--navy-brd); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); }
.lang-opt{ font-family:var(--ff-ui); font-weight:600; font-size:10.5px; letter-spacing:.06em; padding:6px 11px; color:var(--navy-txt2); background:transparent;
  transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.lang-opt.is-active{ background:var(--acc); color:var(--acc-ink); }
.lang-opt:not(.is-active):hover{ color:var(--navy-txt); background:rgba(255,255,255,.10); }

/* ───────────────────────── panels ───────────────────────── */
.console{ display:flex; flex-direction:column; gap:14px; }
/* frosted-glass floating panels (the chart whispers through the frame) */
.panel{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-glass);
  box-shadow:var(--sh-md);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:18px 20px 20px;
}
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.panel-head .hint{ font-size:var(--fs-label); color:var(--txt3); }

/* leg toggle — segmented, route shown in mono */
.leg-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.leg-opt{
  position:relative;
  text-align:left;
  padding:13px 16px;
  border-radius:var(--r);
  background:var(--surf2);
  border:1px solid var(--brd);
  transition:border-color var(--dur-short) var(--ease), background var(--dur-short) var(--ease), box-shadow var(--dur-short) var(--ease);
}
.leg-opt:hover{ background:var(--surf3); }
.leg-opt .leg-name{ display:block; font-weight:600; font-size:14px; color:var(--txt); }
.leg-opt .leg-route{
  display:block; margin-top:4px;
  font-family:var(--ff-mono); font-size:var(--fs-label); letter-spacing:.04em;
  color:var(--txt3);
}
/* confident selected state — orange left-bar + light tint + ring + a "selected" dot */
.leg-opt.is-active{
  background:color-mix(in srgb, var(--acc) 8%, var(--surf));
  border-color:var(--brd);
  border-left:4px solid var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent), var(--sh-xs);
}
.leg-opt.is-active::after{
  content:""; position:absolute; top:12px; right:13px;
  width:9px; height:9px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
.leg-opt.is-active .leg-name{ color:var(--txt); }
.leg-opt.is-active .leg-route{ color:var(--acc-strong); }

/* dropzone */
.dropzone{
  position:relative;
  border:1.5px dashed var(--brd2);
  border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--acc) 3%,transparent) 0 10px, transparent 10px 20px),
    var(--surf2);
  padding:34px 20px;
  text-align:center;
  transition:border-color var(--dur-short) var(--ease), background var(--dur-short) var(--ease), transform var(--dur-short) var(--ease);
}
.dropzone.is-drag{
  border-color:var(--acc);
  background:color-mix(in srgb, var(--acc) 9%, var(--surf2));
  transform:translateY(-1px);
}
.dz-icon{
  width:42px; height:42px; margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surf); border:1px solid var(--brd);
  color:var(--acc); font-size:20px; box-shadow:var(--sh-xs);
}
.dz-title{ font-weight:600; font-size:13.5px; color:var(--txt); }
.dz-sub{ font-size:var(--fs-label); color:var(--txt3); margin-top:3px; }
.link{ color:var(--acc-strong); font-weight:600; padding:0; text-decoration:underline; text-underline-offset:2px; }

/* file list */
.filelist{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.file-row{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px;
  background:var(--surf2); border:1px solid var(--sep);
  border-radius:var(--r-sm);
  animation:rowIn var(--dur-short) var(--ease) both;
}
.file-ico{ color:var(--danger); font-size:13px; font-weight:700; font-family:var(--ff-mono); flex-shrink:0; }
.file-name{ font-size:var(--fs-label); color:var(--txt); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size{ font-family:var(--ff-mono); font-size:10px; color:var(--txt3); flex-shrink:0; }
.file-x{ color:var(--txt4); font-size:15px; line-height:1; padding:2px 4px; border-radius:4px; transition:color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
.file-x:hover{ color:var(--danger); background:color-mix(in srgb,var(--danger) 12%,transparent); }

/* action row */
.action-row{ display:flex; align-items:center; gap:16px; padding:2px 2px; }
.btn-primary{
  position:relative;
  padding:13px 22px;
  border-radius:var(--r);
  background:var(--acc);
  color:var(--acc-ink); font-weight:700; font-size:13.5px; letter-spacing:.01em;
  box-shadow:0 6px 16px -7px color-mix(in srgb, var(--acc) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-short) var(--ease), background var(--dur-micro) var(--ease);
}
.btn-primary:hover:not(:disabled){ background:var(--acc2); transform:translateY(-1px); box-shadow:0 10px 22px -8px color-mix(in srgb, var(--acc) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.30); }
.btn-primary:active:not(:disabled){ transform:translateY(0) scale(.99); }
/* clear, non-muddy disabled state */
.btn-primary:disabled{ background:var(--surf3); color:var(--txt3); border:1px solid var(--brd); box-shadow:none; cursor:not-allowed; }
.btn-primary.is-busy{ pointer-events:none; }
.btn-primary .spinner{ display:none; }
.btn-primary.is-busy .spinner{
  display:inline-block; width:13px; height:13px; margin-right:8px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
.action-note{ font-size:var(--fs-label); color:var(--txt3); font-family:var(--ff-mono); letter-spacing:.02em; }

/* ───────────────────────── results ───────────────────────── */
.results{ animation:panelIn var(--dur-medium) var(--ease) both; }
.results-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.results-title{
  font-family:var(--ff-display); font-weight:700; font-size:var(--fs-h2);
  margin:4px 0 0; letter-spacing:-.01em;
}
.results-title b{ color:var(--acc); font-weight:700; }
.btn-download{
  padding:10px 16px; border-radius:var(--r-sm);
  background:var(--surf); border:1.5px solid var(--acc);
  font-weight:600; font-size:var(--fs-label); color:var(--acc-strong);
  display:inline-flex; align-items:center; gap:8px;
  transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn-download:hover{ background:color-mix(in srgb, var(--acc) 10%, var(--surf)); }
.btn-download:active{ transform:scale(.98); }
.btn-download .dl-ico{ color:var(--acc); font-weight:700; }

/* summary chips */
.summary{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.stat{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  background:var(--surf2); border:1px solid var(--sep);
  font-size:var(--fs-label); color:var(--txt2);
}
.stat .dot{ width:7px; height:7px; border-radius:50%; }
.stat .num{ font-family:var(--ff-mono); font-weight:600; color:var(--txt); }
.dot-ok{ background:var(--flag-ok); }
.dot-check{ background:var(--flag-check); }
.dot-review{ background:var(--flag-review); }

/* warnings (per-file note warnings, e.g. missing pages) */
.warnings{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.warn{
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--acc-warm) 9%, var(--surf));
  border:1px solid color-mix(in srgb, var(--acc-warm) 30%, transparent);
  border-left:3px solid var(--acc-warm);
  font-size:var(--fs-label); color:var(--txt2);
}
.warn .warn-ico{ color:var(--acc-warm); font-size:13px; flex-shrink:0; }
.warn .warn-file{ font-family:var(--ff-mono); color:var(--txt); font-weight:600; }

/* data table — sits on a CLEAN OPAQUE surface; no glass/blur/chart behind numbers */
.table-wrap{ overflow-x:auto; border:1px solid var(--brd); border-radius:var(--r); background:var(--surf); }
.dg-table{ width:100%; border-collapse:collapse; font-size:var(--fs-data); }
.dg-table thead th{
  position:sticky; top:0;
  background:var(--navy);
  font-family:var(--ff-ui); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy-txt);
  text-align:left; padding:11px 12px; white-space:nowrap;
  border-bottom:1px solid var(--navy2);
}
/* CERS column letters — kept, but quiet: small, muted, superscript-like (not noise) */
.dg-table thead th .col-code{ color:var(--navy-txt2); font-family:var(--ff-mono); margin-left:3px; font-size:8px; font-weight:500; vertical-align:super; opacity:.85; }
.dg-table tbody td{ padding:11px 12px; border-bottom:1px solid var(--sep); vertical-align:middle; white-space:nowrap; }
.dg-table tbody tr:last-child td{ border-bottom:none; }
.dg-table tbody tr{ transition:background var(--dur-micro) var(--ease); }
.dg-table tbody tr:hover{ background:var(--surf2); }
.cell-idx{ font-family:var(--ff-mono); color:var(--txt3); width:34px; }
.cell-container,.cell-un,.cell-amount,.cell-unit{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
.cell-container{ font-weight:600; color:var(--txt); }
.cell-amount{ text-align:right; }
.cell-ng{ font-size:var(--fs-label); color:var(--txt2); }

/* flag rail + badge */
.dg-table tbody tr{ border-left:3px solid transparent; }
tr.flag-ok{ border-left-color:transparent; }
tr.flag-check{ border-left-color:var(--flag-check); background:color-mix(in srgb,var(--flag-check) 5%,transparent); }
tr.flag-review{ border-left-color:var(--flag-review); background:color-mix(in srgb,var(--flag-review) 6%,transparent); }
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; font-family:var(--ff-ui);
}
.badge-ok{ color:var(--ok-ink); background:color-mix(in srgb,var(--flag-ok) 16%,transparent); }
.badge-check{ color:var(--check-ink); background:color-mix(in srgb,var(--flag-check) 22%,transparent); }
.badge-review{ color:var(--review-ink); background:color-mix(in srgb,var(--flag-review) 15%,transparent); }
.badge .b-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.hw-badge{
  margin-left:6px; font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt3); padding:2px 6px; border-radius:4px; border:1px solid var(--brd); background:var(--surf2);
}

/* DG class chip — icon + standardized IMO color (DESIGN_RULES.md §4) */
/* ONE chip component, ONE fixed footprint (58×24) — only the placard colour/symbol vary.
   Content centred, no shadow. Class 8 split + 4.1 stripe come from the gradient in --dg-bg. */
.dg-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  box-sizing:border-box; width:58px; height:24px; overflow:hidden;
  font-family:var(--ff-mono); font-weight:700; font-size:11.5px; letter-spacing:.02em;
  border-radius:999px;
  border:1.5px solid var(--dg-bc, var(--brd2));
  background:var(--dg-bg, var(--surf3));
  color:var(--dg-tc, var(--txt));
}
.dg-chip svg{ width:13px; height:13px; flex-shrink:0; }
/* white-ground classes (2.3/6.1/6.2): strong dark outline so they aren't invisible */
.dg-chip[data-v="white"]{ border-width:2px; }
/* corrosive 8: white field + solid black base bar (the white/black split); border-box keeps footprint */
.dg-chip[data-v="split"]{ border-bottom-width:6px; }
/* excluded classes: neutral muted grey — reads inactive, not a vivid placard */
.dg-chip.muted{ background:var(--surf3); color:var(--txt3); border:1px solid var(--brd); font-weight:600; }

/* review note (point 5) — one compact "Needs check:" line + subordinate reasons.
   Quiet, never competes with the data row. */
tr.note-row td{ padding-top:1px; padding-bottom:11px; border-bottom:1px solid var(--sep); }
.note{ padding-left:2px; }
.note-main{ font-size:11.5px; color:var(--txt2); }
.note-lead{ font-weight:600; margin-right:8px; letter-spacing:.01em; color:var(--flag-check); }
tr.note-row.flag-review .note-lead{ color:var(--flag-review); }
.note-fields{ font-family:var(--ff-mono); color:var(--txt); letter-spacing:.01em; }
.note-detail{ margin-top:4px; font-size:10.5px; color:var(--txt3); line-height:1.5; }

/* dropped items (filtered classes) */
.dropped{ margin-top:16px; }
.dropped-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.dropped-list{ display:flex; flex-direction:column; gap:6px; }
.drop-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:var(--r-sm);
  background:var(--surf2); border:1px dashed var(--brd);
  font-size:var(--fs-label); color:var(--txt3);
}
.drop-row .d-file{ font-family:var(--ff-mono); color:var(--txt2); }
.drop-row .d-reason{ margin-left:auto; color:var(--txt4); font-size:10.5px; }

/* empty / error states */
.flash{
  margin-top:14px; padding:12px 14px; border-radius:var(--r-sm);
  font-size:var(--fs-label);
  background:color-mix(in srgb,var(--danger) 9%,var(--surf));
  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
  border-left:3px solid var(--danger); color:var(--txt2);
}

/* safety bar — fixed, the operating contract */
.safety-bar{
  position:static;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; margin-top:30px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--brd); border-bottom:1px solid var(--brd);
  font-size:var(--fs-label); color:var(--txt2);
}
.safety-bar .safety-ico{ color:var(--acc-warm); }
.safety-bar b{ color:var(--txt); font-weight:600; }

/* motion */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.stagger > *{ animation:rowIn var(--dur-short) var(--ease) both; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* focus visibility — keyboard, safety-critical */
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }

/* ───────────────────── account modal (login + pricing — SCAFFOLD, inert) ───────────────────── */
.btn-signin{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--navy-brd);
  font-family:var(--ff-ui); font-weight:600; font-size:11.5px; color:var(--navy-txt);
  transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn-signin:hover{ background:rgba(255,255,255,.12); border-color:var(--acc); }
.btn-signin:active{ transform:scale(.97); }
.btn-signin .si-ico{ color:var(--acc); font-size:13px; }

/* account avatar (logged-in): Google photo or ochre monogram, clean on the navy bar */
.si-avatar{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:inline-grid; place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.25);
}
.si-avatar[hidden]{ display:none; }
.si-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.si-avatar .mono-init{
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--acc); color:#fff;
  font-family:var(--ff-ui); font-weight:700; font-size:12px; line-height:1;
}
/* tuck the avatar toward the pill edge when present */
.btn-signin:has(#siAvatar:not([hidden])){ padding-left:5px; }

.modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(28,22,12,.46); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn var(--dur-short) var(--ease);
}
.modal-overlay[hidden]{ display:none; }
.modal{
  position:relative; width:100%; max-width:420px; max-height:calc(100vh - 48px); overflow-y:auto;
  background:var(--surf); border:1px solid var(--brd); border-radius:18px;
  box-shadow:var(--sh-lg); padding:26px 26px 22px;
  animation:panelIn var(--dur-medium) var(--ease) both;
}
.modal-x{ position:absolute; top:12px; right:14px; font-size:20px; line-height:1; color:var(--txt3); padding:4px 7px; border-radius:7px;
  transition:color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease); }
.modal-x:hover{ color:var(--txt); background:var(--surf2); }

.auth-head{ margin-bottom:18px; }
.auth-title{ font-family:var(--ff-display); font-weight:700; font-size:20px; color:var(--txt); margin:5px 0 0; letter-spacing:-.01em; }
.auth-sub{ font-size:11.5px; color:var(--txt3); margin:7px 0 0; line-height:1.5; }
.btn-google{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px; border-radius:10px; border:1px solid var(--brd2); background:var(--surf);
  font-family:var(--ff-ui); font-weight:600; font-size:13px; color:var(--txt);
  transition:background var(--dur-micro) var(--ease);
}
.btn-google:hover{ background:var(--surf2); }
.btn-google svg{ width:17px; height:17px; flex-shrink:0; }
.auth-or{ display:flex; align-items:center; gap:10px; margin:15px 0; color:var(--txt4);
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.auth-or::before,.auth-or::after{ content:""; height:1px; flex:1; background:var(--sep); }
.auth-form{ display:flex; flex-direction:column; gap:11px; }
.auth-form label{ display:flex; flex-direction:column; gap:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--txt3); }
.auth-form input{
  font-family:var(--ff-ui); font-size:13px; color:var(--txt);
  padding:10px 12px; border-radius:9px; border:1px solid var(--brd2); background:var(--surf2);
  transition:border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.auth-form input::placeholder{ color:var(--txt4); }
.auth-form input:focus{ outline:none; border-color:var(--acc); background:var(--surf);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent); }
.auth-submit{ width:100%; margin-top:4px; display:flex; align-items:center; justify-content:center; }
.auth-switch{ font-size:11.5px; color:var(--txt2); margin:14px 0 0; text-align:center; }
.auth-note{ font-size:10.5px; color:var(--txt2); margin:11px 0 0; line-height:1.5;
  padding:10px 12px; background:var(--surf2); border:1px solid var(--sep); border-radius:9px; }
.inert-note{ font-size:10.5px; font-weight:600; color:var(--acc-strong); margin:11px 0 0; text-align:center; }

/* plan / pricing plate */
.plan{ margin-top:20px; padding-top:18px; border-top:1px solid var(--sep); }
.plan-row{ display:flex; align-items:center; justify-content:space-between; }
.plan-price{ font-family:var(--ff-display); font-size:14px; color:var(--txt3); margin-top:3px; }
.plan-price b{ font-size:25px; font-weight:700; color:var(--txt); letter-spacing:-.02em; }
.plan-badge{ font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--acc);
  padding:4px 9px; border-radius:999px; background:color-mix(in srgb,var(--acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); }
.plan-incl{ font-size:11.5px; color:var(--txt2); margin:10px 0 13px; line-height:1.55; }
.btn-subscribe{ width:100%; padding:11px; border-radius:10px;
  background:var(--surf3); color:var(--txt3); border:1px solid var(--brd);
  font-family:var(--ff-ui); font-weight:600; font-size:12.5px; cursor:not-allowed; }
.plan-foot{ font-size:10px; color:var(--txt4); margin:9px 0 0; text-align:center; }

@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ───────────────── i18n (EN / UA dual content, class-toggled) ───────────────── */
html[data-lang="en"] .t-uk{ display:none; }
html[data-lang="uk"] .t-en{ display:none; }

/* ───────────────── about + pricing + FAQ (main page) ───────────────── */
.section{ margin-top:30px; }
.section-h{ font-family:var(--ff-display); font-weight:700; font-size:var(--fs-h2); color:var(--txt); margin:0 2px 6px; letter-spacing:-.01em; }
.section-lead{ font-size:var(--fs-body); color:var(--txt2); margin:0 2px 16px; max-width:64ch; line-height:1.6; }
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.about-card{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-glass); box-shadow:var(--sh); padding:16px 18px; }
.about-card .ac-ico{ color:var(--acc); font-size:17px; display:block; margin-bottom:8px; }
.about-card h3{ font-size:13.5px; font-weight:600; color:var(--txt); margin:0 0 5px; }
.about-card p{ font-size:var(--fs-label); color:var(--txt2); margin:0; line-height:1.55; }

.pricecard{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-glass); box-shadow:var(--sh-md); padding:20px 24px; }
.pc-uah{ font-family:var(--ff-display); font-size:30px; font-weight:700; color:var(--txt); letter-spacing:-.02em; }
.pc-per{ font-size:14px; color:var(--txt3); font-weight:500; }
.pc-usd{ font-family:var(--ff-mono); font-size:12px; color:var(--txt3); margin-top:3px; }
.pc-incl{ font-size:var(--fs-label); color:var(--txt2); margin-top:7px; max-width:48ch; line-height:1.55; }
.pc-vat{ font-size:10.5px; color:var(--txt3); margin-top:5px; }
.pc-cta{ flex-shrink:0; }

.faq{ border:1px solid var(--brd); border-radius:var(--r-lg); overflow:hidden; background:var(--surf); }
.faq details{ border-bottom:1px solid var(--sep); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ cursor:pointer; list-style:none; padding:14px 18px; font-weight:600; font-size:13px; color:var(--txt);
  display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--acc); font-size:17px; font-weight:600; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq .faq-a{ padding:0 18px 15px; font-size:var(--fs-label); color:var(--txt2); line-height:1.6; max-width:74ch; }

/* ───────────────── plan modal — subscription-compliance UI ───────────────── */
.plan-type{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 13px; }
.pt-opt{ text-align:left; padding:10px 12px; border-radius:10px; background:var(--surf2); border:1px solid var(--brd); cursor:pointer; }
.pt-opt.on{ background:var(--surf); border-color:var(--acc); box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 26%,transparent); }
.pt-name{ font-weight:600; font-size:12px; color:var(--txt); display:block; }
.pt-sub{ font-size:10px; color:var(--txt3); display:block; margin-top:2px; }
.consent{ display:flex; gap:9px; align-items:flex-start; margin:2px 0 11px; font-size:10.5px; color:var(--txt2); line-height:1.5; }
.consent input{ margin-top:1px; width:15px; height:15px; flex-shrink:0; accent-color:var(--acc); cursor:pointer; }
.plan-notice{ font-size:10px; color:var(--txt3); margin:0 0 11px; line-height:1.5; }
.plan-cancel{ font-size:10.5px; color:var(--txt2); margin:10px 0 0; text-align:center; }
.plan-cancel button{ color:var(--acc-strong); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

/* ───────────────── footer ───────────────── */
.site-footer{ position:relative; z-index:1; background:var(--navy); margin-top:40px; padding:26px 0 32px; }
.footer-inner{ max-width:1120px; margin:0 auto; padding:0 22px; }
.footer-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-links a{ font-size:var(--fs-label); color:var(--navy-txt2); text-decoration:none; }
.footer-links a:hover{ color:var(--navy-txt); text-decoration:underline; text-underline-offset:2px; }
.footer-cards{ display:flex; gap:8px; align-items:center; }
.footer-cards svg{ height:24px; width:auto; }
.footer-legal{ margin-top:18px; font-size:10.5px; color:var(--navy-txt2); line-height:1.8; }
.footer-legal b{ color:var(--navy-txt); font-weight:600; }
.footer-legal a{ color:inherit; }
.footer-rb{ margin-top:9px; font-size:10.5px; color:var(--navy-txt2); }
.footer-copy{ margin-top:10px; font-size:10px; color:rgba(255,255,255,.5); }

/* ───────────────── legal pages ───────────────── */
.legal-wrap{ position:relative; z-index:1; max-width:820px; margin:0 auto; padding:14px 22px 80px; }
.legal-top{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 18px; }
.legal-back{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); color:var(--acc-strong); font-weight:600; text-decoration:none; }
.draft-banner{ background:color-mix(in srgb,var(--acc) 10%,var(--surf)); border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
  border-left:3px solid var(--acc); border-radius:10px; padding:12px 15px; font-size:var(--fs-label); color:var(--txt2); margin-bottom:22px; line-height:1.55; }
.legal-doc{ background:var(--surf); border:1px solid var(--brd); border-radius:var(--r-lg); box-shadow:var(--sh); padding:30px 34px; }
.legal-doc h1{ font-family:var(--ff-display); font-weight:700; font-size:24px; color:var(--txt); margin:0 0 4px; letter-spacing:-.01em; }
.legal-doc .upd{ font-size:11px; color:var(--txt3); margin:0 0 20px; }
.legal-doc h2{ font-family:var(--ff-display); font-weight:700; font-size:15.5px; color:var(--txt); margin:22px 0 7px; }
.legal-doc p, .legal-doc li{ font-size:13px; color:var(--txt2); line-height:1.66; }
.legal-doc ul, .legal-doc ol{ margin:8px 0 8px 20px; }
.legal-doc li{ margin:4px 0; }
.req-block{ background:var(--surf2); border:1px solid var(--brd); border-radius:10px; padding:14px 16px; margin:12px 0; font-size:12.5px; color:var(--txt2); line-height:1.75; }
.req-block b{ color:var(--txt); font-weight:600; }

/* auth mode (sign-in vs register) + billing type (monthly vs one-time) show/hide */
.modal[data-mode="signin"] .m-register{ display:none; }
.modal[data-mode="register"] .m-signin{ display:none; }
.plan[data-plan="monthly"] .when-onetime{ display:none; }
.plan[data-plan="onetime"] .when-monthly{ display:none; }

/* auth: logged-out (auth-only) vs logged-in (account-only) views */
.modal[data-auth="in"] .auth-only{ display:none; }
.modal[data-auth="out"] .account-only{ display:none; }
.gate-notice{ font-size:11.5px; color:var(--review-ink); line-height:1.5; margin:0 0 14px; padding:10px 12px;
  background:color-mix(in srgb,var(--danger) 10%,var(--surf)); border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-left:3px solid var(--danger); border-radius:9px; }
.auth-forgot{ margin:9px 0 0; text-align:right; font-size:11px; }
.auth-msg{ margin:12px 0 0; font-size:11px; line-height:1.5; padding:9px 11px; border-radius:8px; }
.auth-msg.ok{ color:var(--ok-ink); background:color-mix(in srgb,var(--flag-ok) 14%,transparent); }
.auth-msg.err{ color:var(--review-ink); background:color-mix(in srgb,var(--danger) 12%,transparent); }
.account-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 14px; background:var(--surf2); border:1px solid var(--brd); border-radius:12px; }
.account-email{ font-family:var(--ff-mono); font-size:13px; font-weight:600; color:var(--txt); margin-top:3px; word-break:break-all; }
.verif-badge{ font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.verif-badge.ok{ color:var(--ok-ink); background:color-mix(in srgb,var(--flag-ok) 15%,transparent); }
.verif-badge.warn{ color:var(--check-ink); background:color-mix(in srgb,var(--flag-check) 20%,transparent); }
.btn-signout{ width:100%; margin-top:12px; padding:11px; border-radius:10px; background:var(--surf); border:1px solid var(--brd2);
  font-family:var(--ff-ui); font-weight:600; font-size:12.5px; color:var(--txt);
  transition:background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.btn-signout:hover{ background:var(--surf2); border-color:var(--danger); color:var(--review-ink); }