/* ==========================================================================
   Match & Wood — Taxonomy Generator (redesign)
   Calm, minimal, lots of air. Söhne family, dark-green accent, sharp surfaces.
   Layered on Campfire tokens.
   ========================================================================== */

@font-face { font-family:'Sohne Leicht'; src:url("../fonts/Sohne-Leicht.otf") format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Sohne Leicht'; src:url("../fonts/Sohne-LeichtKursiv.otf") format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Sohne Kraftig'; src:url("../fonts/Sohne-Kraftig.otf") format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Sohne Schmal'; src:url("../fonts/SohneSchmal-Dreiviertelfett.otf") format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --bg:#F5F5F0;
  --surface:#FFFFFF;
  --surface-2:#FAFAF6;
  --fg1:#1A1A18;
  --fg2:#4A4A45;
  --muted:#76766F;
  --rule:rgba(0,77,69,.14);
  --rule-2:rgba(0,77,69,.26);

  --accent:#004D45;       /* tweakable */
  --accent-hover:#003A34;
  --accent-light:#54DBA1; /* tweakable companion */
  --on-accent:#FFFFFF;

  --warn:#C9A227;
  --warn-fg:#6E5410;

  --font-display:'Sohne Schmal','Inter',system-ui,sans-serif;
  --font-ui:'Sohne Kraftig','Inter',system-ui,sans-serif;
  --font-body:'Sohne Leicht','Inter',system-ui,sans-serif;

  /* density-driven */
  --pad-page:64px;
  --gap-section:48px;
  --gap-field:28px;
  --ctrl-h:46px;
  --field-min:230px;

  font-feature-settings:"tnum" 1;
}

/* compact density */
body.compact{
  --pad-page:40px;
  --gap-section:34px;
  --gap-field:20px;
  --ctrl-h:40px;
  --field-min:200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg2);
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(84,219,161,.30)}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad-page);
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.brand{display:flex;align-items:center;gap:16px}
.brand .wordmark{height:20px;width:auto;display:block}
.brand .divider{width:1px;height:22px;background:var(--rule-2)}
.brand .tool{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--accent);letter-spacing:.01em}
.topbar .meta{font-family:var(--font-body);font-style:italic;font-size:13px;color:var(--muted)}

/* ---------------- layout ---------------- */
.wrap{
  max-width:1240px;margin:0 auto;
  padding:var(--pad-page) var(--pad-page) 96px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:72px;
  align-items:start;
}
@media(max-width:980px){
  .wrap{grid-template-columns:1fr;gap:var(--gap-section)}
  :root{--pad-page:32px}
}

.intro{margin-bottom:var(--gap-section)}
.intro h1{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.005em;color:var(--fg1);
  font-size:46px;line-height:1.02;margin:0 0 14px;
}
.intro p{max-width:62ch;margin:0;color:var(--fg2);font-size:16px}

/* ---------------- step blocks ---------------- */
.step{margin-bottom:var(--gap-section)}
.step.disabled{opacity:.4;pointer-events:none;filter:grayscale(.2)}
.step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.step-num{
  font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--accent);
  min-width:20px;
}
.step-title{font-family:var(--font-ui);font-weight:600;font-size:16px;color:var(--fg1)}
.step-hint{font-style:italic;font-size:13px;color:var(--muted);margin-left:auto}

/* segmented control (platform + level) */
.segmented{display:flex;flex-wrap:wrap;gap:10px}
.seg{
  font-family:var(--font-ui);font-weight:600;font-size:14px;
  padding:0 20px;height:var(--ctrl-h);display:inline-flex;align-items:center;gap:10px;
  background:var(--surface);color:var(--fg2);
  border:1px solid var(--rule);border-radius:6px;cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.seg:hover{border-color:var(--rule-2);color:var(--fg1)}
.seg[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.seg .seg-blurb{font-family:var(--font-body);font-weight:300;font-size:12px;opacity:.7}
.seg[aria-pressed=true] .seg-blurb{opacity:.85}

.level-row{display:flex;flex-wrap:wrap;gap:10px}
.lvl{
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  padding:0 16px;height:40px;display:inline-flex;align-items:center;
  background:var(--surface);color:var(--fg2);
  border:1px solid var(--rule);border-radius:6px;cursor:pointer;transition:.15s;
}
.lvl:hover{border-color:var(--rule-2);color:var(--fg1)}
.lvl[aria-pressed=true]{background:var(--accent-light);color:var(--accent);border-color:var(--accent-light);font-weight:600}

/* ---------------- fields ---------------- */
.fields{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--field-min),1fr));
  gap:var(--gap-field) 40px;
}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.span2{grid-column:1 / -1}
.field-label{
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--fg1);
  display:flex;align-items:center;gap:6px;
}
.field-label .locked{
  font-family:var(--font-body);font-weight:300;font-style:italic;font-size:11px;color:var(--muted);
}
.field-hint{font-size:12px;color:var(--muted);font-style:italic}

