/* ==========================================================================
   AI QA Toolkit - design tokens
   -----------------------------------------------------------------------------
   Palette and type sampled from emesoft.net rather than guessed: the brand red
   is #D3222A (measured off the site's buttons), the dark is a warm #252724, and
   the type is Montserrat.

   Montserrat is self-hosted. Loading it from Google would mean this toolkit
   pings a third party on every page load, which contradicts the promise the
   footer makes about data never leaving the page - and would need a CSP hole
   for fonts.gstatic.com. Self-hosted keeps font-src 'self' and works offline.
   ========================================================================== */

/* Variable font: one file per subset covers 400-700. unicode-range means a
   Vietnamese page pulls the vietnamese subset and an English one does not. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --brand:#D3222A;
  --brand-dark:#A81A21;
  --brand-soft:#FDEDEE;
  --brand-ring:rgba(211,34,42,.22);
  /* Filled buttons keep the true brand red in BOTH themes: white on #D3222A is
     5.21:1 (AA), while the lightened dark-mode red is only 3.94:1 and fails.
     --brand stays lighter in dark mode for text and borders, where a dark red
     would be the unreadable one. */
  --brand-solid:#D3222A;

  --ink:#252724;          /* the warm near-black the site uses for dark bands */
  --hero-bg:#252724;      /* the dark band behind the hero and the closing CTA */
  --slate:#33373D;
  --muted:#69727D;

  --bg:#F6F7F8;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --border:#E4E6E8;
  --border-strong:#CDD1D5;
  --text:#333333;
  --text-2:#69727D;
  --text-3:#98A0A8;

  --side-bg:#252724;
  --side-bg-2:#32352F;
  --side-text:#D6D8D3;
  --side-text-dim:#8D918A;
  --side-border:#3A3E37;

  --ok:#118D57;
  --ok-soft:#E7F6EE;
  --warn:#B76E00;
  --warn-soft:#FFF6E5;
  --err:#B42318;          /* deliberately deeper than the brand red, so an error
                             banner never reads as a brand element */
  --err-soft:#FDECEF;
  --info:#1B6FD1;
  --info-soft:#EAF2FC;

  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 4px 14px rgba(16,24,40,.08);
  --sh-3:0 12px 32px rgba(16,24,40,.14);
  --side-w:264px;
  /* one width shared by the content column, the topbar and the footer, so the
     three always line up */
  --content-max:1440px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:'Montserrat',"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#1A1C19;
  /* in dark mode --surface sits at #232520, close enough to --ink that the nav
     and the hero would read as one flat block; drop the band lower instead */
  --hero-bg:#101210;
  --surface:#232520;
  --surface-2:#2A2D27;
  --border:#383B34;
  --border-strong:#4A4E45;
  --text:#E6E7E3;
  --text-2:#A8ACA2;
  --text-3:#82877C;
  --brand:#E8434A;
  --brand-soft:#3A1D1E;
  --side-bg:#141613;
  --side-bg-2:#1E211C;
  --side-border:#2C2F28;
  --err:#F27A6E;          /* lifted for legibility on dark surfaces */
  --ok-soft:#0F2A1D; --warn-soft:#2C2210; --err-soft:#2A1218; --info-soft:#101F30;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px rgba(0,0,0,.45);
  --sh-3:0 12px 32px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}

/* The `hidden` attribute must always win. The UA stylesheet only sets
   [hidden]{display:none} at the lowest priority, so any author rule that sets
   display (e.g. .modal-wrap{display:grid}, .btn{display:inline-flex}) silently
   defeats it and the element shows up anyway. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--brand-ring)}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);background:var(--side-bg);
  border-right:1px solid var(--side-border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;z-index:40;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* The column is capped so textareas and prose do not stretch to 1600px, but the
   cap used to sit flush against the left edge with margin:0 - on a 1920 screen
   that left a 281px dead strip on the right while the topbar still spanned the
   full width, so the bar and the content below it did not line up. Centring the
   column and giving the bar and footer the same width fixes both. */
.content{
  flex:1;padding:22px 26px 40px;
  max-width:var(--content-max);width:100%;margin-inline:auto;
}

