/* ---- Skin: Apple native (iOS Human Interface look) -------------------------------------------
   Default via <html data-skin="apple">; the style toggle or ?skin=shielvix switches to the original look. Sits on top of styles.css and
   follows the same light / dark choice. System colors, grouped backgrounds, hairline separators,
   materials instead of shadows, solid squircle app icons, SF type scale. */
:root[data-skin="apple"] {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", "PingFang SC", "PingFang TC", "Hiragino Sans", sans-serif;
  --bg: #f2f2f7; --brand-tint: #f2f2f7; --surface: #ffffff; --surface-2: #f2f2f7; --glass: #f9f9f9cc;
  --ink: #000000; --ink-2: #3c3c43d9; --muted: #3c3c4399; --faint: #3c3c434d;
  --line: #3c3c4329; --line-strong: #3c3c434a; --fill: #7676801f; --fill-2: #78788029;
  --brand: #007aff; --brand-strong: #0062cc; --brand-soft: #007aff1a; --brand-line: #007aff33;
  --risk: #ff3b30; --risk-ink: #d70015; --risk-soft: #ff3b301a; --risk-tint: #ffffff; --risk-line: #ff3b3033;
  --warn: #ff9500; --warn-ink: #c93400; --warn-soft: #ff95001f; --warn-tint: #ffffff; --warn-line: #ff950033;
  --ok: #34c759; --ok-ink: #248a3d; --ok-soft: #34c7591f; --ok-tint: #ffffff; --ok-line: #34c75933;
  --orange: #ff9500; --orange-soft: #ff95001f; --orange-tint: #f2f2f7;
  --teal: #30b0c7; --teal-soft: #30b0c71f; --teal-tint: #f2f2f7;
  --violet: #af52de; --violet-soft: #af52de1f;
  --indigo: #5856d6;
  --shadow-sm: none; --shadow: none;
  --outer: #e5e5ea;
  --radius-card: 12px; --radius-control: 12px;
  --hairline: .5px solid var(--line-strong);
  --ease-out: cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="apple"]:not([data-theme="light"]) {
    --bg: #000000; --brand-tint: #000000; --surface: #1c1c1e; --surface-2: #000000; --glass: #161618cc;
    --ink: #ffffff; --ink-2: #ebebf5d9; --muted: #ebebf599; --faint: #ebebf54d;
    --line: #54545866; --line-strong: #545458a6; --fill: #7676803d; --fill-2: #78788052;
    --brand: #0a84ff; --brand-strong: #409cff; --brand-soft: #0a84ff26; --brand-line: #0a84ff40;
    --risk: #ff453a; --risk-ink: #ff6961; --risk-soft: #ff453a26; --risk-tint: #1c1c1e; --risk-line: #ff453a40;
    --warn: #ff9f0a; --warn-ink: #ffb340; --warn-soft: #ff9f0a26; --warn-tint: #1c1c1e; --warn-line: #ff9f0a40;
    --ok: #30d158; --ok-ink: #30d158; --ok-soft: #30d15826; --ok-tint: #1c1c1e; --ok-line: #30d15840;
    --orange: #ff9f0a; --orange-soft: #ff9f0a26; --orange-tint: #000000;
    --teal: #40c8e0; --teal-soft: #40c8e026;
    --violet: #bf5af2; --violet-soft: #bf5af226; --indigo: #5e5ce6;
    --outer: #000000;
  }
}
:root[data-skin="apple"][data-theme="dark"] {
  --bg: #000000; --brand-tint: #000000; --surface: #1c1c1e; --surface-2: #000000; --glass: #161618cc;
  --ink: #ffffff; --ink-2: #ebebf5d9; --muted: #ebebf599; --faint: #ebebf54d;
  --line: #54545866; --line-strong: #545458a6; --fill: #7676803d; --fill-2: #78788052;
  --brand: #0a84ff; --brand-strong: #409cff; --brand-soft: #0a84ff26; --brand-line: #0a84ff40;
  --risk: #ff453a; --risk-ink: #ff6961; --risk-soft: #ff453a26; --risk-tint: #1c1c1e; --risk-line: #ff453a40;
  --warn: #ff9f0a; --warn-ink: #ffb340; --warn-soft: #ff9f0a26; --warn-tint: #1c1c1e; --warn-line: #ff9f0a40;
  --ok: #30d158; --ok-ink: #30d158; --ok-soft: #30d15826; --ok-tint: #1c1c1e; --ok-line: #30d15840;
  --orange: #ff9f0a; --orange-soft: #ff9f0a26; --orange-tint: #000000;
  --teal: #40c8e0; --teal-soft: #40c8e026;
  --violet: #bf5af2; --violet-soft: #bf5af226; --indigo: #5e5ce6;
  --outer: #000000;
}

