/* ============================================================
   Fanturk SelectUs — shared stylesheet
   Vanilla CSS. No framework. Generic, reusable class hooks
   intended to drop straight into Jinja2 / HTMX templates.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Brand */
  --brand:#1f4e79;          /* deep blue primary */
  --brand-700:#1a4467;
  --brand-800:#163a5a;      /* hover */
  --brand-050:#eef3f8;
  --brand-100:#d9e5f1;
  --cyan:#0f9fd9;           /* logo cyan accent */
  --cyan-700:#0b80b1;
  --cyan-050:#e7f6fc;
  --gray-brand:#6e7174;     /* logo gray */

  /* Semantic */
  --green:#16a34a;  --green-700:#138139; --green-050:#eaf7ef; --green-100:#d2eedc;
  --amber:#e67e22;  --amber-700:#bf6516; --amber-050:#fdf1e6;
  --red:#b3261e;    --red-700:#8f1d17;   --red-050:#fbecea;

  /* Neutrals (cool) */
  --ink:#16222e;
  --muted:#5d6f7e;
  --faint:#8a99a7;
  --bg:#eaeef3;
  --panel:#ffffff;
  --panel-2:#f6f8fb;
  --line:#dde4ec;
  --line-2:#c7d1de;

  /* Fields */
  --field:#ffffff;
  --field-border:#bfcad8;
  --field-disabled:#eef1f5;

  /* Shape */
  --r:7px; --r-sm:5px; --r-lg:12px; --r-pill:999px;

  /* Elevation */
  --sh-1:0 1px 2px rgba(18,38,58,.06), 0 1px 1px rgba(18,38,58,.04);
  --sh-2:0 4px 16px rgba(18,38,58,.09);
  --sh-3:0 18px 44px rgba(18,38,58,.18);

  /* Type */
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"SF Mono","Segoe UI Mono","Cascadia Code",Consolas,monospace;

  --h: 56px; /* header height */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{ margin:0; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-800); text-decoration:underline; }
button{ font-family:inherit; }
img{ display:block; max-width:100%; }
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); }

/* ============================================================
   App header
   ============================================================ */
