/* ============================================================
   B Studio Control Center — feuille de style
   Reprend exactement les tokens et composants de la maquette
   validée (maquette-dashboard.html), complétée pour les pages
   Projets / Alertes / Mises à jour / Logs / Paramètres / Login.
   ============================================================ */
:root{
  --bg:#0b1118; --card:#121a24; --card-hover:#16202c; --border:#1e2936;
  --ink:#e8eef5; --ink-2:#8a97a5; --ink-3:#5b6672;
  --accent:#2f81f7; --accent-dim:#1c4d94;
  --ok:#2ea36b; --warn:#d99a2b; --err:#d64545; --off:#5b6672;
  --r:10px; --sidebar:216px; --drawer:380px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 Inter,-apple-system,"Segoe UI",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.hidden{display:none !important}

/* ---------- LAYOUT ---------- */
.app{display:flex;height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.content{flex:1;overflow-y:auto;padding:20px 24px 40px}

/* ---------- SIDEBAR ---------- */
.sidebar{width:var(--sidebar);flex-shrink:0;background:#0d141d;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.brand-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#1a5fd0);display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff}
.brand b{font-size:14px;letter-spacing:.2px;display:block}
.brand span{font-size:11px;color:var(--ink-2)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:13.5px}
.nav a svg{width:16px;height:16px;flex-shrink:0}
.nav a.active{background:rgba(47,129,247,.13);color:var(--ink)}
.nav a.active svg{color:var(--accent)}
.nav a:hover:not(.active){background:var(--card);color:var(--ink)}
.nav .sep{height:1px;background:var(--border);margin:10px 6px}
.nav .badge{margin-left:auto;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px}
.sidebar-foot{margin-top:auto;padding:10px;font-size:11px;color:var(--ink-3)}

/* ---------- HEADER ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:16px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.topbar h1{font-size:16px;font-weight:650;letter-spacing:.2px}
.kpis{display:flex;gap:10px;margin-left:auto}
.kpi{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:8px 14px}
.kpi .dot{width:9px;height:9px;border-radius:50%}
.kpi b{font-size:17px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--ink-2)}

/* ---------- LISTE DES APPAREILS ---------- */
.list-head{display:flex;align-items:center;margin:2px 2px 12px}
.list-head h2{font-size:13px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:8px;padding:7px 13px;font-size:13px;font-weight:550}
a.btn{color:var(--ink);text-decoration:none}
.btn:hover{background:var(--card-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#3d8bf8}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.list-head .btn{margin-left:auto}
.devices{display:flex;flex-direction:column;gap:10px}

.device{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--off);border-radius:var(--r);padding:12px 16px;cursor:pointer;transition:background .12s}
.device:hover{background:var(--card-hover)}
.device.selected{outline:1.5px solid var(--accent);outline-offset:-1px}
.device.st-online{border-left-color:var(--ok)}
.device.st-warning{border-left-color:var(--warn)}
.device.st-offline{border-left-color:var(--err)}
.device.st-stopped{border-left-color:var(--off)}
.device.st-pending{border-left-color:var(--accent)}
.device.st-disabled{border-left-color:var(--off);opacity:.6}

.thumb{width:88px;height:50px;border-radius:6px;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden;background-color:#0a0f15}
.thumb.dead::after{content:"—";position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,17,24,.72);color:var(--ink-3);font-size:16px}

.d-id{width:190px;min-width:0}
.d-id .row1{display:flex;align-items:center;gap:8px}
.d-id .code{font-weight:700;font-size:14px;letter-spacing:.3px;white-space:nowrap}
.d-id .place{color:var(--ink-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-id .proj{color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.status .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.st-online  .status{color:var(--ok)}   .st-online  .status .dot{background:var(--ok);box-shadow:0 0 6px rgba(46,163,107,.55)}
.st-warning .status{color:var(--warn)} .st-warning .status .dot{background:var(--warn)}
.st-offline .status{color:var(--err)}  .st-offline .status .dot{background:var(--err)}
.st-stopped .status{color:var(--off)}  .st-stopped .status .dot{background:var(--off)}
.st-pending .status{color:var(--accent)} .st-pending .status .dot{background:var(--accent)}
.st-disabled .status{color:var(--off)} .st-disabled .status .dot{background:var(--off)}

.d-stats{display:flex;gap:26px;margin-left:auto;margin-right:8px}
.stat{min-width:86px}
.stat .lb{font-size:11px;color:var(--ink-3);margin-bottom:1px}
.stat .vl{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .vl.muted{color:var(--ink-2);font-weight:500}

.d-actions{display:flex;gap:6px;flex-shrink:0}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink-2);font-size:13px}
.icon-btn:hover{background:var(--card-hover);color:var(--ink)}
.icon-btn.play:hover{color:var(--ok);border-color:var(--ok)}

/* ---------- DRAWER ---------- */
.drawer{width:0;flex-shrink:0;background:#0e1620;border-left:1px solid var(--border);overflow:hidden;transition:width .18s ease;display:flex;flex-direction:column}
.drawer.open{width:var(--drawer)}
.drawer-inner{width:var(--drawer);display:flex;flex-direction:column;height:100%;overflow-y:auto}
.drawer-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#0e1620;z-index:2}
.drawer-head .code{font-weight:700;font-size:15px}
.drawer-head .status{margin-left:2px}
.drawer-close{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);font-size:15px}
.drawer-close:hover{background:var(--card);color:var(--ink)}

.drawer-inner > *{flex-shrink:0}
.live{margin:14px 18px 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.live .frame{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative;background-color:#0a0f15}
.live .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live .frame .tag{position:absolute;left:10px;top:10px;background:rgba(11,17,24,.78);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;z-index:2}
.live .frame .tag .rec{width:7px;height:7px;border-radius:50%;background:var(--err);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.live .frame.dead{display:grid;place-items:center;color:var(--ink-3);font-size:13px;text-align:center;padding:10px}
.live-start{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,17,24,.35);color:#fff;font-size:13px;font-weight:650;letter-spacing:.3px;z-index:1;transition:background .15s}
.live-start:hover{background:rgba(11,17,24,.55)}
.live-start span{background:rgba(11,17,24,.78);border:1px solid var(--border);border-radius:8px;padding:8px 16px}
.live-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--card);border-top:1px solid var(--border)}
.live-bar .lb{font-size:12px;color:var(--ink-2);margin-right:auto}
.seg{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.seg button{padding:4px 12px;font-size:12px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:var(--accent);color:#fff}
.seg button:disabled{opacity:.45;cursor:not-allowed}

.info{margin:16px 18px 0;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:6px 14px}
.info .ln,.sys-grid .card .ln{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.info .ln:last-child,.sys-grid .card .ln:last-child{border-bottom:none}
.info .ln .k,.sys-grid .card .ln .k{color:var(--ink-2)}
.info .ln .v,.sys-grid .card .ln .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.info .ln .v.ok,.sys-grid .card .ln .v.ok{color:var(--ok)} .info .ln .v.warn,.sys-grid .card .ln .v.warn{color:var(--warn)} .info .ln .v.err,.sys-grid .card .ln .v.err{color:var(--err)}

.actions{margin:16px 18px 0;display:flex;flex-direction:column;gap:8px}
.actions .row{display:flex;gap:8px}
.actions .btn{flex:1;justify-content:center;padding:9px 8px}
.actions .btn.ghost-danger{color:var(--err)}
.actions .btn.ghost-danger:hover{border-color:var(--err);background:rgba(214,69,69,.08)}
.actions .btn.disabled{opacity:.45;cursor:not-allowed}
.hint{font-size:11px;color:var(--ink-3);text-align:center;margin-top:2px}
.link{color:var(--accent);font-size:12px;text-align:center;padding:4px}
.link:hover{text-decoration:underline}

.hist{margin:18px 18px 30px}
.hist h3{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.hist .ev{display:flex;gap:12px;padding:6px 0;font-size:12.5px}
.hist .t{color:var(--ink-3);font-variant-numeric:tabular-nums;width:42px;flex-shrink:0}
.hist .ev .dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--ink-3)}
.hist .ev.ok .dot{background:var(--ok)} .hist .ev.warn .dot{background:var(--warn)} .hist .ev.err .dot{background:var(--err)}
.hist .empty{color:var(--ink-3);font-size:12.5px}

/* ---------- MODAL ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,8,12,.62);display:none;place-items:center;z-index:50}
.overlay.show{display:grid}
.modal{width:min(400px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px}
.modal.wide{width:min(480px,calc(100vw - 40px))}
.modal h3{font-size:15px;margin-bottom:8px}
.modal p{color:var(--ink-2);font-size:13px;margin-bottom:18px}
.modal .row{display:flex;gap:10px;justify-content:flex-end}
.modal .form-error{color:var(--err);font-size:12.5px;margin:-8px 0 12px}
.modal .fields{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}

/* Champs de formulaire */
.field{display:flex;flex-direction:column;gap:5px}
.field > span{font-size:12px;font-weight:600;color:var(--ink-2)}
.field small{font-size:11px;color:var(--ink-3)}
.input{background:#0d141d;border:1px solid var(--border);border-radius:8px;padding:8px 11px;font:inherit;color:var(--ink);width:100%}
.input:focus{outline:none;border-color:var(--accent)}
.input::placeholder{color:var(--ink-3)}

/* Code d'enregistrement (affiché une seule fois) */
.regcode{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.regcode .code-big{flex:1;background:#0d141d;border:1px dashed var(--accent);border-radius:10px;padding:12px;text-align:center;font-size:20px;font-weight:800;letter-spacing:2.5px;font-variant-numeric:tabular-nums;user-select:all}
.warn-note{color:var(--warn) !important;font-weight:600}
.cmdline{background:#0d141d;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);margin-bottom:16px;overflow-x:auto;white-space:pre}

/* Diagnostic */
.diag-status{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin-bottom:14px}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.diag-lines{background:#0d141d;border:1px solid var(--border);border-radius:8px;padding:4px 12px;margin-bottom:16px;max-height:300px;overflow-y:auto}
.diag-lines .dln{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.diag-lines .dln:last-child{border-bottom:none}
.diag-lines .dln .dk{color:var(--ink-2)}
.diag-lines .dln .dv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.diag-lines .dln .dv.ok{color:var(--ok)} .diag-lines .dln .dv.err{color:var(--err)}
.diag-lines .empty{color:var(--ink-3);font-size:12.5px;padding:8px 0}

/* ---------- TOASTS ---------- */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none;max-width:calc(100vw - 30px)}
.toast{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:550;box-shadow:0 8px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(14px);transition:opacity .22s,transform .22s;max-width:100%}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:var(--err)}
.toast.ok{border-color:var(--ok)}

/* ---------- PAGES (toolbars, chips, tables) ---------- */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .input{width:280px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--card);border-radius:99px;padding:5px 13px;font-size:12.5px;font-weight:550;color:var(--ink-2)}
.chip:hover{background:var(--card-hover);color:var(--ink)}
.chip.on{background:rgba(47,129,247,.15);border-color:var(--accent);color:var(--ink)}

.tbl-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);font-weight:600;text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl td.muted{color:var(--ink-2)}
.tbl td .code{font-weight:700}
.tbl .empty{color:var(--ink-3);text-align:center;padding:26px 14px}

/* Pastille de sévérité / d'état (toujours accompagnée d'un libellé) */
.sev{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.sev .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--off)}
.sev.ok{color:var(--ok)} .sev.ok .dot{background:var(--ok)}
.sev.warn{color:var(--warn)} .sev.warn .dot{background:var(--warn)}
.sev.err{color:var(--err)} .sev.err .dot{background:var(--err)}
.sev.inf{color:var(--ink-2)} .sev.inf .dot{background:var(--ink-2)}
.sev.off{color:var(--off)} .sev.off .dot{background:var(--off)}
.sev.accent{color:var(--accent)} .sev.accent .dot{background:var(--accent)}

/* Liste d'alertes */
.alerts-list{display:flex;flex-direction:column;gap:10px}
.alert-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;flex-wrap:wrap}
.alert-card .a-main{flex:1;min-width:200px}
.alert-card .a-msg{font-weight:600;font-size:13.5px}
.alert-card .a-meta{color:var(--ink-3);font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
.alert-card .a-code{font-weight:700;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.empty-state{color:var(--ink-3);text-align:center;padding:40px 20px;font-size:13px}

/* Paramètres */
.settings-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;max-width:620px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:20px}
.settings-foot{display:flex;gap:10px;align-items:center}
.settings-foot .btn.logout{margin-left:auto;color:var(--err)}
.settings-foot .btn.logout:hover{border-color:var(--err);background:rgba(214,69,69,.08)}
.page-sec{margin-top:26px}
.page-sec h2{font-size:13px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}

/* Lien vers le projet (lignes caméra + drawer) */
.proj-link{color:inherit;text-decoration:none}
.proj-link:hover{color:var(--accent);text-decoration:underline}

/* Lignes de tableau cliquables (page Projets) */
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--card-hover)}

/* ---------- PAGE PROJET ---------- */
.proj-page{max-width:900px;margin:0 auto}
.back-link{display:inline-block;color:var(--ink-2);text-decoration:none;font-size:13px;margin-bottom:12px}
.back-link:hover{color:var(--ink)}
.proj-title{font-size:19px;font-weight:700;margin-bottom:6px}
.proj-sub{color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;font-variant-numeric:tabular-nums}
.proj-sub .sep-dot{color:var(--ink-3)}
.proj-sub .cam-link{color:var(--ink);font-weight:700;background:none;padding:0;font-size:13px}
.proj-sub .cam-link:hover{color:var(--accent);text-decoration:underline}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px}
.pcard h3{font-size:14px;margin-bottom:10px}
.pcard .desc{color:var(--ink-2);font-size:13px;margin-bottom:14px;max-width:660px}
.pcard-sub{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 8px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.share-row .input{flex:1;min-width:220px}
.share-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.ghost-danger{color:var(--err)}
.btn.ghost-danger:hover{border-color:var(--err);background:rgba(214,69,69,.08)}
.vrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.vrow:last-child{border-bottom:none}
.v-main{flex:1;min-width:200px}
.v-title{font-weight:600;font-size:13.5px}
.v-meta{color:var(--ink-3);font-size:12px;margin-top:1px;font-variant-numeric:tabular-nums}
.v-actions{display:flex;gap:6px;flex-wrap:wrap}
.v-player{margin:2px 0 10px}
.v-player video{width:100%;max-height:420px;border-radius:8px;background:#000;display:block}
.muted-note{color:var(--ink-3);font-size:13px}
.checking{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:13px;padding:6px 0}

/* Menu contextuel (•••) */
.menu{position:fixed;z-index:55;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:5px;box-shadow:0 10px 34px rgba(0,0,0,.55);display:flex;flex-direction:column;min-width:180px}
.menu button{text-align:left;padding:8px 11px;border-radius:7px;font-size:13px;color:var(--ink)}
.menu button:hover{background:var(--card-hover)}
.menu button.danger{color:var(--err)}
.menu button.danger:hover{background:rgba(214,69,69,.08)}

/* ---------- LOGIN ---------- */
.login{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:70;padding:20px}
.login-card{width:min(360px,100%);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.login-logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#1a5fd0);display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;margin:0 auto}
.login-card h1{font-size:16px;text-align:center}
.login-sub{font-size:12.5px;color:var(--ink-2);text-align:center;margin-top:-8px}
.login-error{color:var(--err);font-size:12.5px;text-align:center;font-weight:600}
.login-btn{justify-content:center;padding:9px}

/* ---------- RESPONSIVE ---------- */
.burger{display:none}
@media (max-width:1100px){ .d-stats{gap:16px} .stat{min-width:0} }
@media (max-width:960px){
  .sidebar{position:fixed;z-index:40;height:100%;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .burger{display:grid}
  .drawer.open{position:fixed;right:0;top:0;height:100%;width:100%;z-index:45}
  .drawer-inner{width:100%}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .content{padding:14px 12px 40px}
  .device{flex-wrap:wrap;gap:10px 14px}
  .d-id{width:auto;flex:1}
  .d-stats{width:100%;margin:0;justify-content:space-between;order:4}
  .d-actions{order:3}
  .kpis{width:100%;margin-left:0}
  .kpi{flex:1;justify-content:center}
  .toolbar .input{width:100%}
}

/* ============================================================
   Page Système + timeline des commandes (P5)
   ============================================================ */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.sys-grid .card {
  background: var(--card, #121a24);
  border: 1px solid var(--border, #1e2936);
  border-radius: 12px;
  padding: 14px 16px;
}
.sys-grid .card h2 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink2, #8a97a5);
  margin-bottom: 10px;
}
.sys-grid .card code { font-size: 12px; }

/* Jauge horizontale simple — aucune dépendance graphique. */
.meter {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin: 6px 0 12px;
}
.meter .fill { display: block; height: 100%; border-radius: 3px; }
.meter .fill.ok   { background: var(--ok, #2ea36b); }
.meter .fill.warn { background: #d08b28; }
.meter .fill.err  { background: #d0453b; }

/* Timeline d'une commande */
.cmd-card {
  background: var(--card, #121a24);
  border: 1px solid var(--border, #1e2936);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.cmd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cmd-steps { list-style: none; margin: 0; padding: 0 0 0 4px; }
.cmd-steps li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0 3px 14px;
  border-left: 2px solid var(--border, #1e2936);
  position: relative;
}
.cmd-steps li::before {
  content: '';
  position: absolute;
  left: -4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink2, #8a97a5);
}
.cmd-steps li:last-child::before { background: var(--accent, #2f81f7); }
.cmd-steps .t {
  color: var(--ink2, #8a97a5);
  font-variant-numeric: tabular-nums;
  min-width: 54px;
}

/* Saisie du code de liaison : gros caractères, chiffres alignés. */
.code-input {
  font-size: 26px;
  letter-spacing: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.alt-method {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-2);
}
.alt-method summary { cursor: pointer; }
.alt-method p { margin: 10px 0; }

/* Pastille d'état de liaison */
.pair-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pair-state.unpaired { color: var(--ink-2); }
.pair-state.pairing  { color: #d08b28; }
.pair-state.paired   { color: var(--ok); }
.pair-state.revoked  { color: var(--err); }
.pair-state.disabled { color: #5b6672; }

/* ============================================================
   PAGE PROJET — visionneuse unique + 3 cartes
   Charte dark existante conservée : mêmes variables, mêmes rayons.
   ============================================================ */

/* ---------- Visionneuse ---------- */
.viewer {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  margin: 18px 0 16px;
}
.viewer:fullscreen { border-radius: 0; border: none; display: flex; flex-direction: column; }
.viewer:fullscreen .viewer-stage { flex: 1; aspect-ratio: auto; }

.viewer-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #05080c center/cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.viewer-stage video,
.viewer-stage img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.viewer-stage video.hidden, .viewer-stage img.hidden { display: none; }

.viewer-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(8, 12, 18, .78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--ink);
  font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  pointer-events: none;
}

/* Bouton Play central */
.viewer-play {
  position: absolute;
  width: 74px; height: 74px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(10, 15, 22, .62);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  transition: transform .12s ease, background .12s ease;
}
.viewer-play:hover { background: rgba(47, 129, 247, .9); transform: scale(1.06); }
.viewer-play svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.viewer-play.hidden { display: none; }

/* Message central (aucune vidéo, erreur, connexion live…) */
.viewer-overlay {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 10px;
  text-align: center; padding: 24px;
  background: linear-gradient(rgba(5, 8, 12, .55), rgba(5, 8, 12, .78));
}
.viewer-overlay.hidden { display: none; }
.viewer-overlay.small { background: rgba(5, 8, 12, .45); }
.vo-title { font-size: 17px; font-weight: 600; color: var(--ink); }
.vo-sub { font-size: 13.5px; color: var(--ink-2); max-width: 420px; }
.viewer-overlay .btn { justify-self: center; margin-top: 4px; }

/* ---------- Barre de contrôle ---------- */
.viewer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #0d141c;
  border-top: 1px solid var(--border);
}
.viewer-bar.hidden { display: none; }
.vb-btn {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--ink); padding: 5px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; min-width: 30px;
}
.vb-btn:hover { background: rgba(255, 255, 255, .08); }
.vb-btn svg { width: 20px; height: 20px; fill: currentColor; }
.vb-time {
  font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vb-seek {
  flex: 1; height: 16px; position: relative; cursor: pointer;
  display: flex; align-items: center; touch-action: none;
}
.vb-seek::before {
  content: ''; position: absolute; left: 0; right: 0; height: 4px;
  background: rgba(255, 255, 255, .16); border-radius: 2px;
}
.vb-seek-fill {
  position: absolute; left: 0; height: 4px; width: 0;
  background: var(--accent); border-radius: 2px;
}
.vb-seek-dot {
  position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(47, 129, 247, .25);
}
.vb-vol { width: 78px; accent-color: var(--accent); }

/* ---------- Les trois cartes ---------- */
.pv-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.pv-card {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer; text-align: left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pv-card:hover { transform: translateY(-2px); }
.pv-card.on { border-color: currentColor; }
/* Une teinte par usage, discrète — cohérente avec la charte sombre. */
.pv-card.general { background: linear-gradient(140deg, #12233b, #101a26); }
.pv-card.general:hover, .pv-card.general.on { border-color: #2f81f7; }
.pv-card.daily   { background: linear-gradient(140deg, #221a3b, #121525); }
.pv-card.daily:hover, .pv-card.daily.on { border-color: #7c5cf0; }
.pv-card.live    { background: linear-gradient(140deg, #102c22, #0f1c18); }
.pv-card.live:hover, .pv-card.live.on { border-color: #2ea36b; }

.pvc-ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); font-size: 19px;
}
.pvc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pvc-txt b { font-size: 13px; letter-spacing: .3px; }
.pvc-txt small { font-size: 12.5px; color: var(--ink-2); }
.pvc-arrow {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); font-size: 14px;
}

/* ---------- Panneau déplié ---------- */
.pv-panel:empty { display: none; }
.pv-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.pv-panel h3 { font-size: 15px; margin-bottom: 6px; }
.pv-panel .pcard-sub { margin-top: 18px; }

/* Sélecteur de journées */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 12px;
}
.day-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: #0f1720;
  color: var(--ink); cursor: pointer; text-align: left;
}
.day-item:hover { border-color: #7c5cf0; }
.day-item.on { border-color: #7c5cf0; background: #1a1630; }
.day-date { font-weight: 600; font-size: 13.5px; flex: 1; }
.day-meta { font-size: 12px; color: var(--ink-2); }
.day-play { color: #7c5cf0; font-size: 13px; }

/* Live View + partage côte à côte */
.live-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.live-state { margin: 6px 0 8px; }
.live-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.live-actions .hidden { display: none; }
.vlist { margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pv-cards { grid-template-columns: repeat(2, 1fr); }
  .pv-cards .pv-card:last-child { grid-column: 1 / -1; }
  .live-cols { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .pv-cards { grid-template-columns: 1fr; }
  .pv-cards .pv-card:last-child { grid-column: auto; }
  .vb-vol { display: none; }
  .viewer-play { width: 58px; height: 58px; }
  .viewer-play svg { width: 26px; height: 26px; }
  .day-grid { grid-template-columns: 1fr; }
}


/* ── Bandeau de statistiques en direct (page projet) ─────────────────────── */
.proj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 14px 0 16px; }
.pstat { background: var(--panel, #131a23); border: 1px solid var(--border, #1e2936);
  border-radius: 10px; padding: 10px 12px; }
.pstat-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted, #8a97a5); margin-bottom: 4px; }
.pstat-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pstat-v.ok { color: #2ea36b; } .pstat-v.warn { color: #d08b28; }
.pstat-v.err { color: #d0453b; } .pstat-v.rec { color: #2ea36b; }


/* ── Sections permanentes de la page projet (ex-cartes à déplier) ────────── */
.pv-section { margin-top: 18px; }
.pvs-head { display: flex; align-items: center; gap: 10px; font-size: 13px;
  letter-spacing: .8px; color: var(--muted, #8a97a5); margin-bottom: 10px; }
.pvs-head b { color: var(--ink, #e8eef5); letter-spacing: .8px; }
.pvs-head .pvc-ico { font-size: 16px; }


/* ── Bande « photos récentes » (page projet) ─────────────────────────────── */
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin; }
.ps-item { position: relative; flex: 0 0 auto; width: 148px; aspect-ratio: 16/9;
  border: 1px solid var(--border, #1e2936); border-radius: 8px; overflow: hidden;
  padding: 0; background: #0d141c; cursor: pointer; }
.ps-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-item:hover { border-color: var(--accent, #2f81f7); }
.ps-time { position: absolute; right: 4px; bottom: 4px; font-size: 10px;
  font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: rgba(6, 10, 16, .75); color: #dfe7ef; }
.pvs-note { margin-left: 10px; font-size: 11px; color: var(--muted, #8a97a5);
  text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ============================================================
   Console caméra (#/devices/:id) — tout B Studio, à distance
   ============================================================ */
.cc-page{max-width:1000px;margin:0 auto}
.cc-head{margin-bottom:12px}
.cc-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cc-title .code{font-size:20px;font-weight:800;letter-spacing:.2px}
.cc-title-actions{margin-left:auto;display:flex;gap:8px}
.cc-sub{color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cc-sub .sep-dot{color:var(--ink-3)}
.cc-alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cc-alert{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:13px;font-weight:600}
.cc-alert .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cc-alert.warn{border-color:rgba(217,154,43,.5)} .cc-alert.warn .dot{background:var(--warn)}
.cc-alert.err{border-color:rgba(214,69,69,.6)} .cc-alert.err .dot{background:var(--err)}
.cc-alert small{margin-left:auto;color:var(--ink-3);font-weight:500}

/* Une carte par ligne, centrées, même largeur : la page se lit de haut en bas. */
.cc-grid{display:flex;flex-direction:column;gap:18px}
.cc-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 22px 22px;min-width:0;box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.cc-head{text-align:center}
.cc-title{justify-content:center}
.cc-sub{justify-content:center}
.cc-title-actions{margin-left:0;width:100%;justify-content:center;margin-top:8px}
.cc-card-head b{font-size:13px}
.cc-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cc-actions{justify-content:center;gap:10px;margin-top:14px}
.cc-actions .btn{min-width:150px;padding:9px 14px}
.cc-info{margin:10px 0 0}
.cc-frame{max-height:560px}
.cc-live-bar{justify-content:center}
.cc-live-bar .lb{margin-right:0;width:100%;text-align:center;margin-bottom:4px}
.cc-card-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cc-card-head b{font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-2)}
.cc-card-head .cc-ico{font-size:15px}
.cc-note{color:var(--ink-3);font-size:12px;margin-left:4px}
.cc-note a{color:var(--accent);text-decoration:none} .cc-note a:hover{text-decoration:underline}
.cc-refresh{margin-left:auto;padding:4px 9px;font-size:14px;line-height:1}
.cc-refresh.cc-inline{margin-left:8px;padding:2px 7px;font-size:12px}
.cc-h3{font-size:13.5px;font-weight:650;margin:16px 0 6px;display:flex;align-items:center}
.cc-h3:first-of-type{margin-top:8px}
.cc-offline{margin:-4px 0 10px;color:var(--warn)}
.cc-error{color:var(--err);font-size:12.5px;margin:8px 0 0;font-weight:600}

/* Visuel */
.cc-frame{position:relative;aspect-ratio:16/9;max-height:520px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0a0f15 center/cover no-repeat;cursor:pointer}
.cc-frame.dead{cursor:default;display:grid;place-items:center}
.cc-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.cc-dead{color:var(--ink-3);font-size:13px;text-align:center;padding:10px}
.cc-tag{position:absolute;left:12px;top:12px;background:rgba(11,17,24,.78);border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px;z-index:2}
.cc-tag .rec{width:7px;height:7px;border-radius:50%;background:var(--err);animation:blink 1.2s infinite}
.cc-frame-time{position:absolute;right:12px;bottom:10px;background:rgba(11,17,24,.7);border-radius:6px;padding:3px 9px;font-size:11.5px;color:var(--ink-2);z-index:2}
.cc-live-bar{display:flex;align-items:center;gap:10px;padding:10px 2px 0;flex-wrap:wrap}
.cc-live-bar .lb{font-size:12.5px;color:var(--ink-2);margin-right:auto}
.cc-strip-head{display:flex;align-items:baseline;gap:10px;margin:16px 0 8px}
.cc-strip-head b{font-size:11.5px;letter-spacing:.6px;color:var(--ink-3)}
.cc-strip-head small{color:var(--ink-3);font-size:12px}

/* Cartes d'état */
.cc-stats{margin-bottom:12px}
.cc-info{margin:8px 0 0;padding:2px 12px}
.cc-info code{font-size:12px;color:var(--ink)}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cc-actions .btn{justify-content:center}
.cc-check{flex-direction:row;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink-2)}
.cc-check input{margin-top:3px}

/* Rendu */
.cc-render{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#0d141d}
.cc-render.run{border-color:var(--accent)}
.cc-render-head{font-size:13px;margin-bottom:6px}
.cc-render .meter{margin:6px 0}

/* Système */
.cc-meters{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;margin-bottom:6px}
.cc-meter-k{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-bottom:4px}
.cc-meter-k b{color:var(--ink);font-variant-numeric:tabular-nums}
.cc-meter-k b.warn{color:var(--warn)} .cc-meter-k b.err{color:var(--err)}
.cc-maint{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.cc-maint-it{display:flex;align-items:center;gap:8px;font-size:12.5px}
.cc-maint-it .dot{width:7px;height:7px;border-radius:50%;background:var(--off);flex-shrink:0}
.cc-maint-it.ok .dot{background:var(--ok)} .cc-maint-it.warn .dot{background:var(--warn)} .cc-maint-it.err .dot{background:var(--err)}
.cc-maint-it small{color:var(--ink-3);margin-left:auto}

/* Historique */
.cc-hist-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cc-hist{margin:0}
.cc-cmds{display:flex;flex-direction:column;gap:4px}
.cc-cmd{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.cc-cmd:last-child{border-bottom:none}
.cc-cmd .t{color:var(--ink-3);font-variant-numeric:tabular-nums;width:42px;flex-shrink:0}
.cc-cmd small{color:var(--ink-3);flex-basis:100%;padding-left:52px}
.cc-cmds .empty{color:var(--ink-3);font-size:12.5px}
.cc-log{background:#0d141d;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:420px;overflow:auto;white-space:pre-wrap;margin-bottom:14px;color:var(--ink-2)}

@media (max-width:1000px){
  .cc-hist-cols{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cc-meters{grid-template-columns:1fr}
  .cc-title-actions{margin-left:0;width:100%}
}

/* ============================================================
   Sécurité : connexion (2FA, Google) et page « Mon compte »
   ============================================================ */
.login-or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12px;margin:14px 0 10px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--border)}
.login-google{width:100%;justify-content:center;gap:10px;padding:10px;text-decoration:none;font-weight:600}
.login-card .field.hidden{display:none}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:22px}
.acct-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.acct-card h3{font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.acct-card .desc{color:var(--ink-2);font-size:12.5px;margin-bottom:14px}
.acct-card .fields{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.acct-card .row{display:flex;gap:8px;flex-wrap:wrap}
.acct-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;border:1px solid var(--border)}
.acct-state.on{color:var(--ok);border-color:rgba(46,163,107,.5)}
.acct-state.off{color:var(--ink-3)}
.qr-box{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:10px 0 14px}
.qr-box .qr{background:#fff;padding:10px;border-radius:10px;line-height:0}
.qr-box .qr svg{width:180px;height:180px;display:block}
.qr-box .qr-help{flex:1;min-width:200px;font-size:12.5px;color:var(--ink-2)}
.qr-box code{display:block;margin-top:8px;font:12px ui-monospace,Menlo,monospace;color:var(--ink);word-break:break-all;background:#0d141d;padding:6px 8px;border-radius:6px}
.recovery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0 12px}
.recovery code{font:13px ui-monospace,Menlo,monospace;background:#0d141d;border:1px solid var(--border);border-radius:6px;padding:6px 10px;text-align:center;letter-spacing:.5px}
.users-wrap{margin-top:8px}
.users-wrap .tbl td{vertical-align:middle}
.users-wrap .tbl .btn{padding:4px 9px;font-size:12px}
.role-pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--border);color:var(--ink-2)}
.role-pill.admin{color:var(--accent);border-color:rgba(47,129,247,.5)}
.settings-card{max-width:none}

/* Connexion : liens secondaires, messages de succès, demandes d'accès */
.login-links{display:flex;justify-content:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.login-links a{color:var(--ink-2);text-decoration:none}
.login-links a:hover{color:var(--accent);text-decoration:underline}
.login-ok{color:var(--ok);font-size:13px;margin:-4px 0 12px;font-weight:600}
.req-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;flex-wrap:wrap;margin-bottom:8px}
.req-card .r-main{flex:1;min-width:220px}
.req-card .r-name{font-weight:600}
.req-card .r-meta{color:var(--ink-3);font-size:12px;margin-top:2px}
.req-card select.input{width:auto}
.link-box{display:flex;gap:8px;margin:10px 0}
.link-box .input{flex:1;font:12px ui-monospace,Menlo,monospace}