/* ============================================================
   GMAO — Design system "Industrial Clarity"
   Clair haute luminosité (terrain/plein soleil), bleu acier +
   orange sécurité, Barlow, chiffres tabulaires, touch ≥ 44px.
   ============================================================ */

:root{
  --c-primary:#0E3A5D;
  --c-primary-600:#12507F;
  --c-sidebar:#0A2C47;
  --c-sidebar-hi:#123A5C;
  --c-accent:#F26B1D;
  --c-accent-rgb:242,107,29;
  --c-accent-dark:#D6560E;
  --c-bg:#EEF2F6;
  --c-card:#FFFFFF;
  --c-text:#16232E;
  --c-muted:#55677A;
  --c-border:#D7E0E8;
  --c-input:#F7FAFC;
  --c-success:#147A38;
  --c-danger:#C22B21;
  --c-warning:#B87400;
  --c-info:#1258A6;

  --st-draft:#6B7A89; --st-planned:#1258A6; --st-assigned:#6A3FB5;
  --st-progress:#D6560E; --st-waiting:#B87400; --st-done:#147A38;
  --st-closed:#3D4F5F; --st-cancelled:#8895A3;

  --font-body:'Barlow',system-ui,sans-serif;
  --font-display:'Barlow Semi Condensed','Barlow',sans-serif;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-8:3rem;

  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-sm:0 1px 3px rgba(14,42,66,.10);
  --shadow-md:0 6px 20px rgba(14,42,66,.12);
  --shadow-lg:0 16px 48px rgba(14,42,66,.18);
  --tr:.22s cubic-bezier(.4,0,.2,1);
  --sidebar-w:236px;
  --topbar-h:60px;
  --bottomnav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* L'attribut hidden doit TOUJOURS gagner, même contre .boot{display:flex}
   (les règles auteur écrasent la règle UA [hidden] → sans ceci le splash
   plein écran ne disparaît jamais : bug racine du « spinner infini »). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--c-bg);
  color:var(--c-text);
  font-size:16px;line-height:1.55;
  min-height:100dvh;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;font-weight:700}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--c-info);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.num,td.num,.kpi-val{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid rgba(var(--c-accent-rgb),.55);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Boot / splash ---------- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);background:
  radial-gradient(ellipse at 15% 20%,rgba(18,80,127,.35) 0%,transparent 55%),
  radial-gradient(ellipse at 85% 80%,rgba(242,107,29,.18) 0%,transparent 50%),
  var(--c-sidebar);color:#fff;z-index:200}
.boot-logo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);color:#fff}
.boot-logo svg{color:var(--c-accent)}
.boot-name{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:.06em}
.boot-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.25);
  border-top-color:var(--c-accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-msg{font-size:.9rem;color:rgba(255,255,255,.75)}

/* ---------- Layout shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh}
.app-body{display:flex;flex-direction:column;min-width:0}
.view{flex:1;padding:var(--sp-5);max-width:1280px;width:100%;margin:0 auto;
  padding-bottom:calc(var(--sp-8) + env(safe-area-inset-bottom))}
.view>section{animation:fadeInUp .3s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Sidebar (desktop) */
.sidebar{background:var(--c-sidebar);color:#DCE7F0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;padding:var(--sp-4) var(--sp-3)}
.sb-brand{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3) var(--sp-5);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.05em}
.sb-brand svg{color:var(--c-accent);flex:none}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.sb-link{display:flex;align-items:center;gap:var(--sp-3);padding:.65rem var(--sp-3);border-radius:var(--r-sm);
  color:#B9CCDC;font-weight:500;transition:background var(--tr),color var(--tr)}
.sb-link svg{flex:none;opacity:.9}
.sb-link:hover{background:var(--c-sidebar-hi);color:#fff;text-decoration:none}
.sb-link.active{background:var(--c-primary-600);color:#fff;box-shadow:inset 3px 0 0 var(--c-accent)}
.sb-link .count{margin-left:auto;background:var(--c-accent);color:#fff;font-size:.72rem;font-weight:700;
  border-radius:99px;padding:0 .5em;min-width:1.5em;text-align:center}
.sb-foot{padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#8FA9BF}

/* Topbar */
.topbar{height:var(--topbar-h);background:var(--c-card);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5);position:sticky;top:0;z-index:40}
.tb-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-org{display:flex;align-items:center;gap:.4rem;background:var(--c-input);border:1px solid var(--c-border);
  border-radius:var(--r-sm);padding:.35rem .7rem;font-weight:600;font-size:.88rem;cursor:pointer;max-width:220px}
.tb-org span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btn{position:relative;width:44px;height:44px;border-radius:var(--r-sm);border:none;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--c-muted)}
.tb-btn:hover{background:var(--c-bg);color:var(--c-text)}
.tb-btn .dot{position:absolute;top:8px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--c-danger);color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center}
.offline-pill{display:none;align-items:center;gap:.4rem;background:#FDECDD;color:#8C4A00;border:1px solid #F5C9A4;
  padding:.3rem .7rem;border-radius:99px;font-size:.8rem;font-weight:600}
.offline .offline-pill{display:flex}
.sync-pill{display:none;align-items:center;gap:.4rem;background:#E4F0FB;color:var(--c-info);border:1px solid #BCD6EE;
  padding:.3rem .7rem;border-radius:99px;font-size:.8rem;font-weight:700;cursor:pointer}
.sync-pill.show{display:flex}

/* Bottom nav (mobile) */
.bottomnav{display:none;position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  background:var(--c-card);border-top:1px solid var(--c-border);z-index:60;
  padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(5,1fr)}
.bn-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--c-muted);font-size:.68rem;font-weight:600}
.bn-link.active{color:var(--c-primary)}
.bn-link:hover{text-decoration:none}
.bn-scan{position:relative}
.bn-scan .bn-fab{position:absolute;top:-22px;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(150deg,var(--c-accent),var(--c-accent-dark));color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(var(--c-accent-rgb),.45);border:3px solid var(--c-card)}
.bn-scan span{margin-top:26px}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .bottomnav{display:grid}
  .view{padding:var(--sp-4);padding-bottom:calc(var(--bottomnav-h) + var(--sp-8))}
}

