:root {
    --bg: #080b12;
    --panel: #111725;
    --panel2: #171f31;
    --line: #263149;
    --text: #edf2ff;
    --muted: #8d9ab4;
    --accent: #7c5cff;
    --accent2: #18c9b8;
    --danger: #ef5571;
    --warning: #f3b84b;
    --radius: 16px;
    --content-width: 1520px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background: radial-gradient(circle at 10% 0, #17203a 0, transparent 34%), var(--bg);
    color: var(--text);
    font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
    line-height: 1.55;
}
a { color: #b9abff; text-decoration: none; }
a:hover { color: #d9d1ff; }
code, pre { font-family: Consolas, monospace; }
button, input, textarea, select { min-width: 0; }

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 9px 13px;
    border-radius: 9px;
    background: #fff;
    color: #111;
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px max(20px, calc((100vw - var(--content-width)) / 2));
    background: rgba(8, 11, 18, .9);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    backdrop-filter: blur(18px);
}
.brand, .auth-logo {
    flex: 0 0 auto;
    color: #fff;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.03em;
}
.brand span, .auth-logo span { color: var(--accent2); }
.topbar nav { display: flex; flex-wrap: wrap; gap: 6px; }
.topbar nav a {
    padding: 8px 11px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.topbar nav a:hover { background: #161d2c; color: #fff; }
.topbar nav a.active {
    background: linear-gradient(135deg, rgba(124, 92, 255, .28), rgba(24, 201, 184, .14));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .36);
}
.nav-toggle {
    display: none;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #171f31;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.container {
    width: min(100%, var(--content-width));
    max-width: var(--content-width);
    margin: auto;
    padding: 34px clamp(16px, 2.4vw, 32px) 80px;
}
.page-heading { margin-bottom: 24px; }
.page-heading h1 { margin: 0; font-size: 32px; letter-spacing: -.04em; }

.panel {
    min-width: 0;
    margin-top: 22px;
    padding: 24px;
    background: linear-gradient(145deg, rgba(23, 31, 49, .94), rgba(14, 19, 31, .96));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}
.panel.narrow { max-width: 680px; }
.panel h2 { margin: 0 0 18px; font-size: 20px; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-bottom: 18px;
}
.panel-head h2 { margin: 0; }
.panel-head p { margin: 4px 0 0; }
.panel-head > * { min-width: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card {
    min-width: 0;
    padding: 22px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.stat-card span { display: block; color: var(--muted); font-size: 14px; }
.stat-card strong { display: block; margin-top: 8px; font-size: 34px; overflow-wrap: anywhere; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 22px; }
.split-grid .panel { margin-top: 0; }

label { display: block; margin: 0 0 16px; color: #c8d1e5; font-size: 14px; font-weight: 700; }
input, textarea, select {
    width: 100%;
    margin-top: 7px;
    padding: 12px 14px;
    color: #fff;
    background: #0b101b;
    border: 1px solid #303b54;
    border-radius: 10px;
    outline: none;
    font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, .15);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), #5b77ff);
    color: #fff;
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.button:hover { color: #fff; filter: brightness(1.08); }
.button.small { min-height: 38px; padding: 7px 12px; font-size: 13px; }
.button.tiny { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.button.ghost { background: #222b3d; }
.button.danger { background: var(--danger); }
.button.full { width: 100%; }
button:disabled, .button:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.actions form { display: inline-flex; margin: 0; }

.muted { color: var(--muted); }
.alert { margin: 0 0 18px; padding: 13px 15px; border: 1px solid #34506a; border-radius: 11px; background: #16263b; overflow-wrap: anywhere; }
.alert.success { border-color: #1b6b5e; background: #103c36; }
.alert.error { border-color: #7a2d3c; background: #451d27; }
.alert.warning { border-color: #6b5525; background: #3c301b; }

.table-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    border: 1px solid rgba(38, 49, 73, .72);
    border-radius: 12px;
    scrollbar-color: #475574 #0b101b;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}
.table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: #0b101b; }
.table-wrap::-webkit-scrollbar-thumb { background: #475574; border: 2px solid #0b101b; border-radius: 999px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: normal; }
th, td {
    min-width: 0;
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #121929;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background-color: rgba(124, 92, 255, .045); }
td a, td small, td code, td pre { overflow-wrap: anywhere; word-break: break-word; }
td small { line-height: 1.35; }
.table-wrap th:last-child,
.table-wrap td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    min-width: 180px;
    background: #151d2d;
    box-shadow: -12px 0 20px rgba(6, 9, 16, .42);
}
.table-wrap th:last-child { z-index: 4; background: #172031; }
.table-wrap tbody tr:hover td:last-child { background: #1a2335; }
.table-wrap td:last-child .actions { flex-wrap: nowrap; }
.table-wrap td:last-child .actions form { flex: 0 0 auto; }

.badge { display: inline-flex; padding: 4px 8px; border: 1px solid #3b4863; border-radius: 999px; color: #b9c5dc; font-size: 11px; white-space: nowrap; }
.badge.active { color: #72e3cc; border-color: #21685c; }
.badge.inactive { color: #ff91a5; border-color: #733040; }
.badge.queued, .badge.planned { color: #d8c279; border-color: #6b5c2c; }
.badge.generating, .badge.assembling, .badge.analyzing, .badge.ready { color: #9eb7ff; border-color: #3d5598; }
.badge.completed { color: #72e3cc; border-color: #21685c; }
.badge.failed, .badge.cancelled, .badge.error { color: #ff91a5; border-color: #733040; }
.empty { padding: 30px; color: var(--muted); text-align: center; }
.empty.compact { padding: 18px; }
.domain-ascii { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.error-text { display: block; max-width: 360px; margin-top: 5px; color: #ff91a5; white-space: normal; }

.search { display: grid; grid-template-columns: minmax(220px, 390px) auto; align-items: center; gap: 8px; max-width: 100%; }
.search input { min-width: 0; margin: 0; }
.steps { padding-left: 22px; color: #c6cfe0; }
.steps li { margin: 13px 0; }
.code-box { padding: 18px; background: #090d16; border: 1px solid #27334a; border-radius: 12px; }
.code-box pre { max-width: 100%; margin: 12px 0 0; overflow: auto; color: #aee9df; }
.footer { padding: 25px; text-align: center; color: #5e6c87; font-size: 12px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(430px, 100%); padding: 30px; background: linear-gradient(145deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.auth-card h1 { margin: 20px 0; font-size: 27px; }
.hero-panel { padding: 34px; }
.hero-panel h2 { font-size: 29px; }
.hero-panel > p { max-width: 800px; color: #b9c4da; }
.eyebrow { color: var(--accent2); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.roadmap div { min-width: 0; padding: 16px; background: #0d1320; border: 1px solid var(--line); border-radius: 12px; }
.roadmap strong { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 9px; background: var(--accent); font-size: 13px; }
.roadmap span { color: #c9d2e4; font-size: 13px; }

.check-label { display: flex; align-items: center; gap: 9px; }
.check-label input { width: auto; margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid > * { min-width: 0; }
.generator-create-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.generator-hero .panel-head h2 { margin-top: 7px; }
.progress-track { height: 12px; margin: 22px 0 10px; overflow: hidden; background: #090d16; border: 1px solid var(--line); border-radius: 999px; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .25s; }
.progress-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.progress-meta strong { color: #fff; }
.generator-actions { margin-top: 22px; flex-wrap: wrap; }
.worker-message { margin-top: 16px; padding: 12px 14px; background: #0b101b; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.profile-list { display: grid; gap: 12px; }
.profile-list article { min-width: 0; padding: 16px; background: #0c121e; border: 1px solid var(--line); border-radius: 12px; }
.profile-list article p { margin: 7px 0; color: var(--muted); font-size: 13px; }
.profile-list article span { color: var(--accent2); font-size: 11px; }

.dashboard-grid { margin-top: 22px; }
.mini-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-stat-grid > div { padding: 14px; background: #0b101b; border: 1px solid var(--line); border-radius: 11px; }
.mini-stat-grid span { display: block; color: var(--muted); font-size: 12px; }
.mini-stat-grid strong { display: block; margin-top: 5px; font-size: 23px; }
.alert-list { display: grid; gap: 10px; }
.alert-list article { min-width: 0; padding: 14px; background: #0b101b; border: 1px solid var(--line); border-radius: 12px; }
.alert-list article > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.alert-list article > strong { display: block; }
.alert-list article p { margin: 6px 0 0; color: #bac5d9; font-size: 13px; overflow-wrap: anywhere; }
.alert-list article small { color: var(--muted); }
.seo-toolbar .panel-head { margin-bottom: 14px; }
.seo-filter { grid-template-columns: minmax(220px, 1fr) minmax(140px, .32fr) minmax(140px, .32fr) auto; }
.seo-filter select { margin: 0; }
.seo-property-table td:first-child { min-width: 250px; }
.seo-property-table td:first-child strong { display: block; }
.seo-property-table td:first-child small { display: block; margin-top: 4px; color: var(--muted); }
.seo-alert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-alert-list article { padding: 18px; }
.seo-alert-list h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.seo-alert-list .actions { margin-top: 13px; }
.alert-meta { color: var(--muted); font-size: 12px; }
.alert-meta time { margin-left: auto; }
.property-picker { min-width: min(360px, 100%); }
.property-picker label { margin: 0; }
.property-picker select { margin-top: 6px; }
.seo-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.seo-kpi-grid article { min-width: 0; padding: 17px; background: #0b101b; border: 1px solid var(--line); border-radius: 13px; }
.seo-kpi-grid span { display: block; color: var(--muted); font-size: 12px; }
.seo-kpi-grid strong { display: block; margin: 6px 0 4px; font-size: 25px; }
.seo-kpi-grid small { display: block; overflow-wrap: anywhere; }
.trend-good { color: #57dfc7 !important; }
.trend-bad { color: #ff8298 !important; }
.compact-alert { margin-top: 0; }
.chart-card { padding: 18px; overflow: hidden; background: #0b101b; border: 1px solid var(--line); border-radius: 13px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.chart-head strong, .chart-head small { display: block; }
.chart-head small { margin-top: 4px; color: var(--muted); }
.chart-legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend span::before { width: 10px; height: 10px; border-radius: 3px; content: ""; }
.chart-legend .impressions::before { background: var(--accent); }
.chart-legend .clicks::before { background: var(--accent2); border-radius: 999px; }
#seo-trend-chart { display: block; width: 100%; max-width: 100%; margin-top: 14px; }
.keyword-performance-table td:first-child { min-width: 190px; }
.keyword-performance-table td:last-child { max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
.table-subtext { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.ai-report-card { padding: 20px; background: #0b101b; border: 1px solid var(--line); border-radius: 14px; }
.ai-report-card h3 { margin: 14px 0 5px; }
.ai-report-card h4 { margin: 0 0 10px; }
.ai-report-card ul { margin: 0; padding-left: 20px; }
.ai-report-card li + li { margin-top: 7px; }
.ai-report-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); font-size: 12px; }
.ai-overview { margin: 0; color: #dce5f7; font-size: 15px; }
.ai-report-section { min-width: 0; margin-top: 20px; }
.priority-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.priority-list article { min-width: 0; padding: 14px; background: #111827; border: 1px solid #2c3851; border-radius: 11px; }
.priority-list strong { display: block; }
.priority-list p { margin: 7px 0; color: #b9c4d9; font-size: 13px; }
.priority-list span { color: #71dfcd; font-size: 13px; }
.ai-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.network-ai-report { margin-top: 14px; padding: 14px 16px; background: #0b101b; border: 1px solid var(--line); border-radius: 12px; }
.network-ai-report summary { color: #d9d2ff; font-weight: 800; cursor: pointer; }
.network-ai-report p { color: #d0daec; }
.network-ai-report li + li { margin-top: 6px; }
.dashboard-ai-summary { margin-top: 14px; padding: 14px; background: #0b101b; border: 1px solid var(--line); border-radius: 11px; }
.dashboard-ai-summary p { margin: 6px 0; color: #bac5d9; font-size: 13px; }
.dashboard-ai-summary a { font-size: 12px; font-weight: 800; }

.seo-command-bar { position: sticky; top: 78px; z-index: 12; padding: 16px 18px; background: rgba(17, 24, 39, .96); box-shadow: 0 14px 36px rgba(0, 0, 0, .28); backdrop-filter: blur(18px); }
.seo-command-grid { display: grid; grid-template-columns: minmax(220px, 1.7fr) minmax(130px, .7fr) minmax(140px, .8fr) minmax(140px, .8fr) auto; align-items: end; gap: 10px; }
.seo-command-grid label { margin: 0; }
.seo-command-grid select, .seo-command-grid input { margin-top: 5px; }
.seo-command-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.batch-progress { margin-top: 14px; padding: 12px; background: #090e18; border: 1px solid var(--line); border-radius: 10px; }
.batch-progress > div:first-child { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; color: #cbd5e7; font-size: 13px; }
.progress-track { height: 8px; overflow: hidden; background: #222c3d; border-radius: 999px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s ease; }
.batch-progress pre { max-height: 150px; margin: 10px 0 0; padding: 10px; overflow: auto; color: #ff9daf; background: #160d14; border-radius: 8px; white-space: pre-wrap; }
.performance-overview { scroll-margin-top: 190px; }
.daily-table { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }
.daily-table summary { padding: 13px 15px; color: #d8e3f7; font-weight: 800; cursor: pointer; }
.daily-table .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opportunity-card { display: flex; min-width: 0; padding: 17px; flex-direction: column; background: #0b101b; border: 1px solid var(--line); border-radius: 14px; }
.opportunity-card h3 { margin: 13px 0 7px; font-size: 18px; overflow-wrap: anywhere; }
.opportunity-card p { min-height: 42px; margin: 0 0 12px; color: #aebbd0; font-size: 13px; }
.opportunity-card > small { display: block; margin-top: 12px; color: #6ee7cf; }
.ai-generation-guide { margin: -4px 0 16px; }
.opportunity-card.is-processing { border-color: #7168ff; box-shadow: 0 0 0 1px rgba(113,104,255,.22), 0 16px 34px rgba(0,0,0,.18); }
.ai-processing-message { display: block; margin-top: 9px; color: #b9b6ff !important; line-height: 1.55; }
.ai-enhancement-form button:disabled { cursor: wait; opacity: .82; }
.opportunity-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opportunity-score { display: grid; place-items: center; width: 42px; height: 42px; color: #0b101b; background: linear-gradient(135deg, #67e8d3, #fbbf55); border-radius: 13px; font-size: 16px; font-weight: 950; }
.opportunity-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.opportunity-card dl div { padding: 9px; background: #111827; border-radius: 9px; }
.opportunity-card dt { color: var(--muted); font-size: 10px; }
.opportunity-card dd { margin: 3px 0 0; font-weight: 850; }
.opportunity-url { display: block; margin: 10px 0 12px; color: #9aa8c0; font-size: 11px; overflow-wrap: anywhere; }
.opportunity-card .actions { margin-top: auto; }
.admin-disclosure { padding: 0; overflow: hidden; }
.admin-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; cursor: pointer; }
.admin-disclosure > summary span { color: var(--muted); font-size: 12px; }
.admin-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.disclosure-body { padding: 20px; }
.seo-content-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; background: radial-gradient(circle at 85% 15%, rgba(124, 92, 255, .2), transparent 34%), #111827; }
.seo-content-hero h2 { margin: 10px 0 7px; font-size: clamp(28px, 4vw, 44px); }
.seo-content-hero p { max-width: 780px; color: #c3cde0; }
.seo-content-hero small { color: var(--muted); }
.back-link { color: #81e8d5; font-size: 13px; font-weight: 800; }
.draft-meta { display: flex; gap: 8px; margin-top: 15px; }
.metric-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.metric-list div { min-width: 0; padding: 11px; background: #0b101b; border-radius: 9px; }
.metric-list dt { color: var(--muted); font-size: 11px; }
.metric-list dd { margin: 5px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.keyword-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.keyword-chips span { padding: 6px 9px; color: #cfc7ff; background: rgba(124, 92, 255, .12); border: 1px solid rgba(124, 92, 255, .28); border-radius: 999px; font-size: 12px; }
.before-after-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.before-after-grid article { padding: 17px; background: #0b101b; border: 1px solid var(--line); border-radius: 12px; }
.before-after-grid article.after { background: rgba(20, 184, 166, .07); border-color: rgba(20, 184, 166, .35); }
.before-after-grid span { display: block; margin: 12px 0 5px; color: var(--muted); font-size: 11px; }
.before-after-grid span:first-child { margin-top: 0; }
.before-after-grid p { margin: 0; color: #bec9dc; }
.draft-section-list { display: grid; gap: 12px; }
.draft-section-list > article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 15px; padding: 18px; background: #0b101b; border: 1px solid var(--line); border-radius: 13px; }
.draft-section-list > article > span { display: grid; place-items: center; width: 40px; height: 40px; color: #101827; background: var(--accent); border-radius: 12px; font-weight: 900; }
.draft-section-list h3 { margin: 0 0 4px; }
.draft-section-list small { color: #67d9c6; }
.draft-section-list p { color: #c1ccde; }
.seo-manual-apply-notice { margin-bottom: 0; border-color: rgba(24, 201, 184, .48); background: rgba(16, 74, 68, .58); }
.seo-manual-apply-notice code { padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .25); color: #d8fff8; }
.decision-checks { display: grid; gap: 7px; margin-bottom: 0; padding-left: 20px; color: #c4cfe2; }
.new-page-plan { margin-top: 18px; }
.seo-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seo-evidence-grid article { display: grid; gap: 6px; min-width: 0; padding: 17px; background: #0b101b; border: 1px solid var(--line); border-radius: 12px; }
.seo-evidence-grid span { color: #72e5d1; font-size: 12px; font-weight: 800; }
.seo-evidence-grid strong { font-size: 20px; }
.seo-evidence-grid small { color: #c2cde0; }
.seo-evidence-grid em { color: var(--muted); font-size: 11px; font-style: normal; }
.badge.approved, .badge.improved { color: #71e8d1; background: rgba(20, 184, 166, .13); border-color: rgba(20, 184, 166, .35); }
.badge.applied { color: #facc6b; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .32); }
.badge.dismissed, .badge.declined { color: #ff9caf; background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .32); }
.badge.steady, .badge.insufficient { color: #c7d2e7; background: rgba(148, 163, 184, .11); border-color: rgba(148, 163, 184, .25); }
.content-audit-panel { overflow: hidden; }
.content-audit-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.content-audit-kpis article { min-width: 0; padding: 15px; background: #0b101b; border: 1px solid var(--line); border-radius: 12px; }
.content-audit-kpis span { display: block; color: var(--muted); font-size: 11px; }
.content-audit-kpis strong { display: block; margin-top: 6px; font-size: 21px; }
.audit-last-run { margin: 0 0 14px; }
.content-audit-table td:nth-child(3), .content-audit-table td:nth-child(4) { min-width: 260px; }
.content-audit-table td strong, .content-audit-table td a { display: block; }
.content-audit-table td a { margin-top: 5px; overflow-wrap: anywhere; color: #91a7ff; font-size: 12px; }
.badge.audit-exact { color: #ff91a5; border-color: #733040; background: rgba(244, 63, 94, .1); }
.badge.audit-high { color: #ffca7a; border-color: #76511e; background: rgba(245, 158, 11, .1); }
.badge.audit-medium { color: #f5e88c; border-color: #6b6326; }
.badge.audit-partial { color: #b9c5dc; border-color: #3b4863; }
.audit-run-history { margin-top: 14px; }
.audit-run-history summary { cursor: pointer; color: #b9c5dc; font-weight: 750; }

:focus-visible { outline: 2px solid #a999ff; outline-offset: 2px; }

@media (max-width: 1050px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-grid { grid-template-columns: 1fr; }
    .split-grid .panel + .panel { margin-top: 0; }
    .form-grid, .generator-create-grid { grid-template-columns: 1fr; }
    .seo-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .priority-list, .ai-two-column { grid-template-columns: 1fr; }
    .seo-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seo-command-grid > :first-child { grid-column: 1 / -1; }
    .opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seo-evidence-grid { grid-template-columns: 1fr; }
    .content-audit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 14px;
        padding: 12px 16px;
    }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .topbar nav {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        padding-top: 5px;
    }
    .topbar nav.open { display: grid; }
    .topbar nav a { text-align: center; }
    .container { padding-top: 24px; }
    .panel-head { align-items: stretch; flex-direction: column; }
    .panel-head .search, .search { width: 100%; }
    .progress-meta { flex-direction: column; }
    .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seo-filter { grid-template-columns: 1fr 1fr; }
    .seo-filter input { grid-column: 1 / -1; }
    .seo-alert-list { grid-template-columns: 1fr; }
    .seo-command-bar { position: static; }
    .seo-content-hero { flex-direction: column; }
}

@media (max-width: 680px) {
    .page-heading h1 { font-size: 26px; }
    .panel, .hero-panel { padding: 18px; border-radius: 13px; }
    .hero-panel h2 { font-size: 24px; }
    .stat-grid, .roadmap { grid-template-columns: 1fr; }
    .mini-stat-grid { grid-template-columns: 1fr; }
    .seo-kpi-grid { grid-template-columns: 1fr; }
    .content-audit-kpis { grid-template-columns: 1fr; }
    .chart-head { align-items: flex-start; flex-direction: column; }
    .search { grid-template-columns: minmax(0, 1fr) auto; }
    .table-wrap table { min-width: 720px; }
    th, td { padding: 11px 10px; font-size: 13px; }
    .table-wrap th:last-child, .table-wrap td:last-child { min-width: 172px; }
    .opportunity-grid, .before-after-grid { grid-template-columns: 1fr; }
    .seo-command-grid { grid-template-columns: 1fr; }
    .seo-command-grid > :first-child { grid-column: auto; }
    .seo-command-actions .button, .seo-command-actions form { width: 100%; }
    .seo-command-actions form .button { width: 100%; }
    .metric-list { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .topbar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .container { padding-inline: 12px; }
    .search { grid-template-columns: 1fr; }
    .search .button { width: 100%; }
    .seo-filter { grid-template-columns: 1fr; }
    .seo-filter input { grid-column: auto; }
    .actions { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
