/* =============================================================================
   PPV Control Center — centralized design system
   Tokens → base → layout (header/nav/footer) → components → utilities → responsive
   All class names are backward-compatible with existing templates.
   ============================================================================= */

/* ---------------------------------------------------------------- tokens ---- */
:root{
  /* surfaces */
  --bg:#0b0d18;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, #161a2e 0%, #0b0d18 55%);
  --panel:#151827;
  --panel-2:#1c2033;
  --panel-3:#242942;
  --border:#282d45;
  --border-2:#363c5c;
  /* text */
  --text:#e9ebf4;
  --muted:#8b90ab;
  --faint:#5f6488;
  /* brand + semantic */
  --accent:#5089ff;
  --accent-2:#3b72ea;
  --accent-soft:rgba(80,137,255,.14);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.14);
  --err:#f87171; --err-soft:rgba(248,113,113,.14);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14);
  /* spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;
  /* radii */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* type */
  --fs-xs:12px; --fs-sm:13px; --fs:14px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  /* shadow + motion */
  --sh-sm:0 1px 2px rgba(0,0,0,.35);
  --sh-md:0 6px 22px rgba(0,0,0,.35);
  --sh-lg:0 16px 48px rgba(0,0,0,.5);
  --t:.16s ease;
  --nav-h:60px;
  --content:1180px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ------------------------------------------------------------------ base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;
  color:var(--text);font-family:var(--font);font-size:var(--fs);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:var(--accent);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--accent-2)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft)}
.wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 var(--sp-5)}

/* --------------------------------------------------------------- header ----- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(17,20,34,.85);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.topbar__inner{display:flex;align-items:center;gap:var(--sp-4);height:var(--nav-h)}
.brand{display:flex;align-items:center;font-weight:800;font-size:var(--fs-lg);
  color:var(--text);letter-spacing:.2px;white-space:nowrap}
.brand:hover{color:var(--text)}
.brand__dot,.brand span{color:var(--accent);margin:0 1px}

/* nav */
.nav{display:flex;align-items:center;gap:var(--sp-1);flex:1}
.nav a{color:var(--muted);padding:8px 13px;border-radius:var(--r-sm);font-weight:600;
  font-size:var(--fs);white-space:nowrap;transition:background var(--t),color var(--t)}
.nav a:hover{background:var(--panel-2);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:#cfe0ff}
.nav__spacer{flex:1}
.nav__user{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--muted);
  font-weight:600;padding:6px 10px 6px 6px;border-radius:var(--r-pill)}
.nav__user:hover,.nav__user.active{background:var(--panel-2);color:var(--text)}
.nav__avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:800}
.nav__logout{margin:0}
.nav__logout .btn{padding:7px 12px}

/* hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;margin-left:auto}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;
  transition:transform var(--t),opacity var(--t)}
body.is-nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.is-nav-open .nav-toggle span:nth-child(2){opacity:0}
body.is-nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------- layout ---- */
.page{flex:1 0 auto;padding:var(--sp-6) 0 var(--sp-8)}
h1{font-size:var(--fs-2xl);margin:0 0 var(--sp-1);font-weight:800;letter-spacing:-.4px}
h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3);font-weight:700}
h3{font-size:var(--fs-md);margin:0 0 var(--sp-1);font-weight:700}
.sub{color:var(--muted);margin:0 0 var(--sp-5);font-size:var(--fs-md)}
.hint{color:var(--faint);font-size:var(--fs-xs)}
.meta{color:var(--muted);font-size:var(--fs-sm)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--sp-4);
  align-items:stretch}
.grid > .card{margin:0;display:flex;flex-direction:column}

/* footer */
.footer{flex-shrink:0;border-top:1px solid var(--border);background:rgba(17,20,34,.5);
  color:var(--faint);font-size:var(--fs-xs)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  height:52px;flex-wrap:wrap}
.footer a{color:var(--muted)}
.footer .dotsep{opacity:.4;margin:0 var(--sp-2)}