/* ---------- brand ----------
   Stacked, not side by side. The sidebar gives 231px of usable width and the
   logo alone needs ~176px of it; laid out in a row the product name was left
   with 16px and wrapped one character per line, pushing the block to 115px tall
   and overflowing its container. */
.brand{
  display:flex;align-items:flex-start;gap:10px;
  padding:15px 16px 14px;border-bottom:1px solid var(--side-border);
}
.brand-mark{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1;min-width:0}
/* the real EmeSoft mark, white variant because the sidebar is dark */
.brand-logo{height:30px;width:auto;display:block;max-width:100%}
.brand-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.brand-text strong{
  color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.01em;line-height:1.2;
}
.brand-text small{
  color:var(--side-text-dim);font-size:10.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

/* The button also carries .icon-btn, which sets display:grid at the SAME
   specificity further down the file - so source order won and the close button
   showed up on desktop, where the sidebar is not off-canvas and clicking it
   does nothing. Scoping to .sidebar outranks it in both directions. */
.sidebar .sidebar-close{display:none;color:var(--side-text);flex:0 0 32px}

/* ==========================================================================
   Landing page
   The sidebar and topbar are for working; a first-time visitor needs to know
   what this is before being dropped into 24 tools. body.is-landing swaps the
   whole chrome out rather than squeezing a hero into the dashboard.
   ========================================================================== */
body.is-landing .sidebar,
body.is-landing .topbar,
body.is-landing .app-foot{display:none}
body.is-landing .content{padding:0;max-width:none}
body.is-landing .app{display:block}

.lp-nav{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--border);
}
.lp-nav-in{
  max-width:1180px;margin:0 auto;padding:14px 26px;
  display:flex;align-items:center;gap:18px;
}
.lp-nav-sep{width:1px;height:26px;background:var(--border)}
.lp-nav-name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.lp-nav-links{margin-left:auto;display:flex;align-items:center;gap:8px}
.lp-nav-links a{
  color:var(--text-2);font-size:13.5px;font-weight:500;padding:7px 11px;border-radius:var(--r-sm);
}
.lp-nav-links a:hover{color:var(--text);background:var(--surface-2)}

.lp-hero{
  background:var(--hero-bg);color:#fff;position:relative;overflow:hidden;
  padding:74px 26px 78px;
}
.lp-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 420px at 78% 8%,rgba(211,34,42,.26),transparent 65%);
}
.lp-hero-in{max-width:1180px;margin:0 auto;position:relative}
.lp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--brand-solid);padding:5px 12px;border-radius:20px;
}
.lp-hero h1{
  font-size:clamp(30px,4.6vw,54px);line-height:1.08;font-weight:700;
  margin:20px 0 0;max-width:15ch;letter-spacing:-.02em;
}
.lp-hero h1 em{color:var(--brand);font-style:normal}
.lp-hero .lp-sub{
  margin-top:20px;max-width:60ch;font-size:clamp(15px,1.5vw,18px);
  line-height:1.65;color:rgba(255,255,255,.82);
}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lp-btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 25px;border-radius:var(--r-sm);
  font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;
}
.lp-btn.primary{background:var(--brand-solid);color:#fff;border-color:var(--brand-solid)}
.lp-btn.primary:hover{background:#BC1D24;border-color:#BC1D24}
.lp-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.lp-btn.ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55)}
.lp-hero-note{margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.6)}

.lp-metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--border);border-bottom:1px solid var(--border);
}
.lp-metric{background:var(--surface);padding:24px 26px;text-align:center}
.lp-metric b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.lp-metric span{
  display:block;margin-top:5px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);
}

.lp-section{max-width:1180px;margin:0 auto;padding:66px 26px}
.lp-section.tight{padding-top:44px}
.lp-head{max-width:62ch;margin-bottom:34px}
.lp-head .kicker{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);
}
.lp-head h2{font-size:clamp(23px,2.7vw,33px);margin-top:11px;letter-spacing:-.02em;font-weight:700}
.lp-head p{margin-top:13px;color:var(--text-2);font-size:15px;line-height:1.7}

