/* Agent OS design kit — "OS" register (applications).
   Extracted from the existing Agent OS command centre and second-brain pages.
   Une seule source : toute app de la plateforme d'enseignement inline ce fichier.
   Deux faces : Archivo (affichage, titres, grands chiffres) + IBM Plex Mono (tout le reste, 13px). */
:root{
  --accent:#12d7b6; --accent-dim:#0b7f6b;
  --bg:#000; --panel:#0b1013; --panel2:#101414; --line:#1c2322; --line2:#2b3634;
  --ink:#e9f2f0; --dim:#8b9997; --faint:#525f5d;
  --warn:#f0a63c; --bad:#ff5f56; --good:#12d7b6;
  /* anneaux du second brain */
  --skills:#12d7b6; --memory:#b98bff; --routines:#f0a63c; --apps:#5eb0ff; --core:#ffffff;
  /* états d'un nœud de compétence (plateforme d'enseignement) */
  --st0:#2b3634; --st1:#5e6fb8; --st2:#f0a63c; --st3:#12d7b6; --st4:#ffffff;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

/* ---- grille OS : gauche / scène / droite ---- */
.os{display:grid;grid-template-columns:290px minmax(0,1fr) 372px;height:100vh}
@media (max-width:1280px){.os{grid-template-columns:250px minmax(0,1fr) 320px}}
@media (max-width:1024px){body{overflow:auto}.os{grid-template-columns:1fr;height:auto}.left,.right{border:0;border-bottom:1px solid var(--line)}}
.col{overflow-y:auto;overflow-x:hidden;padding:18px 0}
.left{border-right:1px solid var(--line)}
.right{border-left:1px solid var(--line)}
.stage{position:relative;display:flex;flex-direction:column;min-width:0;overflow-y:auto;padding:22px 26px 40px}

/* ---- têtes de bloc ---- */
.head{display:flex;align-items:center;gap:9px;padding:0 18px 12px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.head .ic{color:var(--accent);font-size:13px;line-height:1}
.head .act{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:3px 8px;font-weight:400}
.head .act:hover{color:var(--accent);border-color:var(--accent)}
.head .meta{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);font-weight:400;letter-spacing:.06em;text-transform:none}
section.blk{padding-bottom:24px}
section.blk + section.blk{border-top:1px solid var(--line);padding-top:18px}
.sect{font-size:9.5px;letter-spacing:.13em;color:var(--faint);padding:15px 18px 7px;text-transform:uppercase}

/* ---- marque ---- */
.brand{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;display:flex;align-items:center;gap:11px}
.brand .hex{color:var(--accent);font-size:20px}
.brand .b2{color:var(--accent);font-weight:700}
.brand .l{font-weight:600;color:var(--dim);letter-spacing:.16em;font-size:13px;text-transform:uppercase}
.who{font-size:11px;color:var(--dim);margin-top:5px;letter-spacing:.03em}

/* ---- rangée "micro app" ---- */
.app{display:flex;align-items:center;gap:11px;padding:9px 18px;text-decoration:none;color:inherit;width:100%;text-align:left}
.app:hover{background:var(--panel2)}
.app .box{width:27px;height:27px;flex:none;border:1px solid var(--line2);border-radius:5px;display:grid;place-items:center;color:var(--accent);font-size:12px}
.app .t{font-size:12px;color:var(--ink);display:block}
.app .s{font-size:10px;color:var(--faint);margin-top:1px;line-height:1.35;display:block}
.app .go{margin-left:auto;color:var(--faint);font-size:13px}
.app:hover .go,.app.cur .go{color:var(--accent)}
.app.cur{background:var(--panel2);box-shadow:inset 2px 0 0 var(--accent)}
.app.done .box{border-color:var(--accent);color:var(--accent)}

/* ---- grand chiffre ---- */
.big{display:flex;align-items:baseline;gap:11px;padding:0 18px}
.big .n{font-family:var(--display);font-weight:800;font-size:38px;color:var(--accent);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.big .n.warn{color:var(--warn)} .big .n.bad{color:var(--bad)}
.big .l{font-size:10px;color:var(--dim);line-height:1.4;letter-spacing:.05em;text-transform:uppercase}

/* ---- rangée à point ---- */
.row{display:flex;align-items:center;gap:9px;padding:5px 18px;font-size:11.5px}
.row:hover{background:var(--panel2)}
.row .d{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.row .t{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .v{margin-left:auto;color:var(--faint);font-size:10.5px;flex:none;font-variant-numeric:tabular-nums}

/* ---- cartes ---- */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 10px 8px}
.card:hover{border-color:var(--line2)}
.deck{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px}

/* ---- table de routines ---- */
.rt{width:100%;border-collapse:collapse;font-size:10.5px}
.rt th{text-align:left;font-weight:400;font-size:8.5px;letter-spacing:.13em;color:var(--faint);padding:0 0 7px;border-bottom:1px solid var(--line);text-transform:uppercase}
.rt th:first-child,.rt td:first-child{padding-left:18px}
.rt th:last-child,.rt td:last-child{padding-right:18px;text-align:right}
.rt td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top}
.rt tr:last-child td{border-bottom:0}
.rt .tm{color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
.rt .nm{color:var(--ink)}
.rt .st{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase}
.st.fired,.st.ok{color:var(--accent)} .st.next,.st.warn{color:var(--warn)} .st.queued{color:var(--faint)} .st.missed,.st.bad{color:var(--bad)}

/* ---- barre de mix ---- */
.mixbar{display:flex;gap:2px;padding:4px 18px 0}
.mixbar i{height:7px;border-radius:1px;display:block}

/* ---- segmenté, champ de recherche, panneau de contrôle (brain.html) ---- */
.seg{display:flex;gap:4px}
.seg button{flex:1;border:1px solid var(--line2);border-radius:6px;padding:5px 0;font-size:10px;color:var(--dim);letter-spacing:.06em}
.seg button[aria-pressed=true]{background:var(--accent);color:#022;border-color:var(--accent);font-weight:600}
input[type=search],input[type=text],input[type=number],input[type=email],input[type=password],input[type=url],select,textarea{width:100%;background:#0e1417;border:1px solid var(--line2);border-radius:7px;padding:8px 10px;font-size:12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:70px;resize:vertical}

/* ---- boutons ---- */
.btn{border:1px solid var(--line2);border-radius:6px;padding:7px 13px;font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.btn:hover{color:var(--accent);border-color:var(--accent)}
.btn.primary{border-color:var(--accent);color:var(--accent);background:var(--bg)}
.btn.primary:hover{background:var(--accent);color:#022}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{color:var(--dim);border-color:var(--line2);background:none}

/* ---- toast, vide ---- */
.empty{color:var(--faint);font-size:11px;padding:0 18px;font-style:italic}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--accent);color:#022;padding:8px 17px;border-radius:20px;font-size:11.5px;font-weight:600;transition:transform .2s;pointer-events:none;z-index:99}
.toast.on{transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}