/* Brainwerk Security Suite admin styles — minimal, native WP feel. */

.shieldforge-wrap { max-width: 1280px; }

.shieldforge-title { display: flex; align-items: center; gap: 10px; }
.shieldforge-title .dashicons { color: #1d6fa5; font-size: 28px; width: 28px; height: 28px; }
.shieldforge-brand-icon { display: inline-block; vertical-align: middle; border-radius: 6px; }
.shieldforge-title .shieldforge-version {
    font-size: 12px; color: #50575e; font-weight: 400;
    background: #f0f0f1; padding: 2px 8px; border-radius: 10px;
}

.shieldforge-tabs { margin-top: 12px; }
.shieldforge-tab-content { margin-top: 16px; }

.shieldforge-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.shieldforge-card {
    background: #fff; border: 1px solid #c3c4c7; border-radius: 6px;
    padding: 16px 20px; box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.shieldforge-card h2 { margin-top: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: #1d2327; }

/* Stats grid */
.shieldforge-stats { display: flex; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.shieldforge-stats li {
    flex: 1 1 90px; min-width: 90px;
    padding: 12px; background: #f6f7f7; border-radius: 6px; text-align: center;
}
.shieldforge-stats li.warn { background: #fcf9e8; }
.shieldforge-stats li.high { background: #fcebea; }
.shieldforge-stats .num { display: block; font-size: 22px; font-weight: 600; color: #1d2327; }
.shieldforge-stats .lbl { display: block; font-size: 11px; color: #50575e; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.shieldforge-stats--lg .num { font-size: 32px; }

/* Toggles */
.shieldforge-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.shieldforge-toggle input[type="checkbox"] { width: 18px; height: 18px; }
.shieldforge-toggle .title { font-weight: 600; }
.shieldforge-toggle-list { list-style: none; padding: 0; margin: 0; }
.shieldforge-toggle-list > li { padding: 12px 0; border-bottom: 1px solid #f0f0f1; }
.shieldforge-toggle-list > li:last-child { border-bottom: none; }
.shieldforge-toggle-list .description { margin-left: 26px; color: #50575e; }

/* Module list */
.shieldforge-module-list { list-style: none; padding: 0; margin: 0; }
.shieldforge-module-list li { padding: 6px 0; border-bottom: 1px solid #f0f0f1; }
.shieldforge-module-list li:last-child { border-bottom: none; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-right: 8px; }
.pill--on { background: #d1ecd1; color: #2d6a2d; }
.pill--off { background: #e0e0e0; color: #505050; }

/* Severity badges */
.sf-sev { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; text-align: center; }
.sf-sev-1 { background: #e0e7ec; color: #50575e; }
.sf-sev-2 { background: #fcf3cf; color: #7d6608; }
.sf-sev-3 { background: #fadbd8; color: #922b21; }
.sf-sev-4 { background: #c0392b; color: #fff; }

/* Misc */
.muted { color: #50575e; }
.shieldforge-filter { display: flex; gap: 12px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
.shieldforge-datamap { list-style: square; padding-left: 20px; }
.shieldforge-events { padding: 0; margin: 0; list-style: none; }
.shieldforge-events li { padding: 4px 0; border-bottom: 1px dashed #f0f0f1; }
.shieldforge-events .ago { color: #999; font-size: 11px; }

/* Dashboard widget */
.shieldforge-widget .shieldforge-stats { margin-bottom: 12px; }
.shieldforge-widget-foot { margin-top: 12px; text-align: right; }

/* Phase 2 additions */

/* Sparkline */
.sf-sparkline { display: block; width: 100%; height: 36px; margin-top: 8px; opacity: .7; }

/* Stat tiles used on Multisite tab */
.sf-stats-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 8px; }
.sf-stat { background: #f6f7f7; border-radius: 6px; padding: 12px; text-align: center; }
.sf-stat-num { display: block; font-size: 26px; font-weight: 600; color: #1d2327; }
.sf-stat-label { display: block; font-size: 11px; color: #50575e; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

/* Toggle (used in newer views) */
.sf-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
.sf-toggle input[type="checkbox"] { width: 18px; height: 18px; }

/* Health-check status pill */
.sf-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.sf-status-ok { background: #d1ecd1; color: #2d6a2d; }
.sf-status-warn { background: #fcf3cf; color: #7d6608; }
.sf-status-fail { background: #fadbd8; color: #922b21; }

/* Beta badge */
.sf-badge { display: inline-block; background: #f0f0f1; color: #50575e; font-size: 10px; padding: 2px 8px; border-radius: 8px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: .5px; }
.sf-badge-warn { background: #fcf2c5; color: #8a6d00; }
.sf-badge-high { background: #facfd2; color: #b32d2e; }
.sf-badge-pro  { background: linear-gradient(90deg,#3858e9,#1d4ed8); color:#fff; }

.sf-upgrade-hint { border-left: 4px solid #3858e9; }
.sf-upgrade-hint h3 { margin-top: 0; }
.sf-feature-list { margin: .5em 0 1em 1.2em; padding: 0; }
.sf-feature-list li { margin: .25em 0; list-style: disc; }
.sf-error { color: #b32d2e; }

/* Onboarding language picker */
.sf-locale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 1em 0; }
.sf-locale-option { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 2px solid #dcdcde; border-radius: 8px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.sf-locale-option:hover { border-color: #3858e9; background: #f6f7ff; }
.sf-locale-option.is-selected { border-color: #3858e9; background: #eef2ff; }
.sf-locale-option input[type="radio"] { margin: 0; }
.sf-locale-code { font-weight: 600; color: #3858e9; min-width: 28px; }
.sf-locale-label { color: #1d2327; }

/* Tab icons */
.shieldforge-tabs .nav-tab .dashicons { vertical-align: middle; margin-right: 4px; font-size: 16px; width: 16px; height: 16px; line-height: 1; opacity: .65; }
.shieldforge-tabs .nav-tab-active .dashicons { opacity: 1; color: #3858e9; }

/* Anomaly threat header */
.sf-threat-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; border: 1px solid #dcdcde; background: #fff; }
.sf-threat-header.is-calm     { background: #ecf7ee; border-color: #b7dec0; }
.sf-threat-header.is-elevated { background: #fff8e1; border-color: #f7d472; }
.sf-threat-header.is-high     { background: #fdf0e3; border-color: #f0a361; }
.sf-threat-header.is-critical { background: #fdecec; border-color: #e89595; }
.sf-threat-score { font-size: 28px; font-weight: 700; min-width: 70px; text-align: center; padding: 6px 14px; border-radius: 6px; background: rgba(0,0,0,.06); }
.sf-threat-label { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.sf-threat-meta  { color: #50575e; font-size: 13px; margin-top: 2px; }
.sf-threat-bar   { flex: 1; height: 8px; background: #e5e5e7; border-radius: 4px; overflow: hidden; max-width: 280px; }
.sf-threat-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#3ab37a,#f0a361,#e25c5c); transition: width .25s; }

/* Dashboard-widget compact variant */
.sf-widget-threat { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; margin: 0 0 12px; background:#f6f7f7; position:relative; overflow:hidden; }
.sf-widget-threat .score { font-size:22px; font-weight:700; min-width:46px; text-align:center; padding:6px 6px; border-radius:4px; background:rgba(0,0,0,.08); line-height:1; }
.sf-widget-threat .meta { flex:1; min-width:0; }
.sf-widget-threat .meta strong { display:block; font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
.sf-widget-threat .meta span { font-size:11px; color:#50575e; display:block; line-height:1.4; }
.sf-widget-threat .bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.07); }
.sf-widget-threat .bar > span { display:block; height:100%; background:linear-gradient(90deg,#3ab37a,#f0a361,#e25c5c); }
.sf-widget-threat.is-calm     { background:#ecf7ee; }
.sf-widget-threat.is-elevated { background:#fff8e1; }
.sf-widget-threat.is-high     { background:#fdf0e3; }
.sf-widget-threat.is-critical { background:#fdecec; }

.sf-widget-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; list-style:none; margin:0 0 12px; padding:0; }
.sf-widget-stats li { background:#f6f7f7; padding:8px 4px; text-align:center; border-radius:4px; }
.sf-widget-stats li.warn { background:#fff8e1; }
.sf-widget-stats li.high { background:#fdecec; }
.sf-widget-stats .num { display:block; font-size:18px; font-weight:600; line-height:1.1; }
.sf-widget-stats .lbl { display:block; font-size:11px; color:#50575e; text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }

.sf-widget-h4 { margin:8px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#50575e; }
.sf-widget-ips { list-style:none; margin:0 0 10px; padding:0; }
.sf-widget-ips li { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid #f0f0f1; font-size:12px; }
.sf-widget-ips code { background:transparent; font-size:12px; }
.sf-widget-ips .hits { color:#50575e; font-size:11px; }

.sf-widget-events { list-style:none; margin:0 0 10px; padding:0; max-height:120px; overflow-y:auto; }
.sf-widget-events li { padding:3px 0; border-bottom:1px solid #f0f0f1; font-size:12px; display:flex; gap:6px; align-items:center; }
.sf-widget-events li.sev-warn code { color:#8a6d00; }
.sf-widget-events li.sev-high code { color:#b32d2e; font-weight:600; }
.sf-widget-events code { background:transparent; font-size:11px; }
.sf-widget-events .ip { color:#50575e; font-size:11px; }
.sf-widget-events .ago { margin-left:auto; color:#787c82; font-size:11px; white-space:nowrap; }

.sf-widget-foot { margin: 6px 0 0; }

/* Widget action items */
.sf-widget-actions { list-style:none; margin:0 0 12px; padding:0; }
.sf-widget-actions li { padding:6px 8px; margin-bottom:4px; border-radius:4px; font-size:12px; line-height:1.35; border-left:3px solid #ccc; }
.sf-widget-actions li.sev-critical { background:#fdecec; border-left-color:#b32d2e; }
.sf-widget-actions li.sev-warning  { background:#fff8e1; border-left-color:#f0a361; }
.sf-widget-actions li.sev-info     { background:#eef2ff; border-left-color:#3858e9; }
.sf-widget-actions li a { text-decoration:none; color:inherit; display:block; }
.sf-widget-actions li a:hover { text-decoration:underline; }

/* Widget stat-grid trend arrows (the <em> inside .lbl) */
.sf-widget-stats em { font-style:normal; font-size:11px; opacity:.6; margin-left:2px; }

/* Widget system-status strip */
.sf-widget-sysrow { display:flex; flex-wrap:wrap; gap:6px 10px; padding:8px 10px; background:#f6f7f7; border-radius:4px; margin-bottom:12px; font-size:11px; }
.sf-widget-sysrow span { display:inline-flex; align-items:center; gap:5px; cursor:default; }
.sf-widget-sysrow .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.sf-widget-sysrow .on  { color:#1d2327; }
.sf-widget-sysrow .on  .dot { background:#3ab37a; box-shadow:0 0 0 2px rgba(58,179,122,.18); }
.sf-widget-sysrow .off { color:#8c8f94; }
.sf-widget-sysrow .off .dot { background:#dcdcde; }

/* 2-col layout for top attackers + targeted users */
.sf-widget-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:8px; }
.sf-widget-cols > div { min-width:0; }
.sf-widget-cols code { font-size:11px; }

/* Onboarding stepper */
.sf-onboarding { padding: 24px; }
.sf-onboarding-stepper { display: flex; gap: 12px; padding: 0; margin: 0 0 24px; list-style: none; }
.sf-onboarding-stepper li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #f0f0f1; border-radius: 16px; font-size: 12px; color: #50575e; }
.sf-onboarding-stepper li.is-current { background: #1d6fa5; color: #fff; }
.sf-onboarding-stepper li.is-done { background: #d1ecd1; color: #2d6a2d; }
.sf-step-num { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; background: rgba(0,0,0,.08); border-radius: 50%; font-weight: 600; }
.sf-onboarding-stepper li.is-current .sf-step-num { background: rgba(255,255,255,.25); }
.sf-onboarding-nav { margin-top: 24px; display: flex; justify-content: space-between; }
.sf-checklist { padding-left: 18px; }
.sf-checklist li { padding: 4px 0; }

/* Privacy snippet block */
.sf-snippet-lang { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.sf-snippet-preview { background: #f6f7f7; padding: 16px; border-radius: 6px; margin-top: 12px; }
.sf-snippet-preview h2 { text-transform: none; letter-spacing: 0; font-size: 18px; }

/* Logs Phase-2 widgets */
.sf-result-count { margin-left: auto; color: #50575e; font-size: 12px; }

/* Notice */
.shieldforge-notice { border-left-color: #1d6fa5; }

/* Scanner findings table */
.sf-event-type { display:inline-block; padding:1px 7px; border-radius:10px; background:#eef2ff; color:#1d3a8a; font-size:11px; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }

/* Tab-intro card (short text + expandable details, non-expert-friendly) */
.sf-intro {
    background: #f0f6fc;
    border: 1px solid #c5d9ed;
    border-left: 4px solid #2271b1;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 0 0 18px;
}
.sf-intro-short {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.55;
    color: #1d2327;
}
.sf-intro-icon { flex: 0 0 auto; font-size: 22px; color: #2271b1; margin-top: 1px; }
.sf-intro-text { flex: 1 1 auto; }
.sf-intro-text strong { color: #0a4b78; }
.sf-intro-details { margin-top: 10px; }
.sf-intro-details > summary {
    cursor: pointer;
    color: #2271b1;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 0;
    display: inline-block;
    list-style: none;
    user-select: none;
}
.sf-intro-details > summary::-webkit-details-marker { display: none; }
.sf-intro-details > summary::before {
    content: "▶";
    display: inline-block;
    font-size: 10px;
    margin-right: 6px;
    transition: transform .15s;
}
.sf-intro-details[open] > summary::before { transform: rotate(90deg); }
.sf-intro-details > summary:hover { color: #0a4b78; }
.sf-intro-long { padding: 8px 0 4px 16px; max-width: 800px; }
.sf-intro-long h3 { margin: 14px 0 4px; font-size: 13px; color: #0a4b78; text-transform: uppercase; letter-spacing: .4px; }
.sf-intro-long h3:first-child { margin-top: 4px; }
.sf-intro-long p { margin: 4px 0 8px; font-size: 13px; line-height: 1.55; color: #1d2327; }
.sf-intro-long code { background: #fff; padding: 1px 5px; border-radius: 3px; border: 1px solid #dcdcde; font-size: 12px; }
/* Column glossary inside the intro details */
.sf-intro-cols { margin: 4px 0 0; padding: 0; }
.sf-intro-cols dt { font-weight: 600; color: #0a4b78; margin: 8px 0 2px; font-size: 13px; }
.sf-intro-cols dt:first-child { margin-top: 0; }
.sf-intro-cols dd { margin: 0 0 4px; padding-left: 14px; border-left: 2px solid #c5d9ed; font-size: 13px; line-height: 1.55; color: #1d2327; }
.sf-intro-cols dd code { background: #fff; padding: 1px 5px; border-radius: 3px; border: 1px solid #dcdcde; font-size: 12px; }

/* ====================================================================
 * UX-Pass v0.9.0: tab grouping, hero dashboard, modern toggles, mobile,
 * dark-mode, tooltip bubbles, action-item cards.
 * ==================================================================== */

/* --- Tab grouping (UX 1) --- */
.shieldforge-tabs-grouped { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 0 0; border-bottom: 1px solid #c3c4c7; }
.shieldforge-tabs-grouped .sf-tab-group { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.shieldforge-tabs-grouped .sf-tab-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #50575e; padding: 0 4px 4px; }
.shieldforge-tabs-grouped .sf-tab-group .nav-tab { margin: 0 2px 0 0; padding: 6px 10px; font-size: 12px; }
.shieldforge-tabs-grouped .sf-tab-group .nav-tab .dashicons { font-size: 16px; line-height: 1; vertical-align: -3px; margin-right: 3px; }

/* --- Hero status banner (UX 2) --- */
.sf-hero { display: flex; align-items: center; gap: 22px; padding: 20px 24px; border-radius: 8px; margin: 18px 0 12px; position: relative; overflow: hidden; border: 1px solid #c3c4c7; background: #fff; }
.sf-hero.is-calm     { background: linear-gradient(135deg, #ecf7ee 0%, #f3faf5 100%); border-color: #b7dec0; }
.sf-hero.is-elevated { background: linear-gradient(135deg, #fff8e1 0%, #fffdf2 100%); border-color: #f7d472; }
.sf-hero.is-high     { background: linear-gradient(135deg, #fdf0e3 0%, #fef7ee 100%); border-color: #f0a361; }
.sf-hero.is-critical { background: linear-gradient(135deg, #fdecec 0%, #fef5f5 100%); border-color: #e89595; }
.sf-hero-score { display: flex; align-items: baseline; gap: 4px; min-width: 130px; padding: 12px 24px; background: rgba(255,255,255,.65); border-radius: 8px; }
.sf-hero-score-num { font-size: 56px; font-weight: 800; line-height: 1; color: #1d2327; }
.sf-hero-score-max { font-size: 16px; color: #50575e; font-weight: 500; }
.sf-hero-text { flex: 1 1 auto; min-width: 0; }
.sf-hero-emoji { font-size: 24px; margin-right: 8px; }
.sf-hero-headline { font-size: 22px; font-weight: 700; color: #1d2327; line-height: 1.25; margin-bottom: 6px; }
.sf-hero-sub { color: #50575e; font-size: 14px; }
.sf-hero-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.06); }
.sf-hero-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#3ab37a,#f0a361,#e25c5c); transition: width .3s; }

/* --- Action-item cards (UX 2) --- */
.sf-action-items { margin: 0 0 18px; }
.sf-action-items-title { font-size: 14px; margin: 0 0 10px; color: #50575e; text-transform: uppercase; letter-spacing: .5px; }
.sf-action-items-empty { padding: 14px 18px; background: #ecf7ee; border-left: 4px solid #3ab37a; border-radius: 4px; color: #2d6a2d; font-weight: 600; }
.sf-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.sf-action-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #dcdcde; border-left-width: 4px; border-radius: 4px; text-decoration: none; color: #1d2327; transition: transform .12s, box-shadow .12s; }
.sf-action-card:hover { transform: translateX(2px); box-shadow: 0 2px 6px rgba(0,0,0,.08); color: #1d2327; }
.sf-action-card.sf-action-critical { border-left-color: #b32d2e; background: #fdecec; }
.sf-action-card.sf-action-warning  { border-left-color: #f0a361; background: #fff8e1; }
.sf-action-card.sf-action-info     { border-left-color: #3858e9; background: #eef2ff; }
.sf-action-icon { font-size: 22px; flex: 0 0 auto; }
.sf-action-text { flex: 1 1 auto; font-size: 13px; line-height: 1.4; }
.sf-action-arrow { color: #50575e; flex: 0 0 auto; }

/* --- Modern toggle switches (UX 3) --- */
/* Replace the look of the .sf-toggle wrapper's inner checkbox with an iOS-style slider. */
.sf-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.sf-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; background: #c5c5c5; border-radius: 999px; position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; margin: 0; border: none; box-shadow: none; outline: none; }
.sf-toggle input[type="checkbox"]:before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sf-toggle input[type="checkbox"]:checked { background: #3ab37a; }
.sf-toggle input[type="checkbox"]:checked:before { transform: translateX(16px); }
.sf-toggle input[type="checkbox"]:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.sf-toggle input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* --- Tooltip bubbles via [data-sf-tip] (UX 8) --- */
[data-sf-tip] { position: relative; cursor: help; border-bottom: 1px dotted #888; }
[data-sf-tip]:hover::after, [data-sf-tip]:focus::after {
    content: attr(data-sf-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1d2327; color: #fff; padding: 6px 10px; border-radius: 4px;
    font-size: 12px; line-height: 1.4; font-weight: 400;
    white-space: nowrap; max-width: 320px; white-space: normal; width: max-content;
    box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 9999;
    pointer-events: none;
}
[data-sf-tip]:hover::before, [data-sf-tip]:focus::before {
    content: ""; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1d2327; z-index: 9999;
}

/* --- Mobile responsiveness (UX 6) --- */
@media (max-width: 782px) {
    .shieldforge-tabs-grouped { gap: 10px; padding-top: 8px; }
    .shieldforge-tabs-grouped .sf-tab-group { flex-direction: column; align-items: stretch; }
    .shieldforge-tabs-grouped .sf-tab-group-label { padding: 0 6px 2px; }
    .shieldforge-tabs-grouped .nav-tab { font-size: 13px; padding: 8px 12px; }
    .sf-hero { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; padding: 16px; }
    .sf-hero-score { width: 100%; justify-content: center; }
    .sf-hero-score-num { font-size: 44px; }
    .sf-hero-headline { font-size: 18px; }
    .sf-action-grid { grid-template-columns: 1fr; }
    .shieldforge-grid { grid-template-columns: 1fr !important; }
    .sf-intro-short { flex-direction: column; gap: 6px; }
    .sf-intro-icon { font-size: 26px; }
    .sf-threat-header { flex-direction: column; text-align: center; }
}

/* --- Dark-mode (matches WP's "Midnight" admin color scheme + prefers-color-scheme) --- */
body.admin-color-midnight .sf-intro,
body.admin-color-ectoplasm .sf-intro,
body.admin-color-ocean .sf-intro {
    background: #2c3338; border-color: #50575e; border-left-color: #72aee6;
}
body.admin-color-midnight .sf-intro-text,
body.admin-color-ectoplasm .sf-intro-text,
body.admin-color-ocean .sf-intro-text { color: #f0f0f1; }
body.admin-color-midnight .sf-intro-text strong,
body.admin-color-ectoplasm .sf-intro-text strong,
body.admin-color-ocean .sf-intro-text strong { color: #72aee6; }
body.admin-color-midnight .sf-intro-long h3,
body.admin-color-ectoplasm .sf-intro-long h3,
body.admin-color-ocean .sf-intro-long h3 { color: #72aee6; }
body.admin-color-midnight .sf-intro-long p,
body.admin-color-ectoplasm .sf-intro-long p,
body.admin-color-ocean .sf-intro-long p { color: #f0f0f1; }
body.admin-color-midnight .sf-intro-long code,
body.admin-color-ectoplasm .sf-intro-long code,
body.admin-color-ocean .sf-intro-long code { background: #1d2327; color: #f0f0f1; border-color: #3c434a; }
body.admin-color-midnight .sf-hero,
body.admin-color-ectoplasm .sf-hero,
body.admin-color-ocean .sf-hero { background: #2c3338; border-color: #50575e; }
body.admin-color-midnight .sf-hero-headline,
body.admin-color-ectoplasm .sf-hero-headline,
body.admin-color-ocean .sf-hero-headline { color: #f0f0f1; }

/* --- Empty-state hero card (UX 4) --- */
.sf-empty-state { text-align: center; padding: 40px 20px; background: #fff; border: 1px dashed #c3c4c7; border-radius: 8px; margin: 14px 0; }
.sf-empty-state .sf-empty-icon { font-size: 48px; color: #c3c4c7; line-height: 1; margin-bottom: 10px; }
.sf-empty-state h3 { margin: 0 0 8px; font-size: 18px; color: #1d2327; }
.sf-empty-state p { margin: 0 auto 16px; max-width: 480px; color: #50575e; line-height: 1.5; }
.sf-empty-state .button { font-size: 14px; padding: 6px 18px; }

/* --- Quick-Setup wizard banner (UX 5) --- */
.sf-quick-setup { background: linear-gradient(135deg, #eef2ff 0%, #f6f7ff 100%); border: 1px solid #c5d9ed; border-radius: 8px; padding: 18px 22px; margin: 0 0 18px; }
.sf-quick-setup-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.sf-quick-setup-emoji { font-size: 32px; flex: 0 0 auto; line-height: 1; margin-top: 2px; }
.sf-quick-setup-title { margin: 0 0 4px; font-size: 18px; color: #0a4b78; }
.sf-quick-setup-sub { margin: 0; color: #50575e; font-size: 13px; line-height: 1.45; }
.sf-quick-setup-dismiss { font-size: 22px; line-height: 1; padding: 4px 10px; color: #50575e; text-decoration: none; }
.sf-quick-setup-dismiss:hover { color: #b32d2e; }
.sf-quick-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sf-quick-setup-card { margin: 0; }
.sf-quick-setup-card-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; width: 100%; background: #fff; border: 1px solid #c5d9ed; border-radius: 6px; cursor: pointer; text-align: left; transition: all .15s; }
.sf-quick-setup-card-btn:hover { border-color: #2271b1; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34,113,177,.12); }
.sf-quick-setup-card-icon { font-size: 24px; color: #2271b1; margin-bottom: 4px; }
.sf-quick-setup-card-title { font-size: 15px; font-weight: 600; color: #1d2327; }
.sf-quick-setup-card-desc { font-size: 12px; color: #50575e; line-height: 1.4; flex: 1; }
.sf-quick-setup-card-cta { font-size: 12px; color: #2271b1; font-weight: 600; margin-top: 8px; }

/* --- Sanity-check table (1.0-readiness pre-launch checker) --- */
.sf-sanity-summary { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 12px 16px; border-radius: 6px; flex-wrap: wrap; }
.sf-sanity-summary.is-ok   { background: #ecf7ee; border: 1px solid #b7dec0; }
.sf-sanity-summary.is-warn { background: #fff8e1; border: 1px solid #f7d472; }
.sf-sanity-summary.is-fail { background: #fdecec; border: 1px solid #e89595; }
.sf-sanity-pill { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #fff; }
.sf-sanity-pill-ok   { color: #2d6a2d; }
.sf-sanity-pill-warn { color: #8a6d00; }
.sf-sanity-pill-fail { color: #b32d2e; }
.sf-sanity-tagline { margin-left: auto; font-weight: 600; color: #1d2327; font-size: 13px; }

/* --- Generic status pills (Threat Network tab + reusable) --- */
.sf-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #e8e8ed; color: #50575e; }
.sf-pill-ok   { background: #ecf7ee; color: #2d6a2d; }
.sf-pill-warn { background: #fff8e1; color: #8a6d00; }
.sf-sanity-table .sf-sanity-icon { font-size: 18px; font-weight: 700; }
.sf-sanity-row-ok   .sf-sanity-icon { color: #2d6a2d; }
.sf-sanity-row-warn .sf-sanity-icon { color: #f0a361; }
.sf-sanity-row-fail .sf-sanity-icon { color: #b32d2e; }
.sf-sanity-row-fail td { background: #fef5f5; }
.sf-sanity-row-warn td { background: #fffbf0; }
@media (max-width: 600px) {
    .sf-quick-setup { padding: 14px 16px; }
    .sf-quick-setup-grid { grid-template-columns: 1fr; }
}

/* v0.12 modules page — cards grid (moved out of the page-modules.php
   template so the plugin ships no inline <style> blocks). */
.sf-v12-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sf-v12-card { background: #fff; border: 1px solid #c3c4c7; border-radius: 6px; padding: 16px 20px; }
.sf-v12-card h2 { margin-top: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.sf-v12-card .status { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.sf-v12-card .status.on { background: #e6f5ea; color: #2e8b3e; }
.sf-v12-card .status.off { background: #f5f5f7; color: #6e6e73; }
.sf-v12-card label.row { display: block; margin: 6px 0; font-size: 13px; }
.sf-v12-card .hint { font-size: 12px; color: #646970; margin: 4px 0; }
.sf-v12-runner { background: #f0f6fc; border-left: 3px solid #2271b1; padding: 10px 14px; margin-top: 10px; border-radius: 4px; }
.sf-v12-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.sf-v12-table th, .sf-v12-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid #f0f0f1; }
.sf-v12-table th { background: #f6f7f7; font-weight: 600; }