/* bottom-border inputs — brand signature */
.inp,.sel{
  font-family:var(--font-body);font-size:15px;color:var(--fg1);
  background:transparent;border:0;border-bottom:1.5px solid var(--rule-2);
  border-radius:0;padding:8px 2px;width:100%;height:var(--ctrl-h);
  transition:border-color .15s ease;
}
.inp::placeholder{color:var(--muted);opacity:.7}
.inp:focus,.sel:focus{outline:none;border-bottom-color:var(--accent)}
.sel{
  appearance:none;cursor:pointer;padding-right:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2376766F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.sel.placeholder{color:var(--muted)}

/* ---------------- geo builder ---------------- */
.geo{display:flex;flex-direction:column;gap:12px}
.geo-controls{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.geo-sub{display:flex;flex-direction:column;gap:7px;min-width:0}
.geo-sub .tiny{font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.state-grid{display:flex;flex-wrap:wrap;gap:7px}
.state-chip{
  font-family:var(--font-ui);font-weight:600;font-size:12px;
  padding:6px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);
  color:var(--fg2);cursor:pointer;transition:.12s;
}
.state-chip:hover{border-color:var(--rule-2)}
.state-chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.geo-add{
  font-family:var(--font-ui);font-weight:600;font-size:13px;
  height:var(--ctrl-h);padding:0 18px;border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);border-radius:6px;cursor:pointer;
  white-space:nowrap;transition:background .15s;
}
.geo-add:hover{background:var(--accent-hover)}
.geo-add:disabled{opacity:.4;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;
  background:rgba(0,77,69,.07);color:var(--accent);
  border:1px solid var(--rule-2);
  padding:5px 8px 5px 12px;border-radius:999px;
}
.chip-x{border:0;background:none;color:var(--accent);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;opacity:.6}
.chip-x:hover{opacity:1}

/* ---------------- preview pane ---------------- */
.preview{position:sticky;top:32px;display:flex;flex-direction:column;gap:20px}
.name-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:0;
  border-top:2px solid var(--accent);
  padding:28px 28px 24px;
}
.name-eyebrow{
  font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.name-context{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--accent);margin-bottom:18px}
.name-context .ph{color:var(--muted);font-family:var(--font-body);font-weight:300;font-style:italic}