/* ---------- Composants ---------- */
.page-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.page-head h1{font-size:1.5rem}
.page-head .spacer{flex:1}
.page-sub{color:var(--c-muted);font-size:.92rem;margin-top:-.6rem;margin-bottom:var(--sp-4)}

.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-4)}
.card+.card{margin-top:var(--sp-4)}
.card-title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin-bottom:var(--sp-3);
  display:flex;align-items:center;gap:.5rem}
.card-title .spacer{flex:1}

.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}

/* KPI cards */
.kpi{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:.2rem;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform var(--tr),box-shadow var(--tr)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.kpi-label{font-size:.8rem;font-weight:600;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em}
.kpi-val{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--c-text)}
.kpi-sub{font-size:.8rem;color:var(--c-muted)}
.kpi.warn .kpi-val{color:var(--c-danger)}
.kpi.ok .kpi-val{color:var(--c-success)}
.kpi.accent .kpi-val{color:var(--c-accent-dark)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  padding:.55rem 1.15rem;border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;
  cursor:pointer;transition:all var(--tr);white-space:nowrap;background:var(--c-card)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--c-accent);color:#fff;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent)}
.btn-primary:hover:not(:disabled){background:var(--c-accent-dark);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(var(--c-accent-rgb),.35)}
.btn-navy{background:var(--c-primary);color:#fff}
.btn-navy:hover:not(:disabled){background:var(--c-primary-600)}
.btn-ghost{border-color:var(--c-border);color:var(--c-text);background:var(--c-card)}
.btn-ghost:hover:not(:disabled){border-color:var(--c-primary);color:var(--c-primary)}
.btn-danger{background:#FBE9E7;color:var(--c-danger);border-color:#F0C4BF}
.btn-danger:hover:not(:disabled){background:var(--c-danger);color:#fff}
.btn-sm{min-height:36px;padding:.3rem .8rem;font-size:.86rem}
.btn-block{width:100%}
.btn-icon{width:44px;padding:0}

/* Formulaires */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem}
.field .req{color:var(--c-danger)}
.field .hint{font-size:.78rem;color:var(--c-muted);margin-top:.3rem}
.input,select.input,textarea.input{width:100%;min-height:46px;padding:.6rem .8rem;border:1.5px solid var(--c-border);
  border-radius:var(--r-sm);background:var(--c-input);transition:border var(--tr),background var(--tr)}
.input:focus{border-color:var(--c-primary);background:#fff;outline:none}
textarea.input{min-height:96px;resize:vertical}
.input.err{border-color:var(--c-danger);background:#FFF6F5}
.field .err-msg{color:var(--c-danger);font-size:.8rem;margin-top:.3rem;font-weight:600}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.checkline{display:flex;align-items:center;gap:.6rem;font-weight:500;cursor:pointer;min-height:44px}
.checkline input{width:20px;height:20px;accent-color:var(--c-accent)}

/* Filtres / recherche */
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4);align-items:center}
.filters .input{width:auto;min-width:140px;flex:0 1 auto;min-height:42px}
.filters .search{flex:1 1 220px;min-width:180px}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--c-border);background:var(--c-card);
  border-radius:99px;padding:.35rem .85rem;font-size:.85rem;font-weight:600;cursor:pointer;min-height:38px;
  color:var(--c-muted);transition:all var(--tr)}
