/* settings modal */

.wisp-settings-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:fade-in .12s ease; }
.wisp-settings-modal.hidden { display:none; }
.settings-card { width:min(740px,100%); height:min(540px,100%); display:flex; overflow:hidden; background:var(--surface-1); border:1px solid var(--border-faint); border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.5); animation:modal-pop .14s var(--motion); }
.settings-nav { width:164px; flex:0 0 164px; display:flex; flex-direction:column; gap:1px; padding:22px 10px 14px; background:var(--surface-0); border-right:1px solid var(--border-subtle); }
.settings-nav h2 { padding:0 10px 14px; font-size:16px; font-weight:500; color:var(--text-white); }
.settings-nav-item { width:100%; height:32px; display:flex; align-items:center; gap:9px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:var(--text-muted); font-size:13px; text-align:left; cursor:pointer; transition:background .12s, color .12s; }
.settings-nav-item:hover { background:var(--accent-soft); color:var(--text-primary); }
.settings-nav-item.active { background:var(--accent-active); color:var(--text-white); }
.settings-nav-icon { width:14px; height:14px; flex:0 0 14px; display:flex; opacity:.8; }
.settings-nav-note { margin-top:auto; padding:0 10px; color:var(--text-faint); font-size:11px; }
.settings-main { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; }
.close-btn { position:absolute; top:16px; right:16px; z-index:2; width:32px; height:32px; border:0; border-radius:10px; background:transparent; color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; cursor:pointer; transition:background .12s, color .12s; }
.close-btn:hover { background:var(--accent-soft); color:var(--text-white); }
.settings-panels { flex:1; min-height:0; overflow:auto; padding:22px 30px 30px; }
.settings-pane.hidden { display:none; }
.settings-pane-title { margin-bottom:4px; font-size:18px; font-weight:500; color:var(--text-white); }
.group { margin-top:24px; }
.group-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px; color:var(--text-muted); font-size:12px; }
.row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border:0; border-bottom:1px solid var(--border-subtle); background:transparent; color:inherit; text-align:left; }
.row:last-child { border-bottom:0; }
.row-text { min-width:0; }
.row-text b { display:block; font-size:12.5px; font-weight:500; color:var(--text-primary); }
.row-text small { display:block; margin-top:3px; color:var(--text-faint); font-size:11.5px; font-weight:300; line-height:1.45; }
button.row { cursor:pointer; }
.btn { height:30px; padding:0 12px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-3); color:var(--text-secondary); font-size:12px; cursor:pointer; transition:background .12s, color .12s, border-color .12s; white-space:nowrap; }
.btn:hover { background:var(--surface-hover); border-color:var(--border-faint); color:var(--text-white); }
.btn.primary { background:var(--accent); border-color:transparent; color:var(--bg-body); }
.btn.primary:hover { filter:brightness(1.1); background:var(--accent); color:var(--bg-body); }
.btn:focus-visible, .settings-nav-item:focus-visible, .close-btn:focus-visible, .seg button:focus-visible, .wisp-option:focus-visible, .theme-swatch:focus-visible, .wallpaper-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.switch { flex:0 0 auto; width:34px; height:20px; padding:3px; border-radius:999px; background:var(--surface-5); border:1px solid var(--border-faint); transition:background .15s, border-color .15s; }
.switch i { display:block; width:12px; height:12px; border-radius:50%; background:var(--text-faint); transition:transform .15s, background .15s; }
.setting-toggle.active .switch, .switch.active { background:var(--accent); border-color:var(--accent); }
.setting-toggle.active .switch i, .switch.active i { transform:translateX(14px); background:var(--bg-body); }
.seg { display:flex; flex:0 0 auto; padding:3px; border-radius:12px; background:var(--surface-3); border:1px solid var(--border-subtle); }
.seg button { padding:5px 12px; border:0; border-radius:9px; background:transparent; color:var(--text-muted); font-size:12px; cursor:pointer; transition:background .12s, color .12s; }
.seg button:hover { color:var(--text-primary); }
.seg button.active { background:var(--surface-5); color:var(--text-white); }
.select-row select { min-width:130px; height:30px; padding:0 10px; border:1px solid var(--border-subtle); border-radius:11px; outline:none; background:var(--surface-3); color:var(--text-secondary); font-size:12px; }
.select-row select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.server-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.wisp-option { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:12px; cursor:pointer; transition:background .12s; }
.wisp-option:hover { background:var(--surface-3); }
.wisp-option.active { background:var(--accent-soft); }
.wisp-main { min-width:0; display:flex; align-items:center; gap:12px; }
.radio { width:14px; height:14px; flex:0 0 14px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--text-faint); transition:box-shadow .12s; }
.wisp-option.active .radio { box-shadow:inset 0 0 0 4px var(--accent); }
.wisp-text { min-width:0; }
.wisp-option-name { color:var(--text-primary); font-size:13px; font-weight:500; }
.wisp-option-url { margin-top:2px; color:var(--text-faint); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:lowercase; }
.server-status { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ping-text { color:var(--text-faint); font-size:11px; }
.status-indicator { width:7px; height:7px; border-radius:50%; background:var(--text-faint); }
.status-indicator.status-success { background:#61ff8a; }
.status-indicator.status-error { background:#ff6666; }
.delete-wisp-btn { width:24px; height:24px; border:0; border-radius:8px; background:transparent; color:var(--text-faint); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; transition:background .12s, color .12s; }
.delete-wisp-btn:hover { background:rgba(255,80,80,.14); color:#ff6666; }
.wisp-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:6px; padding:14px 12px 4px; border-top:1px solid var(--border-subtle); cursor:pointer; }
.custom-input-group { display:flex; gap:8px; margin-top:12px; }
.custom-input-group input { flex:1; min-width:0; height:34px; padding:0 12px; border:1px solid var(--border-subtle); border-radius:11px; outline:none; background:var(--surface-3); color:var(--text-primary); font-size:13px; text-transform:lowercase; }
.custom-input-group input:focus { border-color:var(--border-faint); box-shadow:0 0 0 3px var(--accent-soft); }
.custom-input-group input.invalid { border-color:#ff6666; }
.custom-input-group .btn { height:34px; }
.theme-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.theme-swatch { height:34px; display:flex; align-items:center; gap:8px; padding:0 14px 0 10px; border:1px solid var(--border-subtle); border-radius:999px; background:var(--surface-3); color:var(--text-secondary); font-size:12px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.theme-swatch:hover { background:var(--surface-5); }
.theme-swatch.active { border-color:var(--accent); color:var(--text-white); }
.theme-dot { width:14px; height:14px; flex:0 0 14px; border-radius:50%; border:1px solid rgba(255,255,255,.18); }
.wallpaper-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.wallpaper-card { padding:0; border:0; background:transparent; text-align:left; cursor:pointer; color:var(--text-muted); font-size:12px; }
.wallpaper-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:var(--surface-4); outline:2px solid transparent; outline-offset:2px; transition:outline-color .12s; }
.wallpaper-card:hover img { outline-color:var(--border-faint); }
.wallpaper-card.active img { outline-color:var(--accent); }
.wallpaper-card.active { color:var(--text-white); }
.wallpaper-card-name { display:block; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wallpaper-empty { padding:12px 0 0; color:var(--text-faint); font-size:12px; }
.background-btn.remove { display:none; }
.background-btn.remove.visible { display:inline-flex; align-items:center; }
.background-actions { display:flex; align-items:center; gap:8px; }
.about-logo { font-size:26px; font-weight:500; color:var(--text-white); }
.about-line { margin-top:8px; color:var(--text-muted); font-size:13px; line-height:1.6; }
.about-links { display:flex; gap:8px; margin-top:20px; }
.about-links a { display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid var(--border-subtle); border-radius:11px; background:var(--surface-3); color:var(--text-secondary); font-size:12px; text-decoration:none; transition:background .12s, color .12s; }
.about-links a:hover { background:var(--surface-hover); color:var(--text-white); }
@media (max-width:640px) {
  .settings-card { flex-direction:column; }
  .settings-nav { width:100%; flex:0 0 auto; flex-direction:row; align-items:center; gap:4px; padding:12px 56px 10px 12px; border-right:0; border-bottom:1px solid var(--border-subtle); overflow-x:auto; }
  .settings-nav h2, .settings-nav-note { display:none; }
  .settings-nav-item { width:auto; flex:0 0 auto; padding:0 12px; }
  .settings-panels { padding:20px 20px 28px; }
  .row { flex-wrap:wrap; }
}

/* blocked ads and trackers */
.block-stats { padding:10px 0 4px; }
.block-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.block-tile { padding:12px 14px; border:1px solid var(--border-subtle); border-radius:13px; background:var(--surface-2); }
.block-tile b { display:block; font-size:20px; font-weight:400; color:var(--text-white); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.block-tile small { display:block; margin-top:2px; color:var(--text-faint); font-size:11.5px; }
.block-since { margin:8px 2px 0; color:var(--text-faint); font-size:11.5px; }
.block-hosts { margin-top:10px; display:flex; flex-direction:column; gap:2px; }
.block-host { display:flex; justify-content:space-between; gap:12px; padding:5px 2px; font-size:12px; color:var(--text-secondary); }
.block-host span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.block-host span:last-child { color:var(--text-faint); font-variant-numeric:tabular-nums; }

/* stealth */
.cloak-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:12px 0 4px; }
.cloak-card { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-3); color:var(--text-secondary); text-align:left; cursor:pointer; transition:background .12s, border-color .12s; }
.cloak-card:hover { background:var(--surface-5); }
.cloak-card.active { border-color:var(--accent); background:var(--accent-soft); }
.cloak-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cloak-card img { width:20px; height:20px; flex:0 0 20px; border-radius:4px; object-fit:contain; }
.cloak-card span { min-width:0; }
.cloak-card b { display:block; font-size:12.5px; font-weight:500; color:var(--text-primary); }
.cloak-card small { display:block; margin-top:2px; color:var(--text-faint); font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-transform:lowercase; }
.panic-key-btn { min-width:96px; font-family:'JetBrains Mono',monospace; text-transform:lowercase; }
.panic-key-btn.recording { border-color:var(--accent); color:var(--accent); animation:panic-blink 1s ease-in-out infinite; }
@keyframes panic-blink { 50% { opacity:.55; } }
.stealth-note { min-height:16px; margin-top:4px; color:var(--accent); font-size:12px; opacity:0; transition:opacity .15s; }
.stealth-note.show { opacity:1; }