:root { --bg: #0b0c10; --card:#12141a; --ink:#f5f7fa; --muted:#aab3c5; --brand:#23c55e; --warn:#f59e0b; --bad:#ef4444; --line:#232733; }
    html, body { height:100%; }
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); }
    .wrap { max-width: 880px; margin: 0 auto; padding: 16px 16px 16px; }
    header {top: 0; z-index: 5; background: linear-gradient(180deg, rgba(11,12,16,0.95), rgba(11,12,16,0.6) 60%, rgba(11,12,16,0)); backdrop-filter: blur(6px); }
    .title { font-weight: 800; letter-spacing: .2px; font-size: 1.4rem; display:flex; align-items:center; gap:10px; padding: 12px 4px; }
    .badge { font-size: .72rem; color: var(--bg); background: var(--brand); padding: 4px 8px; border-radius: 999px; }
    .btn { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 14px; font-weight: 600; font-size: .95rem; }
    .btn:active { transform: translateY(1px); }
    .btn.primary { background: var(--brand); color: #0a0f0a; border-color: #1fb455; }
    .btn.warn { background: var(--warn); color: #1a1206; border-color: #e49311; }
    .btn.ghost { background: transparent; }

    .grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 680px){ .grid { grid-template-columns: 1fr 1fr; } }

    .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 16px;}
    .card h2 { margin: 4px 0 10px; font-size: 1.05rem; letter-spacing: .2px; }

    .lastcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 90px;}
    .lastcard h2 { margin: 4px 0 10px; font-size: 1.05rem; letter-spacing: .2px; }

    .hint { color: var(--muted); font-size: .9rem; }

    .row { display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
    .row label { font-size: 1rem; }
    .row small { color: var(--muted); }

    .toggle { display:flex; gap:6px; align-items:center; }
    .toggle input[type="checkbox"] { width: 22px; height: 22px; }

    .field { display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
    .field input, .field select, .field textarea { background:#0f1218; color: var(--ink); border:1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 1rem; }
    .field textarea { min-height: 84px; resize: vertical; }

    .status { display:flex; gap:8px; align-items:center; font-weight:700; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
    .dot.bad { background: var(--bad); }

    footer { position: fixed; inset: auto 0 0 0; background: linear-gradient(180deg, rgba(11,12,16,0), rgba(11,12,16,0.85) 30%, rgba(11,12,16,0.95)); padding: 14px 16px; border-top: 1px solid var(--line); }
    .footbar { display:flex; gap:8px; }
    .footbar .btn { flex:1; }

    .section-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin: 12px 2px 6px; }
    .section-title h3 { margin:0; font-size: .95rem; color: var(--muted); font-weight:700; }

    .kicker { color: var(--muted); font-size: .9rem; margin: 0 0 12px; text-align: center;}

    /* Printable area for PDF rendering */
    #printArea { background:#fff; color:#111; padding: 20px; width: 794px; /* A4 width at 96dpi approx */ }
    #printArea h2 { margin: 0 0 8px; }
    #printArea table { width: 100%; border-collapse: collapse; font-size: 12px; }
    #printArea th, #printArea td { border: 1px solid #ccc; padding: 6px; text-align: left; }
    #printArea .pass { color: #087f23; font-weight:700; }
    #printArea .fail { color: #c62828; font-weight:700; }

    details.settings > summary { cursor: pointer; list-style: none; }
    details.settings > summary::-webkit-details-marker { display:none; }
    details.settings summary { display:flex; align-items:center; gap:8px; }
    details.settings[open] .chev { transform: rotate(90deg); }
    .chev { transition: transform .18s ease; }

    .home-logo-link {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 1000;
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .home-logo-link svg {
      width: 28px;
      height: 28px;
      fill: #222;
      transition: fill 0.2s;
    }
    .home-logo-link:hover svg {
      fill: #0366d6;
    }