.name-body{
  font-family:var(--font-ui);font-weight:600;font-size:18px;line-height:1.7;
  color:var(--fg1);word-break:break-word;letter-spacing:-.01em;
  padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.tok{display:inline-block}
.tok-val{color:var(--fg1)}
.tok-empty{color:var(--accent);opacity:.55;font-style:normal}
.sep{color:var(--muted);opacity:.55;padding:0 4px}

.name-actions{display:flex;align-items:center;gap:14px;margin-top:18px}
.btn-copy{
  font-family:var(--font-ui);font-weight:600;font-size:14px;
  height:46px;padding:0 24px;border:0;border-radius:6px;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
  display:inline-flex;align-items:center;gap:9px;transition:background .15s;
}
.btn-copy:hover:not(:disabled){background:var(--accent-hover)}
.btn-copy:disabled{background:rgba(0,77,69,.10);color:rgba(0,77,69,.4);cursor:not-allowed}
.status{font-size:13px;color:var(--muted);font-style:italic}
.status.ready{color:var(--accent);font-style:normal;font-family:var(--font-ui);font-weight:600}
.status.miss{color:var(--warn-fg)}

/* dark preview variant */
.name-card.dark{background:var(--accent);border-color:var(--accent);border-top-color:var(--accent-light)}
.name-card.dark .name-eyebrow{color:rgba(255,255,255,.6)}
.name-card.dark .name-context{color:var(--accent-light)}
.name-card.dark .name-context .ph{color:rgba(255,255,255,.55)}
.name-card.dark .name-body{color:#fff;border-color:rgba(255,255,255,.16)}
.name-card.dark .tok-val{color:#fff}
.name-card.dark .tok-empty{color:var(--accent-light);opacity:.75}
.name-card.dark .sep{color:rgba(255,255,255,.4)}
.name-card.dark .btn-copy{background:var(--accent-light);color:var(--accent)}
.name-card.dark .btn-copy:hover:not(:disabled){background:#6FE3B0}
.name-card.dark .btn-copy:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.4)}
.name-card.dark .status{color:rgba(255,255,255,.7)}
.name-card.dark .status.ready{color:var(--accent-light)}
.name-card.dark .status.miss{color:#E8C868}

/* structure line */
.struct{
  font-family:var(--font-ui);font-weight:600;font-size:11px;color:var(--muted);
  letter-spacing:.02em;line-height:1.7;word-break:break-word;
}
.struct .sb{color:var(--fg2)}

/* recent names */
.recent{border-top:1px solid var(--rule);padding-top:20px}
.recent-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.recent-head h3{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--fg1);margin:0}
.recent-clear{font-family:var(--font-body);font-style:italic;font-size:12px;color:var(--muted);background:none;border:0;cursor:pointer}
.recent-clear:hover{color:var(--accent)}
.recent-empty{font-style:italic;font-size:13px;color:var(--muted)}
.recent-list{display:flex;flex-direction:column;gap:0}
.recent-item{
  display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);
}
.recent-item:last-child{border-bottom:0}
.recent-meta{min-width:0;flex:1}
.recent-ctx{font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.recent-name{font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-copy{
  flex:0 0 auto;font-family:var(--font-ui);font-weight:600;font-size:11.5px;color:var(--accent);
  background:none;border:1px solid var(--rule-2);border-radius:6px;padding:6px 12px;cursor:pointer;transition:.12s;
}
.recent-copy:hover{background:rgba(0,77,69,.06);border-color:var(--accent)}

/* legend */
.legend{
  grid-column:1 / -1;margin-top:8px;border-top:1px solid var(--rule);padding-top:22px;
  font-size:13.5px;color:var(--muted);max-width:78ch;line-height:1.6;
}
.legend b{font-family:var(--font-ui);font-weight:600;color:var(--accent)}

/* empty preview state */
.preview-empty{color:var(--muted);font-style:italic;font-size:14px}

/* toast for copy */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(12px);
  background:var(--fg1);color:#fff;font-family:var(--font-ui);font-weight:600;font-size:13px;
  padding:11px 20px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- mode switch ---------------- */
.modebar{
  display:flex;align-items:center;gap:18px;
  margin-bottom:var(--gap-section);padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.modebar .ms-label{font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--fg1)}
.ms-group{display:flex;gap:8px}
.ms-btn{
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  padding:0 16px;height:38px;display:inline-flex;align-items:center;
  background:var(--surface);color:var(--fg2);
  border:1px solid var(--rule);border-radius:6px;cursor:pointer;transition:.15s;
}
.ms-btn:hover{border-color:var(--rule-2);color:var(--fg1)}
.ms-btn[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.modebar .ms-note{font-style:italic;font-size:13px;color:var(--muted);margin-left:auto;max-width:40ch;text-align:right;line-height:1.45}
@media(max-width:560px){ .modebar{flex-wrap:wrap} .modebar .ms-note{margin-left:0;text-align:left;max-width:none} }

/* count badge on bulk field labels */
.count-badge{
  font-family:var(--font-ui);font-weight:600;font-size:10.5px;color:var(--accent);
  background:rgba(0,77,69,.07);border:1px solid var(--rule-2);border-radius:999px;
  padding:2px 9px;margin-left:auto;
}

/* bulk free-text */
.bulk-area{
  font-family:var(--font-body);font-size:15px;color:var(--fg1);line-height:1.5;
  background:var(--surface-2);border:1px solid var(--rule-2);border-radius:6px;
  padding:10px 12px;width:100%;min-height:80px;resize:vertical;transition:border-color .15s;
}
.bulk-area:focus{outline:none;border-color:var(--accent)}
.bulk-area::placeholder{color:var(--muted);opacity:.7}

/* ---------------- batch pane ---------------- */
.batch-card{
  background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--accent);
  padding:26px 26px 22px;
}
.batch-top{display:flex;align-items:baseline;gap:12px}
.batch-count{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  font-size:40px;line-height:1;color:var(--fg1);
}
.batch-sub{font-family:var(--font-body);font-style:italic;font-size:13px;color:var(--muted);margin:8px 0 18px}
.batch-actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.btn-ghost{
  font-family:var(--font-ui);font-weight:600;font-size:14px;
  height:46px;padding:0 18px;border:1px solid var(--rule-2);background:none;color:var(--accent);
  border-radius:6px;cursor:pointer;transition:.12s;
}
.btn-ghost:hover:not(:disabled){background:rgba(0,77,69,.06);border-color:var(--accent)}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.batch-list{display:flex;flex-direction:column;max-height:460px;overflow:auto;margin:0 -2px;padding:0 2px}
.batch-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.batch-row:last-child{border-bottom:0}
.batch-idx{font-family:var(--font-ui);font-weight:600;font-size:11px;color:var(--muted);min-width:22px;padding-top:1px}
.batch-name{flex:1;min-width:0;font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--fg1);word-break:break-word;line-height:1.45}
.batch-name.incomplete{color:var(--warn-fg)}
.batch-more{font-style:italic;font-size:12.5px;color:var(--muted);padding:12px 0 0}

/* ==========================================================================
   Match & Wood — UTM Generator + Admin config
   Shares the tokens defined in app.css. Same calm, sharp, Söhne system.
   ========================================================================== */

/* ---------------- top-bar tabs + admin link ---------------- */
.tabs{display:flex;align-items:stretch;gap:4px}
.tab{
  font-family:var(--font-ui);font-weight:600;font-size:14px;
  color:var(--muted);background:none;border:0;cursor:pointer;
  padding:6px 4px;position:relative;letter-spacing:.01em;
  transition:color .15s ease;
}
.tab:hover{color:var(--fg1)}
.tab[aria-pressed=true]{color:var(--accent)}
.tab[aria-pressed=true]::after{
  content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--accent);
}
body.compact .tab[aria-pressed=true]::after{bottom:-19px}

.topbar-right{display:flex;align-items:center;gap:18px}
.admin-link{
  font-family:var(--font-ui);font-weight:600;font-size:13px;
  color:var(--fg2);background:none;border:1px solid var(--rule-2);border-radius:6px;
  padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:.15s;
}
.admin-link:hover{border-color:var(--accent);color:var(--accent)}
.admin-link[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.admin-link svg{width:15px;height:15px;display:block}

/* ---------------- UTM build form ---------------- */
.utm-form{display:flex;flex-direction:column;gap:var(--gap-section)}
.utm-block{display:flex;flex-direction:column;gap:18px}
.utm-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--field-min),1fr));
  gap:var(--gap-field) 40px;
}
.utm-grid .field.full{grid-column:1 / -1}

