/* FreelanceBo Sentra Control — Admin UI v2.4.8
 * Design tokens, dark mode, responsive, accessible focus states.
 */

:root {
    --sentra-radius-sm: 6px;
    --sentra-radius-md: 10px;
    --sentra-radius-lg: 14px;
    --sentra-radius-pill: 999px;

    --sentra-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --sentra-shadow-md: 0 4px 12px rgba(15,23,42,.08);
    --sentra-shadow-lg: 0 10px 28px rgba(15,23,42,.12);

    --sentra-dur-fast: 120ms;
    --sentra-dur: 200ms;
    --sentra-dur-slow: 320ms;
    --sentra-ease: cubic-bezier(.4, 0, .2, 1);

    --sentra-fg: #0f172a;
    --sentra-fg-muted: #475569;
    --sentra-fg-subtle: #64748b;
    --sentra-bg: #ffffff;
    --sentra-bg-soft: #f8fafc;
    --sentra-bg-softer: #f1f5f9;
    --sentra-border: #e2e8f0;
    --sentra-border-strong: #cbd5e1;

    --sentra-brand: #7c3aed;
    --sentra-brand-600: #6d28d9;
    --sentra-brand-soft: #f3e8ff;

    --sentra-critical: #dc2626;
    --sentra-critical-bg: #fee2e2;
    --sentra-high: #ea580c;
    --sentra-high-bg: #ffedd5;
    --sentra-medium: #ca8a04;
    --sentra-medium-bg: #fef9c3;
    --sentra-low: #2563eb;
    --sentra-low-bg: #dbeafe;
    --sentra-ok: #15803d;
    --sentra-ok-bg: #dcfce7;

    --sentra-ring: 0 0 0 2px var(--sentra-bg), 0 0 0 4px var(--sentra-brand);
}

.sentra-wrap { max-width: 1200px; color: var(--sentra-fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.sentra-wrap * { box-sizing: border-box; }

/* Page header */
.sentra-page-header { display: flex; align-items: center; gap: 14px; padding: 20px 0 18px; border-bottom: 1px solid var(--sentra-border); margin-bottom: 22px; }
.sentra-page-header .sentra-page-icon { width: 36px; height: 36px; border-radius: var(--sentra-radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--sentra-brand-soft); color: var(--sentra-brand); }
.sentra-page-header .sentra-page-icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.sentra-page-header h1 { margin: 0; padding: 0; font-size: 22px; font-weight: 700; color: var(--sentra-fg); border: 0; }
.sentra-page-header .sentra-version-badge { margin-left: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--sentra-radius-pill); background: var(--sentra-bg-softer); color: var(--sentra-fg-muted); letter-spacing: .3px; }
.sentra-page-header .sentra-page-meta { margin-left: auto; font-size: 12px; color: var(--sentra-fg-subtle); display: flex; align-items: center; gap: 10px; }
.sentra-page-header .sentra-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--sentra-border-strong); }
.sentra-page-header .sentra-dot.ok { background: var(--sentra-ok); box-shadow: 0 0 0 3px var(--sentra-ok-bg); }
.sentra-page-header .sentra-dot.fail { background: var(--sentra-critical); box-shadow: 0 0 0 3px var(--sentra-critical-bg); }

/* Main tabs */
.sentra-main-tabs { display: flex; gap: 0; margin: 0 0 8px; border-bottom: 2px solid var(--sentra-border); overflow-x: auto; scrollbar-width: none; }
.sentra-main-tabs::-webkit-scrollbar { display: none; }
.sentra-main-tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--sentra-fg-subtle); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--sentra-dur) var(--sentra-ease), border-color var(--sentra-dur) var(--sentra-ease); white-space: nowrap; }
.sentra-main-tab:hover { color: var(--sentra-fg); }
.sentra-main-tab.active { color: var(--sentra-brand); border-bottom-color: var(--sentra-brand); }
.sentra-main-tab:focus-visible { outline: none; box-shadow: var(--sentra-ring); border-radius: var(--sentra-radius-sm); }
.sentra-main-tab .dashicons { font-size: 18px; width: 18px; height: 18px; }
.sentra-main-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--sentra-radius-pill); font-size: 11px; font-weight: 800; background: var(--sentra-bg-softer); color: var(--sentra-fg-muted); }
.sentra-main-tab-count.has-issues { background: var(--sentra-critical-bg); color: var(--sentra-critical); }
.sentra-main-tab-count:empty { display: none; }

