/* ═══════════════════════════════════════════════════════════════
   EstateIQ — Estate Intelligence Platform
   Design system. No build step: hand-authored tokens + components.
   Palette: vineyard · stone · oak · brass on deep charcoal.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* base surfaces */
  --bg:        #0b0d0c;
  --bg2:       #0e100f;
  --panel:     #131614;
  --panel2:    #181c19;
  --panel3:    #1f2420;
  --panel-hi:  #242a25;

  /* hairlines */
  --line:  rgba(214,222,210,.075);
  --line2: rgba(214,222,210,.15);
  --line3: rgba(214,222,210,.26);

  /* text (stone) */
  --txt:  #e9ece4;
  --txt2: #a7ad9f;
  --txt3: #6f746a;
  --txt4: #4a4e46;

  /* accents */
  --brass:   #c8a24b;
  --brass2:  #e2c684;
  --brass-d: rgba(200,162,75,.13);
  --vine:    #6f9a5e;   /* positive / go */
  --vine2:   #8fbd7c;
  --vine-d:  rgba(111,154,94,.14);
  --oak:     #c07b45;   /* caution / warn */
  --oak-d:   rgba(192,123,69,.14);
  --wine:    #b04a54;   /* risk / negative / stop */
  --wine-d:  rgba(176,74,84,.14);
  --sky:     #5b93b0;   /* info / data */
  --sky-d:   rgba(91,147,176,.14);

  /* type */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "DM Mono", ui-monospace, monospace;

  /* metrics */
  --rail-w: 232px;
  --ai-w: 420px;
  --topbar-h: 56px;
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 18px 50px rgba(0,0,0,.5);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 1000px 600px at 88% -8%, rgba(200,162,75,.05), transparent),
    radial-gradient(ellipse 800px 700px at -8% 108%, rgba(111,154,94,.05), transparent);
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#2b312b; border-radius:6px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#3a423a; }
::-webkit-scrollbar-track { background:transparent; }
::selection { background: rgba(200,162,75,.28); }

button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; color:inherit; background:none; border:none; }
a { color: var(--brass2); text-decoration:none; }
a:hover { text-decoration:underline; }
input, select, textarea {
  font-family: var(--sans); color: var(--txt);
  background: var(--panel2); border:1px solid var(--line2);
  border-radius: var(--r-sm); padding:8px 11px; font-size:13px; outline:none;
  transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus { border-color: rgba(200,162,75,.55); background: var(--panel3); }
textarea { resize:vertical; line-height:1.55; }
select {
  appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a7ad9f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
label.fld, .fld {
  display:block; font-family:var(--mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--txt3); margin:0 0 6px;
}
code, .mono { font-family: var(--mono); }

/* ── App layout ─────────────────────────────────────────── */
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
#topbar {
  height:var(--topbar-h); flex:none; display:flex; align-items:center; gap:14px;
  padding:0 16px; border-bottom:1px solid var(--line);
  background:rgba(11,13,12,.86); backdrop-filter:blur(12px); z-index:60;
}
#main { flex:1; display:flex; min-height:0; }
#rail {
  width:var(--rail-w); flex:none; border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto; padding:10px 10px 14px;
  background:var(--bg2);
}
#stage { flex:1; min-width:0; position:relative; overflow:hidden; }
.view {
  position:absolute; inset:0; overflow-y:auto; padding:26px 30px 60px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .26s ease, transform .26s ease;
}
.view.active { opacity:1; transform:none; pointer-events:auto; }
.view.nopad { padding:0; overflow:hidden; }
.view-wrap { max-width:1360px; margin:0 auto; }

/* ── Topbar ─────────────────────────────────────────────── */
.brand { display:flex; align-items:center; gap:11px; user-select:none; flex:none; }
.brand .logo {
  width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg, #2a3327, #171b16); border:1px solid var(--line2);
  position:relative; overflow:hidden;
}
.brand .logo svg { width:20px; height:20px; }
.brand .bt { line-height:1.05; }
.brand .bt b { font-size:14px; letter-spacing:.02em; font-weight:600; }
.brand .bt b span { color:var(--brass); }
.brand .bt small { display:block; font-family:var(--mono); font-size:8px; letter-spacing:.28em; color:var(--txt3); margin-top:2px; }

