/* ==========================================================================
   Portail SIO — composants communs des tableaux de bord (admin, prof, élève)
   ========================================================================== */
:root {
    --dh-bg:#0b1120; --dh-card:rgba(255,255,255,0.035); --dh-border:rgba(255,255,255,0.07);
    --dh-text:#e8edf5; --dh-muted:#94a3b8; --dh-dim:#64748b;
    --dh-blue:#60a5fa; --dh-violet:#a78bfa; --dh-green:#34d399; --dh-amber:#fbbf24; --dh-red:#f87171;
    --dh-cyan:#22d3ee; --dh-pink:#f472b6; --dh-orange:#fb923c; --dh-indigo:#818cf8; --dh-teal:#2dd4bf;
}

/* ---------- Apparition douce ---------- */
@keyframes dhUp { from { opacity:0; transform:translateY(10px)} to { opacity:1; transform:none} }
.dh-anim > * { animation:dhUp .45s ease both}
.dh-anim > *:nth-child(2) { animation-delay:.05s} .dh-anim > *:nth-child(3) { animation-delay:.1s}
.dh-anim > *:nth-child(4) { animation-delay:.15s} .dh-anim > *:nth-child(5) { animation-delay:.2s}
.dh-anim > *:nth-child(6) { animation-delay:.25s} .dh-anim > *:nth-child(n+7) { animation-delay:.3s}
@media (prefers-reduced-motion:reduce) { .dh-anim > * { animation:none} }