.app-header{
  position:sticky; top:0; z-index:40;
  height:var(--h);
  display:flex; align-items:center; gap:18px;
  padding:0 18px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(18,38,58,.03);
}
/* thin brand accent line under header */
.app-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--cyan) 0%, var(--brand) 60%, var(--brand) 100%);
  opacity:.9;
}
.logo-chip{
  display:flex; align-items:center;
  height:38px; padding:0 14px 0 12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.logo-chip img{ height:22px; width:auto; }
.app-header .app-name{
  font-weight:600; color:var(--muted); letter-spacing:.2px;
  border-left:1px solid var(--line); padding-left:16px; margin-left:-2px;
}
.app-header .app-name b{ color:var(--brand); font-weight:700; }
.header-spacer{ flex:1 1 auto; }
.header-right{ display:flex; align-items:center; gap:14px; }
.header-user{ color:var(--muted); font-size:13px; }
.header-user b{ color:var(--ink); font-weight:600; }

/* nav links in header */
.h-link{ color:var(--muted); font-weight:600; font-size:13px; padding:6px 10px; border-radius:var(--r-sm); }
.h-link:hover{ color:var(--brand); background:var(--brand-050); text-decoration:none; }

/* Language toggle TR | EN */
.lang-toggle{
  display:inline-flex; align-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  overflow:hidden; background:var(--panel-2);
  font-size:12px; font-weight:700; letter-spacing:.3px;
}
.lang-toggle a, .lang-toggle button{
  padding:5px 9px; color:var(--muted); background:transparent;
  border:0; cursor:pointer; line-height:1;
}
.lang-toggle a.is-active, .lang-toggle button.is-active{
  background:var(--brand); color:#fff;
}
.lang-toggle a:hover:not(.is-active){ background:#fff; color:var(--brand); text-decoration:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--panel); --fg:var(--ink); --bd:var(--field-border);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:13.5px; font-weight:600; line-height:1;
  padding:9px 15px; border-radius:var(--r-sm);
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--panel-2); }
.btn:active{ transform:translateY(.5px); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.btn--primary{ --bg:var(--brand); --fg:#fff; --bd:var(--brand); }
.btn--primary:hover{ background:var(--brand-800); }
.btn--cyan{ --bg:var(--cyan); --fg:#fff; --bd:var(--cyan); }
.btn--cyan:hover{ background:var(--cyan-700); }
.btn--green{ --bg:var(--green); --fg:#fff; --bd:var(--green); }
.btn--green:hover{ background:var(--green-700); }
.btn--ghost{ --bg:transparent; --bd:transparent; --fg:var(--muted); }
.btn--ghost:hover{ background:var(--panel-2); color:var(--ink); }
.btn--danger{ --bg:#fff; --fg:var(--red); --bd:#e6b9b6; }
.btn--danger:hover{ background:var(--red-050); }
.btn--block{ width:100%; }
.btn--lg{ padding:12px 18px; font-size:15px; }
.btn--sm{ padding:6px 10px; font-size:12.5px; }
.btn--xs{ padding:4px 8px; font-size:12px; border-radius:4px; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* spinner used in "searching…" */
.spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
.spinner--ink{ border-color:var(--line-2); border-top-color:var(--brand); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   Forms
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.field:last-child{ margin-bottom:0; }
.field-label{
  font-size:12px; font-weight:600; color:var(--muted);
  letter-spacing:.2px; display:flex; align-items:center; gap:6px;
}
.field-label .req{ color:var(--red); }
.field-hint{ font-size:11.5px; color:var(--faint); }

.input, .select, textarea.input{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--field); border:1px solid var(--field-border);
  border-radius:var(--r-sm); padding:9px 11px; line-height:1.3;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s;
  appearance:none;
}
.input::placeholder{ color:#a9b4c0; }
.input:focus, .select:focus, textarea.input:focus{
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-050);
}
.input[disabled], .select[disabled]{
  background:var(--field-disabled); color:var(--faint); cursor:not-allowed;
}
.select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6f7e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; padding-right:30px;
}
/* input adornment (unit suffix) */
.input-affix{ position:relative; }
.input-affix .input{ padding-right:46px; }
.input-affix .affix{
  position:absolute; right:1px; top:1px; bottom:1px; display:flex; align-items:center;
  padding:0 10px; color:var(--faint); font-size:12px; font-weight:600;
  border-left:1px solid var(--line); background:var(--panel-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0; pointer-events:none;
}

/* error state */
.field.has-error .input,
.field.has-error .select{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-050); }
.field-error{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--red-700); font-weight:600;
}
.field-error::before{
  content:"!"; display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:var(--red); color:#fff;
  font-size:11px; font-weight:800; flex:none;
}

/* two-up row */
.field-row{ display:flex; gap:12px; }
.field-row > *{ flex:1 1 0; min-width:0; }

/* radios & checkboxes */
.choice{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; color:var(--ink); }
.choice input{ width:16px; height:16px; accent-color:var(--brand); cursor:pointer; flex:none; }
.choice.is-disabled{ color:var(--faint); cursor:not-allowed; }
.choice-list{ display:flex; flex-direction:column; gap:9px; }
.choice-inline{ display:flex; gap:18px; flex-wrap:wrap; }

/* consent block (KVKK) */
.consent{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel-2); font-size:12.5px; color:var(--muted); line-height:1.5;
}
.consent input{ margin-top:2px; width:16px; height:16px; accent-color:var(--brand); flex:none; }
.consent a{ font-weight:600; }

/* segmented control (selection mode) */
.segmented{
  display:flex; padding:3px; gap:3px;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r);
}
.segmented button{
  flex:1 1 0; border:0; background:transparent; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--muted);
  padding:7px 8px; border-radius:var(--r-sm); line-height:1.1; white-space:nowrap;
  transition:background .12s, color .12s, box-shadow .12s;
}
.segmented button:hover:not(.is-active){ color:var(--brand); }
.segmented button.is-active{ background:#fff; color:var(--brand); box-shadow:var(--sh-1); }

/* ============================================================
   Panels / cards
   ============================================================ */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.panel__head{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.panel__head h2, .panel__head h3{
  font-size:13.5px; font-weight:700; letter-spacing:.2px; color:var(--ink);
  text-transform:none;
}
.panel__head .sub{ color:var(--faint); font-weight:500; font-size:12.5px; }
.panel__head .spacer{ flex:1; }
.panel__body{ padding:16px; }
.panel__body--flush{ padding:0; }

/* form fieldset section inside the left rail */
.form-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden;
}
.form-card + .form-card{ margin-top:14px; }

/* collapsible section */
.section{ border-top:1px solid var(--line); }
.section:first-child{ border-top:0; }
.section__head{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 16px; background:transparent; border:0; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:.3px;
  text-transform:uppercase;
}
.section__head:hover{ background:var(--panel-2); }
.section__head .chev{
  margin-left:auto; color:var(--faint); transition:transform .18s ease; flex:none;
}
.section.is-open .section__head .chev{ transform:rotate(180deg); }
.section__title-note{ text-transform:none; color:var(--faint); font-weight:500; letter-spacing:0; }
.section__body{ padding:0 16px 16px; }
.section:not(.is-open) .section__body{ display:none; }

.section-label{
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--faint); margin:2px 0 10px;
}

/* read-only density read-out */
.readout{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 11px; border-radius:var(--r-sm);
  background:var(--cyan-050); border:1px solid #bfe6f5;
  font-size:12.5px; color:var(--brand-700);
}
.readout b{ color:var(--brand); font-weight:700; }
.readout .dot{ width:4px; height:4px; border-radius:50%; background:var(--cyan); }

/* small guidance note (Nq guide style) */
.note-box{
  padding:10px 12px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line);
  font-size:12px; color:var(--muted); line-height:1.5;
}
.note-box b{ color:var(--ink); }
.note-box .warn{ color:var(--amber-700); font-weight:600; }