/* client note callout — brand hairline-left rule */
.client-note{
  grid-column:1 / -1;
  font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--fg2);
  background:var(--surface-2);border-left:2px solid var(--accent);
  padding:12px 16px;
}
.client-note .cn-label{
  font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px;
}

/* macro chip row */
.macros{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.macro-chip{
  font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:11.5px;
  background:rgba(0,77,69,.06);color:var(--accent);
  border:1px solid var(--rule-2);border-radius:999px;padding:4px 11px;cursor:pointer;
  transition:.12s;
}
.macro-chip:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.macros .macro-none{font-family:var(--font-body);font-style:italic;font-size:12px;color:var(--muted)}

/* ---------------- generated URL card (dark, brand) ---------------- */
.url-card{
  background:var(--accent);border:1px solid var(--accent);border-top:2px solid var(--accent-light);
  padding:24px 26px 22px;
}
.url-card .name-eyebrow{color:rgba(255,255,255,.6)}
.url-box{
  font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:13px;line-height:1.75;
  color:#EAF3EE;word-break:break-all;
  background:rgba(0,0,0,.18);border-radius:4px;padding:14px 16px;min-height:62px;
  margin-bottom:16px;
}
.url-box .uk{color:var(--accent-light)}
.url-box .um{color:#FFD479}
.url-box .uph{color:rgba(255,255,255,.5);font-style:italic}
.url-actions{display:flex;gap:10px;flex-wrap:wrap}
.url-actions .btn-copy{background:var(--accent-light);color:var(--accent)}
.url-actions .btn-copy:hover:not(:disabled){background:#6FE3B0}
.url-actions .btn-copy:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.4)}
.url-ghost{
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.3);background:none;color:#EAF3EE;
  border-radius:6px;cursor:pointer;transition:.12s;
}
.url-ghost:hover{border-color:var(--accent-light);color:var(--accent-light)}