#project-switch {
  display:flex; align-items:center; gap:9px; padding:6px 11px 6px 13px;
  border:1px solid var(--line2); border-radius:999px; background:var(--panel);
  cursor:pointer; transition:border-color .15s, background .15s; max-width:280px;
}
#project-switch:hover { border-color:rgba(200,162,75,.4); background:var(--panel2); }
#project-switch .pj-dot { width:7px; height:7px; border-radius:50%; background:var(--vine); box-shadow:0 0 8px var(--vine); flex:none; }
#project-switch .pj-name { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#project-switch .pj-caret { color:var(--txt3); font-size:10px; flex:none; }

#global-search {
  flex:1; max-width:420px; display:flex; align-items:center; gap:9px;
  padding:7px 13px; border:1px solid var(--line2); border-radius:999px;
  background:var(--panel); color:var(--txt3); font-size:12.5px;
}
#global-search input { background:none; border:none; padding:0; flex:1; font-size:13px; color:var(--txt); }
#global-search .gs-key { font-family:var(--mono); font-size:9px; border:1px solid var(--line2); border-radius:4px; padding:1px 5px; color:var(--txt3); }
.tb-spacer { flex:1; }

.tb-btn {
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line2); color:var(--txt2); font-size:12.5px; font-weight:500;
  transition:all .15s; white-space:nowrap;
}
.tb-btn:hover { color:var(--txt); border-color:rgba(200,162,75,.4); background:var(--brass-d); }
.tb-btn.brass { background:var(--brass); border-color:var(--brass); color:#1a1405; font-weight:600; }
.tb-btn.brass:hover { background:var(--brass2); }
.tb-btn svg { width:15px; height:15px; }

/* ── Nav rail ───────────────────────────────────────────── */
.nav-sec { font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--txt4); padding:14px 12px 6px; user-select:none; }
.nav-btn {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:8.5px 12px; border-radius:9px; border:1px solid transparent;
  color:var(--txt2); font-size:13px; font-weight:500; transition:all .13s; position:relative;
}
.nav-btn svg { width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.82; }
.nav-btn:hover { color:var(--txt); background:rgba(255,255,255,.028); }
.nav-btn.active { color:var(--brass2); background:var(--brass-d); border-color:rgba(200,162,75,.22); }
.nav-btn.active svg { opacity:1; }
.nav-btn .nb-badge { margin-left:auto; font-family:var(--mono); font-size:9px; padding:1px 6px; border-radius:6px; background:var(--panel3); color:var(--txt3); }
.nav-btn.soon { opacity:.55; }
.nav-btn.soon .nb-badge { background:transparent; border:1px solid var(--line2); }
#rail-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }

/* ── Typographic heads ──────────────────────────────────── */
.view-head { margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.view-head .vh-kick { font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--txt3); margin-bottom:8px; }
.view-head .vh-kick span { color:var(--brass); }
.view-head h1 { font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:.01em; line-height:1; }
.view-head p.sub { color:var(--txt2); font-size:13px; margin-top:8px; max-width:640px; }
.view-head .vh-actions { display:flex; gap:9px; align-items:center; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; position:relative;
}
.card.pad0 { padding:0; }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.card-h h3 { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:500; }
.card-h .ch-rule { flex:1; height:1px; background:var(--line); }
.card-h .ch-act { color:var(--txt3); font-size:11px; }
.card-h .ch-act:hover { color:var(--brass2); }