/* Tab panels */
.sentra-tab-panel { display: none; padding: 20px 0; }
.sentra-tab-panel.active { display: block; }
.sentra-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.sentra-panel-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sentra-fg-muted); }
.sentra-panel-label { font-weight: 500; }
.sentra-panel-info strong { color: var(--sentra-fg); }

/* Cards grid */
.sentra-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0 0 22px; }
.sentra-card { background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-lg); padding: 20px 16px; text-align: center; transition: box-shadow var(--sentra-dur) var(--sentra-ease), transform var(--sentra-dur) var(--sentra-ease); position: relative; overflow: hidden; }
.sentra-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sentra-border-strong); transition: background var(--sentra-dur); }
.sentra-card:hover { box-shadow: var(--sentra-shadow-md); transform: translateY(-2px); }
.sentra-card .sentra-card-value { font-size: 32px; font-weight: 800; color: var(--sentra-fg); line-height: 1.1; }
.sentra-card .sentra-card-label { font-size: 11px; color: var(--sentra-fg-subtle); margin-top: 6px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.sentra-card .sentra-card-delta { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--sentra-fg-muted); }
.sentra-card .sentra-card-delta.up { color: var(--sentra-critical); }
.sentra-card .sentra-card-delta.down { color: var(--sentra-ok); }
.sentra-card.sentra-danger::before { background: var(--sentra-critical); }
.sentra-card.sentra-danger .sentra-card-value { color: var(--sentra-critical); }
.sentra-card.sentra-success::before { background: var(--sentra-ok); }
.sentra-card.sentra-success .sentra-card-value { color: var(--sentra-ok); }
.sentra-card.sentra-warning::before { background: var(--sentra-medium); }
.sentra-card.sentra-warning .sentra-card-value { color: var(--sentra-medium); }
.sentra-card.sentra-hero { grid-column: span 2; }
@media (max-width: 700px) { .sentra-card.sentra-hero { grid-column: span 1; } }

/* Toolbar */
.sentra-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--sentra-bg-soft); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-md); margin-bottom: 18px; flex-wrap: wrap; }
.sentra-toolbar .sentra-toolbar-icon { color: var(--sentra-brand); }
.sentra-toolbar .sentra-toolbar-label { color: var(--sentra-fg); font-weight: 600; }
.sentra-toolbar .sentra-spacer { flex: 1; }
.sentra-toolbar .sentra-toolbar-hint { font-size: 12px; color: var(--sentra-fg-subtle); }

/* Form controls */
.sentra-select, .sentra-input { padding: 7px 12px; border: 1px solid var(--sentra-border-strong); border-radius: var(--sentra-radius-sm); background: var(--sentra-bg); color: var(--sentra-fg); font-size: 13px; transition: border-color var(--sentra-dur); }
.sentra-select:hover, .sentra-input:hover { border-color: var(--sentra-fg-subtle); }
.sentra-select:focus-visible, .sentra-input:focus-visible { outline: none; border-color: var(--sentra-brand); box-shadow: var(--sentra-ring); }