/* ---------------- validation card ---------------- */
.valid-card{
  background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--accent);
  padding:24px 26px 18px;
}
.valid-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;letter-spacing:.02em;
  padding:6px 13px;border-radius:999px;
}
.status-pill .dot{width:8px;height:8px;border-radius:50%}
.status-pill.pass{background:rgba(0,77,69,.08);color:var(--accent)}
.status-pill.pass .dot{background:var(--accent-light)}
.status-pill.fail{background:rgba(245,110,110,.14);color:#631C24}
.status-pill.fail .dot{background:#C8434B}
.status-pill.warning{background:rgba(201,162,39,.16);color:var(--warn-fg)}
.status-pill.warning .dot{background:var(--warn)}
.valid-counts{font-family:var(--font-body);font-style:italic;font-size:12.5px;color:var(--muted)}

.layer-title{
  font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--rule);
}
.layer-title:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.check{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--rule)}
.check:last-child{border-bottom:0}
.check .ic{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-weight:600;font-size:11px;line-height:1;margin-top:1px;
}
.check.pass .ic{background:rgba(0,77,69,.10);color:var(--accent)}
.check.fail .ic{background:rgba(245,110,110,.18);color:#631C24}
.check.warning .ic{background:rgba(201,162,39,.18);color:var(--warn-fg)}
.check .ctext{min-width:0}
.check .ct{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--fg1);line-height:1.4}
.check .cd{font-family:var(--font-body);font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px;word-break:break-word}

/* footnote under validation */
.utm-foot{
  grid-column:1 / -1;margin-top:4px;border-top:1px solid var(--rule);padding-top:20px;
  font-size:13px;color:var(--muted);max-width:74ch;line-height:1.6;
}
.utm-foot b{font-family:var(--font-ui);font-weight:600;color:var(--accent)}

/* ==========================================================================
   Admin / config screen
   ========================================================================== */
.admin-wrap{
  max-width:1240px;margin:0 auto;
  padding:var(--pad-page) var(--pad-page) 96px;
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start;
}
@media(max-width:900px){ .admin-wrap{grid-template-columns:1fr;gap:var(--gap-section)} }

.admin-intro{grid-column:1 / -1;margin-bottom:8px}
.admin-intro h1{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  color:var(--fg1);font-size:38px;line-height:1.04;margin:0 0 12px;
}
.admin-intro p{max-width:64ch;margin:0;color:var(--fg2);font-size:15px}
.mockup-flag{
  display:inline-block;margin-top:14px;
  font-family:var(--font-body);font-style:italic;font-size:12.5px;color:var(--warn-fg);
  background:rgba(201,162,39,.14);border-left:2px solid var(--warn);padding:7px 13px;
}

/* client roster */
.client-list{display:flex;flex-direction:column;border-top:1px solid var(--rule);position:sticky;top:32px}
.client-list .cl-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:16px 0 12px;
}
.client-list .cl-head h2{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--fg1);margin:0}
.cl-add{
  font-family:var(--font-ui);font-weight:600;font-size:12px;color:var(--accent);
  background:none;border:1px solid var(--rule-2);border-radius:6px;padding:5px 11px;cursor:pointer;transition:.12s;
}
.cl-add:hover{background:rgba(0,77,69,.06);border-color:var(--accent)}
.cl-item{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:12px 14px;border:1px solid transparent;border-bottom:1px solid var(--rule);
  background:none;cursor:pointer;transition:.12s;
}
.cl-item:hover{background:var(--surface-2)}
.cl-item[aria-pressed=true]{background:var(--surface);border-color:var(--rule-2);border-left:2px solid var(--accent)}
.cl-name{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--fg1)}
.cl-code{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:11px;color:var(--muted)}
.cl-base-tag{
  font-family:var(--font-ui);font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:rgba(0,77,69,.08);padding:1px 7px;border-radius:999px;align-self:flex-start;margin-top:3px;
}

/* editor panel */
.editor{display:flex;flex-direction:column;gap:var(--gap-section)}
.ed-section{display:flex;flex-direction:column;gap:16px}
.ed-section > .ed-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.ed-head h3{font-family:var(--font-ui);font-weight:600;font-size:15px;color:var(--fg1);margin:0}
.ed-head .ed-sub{font-family:var(--font-body);font-style:italic;font-size:12.5px;color:var(--muted);margin-left:auto}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap-field) 36px}
.ed-grid .full{grid-column:1 / -1}
.ed-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.ed-field > .ed-label{font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--fg1);display:flex;align-items:center;gap:6px}
.ed-field .ed-mono{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace)}
.ed-hint{font-family:var(--font-body);font-style:italic;font-size:11.5px;color:var(--muted)}

