/* ============================================================
   Asan Digital CRM — Design System (asan.css)

   Built to the Asan Digital brand guide v2.0 (asandigital/brand.md):
   modern minimal / tech, Linear-Vercel-Stripe DNA, dark-first with a
   light mirror, Space Grotesk display over Inter body, a single
   indigo->violet accent, and typographic monogram tiles for products.

   Layers ON TOP of ui.css rather than replacing it. ui.css owns the
   component vocabulary every existing UAG page already speaks (.page,
   .card, .stat, .badge, .btn); this file retunes the tokens those
   components read, so ~40 untouched templates pick up the new identity
   without being edited. Anything genuinely new to the multi-product
   CRM — the product rail, the switcher, HQ tiles, the pipeline board —
   is namespaced `.asan-*` so it cannot collide with ui.css.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────
   Dark is the default because the brand is dark-first. Light is a
   mirror, driven by the OS. Both are declared here, never only
   inside a media query.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Type */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Accent — the one indigo->violet run the whole studio uses */
  --accent:       #6d7dff;
  --accent-2:     #9b7bff;
  --accent-soft:  rgba(109, 125, 255, 0.14);
  --accent-line:  rgba(109, 125, 255, 0.32);
  --accent-ring:  rgba(109, 125, 255, 0.28);

  /* ui.css compatibility — existing pages read these names.
     Repointing them is what reskins the old templates for free. */
  --brand:        var(--accent);
  --brand-dark:   #4d5be0;
  --brand-soft:   var(--accent-soft);
  --brand-tint:   var(--accent-soft);
  --brand-ring:   var(--accent-ring);
  --brand-navy:   #101319;
  --accent-purple: var(--accent-2);

  /* Surfaces — near-black, three steps of elevation */
  --bg:           #08090c;
  --surface:      #101319;
  --surface-2:    #161a22;
  --surface-3:    #1d222c;
  --line:         #232833;
  --line-soft:    #1a1e26;

  /* Ink */
  --ink:          #f4f5f7;
  --ink-2:        #c9ced8;
  --muted:        #8b93a3;
  --faint:        #626a7a;

  /* Status — brand guide: Live green, In dev amber, Soon sky, Client violet */
  --green:  #34d399;  --green-bg:  rgba(52, 211, 153, 0.13);
  --blue:   #38bdf8;  --blue-bg:   rgba(56, 189, 248, 0.13);
  --amber:  #fbbf24;  --amber-bg:  rgba(251, 191, 36, 0.13);
  --red:    #f87171;  --red-bg:    rgba(248, 113, 113, 0.13);
  --violet: #a78bfa;  --violet-bg: rgba(167, 139, 250, 0.13);
  --slate:  #8b93a3;  --slate-bg:  rgba(139, 147, 163, 0.12);

  /* Shape — slightly tighter than ui.css; Linear, not Bootstrap */
  --r-sm: 6px;
  --r:    9px;
  --r-lg: 14px;

  /* Shadows read as depth on dark, so they are mostly rings */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow:    0 4px 16px rgba(0,0,0,0.36);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.48);

  --rail-w: 68px;
  --nav-w:  212px;
}

/* Light mirror. Guarded so an explicit dark choice still wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:        #f7f8fa;
    --surface:   #ffffff;
    --surface-2: #f7f8fa;
    --surface-3: #eef0f4;
    --line:      #e3e6ec;
    --line-soft: #f0f2f6;

    --ink:       #0b0d12;
    --ink-2:     #333a46;
    --muted:     #667085;
    --faint:     #98a1b2;

    --accent-soft: rgba(109, 125, 255, 0.10);
    --accent-line: rgba(109, 125, 255, 0.26);

    --green:  #059669;  --green-bg:  #d1fae5;
    --blue:   #0284c7;  --blue-bg:   #e0f2fe;
    --amber:  #b45309;  --amber-bg:  #fef3c7;
    --red:    #dc2626;  --red-bg:    #fee2e2;
    --violet: #7c3aed;  --violet-bg: #ede9fe;
    --slate:  #667085;  --slate-bg:  #f1f3f7;

    --shadow-sm: 0 1px 2px rgba(11,13,18,0.05);
    --shadow:    0 4px 14px rgba(11,13,18,0.06);
    --shadow-lg: 0 16px 44px rgba(11,13,18,0.10);
  }
}

:root[data-theme="light"] {
  --bg:        #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f4;
  --line:      #e3e6ec;
  --line-soft: #f0f2f6;
  --ink:       #0b0d12;
  --ink-2:     #333a46;
  --muted:     #667085;
  --faint:     #98a1b2;
  --accent-soft: rgba(109, 125, 255, 0.10);
  --accent-line: rgba(109, 125, 255, 0.26);
  --green:  #059669;  --green-bg:  #d1fae5;
  --blue:   #0284c7;  --blue-bg:   #e0f2fe;
  --amber:  #b45309;  --amber-bg:  #fef3c7;
  --red:    #dc2626;  --red-bg:    #fee2e2;
  --violet: #7c3aed;  --violet-bg: #ede9fe;
  --slate:  #667085;  --slate-bg:  #f1f3f7;
  --shadow-sm: 0 1px 2px rgba(11,13,18,0.05);
  --shadow:    0 4px 14px rgba(11,13,18,0.06);
  --shadow-lg: 0 16px 44px rgba(11,13,18,0.10);
}

/* ── Base ───────────────────────────────────────────────── */