/* Buttons */
.sentra-actions { margin: 14px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.sentra-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--sentra-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--sentra-dur) var(--sentra-ease), transform var(--sentra-dur-fast) var(--sentra-ease), box-shadow var(--sentra-dur) var(--sentra-ease); text-decoration: none; line-height: 1.2; background: var(--sentra-bg); color: var(--sentra-fg); border-color: var(--sentra-border-strong); }
.sentra-btn:hover { box-shadow: var(--sentra-shadow-sm); transform: translateY(-1px); }
.sentra-btn:active { transform: translateY(0); }
.sentra-btn:focus-visible { outline: none; box-shadow: var(--sentra-ring); }
.sentra-btn:disabled { opacity: .5; cursor: not-allowed; }
.sentra-btn-primary { background: var(--sentra-brand); color: #fff; border-color: var(--sentra-brand); }
.sentra-btn-primary:hover { background: var(--sentra-brand-600); border-color: var(--sentra-brand-600); color: #fff; }
.sentra-btn-danger { background: var(--sentra-critical); color: #fff; border-color: var(--sentra-critical); }
.sentra-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.sentra-btn-success { background: var(--sentra-ok); color: #fff; border-color: var(--sentra-ok); }
.sentra-btn-sm { padding: 5px 11px; font-size: 12px; }
.sentra-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Progress bar (indeterminate) */
.sentra-progress-bar { background: var(--sentra-bg-soft); border: 1px solid var(--sentra-border); padding: 12px 18px; border-radius: var(--sentra-radius-md); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--sentra-fg); position: relative; overflow: hidden; }
.sentra-progress-bar::after { content: ''; position: absolute; left: -30%; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--sentra-brand-soft), transparent); animation: sentra-slide 1.4s linear infinite; }
@keyframes sentra-slide { to { left: 100%; } }

/* Scan card */
.sentra-scan-card { background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-lg); margin-bottom: 14px; overflow: hidden; transition: box-shadow var(--sentra-dur) var(--sentra-ease); }
.sentra-scan-card:hover { box-shadow: var(--sentra-shadow-md); }
.sentra-sc-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.sentra-sc-head strong { font-size: 15px; color: var(--sentra-fg); font-weight: 700; }
.sentra-sc-status { font-size: 11px; padding: 4px 12px; border-radius: var(--sentra-radius-pill); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.sentra-st-ok { background: var(--sentra-ok-bg); color: var(--sentra-ok); }
.sentra-st-fail { background: var(--sentra-critical-bg); color: var(--sentra-critical); }
.sentra-st-pending { background: var(--sentra-medium-bg); color: var(--sentra-medium); }
.sentra-st-running { background: var(--sentra-low-bg); color: var(--sentra-low); }
.sentra-sc-date { font-size: 12px; color: var(--sentra-fg-subtle); font-weight: 500; }
.sentra-sc-count { font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: var(--sentra-radius-pill); letter-spacing: .2px; }
.sentra-sc-count.danger { background: var(--sentra-critical-bg); color: var(--sentra-critical); }
.sentra-sc-count.ok { background: var(--sentra-ok-bg); color: var(--sentra-ok); }

/* Severity bar with stacked proportion */
.sentra-sev-bar { display: flex; gap: 0; border-top: 1px solid var(--sentra-border); border-bottom: 1px solid var(--sentra-border); background: var(--sentra-bg-soft); }
.sentra-sev-bar-row { display: flex; gap: 0; }
.sentra-sb-item { flex: 1; text-align: center; padding: 14px 8px; border-right: 1px solid var(--sentra-border); transition: background var(--sentra-dur-fast); cursor: default; }
.sentra-sb-item:last-child { border-right: none; }
.sentra-sb-item:hover { background: var(--sentra-bg-softer); }
.sentra-sb-item b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--sentra-fg); }
.sentra-sb-item small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--sentra-fg-subtle); margin-top: 4px; font-weight: 700; }
.sentra-sb-critical b { color: var(--sentra-critical); }
.sentra-sb-high b { color: var(--sentra-high); }
.sentra-sb-medium b { color: var(--sentra-medium); }
.sentra-sb-low b { color: var(--sentra-low); }
.sentra-sb-cve b { color: var(--sentra-brand); }
.sentra-sb-cfg b { color: var(--sentra-fg-muted); }
.sentra-sev-stacked { display: flex; height: 4px; background: var(--sentra-bg-softer); }
.sentra-sev-stacked span { display: block; transition: width var(--sentra-dur-slow) var(--sentra-ease); }
.sentra-sev-stacked .s-critical { background: var(--sentra-critical); }
.sentra-sev-stacked .s-high { background: var(--sentra-high); }
.sentra-sev-stacked .s-medium { background: var(--sentra-medium); }
.sentra-sev-stacked .s-low { background: var(--sentra-low); }

/* Details panel */
.sentra-sc-details { padding: 20px; background: var(--sentra-bg-soft); border-top: 1px solid var(--sentra-border); }

/* Filter tabs (sub) */
.sentra-ftabs { display: flex; gap: 0; margin-bottom: 18px; background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-md); overflow: hidden; }
.sentra-ftab { flex: 1; background: none; border: none; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--sentra-fg-subtle); cursor: pointer; transition: color var(--sentra-dur), background var(--sentra-dur); text-align: center; border-right: 1px solid var(--sentra-border); }
.sentra-ftab:last-child { border-right: none; }
.sentra-ftab:hover { color: var(--sentra-fg); background: var(--sentra-bg-soft); }
.sentra-ftab.active { color: var(--sentra-brand); background: var(--sentra-brand-soft); }
.sentra-ftab:focus-visible { outline: none; box-shadow: inset var(--sentra-ring); }