.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.lp-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;transition:.15s ease;
}
.lp-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.lp-card .ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:17px;font-weight:700;margin-bottom:15px;
}
.lp-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.lp-card p{color:var(--text-2);font-size:13.5px;line-height:1.65}

.lp-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lp-cat{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:19px;border-left:3px solid var(--brand);
}
.lp-cat:hover{border-color:var(--border-strong);box-shadow:var(--sh-1);transform:translateY(-2px)}
.lp-cat b{display:block;font-size:14.5px;font-weight:600;color:var(--text)}
.lp-cat span{display:block;margin-top:5px;font-size:12.5px;color:var(--text-2);line-height:1.6}
.lp-cat .n{
  display:inline-block;margin-top:11px;font-size:11px;font-weight:700;color:var(--brand);
  letter-spacing:.05em;text-transform:uppercase;
}

.lp-band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.lp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.lp-list li{display:flex;gap:13px;font-size:14px;line-height:1.65;color:var(--text-2)}
.lp-list .tick{
  flex:0 0 21px;width:21px;height:21px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:1px;
}
.lp-list b{color:var(--text);font-weight:600}

.lp-final{background:var(--hero-bg);color:#fff;padding:64px 26px;text-align:center}
.lp-final h2{font-size:clamp(23px,2.9vw,34px);font-weight:700;letter-spacing:-.02em}
.lp-final p{margin:15px auto 0;max-width:58ch;color:rgba(255,255,255,.78);font-size:15px;line-height:1.7}
.lp-final .lp-cta{justify-content:center;margin-top:30px}

.lp-foot{background:#1B1D1A;color:rgba(255,255,255,.62);padding:34px 26px;font-size:12.5px}
.lp-foot-in{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.lp-foot img{height:27px;width:auto;opacity:.9}
.lp-foot .spacer{flex:1}
.lp-foot a{color:rgba(255,255,255,.82)}
.lp-foot a:hover{color:#fff}

@media (max-width:860px){
  .lp-split{grid-template-columns:1fr;gap:30px}
  .lp-hero{padding:52px 20px 56px}
  .lp-section{padding:46px 20px}
  .lp-nav-in{padding:12px 18px}
  .lp-nav-name{display:none}
  .lp-nav-sep{display:none}
}

/* ---------- sidebar search + nav ---------- */
.side-search{padding:12px 14px 6px}
.side-search input{
  width:100%;background:var(--side-bg-2);border:1px solid var(--side-border);
  color:var(--side-text);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;font-family:inherit;
}
.side-search input::placeholder{color:var(--side-text-dim)}
.side-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,34,42,.2)}

.side-nav{flex:1;overflow-y:auto;padding:6px 8px 14px;scrollbar-width:thin}
.side-nav::-webkit-scrollbar{width:8px}
.side-nav::-webkit-scrollbar-thumb{background:#2A2F38;border-radius:8px}
.nav-group{margin:10px 0 2px;padding:0 8px;display:flex;align-items:center;gap:7px;
  color:var(--side-text-dim);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.nav-group .cnt{margin-left:auto;background:var(--side-bg-2);border-radius:20px;padding:1px 7px;font-size:10px;letter-spacing:0}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--side-text);font-size:13px;cursor:pointer;border-left:2.5px solid transparent;
}
.nav-item:hover{background:var(--side-bg-2);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(211,34,42,.24),transparent);border-left-color:var(--brand);color:#fff;font-weight:600}
.nav-item .ico{width:18px;text-align:center;font-size:13px;opacity:.85;flex:0 0 18px}
.nav-item .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .ai-dot{margin-left:auto;font-size:9px;font-weight:800;color:#fff;background:var(--brand-solid);
  padding:1px 5px;border-radius:20px;letter-spacing:.04em}
.nav-empty{color:var(--side-text-dim);font-size:12px;padding:14px 10px;text-align:center}

.side-foot{padding:12px 14px 16px;border-top:1px solid var(--side-border)}
.ghost-btn{
  background:var(--side-bg-2);border:1px solid var(--side-border);color:var(--side-text);
  padding:8px 10px;border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
}
.ghost-btn:hover{border-color:var(--brand);color:#fff}
.ghost-btn.full{width:100%}
.local-note{color:var(--side-text-dim);font-size:10.5px;margin-top:10px;line-height:1.45}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--border);
}
/* bar spans the window; its contents share the content column's width */
.topbar-in{
  max-width:var(--content-max);margin:0 auto;padding:11px 26px;
  display:flex;align-items:center;gap:14px;
}
.crumbs{flex:1;min-width:0;font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:7px;overflow:hidden}
.crumbs b{color:var(--text);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--text-3)}
.topbar-right{display:flex;align-items:center;gap:9px}
.search-wrap{position:relative}
.search-wrap .search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.55;pointer-events:none}
.search-wrap input{
  width:250px;padding:7px 10px 7px 29px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text);font-size:13px;font-family:inherit;
}
.search-wrap input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);background:var(--surface)}
.mini-select{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:6px 6px;font-size:12.5px;font-family:inherit;cursor:pointer;
}
.icon-btn{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  width:32px;height:32px;border-radius:var(--r-sm);cursor:pointer;font-size:14px;line-height:1;
  display:grid;place-items:center;font-family:inherit;
}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.only-mobile{display:none}