.chip.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-card)}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.tbl th{font-family:var(--font-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--c-muted);text-align:left;padding:.7rem .9rem;border-bottom:2px solid var(--c-border);
  background:#F7FAFC;position:sticky;top:0}
.tbl td{padding:.68rem .9rem;border-bottom:1px solid var(--c-border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background var(--tr)}
.tbl tbody tr:hover{background:#F2F7FB}
.tbl .strong{font-weight:600}
.tbl td.num,.tbl th.num{text-align:right}

/* Badges statut / priorité */
.badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:6px;padding:.18rem .55rem;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;color:#fff}
.badge.outline{background:transparent!important;border:1.5px solid currentColor}
.badge .b-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-lite{display:inline-flex;align-items:center;border-radius:6px;padding:.18rem .55rem;
  font-size:.76rem;font-weight:700;background:var(--c-bg);color:var(--c-muted);white-space:nowrap}
.prio{font-family:var(--font-display);font-weight:700;border-radius:6px;padding:.14rem .5rem;font-size:.78rem;color:#fff}

/* Listes mobiles (cards cliquables) */
.rowcard{display:flex;gap:var(--sp-3);align-items:center;background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-2);cursor:pointer;
  transition:transform var(--tr),box-shadow var(--tr)}
.rowcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.rowcard .rc-main{flex:1;min-width:0}
.rowcard .rc-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowcard .rc-sub{font-size:.82rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowcard .rc-side{text-align:right;flex:none;display:flex;flex-direction:column;gap:.3rem;align-items:flex-end}

/* États vides & skeletons */
.empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--c-muted)}
.empty svg{opacity:.4;margin-bottom:var(--sp-3)}
.empty h3{color:var(--c-text);margin-bottom:.4rem;font-size:1.05rem}
.empty p{max-width:420px;margin:0 auto var(--sp-4)}
.skel{border-radius:var(--r-sm);background:linear-gradient(90deg,#E5EBF1 25%,#F2F6FA 50%,#E5EBF1 75%);
  background-size:200% 100%;animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-row{height:52px;margin-bottom:var(--sp-2)}

/* Modales */
.modal-back{position:fixed;inset:0;background:rgba(10,28,43,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}}
.modal{background:var(--c-card);border-radius:var(--r-lg) var(--r-lg) 0 0;width:100%;max-width:640px;
  max-height:92dvh;display:flex;flex-direction:column;animation:slideUp .28s cubic-bezier(.4,0,.2,1)}
@keyframes slideUp{from{transform:translateY(48px);opacity:.6}}
@media (min-width:700px){
  .modal-back{align-items:center;padding:var(--sp-5)}
  .modal{border-radius:var(--r-lg)}
}
.modal-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--c-border)}
.modal-head h2{font-size:1.15rem;flex:1}
.modal-body{padding:var(--sp-5);overflow-y:auto}
.modal-foot{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--c-border);flex-wrap:wrap}
.modal-x{width:44px;height:44px;border:none;background:transparent;border-radius:var(--r-sm);
  cursor:pointer;display:grid;place-items:center;color:var(--c-muted)}
.modal-x:hover{background:var(--c-bg)}

/* Toasts */
.toast-root{position:fixed;bottom:calc(var(--bottomnav-h) + var(--sp-3));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:var(--sp-2);z-index:150;width:min(94vw,440px)}
@media (min-width:900px){.toast-root{bottom:var(--sp-5)}}
.toast{display:flex;align-items:center;gap:.6rem;background:#12283C;color:#fff;border-radius:var(--r-md);
  padding:.8rem 1rem;font-weight:500;box-shadow:var(--shadow-lg);animation:slideUp .25s ease}
.toast.ok{border-left:4px solid var(--c-success)}
.toast.err{border-left:4px solid var(--c-danger)}
.toast.info{border-left:4px solid var(--c-accent)}

/* Timeline (historique OT) */
.timeline{list-style:none;position:relative;padding-left:22px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--c-border)}
.timeline li{position:relative;padding-bottom:var(--sp-3);font-size:.88rem}
.timeline li::before{content:'';position:absolute;left:-19px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--c-primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--c-border)}
.timeline .tl-date{color:var(--c-muted);font-size:.78rem}