/* Section */
.sentra-section { margin-bottom: 22px; }
.sentra-sec-title { font-size: 15px; font-weight: 700; color: var(--sentra-fg); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.sentra-sec-count { background: var(--sentra-bg-softer); color: var(--sentra-fg-muted); font-size: 11px; padding: 3px 10px; border-radius: var(--sentra-radius-pill); font-weight: 700; }

/* Software group */
.sentra-grp { border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-md); margin-bottom: 10px; overflow: hidden; background: var(--sentra-bg); transition: box-shadow var(--sentra-dur); }
.sentra-grp:hover { box-shadow: var(--sentra-shadow-sm); }
.sentra-grp-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; transition: background var(--sentra-dur-fast); flex-wrap: wrap; user-select: none; }
.sentra-grp-head:hover { background: var(--sentra-bg-soft); }
.sentra-grp-head:focus-visible { outline: none; box-shadow: inset var(--sentra-ring); }
.sentra-grp-head strong { font-size: 14px; color: var(--sentra-fg); font-weight: 700; }
.sentra-grp-cnt { font-size: 11px; color: var(--sentra-fg-subtle); font-weight: 600; }
.sentra-grp-arr { color: var(--sentra-fg-subtle); font-size: 14px !important; margin-left: auto; transition: transform var(--sentra-dur); }
.sentra-grp.open .sentra-grp-arr { transform: rotate(180deg); }
.sentra-grp-body { border-top: 1px solid var(--sentra-border); display: none; }
.sentra-grp.open .sentra-grp-body { display: block; }

.sentra-type-tag { font-size: 10px; padding: 3px 10px; border-radius: var(--sentra-radius-pill); background: var(--sentra-brand-soft); color: var(--sentra-brand); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sentra-ver-tag { font-size: 11px; color: var(--sentra-fg-subtle); font-family: "SF Mono", "Consolas", monospace; font-weight: 600; }

/* CVE card */
.sentra-cve { display: flex; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--sentra-border); transition: background var(--sentra-dur-fast); }
.sentra-cve:last-child { border-bottom: none; }
.sentra-cve:hover { background: var(--sentra-bg-soft); }
.sentra-cve-left { min-width: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sentra-cve-sev { font-size: 9px; font-weight: 800; padding: 5px 8px; border-radius: var(--sentra-radius-sm); text-align: center; width: 100%; letter-spacing: .5px; text-transform: uppercase; }
.sentra-cve-cvss { text-align: center; }
.sentra-cve-cvss b { font-size: 18px; display: block; line-height: 1.1; font-weight: 800; color: var(--sentra-fg); }
.sentra-cve-cvss small { font-size: 9px; color: var(--sentra-fg-subtle); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }

.sentra-cve-right { flex: 1; min-width: 0; }
.sentra-cve-title { font-size: 14px; font-weight: 600; color: var(--sentra-fg); line-height: 1.5; margin-bottom: 8px; }
.sentra-cve-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sentra-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 10px; border-radius: var(--sentra-radius-sm); text-decoration: none; font-weight: 600; transition: background var(--sentra-dur-fast); }
.sentra-tag-cve { background: var(--sentra-brand-soft); color: var(--sentra-brand); }
.sentra-tag-cve:hover { background: #e9d5ff; color: var(--sentra-brand-600); }
.sentra-tag-wf { background: var(--sentra-low-bg); color: var(--sentra-low); }
.sentra-tag-fix { background: var(--sentra-ok-bg); color: var(--sentra-ok); font-weight: 700; }
.sentra-tag-fix::before { content: '✓ '; }
.sentra-tag-nofix { background: var(--sentra-critical-bg); color: var(--sentra-critical); }
.sentra-cve-rec { font-size: 12px; color: var(--sentra-fg-muted); line-height: 1.55; margin-top: 4px; }
.sentra-cve-refs { margin-top: 6px; }
.sentra-ref { font-size: 11px; color: var(--sentra-fg-subtle); text-decoration: none; margin-right: 10px; border-bottom: 1px dashed var(--sentra-border-strong); padding-bottom: 1px; }
.sentra-ref:hover { color: var(--sentra-fg-muted); border-color: var(--sentra-fg-subtle); }

/* Config row */
.sentra-cfg-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--sentra-border); background: var(--sentra-bg); border-radius: var(--sentra-radius-sm); margin-bottom: 6px; transition: background var(--sentra-dur-fast); }
.sentra-cfg-row:hover { background: var(--sentra-bg-soft); }
.sentra-cfg-txt { flex: 1; }
.sentra-cfg-txt > div:first-child { font-size: 13px; color: var(--sentra-fg); font-weight: 500; line-height: 1.5; }
.sentra-cfg-rec { font-size: 12px; color: var(--sentra-fg-muted); margin-top: 4px; line-height: 1.5; font-style: italic; }