/* ---------- En-tête « hero » ---------- */
.dh-hero { position:relative; overflow:hidden; border-radius:20px; padding:24px 26px; margin-bottom:22px;
    background:radial-gradient(1200px 300px at 0% 0%, #deecfe, transparent 60%),
               radial-gradient(800px 260px at 100% 0%, #efeafe, transparent 60%), #ffffff;
    border:1px solid var(--sio-line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-hello { font-size:1.65rem; font-weight:800; letter-spacing:-0.02em; color:var(--sio-tx1)}
.dh-sub { color:var(--sio-tx3); margin-top:4px; font-size:0.92rem}
.dh-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.dh-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:0.78rem; font-weight:600;
    background:#f1f5f9; border:1px solid var(--sio-line); color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-pill .dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor}
.dh-pill.ok { color:var(--sio-green-l); border-color:rgba(52,211,153,0.3); background:#ecfbf6;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-pill.warn { color:var(--sio-yellow-l); border-color:rgba(251,191,36,0.3); background:#fff9eb;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-pill.danger { color:var(--sio-red-l); border-color:rgba(248,113,113,0.35); background:#feefef;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-hero-actions { display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Boutons ---------- */
.dh-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; font:600 0.86rem "Inter", sans-serif;
    text-decoration:none; cursor:pointer; border:1px solid var(--sio-line); background:#f1f5f9; color:var(--sio-tx1);
    transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-btn:hover { transform:translateY(-2px); background:#f1f5f9; border-color:var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-btn:active { transform:translateY(0)}
.dh-btn i.ti { font-size:1.05rem}
.dh-btn.primary { background:linear-gradient(135deg, #3b82f6, #8b5cf6); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(99,102,241,0.3)}
.dh-btn.primary:hover { box-shadow:0 10px 26px rgba(99,102,241,0.45)}
.dh-btn.success { background:#e3f9f1; border-color:rgba(52,211,153,0.35); color:var(--sio-green-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-btn.danger { background:#feefef; border-color:rgba(248,113,113,0.35); color:var(--sio-red-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-btn.warn { background:#fff8e6; border-color:rgba(251,191,36,0.35); color:var(--sio-yellow-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-btn.sm { padding:5px 10px; font-size:0.76rem; border-radius:9px}
.dh-btn.sm i.ti { font-size:0.9rem}

/* ---------- « À traiter » ---------- */
.dh-section-t { display:flex; align-items:center; gap:10px; font-size:0.8rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--sio-tx3); margin:6px 0 12px}
.dh-section-t::after { content:""; flex:1; height:1px; background:#f1f5f9;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-todo { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin-bottom:22px}
.dh-todo-card { --c:#b45309; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; text-decoration:none; color:var(--sio-tx1);
    background:linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #ffffff), #ffffff); border:1px solid color-mix(in srgb, var(--c) 35%, transparent);
    transition:transform .15s, box-shadow .2s; position:relative;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-todo-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px color-mix(in srgb, var(--c) 22%, transparent)}
.dh-todo-card .ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; color:var(--c);
    background:color-mix(in srgb, var(--c) 18%, #ffffff); flex-shrink:0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-todo-card .n { display:block; font-size:1.5rem; font-weight:800; line-height:1; color:var(--sio-tx1)}
.dh-todo-card .l { display:block; font-size:0.8rem; color:var(--sio-tx2); margin-top:3px; line-height:1.3}
.dh-todo-card .go { margin-left:auto; color:var(--c); font-size:1.1rem; transition:transform .15s}
.dh-todo-card:hover .go { transform:translateX(3px)}
.dh-allgood { display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:16px; margin-bottom:22px;
    background:#effbf7; border:1px solid rgba(52,211,153,0.25); color:var(--sio-green-l); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* ---------- Indicateurs ---------- */
.dh-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(165px, 1fr)); gap:12px; margin-bottom:22px}
.dh-kpi { --c:#2563eb; position:relative; overflow:hidden; padding:16px 18px; border-radius:16px; background:#ffffff; border:1px solid var(--sio-line);
    transition:transform .15s, border-color .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-kpi:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 40%, transparent)}
.dh-kpi::after { content:""; position:absolute; right:-30px; top:-30px; width:100px; height:100px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--c) 25%, #ffffff), transparent 70%);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-kpi .ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--c); font-size:1.15rem;
    background:color-mix(in srgb, var(--c) 15%, #ffffff); margin-bottom:10px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-kpi .v { font-size:1.75rem; font-weight:800; letter-spacing:-0.02em; color:var(--sio-tx1); line-height:1.1}
.dh-kpi .l { font-size:0.78rem; color:var(--sio-tx3); margin-top:3px}
.dh-kpi .s { font-size:0.72rem; color:var(--sio-tx4); margin-top:6px}
.dh-kpi .bar { height:6px; border-radius:3px; background:#f1f5f9; margin-top:10px; overflow:hidden;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-kpi .bar i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff))}

/* ---------- Cartes ---------- */
.dh-grid { display:grid; gap:14px; margin-bottom:22px}
.dh-g2 { grid-template-columns:repeat(2, minmax(0, 1fr))} .dh-g3 { grid-template-columns:repeat(3, minmax(0, 1fr))}
.dh-g21 { grid-template-columns:minmax(0, 2fr) minmax(0, 1fr)}
@media (max-width:1100px) { .dh-g3 { grid-template-columns:repeat(2, minmax(0, 1fr))} .dh-g21 { grid-template-columns:1fr} }
@media (max-width:760px) { .dh-g2, .dh-g3 { grid-template-columns:1fr} }
.dh-card { background:#ffffff; border:1px solid var(--sio-line); border-radius:18px; padding:18px 20px; min-width:0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.dh-card-t { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1rem; color:var(--sio-tx1)}
.dh-card-t .ti { color:var(--c, var(--sio-blue)); font-size:1.15rem; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--c, #60a5fa) 15%, #ffffff);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-empty { color:var(--sio-tx4); text-align:center; padding:18px; font-size:0.88rem}
.dh-link { color:var(--sio-blue); font-weight:600; font-size:0.82rem; text-decoration:none}
.dh-link:hover { text-decoration:underline}

/* ---------- Onglets (segmented control) ---------- */
.dh-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:#ffffff; border:1px solid var(--sio-line);
    margin-bottom:14px; flex-wrap:wrap;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; border:none; background:none; cursor:pointer;
    font:600 0.85rem "Inter", sans-serif; color:var(--sio-tx3); transition:background .15s, color .15s}
.dh-tab:hover { color:var(--sio-tx1)}
.dh-tab.on { background:linear-gradient(135deg, rgba(59,130,246,0.9), rgba(139,92,246,0.9)); color:#fff; box-shadow:0 4px 14px rgba(99,102,241,0.3)}
.dh-tab .cnt { font-size:0.7rem; background:#e2e8f0; border-radius:999px; padding:1px 7px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-panel { display:none} .dh-panel.on { display:block; animation:dhUp .3s ease both}

/* ---------- Tableaux ---------- */
.dh-table-wrap { overflow-x:auto}
.dh-table { width:100%; border-collapse:collapse; font-size:0.85rem}
.dh-table th { text-align:left; padding:10px 10px; color:var(--sio-tx3); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--sio-line); white-space:nowrap}
.dh-table td { padding:10px 10px; border-bottom:1px solid var(--sio-line); color:var(--sio-tx2); vertical-align:middle}
.dh-table tbody tr { transition:background .15s}
.dh-table tbody tr:hover td { background:#ffffff;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-table tr:last-child td { border-bottom:none}
.dh-tag { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; white-space:nowrap;
    background:#e9f3fe; color:var(--sio-blue-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-tag.success { background:#e1f8f0; color:var(--sio-green-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);} .dh-tag.error { background:#feeaea; color:var(--sio-red-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-tag.warning { background:#fef5de; color:var(--sio-yellow-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);} .dh-tag.purple { background:#f1ecfe; color:var(--sio-violet);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-tag.muted { background:#f1f5f9; color:var(--sio-tx3);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-ip { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:0.78rem; background:#f1f5f9; padding:2px 8px; border-radius:6px;
    cursor:pointer; color:var(--sio-tx1); border-bottom:1px dotted var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-ip:hover { background:#e4effe;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-avatar { width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center; font-weight:800; font-size:0.72rem; color:#0b1120;
    background:linear-gradient(135deg, var(--c, #60a5fa), #ffffff88); margin-right:10px; vertical-align:middle; flex-shrink:0}
.dh-person { display:flex; align-items:center}
.dh-person b { color:var(--sio-tx1); font-weight:600} .dh-person small { display:block; color:var(--sio-tx4); font-size:0.75rem}

/* ---------- Messages ---------- */
.dh-flash { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; margin-bottom:16px; font-size:0.88rem; font-weight:600;
    background:#e8faf3; border:1px solid rgba(52,211,153,0.3); color:var(--sio-green-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-note { padding:14px 18px; border-radius:14px; background:#ffffff; border:1px dashed var(--sio-line); font-size:0.84rem; color:var(--sio-tx3); line-height:1.7;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-note code { background:#edf5fe; color:var(--sio-blue-l); padding:1px 6px; border-radius:5px; font-size:0.78rem;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-note strong { color:var(--sio-tx1)}

/* ---------- Barres horizontales ---------- */
.dh-bars { display:flex; flex-direction:column; gap:12px}
.dh-bars .row { display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:5px; color:var(--sio-tx2)}
.dh-bars .row b { color:var(--sio-tx1)}
.dh-bars .track { height:8px; border-radius:4px; background:#f1f5f9; overflow:hidden;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-bars .track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--c, #60a5fa), color-mix(in srgb, var(--c, #60a5fa) 55%, #fff))}

/* ---------- Liens rapides ---------- */
.dh-quick { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px}
.dh-quick a { --c:#2563eb; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; text-decoration:none; color:var(--sio-tx1); font-weight:600;
    font-size:0.86rem; background:#ffffff; border:1px solid var(--sio-line); transition:transform .15s, border-color .2s, background .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.dh-quick a:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 8%, #ffffff);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.dh-quick a .ti { color:var(--c); font-size:1.2rem}