:root { --bg:#f4f5f7; --card:#fff; --ink:#1d2433; --muted:#6b7385; --line:#dde1e8; --brand:#0b5cad; --ok:#1c7c45; --bad:#b3261e; --soon:#a15c00; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 system-ui,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:10px 16px; background:var(--brand); color:#fff; }
header a { color:#fff; text-decoration:none; }
header nav { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
header nav a { padding:6px 10px; border-radius:6px; }
header nav a.on, header nav a:hover { background:rgba(255,255,255,.2); }
header .who { font-size:13px; }
header .who a { text-decoration:underline; }
main { max-width:1100px; margin:0 auto; padding:16px; }
main.narrow { max-width:720px; }
main.login { max-width:360px; margin-top:8vh; }
h1 { font-size:22px; margin:8px 0 14px; }
h2 { font-size:16px; margin:26px 0 8px; color:var(--brand); }
a { color:var(--brand); }
.crumbs, .muted { color:var(--muted); font-size:13px; }
table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); display:block; overflow-x:auto; }
table.list tbody { display:table; width:100%; }
table.list th, table.list td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
table.list tr.off td { color:var(--muted); }
td.actions { white-space:nowrap; text-align:right; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; color:#fff; background:var(--muted); white-space:nowrap; }
.tag.ok { background:var(--ok); } .tag.bad { background:var(--bad); } .tag.soon { background:var(--soon); }
p.info, p.warn { padding:10px 12px; border-radius:6px; background:#e7f3ea; border:1px solid #b9dcc4; }
p.warn { background:#fdecea; border-color:#f3b9b4; }
label { display:block; font-size:13px; color:var(--muted); margin:8px 0; }
input, select, textarea { display:block; width:100%; margin-top:3px; padding:8px 9px; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:6px; }
textarea { font-family:ui-monospace,Consolas,monospace; font-size:12px; word-break:break-all; }
form.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 16px; background:var(--card); border:1px solid var(--line); padding:6px 14px; border-radius:6px; }
form.grid .wide { grid-column:1/-1; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0 0 0 6px; }
form.inline input { width:auto; margin:0; }
button, a.button { font:inherit; padding:7px 13px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
button.danger { color:var(--bad); border-color:var(--bad); margin-top:18px; }
.codebox { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.codebox b { font:700 20px ui-monospace,Consolas,monospace; letter-spacing:.06em; }
pre { background:#fff; border:1px solid var(--line); padding:10px; overflow-x:auto; }
/* double authentification */
input.otp { font:600 20px ui-monospace,Consolas,monospace; letter-spacing:.2em; width:9em; }
input.otp.small { font-size:14px; letter-spacing:.1em; width:7.5em; }
.enroll ol { margin:0 0 12px; padding-left:20px; }
.enroll li { margin:6px 0; }
.qr { margin:10px 0; }
.qr img { display:block; width:220px; height:220px; border:1px solid var(--line); border-radius:6px; }
b.secret { font:700 15px ui-monospace,Consolas,monospace; letter-spacing:.05em; white-space:nowrap; }
.recovery { border-color:var(--soon); background:#fff8ec; margin-bottom:12px; }
ul.codes { columns:2; list-style:none; padding:0; margin:8px 0; font:600 16px ui-monospace,Consolas,monospace; }
ul.codes li { padding:3px 0; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
form.card { display:flex; flex-direction:column; gap:6px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
form.card label { width:100%; margin:2px 0; }
form.card button.danger { margin-top:4px; }
form.policy { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:10px 14px; margin-bottom:10px; }
@media print { header, h1, h2, p:not(.keep), form, table, .grid2, .enroll, button { display:none !important; } .recovery { display:block !important; border:0; } .recovery p { display:block !important; } }
/* versions */
table.list tr.sub td { background:#fafbfc; padding-top:0; }
form.relnotes { display:grid; grid-template-columns:1fr auto auto auto; gap:8px; align-items:end; }
form.relnotes textarea { font:inherit; font-size:13px; word-break:normal; }
form.relnotes label { margin:0; }
@media (max-width:800px) { form.relnotes { grid-template-columns:1fr; } }
code { font-size:12px; background:#eef0f3; padding:1px 4px; border-radius:3px; word-break:break-all; }
/* cloud de gestion */
main.wide { max-width:1280px; }
form.filters { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:flex-end; margin:0 0 12px; }
form.filters label { margin:0; min-width:180px; }
form.filters input[name=q] { min-width:260px; }
form.filters .dates { display:inline-flex; gap:10px; align-items:flex-end; }
form.filters .dates[hidden] { display:none; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:6px 0; }
.kpis > div { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.kpis span { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.kpis b { font-size:24px; display:inline-block; margin-top:2px; }
.delta { font-size:13px; font-weight:600; margin-left:6px; }
.delta.up { color:var(--ok); } .delta.down { color:var(--bad); }
svg.chart { width:100%; height:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px; }
table.bars td.bar { width:45%; min-width:120px; }
table.bars td.bar svg { width:100%; height:12px; display:block; }
table.list .num, th.num, td.num { text-align:right; white-space:nowrap; }
table.facts th { width:14%; }
.grid2 section { min-width:0; }
fieldset { border:1px solid var(--line); border-radius:6px; padding:6px 12px; }
legend { font-size:13px; color:var(--muted); }
label.check { display:inline-flex; gap:6px; align-items:center; margin:4px 16px 4px 0; color:var(--ink); }
label.check input { display:inline; width:auto; margin:0; }
.pager { display:flex; gap:16px; align-items:center; }
main.wide .grid2 { grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr)); gap:4px 20px; }
table.bars td:first-child { width:34%; }
details.dropdown { position:relative; margin:0 0 8px; }
details.dropdown summary { display:inline-block; cursor:pointer; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card); font-size:13px; }
details.dropdown form { position:absolute; z-index:5; min-width:280px; max-height:360px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
details.dropdown label.check { display:flex; margin:6px 0; }