/* ----------------------------------------------------------------- cards ---- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sh-sm)}
.card h3{margin:0 0 var(--sp-1)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.row h3{margin:0}
/* pin an action row to the bottom of an equal-height grid card */
.push-bottom{margin-top:auto}

/* --------------------------------------------------------------- buttons ---- */
.btn{--btn-bg:var(--accent);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid transparent;
  border-radius:var(--r-sm);padding:10px 16px;font-size:var(--fs);font-weight:650;
  font-family:inherit;line-height:1.1;cursor:pointer;white-space:nowrap;
  transition:filter var(--t),background var(--t),transform var(--t),box-shadow var(--t);
  box-shadow:var(--sh-sm)}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:var(--btn-fg)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.ghost{--btn-bg:var(--panel-2);--btn-fg:var(--text);border-color:var(--border-2);box-shadow:none}
.btn.ghost:hover{--btn-bg:var(--panel-3)}
.btn.danger{--btn-bg:var(--err);--btn-fg:#2a0d0d}
.btn.sm{padding:7px 12px;font-size:var(--fs-sm)}
.btn.lg{padding:13px 22px;font-size:var(--fs-md)}
.btn.block{width:100%}

/* ----------------------------------------------------------------- forms ---- */
label{display:block;margin:0 0 var(--sp-2);color:var(--muted);font-weight:600;font-size:var(--fs-sm)}
input,select,textarea{width:100%;background:var(--panel-2);border:1px solid var(--border-2);
  color:var(--text);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs);
  font-family:inherit;transition:border-color var(--t),box-shadow var(--t),background var(--t)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);background:var(--panel-3)}
input[type=checkbox]{width:auto;accent-color:var(--accent);vertical-align:-2px}
input[type=file]{padding:7px 10px;color:var(--muted);font-size:var(--fs-sm);cursor:pointer}
input[type=file]::file-selector-button{background:var(--panel-3);color:var(--text);
  border:1px solid var(--border-2);border-radius:6px;padding:5px 10px;margin-right:10px;
  font-family:inherit;font-size:var(--fs-xs);cursor:pointer}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
/* field label+control block */
.field{margin-bottom:var(--sp-3)}
/* horizontal group that wraps → stacks on small screens.
   flex-basis (not min-width) so inline style="flex:0" button cells collapse to content */
.inline{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-start}
.inline > div{flex:1 1 150px}
/* button/control toolbar — content-width, wraps as a row (never collapses to 1-per-line) */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;flex:0 0 auto}
.toolbar form{margin:0;display:inline-flex;align-items:center;gap:var(--sp-2)}

/* ---------------------------------------------------------------- tables ---- */
.table-scroll,.card > div[style*="overflow-x"]{ -webkit-overflow-scrolling:touch }
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.4px;
  background:var(--panel)}
tbody tr{transition:background var(--t)}
tbody tr:hover td{background:var(--panel-2)}
table input,table select{padding:7px 9px;font-size:var(--fs-sm)}
.mono-url{font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted);display:inline-block;
  max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* ------------------------------------------------------------------ tabs ---- */
.tabs{display:flex;gap:var(--sp-1);flex-wrap:wrap;border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-5);overflow-x:auto}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:11px 18px;font-size:var(--fs);font-weight:650;cursor:pointer;border-radius:var(--r-sm) var(--r-sm) 0 0;
  white-space:nowrap;transition:color var(--t),background var(--t)}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.tabpanel{display:none;animation:fade .2s ease}
.tabpanel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.maparrow{color:var(--accent);font-weight:800;padding:0 var(--sp-1)}

/* --------------------------------------------------------- pills + alerts --- */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.2px;vertical-align:middle}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.err{background:var(--err-soft);color:var(--err)}
.pill.muted{background:var(--panel-2);color:var(--muted)}
.flash{padding:13px 16px;border-radius:var(--r-md);margin-bottom:var(--sp-4);font-weight:600;
  display:flex;align-items:center;gap:var(--sp-2);border:1px solid transparent}