.grid { display:grid; gap:16px; }
.g-2 { grid-template-columns:repeat(2,1fr); }
.g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); }
.g-auto { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
@media (max-width:1100px){ .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .g-2,.g-3,.g-4{grid-template-columns:1fr;} }

/* ── Stat tiles ─────────────────────────────────────────── */
.stat {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 17px; position:relative; overflow:hidden; transition:border-color .18s, transform .18s;
}
.stat:hover { border-color:var(--line2); }
.stat .st-label { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt3); display:flex; align-items:center; gap:7px; }
.stat .st-val { font-size:27px; font-weight:600; letter-spacing:-.01em; margin-top:9px; font-variant-numeric:tabular-nums; }
.stat .st-val small { font-size:14px; color:var(--txt3); font-weight:500; }
.stat .st-sub { font-size:11.5px; color:var(--txt3); margin-top:5px; display:flex; align-items:center; gap:6px; }
.stat .st-spark { position:absolute; right:0; bottom:0; opacity:.5; }
.stat .st-ico { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--brass-d); }
.stat .st-ico svg { width:15px; height:15px; }
.delta { font-family:var(--mono); font-size:10.5px; padding:1px 5px; border-radius:5px; }
.delta.up { color:var(--vine2); background:var(--vine-d); }
.delta.down { color:var(--wine); background:var(--wine-d); }
.delta.flat { color:var(--txt3); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border-radius:var(--r-sm); border:1px solid var(--line2);
  background:var(--panel2); color:var(--txt); font-size:12.5px; font-weight:500; transition:all .15s;
}
.btn:hover { border-color:rgba(200,162,75,.45); background:var(--panel3); text-decoration:none; }
.btn.brass { background:var(--brass); border-color:var(--brass); color:#1a1405; font-weight:600; }
.btn.brass:hover { background:var(--brass2); box-shadow:0 4px 16px rgba(200,162,75,.24); }
.btn.ghost { background:none; }
.btn.sm { padding:6px 11px; font-size:11.5px; border-radius:7px; }
.btn.lg { padding:11px 20px; font-size:13.5px; }
.btn.danger:hover { border-color:rgba(176,74,84,.55); color:var(--wine); background:var(--wine-d); }
.btn svg { width:15px; height:15px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.block { width:100%; }

.chip {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--txt2);
  font-size:12px; cursor:pointer; transition:all .14s; user-select:none; white-space:nowrap;
}
.chip:hover { color:var(--txt); border-color:rgba(200,162,75,.4); }
.chip.on { background:var(--brass-d); border-color:rgba(200,162,75,.5); color:var(--brass2); }

.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.between { justify-content:space-between; }
.hr { height:1px; background:var(--line); border:none; margin:16px 0; }
.muted { color:var(--txt3); }
.tnum { font-variant-numeric:tabular-nums; }

/* ── Badges / pills ─────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.badge.go { color:var(--vine2); background:var(--vine-d); }
.badge.caution { color:var(--oak); background:var(--oak-d); }
.badge.stop { color:var(--wine); background:var(--wine-d); }
.badge.info { color:var(--sky); background:var(--sky-d); }
.badge.neutral { color:var(--txt2); background:var(--panel3); }
.dotb { width:6px; height:6px; border-radius:50%; }

/* ── Meters / progress ──────────────────────────────────── */
.meter { height:7px; border-radius:4px; background:var(--panel3); overflow:hidden; position:relative; }
.meter > span { display:block; height:100%; border-radius:4px; background:var(--brass); transition:width .5s cubic-bezier(.3,.8,.3,1); }
.meter.thin { height:4px; }
.meter-row { display:grid; grid-template-columns:120px 1fr 48px; gap:12px; align-items:center; margin-bottom:11px; }
.meter-row .mr-name { font-size:12px; color:var(--txt2); }
.meter-row .mr-val { font-family:var(--mono); font-size:11px; color:var(--txt3); text-align:right; }

/* score ring uses inline conic-gradient */
.ring { position:relative; display:grid; place-items:center; }
.ring .ring-c { position:absolute; inset:0; border-radius:50%; }
.ring .ring-hole { position:absolute; border-radius:50%; background:var(--panel); }
.ring .ring-txt { position:relative; text-align:center; }
.ring .ring-txt b { font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; }
.ring .ring-txt small { display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt3); }