.app-foot{color:var(--text-3);font-size:11.5px;border-top:1px solid var(--border)}
.app-foot-in{
  max-width:var(--content-max);margin:0 auto;padding:14px 26px 20px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.app-foot .dot{opacity:.5}

/* ---------- dashboard ---------- */
.hero{
  background:linear-gradient(120deg,var(--brand-solid) 0%,var(--brand-dark) 62%,#7A1218 100%);
  color:#fff;border-radius:var(--r-lg);padding:26px 28px;margin-bottom:20px;
  position:relative;overflow:hidden;box-shadow:var(--sh-2);
}
.hero::after{
  content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
}
.hero h1{font-size:25px;margin-bottom:7px;position:relative}
.hero p{max-width:660px;opacity:.94;font-size:13.5px;position:relative}
.hero-stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;position:relative}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-size:21px;line-height:1.1}
.hero-stats span{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.07em}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.chip{
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  padding:6px 13px;border-radius:20px;font-size:12.5px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.active{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff;font-weight:600}
.chip .n{opacity:.7;font-size:11px}

.section-title{display:flex;align-items:center;gap:9px;margin:22px 0 11px;font-size:12px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:700}
.section-title::after{content:"";flex:1;height:1px;background:var(--border)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:15px;cursor:pointer;position:relative;transition:.15s ease;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:8px;
}
.card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--sh-2)}
.card-top{display:flex;align-items:center;gap:10px}
.card-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:15px;font-weight:700;
}
.card h3{font-size:14px;flex:1;min-width:0}
.card p{color:var(--text-2);font-size:12.5px;line-height:1.5}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.tag{font-size:10.5px;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);
  padding:1px 7px;border-radius:20px}
.badge-ai{
  position:absolute;top:11px;right:11px;background:var(--brand-solid);color:#fff;font-size:9.5px;
  font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.05em;
}
.no-result{padding:46px 20px;text-align:center;color:var(--text-2);
  background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r)}

/* ---------- tool page ---------- */
.tool-head{margin-bottom:16px;display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap}
.tool-head .card-ico{width:40px;height:40px;flex:0 0 40px;font-size:17px;border-radius:11px}
.tool-head-txt{flex:1;min-width:220px}
.tool-head h1{font-size:19px;margin-bottom:3px}
.tool-head p{color:var(--text-2);font-size:13px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1)}
.panel + .panel{margin-top:14px}
.panel-head{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-head h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}
.panel-head .spacer{flex:1}
.panel-body{padding:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row.tight{gap:7px}
.stack{display:flex;flex-direction:column;gap:10px}
.grow{flex:1;min-width:150px}

/* ---------- form controls ---------- */
label.fld{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2);font-weight:600}
textarea,input[type=text],input[type=number],input[type=url],input[type=password],select{
  width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:9px 11px;font-size:13px;font-family:inherit;
}
textarea{font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical;min-height:170px;tab-size:2}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);background:var(--surface)}
textarea.tall{min-height:300px}
textarea.short{min-height:96px}
.mono{font-family:var(--mono)}
.check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);cursor:pointer;user-select:none}
.check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.hint{font-size:11.5px;color:var(--text-3)}

