:root{
  --paper:#FBFBFD; --surface:#FFFFFF; --surface-2:#F2F4F8; --surface-3:#E9EDF4;
  --rule:#DFE4EE; --rule-soft:#EDF0F6;
  --ink:#14203A; --ink-soft:#4E5A73; --ink-faint:#676F84;
  --accent:#2B4E8C; --accent-soft:#E7EDF9;
  --bill:#0E6E5B; --bill-bg:#E3F1ED;
  --nobill:#9E5430; --nobill-bg:#F7EBE2;
  --warn:#8A6210; --warn-bg:#F8F0DB;
  --jira:#3A57A8; --jira-bg:#E8EDFA;
  --run:#1F6C8C; --run-bg:#E1F0F5;
  --dev:#6B4E9E; --dev-bg:#EFE9F8;
  --interne:#5A6478; --interne-bg:#E9EDF4;
  --shadow:0 1px 2px rgba(20,32,58,.06),0 10px 30px -18px rgba(20,32,58,.35);
  --shadow-lg:0 24px 60px -20px rgba(20,32,58,.35),0 2px 6px rgba(20,32,58,.08);
  --serif:"Zilla Slab",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F131B; --surface:#161C27; --surface-2:#1C2331; --surface-3:#242D3D;
    --rule:#2B3444; --rule-soft:#222A38;
    --ink:#E8ECF4; --ink-soft:#A8B3C5; --ink-faint:#7C8699;
    --accent:#8FB2EA; --accent-soft:#1B2740;
    --bill:#5FC5A9; --bill-bg:#12302A;
    --nobill:#E09A6E; --nobill-bg:#332116;
    --warn:#DDB865; --warn-bg:#312712;
    --jira:#9DB4EE; --jira-bg:#1A2340;
    --run:#6FC3DF; --run-bg:#102A34;
    --dev:#B69AE4; --dev-bg:#241B38;
    --interne:#9AA5B8; --interne-bg:#242D3D;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0F131B; --surface:#161C27; --surface-2:#1C2331; --surface-3:#242D3D;
  --rule:#2B3444; --rule-soft:#222A38;
  --ink:#E8ECF4; --ink-soft:#A8B3C5; --ink-faint:#7C8699;
  --accent:#8FB2EA; --accent-soft:#1B2740;
  --bill:#5FC5A9; --bill-bg:#12302A;
  --nobill:#E09A6E; --nobill-bg:#332116;
  --warn:#DDB865; --warn-bg:#312712;
  --jira:#9DB4EE; --jira-bg:#1A2340;
  --run:#6FC3DF; --run-bg:#102A34;
  --dev:#B69AE4; --dev-bg:#241B38;
  --interne:#9AA5B8; --interne-bg:#242D3D;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
[hidden]{display:none !important;}
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);border:1px solid var(--rule);border-radius:3px;padding:.05em .3em;}