.flash.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.flash.error{background:var(--err-soft);border-color:var(--err);color:var(--err)}

/* -------------------------------------------------------------- feedback ---- */
.out{background:#080a14;border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);
  font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;white-space:pre-wrap;
  max-height:360px;overflow:auto;color:#aab2d5;margin-top:var(--sp-3)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ----------------------------------------------------------------- modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,6,14,.66);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;z-index:100;padding:var(--sp-6) var(--sp-4);overflow:auto}
.modal-backdrop.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--border-2);border-radius:var(--r-lg);
  width:100%;max-width:580px;box-shadow:var(--sh-lg);animation:modalIn .18s ease;margin:auto}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.modal__head h3{margin:0;font-size:var(--fs-lg)}
.modal__close{background:none;border:none;color:var(--muted);font-size:26px;line-height:1;
  cursor:pointer;width:auto;padding:0 4px}
.modal__close:hover{color:var(--text)}
.modal__body{padding:var(--sp-5);max-height:64vh;overflow:auto}
.modal__foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);
  display:flex;gap:var(--sp-3);justify-content:space-between;align-items:center;flex-wrap:wrap}

/* grouped form sections inside a modal */
.form-section{margin-bottom:var(--sp-5)}
.form-section:last-child{margin-bottom:0}
.form-section__title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;
  color:var(--accent);font-weight:800;margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--sp-2)}
.wipe-note{margin-top:var(--sp-2);padding:9px 12px;border-radius:var(--r-sm);font-size:var(--fs-sm);
  font-weight:600;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);
  display:flex;align-items:center;gap:var(--sp-2)}
.wipe-note.clean{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}

/* setting row with a toggle switch */
.setting{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:11px 0;border-top:1px solid var(--border);cursor:pointer}
.setting__name{font-weight:600;font-size:var(--fs);color:var(--text)}
.toggle{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle .track{position:absolute;inset:0;background:var(--panel-3);border:1px solid var(--border-2);
  border-radius:var(--r-pill);transition:var(--t)}
.toggle .track::before{content:"";position:absolute;height:18px;width:18px;left:2px;top:2px;
  background:var(--muted);border-radius:50%;transition:var(--t)}
.toggle input:checked + .track{background:var(--accent);border-color:var(--accent)}
.toggle input:checked + .track::before{transform:translateX(18px);background:#fff}

/* ---------------------------------------------------------------- wizard ---- */
.steps{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:var(--sp-2);padding:9px 14px;border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);font-weight:600;
  font-size:var(--fs-sm);white-space:nowrap}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--panel-3);color:var(--muted);font-size:var(--fs-xs);font-weight:800}
.step.active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.step.active .num{background:var(--accent);color:#fff}
.step.done{color:var(--ok)}
.step.done .num{background:var(--ok);color:#04120b}
.wizstep{display:none;animation:fade .2s ease}
.wizstep.active{display:block}
.wizard-nav{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}

/* ---------------------------------------------------------------- login ----- */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);width:100%;max-width:390px;box-shadow:var(--sh-lg)}
.login-card h1{text-align:center;font-size:var(--fs-xl);margin-bottom:var(--sp-1)}
.login-card .sub{text-align:center;margin-bottom:var(--sp-5)}

/* -------------------------------------------------------------- utilities --- */
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.gap-2{gap:var(--sp-2)}.flex-0{flex:0 0 auto}.flex-1{flex:1}
.nowrap{white-space:nowrap}.text-c{text-align:center}