.btn{
  border:1px solid var(--brand-solid);background:var(--brand-solid);color:#fff;padding:8px 15px;
  border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn.sec:hover{background:var(--surface-2);border-color:var(--brand);color:var(--brand)}
.btn.sm{padding:5px 11px;font-size:12px}
.btn.danger{background:transparent;color:var(--err);border-color:var(--border-strong)}
.btn.danger:hover{background:var(--err-soft);border-color:var(--err)}

/* ---------- status / output ---------- */
.status{padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;display:flex;gap:8px;align-items:flex-start;
  border:1px solid transparent;font-family:var(--mono);word-break:break-word}
.status.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(17,141,87,.3)}
.status.err{background:var(--err-soft);color:var(--err);border-color:rgba(180,35,24,.32)}
.status.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(183,110,0,.3)}
.status.info{background:var(--info-soft);color:var(--info);border-color:rgba(27,111,209,.3)}
.status.hidden{display:none}

.out{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 12px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;word-break:break-word;
  min-height:60px;max-height:560px;overflow:auto;line-height:1.6;
}
.out.tall{min-height:300px}
.out:empty::before{content:attr(data-empty);color:var(--text-3);font-style:italic}
.md{white-space:normal;font-family:var(--sans);font-size:13.5px;line-height:1.65}
.md h1,.md h2,.md h3{margin:16px 0 7px;font-size:15px}
.md h1{font-size:17px}
.md p{margin:8px 0}
.md ul,.md ol{margin:8px 0;padding-left:22px}
.md li{margin:3px 0}
.md code{font-family:var(--mono);background:var(--surface);border:1px solid var(--border);
  padding:1px 5px;border-radius:4px;font-size:12px}
.md pre{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:10px 12px;overflow:auto;margin:9px 0}
.md pre code{border:0;background:none;padding:0}
.md table{border-collapse:collapse;width:100%;margin:11px 0;font-size:12.5px;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--border);padding:6px 9px;text-align:left;vertical-align:top}
.md th{background:var(--surface-2);font-weight:650}
.md blockquote{border-left:3px solid var(--brand);margin:10px 0;padding:2px 0 2px 12px;color:var(--text-2)}
.md hr{border:0;border-top:1px solid var(--border);margin:14px 0}