/* ui.css does not set a global box model, and the shell is built from
   percentage widths with padding — content-box makes every padded
   container overflow its column by exactly its own padding. */
body.asan, body.asan *, body.asan *::before, body.asan *::after {
  box-sizing: border-box;
}

body.asan {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.asan h1, body.asan h2, body.asan h3 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.018em;
}
body.asan a { color: inherit; text-decoration: none; }
.asan-num { font-variant-numeric: tabular-nums; }

/* ── Shell: product rail | nav | content ─────────────────── */
.asan-shell { display: flex; min-height: 100vh; }

/* The product rail. Five monogram tiles, one per product line, plus
   "All" for the cross-product view — because one login has to see the
   whole company, not one pipeline at a time. */
.asan-rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0;
  gap: 0.35rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.asan-rail-mark {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.9rem;
  margin-bottom: 0.6rem;
  flex: none;
}
.asan-rail-sep {
  width: 26px; height: 1px;
  background: var(--line);
  margin: 0.4rem 0;
  flex: none;
}

/* Monogram tile. --p is the product's own colour, set inline. */
.asan-tile {
  --p: var(--accent);
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.01em;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  transition: color .14s, background .14s, border-color .14s;
  flex: none;
}
.asan-tile:hover { color: var(--ink); background: var(--surface-2); }
.asan-tile.is-active {
  color: var(--p);
  background: color-mix(in srgb, var(--p) 14%, transparent);
  border-color: color-mix(in srgb, var(--p) 34%, transparent);
}
/* Active marker on the rail edge */
.asan-tile.is-active::before {
  content: '';
  position: absolute;
  left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--p);
}
.asan-tile[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px;
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}

/* Real product mark inside a rail tile — no plate.
   A white card behind each one turned the rail into a column of
   stickers. The marks are trimmed of their transparent margins, so they
   fill the tile and read directly against it. Dimmed and desaturated
   until active or hovered, so six logos don't compete down the side of
   every page; the selected product is the one that pops. */
.asan-tile-logo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  opacity: 0.6; filter: saturate(0.7);
  transition: opacity .14s, filter .14s;
}
.asan-tile-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
.asan-tile:hover .asan-tile-logo,
.asan-tile.is-active .asan-tile-logo { opacity: 1; filter: none; }

/* Tooltip on hover — the rail is icons only, so it needs names */
.asan-tile-tip {
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.3rem 0.55rem; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .13s, transform .13s;
  z-index: 60; box-shadow: var(--shadow);
}
.asan-tile:hover .asan-tile-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Nav column ─────────────────────────────────────────── */
.asan-nav {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 0.9rem 0.6rem 2rem;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.asan-nav-head { padding: 0.15rem 0.5rem 0.9rem; }
.asan-nav-product {
  font-family: var(--font-display);
  font-size: 0.98rem; font-weight: 600;
  color: var(--ink); letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 0.4rem;
}
.asan-nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.asan-nav-tagline {
  font-size: 0.7rem; color: var(--faint);
  margin-top: 0.2rem; line-height: 1.35;
}
.asan-nav-group {
  font-size: 0.63rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--faint);
  padding: 0.9rem 0.6rem 0.3rem;
}
.asan-nav-link {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.82rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.asan-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.asan-nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.asan-nav-link .material-symbols-outlined { font-size: 17px; }
.asan-nav-link .asan-nav-count {
  margin-left: auto;
  font-size: 0.68rem; font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.asan-nav-link.is-active .asan-nav-count { color: var(--accent); }

/* ── Main column ────────────────────────────────────────── */
.asan-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.asan-topbar {
  height: 52px; flex: none;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1.1rem;
}
.asan-crumb { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; }
.asan-crumb b { color: var(--ink); font-weight: 600; }
.asan-crumb .sep { color: var(--faint); }
.asan-topbar-spacer { flex: 1 1 auto; }

.asan-k {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--faint);
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.asan-k:hover { border-color: var(--accent-line); color: var(--ink-2); }
.asan-kbd {
  font-family: var(--font-mono); font-size: 0.66rem;
  padding: 0.05rem 0.28rem; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--muted);
}

.asan-body { padding: 1.4rem 1.5rem 4rem; max-width: 1500px; width: 100%; }

.asan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.asan-head h1 { margin: 0; font-size: 1.42rem; font-weight: 600; }
.asan-head .sub { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); }
.asan-head-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── Buttons ────────────────────────────────────────────── */
.asan-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.79rem; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.asan-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--accent-line); }
.asan-btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.asan-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.asan-btn .material-symbols-outlined { font-size: 16px; }

