:root {
      color-scheme: dark;
      --bg:#070b13; --panel:rgba(18,27,45,.88); --panel2:rgba(24,35,57,.94);
      --text:#f4f7fb; --muted:#9aa8bd; --line:rgba(255,255,255,.09);
      --good:#2ed47a; --warn:#ffb020; --bad:#ff5d6c; --accent:#67a7ff;
      --shadow:0 18px 45px rgba(0,0,0,.28); --radius:20px;
    }
    *{box-sizing:border-box}
    html{background:var(--bg)}
    body{
      margin:0; min-height:100vh; min-height:100dvh;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top right,rgba(56,124,255,.16),transparent 31%),
        radial-gradient(circle at 0 47%,rgba(46,212,122,.08),transparent 27%),var(--bg);
      padding:max(16px,env(safe-area-inset-top)) 14px max(26px,env(safe-area-inset-bottom));
    }
    button,input{font:inherit} button{-webkit-tap-highlight-color:transparent}
    .app{width:min(100%,900px);margin:0 auto}
    header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 2px 18px}
    h1{font-size:clamp(1.45rem,5vw,2.15rem);line-height:1.08;margin:0;letter-spacing:-.04em}
    .subtitle{color:var(--muted);margin:7px 0 0;font-size:.92rem;line-height:1.4}
    .icon-button,.primary-button,.secondary-button,.ghost-button,.danger-button{
      border:0;border-radius:14px;color:var(--text);cursor:pointer;min-height:44px;
      transition:transform .15s ease,opacity .15s ease,background .15s ease;
    }
    button:active{transform:scale(.97)} button:disabled{opacity:.55;cursor:default;transform:none}
    .icon-button{width:46px;flex:0 0 46px;background:var(--panel2);border:1px solid var(--line);font-size:1.05rem}
    .primary-button{background:linear-gradient(135deg,#397ef6,#65a8ff);padding:0 18px;font-weight:800}
    .secondary-button{background:rgba(255,255,255,.075);padding:0 16px;border:1px solid var(--line)}
    .ghost-button{background:transparent;padding:0 10px;border:1px solid var(--line);color:var(--muted)}
    .danger-button{background:rgba(255,93,108,.13);color:#ff9ca6;padding:0 15px;border:1px solid rgba(255,93,108,.22)}

    .hero{
      position:relative;overflow:hidden;border:1px solid var(--line);
      background:linear-gradient(145deg,rgba(22,34,57,.97),rgba(12,20,34,.95));
      border-radius:26px;padding:22px;box-shadow:var(--shadow);margin-bottom:14px;
    }
    .hero::after{content:"";position:absolute;width:230px;height:230px;right:-105px;top:-120px;border-radius:50%;background:var(--status-glow,rgba(103,167,255,.14));filter:blur(4px);pointer-events:none}
    .hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;z-index:1}
    .overall-row{display:flex;align-items:center;gap:14px}
    .overall-dot{width:18px;height:18px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 8px rgba(154,168,189,.12);flex:0 0 auto}
    .overall-dot.good{background:var(--good);box-shadow:0 0 0 8px rgba(46,212,122,.13),0 0 24px rgba(46,212,122,.35)}
    .overall-dot.warn{background:var(--warn);box-shadow:0 0 0 8px rgba(255,176,32,.13),0 0 24px rgba(255,176,32,.30)}
    .overall-dot.bad{background:var(--bad);box-shadow:0 0 0 8px rgba(255,93,108,.13),0 0 24px rgba(255,93,108,.30)}
    .overall-label{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:850}
    .overall-status{margin-top:2px;font-size:clamp(1.45rem,6vw,2.35rem);font-weight:900;letter-spacing:-.045em}
    .score-block{text-align:right;min-width:82px}
    .score{font-size:clamp(2rem,9vw,3.25rem);font-weight:900;letter-spacing:-.06em;line-height:.95}
    .score small{font-size:.34em;color:var(--muted);font-weight:800;letter-spacing:0}
    .score-label{font-size:.72rem;color:var(--muted);font-weight:800;margin-top:5px;text-transform:uppercase;letter-spacing:.08em}
    .hero-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);margin-top:16px;font-size:.8rem;position:relative;z-index:1}
    .progress-track{height:7px;background:rgba(255,255,255,.075);border-radius:999px;overflow:hidden;margin-top:16px;position:relative;z-index:1}
    .progress-track>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#397ef6,#67a7ff,#2ed47a);border-radius:inherit;transition:width .25s ease}
    .progress-text{color:var(--muted);font-size:.75rem;margin-top:7px;position:relative;z-index:1;min-height:1em}
    .controls{display:grid;grid-template-columns:1.35fr 1fr auto;gap:9px;margin-top:16px;position:relative;z-index:1}

    .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
    .card.full,.card.span-2{grid-column:1/-1}
    .card-title{display:flex;justify-content:space-between;align-items:center;gap:9px;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850}
    .metric{margin-top:9px;font-size:clamp(1.25rem,5.8vw,2rem);font-weight:900;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .metric.small{font-size:1.08rem;white-space:normal;line-height:1.25}
    .detail{color:var(--muted);margin-top:6px;font-size:.79rem;line-height:1.4}
    .delta{font-size:.73rem;margin-top:7px;font-weight:750;color:var(--muted)} .delta.good{color:#83ecae}.delta.warn{color:#ffd17b}.delta.bad{color:#ff9da6}
    .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:.69rem;font-weight:850;background:rgba(255,255,255,.07);white-space:nowrap}
    .pill.good{color:#83ecae;background:rgba(46,212,122,.1)} .pill.warn{color:#ffd17b;background:rgba(255,176,32,.1)} .pill.bad{color:#ff9da6;background:rgba(255,93,108,.1)}
    .bar{height:8px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-top:12px}.bar>span{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .35s ease}

    .verdict-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
    .verdict-item{padding:11px 12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px}
    .verdict-name{font-size:.75rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.verdict-value{font-size:1rem;font-weight:850;margin-top:4px}
    .verdict-value.good{color:#83ecae}.verdict-value.warn{color:#ffd17b}.verdict-value.bad{color:#ff9da6}

    .device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:10px}
    .kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:.8rem}.kv:first-child,.kv:nth-child(2){border-top:0}.kv span:first-child{color:var(--muted)}.kv span:last-child{text-align:right;font-weight:750;overflow-wrap:anywhere}

    .security-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:10px}
    .security-score{font-size:clamp(2rem,9vw,3.25rem);font-weight:900;letter-spacing:-.05em;line-height:1}.security-score small{font-size:.38em;color:var(--muted);font-weight:750;letter-spacing:0}
    .security-list,.service-list{display:grid;gap:9px;margin-top:14px}
    .security-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:11px 12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px}
    .security-icon,.service-light{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--muted)}
    .security-icon.good,.service-light.good{background:var(--good);box-shadow:0 0 10px rgba(46,212,122,.35)} .security-icon.warn,.service-light.warn{background:var(--warn)} .security-icon.bad,.service-light.bad{background:var(--bad)}
    .security-name{font-weight:780;font-size:.84rem}.security-detail{color:var(--muted);font-size:.74rem;line-height:1.4;margin-top:2px}.security-weight{color:var(--muted);font-size:.7rem;white-space:nowrap}
    .service-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:15px}.service-light{margin-top:0}.service-name{min-width:0;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-url{color:var(--muted);font-size:.71rem;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.service-result{text-align:right;font-size:.76rem;color:var(--muted);white-space:nowrap}

    .chart-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}.chart-box{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:15px;padding:11px}.chart-head{display:flex;justify-content:space-between;gap:10px;font-size:.75rem}.chart-head span:first-child{font-weight:800}.chart-head span:last-child{color:var(--muted)}canvas{width:100%;height:110px;display:block;margin-top:8px}

    .settings{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;align-items:flex-end;z-index:20;padding-top:env(safe-area-inset-top)}.settings.open{display:flex}.sheet{width:100%;max-height:90dvh;overflow:auto;background:#101827;border-radius:26px 26px 0 0;border:1px solid var(--line);padding:18px 16px max(24px,env(safe-area-inset-bottom));box-shadow:0 -25px 60px rgba(0,0,0,.45)}.sheet-handle{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.18);margin:0 auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sheet h2{margin:0;font-size:1.25rem}.form-grid{display:grid;gap:12px;margin-top:16px}label{display:grid;gap:7px;color:var(--muted);font-size:.82rem;font-weight:700}input{width:100%;min-height:46px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--text);padding:0 13px;outline:none}input:focus{border-color:rgba(103,167,255,.7);box-shadow:0 0 0 3px rgba(103,167,255,.12)}.service-editor{display:grid;grid-template-columns:.8fr 1.4fr auto;gap:8px;align-items:end}.sheet-actions{display:flex;gap:10px;margin-top:16px}.sheet-actions button{flex:1}.privacy-note{color:var(--muted);font-size:.75rem;line-height:1.45;margin-top:14px}.footer{text-align:center;color:var(--muted);font-size:.7rem;line-height:1.45;padding:18px 10px 4px}

    @media (min-width:700px){
      body{padding-left:24px;padding-right:24px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card.span-2{grid-column:span 2}.card.full{grid-column:1/-1}.chart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settings{align-items:center;justify-content:center;padding:24px}.sheet{width:min(680px,100%);border-radius:26px;max-height:86vh}
    }
    @media (max-width:480px){
      body{padding-left:12px;padding-right:12px}.hero{padding:18px}.controls{grid-template-columns:1fr 1fr}.controls .share-button{grid-column:1/-1}.grid{grid-template-columns:1fr}.card.full,.card.span-2{grid-column:auto}.card{padding:15px}.device-grid{grid-template-columns:1fr}.kv:nth-child(2){border-top:1px solid var(--line)}.service-editor{grid-template-columns:1fr auto}.service-editor label:nth-child(2){grid-column:1/-1;grid-row:2}.service-editor .remove-service{grid-column:2;grid-row:1}.verdict-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:350px){.grid{grid-template-columns:1fr}.card.full,.card.span-2{grid-column:auto}.controls{grid-template-columns:1fr}.controls .share-button{grid-column:auto}.hero-top{flex-direction:column}.score-block{text-align:left}.verdict-grid{grid-template-columns:1fr}}
    @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
  

/* Production website shell */
.site-nav{width:min(100%,900px);margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:-.03em}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#397ef6,#2ed47a);box-shadow:0 8px 24px rgba(57,126,246,.2)}
.nav-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.nav-links a,.site-footer a,.content-card a{color:#b9d6ff;text-decoration:none}.nav-links a{font-size:.8rem;color:var(--muted)}.nav-links a:hover,.site-footer a:hover,.content-card a:hover{text-decoration:underline}
.ad-slot{grid-column:1/-1;min-height:96px;border:1px dashed rgba(255,255,255,.12);border-radius:18px;display:none;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;background:rgba(255,255,255,.018);overflow:hidden}.ad-slot[data-enabled="true"]{display:flex}.ad-slot ins{width:100%;min-height:90px}
.info-section{width:min(100%,900px);margin:14px auto 0;display:grid;gap:12px}.content-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;line-height:1.65}.content-card h2,.content-card h3{margin-top:0}.content-card p,.content-card li{color:#c8d3e3}.content-card code{background:rgba(255,255,255,.07);padding:.1em .35em;border-radius:6px}.content-card ul{padding-left:1.2rem}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.guide-link{display:block;padding:16px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025);text-decoration:none!important}.guide-link strong{display:block;color:var(--text);margin-bottom:5px}.guide-link span{color:var(--muted);font-size:.8rem}
.site-footer{width:min(100%,900px);margin:18px auto 0;padding:18px 4px calc(10px + env(safe-area-inset-bottom));color:var(--muted);font-size:.75rem;line-height:1.6;border-top:1px solid var(--line)}.footer-links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.page-shell{width:min(100%,900px);margin:0 auto}.page-hero{background:linear-gradient(145deg,rgba(22,34,57,.97),rgba(12,20,34,.95));border:1px solid var(--line);border-radius:26px;padding:24px;margin:8px 0 14px}.page-hero h1{margin:0}.page-hero p{color:var(--muted);line-height:1.6}.page-content{display:grid;gap:12px}.legal-note{font-size:.76rem;color:var(--muted)}
@media(max-width:600px){.site-nav{align-items:flex-start}.nav-links{gap:8px}.nav-links a:nth-child(n+4){display:none}.guide-grid{grid-template-columns:1fr}.content-card{padding:17px}}
@media(max-width:420px){.brand span:last-child{font-size:.94rem}.nav-links a{font-size:.74rem}.site-nav{gap:8px}}