/* Severity badges */
.sentra-badge { display: inline-block; padding: 4px 10px; border-radius: var(--sentra-radius-sm); font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.sentra-badge-critical { background: var(--sentra-critical-bg); color: var(--sentra-critical); }
.sentra-badge-high { background: var(--sentra-high-bg); color: var(--sentra-high); }
.sentra-badge-medium { background: var(--sentra-medium-bg); color: var(--sentra-medium); }
.sentra-badge-low { background: var(--sentra-low-bg); color: var(--sentra-low); }
.sentra-badge-info { background: var(--sentra-bg-softer); color: var(--sentra-fg-muted); }

/* Tables */
.sentra-table { width: 100%; border-collapse: collapse; background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-md); overflow: hidden; margin-top: 12px; }
.sentra-table thead th { background: var(--sentra-bg-soft); padding: 11px 14px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--sentra-fg-muted); letter-spacing: .4px; border-bottom: 1px solid var(--sentra-border); }
.sentra-table tbody td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--sentra-border); color: var(--sentra-fg); }
.sentra-table tbody tr:last-child td { border-bottom: none; }
.sentra-table tbody tr:hover td { background: var(--sentra-bg-soft); }

/* Loading & skeleton */
.sentra-loading { padding: 24px; text-align: center; color: var(--sentra-fg-subtle); font-size: 13px; }
.sentra-skeleton { background: linear-gradient(90deg, var(--sentra-bg-softer) 0%, var(--sentra-border) 50%, var(--sentra-bg-softer) 100%); background-size: 200% 100%; animation: sentra-shimmer 1.3s linear infinite; border-radius: var(--sentra-radius-sm); }
@keyframes sentra-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sentra-skel-card { height: 110px; }
.sentra-skel-row { height: 14px; margin: 8px 0; }
.sentra-skel-row.wide { width: 70%; }
.sentra-skel-row.narrow { width: 40%; }

/* Empty state */
.sentra-empty { text-align: center; padding: 48px 24px; color: var(--sentra-fg-subtle); background: var(--sentra-bg-soft); border: 1px dashed var(--sentra-border-strong); border-radius: var(--sentra-radius-lg); }
.sentra-empty-icon { font-size: 40px; margin-bottom: 12px; color: var(--sentra-ok); }
.sentra-empty-title { font-size: 16px; font-weight: 700; color: var(--sentra-fg); margin-bottom: 6px; }
.sentra-empty-body { font-size: 13px; max-width: 360px; margin: 0 auto; line-height: 1.6; }

/* Setup (welcome) card */
.sentra-welcome { background: linear-gradient(135deg, var(--sentra-brand-soft) 0%, var(--sentra-bg-soft) 100%); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-lg); padding: 24px 28px; margin: 20px 0; box-shadow: var(--sentra-shadow-sm); }
.sentra-welcome h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--sentra-fg); display: flex; align-items: center; gap: 8px; }
.sentra-welcome h2 .dashicons { color: var(--sentra-brand); }
.sentra-welcome ol { margin: 0 0 0 20px; padding: 0; line-height: 1.9; color: var(--sentra-fg-muted); font-size: 14px; }
.sentra-welcome ol li::marker { color: var(--sentra-brand); font-weight: 700; }
.sentra-welcome a { color: var(--sentra-brand); font-weight: 600; }

/* Notice */
.sentra-notice { border-left: 4px solid var(--sentra-border-strong); background: var(--sentra-bg-soft); border-radius: var(--sentra-radius-sm); padding: 12px 16px; margin: 12px 0; font-size: 13px; color: var(--sentra-fg); }
.sentra-notice-warning { border-left-color: var(--sentra-medium); background: var(--sentra-medium-bg); }
.sentra-notice-danger { border-left-color: var(--sentra-critical); background: var(--sentra-critical-bg); }
.sentra-notice-ok { border-left-color: var(--sentra-ok); background: var(--sentra-ok-bg); }