/* ============================================================
   Data tables
   ============================================================ */
.table-wrap{ width:100%; overflow:auto; }
.data-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13px;
}
.data-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2); color:var(--muted);
  font-weight:700; font-size:11.5px; letter-spacing:.3px; text-transform:uppercase;
  text-align:right; white-space:nowrap;
  padding:10px 10px; border-bottom:1px solid var(--line-2);
}
.data-table thead th:first-child{ text-align:left; }
.data-table thead th.col-text{ text-align:left; }
.data-table tbody td{
  padding:9px 10px; border-bottom:1px solid var(--line);
  text-align:right; white-space:nowrap; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.data-table tbody td:first-child, .data-table td.col-text{ text-align:left; }
.data-table tbody tr:hover{ background:var(--brand-050); }
.data-table .fan-id{ font-weight:700; color:var(--brand); }
.data-table .muted{ color:var(--faint); }

/* rank tinting: best efficiency rows */
.data-table tr.is-best > td{ background:var(--green-050); }
.data-table tr.is-best:hover > td{ background:var(--green-100); }
.data-table tr.is-best .fan-id{ color:var(--green-700); }

/* selected row */
.data-table tr.is-selected > td{
  background:var(--brand); color:#fff;
}
.data-table tr.is-selected:hover > td{ background:var(--brand); }
.data-table tr.is-selected .fan-id,
.data-table tr.is-selected .muted{ color:#fff; }
.data-table tr.is-selected .eff-pill{ background:rgba(255,255,255,.18); color:#fff; }

/* clickable rows */
.data-table tr.row-link{ cursor:pointer; }

/* efficiency pill inside cell */
.eff-pill{
  display:inline-block; min-width:48px; text-align:center;
  padding:2px 7px; border-radius:var(--r-pill);
  background:var(--green-050); color:var(--green-700);
  font-weight:700; font-size:12px;
}

/* compact per-row action buttons */
.row-actions{ display:inline-flex; gap:6px; }
.data-table tr.is-selected .btn{ border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.12); }
.data-table tr.is-selected .btn:hover{ background:rgba(255,255,255,.22); }

/* rank number chip in first column */
.rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; margin-right:8px;
  background:var(--line); color:var(--muted); font-size:11px; font-weight:700;
  vertical-align:middle;
}
tr.is-best .rank{ background:var(--green); color:#fff; }
tr.is-selected .rank{ background:#fff; color:var(--brand); }

/* result count strip */
.result-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px solid var(--line);
  background:var(--panel-2); font-size:12.5px; color:var(--muted);
}
.result-meta b{ color:var(--ink); }

/* ============================================================
   Badges
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.2px; line-height:1.6;
  border:1px solid transparent; white-space:nowrap;
}
.badge--green{ background:var(--green-050); color:var(--green-700); border-color:var(--green-100); }
.badge--amber{ background:var(--amber-050); color:var(--amber-700); border-color:#f6dcc1; }
.badge--red{ background:var(--red-050); color:var(--red-700); border-color:#eecbc8; }
.badge--muted{ background:var(--panel-2); color:var(--muted); border-color:var(--line-2); }
.badge--brand{ background:var(--brand-050); color:var(--brand); border-color:var(--brand-100); }
.badge--cyan{ background:var(--cyan-050); color:var(--cyan-700); border-color:#bfe6f5; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================================================
   KPI cards (detail panel)
   ============================================================ */
.kpi-row{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
}
.kpi{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  padding:12px 13px; display:flex; flex-direction:column; gap:3px;
}
.kpi .kpi-label{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); }
.kpi .kpi-value{ font-size:21px; font-weight:700; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .kpi-unit{ font-size:12px; font-weight:600; color:var(--muted); margin-left:3px; }
.kpi--accent{ background:var(--green-050); border-color:var(--green-100); }
.kpi--accent .kpi-value{ color:var(--green-700); }
.kpi--accent .kpi-label{ color:var(--green-700); }

/* spec tables (key/value) */
.spec-table{ width:100%; border-collapse:collapse; font-size:13px; }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table tr:last-child{ border-bottom:0; }
.spec-table th{
  text-align:left; font-weight:600; color:var(--muted); font-size:12.5px;
  padding:8px 10px; width:54%; white-space:nowrap;
}
.spec-table td{
  text-align:right; padding:8px 10px; color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* dimension legend block */
.dim-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.dim-figure{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
  padding:14px; display:flex; align-items:center; justify-content:center; min-height:170px;
}
.dim-figure img{ max-height:200px; width:auto; object-fit:contain; }
.sym{ font-family:var(--mono); font-weight:700; color:var(--brand); }

/* symbol → description → value table */
.spec-table.kv-sym th{ width:72px; text-align:center; }
.spec-table.kv-sym thead th{ width:auto; color:var(--muted); font-size:11px; letter-spacing:.4px; text-transform:uppercase; padding:9px 10px; }
.spec-table.kv-sym td.desc{ text-align:left; font-weight:500; color:var(--muted); }
.spec-table.kv-sym td.val{ width:110px; white-space:nowrap; }

/* demo-only state switcher: compact */
.segmented.seg-demo button{ font-size:11.5px; padding:6px 9px; }

/* acoustic block */
.acoustic-grid{ display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:stretch; }

/* ============================================================
   Chart container (Plotly target)
   ============================================================ */
.chart-box{
  position:relative; width:100%; min-height:240px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
}
.chart-box + .chart-box{ margin-top:12px; }
/* placeholder shown until Plotly renders / when empty */
.chart-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  color:var(--faint);
}
.chart-empty .ic{ width:40px; height:40px; opacity:.5; }
.chart-empty .t{ font-size:13px; font-weight:600; color:var(--muted); }
.chart-empty .s{ font-size:12px; max-width:240px; }
.chart-legend{
  display:flex; flex-wrap:wrap; gap:14px; padding:10px 14px 0; font-size:12px; color:var(--muted);
}
.chart-legend .key{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend .swatch{ width:18px; height:0; border-top:3px solid; border-radius:2px; }
.chart-legend .swatch.dash{ border-top-style:dashed; }
.chart-legend .swatch.dot{ width:9px; height:9px; border:0; border-radius:50%; }

/* ============================================================
   Empty / loading / no-match states
   ============================================================ */
.state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px; padding:54px 28px; color:var(--muted);
}
.state .state-ic{
  width:54px; height:54px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-050); color:var(--brand);
}
.state .state-ic.warn{ background:var(--amber-050); color:var(--amber-700); }
.state .state-title{ font-size:15px; font-weight:700; color:var(--ink); }
.state .state-desc{ font-size:13px; max-width:340px; line-height:1.55; }

/* ============================================================
   Auth pages
   ============================================================ */
.auth-page{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--cyan-050) 0%, transparent 55%),
    radial-gradient(1000px 560px at -10% 110%, #e6edf4 0%, transparent 50%),
    var(--bg);
  position:relative; overflow:hidden;
}
/* faint wave watermark */
.auth-wave{
  position:absolute; right:-120px; bottom:-90px; width:680px; max-width:70vw;
  opacity:.06; pointer-events:none; user-select:none;
}
.auth-wave--top{ left:-160px; top:-120px; right:auto; bottom:auto; width:560px; opacity:.05; transform:rotate(8deg); }
.auth-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 18px; position:relative; z-index:1; }

