/*
 * Core SEO — admin shell, dashboard and settings (same layout as JobCore and News.).
 * --cseo-a is the accent, set inline on .cseo-opt.
 */

.cseo-opt{ --a:var(--cseo-a,#0e9f6e); --good:#0e9f6e; --ok:#e8910c; --bad:#d63638; margin:20px 20px 0 0; }

/* ---------- Shell ---------- */
.cseo-opt__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-bottom:3px solid var(--a); border-radius:8px 8px 0 0; background:#1d2327; color:#fff; }
.cseo-opt__brand{ display:flex; align-items:center; gap:12px; }
.cseo-opt__mark{ display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px !important; border-radius:9px; background:var(--a); color:#fff; font-size:20px !important; }
.cseo-opt__name{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.cseo-opt__title{ padding-left:14px; border-left:1px solid rgba(255,255,255,.2); font-size:16px; font-weight:600; }
.cseo-opt__ver{ padding:2px 8px; border-radius:99px; background:rgba(255,255,255,.12); color:#c3c4c7; font-size:11px; }
.cseo-opt__actions{ display:flex; align-items:center; gap:16px; }
.cseo-opt__actions a{ color:#c3c4c7; font-size:13px; text-decoration:none; }
.cseo-opt__actions a:hover{ color:#fff; }
.cseo-opt .cseo-opt__save,
.cseo-opt .cseo-opt__foot .button-primary,
.cseo-opt .cseo-import .button-primary,
.cseo-banner .button-primary{ min-height:34px; padding:2px 18px; border-color:var(--a); background:var(--a); }
.cseo-opt .cseo-opt__save:hover,
.cseo-opt .cseo-opt__foot .button-primary:hover,
.cseo-opt .cseo-import .button-primary:hover{ border-color:color-mix(in srgb,var(--a) 82%,#000); background:color-mix(in srgb,var(--a) 82%,#000); }

.cseo-opt__body{ display:grid; grid-template-columns:230px 1fr; min-height:620px; border:1px solid #dcdcde; border-top:0; border-radius:0 0 8px 8px; background:#fff; }
.cseo-opt__nav{ padding:10px 0 24px; border-right:1px solid #dcdcde; background:#f6f7f7; }
.cseo-opt__group{ margin:18px 20px 6px; color:#8c8f94; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.cseo-opt__nav ul,
.cseo-opt__nav li{ margin:0; }
.cseo-opt__nav a{ display:flex; align-items:center; gap:10px; padding:9px 20px; border-left:3px solid transparent; color:#1d2327; font-size:13px; text-decoration:none; }
.cseo-opt__nav a .dashicons{ width:18px; height:18px; color:#8c8f94; font-size:18px; }
.cseo-opt__nav a:hover,
.cseo-opt__nav a:hover .dashicons{ color:var(--a); }
.cseo-opt__nav a:hover{ background:#fff; }
.cseo-opt__nav a.is-active{ border-left-color:var(--a); background:#fff; font-weight:600; }
.cseo-opt__nav a.is-active .dashicons{ color:var(--a); }
.cseo-opt__main{ min-width:0; padding:26px 32px 32px; }
.cseo-opt__head{ margin-bottom:8px; padding-bottom:16px; border-bottom:1px solid #f0f0f1; }
.cseo-opt__head h2{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:21px; }
.cseo-opt__head h2 .dashicons{ width:22px; height:22px; color:var(--a); font-size:22px; }
.cseo-opt__head p{ margin:0; color:#646970; }
.cseo-opt .form-table{ max-width:1100px; }
.cseo-opt .form-table th{ width:220px; padding:22px 24px 22px 0; font-weight:600; }
.cseo-opt .form-table td{ padding:18px 0; }
.cseo-opt .form-table tr{ border-bottom:1px solid #f0f0f1; }
.cseo-opt .form-table tr:last-child{ border-bottom:0; }
.cseo-opt .form-table .description{ color:#8c8f94; }
.cseo-heading td{ padding:26px 0 4px !important; }
.cseo-heading h3{ margin:0; padding-bottom:8px; border-bottom:1px solid #dcdcde; color:#50575e; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.cseo-opt__foot{ display:flex; justify-content:flex-end; margin-top:10px; padding-top:18px; border-top:1px solid #f0f0f1; }
.cseo-muted{ color:#646970; }

.cseo-banner{ display:flex; align-items:center; gap:14px; margin:0 0 20px; padding:14px 16px; border:1px solid #f0c33c; border-radius:8px; background:#fcf9e8; }
.cseo-banner > .dashicons{ color:#996800; font-size:22px; width:22px; height:22px; }
.cseo-banner div{ flex:1; }
.cseo-banner p{ margin:2px 0 0; color:#50575e; }
.cseo-banner .button-primary{ color:#fff; line-height:30px; }

/* ---------- Templates, variables, switches ---------- */
.cseo-tpl input,
.cseo-tpl textarea{ font-family:Menlo,Consolas,monospace; font-size:13px; }
.cseo-vars{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cseo-var{ padding:2px 10px; border:1px solid #c3c4c7; border-radius:99px; background:#fff; color:#50575e; font-size:12px; cursor:pointer; }
.cseo-var:hover{ border-color:var(--a); color:var(--a); }
.cseo-example{ margin:8px 0 0; padding:8px 12px; border-radius:6px; background:#f6f7f7; color:#1a0dab; font-family:Arial,sans-serif; font-size:15px; }
.cseo-tpl[data-kind="desc"] .cseo-example{ color:#4d5156; font-size:13px; }
.cseo-example span{ margin-right:6px; color:#8c8f94; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.cseo-example output:empty::after{ content:"—"; color:#a7aaad; }

.cseo-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.cseo-switch input{ position:absolute; opacity:0; }
.cseo-switch__ui{ position:relative; flex:0 0 36px; width:36px; height:20px; border-radius:99px; background:#c3c4c7; transition:background .15s; }
.cseo-switch__ui::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.cseo-switch input:checked + .cseo-switch__ui{ background:var(--a); }
.cseo-switch input:checked + .cseo-switch__ui::after{ transform:translateX(16px); }
.cseo-switch input:focus-visible + .cseo-switch__ui{ outline:2px solid #2271b1; outline-offset:2px; }

.cseo-seps{ display:flex; flex-wrap:wrap; gap:6px; }
.cseo-sep{ position:relative; cursor:pointer; }
.cseo-sep input{ position:absolute; opacity:0; }
.cseo-sep span{ display:grid; place-items:center; width:42px; height:38px; border:2px solid #dcdcde; border-radius:8px; background:#fff; font-size:18px; }
.cseo-sep:hover span{ border-color:#8c8f94; }
.cseo-sep input:checked + span{ border-color:var(--a); box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 15%,transparent); font-weight:700; }
.cseo-sep input:focus-visible + span{ outline:2px solid #2271b1; outline-offset:2px; }

.cseo-choices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; max-width:520px; }
.cseo-choice{ position:relative; display:grid; grid-template-columns:28px 1fr; gap:2px 10px; padding:12px 14px; border:2px solid #dcdcde; border-radius:8px; background:#fff; cursor:pointer; }
.cseo-choice:hover{ border-color:#8c8f94; }
.cseo-choice input{ position:absolute; opacity:0; }
.cseo-choice .dashicons{ grid-row:span 2; align-self:center; color:#8c8f94; font-size:24px; width:24px; height:24px; }
.cseo-choice b{ align-self:end; color:#1d2327; font-size:13px; }
.cseo-choice small{ align-self:start; color:#646970; font-size:12px; line-height:1.4; }
.cseo-opt .form-table td fieldset label.cseo-choice{ display:grid; margin:0 !important; line-height:1.4; }
.cseo-choice:has(input:checked){ border-color:var(--a); box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 15%,transparent); }
.cseo-choice:has(input:checked) .dashicons{ color:var(--a); }

.cseo-image{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cseo-image__preview{ flex:0 0 100%; }
.cseo-image__preview img{ max-width:320px; max-height:170px; border:1px solid #dcdcde; border-radius:6px; }
.cseo-image:not(.has-image) .cseo-image__preview,
.cseo-image:not(.has-image) .cseo-image__clear{ display:none; }
.cseo-image__clear{ color:#b32d2e !important; }

/* ---------- Dashboard ---------- */
.cseo-hero{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:18px 0; padding:22px 24px; border-radius:8px; background:linear-gradient(120deg,#1d2327 0%,#2c3338 55%,color-mix(in srgb,var(--a) 55%,#1d2327) 100%); color:#fff; }
.cseo-hero h3{ margin:0 0 6px; color:#fff; font-size:20px; }
.cseo-hero p{ margin:0; color:#c3c4c7; }
.cseo-ring{ display:grid; flex:0 0 84px; place-items:center; width:84px; height:84px; border-radius:50%; background:conic-gradient(var(--a) calc(var(--p) * 1%), rgba(255,255,255,.15) 0); }
.cseo-ring b{ display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:#23282d; font-size:18px; }
.cseo-stats{ display:grid; grid-template-columns:repeat(5,1fr); margin:0 0 10px; overflow:hidden; border:1px solid #f0f0f1; border-radius:8px; }
.cseo-stats li{ display:flex; flex-direction:column; margin:0; padding:16px 18px; border-right:1px solid #f0f0f1; }
.cseo-stats li:last-child{ border-right:0; }
.cseo-stats b{ font-size:26px; line-height:1.1; }
.cseo-stats b.is-good{ color:var(--good); }
.cseo-stats b.is-ok{ color:var(--ok); }
.cseo-stats b.is-bad{ color:var(--bad); }
.cseo-stats span{ color:#646970; font-size:12px; }
.cseo-bar{ display:flex; height:8px; overflow:hidden; border-radius:99px; background:#f0f0f1; }
.cseo-bar i.is-good{ background:var(--good); }
.cseo-bar i.is-ok{ background:var(--ok); }
.cseo-bar i.is-bad{ background:var(--bad); }
.cseo-cols{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin-top:18px; }
.cseo-box{ padding:16px 18px; border:1px solid #f0f0f1; border-radius:8px; }
.cseo-box h3{ margin:0 0 12px; font-size:14px; }
.cseo-list li,
.cseo-checks li{ display:flex; align-items:center; gap:10px; margin:0; padding:8px 0; border-bottom:1px solid #f6f7f7; }
.cseo-list li:last-child,
.cseo-checks li:last-child{ border-bottom:0; }
.cseo-list a{ flex:1; overflow:hidden; color:#1d2327; font-weight:600; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.cseo-list a:hover{ color:var(--a); }
.cseo-list small{ color:#8c8f94; }
.cseo-checks .dashicons{ color:#c3c4c7; }
.cseo-checks li.is-done .dashicons{ color:var(--good); }
.cseo-checks li span:nth-child(2){ flex:1; }
.cseo-checks a{ font-weight:600; text-decoration:none; }
.cseo-dot{ display:inline-grid; flex:0 0 auto; place-items:center; min-width:28px; height:22px; padding:0 6px; border-radius:99px; background:#f0f0f1; color:#646970; font-size:11px; font-weight:700; }
.cseo-dot.is-good{ background:color-mix(in srgb,var(--good,#0e9f6e) 15%,#fff); color:#0a7a54; }
.cseo-dot.is-ok{ background:color-mix(in srgb,var(--ok,#e8910c) 18%,#fff); color:#9a5d00; }
.cseo-dot.is-bad{ background:color-mix(in srgb,var(--bad,#d63638) 14%,#fff); color:#b32d2e; }

/* ---------- Import ---------- */
.cseo-steps{ margin:18px 0 22px 18px; color:#50575e; }
.cseo-steps li{ margin-bottom:6px; }
.cseo-import{ margin-bottom:16px; padding:18px 20px; border:1px solid #dcdcde; border-radius:8px; }
.cseo-import__head{ display:flex; align-items:center; gap:10px; }
.cseo-import h3{ margin:0; font-size:16px; }
.cseo-badge{ padding:2px 8px; border-radius:99px; background:#f0f0f1; color:#646970; font-size:11px; font-weight:600; }
.cseo-badge.is-on{ background:#fcf0e1; color:#9a5d00; }
.cseo-import__overwrite{ display:block; margin:10px 0 14px; }
.cseo-import__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cseo-import__status{ margin:12px 0 0; font-weight:600; }
.cseo-import__status.is-done{ color:#0a7a54; }
.cseo-import__status.is-error{ color:#b32d2e; }

@media (max-width:960px){
	.cseo-opt{ margin-right:10px; }
	.cseo-opt__body{ grid-template-columns:1fr; }
	.cseo-opt__nav{ border-right:0; border-bottom:1px solid #dcdcde; }
	.cseo-opt__main{ padding:20px 16px; }
	.cseo-stats{ grid-template-columns:repeat(2,1fr); }
	.cseo-cols{ grid-template-columns:1fr; }
	.cseo-opt__bar{ flex-wrap:wrap; }
}

/* ---------- Premium (shown only without Core SEO Premium) ---------- */
.cseo-pill{ display:inline-block; padding:1px 7px; border-radius:99px; background:#fdf6dc; color:#8a6100; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; vertical-align:middle; }
.cseo-navcard{ margin:22px 16px 0; padding:14px; border:1px solid #f0d78c; border-radius:10px; background:#fffbeb; }
.cseo-navcard b{ display:block; color:#8a6100; }
.cseo-navcard p{ margin:6px 0 10px; color:#50575e; font-size:12px; }
.cseo-upsell{ display:flex; gap:14px; }
.cseo-upsell--wide{ margin-top:18px; border-color:#f0d78c !important; background:#fffbeb; }
.cseo-upsell__mark{ display:grid; flex:0 0 36px; place-items:center; width:36px; height:36px; border-radius:10px; background:#f0b849; color:#fff; font-size:18px; }
.cseo-upsell h3{ margin:4px 0 6px; }
.cseo-upsell p{ margin:0 0 12px; color:#50575e; }
.cseo-upsell .cseo-link{ margin-left:12px; }
.cseo-upgrade__hero{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:18px 0; padding:24px; border-radius:10px; background:linear-gradient(120deg,#1d2327,#2c3338 60%,#5b4a1a); color:#fff; }
.cseo-upgrade__hero h3{ margin:0 0 6px; color:#fff; font-size:20px; }
.cseo-upgrade__hero p{ margin:0; color:#c3c4c7; }
.cseo-upgrade__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 22px; }
.cseo-upgrade__grid li{ display:flex; flex-direction:column; gap:4px; margin:0; padding:16px; border:1px solid #e3e4e6; border-radius:10px; }
.cseo-upgrade__grid .dashicons{ color:#c08a00; font-size:22px; width:22px; height:22px; }
.cseo-upgrade__grid span:last-child{ color:#646970; font-size:12px; line-height:1.5; }
.cseo-upgrade__table td:nth-child(n+2),
.cseo-upgrade__table th:nth-child(n+2){ width:90px; text-align:center; }
.cseo-upgrade__table td:last-child{ color:#0a7a54; font-weight:700; }
.cseo-upgrade__foot{ display:flex; align-items:center; gap:14px; margin-top:16px; }
@media (max-width:1100px){ .cseo-upgrade__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:782px){ .cseo-upgrade__grid{ grid-template-columns:1fr; } }