:root{
  --paper:#FAF8F2; --paper-alt:#F1ECE1;
  --ink:#1E2A44; --ink-soft:#4B5768;
  --rule:#DCD3BE;
  --accent:#2E6E62; --accent-deep:#1F4E45;
  --warn:#A8672B; --warn-bg:#F7ECDA;
  --error:#A8433A; --error-bg:#F8E6E2;
  --success:#3E7A52; --success-bg:#E8F1E9;
  --info:#39597A; --info-bg:#E7EEF3;
  --mail:#8C3B3B;
  --tab-total:#52606D; --tab-fra:#9C4A5C; --tab-mat:#2E6E62; --tab-all:#45608C;
  --tab-ang:#B8792B; --tab-ocom:#6B7A3A; --tab-os:#7A5C99; --tab-emails:#8C3B3B;
}
*{box-sizing:border-box;}
/* `display:flex` sur .modal/.centered écraserait sinon l'attribut [hidden],
   laissant un calque invisible intercepter tous les clics. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; line-height:1.5;}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}
h1,h2,h3{font-family:'Source Serif 4',serif; letter-spacing:-.01em; margin:0;}
h1{font-size:clamp(24px,3.4vw,32px); font-weight:700;}
h2{font-size:20px; font-weight:600;}
h3{font-size:16px; font-weight:600; margin-bottom:10px;}
code{font-family:'IBM Plex Mono',monospace; background:var(--paper-alt); padding:1px 5px; border-radius:2px; font-size:.92em;}
.muted{color:var(--ink-soft); font-size:14px;}
.hint{font-size:12.5px; color:var(--ink-soft);}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 8px;}

/* auth */
.centered{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{max-width:420px; width:100%;}
.auth-card label{display:block; font-size:13px; color:var(--ink-soft); margin:14px 0 0;}
.auth-card input{width:100%; margin-top:5px;}
.auth-card button{margin-top:18px; width:100%;}

/* layout */
.topbar{background:var(--ink); color:#fff; position:sticky; top:0; z-index:20;}
.topbar-inner{max-width:1400px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.brand{display:flex; flex-direction:column; line-height:1.2;}
.brand-title{font-family:'Source Serif 4',serif; font-weight:600; font-size:17px;}
.brand-sub{font-size:11.5px; opacity:.7;}
.tabs{display:flex; gap:2px; flex:1; flex-wrap:wrap;}
.tab{background:none; border:none; color:#fff; opacity:.65; font-family:inherit; font-size:13.5px; padding:7px 12px; border-radius:2px; cursor:pointer;}
.tab:hover{opacity:.9; background:rgba(255,255,255,.08);}
.tab.active{opacity:1; background:rgba(255,255,255,.15);}
.whoami{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.role-pill{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; border:1px solid rgba(255,255,255,.35); border-radius:2px; padding:1px 6px;}
.wrap{max-width:1400px; margin:0 auto; padding:24px 20px 60px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--ink);}
.panel-actions{display:flex; align-items:center; gap:10px;}
.foot{max-width:1400px; margin:0 auto; padding:0 20px 30px; font-size:12px; color:var(--ink-soft);}

/* controls */
input[type=text],input[type=email],input[type=password],select,textarea{
  font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; padding:8px 9px;
  border:1px solid var(--rule); border-radius:2px; background:#fff; color:var(--ink);
}
input.wide,select.wide{min-width:260px;}
.filter-input{width:150px;} .filter-input.small{width:110px;}
button{font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:500; border:none; border-radius:2px; padding:9px 18px; cursor:pointer;}
button.primary{background:var(--accent); color:#fff;}
button.primary:hover:not(:disabled){background:var(--accent-deep);}
button:disabled{background:var(--rule); color:#8a8478; cursor:not-allowed;}
button.ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--rule);}
button.ghost:hover{border-color:var(--ink-soft); color:var(--ink);}
.topbar button.ghost{color:#fff; border-color:rgba(255,255,255,.35);}
.topbar button.ghost:hover{background:rgba(255,255,255,.12); color:#fff;}
button.small{font-size:12px; padding:5px 10px;}
button.linkish{background:none; border:none; padding:0; color:var(--accent); font-size:12.5px; text-decoration:underline; cursor:pointer;}
label.inline{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.lbl{font-size:12.5px; font-weight:500;}
.form-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.form-row.tight{margin-top:12px;}
.card{border:1px solid var(--rule); background:#fff; border-radius:2px; padding:16px; margin-bottom:16px;}
.toolbar{display:flex; gap:12px; align-items:center; margin-bottom:10px;}

/* callouts */
.callout{border-radius:2px; padding:13px 15px; font-size:13.5px; margin-bottom:12px; border:1px solid;}
.callout.error{background:var(--error-bg); border-color:#E3B7AF; color:#7A2E27;}
.callout.warn{background:var(--warn-bg); border-color:#E6C68C; color:#7A4F1F;}
.callout.success{background:var(--success-bg); border-color:#B7D6BE; color:#2A5B3B;}
.callout.info{background:var(--info-bg); border-color:#B9CBDA; color:#2C4A63;}
.callout ul{margin:8px 0 0; padding-left:18px;} .callout li{margin-bottom:3px;}
.callout .ctitle{font-weight:600; font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:3px;}

/* import slots */
#globalDrop{border:1.5px dashed var(--rule); border-radius:2px; background:var(--paper-alt); padding:20px; text-align:center; cursor:pointer; font-size:14px; color:var(--ink-soft); margin:14px 0;}
#globalDrop.drag{border-color:var(--accent); background:#EDF3EF; color:var(--accent-deep);}
.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;}
.slot{position:relative; border:1px solid var(--rule); border-top:5px solid var(--slot-color,var(--ink-soft)); background:#fff; border-radius:2px; padding:11px 10px 9px; cursor:pointer; min-height:76px; display:flex; flex-direction:column; justify-content:space-between;}
.slot.drag{border-color:var(--slot-color); box-shadow:0 0 0 2px var(--slot-color) inset;}
.slot .code{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500; letter-spacing:.06em; color:var(--slot-color,var(--ink-soft));}
.slot .fname{font-size:11px; color:var(--ink-soft); margin-top:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.slot.filled .fname{color:var(--ink);}
.slot .status{position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--rule);}
.slot.filled .status{background:var(--success);}
.pending-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:13px;}

/* class picker */
.class-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:2px 8px; max-height:170px; overflow-y:auto; border:1px solid var(--rule); border-radius:2px; background:#fff; padding:8px 10px; margin-top:6px;}
.class-picker label{display:flex; align-items:center; gap:5px; font-size:12.5px; padding:2px 0; cursor:pointer; white-space:nowrap;}
.class-picker label.hiddenByFilter{display:none;}

/* manual list */
.manual-list{margin-top:14px;}
.manual-empty{font-size:13px; color:var(--ink-soft); font-style:italic;}
.manual-group{padding:10px 0; border-bottom:1px solid var(--rule);}
.manual-group:last-child{border-bottom:none;}
.manual-group-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px;}
.manual-group-head .who{font-size:13.5px;}
.manual-group-head .who em{color:var(--ink-soft);}
.manual-group-head button.remove{border:1px solid var(--rule); background:#fff; color:var(--error); font-size:12px; padding:4px 9px; border-radius:2px; cursor:pointer; flex-shrink:0;}
.manual-group-head button.remove:hover{background:var(--error-bg); border-color:#E3B7AF;}
.manual-chips{display:flex; flex-wrap:wrap; gap:5px;}
.manual-chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; background:var(--paper-alt); border:1px solid var(--rule); border-radius:2px; padding:3px 4px 3px 8px;}
.manual-chip .ctype{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft);}
.manual-chip .cmaitre{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--accent-deep); font-weight:500;}
.manual-chip button{border:none; background:none; color:var(--error); font-size:13px; line-height:1; padding:0 3px; cursor:pointer;}
.mtag{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.04em; background:var(--paper-alt); color:var(--ink-soft); padding:2px 6px; border-radius:2px; margin-left:4px;}

/* separator pref */
.sep-pref{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding:9px 12px; background:var(--paper-alt); border:1px solid var(--rule); border-radius:2px;}
.sep-pref code{background:#fff; border:1px solid var(--rule);}

/* table */
.tablewrap{border:1px solid var(--rule); border-radius:2px; overflow:auto; max-height:70vh; background:#fff;}
table.preview{border-collapse:collapse; width:100%; font-size:12.5px;}
table.preview thead th{position:sticky; top:0; z-index:2; background:var(--ink); color:#fff; text-align:left; padding:9px 10px; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;}
table.preview td{padding:9px 10px; border-bottom:1px solid var(--rule); vertical-align:top;}
table.preview tbody tr:nth-child(even){background:var(--paper-alt);}
table.preview td.classe{font-weight:600; white-space:nowrap;}
table.preview td.nb{text-align:center; font-family:'IBM Plex Mono',monospace;}
table.preview td.principal{font-weight:600;}
td.mailcell{white-space:nowrap;}
.mailrow{display:flex; align-items:center; gap:5px; margin-bottom:5px;}
.mailrow:last-child{margin-bottom:0;}
a.mailchip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:#fff; background:var(--mail); padding:4px 8px; border-radius:2px; text-decoration:none; white-space:nowrap; opacity:.92;}
a.mailchip:hover{opacity:1;}
span.mailchip.empty{display:inline-flex; font-size:11.5px; background:var(--rule); color:var(--ink-soft); padding:4px 8px; border-radius:2px;}
button.copychip{border:1px solid var(--rule); background:#fff; color:var(--ink-soft); font-size:11px; padding:3px 6px; border-radius:2px; cursor:pointer; line-height:1;}
button.copychip:hover{border-color:var(--ink-soft); color:var(--ink);}
button.copychip.copied{border-color:var(--success); color:var(--success);}

/* doc */
.doc{background:#fff; border:1px solid var(--rule); border-radius:2px; padding:20px 24px; font-size:14px; max-width:80ch;}
.doc h3{font-family:'Source Serif 4',serif; font-size:17px; margin:20px 0 8px;}
.doc h3:first-child{margin-top:0;}
.doc p{margin:0 0 10px;}
.doc ul{margin:0 0 12px; padding-left:20px;}
.doc li{margin-bottom:4px;}
.doc .placeholder{color:var(--ink-soft); font-style:italic;}
.doc-edit{width:100%; max-width:80ch; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.6;}

/* users */
.user-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:13.5px; flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-actions{display:flex; gap:6px; align-items:center;}

/* modal */
.modal{position:fixed; inset:0; background:rgba(30,42,68,.45); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50;}

#flash .callout{margin-bottom:16px;}