/* ── Sliders ────────────────────────────────────────────── */
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:20px; background:none; padding:0; border:none; }
input[type=range]::-webkit-slider-runnable-track { height:3px; background:#2d322c; border-radius:2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--brass); margin-top:-5.5px; border:2px solid var(--bg); box-shadow:0 0 0 1px rgba(200,162,75,.5); cursor:grab; }
input[type=range]::-moz-range-track { height:3px; background:#2d322c; border-radius:2px; }
input[type=range]::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:var(--brass); border:2px solid var(--bg); cursor:grab; }

/* field grid used across modules */
.field { margin-bottom:13px; }
.field .fx { display:flex; align-items:center; gap:8px; }
.field input, .field select { width:100%; }
.input-suffix { position:relative; }
.input-suffix .sfx { position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:11px; color:var(--txt3); pointer-events:none; }
.linked { border-left:2px solid var(--sky) !important; }
.linked-note { font-size:10.5px; color:var(--sky); display:inline-flex; align-items:center; gap:5px; margin-top:4px; }

/* ── Tables ─────────────────────────────────────────────── */
table.tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
table.tbl th { text-align:left; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt3); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line2); }
table.tbl td { padding:9px 10px; border-bottom:1px solid var(--line); color:var(--txt); }
table.tbl td.num, table.tbl th.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
table.tbl tr:hover td { background:rgba(255,255,255,.02); }
table.tbl tr.total td { font-weight:600; border-top:1px solid var(--line2); border-bottom:none; color:var(--brass2); }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display:inline-flex; border:1px solid var(--line2); border-radius:9px; overflow:hidden; }
.tabs button { padding:7px 15px; color:var(--txt2); font-size:12.5px; font-weight:500; transition:all .14s; border-right:1px solid var(--line); }
.tabs button:last-child { border-right:none; }
.tabs button.on { background:var(--brass-d); color:var(--brass2); }

/* ── Map ────────────────────────────────────────────────── */
#property-map { position:absolute; inset:0; background:#0e1210; }
.leaflet-container { background:#0e1210 !important; font-family:var(--sans) !important; }
.leaflet-control-attribution { background:rgba(11,13,12,.7) !important; color:var(--txt3) !important; font-size:9px !important; }
.leaflet-control-attribution a { color:var(--txt2) !important; }
.leaflet-bar a { background:var(--panel2) !important; color:var(--txt) !important; border-color:var(--line2) !important; }
.leaflet-bar a:hover { background:var(--panel3) !important; }
.map-panel { position:absolute; z-index:500; background:rgba(15,18,16,.94); backdrop-filter:blur(10px); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--shadow); }
.map-search { top:16px; left:16px; right:16px; max-width:440px; padding:10px; display:flex; gap:8px; }
.map-search input { flex:1; }
.map-layers { top:78px; left:16px; width:200px; padding:12px 14px; }
.map-layers .ml-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:12px; color:var(--txt2); }

