/* Daylee OS · journal de la phase d'écoute. Polices du système : aucune ressource extérieure. */
:root { --creme: #fcf0e1; --papier: #fffaf3; --sable: #f2e6d2; --rouge: #9a2d2a; --nuit: #14102c; --t2: #5e5546; --t3: #8f8370;
  --vert: #4f7d68; --vert-voile: rgba(79,125,104,.14); --orange-texte: #a95c12; --orange-voile: rgba(217,130,43,.13); --ligne: rgba(20,16,44,.09);
  --f-display: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; --f-ui: system-ui, "Segoe UI", -apple-system, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--nuit); font: 15px/1.45 var(--f-ui); }
main { max-width: 1120px; margin: 0 auto; padding: 28px 20px 60px; }
h1, h2 { font-family: var(--f-display); margin: 0; line-height: 1.05; }
h1 { font-size: 38px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 800; margin: 26px 0 10px; }
h2 .muted { font-family: var(--f-ui); font-weight: 500; font-size: 13px; }
.flush { margin: 0; }
.brand { font-family: var(--f-display); font-weight: 800; color: var(--rouge); letter-spacing: .04em; font-size: 14px; }
.muted { color: var(--t2); } .small { font-size: 13px; }
.bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: 10px; }
.mode { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--vert-voile); color: var(--vert); }
.mode.on { background: var(--orange-voile); color: var(--orange-texte); }
.btn { height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(20,16,44,.16); background: var(--papier); font: 650 14px var(--f-ui); cursor: pointer; color: var(--nuit); }
.btn.primary { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn.ghost { border-color: transparent; background: none; color: var(--rouge); }
.btn.wide { width: 100%; height: 44px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.card { background: var(--papier); border: 1px solid var(--ligne); border-radius: 16px; padding: 14px 16px; }
.card b { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 800; }
.card .k { font-weight: 700; text-transform: capitalize; }
.card.off { opacity: .55; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sable); }
.pill.ok { background: var(--vert-voile); color: var(--vert); } .pill.ko { background: rgba(154,45,42,.12); color: var(--rouge); } .pill.wait { background: var(--orange-voile); color: var(--orange-texte); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { background: var(--sable); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--t2); }
tr.click { cursor: pointer; } tr.click:hover td { background: rgba(154,45,42,.04); }
.empty { padding: 18px; text-align: center; color: var(--t3); }
pre { white-space: pre-wrap; word-break: break-word; background: var(--nuit); color: #f5ead9; padding: 14px; border-radius: 12px; font-size: 12px; max-height: 60vh; overflow: auto; }
dialog { border: 0; border-radius: 18px; padding: 18px; width: min(820px, 94vw); background: var(--creme); }
dialog#pw { width: min(460px, 94vw); }
dialog::backdrop { background: rgba(20,16,44,.4); }
.panel { max-width: 400px; margin: 10vh auto; background: var(--papier); border: 1px solid var(--ligne); border-radius: 20px; padding: 26px; }
.panel.wide { max-width: 520px; margin-top: 5vh; }
.panel h1 { font-size: 30px; margin-top: 6px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; color: var(--t2); margin-top: 6px; }
input { height: 42px; border-radius: 11px; border: 1px solid rgba(20,16,44,.16); padding: 0 12px; font: 15px var(--f-ui); background: #fff; color: var(--nuit); }
input.code { font-size: 22px; letter-spacing: .3em; text-align: center; }
.err { color: var(--rouge); font-weight: 650; min-height: 20px; margin-top: 8px; font-size: 13.5px; }
.qr { display: block; width: 200px; height: 200px; margin: 8px auto; image-rendering: pixelated; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; background: var(--sable); padding: 6px 10px; border-radius: 8px; }
ol.steps { padding-left: 20px; margin: 10px 0; display: grid; gap: 4px; font-size: 14px; }