/* ── Cards ──────────────────────────────────────────────── */
.asan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.asan-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
}
.asan-card-head h3 {
  margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  font-family: var(--font-display);
}
.asan-card-body { padding: 0.95rem; }

/* ── Stat tiles ─────────────────────────────────────────── */
.asan-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}
.asan-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.85rem 0.95rem;
}
.asan-stat-label {
  font-size: 0.67rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint);
  display: flex; align-items: center; gap: 0.35rem;
}
.asan-stat-value {
  font-family: var(--font-display);
  font-size: 1.52rem; font-weight: 600; color: var(--ink);
  margin-top: 0.28rem; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.asan-stat-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.asan-stat-accent .asan-stat-value { color: var(--accent); }

/* ── Product chip ───────────────────────────────────────── */
.asan-chip {
  --p: var(--accent);
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.11rem 0.44rem 0.11rem 0.3rem;
  border-radius: 20px;
  background: color-mix(in srgb, var(--p) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--p) 30%, transparent);
  color: var(--p);
  font-size: 0.68rem; font-weight: 600;
  white-space: nowrap;
}
.asan-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--p); flex: none;
}

/* ── Badges ─────────────────────────────────────────────── */
.asan-badge {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.13rem 0.45rem;
  border-radius: 5px;
  font-size: 0.68rem; font-weight: 600;
  background: var(--slate-bg); color: var(--slate);
}
.asan-badge.won   { background: var(--green-bg);  color: var(--green); }
.asan-badge.open  { background: var(--blue-bg);   color: var(--blue); }
.asan-badge.lost  { background: var(--red-bg);    color: var(--red); }
.asan-badge.new   { background: var(--violet-bg); color: var(--violet); }
.asan-badge.warn  { background: var(--amber-bg);  color: var(--amber); }