/* JSON syntax colors */
.j-key{color:#8F0D22}.j-str{color:#118D57}.j-num{color:#1B6FD1}.j-bool{color:#B76E00}.j-null{color:#8A93A0}
[data-theme="dark"] .j-key{color:#FF9AAB}
[data-theme="dark"] .j-str{color:#7EE2A8}
[data-theme="dark"] .j-num{color:#8CC2FF}
[data-theme="dark"] .j-bool{color:#FFCE7A}

/* diff */
.diff{font-family:var(--mono);font-size:12.5px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:auto;max-height:560px}
.diff-row{display:grid;grid-template-columns:52px 52px 1fr;border-bottom:1px solid var(--border)}
.diff-row:last-child{border-bottom:0}
.diff-row .ln{padding:2px 7px;text-align:right;color:var(--text-3);background:var(--surface-2);
  border-right:1px solid var(--border);font-size:11px;user-select:none}
.diff-row .tx{padding:2px 10px;white-space:pre-wrap;word-break:break-word}
.diff-row.add{background:var(--ok-soft)}
.diff-row.add .tx{color:var(--ok)}
.diff-row.del{background:var(--err-soft)}
.diff-row.del .tx{color:var(--err)}
.diff-row.same .tx{color:var(--text-2)}
.mark-add{background:rgba(17,141,87,.3);border-radius:3px}
.mark-del{background:rgba(180,35,24,.32);border-radius:3px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th,.tbl td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
.tbl th{background:var(--surface-2);font-weight:650;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-2);position:sticky;top:0}
.tbl td.mono{font-family:var(--mono);font-size:12px}
.tbl-wrap{overflow:auto;max-height:480px;border-radius:var(--r-sm)}
.kv{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:1px;font-size:12.5px}
.kv > div{padding:7px 10px;background:var(--surface-2);border:1px solid var(--border);margin:-.5px}
.kv .k{font-weight:650;color:var(--text-2)}
.kv .v{font-family:var(--mono);word-break:break-all}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
  border:1px solid transparent;letter-spacing:.02em}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(17,141,87,.32)}
.pill.err{background:var(--err-soft);color:var(--err);border-color:rgba(180,35,24,.34)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(183,110,0,.32)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:rgba(27,111,209,.32)}
.pill.mut{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}

.stats{display:flex;gap:9px;flex-wrap:wrap}
.stat{flex:1;min-width:118px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 13px}
.stat b{display:block;font-size:19px;line-height:1.2}
.stat span{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}

/* ---------- modal / toast ---------- */
.modal-wrap{position:fixed;inset:0;background:rgba(10,12,16,.55);z-index:80;display:grid;place-items:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-3)}
.modal-head{display:flex;align-items:center;padding:14px 17px;border-bottom:1px solid var(--border)}
.modal-head h3{flex:1;font-size:15px}
.modal-body{padding:17px;overflow:auto}
.toast-host{position:fixed;bottom:18px;right:18px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text);color:var(--surface);padding:9px 15px;border-radius:var(--r-sm);
  font-size:13px;box-shadow:var(--sh-3);animation:tin .2s ease}
.toast.ok{background:var(--ok);color:#fff}
.toast.err{background:var(--err);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.backdrop{display:none;position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:35}
.backdrop.on{display:block}

.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){ .split-3{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:none}
  .sidebar .sidebar-close{display:grid}
  .only-mobile{display:grid}
  .content{padding:16px}
  .topbar-in{padding:10px 16px}
  .app-foot-in{padding:12px 16px 18px}
  .split,.split-3{grid-template-columns:1fr}
  .search-wrap input{width:150px}
  .hero{padding:20px}
  .hero h1{font-size:21px}
  .kv{grid-template-columns:1fr}
}
@media (max-width:520px){
  .search-wrap{display:none}
  .grid{grid-template-columns:1fr}
  .diff-row{grid-template-columns:38px 38px 1fr}
}
@media print{ .sidebar,.topbar,.app-foot,.toast-host{display:none!important} .content{padding:0} }

/* ---------- dashboard header (compact: the pitch lives on the landing page) -- */
.dash-head{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border);
}
.dash-head h1{font-size:23px;font-weight:700;letter-spacing:-.02em}
.dash-head p{margin-top:5px;color:var(--text-2);font-size:13.5px;max-width:62ch}
.dash-counts{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.dash-counts span{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em}
.dash-counts b{
  display:block;font-size:21px;font-weight:700;color:var(--text);
  text-transform:none;letter-spacing:-.02em;
}
@media (max-width:640px){ .dash-counts{margin-left:0} }

/* ---------- landing: theme + language controls -------------------------------
   The topbar carries these everywhere else, and body.is-landing hides it, so
   without these two buttons a visitor on the landing page has no way to switch
   theme or language at all. */
.lp-icon-btn{
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);
  min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-sm);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;
  display:inline-grid;place-items:center;
}
.lp-icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.lp-nav-links{gap:6px}

/* The logo file is swapped per theme in renderLanding, not hidden with CSS, so
   only the variant actually in use is downloaded. Height is fixed here because
   the two files have different intrinsic sizes (768x158 vs 2524x430). */
.lp-logo{height:34px;width:auto;display:block;flex:0 0 auto}

@media (max-width:700px){
  .lp-nav-links .only-wide{display:none}
  .lp-logo{height:28px}
}

/* ---------- team credit in both footers -------------------------------------- */
.app-foot-team{margin-left:auto;color:var(--text-3)}
.app-foot-team b{color:var(--text-2);font-weight:600}
.lp-foot-team{color:rgba(255,255,255,.55)}
.lp-foot-team b{color:rgba(255,255,255,.9);font-weight:600}
@media (max-width:640px){
  .app-foot-team{margin-left:0}
}