/* ---------- login ---------- */
.login-screen{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 20px;
  background:repeating-linear-gradient(to bottom,transparent 0 33px,var(--rule-soft) 33px 34px),var(--paper);
}
.login-card{
  width:100%;max-width:410px;background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--shadow-lg);padding:32px 30px 26px;display:flex;flex-direction:column;gap:20px;
}
.brand{display:flex;flex-direction:column;gap:5px;}
.brand .mark{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.brand h1{font-family:var(--serif);font-size:2rem;font-weight:700;margin:0;letter-spacing:-.015em;}
.brand p{margin:0;color:var(--ink-soft);font-size:.92rem;}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.82rem;font-weight:600;}
.field .help{font-size:.78rem;color:var(--ink-faint);line-height:1.45;}
.input{width:100%;padding:9px 11px;background:var(--surface);border:1px solid var(--rule);border-radius:3px;font-size:.92rem;}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft);}
.input.mono{font-family:var(--mono);font-size:.85rem;}
.form-stack{display:flex;flex-direction:column;gap:15px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);
  font-size:.89rem;font-weight:500;
}
.btn:hover{background:var(--surface-2);}
.btn:disabled{opacity:.5;cursor:default;}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-primary:hover{background:var(--ink);opacity:.9;}
.btn-block{width:100%;}
.btn-sm{padding:5px 10px;font-size:.82rem;}
.btn-ghost{border-color:transparent;background:transparent;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{color:var(--nobill);border-color:var(--rule);}

.error-msg{font-size:.83rem;color:var(--nobill);margin:0;}
.proto-note{font-size:.78rem;color:var(--ink-faint);border-top:1px solid var(--rule-soft);padding-top:14px;margin:0;line-height:1.5;}

/* ---------- shell ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 20px;
}
.topbar .logo{font-family:var(--serif);font-weight:700;font-size:1.05rem;padding:12px 0;white-space:nowrap;border:none;background:transparent;color:inherit;cursor:pointer;}
.topbar .logo:hover{opacity:.75;}
nav.tabs{display:flex;gap:2px;flex:1 1 auto;flex-wrap:wrap;}
nav.tabs button{
  background:transparent;border:none;padding:14px 12px 12px;font-size:.88rem;font-weight:500;
  color:var(--ink-soft);border-bottom:2px solid transparent;
}
nav.tabs button:hover{color:var(--ink);}
nav.tabs button.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600;}
.who{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--ink-soft);padding:8px 0;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:.72rem;font-weight:600;font-family:var(--mono);}
.role-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
main{padding:26px 20px 80px;max-width:1280px;margin:0 auto;}
.view{display:flex;flex-direction:column;gap:20px;}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;}
.view-head h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;margin:0;letter-spacing:-.01em;}
.view-head .sub{color:var(--ink-soft);font-size:.9rem;margin:0;max-width:72ch;}
.spacer{flex:1 1 auto;}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--surface-2);}
.panel-head h3{margin:0;font-size:.95rem;font-weight:600;}
.panel-head .meta{font-size:.82rem;color:var(--ink-soft);}
.panel-body{padding:16px;display:flex;flex-direction:column;gap:14px;}
.panel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:11px 16px;border-top:1px solid var(--rule);background:var(--surface-2);}
.scroller{overflow-x:auto;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:20px;}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-size:.88rem;}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle;}
thead th{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--surface);}
tbody tr:hover{background:var(--surface-2);}
tfoot td{font-weight:600;background:var(--surface-2);border-bottom:none;border-top:1px solid var(--rule);}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
thead th.num{text-align:right;}
/* En-têtes triables : la flèche dit l'état, la colonne triée se détache. */
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{color:var(--ink);}
th.sortable::after{content:"↕";margin-left:5px;font-size:9px;opacity:.3;}
th.sorted{color:var(--accent);}
th.sorted.asc::after{content:"↑";opacity:1;}
th.sorted.desc::after{content:"↓";opacity:1;}

/* Croisement fiche × collaborateur : une colonne par personne. On laisse le
   tableau déborder et défiler plutôt que d'écraser les libellés, en gardant
   la fiche visible à gauche pendant le défilement. */
table.pivot{width:auto;min-width:100%;}
table.pivot th:first-child,table.pivot td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);}
table.pivot tfoot td:first-child{background:var(--surface-2);}
.muted{color:var(--ink-faint);}
.empty-state{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:.88rem;}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap;font-weight:500;}
.chip.bill{background:var(--bill-bg);color:var(--bill);}
.chip.nobill{background:var(--nobill-bg);color:var(--nobill);}
.chip.warn{background:var(--warn-bg);color:var(--warn);}
.chip.jira{background:var(--jira-bg);color:var(--jira);}
.chip.neutral{background:var(--surface-3);color:var(--ink-soft);}
.chip.plain{background:transparent;color:var(--ink-faint);padding-left:0;}
.chip.nat-run{background:var(--run-bg);color:var(--run);}
.chip.nat-dev{background:var(--dev-bg);color:var(--dev);}
.chip.nat-interne{background:var(--interne-bg);color:var(--interne);}

/* Barre de filtres : une ligne d'outils, une ligne de facettes repliables, et
   les filtres actifs rappelés en clair. Sept lignes empilées noyaient
   l'essentiel — ici tout tient en deux lignes, et rien n'est perdu de vue. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--rule);}
.toolbar .grow{flex:1 1 auto;}
.toolbar .input[type=date]{max-width:152px;}
.facets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--surface-2);}
.facets .sep{width:1px;align-self:stretch;background:var(--rule);margin:0 2px;}
.facet{position:relative;}
.facet > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);
  font-size:.85rem;color:var(--ink-soft);white-space:nowrap;
}
.facet > summary::-webkit-details-marker{display:none;}
.facet > summary::after{content:"▾";font-size:9px;opacity:.55;}
.facet > summary:hover{color:var(--ink);border-color:var(--ink-faint);}
.facet[open] > summary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.facet.active > summary{border-color:var(--accent);color:var(--accent);font-weight:500;}
.facet[open].active > summary{color:var(--paper);}
.facet > summary .n{
  font-family:var(--mono);font-size:.7rem;background:var(--accent);color:#fff;
  border-radius:999px;padding:1px 6px;font-variant-numeric:tabular-nums;
}
.facet-panel{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;
  min-width:min(330px,86vw);max-width:min(620px,90vw);max-height:340px;overflow:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow-lg);padding:11px;
}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid var(--rule);}
.active-filters .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:3px;}
.ftag{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 5px 3px 11px;}
.ftag button{border:none;background:transparent;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0 4px;border-radius:999px;opacity:.6;}
.ftag button:hover{opacity:1;background:rgba(127,127,127,.22);}

/* La répartition d'un coup d'oeil : la barre porte, la légende nomme. */
.split{display:flex;height:10px;background:var(--surface-3);}
.split i{display:block;height:100%;}
.split i.run{background:var(--run);}
.split i.dev{background:var(--dev);}
.split i.interne{background:var(--interne);}
.split-legend{display:flex;flex-wrap:wrap;gap:6px 20px;padding:10px 16px 14px;font-size:.8rem;color:var(--ink-soft);}
.split-legend span{display:inline-flex;align-items:center;gap:7px;}
.split-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}
.split-legend b{font-variant-numeric:tabular-nums;color:var(--ink);}
.reflink{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);}
.reflink b{color:var(--jira);font-weight:600;}
a{color:var(--accent);text-underline-offset:2px;}