/* Canvas: grouped background, no glow, no gradients */
:root[data-skin="apple"] body, :root[data-skin="apple"] .shell { background: var(--bg); }
:root[data-skin="apple"] .shell { box-shadow: 0 0 0 .5px var(--line); }
:root[data-skin="apple"] h1, :root[data-skin="apple"] h2, :root[data-skin="apple"] h3 { letter-spacing: -0.01em; }
:root[data-skin="apple"] .brand-icon, :root[data-skin="apple"] .mobile-logo { filter: none; }
:root[data-skin="apple"] body.alert-mode .shell::after { display: none; }

/* Navigation bar: material + hairline, like UINavigationBar */
:root[data-skin="apple"] .topbar, :root[data-skin="apple"] body.alert-mode .topbar, :root[data-skin="apple"] body.safe-mode .topbar {
  height: 52px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: var(--hairline);
}
:root[data-skin="apple"] .mobile-brand { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
:root[data-skin="apple"] .theme-toggle, :root[data-skin="apple"] .skin-toggle { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--fill); color: var(--brand); }
:root[data-skin="apple"] .language-select { border: 0; border-radius: 8px; background: var(--fill); color: var(--brand); font-size: 15px; font-weight: 400; padding: 5px 8px; }

/* Tab bar: full width, material, hairline top; tint only, no pill */
:root[data-skin="apple"] .mobile-nav {
  left: 50%; bottom: 0; width: min(430px, 100vw); height: calc(50px + env(safe-area-inset-bottom)); padding: 1px 0 env(safe-area-inset-bottom);
  border: 0; border-top: var(--hairline); border-radius: 0; background: var(--glass); box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
:root[data-skin="apple"] .mobile-nav button { gap: 1px; border-radius: 0; color: #999999; }
:root[data-skin="apple"] .mobile-nav button.active { background: none; color: var(--brand); }
:root[data-skin="apple"] .mobile-nav button .i { width: 25px; height: 25px; stroke-width: 1.9; }
:root[data-skin="apple"] .mobile-nav button.active .i { stroke-width: 2.3; }
:root[data-skin="apple"] .mobile-nav button small { font-size: 10px; font-weight: 500; letter-spacing: .01em; }
:root[data-skin="apple"] main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
:root[data-skin="apple"] #toast { bottom: calc(66px + env(safe-area-inset-bottom)); }

/* Grouped cells: white on grouped background, 12px corners, no border, no shadow */
:root[data-skin="apple"] .report-block, :root[data-skin="apple"] .check-panel, :root[data-skin="apple"] .home-link, :root[data-skin="apple"] .log-card,
:root[data-skin="apple"] .guide-item, :root[data-skin="apple"] .history-row, :root[data-skin="apple"] .demo-card, :root[data-skin="apple"] .loading-card,
:root[data-skin="apple"] .report-head, :root[data-skin="apple"] .issue-card, :root[data-skin="apple"] .scenario-tile, :root[data-skin="apple"] .tool-card,
:root[data-skin="apple"] .tool-tile, :root[data-skin="apple"] .guide-progress, :root[data-skin="apple"] .feature-card {
  border: 0; border-radius: 12px; background: var(--surface); box-shadow: none;
}
:root[data-skin="apple"] .issue-card, :root[data-skin="apple"] .issue-card.risk, :root[data-skin="apple"] .score-head.danger, :root[data-skin="apple"] .score-head.safe { background: var(--surface); border: 0; }
:root[data-skin="apple"] .issue-card.risk { animation: none; }
:root[data-skin="apple"] .check-row { border-top: var(--hairline); }
:root[data-skin="apple"] .check-row:first-child { border-top: 0; }
:root[data-skin="apple"] .check-row.risk { background: none; }
:root[data-skin="apple"] .check-row strong, :root[data-skin="apple"] .live-row strong { font-size: 15px; font-weight: 400; color: var(--ink); }
:root[data-skin="apple"] .check-row p, :root[data-skin="apple"] .live-row small { font-size: 13px; color: var(--muted); }
:root[data-skin="apple"] .live-row { border-top: var(--hairline); }
:root[data-skin="apple"] .live-row.just { background: none; }
:root[data-skin="apple"] .live-group.complete { box-shadow: none; }
:root[data-skin="apple"] .home-link { padding: 11px 16px; border-radius: 12px; }
:root[data-skin="apple"] .home-link strong { font-size: 15px; font-weight: 400; }
:root[data-skin="apple"] .home-link small { font-size: 12px; color: var(--muted); }
:root[data-skin="apple"] .home-link > span:last-child { color: #c4c4c7; }

/* App icons: solid system-color squircles with white glyphs (Settings style) */
:root[data-skin="apple"] .tool-icon, :root[data-skin="apple"] .home-link-icon, :root[data-skin="apple"] .log-icon, :root[data-skin="apple"] .history-type,
:root[data-skin="apple"] .feature-icon, :root[data-skin="apple"] .demo-icon, :root[data-skin="apple"] .scenario-issue-icon {
  background: var(--tone, var(--brand)); color: #fff; box-shadow: none;
}
:root[data-skin="apple"] .home-link-icon { width: 30px; height: 30px; border-radius: 7px; }
:root[data-skin="apple"] .home-link-icon .i { width: 19px; height: 19px; stroke-width: 2; }
:root[data-skin="apple"] .log-icon { width: 29px; height: 29px; border-radius: 7px; }
:root[data-skin="apple"] .log-item.event.file_quarantined .log-icon, :root[data-skin="apple"] .log-item.event.file_deleted .log-icon { --tone: var(--violet); background: var(--tone); color: #fff; }
:root[data-skin="apple"] .log-item.event.check_completed .log-icon, :root[data-skin="apple"] .log-item.event.fix_applied .log-icon { --tone: var(--ok); background: var(--tone); color: #fff; }
:root[data-skin="apple"] .log-item.event.password_checked .log-icon { --tone: var(--orange); background: var(--tone); color: #fff; }
:root[data-skin="apple"] .log-item.event.files_scanned .log-icon { --tone: var(--risk); background: var(--tone); color: #fff; }
:root[data-skin="apple"] .demo-icon, :root[data-skin="apple"] .scenario-issue-icon { --tone: var(--risk); }
:root[data-skin="apple"] .tool-card.wide .tool-icon { --tone: var(--orange); background: var(--tone); color: #fff; }

:root[data-skin="apple"] .tool-row { gap: 10px; margin-top: 20px; }
:root[data-skin="apple"] .tool-tile { gap: 9px; padding: 16px 6px 13px; transition: transform .3s var(--ease-out), background .15s; }
:root[data-skin="apple"] .tool-tile:hover { transform: none; box-shadow: none; }
:root[data-skin="apple"] .tool-tile:active { transform: scale(.96); background: color-mix(in srgb, var(--surface) 88%, #7f7f7f); }
:root[data-skin="apple"] .tool-tile .tool-icon { width: 50px; height: 50px; border-radius: 11.2px; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 82%, #fff), var(--tone)); color: #fff; box-shadow: none; }
:root[data-skin="apple"] .tool-tile .tool-icon .i { width: 27px; height: 27px; stroke-width: 2; }
:root[data-skin="apple"] .tool-tile strong { font-size: 13px; font-weight: 500; letter-spacing: 0; }
:root[data-skin="apple"] .tile-lookup { --tone: var(--brand); } :root[data-skin="apple"] .tile-log { --tone: var(--ok); }
:root[data-skin="apple"] .tile-virus { --tone: var(--risk); } :root[data-skin="apple"] .tile-account { --tone: var(--orange); }
:root[data-skin="apple"] .tile-quarantine { --tone: var(--violet); } :root[data-skin="apple"] .tile-guide { --tone: var(--indigo); }
:root[data-skin="apple"] .virus-actions .tool-card .tool-icon { border-radius: 12px; }

/* Home: large-title status, flat status orb, no tinted hero wash */
:root[data-skin="apple"] .guard-hero, :root[data-skin="apple"] .guard-hero.risk, :root[data-skin="apple"] .guard-hero.safe,
:root[data-skin="apple"] .lookup-intro, :root[data-skin="apple"] .checking-head, :root[data-skin="apple"] .checking-head.has-risk, :root[data-skin="apple"] .scenario-hero {
  background: var(--bg); border: 0; border-radius: 0; box-shadow: none;
}
:root[data-skin="apple"] .guard-hero { padding: 22px 20px 6px; }
:root[data-skin="apple"] .guard-hero { grid-template-columns: minmax(0,1fr) 112px; }
:root[data-skin="apple"] .danger-orb.home, :root[data-skin="apple"] .guard-orb { width: 124px; height: 124px; margin-right: -8px; }
:root[data-skin="apple"] .guard-hero h1 { margin: 12px 0 8px; color: var(--ink); font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
:root[data-skin="apple"] .guard-hero.risk h1 { color: var(--risk); }
:root[data-skin="apple"] .guard-library { font-size: 15px; color: var(--muted); }
:root[data-skin="apple"] .guard-library.pending { color: var(--orange); }
:root[data-skin="apple"] .guard-cats { gap: 8px; margin-top: 20px; }
:root[data-skin="apple"] .guard-cat { padding: 5px 11px 5px 8px; border: 0; border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--ink-2); }
:root[data-skin="apple"] .guard-cat.ok { color: var(--ok-ink); } :root[data-skin="apple"] .guard-cat.warn { color: var(--orange); } :root[data-skin="apple"] .guard-cat.risk { color: var(--risk); }
:root[data-skin="apple"] .orb-core { border-width: 0; background: var(--brand); box-shadow: none; }
:root[data-skin="apple"] .risk .orb-core { background: var(--risk); }
:root[data-skin="apple"] .orb-ring { display: none; }
:root[data-skin="apple"] .danger-orb .danger-core { background: var(--risk); box-shadow: 0 0 0 10px var(--risk-soft); animation: none; }
:root[data-skin="apple"] .danger-orb .pulse { border-width: 1.5px; }
:root[data-skin="apple"] .guard-cta { margin-top: 26px; }
:root[data-skin="apple"] .guard-cta small { font-size: 13px; color: var(--muted); }
:root[data-skin="apple"] .guard-cta .text-button { font-size: 15px; font-weight: 400; }

/* Buttons: filled / tinted / plain, no gradients, no lift */
:root[data-skin="apple"] .primary-button, :root[data-skin="apple"] .secondary-button, :root[data-skin="apple"] .danger-button {
  min-height: 50px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; box-shadow: none; filter: none; transform: none; transition: opacity .15s;
}
:root[data-skin="apple"] .primary-button, :root[data-skin="apple"] .guard-cta .primary-button { background: var(--brand); color: #fff; }
:root[data-skin="apple"] .guard-hero.risk .guard-cta .primary-button, :root[data-skin="apple"] .scenario-primary { background: var(--risk); box-shadow: none; }
:root[data-skin="apple"] .guard-cta .primary-button { border-radius: 12px; }
:root[data-skin="apple"] .secondary-button { background: var(--brand-soft); color: var(--brand); }
:root[data-skin="apple"] .danger-button { background: var(--risk-soft); color: var(--risk); }
:root[data-skin="apple"] .primary-button:hover, :root[data-skin="apple"] .secondary-button:hover { filter: none; transform: none; }
:root[data-skin="apple"] .primary-button:active, :root[data-skin="apple"] .secondary-button:active, :root[data-skin="apple"] .danger-button:active { opacity: .7; transform: none; }
:root[data-skin="apple"] .text-button { font-weight: 400; }

/* Controls: segmented control, filled search field, switch-like check */
:root[data-skin="apple"] .type-tabs { gap: 0; padding: 2px; border: 0; border-radius: 9px; background: var(--fill); }
:root[data-skin="apple"] .type-tabs button { padding: 6px 14px; border-radius: 7px; color: var(--ink); font-size: 13px; font-weight: 500; }
:root[data-skin="apple"] .type-tabs button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 3px 8px #0000001f, 0 3px 1px #0000000a; }
:root[data-skin="apple"][data-theme="dark"] .type-tabs button.active { background: #636366; }
:root[data-skin="apple"] .input-shell { min-height: 44px; border: 0; border-radius: 10px; background: var(--fill); box-shadow: none; }
:root[data-skin="apple"] .input-shell:focus-within { border: 0; box-shadow: none; }
:root[data-skin="apple"] .input-shell input { font-size: 17px; }
:root[data-skin="apple"] .file-control { border: 0; border-radius: 12px; background: var(--fill); }
:root[data-skin="apple"] .intel-choice { border-top: var(--hairline); }
:root[data-skin="apple"] .intel-choice input { accent-color: var(--ok); }
:root[data-skin="apple"] :focus-visible, :root[data-skin="apple"] button:focus-visible, :root[data-skin="apple"] a:focus-visible, :root[data-skin="apple"] select:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 1px; box-shadow: none; }

/* Status marks: SF Symbols-like filled circles, plain-text badges */
:root[data-skin="apple"] .st { width: 22px; height: 22px; box-shadow: none; }
:root[data-skin="apple"] .st-ok { background: var(--ok); }
:root[data-skin="apple"] .st-info { background: var(--brand); }
:root[data-skin="apple"] .st-badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
:root[data-skin="apple"] .check-tally > span { background: var(--surface); font-weight: 600; }

/* Results */
:root[data-skin="apple"] .score-head h1 { font-size: 28px; font-weight: 700; }
:root[data-skin="apple"] .gauge-track { stroke: var(--fill); }
:root[data-skin="apple"] .gauge.good .gauge-fill, :root[data-skin="apple"] .gauge.fair .gauge-fill, :root[data-skin="apple"] .gauge.poor .gauge-fill { filter: none; }
:root[data-skin="apple"] .gauge.good .gauge-fill { stroke: var(--ok); } :root[data-skin="apple"] .gauge.good .gauge-num { color: var(--ink); }
:root[data-skin="apple"] .gauge.fair .gauge-num, :root[data-skin="apple"] .gauge.poor .gauge-num { color: var(--ink); }
:root[data-skin="apple"] .gauge-num { font-weight: 700; letter-spacing: -0.03em; }
:root[data-skin="apple"] .issue-card dl { background: var(--bg); border-radius: 10px; }
:root[data-skin="apple"] .issue-card .why summary, :root[data-skin="apple"] .info-tip > summary { background: none; color: var(--brand); }
:root[data-skin="apple"] .info-tip > div { border: 0; border-radius: 13px; background: var(--glass); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 10px 40px #0000002e; }
:root[data-skin="apple"] .passed-block summary { font-size: 15px; font-weight: 400; }
:root[data-skin="apple"] .passed-block summary::after, :root[data-skin="apple"] .guide-item summary::after { color: #c4c4c7; }
:root[data-skin="apple"] .scan-radar { background: radial-gradient(circle, var(--surface) 0 55%, var(--fill) 56% 100%); }
:root[data-skin="apple"] .radar-track { stroke: var(--fill); }
:root[data-skin="apple"] .radar-sweep { background: conic-gradient(from 0deg, #007aff00 0 270deg, #007aff33 360deg); }
:root[data-skin="apple"] .scan-progress, :root[data-skin="apple"] .guide-progress > div, :root[data-skin="apple"] .wizard-progress div, :root[data-skin="apple"] .loading-bar { height: 4px; background: var(--fill); }
:root[data-skin="apple"] .wizard-steps li.current { background: var(--bg); }
:root[data-skin="apple"] .meta-pill, :root[data-skin="apple"] .provider-status, :root[data-skin="apple"] .library-chip, :root[data-skin="apple"] .delta { border: 0; border-radius: 999px; }
:root[data-skin="apple"] .empty-art { border-radius: 22px; background: var(--fill); color: var(--muted); box-shadow: none; }

/* Sheets and alerts: centered UIAlert-like dialog over a dim scrim */
:root[data-skin="apple"] .modal-card, :root[data-skin="apple"] .entry-dialog { border: 0; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 20px 60px #00000040; }
:root[data-skin="apple"] .entry-dialog .primary-button { background: var(--risk); }
:root[data-skin="apple"] .entry-dialog .secondary-button { background: none; color: var(--brand); font-weight: 400; }
:root[data-skin="apple"] .entry-domain { border: 0; border-radius: 8px; background: var(--fill); }

/* Style toggle (both skins) */
.skin-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.skin-toggle .i { width: 18px; height: 18px; vertical-align: 0; }
:root[data-skin="apple"] .skin-toggle { color: var(--brand); }