/* Checklist OT */
.task-item{display:flex;align-items:center;gap:var(--sp-3);padding:.55rem 0;border-bottom:1px dashed var(--c-border);min-height:48px}
.task-item:last-child{border-bottom:none}
.task-item input{width:24px;height:24px;accent-color:var(--c-success);flex:none}
.task-item .done{text-decoration:line-through;color:var(--c-muted)}

/* Statut stepper (OT détail) */
.stepper{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0}

/* Arbre équipements */
.tree-toggle{background:none;border:none;cursor:pointer;color:var(--c-muted);width:26px;height:26px;flex:none}
.tree-pad{display:inline-block}

/* QR planche impression */
.qr-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.qr-cell{border:1.5px dashed var(--c-border);border-radius:var(--r-sm);padding:var(--sp-3);text-align:center}
.qr-cell .qr-code{font-weight:700;font-size:.85rem;margin-top:.3rem}
.qr-cell .qr-name{font-size:.72rem;color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media print{
  .sidebar,.topbar,.bottomnav,.toast-root,.no-print,.page-head .btn{display:none!important}
  .view{padding:0;max-width:none}
  .app{grid-template-columns:1fr}
  body{background:#fff}
  .card{border:none;box-shadow:none;padding:0}
}

/* Auth */
.auth-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
  background:
   radial-gradient(ellipse at 15% 20%,rgba(18,80,127,.5) 0%,transparent 55%),
   radial-gradient(ellipse at 85% 85%,rgba(242,107,29,.22) 0%,transparent 50%),
   var(--c-sidebar)}
.auth-card{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:420px;padding:var(--sp-6);animation:slideUp .3s ease}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:var(--sp-5)}
.auth-brand svg{color:var(--c-accent)}
.auth-brand .n{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.05em}
.auth-brand .t{font-size:.85rem;color:var(--c-muted)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1);background:var(--c-bg);
  border-radius:var(--r-sm);padding:4px;margin-bottom:var(--sp-4)}
.auth-tabs button{border:none;background:transparent;padding:.6rem;border-radius:6px;font-weight:600;
  cursor:pointer;color:var(--c-muted)}
.auth-tabs button.active{background:var(--c-card);color:var(--c-text);box-shadow:var(--shadow-sm)}

/* Notifications panel */
.notif-panel{position:fixed;top:calc(var(--topbar-h) + 6px);right:var(--sp-4);width:min(94vw,380px);
  background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  z-index:90;max-height:70dvh;overflow-y:auto;animation:fadeIn .18s ease}
.notif-item{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-border);font-size:.88rem}
.notif-item.unread{background:#F2F7FB;font-weight:500}
.notif-item .nd{color:var(--c-muted);font-size:.76rem}

/* Barres simple (pareto) */
.bar-row{display:grid;grid-template-columns:minmax(90px,180px) 1fr 46px;gap:var(--sp-2);align-items:center;
  font-size:.85rem;margin-bottom:.45rem}
.bar-row .bar{height:16px;border-radius:4px;background:linear-gradient(90deg,var(--c-primary-600),var(--c-primary));min-width:2px}
.bar-row.accent .bar{background:linear-gradient(90deg,var(--c-accent),var(--c-accent-dark))}
.bar-row .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-muted)}

/* Divers */
.muted{color:var(--c-muted)}
.small{font-size:.84rem}
.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}
.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}
.flex{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.w-100{width:100%}
.pending-sync{outline:2px dashed var(--c-warning);outline-offset:2px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--c-primary);color:#fff;display:inline-grid;
  place-items:center;font-weight:700;font-size:.85rem;flex:none}
.divider{height:1px;background:var(--c-border);margin:var(--sp-4) 0}
.kbd{background:var(--c-bg);border:1px solid var(--c-border);border-radius:4px;padding:.05rem .4rem;font-size:.8rem}