/* ---------- semainier ---------- */
.weekbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.weekbar .label{font-weight:600;font-size:.95rem;min-width:200px;}
.sheet-table{min-width:960px;}
.sheet-table td.daycell{padding:0;}
.daycell input{width:100%;border:none;background:transparent;padding:9px 10px;text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.88rem;}
.daycell input::placeholder{color:var(--ink-faint);opacity:.6;}
.daycell input:focus{background:var(--accent-soft);outline:none;box-shadow:inset 0 0 0 1px var(--accent);}
.daycell.today{background:var(--warn-bg);}
.daycell.weekend input{color:var(--ink-faint);}
.daycell.future input{cursor:not-allowed;}
.rowinfo{display:flex;flex-direction:column;gap:3px;min-width:250px;}
.rowinfo .top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.rowinfo .label{line-height:1.3;}
.iconbtn{border:1px solid transparent;background:transparent;border-radius:3px;padding:2px 6px;font-size:.8rem;color:var(--ink-faint);}
.iconbtn:hover{background:var(--surface-3);color:var(--ink);}
.quickbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.key{font-family:var(--mono);font-size:.78rem;padding:4px 9px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;background:var(--surface);}
.key:hover{background:var(--surface-3);}
.hint{font-size:.8rem;color:var(--ink-soft);}
.progress-line{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;}
.meter{position:relative;height:6px;background:var(--surface-3);min-width:120px;flex:0 1 200px;overflow:hidden;border-radius:2px;display:inline-block;vertical-align:middle;}
.meter span{position:absolute;inset:0 auto 0 0;background:var(--bill);}
.meter span.mid{background:var(--warn);}
.meter span.over{background:var(--nobill);}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule);}
.tile{background:var(--surface);padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;}
.tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.tile .v{font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums;}
.tile .d{font-size:.78rem;color:var(--ink-soft);}
.tile.alert .v{color:var(--nobill);}
.tile{border-top:2px solid transparent;}
.tile.t-run{border-top-color:var(--run);}
.tile.t-dev{border-top-color:var(--dev);}
.tile.t-interne{border-top-color:var(--interne);}
.tile.t-bill{border-top-color:var(--bill);}
.tile.t-nobill{border-top-color:var(--nobill);}
.tile.t-total{border-top-color:var(--accent);}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;width:100%;}
.filters .field{gap:4px;}
.filters .field label{font-size:.75rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);font-weight:500;}
.filters select,.filters input{min-width:150px;}

/* ---------- barre de filtres ---------- */
.filterbar{display:flex;flex-direction:column;gap:0;}
.frow{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:11px 16px;border-bottom:1px solid var(--rule-soft);
}
.frow:last-child{border-bottom:none;}
.frow > .flabel{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);min-width:112px;flex:0 0 auto;padding-top:2px;
}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
/* Grandit pour remplir la ligne seulement dans une .frow horizontale : posée
   telle quelle dans un conteneur flex vertical (.panel-body, .field), le
   flex-grow s'appliquait à la hauteur et étirait chaque puce en ovale. */