/* ── Tables ─────────────────────────────────────────────── */
.asan-table-wrap { overflow-x: auto; }
.asan-table { width: 100%; border-collapse: collapse; font-size: 0.81rem; }
.asan-table th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.asan-table td {
  padding: 0.58rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.asan-table tbody tr:hover td { background: var(--surface-2); }
.asan-table tbody tr:last-child td { border-bottom: 0; }
.asan-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.asan-table a.link { color: var(--ink); font-weight: 500; }
.asan-table a.link:hover { color: var(--accent); }

/* ── Pipeline board ─────────────────────────────────────── */
.asan-board {
  display: flex; gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  align-items: flex-start;
}
.asan-col {
  flex: 0 0 254px; width: 254px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 230px);
}
.asan-col-head {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  flex: none;
}
.asan-col-name {
  font-size: 0.76rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 0.4rem;
}
.asan-col-n {
  font-size: 0.66rem; font-weight: 600; color: var(--faint);
  background: var(--surface-3); border-radius: 10px;
  padding: 0.04rem 0.34rem; font-variant-numeric: tabular-nums;
}
.asan-col-sum { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.asan-col-body {
  padding: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem;
  overflow-y: auto;
}
.asan-deal {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.6rem;
  cursor: grab;
  transition: border-color .12s, background .12s;
}
.asan-deal:hover { border-color: var(--accent-line); background: var(--surface-3); }
.asan-deal.dragging { opacity: 0.45; }
.asan-col.drop-target { border-color: var(--accent-line); background: var(--accent-soft); }
.asan-deal-name {
  font-size: 0.79rem; font-weight: 600; color: var(--ink);
  line-height: 1.3; margin-bottom: 0.28rem;
}
.asan-deal-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; font-size: 0.71rem; color: var(--muted);
}
.asan-deal-amt { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── Empty state ────────────────────────────────────────── */
.asan-empty {
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.83rem;
}
.asan-empty .material-symbols-outlined {
  font-size: 30px; display: block; margin: 0 auto 0.5rem;
  color: var(--line);
}

/* ── Lead inbox ─────────────────────────────────────────── */
.asan-lead {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.asan-lead:hover { background: var(--surface-2); }
.asan-lead:last-child { border-bottom: 0; }
.asan-lead-src {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: none;
  background: var(--surface-3); color: var(--muted);
}
.asan-lead-src .material-symbols-outlined { font-size: 16px; }
.asan-lead-main { flex: 1 1 auto; min-width: 0; }
.asan-lead-top {
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap; margin-bottom: 0.15rem;
}
.asan-lead-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.asan-lead-sub { font-size: 0.75rem; color: var(--muted); }
.asan-lead-msg {
  font-size: 0.78rem; color: var(--ink-2);
  margin-top: 0.25rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.asan-lead-when { font-size: 0.7rem; color: var(--faint); white-space: nowrap; flex: none; }

/* ── Footer ─────────────────────────────────────────────────
   Mirrors .footer on asan.digital — same grid, same type scale, same
   uppercase column heads — so the CRM and the parent site read as one
   company. `.is-compact` tightens the padding for in-app use, where a
   full marketing footer under every table would be too heavy.
   ─────────────────────────────────────────────────────────── */
.asan-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: 3rem;
  padding: 3.6rem 0 2rem;
}
.asan-footer.is-compact { margin-top: 2.4rem; padding: 2.2rem 0 1.4rem; }

.asan-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.asan-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 3rem;
  margin-bottom: 2.6rem;
}
.asan-footer.is-compact .asan-footer-top { margin-bottom: 1.7rem; }
@media (max-width: 820px) {
  .asan-footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

.asan-footer-logo {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.asan-footer-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  color: #fff; flex: none;
}
.asan-footer-name {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; color: var(--ink);
  letter-spacing: -0.015em;
}
.asan-footer-brand p {
  color: var(--muted);
  font-size: 0.88rem; line-height: 1.6;
  max-width: 340px; margin: 0;
}

.asan-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 560px) {
  .asan-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
.asan-footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--faint);
  margin: 0 0 0.9rem;
}
.asan-footer-col a,
.asan-footer-col .soon {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  margin-bottom: 0.6rem;
  transition: color .18s;
}
.asan-footer-col a:hover { color: var(--accent); }
.asan-footer-col .soon { color: var(--faint); }
.asan-footer-col .soon em { font-style: normal; font-size: 0.76rem; opacity: 0.8; }

.asan-footer-bottom {
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.79rem; color: var(--faint);
}
.asan-footer-bottom p { margin: 0; }

/* ── Command palette ────────────────────────────────────── */
.asan-cmd-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: none;
}
.asan-cmd-back.open { display: block; }
.asan-cmd {
  position: absolute; top: 14vh; left: 50%; transform: translateX(-50%);
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.asan-cmd input {
  width: 100%; border: 0; outline: 0;
  background: transparent;
  padding: 0.95rem 1.05rem;
  color: var(--ink);
  font-family: var(--font-sans); font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.asan-cmd input::placeholder { color: var(--faint); }
.asan-cmd-list { max-height: 52vh; overflow-y: auto; padding: 0.35rem; }
.asan-cmd-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 0.84rem; cursor: pointer;
}
.asan-cmd-item .material-symbols-outlined { font-size: 17px; color: var(--muted); }
.asan-cmd-item .hint { margin-left: auto; font-size: 0.7rem; color: var(--faint); }
.asan-cmd-item.sel { background: var(--accent-soft); color: var(--accent); }
.asan-cmd-item.sel .material-symbols-outlined { color: var(--accent); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .asan-nav { display: none; }
}
@media (max-width: 720px) {
  .asan-rail {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    width: 100%; height: auto; flex-direction: row;
    justify-content: center; border-right: 0; border-top: 1px solid var(--line);
    padding: 0.4rem; z-index: 50;
  }
  .asan-rail-mark, .asan-rail-sep { display: none; }
  .asan-tile.is-active::before { left: 50%; top: -8px; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 0 0 3px 3px; }
  .asan-tile-tip { display: none; }
  .asan-body { padding: 1rem 0.9rem 5rem; }
  .asan-shell { flex-direction: column; }
}