/* Toast */
.sentra-toast-container { position: fixed; top: 40px; right: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.sentra-toast { background: var(--sentra-bg); color: var(--sentra-fg); border: 1px solid var(--sentra-border); border-left: 4px solid var(--sentra-brand); border-radius: var(--sentra-radius-md); padding: 12px 18px; box-shadow: var(--sentra-shadow-lg); font-size: 13px; font-weight: 500; min-width: 260px; max-width: 420px; pointer-events: auto; animation: sentra-toast-in var(--sentra-dur-slow) var(--sentra-ease); }
.sentra-toast.ok { border-left-color: var(--sentra-ok); }
.sentra-toast.err { border-left-color: var(--sentra-critical); }
@keyframes sentra-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Premium badge */
.sentra-premium-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: var(--sentra-radius-pill); background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; border: 1px solid #f59e0b; letter-spacing: .6px; text-transform: uppercase; }
.sentra-premium-badge::before { content: '★'; font-size: 11px; }

/* Settings page custom layout */
.sentra-settings-form { max-width: 720px; }
.sentra-settings-group { background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-lg); margin-bottom: 18px; overflow: hidden; }
.sentra-settings-group-head { padding: 14px 20px; background: var(--sentra-bg-soft); border-bottom: 1px solid var(--sentra-border); font-size: 13px; font-weight: 700; color: var(--sentra-fg); letter-spacing: .2px; }
.sentra-settings-group-body { padding: 18px 20px; }
.sentra-field { margin-bottom: 18px; }
.sentra-field:last-child { margin-bottom: 0; }
.sentra-field label { display: block; font-size: 13px; font-weight: 600; color: var(--sentra-fg); margin-bottom: 6px; }
.sentra-field input[type="text"], .sentra-field input[type="url"], .sentra-field input[type="password"] { width: 100%; max-width: 460px; }
.sentra-field .description { margin-top: 6px; font-size: 12px; color: var(--sentra-fg-subtle); line-height: 1.6; }
.sentra-field .description strong { color: var(--sentra-fg-muted); }

/* Responsive */
@media (max-width: 700px) {
    .sentra-sev-bar, .sentra-sev-bar-row { flex-wrap: wrap; }
    .sentra-sb-item { flex: 1 1 33%; border-bottom: 1px solid var(--sentra-border); }
}
@media (max-width: 960px) {
    .sentra-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 600px) {
    .sentra-wrap { padding: 0 4px; }
    .sentra-panel-header { flex-direction: column; align-items: stretch; }
    .sentra-actions { flex-direction: column; }
    .sentra-btn { justify-content: center; }
    .sentra-cve { flex-direction: column; }
    .sentra-cve-left { flex-direction: row; min-width: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Utility */
.sentra-hidden { display: none !important; }
.sentra-spinner-reset { float: none; margin: 0 8px 0 0; }
.sentra-toggle-resolved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sentra-fg-muted); cursor: pointer; }
.sentra-toggle-resolved input { margin: 0; }
.sentra-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sentra-fg); }
.sentra-checkbox input { margin: 0; }
.sentra-test-result { margin-left: 10px; font-size: 13px; }
.sentra-test-result.ok { color: var(--sentra-ok); font-weight: 600; }
.sentra-test-result.err { color: var(--sentra-critical); font-weight: 600; }

/* Collapsible forms (default hidden, revealed via JS slideDown) */
#sentra-add-rule-form, #sentra-add-ip-form { display: none; background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-radius: var(--sentra-radius-lg); padding: 20px; margin-bottom: 20px; box-shadow: var(--sentra-shadow-sm); }
#sentra-add-rule-form h3, #sentra-add-ip-form h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--sentra-fg); }
.sentra-form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sentra-form-row > * { flex: 1; min-width: 160px; }
.sentra-form-row input[type="text"], .sentra-form-row input[type="number"], .sentra-form-row select, .sentra-form-row textarea { padding: 8px 12px; border: 1px solid var(--sentra-border-strong); border-radius: var(--sentra-radius-sm); background: var(--sentra-bg); color: var(--sentra-fg); font-size: 13px; }
.sentra-form-row input:focus-visible, .sentra-form-row select:focus-visible, .sentra-form-row textarea:focus-visible { outline: none; border-color: var(--sentra-brand); box-shadow: var(--sentra-ring); }