.frow .chips{flex:1 1 320px;}
.fchip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--rule);background:var(--surface);
  border-radius:999px;padding:4px 12px;font-size:.83rem;line-height:1.4;
  white-space:nowrap;
}
.fchip:hover{background:var(--surface-2);}
.fchip .n{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.fchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500;}
.fchip.on .n{color:var(--paper);opacity:.7;}
.fchip.on.bill{background:var(--bill);border-color:var(--bill);color:#fff;}
.fchip.on.nobill{background:var(--nobill);border-color:var(--nobill);color:#fff;}
.fchip.on.nat-run{background:var(--run);border-color:var(--run);color:#fff;}
.fchip.on.nat-dev{background:var(--dev);border-color:var(--dev);color:#fff;}
.fchip.on.nat-interne{background:var(--interne);border-color:var(--interne);color:#fff;}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
.seg button{
  background:var(--surface);border:none;padding:5px 12px;font-size:.83rem;
  border-right:1px solid var(--rule);color:var(--ink-soft);
}
.seg button:last-child{border-right:none;}
.seg button:hover{background:var(--surface-2);color:var(--ink);}
.seg button.on{background:var(--ink);color:var(--paper);font-weight:500;}
.frow .input{max-width:190px;}
.frow .grow{flex:1 1 auto;}
.summary-line{
  padding:11px 16px;background:var(--surface-2);border-top:1px solid var(--rule);
  font-size:.86rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
}
.summary-line b{color:var(--ink);}

/* ---------- histogramme journalier ---------- */
.spark{display:flex;align-items:flex-end;gap:2px;height:56px;padding:14px 16px 0;}
.spark .bar{flex:1 1 0;min-width:2px;background:var(--accent-soft);position:relative;border-radius:1px 1px 0 0;}
.spark .bar > i{position:absolute;inset:auto 0 0 0;background:var(--bill);border-radius:1px 1px 0 0;}
.spark-axis{
  display:flex;justify-content:space-between;padding:6px 16px 14px;
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
}

/* ---------- search ---------- */
.search-results{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);max-height:360px;overflow-y:auto;}
.sr{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:var(--surface);padding:11px 13px;cursor:pointer;text-align:left;border:none;width:100%;}
.sr:hover{background:var(--surface-2);}
.sr .main{display:flex;flex-direction:column;gap:3px;flex:1 1 240px;}
.sr .t{font-size:.89rem;}
.sr .m{font-size:.78rem;color:var(--ink-faint);font-family:var(--mono);}
.group-label{background:var(--surface-2);padding:6px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(12,18,30,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;}
.modal{width:100%;max-width:700px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;}
.modal.narrow{max-width:460px;}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:7px;}
.modal-head h3{margin:0;font-family:var(--serif);font-size:1.25rem;font-weight:600;}
.modal-head .sub{font-size:.88rem;color:var(--ink-soft);margin:0;}
.modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:18px;}
.modal-foot{padding:14px 22px;border-top:1px solid var(--rule);background:var(--surface-2);display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.option{border:1px solid var(--rule);background:var(--surface);}
.option.selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.option-head{display:flex;gap:11px;align-items:flex-start;padding:14px 16px;cursor:pointer;}
.option-head input{margin-top:4px;accent-color:var(--accent);}
.option-head .txt{display:flex;flex-direction:column;gap:3px;}
.option-head .t{font-weight:600;font-size:.94rem;}
.option-head .d{font-size:.83rem;color:var(--ink-soft);line-height:1.45;}
.option-body{padding:14px 16px 16px 43px;display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--rule-soft);}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;}
.pick-list{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);max-height:220px;overflow-y:auto;}
.pick{display:flex;gap:10px;align-items:flex-start;background:var(--surface);padding:10px 12px;cursor:pointer;}
.pick:hover{background:var(--surface-2);}
.pick input{margin-top:3px;accent-color:var(--accent);}
.pick .txt{display:flex;flex-direction:column;gap:2px;}
.pick .t{font-size:.88rem;}
.pick .d{font-size:.78rem;color:var(--ink-faint);}
.notice{display:flex;gap:10px;padding:11px 13px;background:var(--warn-bg);color:var(--warn);font-size:.85rem;line-height:1.45;border-left:3px solid currentColor;}
.notice.info{background:var(--accent-soft);color:var(--accent);}
.notice.bad{background:var(--nobill-bg);color:var(--nobill);}
.notice.good{background:var(--bill-bg);color:var(--bill);}
.notice b{font-weight:600;}
.notice code{background:transparent;border:none;padding:0;color:inherit;}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(400px,90vw);}
.toast{background:var(--ink);color:var(--paper);padding:11px 15px;font-size:.86rem;box-shadow:var(--shadow-lg);border-radius:3px;line-height:1.45;}
.toast.good{background:var(--bill);color:#fff;}
.toast.bad{background:var(--nobill);color:#fff;}

/* ---------- misc ---------- */
.loading{padding:40px 16px;text-align:center;color:var(--ink-faint);font-size:.88rem;}
.kv{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:6px 20px;font-size:.88rem;}
.kv dt{color:var(--ink-faint);}
.kv dd{margin:0;}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.pwd-out{font-family:var(--mono);font-size:1rem;background:var(--surface-2);border:1px solid var(--rule);padding:8px 12px;border-radius:3px;user-select:all;}

@media (max-width:760px){
  main{padding:20px 14px 70px;}
  .topbar{padding:0 14px;}
  .kv{grid-template-columns:1fr;}
}