/* -------------------------------------------------------------- responsive -- */
@media (max-width:1000px){
  :root{--nav-h:56px}
  .wrap{padding:0 var(--sp-4)}
  .page{padding:var(--sp-5) 0 var(--sp-6)}
  h1{font-size:var(--fs-xl)}
  .nav-toggle{display:flex}
  /* nav becomes a drawer under the header, revealed by the hamburger */
  .nav{position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column;align-items:stretch;
    gap:2px;background:var(--panel);border-bottom:1px solid var(--border);
    padding:var(--sp-3) var(--sp-4) var(--sp-4);box-shadow:var(--sh-md);
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform var(--t),opacity var(--t)}
  body.is-nav-open .nav{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:13px 14px;border-radius:var(--r-sm)}
  .nav__spacer{flex:0;height:1px;background:var(--border);margin:var(--sp-2) 0}
  .nav__user{border-radius:var(--r-sm);padding:12px 14px}
  .nav__logout{margin-top:var(--sp-2)}
  /* forms + layout stack */
  .inline{flex-direction:column}
  .inline > div{min-width:0;width:100%}
  .grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .card{padding:var(--sp-4);border-radius:var(--r-md)}
  .footer__inner{justify-content:center;text-align:center;height:auto;padding:var(--sp-4) 0}
}
@media (max-width:480px){
  .brand{font-size:var(--fs-md)}
  .btn{padding:10px 14px}
  h1{font-size:var(--fs-lg)}
}

/* -------------------------------------------------------- group cards ----- */
.grp-card{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--sp-3)}
.grp-card.validation-err{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.grp-card__head{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);display:flex;align-items:center}
.grp-card__body{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);padding:var(--sp-4)}
@media(max-width:900px){.grp-card__body{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grp-card__body{grid-template-columns:1fr}}
.grp-card__body label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}

/* -------------------------------------------------------- logo dropzone --- */
.logo-zone{display:flex;gap:var(--sp-3);align-items:flex-start}
.logo-zone input[type="text"]{flex:1}
.logo-drop{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--border-2);border-radius:var(--r-sm);padding:8px 14px;
  cursor:pointer;transition:border-color .15s,background .15s;font-size:var(--fs-xs);color:var(--muted);
  min-height:42px;white-space:nowrap}
.logo-drop:hover,.logo-drop.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.logo-drop input[type="file"]{display:none}
.logo-preview{display:flex;align-items:center;gap:var(--sp-2);margin-top:6px}
.logo-preview img{height:32px;border-radius:4px;background:var(--panel-3)}
.logo-preview .hint{margin:0}

/* --------------------------------------------------------- search-select -- */
/* -------------------------------------------------------- mapping rows --- */
.map-grid{display:flex;flex-direction:column;gap:var(--sp-3)}
.map-row{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.map-row__head{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-sm)}
.map-row__fields{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.map-row__fields label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
@media(max-width:1000px){.map-row__fields{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.map-row__fields{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------- search-select -- */
.ss{position:relative;min-width:160px}
.ss__display{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:9px 12px;color:var(--text);font-size:var(--fs-sm);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.ss__display::after{content:'▾';font-size:10px;color:var(--muted);flex-shrink:0}
.ss__display.placeholder{color:var(--muted)}
.ss__drop{display:none;position:absolute;left:0;right:0;top:100%;margin-top:2px;
  background:var(--panel-2);border:1px solid var(--border-2);border-radius:var(--r-sm);
  box-shadow:var(--sh-md);z-index:60;max-height:260px;overflow:hidden;
  flex-direction:column}
.ss.open .ss__drop{display:flex}
.ss__search{border:none;border-bottom:1px solid var(--border);background:var(--panel);
  color:var(--text);padding:9px 12px;font-size:var(--fs-sm);outline:none;width:100%;
  box-sizing:border-box}
.ss__search::placeholder{color:var(--faint)}
.ss__list{overflow-y:auto;max-height:220px;padding:4px 0}
.ss__opt{padding:7px 12px;cursor:pointer;font-size:var(--fs-sm);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss__opt:hover,.ss__opt.hl{background:var(--accent-soft)}
.ss__opt.sel{color:var(--accent)}
.ss__opt.hidden{display:none}
.ss__empty{padding:7px 12px;font-size:var(--fs-sm);color:var(--faint);font-style:italic}