.auth-card{
  width:100%; max-width:412px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); overflow:hidden;
}
.auth-card__top{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.auth-logo{ display:flex; justify-content:center; padding:18px 24px 6px; }
.auth-logo img{ height:46px; width:auto; }
.auth-head{ text-align:center; padding:4px 24px 0; }
.auth-head h1{ font-size:19px; font-weight:700; color:var(--ink); }
.auth-head p{ font-size:13px; color:var(--muted); margin-top:4px; }
.auth-body{ padding:20px 24px 24px; }
.auth-foot{
  padding:14px 24px; border-top:1px solid var(--line); background:var(--panel-2);
  text-align:center; font-size:13px; color:var(--muted);
}
.auth-foot a{ font-weight:600; }

/* form-wide error banner */
.alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r-sm); font-size:13px; line-height:1.5;
  margin-bottom:16px;
}
.alert--error{ background:var(--red-050); border:1px solid #eecbc8; color:var(--red-700); }
.alert--info{ background:var(--cyan-050); border:1px solid #bfe6f5; color:var(--brand-700); }
.alert--warn{ background:var(--amber-050); border:1px solid #f6dcc1; color:var(--amber-700); }
.alert .ic{ flex:none; margin-top:1px; }
.alert b{ font-weight:700; }

/* legal footer line */
.page-legal{ text-align:center; font-size:11.5px; color:var(--faint); padding:14px; position:relative; z-index:1; }

/* ============================================================
   App layout
   ============================================================ */
.app-shell{ min-height:100vh; display:flex; flex-direction:column; }
.app-main{
  display:grid;
  grid-template-columns:344px minmax(0,1fr);
  gap:16px; align-items:start;
  padding:16px; max-width:1640px; margin:0 auto; width:100%;
}
.rail{ position:sticky; top:calc(var(--h) + 16px); }
.work{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.work-top{
  display:grid; grid-template-columns:minmax(0,1fr) 452px; gap:16px; align-items:start;
}

.page-title{ display:flex; align-items:baseline; gap:10px; margin-bottom:2px; }

/* detail panel accent header */
.detail-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--brand-050),#fff);
}
.detail-head .fan-name{ font-size:16px; font-weight:800; color:var(--brand); letter-spacing:.2px; }
.detail-head .sub{ color:var(--muted); font-size:13px; }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-block{ }
.detail-block > h4{
  font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.detail-block > h4 .line{ flex:1; height:1px; background:var(--line); }

.divider{ height:1px; background:var(--line); margin:18px 0; border:0; }

/* ============================================================
   Admin
   ============================================================ */
.admin-wrap{ max-width:1180px; margin:0 auto; width:100%; padding:20px 16px 40px; }
.admin-tabs{ display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.admin-tabs button{
  border:0; background:transparent; cursor:pointer; font-weight:600; font-size:13.5px;
  color:var(--muted); padding:10px 14px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.admin-tabs button:hover{ color:var(--brand); }
.admin-tabs button.is-active{ color:var(--brand); border-bottom-color:var(--brand); }
.admin-tabs .count{
  margin-left:7px; background:var(--amber); color:#fff; font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:var(--r-pill);
}
.status-dot{ display:inline-flex; align-items:center; gap:7px; }
.status-dot .d{ width:8px; height:8px; border-radius:50%; }
.status-dot .d.ok{ background:var(--green); }
.status-dot .d.pending{ background:var(--amber); }
.status-dot .d.off{ background:var(--faint); }

/* ============================================================
   Utilities
   ============================================================ */
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.spacer{ flex:1; }
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.tiny{ font-size:11.5px; } .small{ font-size:12.5px; }
.text-right{ text-align:right; }
.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1240px){
  .work-top{ grid-template-columns:minmax(0,1fr); }
  .kpi-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:980px){
  .app-main{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; top:auto; }
  .detail-grid{ grid-template-columns:1fr; }
  .dim-grid{ grid-template-columns:1fr; }
  .acoustic-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .app-header{ gap:10px; padding:0 12px; }
  .app-header .app-name{ display:none; }
  .header-user{ display:none; }
  .app-main{ padding:12px; gap:12px; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .field-row{ flex-direction:column; gap:13px; }
  .auth-card{ max-width:100%; }
}

/* ---------- Category hub (radial / axial / jetfan cards) ---------- */
.hub-main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
}
.hub-wrap{ width:100%; max-width:1000px; }
.hub-head{ text-align:center; margin-bottom:26px; }
.hub-head h1{ margin:0 0 6px; font-size:24px; font-weight:700; color:var(--ink); }
.hub-head p{ margin:0; color:var(--muted); font-size:14px; }

.cat-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
@media (min-width: 1100px){ .cat-grid{ grid-template-columns:repeat(4, 1fr); } }
.cat-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:24px 20px 20px; min-height:250px;
  color:var(--ink); text-decoration:none;
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
a.cat-card:hover{
  text-decoration:none; color:var(--ink);
  transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--sh-2);
}
a.cat-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.cat-icon{
  width:64px; height:64px; border-radius:50%; flex:none;
  background:var(--brand-050); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.cat-icon svg{ width:40px; height:40px; }
.cat-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16.5px; font-weight:700; }
.cat-desc{ margin:0; color:var(--muted); font-size:13px; line-height:1.55; flex:1; }
.cat-cta{ color:var(--brand); font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; gap:6px; }
a.cat-card:hover .cat-cta{ text-decoration:underline; }
.cat-cta--muted{ color:var(--faint); font-weight:500; }
.cat-card--disabled{ cursor:not-allowed; }
.cat-card--disabled .cat-icon{ background:var(--panel-2); color:var(--faint); }
.cat-card--disabled .cat-title, .cat-card--disabled .cat-desc{ color:var(--faint); }
@media (max-width:900px){
  .cat-grid{ grid-template-columns:1fr; }
  .cat-card{ min-height:0; }
  .hub-main{ align-items:flex-start; }
}

/* ---------- Jetfan 3D dimension overlay (C / ØE lines on the model) ---------- */
.jf-dim-dot{
  display:none; width:9px; height:9px; padding:0; border-radius:50%;
  background:var(--brand); border:2px solid #fff;
  box-shadow:0 0 0 1px var(--brand); cursor:default;
}
#jf-visual-body.dims-on .jf-dim-dot{ display:block; }
#jf-dim-svg{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; display:none;
}
#jf-dim-svg line{ stroke:var(--brand); stroke-width:1.5; stroke-dasharray:none; }
#jf-visual-body.dims-on #jf-dim-svg{ display:block; }
.jf-dim-label{
  position:absolute; display:none; transform:translate(-50%,-50%);
  background:#fff; border:1px solid var(--brand-100); color:var(--brand-700);
  border-radius:4px; padding:2px 8px; font-size:11.5px; font-weight:700;
  white-space:nowrap; pointer-events:none; box-shadow:var(--sh-1);
}
#jf-visual-body.dims-on .jf-dim-label{ display:block; }

/* print niceties for datasheet-ish views */
@media print{
  .app-header, .rail, .btn, .chart-empty{ display:none !important; }
  body{ background:#fff; }
  .panel{ box-shadow:none; border-color:#ccc; }
}