/* ── Toggle switch ──────────────────────────────────────── */
.switch { position:relative; width:34px; height:19px; border-radius:10px; background:#2d322c; transition:background .2s; flex:none; }
.switch::after { content:""; position:absolute; top:2.5px; left:3px; width:14px; height:14px; border-radius:50%; background:#8a8f83; transition:all .2s; }
.switch.on { background:var(--brass); }
.switch.on::after { left:17px; background:#1a1405; }

/* ── AI panel ───────────────────────────────────────────── */
#ai-panel {
  position:fixed; top:0; right:calc(-1 * var(--ai-w) - 40px); width:var(--ai-w); height:100vh; height:100dvh;
  background:#0f1210; border-left:1px solid var(--line2); z-index:80;
  display:flex; flex-direction:column; transition:right .32s cubic-bezier(.3,.8,.3,1);
  box-shadow:-30px 0 70px rgba(0,0,0,.5);
}
#ai-panel.open { right:0; }
#ai-head { padding:15px 18px 12px; border-bottom:1px solid var(--line); }
#ai-head .ai-title { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--brass); }
#ai-head .ai-ctx { font-family:var(--mono); font-size:10px; color:var(--txt3); margin-top:7px; line-height:1.5; }
#ai-msgs { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.ai-msg { max-width:92%; padding:11px 14px; border-radius:13px; font-size:13px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.ai-msg.user { align-self:flex-end; background:var(--brass-d); border:1px solid rgba(200,162,75,.25); border-bottom-right-radius:4px; }
.ai-msg.bot { align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.ai-msg.bot b { color:var(--brass2); }
.ai-msg.thinking { color:var(--txt3); font-style:italic; }
.ai-msg .ai-copy { display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--txt3); }
.ai-msg .ai-copy:hover { color:var(--brass2); }
#ai-quick { padding:10px 14px; border-top:1px solid var(--line); display:flex; gap:6px; flex-wrap:wrap; max-height:120px; overflow-y:auto; }
#ai-quick .chip { font-size:10.5px; padding:4px 10px; }
#ai-input-row { display:flex; gap:8px; padding:12px 14px 15px; border-top:1px solid var(--line); }
#ai-input { flex:1; min-height:40px; max-height:130px; }
#ai-keygate { padding:20px 18px; }
#ai-keygate input { width:100%; margin:10px 0; font-family:var(--mono); }

/* ── Modal / toast ──────────────────────────────────────── */
.modal-veil { position:fixed; inset:0; background:rgba(5,6,5,.72); backdrop-filter:blur(6px); z-index:100; display:none; align-items:center; justify-content:center; padding:30px; }
.modal-veil.open { display:flex; animation:fade .18s ease; }
@keyframes fade { from{opacity:0;} }
.modal { background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:24px; max-width:520px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow); animation:pop .24s ease; }
.modal.wide { max-width:920px; }
@keyframes pop { from{opacity:0; transform:translateY(12px) scale(.98);} }
.modal h4 { font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:6px; }
.modal .m-sub { color:var(--txt2); font-size:12.5px; margin-bottom:16px; line-height:1.5; }
#toasts { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:#171b16; border:1px solid rgba(200,162,75,.35); padding:10px 18px; border-radius:10px; font-size:12.5px; box-shadow:var(--shadow); animation:tin .24s ease; }
.toast.err { border-color:rgba(176,74,84,.5); }
.toast.ok { border-color:rgba(111,154,94,.5); }
@keyframes tin { from{opacity:0; transform:translateY(10px);} }

/* ── Empty / placeholder module ─────────────────────────── */
.soon-wrap { max-width:820px; margin:0 auto; }
.soon-hero { border:1px solid var(--line2); border-radius:16px; padding:34px; background:linear-gradient(135deg, rgba(200,162,75,.05), transparent 60%); }
.soon-hero h2 { font-family:var(--serif); font-size:26px; font-weight:600; margin-bottom:8px; }
.soon-feats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; margin-top:18px; }
.soon-feats div { font-size:12.5px; color:var(--txt2); padding-left:18px; position:relative; }
.soon-feats div::before { content:"▹"; position:absolute; left:0; color:var(--brass); }

/* ── Utility ────────────────────────────────────────────── */
.spin { width:15px; height:15px; border:2px solid var(--line2); border-top-color:var(--brass); border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp { to{transform:rotate(360deg);} }
.fade-in { animation:fade .3s ease; }
.scroll-x { overflow-x:auto; }

@media (max-width:1180px){ :root{ --ai-w:380px; } }
@media (max-width:980px){
  :root{ --rail-w:60px; }
  .nav-btn span, .nav-sec { display:none; }
  .nav-btn { justify-content:center; padding:11px 0; }
  .nav-btn .nb-badge { display:none; }
  #global-search { display:none; }
  .brand .bt { display:none; }
}