/* Estratto da public/guida-supervisori.php (Fase 1 refactoring). */
    :root { --accent: #3E8E85; --warn: #f97316; --danger: #ef4444; --info: #38bdf8; }
    /* body.guide has specificity 0-1-1, beats any 0-0-1 !important in external sheets */
    body.guide { background: linear-gradient(160deg,#1A1F3B 0%,#0C1124 100%) !important; min-height:100vh; color:#f1f5f9 !important; font-family:'Nunito',sans-serif; }

    /* layout */
    .page-wrap { max-width:940px; margin:0 auto; padding:48px 20px 80px; }
    .back-link { color:#94a3b8; text-decoration:none; font-size:.875rem; display:inline-flex; align-items:center; gap:6px; margin-bottom:32px; }
    .back-link:hover { color:#f1f5f9; }

    /* hero */
    .hero { text-align:center; margin-bottom:52px; }
    .hero-logo-wrap { width:min(110px,100%); margin:0 auto 18px; }
    .hero-logo { width:100%; max-width:110px; height:auto; display:block; }
    .hero .kicker { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:700; margin-bottom:10px; }
    .hero h1 { font-size:1.9rem; font-weight:900; margin-bottom:12px; }
    .hero .lead-text { color:#94a3b8; font-size:1rem; max-width:680px; margin:0 auto 24px; line-height:1.7; }

    /* TOC */
    .toc-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:22px 26px; margin-bottom:36px; }
    .toc-card h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:700; margin-bottom:14px; }
    .toc-list { columns:2; column-gap:24px; list-style:none; padding:0; margin:0; }
    .toc-list li { break-inside:avoid; margin-bottom:6px; }
    .toc-list a { color:#94a3b8; text-decoration:none; font-size:.875rem; display:flex; align-items:center; gap:7px; transition:color .15s; }
    .toc-list a:hover { color:#f1f5f9; }
    .toc-list .num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(62,142,133,.18); /* #c8faf3 on ~#223530 → 9.6:1 AAA */ color:#c8faf3; font-size:.7rem; font-weight:800; flex-shrink:0; }
    @media(max-width:600px){ .toc-list { columns:1; } }

    /* sezioni */
    .section { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:28px; margin-bottom:24px; scroll-margin-top:24px; }
    .section-title { font-size:1.05rem; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
    .section-title .s-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(62,142,133,.18); color:var(--accent); font-size:.8rem; font-weight:900; flex-shrink:0; }
    .section p, .section li { color:#94a3b8; font-size:.9rem; line-height:1.7; }
    .section strong { color:#e2e8f0; }
    .section ul, .section ol { padding-left:20px; margin:0; }
    .section li { margin-bottom:5px; }

    /* tip / warn / danger boxes */
    .tip-box  { background:rgba(62,142,133,.08); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:.875rem; color:#a7f3d0; }
    .warn-box { background:rgba(249,115,22,.08); border-left:3px solid var(--warn); border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:.875rem; color:#fed7aa; }
    .danger-box { background:rgba(239,68,68,.08); border-left:3px solid var(--danger); border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:.875rem; color:#fca5a5; }

    /* step list */
    .step-list { list-style:none; padding:0; margin:0; }
    .step-list li { display:flex; gap:14px; margin-bottom:14px; align-items:flex-start; }
    .step-list .step-n { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:50%; background:rgba(62,142,133,.2); /* #a7f3d0 on ~#24352e → 11:1 AAA */ color:#a7f3d0; font-size:.78rem; font-weight:900; margin-top:1px; }
    .step-list .step-body { color:#94a3b8; font-size:.9rem; line-height:1.65; }
    .step-list .step-body strong { color:#e2e8f0; }

    /* alert badge table */
    .badge-table { width:100%; border-collapse:collapse; font-size:.875rem; }
    .badge-table th { color:#94a3b8; font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
    .badge-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05); color:#94a3b8; vertical-align:top; }
    .badge-table tr:last-child td { border-bottom:none; }
    .badge-table .al-high   { background:rgba(239,68,68,.15); color:#fca5a5; border-radius:6px; padding:3px 8px; font-weight:700; white-space:nowrap; display:inline-block; }
    .badge-table .al-medium { background:rgba(234,179,8,.15); color:#fde68a; border-radius:6px; padding:3px 8px; font-weight:700; white-space:nowrap; display:inline-block; }
    .badge-table .al-low    { background:rgba(56,189,248,.15); color:#bae6fd; border-radius:6px; padding:3px 8px; font-weight:700; white-space:nowrap; display:inline-block; }
    .badge-table .al-none   { background:rgba(100,116,139,.15); color:#94a3b8; border-radius:6px; padding:3px 8px; font-weight:700; white-space:nowrap; display:inline-block; }

    /* conf badge */
    .conf-normal  { background:rgba(22,163,74,.15); color:#86efac; border-radius:6px; padding:3px 8px; font-size:.78rem; font-weight:700; display:inline-block; }
    .conf-cautious{ background:rgba(202,138,4,.15); color:#fde68a; border-radius:6px; padding:3px 8px; font-size:.78rem; font-weight:700; display:inline-block; }
    .conf-clar    { background:rgba(220,38,38,.15); color:#fca5a5; border-radius:6px; padding:3px 8px; font-size:.78rem; font-weight:700; display:inline-block; }
    .conf-blocked { background:rgba(107,114,128,.15); color:#9ca3af; border-radius:6px; padding:3px 8px; font-size:.78rem; font-weight:700; display:inline-block; }

    /* mini cards per la sidebar */
    .sidebar-map { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:14px; }
    .sidebar-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; }
    .sidebar-item i { color:var(--accent); font-size:1rem; margin-top:2px; flex-shrink:0; }
    .sidebar-item .si-name { font-size:.82rem; font-weight:700; color:#e2e8f0; margin-bottom:2px; }
    .sidebar-item .si-desc { font-size:.75rem; color:#94a3b8; line-height:1.4; }

    /* back to top */
    #toTop { position:fixed; bottom:28px; right:24px; width:40px; height:40px; border-radius:50%; background:rgba(62,142,133,.25); border:1px solid rgba(62,142,133,.4); color:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; text-decoration:none; }
    #toTop.show { opacity:1; }
    #toTop:hover { background:rgba(62,142,133,.4); }

    /* ── Dark-guide isolation ──────────────────────────── *
     * .page-wrap scope (specificity 0-1-1) beats          *
     * mindease-ui.css element rules (0-0-1) even when     *
     * both carry !important — keeps guide text readable   *
     * on any OS colour scheme.                            */
    .page-wrap h1, .page-wrap h2, .page-wrap h3 { color: #f1f5f9 !important; }
    .page-wrap p  { color: #94a3b8 !important; }
    .page-wrap li { color: #94a3b8 !important; }
    .page-wrap strong { color: #e2e8f0 !important; }
    .page-wrap .back-link { color: #94a3b8 !important; }
    .page-wrap .hero .kicker { color: var(--accent) !important; }
    .page-wrap .hero h1 { color: #f1f5f9 !important; }
    .page-wrap .hero .lead-text { color: #94a3b8 !important; }
    .page-wrap .toc-list a { color: #94a3b8 !important; }
    .page-wrap .section-title { color: #f1f5f9 !important; }
    .page-wrap .tip-box, .page-wrap .warn-box,
    .page-wrap .danger-box { color: inherit !important; }