/* chips editor (domains, mapping sources) */
.chip-edit{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  border-bottom:1.5px solid var(--rule-2);padding:6px 2px 8px;}
.chip-edit:focus-within{border-bottom-color:var(--accent)}
.chip-edit .chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:12px;
  background:rgba(0,77,69,.07);color:var(--accent);border:1px solid var(--rule-2);
  padding:3px 6px 3px 10px;border-radius:999px;
}
.chip-edit .chip-x{border:0;background:none;color:var(--accent);font-size:15px;line-height:1;cursor:pointer;padding:0 2px;opacity:.6}
.chip-edit .chip-x:hover{opacity:1}
.chip-edit .chip-input{
  flex:1;min-width:120px;border:0;background:none;outline:none;
  font-family:var(--font-body);font-size:14px;color:var(--fg1);padding:4px 0;
}
.chip-edit .chip-input::placeholder{color:var(--muted);opacity:.7}

/* channel mapping rows */
.map-row{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule)}
.map-row:last-child{border-bottom:0}
.map-key{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:12.5px;color:var(--fg1);padding-top:8px}

/* alias rows */
.alias-row{display:grid;grid-template-columns:1fr auto 1fr auto;gap:10px;align-items:center}
.alias-arrow{font-family:var(--font-ui);font-weight:600;color:var(--muted);font-size:14px}
.alias-del{
  font-family:var(--font-ui);font-weight:600;font-size:16px;line-height:1;color:var(--muted);
  background:none;border:1px solid var(--rule);border-radius:6px;width:34px;height:34px;cursor:pointer;transition:.12s;
}
.alias-del:hover{color:#631C24;border-color:#C8434B}
.alias-add{
  font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--accent);
  background:none;border:1px dashed var(--rule-2);border-radius:6px;padding:9px 14px;cursor:pointer;transition:.12s;align-self:flex-start;
}
.alias-add:hover{background:rgba(0,77,69,.05);border-color:var(--accent)}

/* platform defaults table */
.plat-table{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.plat-head,.plat-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule)}
.plat-head{font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.plat-name{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--fg1)}

/* delete client */
.ed-danger{border-top:1px solid var(--rule);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ed-danger .dg-text{font-family:var(--font-body);font-size:13px;color:var(--muted);max-width:48ch}
.btn-danger{
  font-family:var(--font-ui);font-weight:600;font-size:13.5px;
  height:42px;padding:0 18px;border:1px solid #C8434B;background:none;color:#631C24;
  border-radius:6px;cursor:pointer;transition:.12s;white-space:nowrap;
}
.btn-danger:hover{background:rgba(245,110,110,.10)}
.btn-danger:disabled{opacity:.35;cursor:not-allowed}

/* reused select/input in admin reuse .inp/.sel from app.css */
.ed-field .inp,.ed-field .sel,.map-row .inp,.alias-row .inp{height:auto;min-height:var(--ctrl-h)}

/* ---------------- decoded readable expansion (under coded name) ---------------- */
.name-readable{
  font-family:var(--font-body);font-size:12.5px;color:var(--muted);line-height:1.6;
  margin-top:12px;word-break:break-word;
}
.name-readable .rtok{color:var(--fg2)}
.name-readable .rtok.empty{color:var(--accent);opacity:.5;font-style:italic}
.name-readable .rsep{padding:0 6px;opacity:.45}
.name-card.dark .name-readable{color:rgba(255,255,255,.65)}
.name-card.dark .name-readable .rtok{color:rgba(255,255,255,.85)}
.name-card.dark .name-readable .rtok.empty{color:var(--accent-light);opacity:.7}

/* ---------------- admin: naming lookup-tables export band ---------------- */
.lookup-band{
  grid-column:1 / -1;
  background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--accent);
  padding:20px 22px;margin-bottom:8px;
}
.lookup-band .ed-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:14px}
.lookup-copy{font-family:var(--font-body);font-size:13px;color:var(--fg2);line-height:1.55;max-width:78ch;margin:0 0 14px}
.lookup-copy code{font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);font-size:11.5px;background:rgba(0,77,69,.06);color:var(--accent);padding:1px 5px;border-radius:3px}
.lookup-actions{display:flex;gap:10px;flex-wrap:wrap}