/* Force readable contrast in WP admin regardless of OS color scheme */
.sentra-wrap { color: var(--sentra-fg); }
.sentra-wrap, .sentra-wrap .sentra-card, .sentra-wrap .sentra-scan-card,
.sentra-wrap .sentra-grp, .sentra-wrap .sentra-settings-group,
.sentra-wrap .sentra-table { background: var(--sentra-bg); }
.sentra-wrap h1, .sentra-wrap h2, .sentra-wrap h3, .sentra-wrap strong,
.sentra-wrap label, .sentra-wrap p { color: var(--sentra-fg); }
.sentra-wrap .description { color: var(--sentra-fg-muted); }

/* Auto-patch suggestions cards */
#sentra-patch-suggestions { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 28px; }
.sentra-patch-card { background: var(--sentra-bg); border: 1px solid var(--sentra-border); border-left: 4px solid var(--sentra-border-strong); border-radius: var(--sentra-radius-lg); padding: 18px 22px; box-shadow: var(--sentra-shadow-sm); transition: box-shadow var(--sentra-dur) var(--sentra-ease), transform var(--sentra-dur) var(--sentra-ease); }
.sentra-patch-card:hover { box-shadow: var(--sentra-shadow-md); }
.sentra-patch-sev-critical { border-left-color: var(--sentra-critical); }
.sentra-patch-sev-high { border-left-color: var(--sentra-high); }
.sentra-patch-sev-medium { border-left-color: var(--sentra-medium); }
.sentra-patch-sev-low { border-left-color: var(--sentra-low); }
.sentra-patch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sentra-patch-type { font-size: 14px; font-weight: 700; color: var(--sentra-fg); }
.sentra-patch-target { font-family: "SF Mono", Consolas, monospace; font-size: 13px; color: var(--sentra-fg-muted); background: var(--sentra-bg-softer); padding: 2px 8px; border-radius: var(--sentra-radius-sm); }
.sentra-patch-risk { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--sentra-fg-muted); text-transform: uppercase; letter-spacing: .4px; }
.sentra-patch-risk[data-risk="critical"] { color: var(--sentra-critical); }
.sentra-patch-risk[data-risk="high"] { color: var(--sentra-high); }
.sentra-patch-risk[data-risk="medium"] { color: var(--sentra-medium); }
.sentra-patch-desc { margin: 6px 0 8px; font-size: 13px; color: var(--sentra-fg); line-height: 1.55; }
.sentra-patch-version { margin: 4px 0; font-size: 13px; color: var(--sentra-fg-muted); }
.sentra-patch-version code { background: var(--sentra-bg-softer); padding: 2px 7px; border-radius: var(--sentra-radius-sm); font-size: 12px; color: var(--sentra-fg); }
.sentra-patch-cves { margin: 8px 0; font-size: 12px; color: var(--sentra-fg-muted); line-height: 1.55; }
.sentra-patch-cves strong { color: var(--sentra-fg); font-weight: 600; display: block; margin-bottom: 4px; }
.sentra-patch-cves ul { margin: 4px 0 0; padding-left: 18px; }
.sentra-patch-cves li { margin-bottom: 4px; }
.sentra-patch-cvss { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--sentra-radius-sm); background: var(--sentra-brand-soft); color: var(--sentra-brand); }
.sentra-patch-cve-single { margin: 6px 0; font-size: 13px; color: var(--sentra-fg); }
.sentra-patch-extra { margin: 6px 0; font-size: 12px; color: var(--sentra-fg-muted); line-height: 1.55; }
.sentra-patch-approval { margin: 10px 0 4px; padding: 8px 12px; background: var(--sentra-medium-bg); color: var(--sentra-medium); border-radius: var(--sentra-radius-sm); font-size: 12px; font-weight: 600; }
.sentra-patch-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.sentra-patch-date { font-size: 12px; color: var(--sentra-fg-subtle); }

/* Spin animation for update icon */
.dashicons.spin { animation: sentra-spin 1s linear infinite; }
@keyframes sentra-spin { to { transform: rotate(360deg); } }