/* ═══════════════════════════════════════════════════════
   SEO Intelligence Suite Pro v5.2 — Tabbed Design
   Brand: #fc1d55 · White · Dark Navy #0f1923
   ═══════════════════════════════════════════════════════ */
:root {
  --p:      #fc1d55;
  --p2:     #e8004a;
  --p-lt:   #ff6b8a;
  --p-grd:  linear-gradient(135deg,#fc1d55 0%,#ff6b35 100%);
  --p-grd2: linear-gradient(135deg,#fc1d55 0%,#c2006b 100%);
  --p-grd3: linear-gradient(135deg,#ff6b35 0%,#fc1d55 50%,#c2006b 100%);
  --dark:   #0f1923;
  --dark2:  #1a2535;
  --good:   #00c48c;
  --warn:   #f59e0b;
  --bad:    #ef4444;
  --info:   #3b82f6;
  --txt:    #1a0a14;
  --muted:  #7a6070;
  --border: #edd8df;
  --surf:   #fdf5f7;
  --radius: 16px;
  --rad-sm: 10px;
  --rad-xs: 7px;
  --shadow: 0 2px 16px rgba(252,29,85,.09);
  --shadow2:0 8px 40px rgba(252,29,85,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Base ─────────────────────────────────────────────── */
.seo-wrap,.seo-frontend-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--txt);line-height:1.6}
.seo-wrap{max-width:1300px}

/* ════ ADMIN PANEL ════════════════════════════════════════ */
.seo-admin-header{background:var(--p-grd);border-radius:var(--radius);padding:26px 32px;display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:22px;box-shadow:var(--shadow2)}
.seo-logo{display:flex;align-items:center;gap:14px}
.seo-logo-icon{font-size:2.4rem;line-height:1}
.seo-logo h1{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.seo-logo p{font-size:.83rem;opacity:.85}
.seo-header-stats{display:flex;gap:16px}
.seo-hstat{text-align:center;background:rgba(255,255,255,.18);border-radius:var(--rad-sm);padding:10px 18px}
.seo-hstat-n{display:block;font-size:1.7rem;font-weight:900}
.seo-hstat-l{display:block;font-size:.7rem;opacity:.85;margin-top:1px}

.seo-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;margin-bottom:18px;border:1px solid var(--border)}
.seo-card-title{font-size:.98rem;font-weight:800;color:var(--txt);display:flex;align-items:center;gap:8px;margin-bottom:4px}
.seo-card-sub{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.seo-form-card{background:linear-gradient(135deg,#fff 0%,#fff5f7 100%)}

.seo-form-row{display:flex;gap:10px;flex-wrap:wrap}
.seo-input-flex{flex:1;min-width:200px}
.seo-input-group{position:relative;display:flex;align-items:center;width:100%}
.seo-input-pre{position:absolute;left:13px;font-size:.95rem;pointer-events:none;z-index:1}
.seo-input{width:100%;padding:12px 14px 12px 40px;border:2px solid var(--border);border-radius:var(--rad-sm);font-size:.92rem;transition:border .18s,box-shadow .18s;background:#fff;outline:none;color:var(--txt)}
.seo-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(252,29,85,.12)}
.seo-input::placeholder{color:#c0a0a8}

.seo-btn-primary{background:var(--p-grd);color:#fff;border:none;border-radius:var(--rad-sm);padding:12px 22px;font-size:.92rem;font-weight:700;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 16px rgba(252,29,85,.35)}
.seo-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(252,29,85,.45)}
.seo-btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-arrow{font-size:1rem;transition:transform .18s}
.seo-btn-primary:hover .btn-arrow{transform:translateX(3px)}
.seo-btn-primary .spin,.seo-search-btn .spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.seo-error-bar,.seo-frontend-error{background:#fff0f3;border:1px solid #ffc1cc;border-left:4px solid var(--p);border-radius:var(--rad-xs);padding:10px 14px;margin-top:10px;font-size:.84rem;color:#c0003a}

/* Progress */
.seo-progress-card,.seo-progress-wrap{background:linear-gradient(135deg,#fff5f7,#fff);border-radius:var(--radius);padding:22px 26px;border:1px solid var(--border);box-shadow:var(--shadow)}
.seo-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.seo-progress-title{font-weight:700;font-size:.9rem;color:var(--txt)}
.seo-progress-title span{color:var(--p);font-weight:800}
.seo-progress-pct{font-size:1.1rem;font-weight:900;color:var(--p)}
.seo-progress-bar-wrap{height:8px;background:var(--border);border-radius:8px;overflow:hidden;margin-bottom:12px}
.seo-progress-bar{height:100%;background:var(--p-grd);border-radius:8px;width:0%;transition:width .35s ease}
.seo-progress-steps{display:flex;flex-wrap:wrap;gap:7px}
.seo-step{display:flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:600;background:var(--surf);border:1px solid var(--border);color:var(--muted);transition:all .3s}
.seo-step.done{background:#e8fff5;border-color:#a0f0cc;color:#00663a}
.seo-step.active{background:#fff0f4;border-color:#ffc1cc;color:var(--p);font-weight:800}
.seo-step-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.seo-step.active .seo-step-dot{animation:pulse .8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Recent */
.seo-recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:11px;margin-top:4px}
.seo-recent-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--rad-sm);padding:13px;cursor:pointer;transition:transform .18s,box-shadow .18s}
.seo-recent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.seo-recent-domain{font-size:.8rem;font-weight:700;color:var(--txt);margin-bottom:3px;word-break:break-all}
.seo-recent-meta{font-size:.7rem;color:var(--muted);margin-bottom:7px}
.seo-empty{text-align:center;color:var(--muted);padding:22px;font-size:.86rem}
.seo-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:800}
.seo-badge-excellent{background:#e0fff2;color:#006640}
.seo-badge-good{background:#e0f0ff;color:#003d99}
.seo-badge-warn{background:#fff5e0;color:#7a4a00}
.seo-badge-poor{background:#ffe0e6;color:#99000d}

/* ════ RESULTS — TABBED PANEL ═════════════════════════════ */
.seo-results-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow2);border:1px solid var(--border);overflow:hidden;margin-bottom:18px;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Score bar at top */
.seo-result-topbar{background:var(--p-grd);padding:22px 28px;color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.seo-topbar-ring{position:relative;width:90px;height:90px;flex-shrink:0}
.seo-topbar-ring svg{transform:rotate(-90deg);width:90px;height:90px}
.seo-ring-bg2{fill:none;stroke:rgba(255,255,255,.25);stroke-width:9}
.seo-ring-fill2{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-dasharray:251;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.seo-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.seo-ring-n2{font-size:1.6rem;font-weight:900;line-height:1}
.seo-ring-sub2{font-size:.6rem;opacity:.85}
.seo-ring-grade2{font-size:.75rem;font-weight:900}

.seo-topbar-info h3{font-size:1rem;font-weight:800;margin-bottom:5px}
.seo-topbar-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.seo-topbar-badge{background:rgba(255,255,255,.2);padding:3px 12px;border-radius:20px;font-size:.8rem;font-weight:700}
.seo-topbar-meta{display:flex;gap:14px;font-size:.74rem;opacity:.85;flex-wrap:wrap}
.seo-topbar-dims{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;flex-shrink:0;min-width:320px}
.seo-dim{background:rgba(255,255,255,.15);border-radius:var(--rad-xs);padding:8px 10px;text-align:center}
.seo-dim-val{font-size:1.1rem;font-weight:900;display:block}
.seo-dim-lbl{font-size:.65rem;opacity:.85;margin-top:1px;display:block}

/* Tab nav */
.seo-tab-nav{display:flex;background:var(--dark);overflow-x:auto;scrollbar-width:none}
.seo-tab-nav::-webkit-scrollbar{display:none}
.seo-tab-btn{flex-shrink:0;padding:13px 20px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.6);background:transparent;border:none;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.seo-tab-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.seo-tab-btn.active{color:#fff;border-bottom-color:var(--p);background:rgba(252,29,85,.12)}

/* Tab panels */
.seo-tab-panels{padding:0}
.seo-tab-panel{display:none;padding:24px 28px;animation:fadeIn .25s ease}
.seo-tab-panel.active{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Section headings inside tabs */
.seo-sec-h{font-size:.95rem;font-weight:800;color:var(--txt);margin-bottom:14px;padding-bottom:9px;border-bottom:2px solid var(--surf);display:flex;align-items:center;gap:7px}
.seo-sec-h+.seo-sec-h{margin-top:24px}

/* AI insight box */
.seo-insight-box{background:linear-gradient(135deg,#fff5f7,#fff0f9);border:1px solid #ffc8d6;border-left:4px solid var(--p);border-radius:var(--rad-sm);padding:15px 18px;font-size:.87rem;line-height:1.78;color:var(--txt);margin-bottom:16px}

/* AI cards */
.seo-ai-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.seo-ai-card{border-radius:var(--rad-sm);padding:15px;border:1px solid var(--border);transition:transform .18s}
.seo-ai-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.seo-ai-card-title{font-size:.85rem;font-weight:800;color:var(--txt);margin-bottom:6px}
.seo-ai-card-body{font-size:.79rem;color:var(--muted);line-height:1.65}
.c-health{background:#fff5f7;border-color:#ffc8d6}
.c-priority{background:#f5f3ff;border-color:#c4b5fd}
.c-niche{background:#f0fdf4;border-color:#a7f3d0}
.c-quickwin{background:#fffbeb;border-color:#fde68a}
.c-authority{background:#eff6ff;border-color:#bfdbfe}

/* Metrics */
.seo-metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.seo-metric-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--rad-sm);padding:15px 10px;text-align:center;transition:transform .15s}
.seo-metric-card:hover{transform:translateY(-1px)}
.seo-metric-card.st-good{border-top:3px solid var(--good)}
.seo-metric-card.st-warn{border-top:3px solid var(--warn)}
.seo-metric-card.st-bad{border-top:3px solid var(--bad)}
.seo-metric-card.st-pink{border-top:3px solid var(--p)}
.seo-metric-card.st-blue{border-top:3px solid var(--info)}
.seo-metric-icon{font-size:1.35rem;margin-bottom:5px}
.seo-metric-val{font-size:.95rem;font-weight:800;color:var(--txt);margin-bottom:3px}
.seo-metric-lbl{font-size:.68rem;color:var(--muted)}

/* On-page */
.seo-onpage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:11px}
.seo-op-card{border-radius:var(--rad-sm);padding:13px;border:1px solid var(--border);background:#fff}
.seo-op-card.pass{border-left:4px solid var(--good);background:#f0fff8}
.seo-op-card.warn{border-left:4px solid var(--warn);background:#fffdf0}
.seo-op-card.fail{border-left:4px solid var(--bad);background:#fff5f5}
.seo-op-name{font-weight:700;font-size:.83rem;color:var(--txt);margin-bottom:5px}
.seo-op-val{font-size:.8rem;color:var(--txt);margin-bottom:3px;word-break:break-all}
.seo-op-meta{font-size:.73rem;color:var(--muted)}

/* Authority */
.seo-auth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.seo-auth-card{background:#fff;border:1px solid var(--border);border-radius:var(--rad-sm);padding:14px;text-align:center}
.seo-auth-num{font-size:2.1rem;font-weight:900;color:var(--p)}
.seo-auth-lbl{font-size:.7rem;color:var(--muted);margin:3px 0 7px}
.seo-auth-bar{height:5px;background:var(--border);border-radius:5px;overflow:hidden}
.seo-auth-fill{height:100%;background:var(--p-grd);border-radius:5px;transition:width .8s ease}
.seo-ql-bar{display:grid;grid-template-columns:78px 1fr 50px;align-items:center;gap:9px;margin-bottom:8px}
.seo-ql-lbl{font-size:.76rem;color:var(--muted)}
.seo-ql-track{height:9px;background:var(--border);border-radius:9px;overflow:hidden}
.seo-ql-fill{height:100%;border-radius:9px;transition:width .8s ease}
.ql-excellent{background:var(--good)}.ql-good{background:var(--info)}.ql-average{background:var(--warn)}.ql-poor{background:var(--bad)}
.seo-ql-cnt{font-size:.76rem;font-weight:700;text-align:right;color:var(--txt)}
.seo-offpage-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:14px}
.seo-offpage-stat{background:var(--surf);border:1px solid var(--border);border-radius:var(--rad-sm);padding:11px;text-align:center}
.seo-offpage-stat .v{font-weight:800;font-size:.92rem;color:var(--txt);display:block}
.seo-offpage-stat .l{font-size:.68rem;color:var(--muted)}

/* Technical */
.seo-tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:9px}
.seo-tech-item{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:var(--rad-xs);border:1px solid var(--border);font-size:.78rem}
.seo-tech-item.pass{background:#f0fff8;border-color:#a0f0cc}
.seo-tech-item.fail{background:#fff5f5;border-color:#ffcccc}
.seo-tech-ico{font-size:.9rem;flex-shrink:0}
.seo-tech-lbl{flex:1;color:var(--txt)}
.seo-tech-st{font-size:.85rem}
.seo-sitemap-found{margin-top:9px;font-size:.78rem;background:#eff6ff;padding:7px 13px;border-radius:var(--rad-xs);color:var(--info);word-break:break-all}

/* Brand */
.seo-brand-grid{display:grid;grid-template-columns:100px 1fr 1fr;gap:18px;align-items:start}
.seo-brand-ring{width:88px;height:88px;border-radius:50%;background:var(--p-grd);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.55rem;font-weight:900}
.seo-brand-ring small{font-size:.6rem;opacity:.85;margin-top:1px}
.seo-brand-sigs{display:flex;flex-direction:column;gap:6px}
.seo-brand-sig{display:flex;align-items:center;gap:6px;font-size:.79rem}
.seo-brand-sig.pass{color:#005f40}.seo-brand-sig.fail{color:#9a0020}
.seo-social-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.seo-social-badge{padding:3px 9px;border-radius:20px;font-size:.7rem;font-weight:700}
.soc-on{background:#e0fff2;color:#006640}.soc-off{background:#f5f5f5;color:#aaa}

/* Suggestions */
.seo-sugg-group{margin-bottom:20px}
.seo-sugg-head{font-size:.88rem;font-weight:800;margin-bottom:10px;padding:5px 11px;border-radius:var(--rad-xs);display:inline-block}
.sg-critical   .seo-sugg-head{background:#fff0f3;color:#c0003a;border:1px solid #ffc1cc}
.sg-important  .seo-sugg-head{background:#fff8e0;color:#7a4a00;border:1px solid #ffe08a}
.sg-recommended .seo-sugg-head{background:#eef5ff;color:#1a3a8a;border:1px solid #bcd4ff}
.sg-opportunities .seo-sugg-head{background:#edfff5;color:#005f40;border:1px solid #a0f0c8}
.seo-sugg-card{background:#fff;border:1px solid var(--border);border-radius:var(--rad-sm);padding:15px;margin-bottom:9px;transition:box-shadow .18s}
.seo-sugg-card:hover{box-shadow:var(--shadow)}
.seo-sugg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.seo-sugg-title{font-size:.87rem;font-weight:800;color:var(--txt)}
.seo-sugg-tags{display:flex;gap:5px;flex-shrink:0}
.seo-tag{padding:2px 8px;border-radius:12px;font-size:.65rem;font-weight:800;text-transform:uppercase}
.tag-high,.tag-critical{background:#ffe0e6;color:#99000d}
.tag-medium{background:#fff5e0;color:#7a4a00}
.tag-low{background:#e0edff;color:#003d99}
.tag-effort{background:#f5f5f5;color:var(--muted)}
.seo-sugg-desc{font-size:.8rem;color:var(--muted);margin-bottom:8px;line-height:1.65}
.seo-sugg-action{font-size:.79rem;color:var(--txt);background:var(--surf);padding:8px 12px;border-radius:var(--rad-xs);border-left:3px solid var(--good);line-height:1.55;margin-bottom:7px}
.seo-sugg-gain{font-size:.77rem;color:var(--p);font-weight:700;display:flex;align-items:center;gap:5px}

/* 30-Day Plan */
.seo-weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.seo-week{background:#fff;border:1px solid var(--border);border-radius:var(--rad-sm);overflow:hidden}
.seo-week-head{padding:13px 16px;background:var(--p-grd);color:#fff}
.seo-week-title{font-weight:800;font-size:.88rem;margin-bottom:3px}
.seo-week-goal{font-size:.72rem;opacity:.88;line-height:1.45}
.seo-week-tasks{padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.seo-task{display:flex;align-items:flex-start;gap:9px;background:var(--surf);border:1px solid var(--border);border-radius:var(--rad-xs);padding:9px 11px}
.seo-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.p-critical .seo-task-dot{background:var(--bad)}.p-high .seo-task-dot{background:var(--warn)}
.p-medium .seo-task-dot{background:var(--info)}.p-low .seo-task-dot{background:var(--good)}
.seo-task-body{flex:1;min-width:0}
.seo-task-name{font-size:.79rem;font-weight:600;color:var(--txt);line-height:1.45;margin-bottom:2px}
.seo-task-time{font-size:.68rem;color:var(--muted)}
.seo-task-badge{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:9px;flex-shrink:0;margin-top:2px;white-space:nowrap}
.tb-critical{background:#ffe0e6;color:#99000d}.tb-high{background:#fff5e0;color:#7a4a00}
.tb-medium{background:#e0edff;color:#003d99}.tb-low{background:#e0fff2;color:#006640}

/* 12-Month Roadmap */
.seo-phases{display:flex;flex-direction:column;gap:13px}
.seo-phase{border-radius:var(--rad-sm);overflow:hidden;border:1px solid var(--border)}
.seo-phase-head{padding:15px 20px;color:#fff}
.seo-phase.p1 .seo-phase-head{background:linear-gradient(135deg,#fc1d55,#e8004a)}
.seo-phase.p2 .seo-phase-head{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.seo-phase.p3 .seo-phase-head{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.seo-phase.p4 .seo-phase-head{background:linear-gradient(135deg,#10b981,#0ea5e9)}
.seo-phase.p5 .seo-phase-head{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.seo-phase-period{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.9;margin-bottom:3px}
.seo-phase-title{font-size:.95rem;font-weight:800}
.seo-phase-obj{padding:9px 20px;font-size:.8rem;color:var(--muted);background:#fafafa;border-bottom:1px solid var(--border);font-style:italic;line-height:1.55}
.seo-phase-tasks{padding:9px 20px 13px;list-style:none}
.seo-phase-tasks li{padding:6px 0 6px 20px;font-size:.8rem;color:var(--txt);position:relative;border-bottom:1px solid #f5f0f2;line-height:1.5}
.seo-phase-tasks li:last-child{border-bottom:none}
.seo-phase-tasks li::before{content:"→";position:absolute;left:0;color:var(--p);font-weight:900}
.seo-phase-kpi{padding:9px 20px;background:var(--surf);border-top:1px solid var(--border);font-size:.77rem;display:flex;gap:7px}
.seo-phase-kpi strong{color:var(--txt);flex-shrink:0}

/* Keywords */
.seo-kw-cloud{display:flex;flex-wrap:wrap;gap:7px}
.seo-kw-tag{background:linear-gradient(135deg,#fff0f4,#ffe0ea);color:var(--p2);padding:4px 13px;border-radius:20px;font-size:.76rem;font-weight:700;border:1px solid #ffc8d6}

/* ════ DEVELOPER TAB ══════════════════════════════════════ */
/* Top banner — dark navy like screenshot */
.dev-banner{background:var(--dark);border-radius:var(--rad-sm);padding:20px 24px;display:flex;align-items:center;gap:20px;margin-bottom:20px;position:relative;overflow:hidden}
.dev-banner::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--p-grd)}
.dev-logo{background:#fff;border-radius:var(--rad-xs);padding:8px 14px;font-size:1.6rem;font-weight:900;color:var(--dark);letter-spacing:-.05em;flex-shrink:0;display:flex;align-items:center;gap:4px}
.dev-logo span{color:var(--p)}
.dev-banner-info{flex:1}
.dev-banner-tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--p);margin-bottom:4px}
.dev-banner-name{font-size:1.2rem;font-weight:900;color:#fff;margin-bottom:2px}
.dev-banner-sub{font-size:.78rem;color:rgba(255,255,255,.6)}
.dev-banner-btn{background:var(--p-grd2);color:#fff;border:none;border-radius:20px;padding:9px 18px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;text-decoration:none;flex-shrink:0}
.dev-banner-btn:hover{opacity:.9}
.dev-banner-url{font-size:.7rem;color:rgba(255,255,255,.45);margin-top:3px}

/* Two-col layout */
.dev-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}
.dev-box{background:#fff;border:1px solid var(--border);border-radius:var(--rad-sm);padding:20px}
.dev-box-title{font-size:.88rem;font-weight:800;color:var(--txt);margin-bottom:12px}

/* About section */
.dev-about-text{font-size:.83rem;color:var(--muted);line-height:1.75;margin-bottom:12px}
.dev-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dev-skill{padding:4px 12px;border-radius:20px;font-size:.73rem;font-weight:700;background:#f0f4ff;color:#3b4db8;border:1px solid #c4cfff}
.dev-skill.pink{background:#fff0f4;color:var(--p2);border-color:#ffc8d6}

/* Lead developer card */
.dev-person{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.dev-avatar{width:56px;height:56px;border-radius:50%;background:var(--p-grd);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.dev-person-info h4{font-size:.95rem;font-weight:800;color:var(--txt);margin-bottom:2px}
.dev-person-info p{font-size:.75rem;color:var(--muted)}
.dev-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.dev-tag{padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;background:var(--surf);border:1px solid var(--border);color:var(--txt)}
.dev-tag.red{background:#fff0f4;color:var(--p2);border-color:#ffc8d6}
.dev-links{display:flex;flex-direction:column;gap:0}
.dev-link-row{display:grid;grid-template-columns:1fr 1fr;padding:8px 0;border-bottom:1px solid var(--border);font-size:.8rem}
.dev-link-row:last-child{border-bottom:none}
.dev-link-lbl{color:var(--txt);font-weight:600}
.dev-link-val a{color:var(--p);text-decoration:none;font-weight:600}
.dev-link-val a:hover{text-decoration:underline}

/* CTA banner */
.dev-cta{background:var(--p-grd2);border-radius:var(--rad-sm);padding:24px 28px;color:#fff;position:relative;overflow:hidden}
.dev-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(255,255,255,.08) 0%,transparent 60%)}
.dev-cta-tag{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.8;margin-bottom:8px}
.dev-cta h3{font-size:1.4rem;font-weight:900;margin-bottom:10px;letter-spacing:-.02em}
.dev-cta p{font-size:.85rem;opacity:.9;line-height:1.7;max-width:480px;margin-bottom:20px}
.dev-services{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
@media(max-width:600px){.dev-services{grid-template-columns:repeat(2,1fr)}}
.dev-service{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:var(--rad-xs);padding:12px;backdrop-filter:blur(6px);transition:background .18s}
.dev-service:hover{background:rgba(255,255,255,.22)}
.dev-service-icon{font-size:1.4rem;margin-bottom:5px}
.dev-service-name{font-size:.78rem;font-weight:800;margin-bottom:2px}
.dev-service-desc{font-size:.7rem;opacity:.85;line-height:1.45}
.dev-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.dev-cta-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:30px;font-size:.82rem;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s;border:none;white-space:nowrap}
.dev-cta-btn.primary{background:#fff;color:var(--p2)}
.dev-cta-btn.outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.dev-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* ════ FRONTEND HERO ══════════════════════════════════════ */
.seo-frontend-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.seo-hero{background:var(--p-grd3);border-radius:20px;padding:52px 40px 44px;text-align:center;color:#fff;box-shadow:0 12px 48px rgba(252,29,85,.28);margin-bottom:24px;position:relative;overflow:hidden}
.seo-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 14px;font-size:.75rem;font-weight:700;margin-bottom:16px}
.seo-hero h2{font-size:2.2rem;font-weight:900;letter-spacing:-.03em;margin-bottom:10px;line-height:1.15}
.seo-hero p{font-size:.98rem;opacity:.92;margin-bottom:30px;max-width:500px;margin-left:auto;margin-right:auto}
.seo-search-box{max-width:620px;margin:0 auto 22px;background:rgba(255,255,255,.96);border-radius:50px;padding:6px 6px 6px 22px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.seo-search-icon{font-size:1.1rem;flex-shrink:0;opacity:.6}
.seo-search-input{flex:1;border:none;background:transparent;font-size:.95rem;color:var(--txt);outline:none;padding:6px 0}
.seo-search-input::placeholder{color:#bbb}
.seo-search-btn{background:var(--p-grd2);color:#fff;border:none;border-radius:40px;padding:11px 24px;font-size:.9rem;font-weight:800;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px;transition:transform .18s,box-shadow .18s;flex-shrink:0;box-shadow:0 4px 16px rgba(252,29,85,.4)}
.seo-search-btn:hover{transform:scale(1.04)}
.seo-search-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}
.seo-trust{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;font-size:.78rem;font-weight:600;opacity:.94}
.seo-trust-sep{opacity:.4}
.seo-feat-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}
.seo-feat-pill{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:5px 13px;font-size:.74rem;font-weight:600}
.seo-frontend-error{background:#fff0f3;border:1px solid #ffc1cc;border-left:4px solid var(--p);border-radius:var(--rad-xs);padding:10px 14px;margin:10px auto;font-size:.84rem;color:#c0003a;max-width:620px;text-align:left}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .seo-result-topbar{grid-template-columns:auto 1fr;gap:16px}
  .seo-topbar-dims{display:none}
  .dev-cols{grid-template-columns:1fr}
}
@media(max-width:768px){
  .seo-admin-header{flex-direction:column;gap:14px;text-align:center;padding:20px 18px}
  .seo-header-stats{justify-content:center}
  .seo-form-row{flex-direction:column}
  .seo-auth-grid,.seo-offpage-row{grid-template-columns:repeat(2,1fr)}
  .seo-brand-grid{grid-template-columns:1fr}
  .seo-weeks{grid-template-columns:1fr}
  .seo-ai-cards{grid-template-columns:1fr}
  .seo-tab-panel{padding:16px}
  .seo-hero{padding:32px 18px 26px}
  .seo-hero h2{font-size:1.6rem}
  .seo-search-box{border-radius:var(--rad-sm);flex-direction:column;padding:12px;gap:8px}
  .seo-search-btn{width:100%;justify-content:center}
  .dev-cta-btns{flex-direction:column}
  .dev-banner{flex-direction:column;gap:12px;text-align:center}
  .dev-banner-url{display:none}
}
@media(max-width:480px){
  .seo-metrics-grid{grid-template-columns:repeat(2,1fr)}
  .seo-auth-grid,.seo-offpage-row{grid-template-columns:repeat(2,1fr)}
  .seo-onpage-grid{grid-template-columns:1fr}
  .seo-tech-grid{grid-template-columns:repeat(2,1fr)}
  .seo-tab-btn{padding:11px 13px;font-size:.76rem}
}

/* ═══ CSS RING (replaces SVG — works in innerHTML) ════════ */
.seo-css-ring {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: conic-gradient(#fff 0deg, rgba(255,255,255,.22) 0deg);
  position: relative;
  flex-shrink: 0;
  transition: background .05s;
}
/* Inner mask to create donut */
.seo-css-ring::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  /* matches topbar gradient so it looks like a donut */
  background: inherit;
}
/* We override the before pseudo to be the gradient colour */
.seo-result-topbar .seo-css-ring::before {
  background: linear-gradient(135deg,#fc1d55 0%,#ff6b35 100%);
}
.seo-css-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1;
}
.seo-ring-n2    { font-size: 1.55rem; font-weight: 900; color: #fff; line-height: 1; }
.seo-ring-sub2  { font-size: .58rem; color: rgba(255,255,255,.8); margin-top: 1px; }
.seo-ring-grade2{ font-size: .7rem; font-weight: 900; color: #fff; margin-top: 1px; }

/* ═══ TOP BAR (DOM-built, guaranteed layout) ══════════════ */
.seo-result-topbar {
  background: linear-gradient(135deg,#fc1d55 0%,#ff6b35 100%);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  flex-wrap: wrap;
}
.seo-topbar-info { flex: 1; min-width: 200px; }
.seo-topbar-info h3 { font-size: .97rem; font-weight: 800; margin-bottom: 6px; }
.seo-topbar-url { margin-bottom: 5px; }
.seo-topbar-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2); padding: 4px 12px;
  border-radius: 20px; font-size: .8rem; font-weight: 700; flex-wrap: wrap;
}
.seo-live-link { color: rgba(255,255,255,.8); font-size: .72rem; text-decoration: none; margin-left: 6px; }
.seo-live-link:hover { color: #fff; text-decoration: underline; }
.seo-topbar-meta {
  display: flex; gap: 12px; font-size: .73rem;
  opacity: .88; flex-wrap: wrap;
}
.seo-topbar-dims {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.seo-dim {
  background: rgba(255,255,255,.18);
  border-radius: 8px; padding: 8px 12px;
  text-align: center; min-width: 58px;
}
.seo-dim-good { border-bottom: 3px solid #00e8a8; }
.seo-dim-warn { border-bottom: 3px solid #ffd060; }
.seo-dim-bad  { border-bottom: 3px solid #ff8080; }
.seo-dim-val  { display: block; font-size: 1.1rem; font-weight: 900; line-height: 1; }
.seo-dim-lbl  { display: block; font-size: .62rem; opacity: .85; margin-top: 2px; }

/* ═══ DEV LOGO IMG ════════════════════════════════════════ */
.dev-logo-img {
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
  display: flex; align-items: center;
}

/* ════════════════════════════════════════════════════════
   POPUP MODAL OVERLAY
   ════════════════════════════════════════════════════════ */

/* Overlay */
#seo-popup-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  background: rgba(10, 5, 20, 0.82) !important;
  z-index: 999990 !important;
  display: none !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#seo-popup-overlay.active { display: block !important; }

/* Modal box */
#seo-popup-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  width: 96% !important;
  max-width: 1400px !important;
  max-height: 92vh !important;
  background: #f8f4f6 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(252,29,85,.2) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#seo-popup-modal.active {
  display: flex !important;
  animation: seoModalIn .28s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes seoModalIn {
  from { opacity:0; transform: translate(-50%,-50%) scale(.93); }
  to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* Modal close button */
#seo-popup-close,
.seo-popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .18s;
  line-height: 1;
}
.seo-popup-close:hover {
  background: rgba(255,255,255,.4);
  transform: scale(1.1) rotate(90deg);
}

/* Scrollable content area */
#seo-popup-body, .seo-popup-body {
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.seo-popup-body::-webkit-scrollbar { width: 5px; }
.seo-popup-body::-webkit-scrollbar-track { background: #f0eaec; }
.seo-popup-body::-webkit-scrollbar-thumb { background: var(--p); border-radius: 5px; }

/* Prevent body scroll when modal open */
body.seo-modal-open, body.seo-modal-open html { overflow: hidden !important; }

/* Inside modal — results wrap fills modal */
.seo-popup-body .seo-results-wrap {
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  border: none;
}
.seo-popup-body .seo-result-topbar {
  border-radius: 0;
}
.seo-popup-body .seo-tab-panel {
  padding: 22px 24px;
}

/* Cached notice */
.seo-cached-notice {
  background: #fff8e0;
  border-left: 4px solid var(--warn);
  padding: 8px 14px;
  font-size: .78rem;
  color: #7a4a00;
  text-align: center;
}

/* ── Responsive modal ─────────────────────────────────── */
@media (max-width: 600px) {
  .seo-popup-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    top: 0; left: 0;
    transform: none;
    border-radius: 0;
  }
  .seo-popup-modal.active {
    animation: modalInMobile .25s ease forwards;
  }
  @keyframes modalInMobile {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .seo-popup-body .seo-tab-panel { padding: 16px 14px; }
  .seo-popup-body .seo-result-topbar { flex-direction: column; gap: 14px; padding: 16px; }
  .seo-popup-body .seo-topbar-dims { flex-wrap: wrap; justify-content: center; }
}


/* ══ Brand Intelligence + Roadmap — scoped for popup specificity ══ */
/* ════════════════════════════════════════════════════════
   BRAND INTELLIGENCE — REDESIGN
   ════════════════════════════════════════════════════════ */

/* Remove old brand grid */
.seo-brand-grid { display: block; }

/* New brand hero card */
.seo-brand-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px;
}

/* Score + niche row */
.seo-brand-top {
  background: linear-gradient(135deg, #fc1d55 0%, #ff6b35 100%) !important;
  border-radius: var(--rad-sm) !important;
  padding: 22px 24px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
}
.seo-brand-score-circle {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  border: 3px solid rgba(255,255,255,.5) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  text-align: center !important;
}
.seo-brand-score-n { font-size: 1.7rem !important; font-weight: 900 !important; line-height: 1 !important; display: block !important; color: #fff !important; }
.seo-brand-score-l { font-size: .62rem !important; opacity: .85; margin-top: 1px !important; display: block !important; color: #fff !important; }
.seo-brand-top-info { flex: 1; }
.seo-brand-top-info h4 { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.seo-brand-top-info p  { font-size: .8rem; opacity: .88; line-height: 1.5; margin-bottom: 10px; }
.seo-brand-niche-badge {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 20px !important; padding: 4px 13px !important;
  font-size: .75rem !important; font-weight: 700 !important;
  color: #fff !important;
}

/* Brand signals grid — card style */
.seo-brand-sigs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
  gap: 10px;
}
.seo-brand-sig-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rad-sm) !important;
  padding: 13px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  transition: transform .15s, box-shadow .15s;
}
.seo-brand-sig-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.seo-brand-sig-card.sig-pass { border-left: 4px solid var(--good); background: #f0fff8; }
.seo-brand-sig-card.sig-fail { border-left: 4px solid var(--bad);  background: #fff5f5; }
.seo-brand-sig-icon { font-size: 1.2rem; flex-shrink: 0; }
.seo-brand-sig-label { font-size: .8rem; font-weight: 600; color: var(--txt); flex: 1; }
.seo-brand-sig-status { font-size: .85rem; flex-shrink: 0; }

/* Social platforms — improved */
.seo-brand-social-section { }
.seo-brand-social-title {
  font-size: .85rem; font-weight: 800;
  color: var(--txt); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.seo-social-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px;
}
.seo-social-card {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 13px !important;
  border-radius: var(--rad-sm) !important;
  border: 1px solid var(--border) !important;
  font-size: .78rem; font-weight: 700;
  transition: transform .15s;
}
.seo-social-card:hover { transform: translateY(-1px); }
.seo-social-card.sc-on  { background: #f0fff8; border-color: #a0f0cc; color: #00663a; }
.seo-social-card.sc-off { background: #f8f8f8; border-color: #e0e0e0; color: #aaa; }
.seo-social-card-icon { font-size: 1.1rem; }
.seo-social-card-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; margin-left: auto;
}
.sc-on  .seo-social-card-dot { background: var(--good); }
.sc-off .seo-social-card-dot { background: #ccc; }

/* ════════════════════════════════════════════════════════
   12-MONTH ROADMAP — TASK CARD REDESIGN
   ════════════════════════════════════════════════════════ */

/* Phase cards with task-card style */
.seo-phase-v2 {
  border-radius: var(--rad-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

/* Phase header (coloured) */
.seo-phase-v2-head {
  padding: 18px 22px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.seo-phase-v2.p1 .seo-phase-v2-head { background: linear-gradient(135deg,#fc1d55,#e8004a); }
.seo-phase-v2.p2 .seo-phase-v2-head { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.seo-phase-v2.p3 .seo-phase-v2-head { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.seo-phase-v2.p4 .seo-phase-v2-head { background: linear-gradient(135deg,#10b981,#0ea5e9); }
.seo-phase-v2.p5 .seo-phase-v2-head { background: linear-gradient(135deg,#f59e0b,#ef4444); }

.seo-phase-v2-period {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  color: #fff !important;
  display: inline-block !important;
}
.seo-phase-v2-title-wrap { flex: 1; }
.seo-phase-v2-title { font-size: .98rem; font-weight: 800; margin-bottom: 2px; }
.seo-phase-v2-obj   { font-size: .75rem; opacity: .88; line-height: 1.4; }

/* Task cards inside phase */
.seo-phase-v2-tasks {
  background: #fff !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.seo-phase-task-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: var(--surf) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rad-xs) !important;
  padding: 11px 13px !important;
  transition: box-shadow .15s;
}
.seo-phase-task-card:hover { box-shadow: var(--shadow); }

.seo-phase-task-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
.seo-phase-task-num {
  width: 24px !important; height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#fc1d55,#ff6b35) !important;
  color: #fff !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.seo-phase-task-body { flex: 1; min-width: 0; }
.seo-phase-task-name { font-size: .82rem; font-weight: 600; color: var(--txt); line-height: 1.45; margin-bottom: 5px; }
.seo-phase-task-tags { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; }
.seo-phase-task-tag {
  padding: 2px 8px !important; border-radius: 10px !important;
  font-size: .63rem !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .03em !important;
  display: inline-block !important;
}
/* Impact colours */
.ptag-high     { background: #ffe0e6; color: #99000d; }
.ptag-medium   { background: #fff5e0; color: #7a4a00; }
.ptag-low      { background: #e0edff; color: #003d99; }
/* Category colours */
.ptag-content  { background: #f0fdf4; color: #005f40; border: 1px solid #a7f3d0; }
.ptag-tech     { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.ptag-links    { background: #fdf4ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.ptag-brand    { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ptag-local    { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }

/* KPI footer */
.seo-phase-v2-kpi {
  background: var(--surf);
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
}
.seo-phase-v2-kpi strong { color: var(--txt); }
.seo-phase-v2-kpi span   { color: var(--muted); }

@media (max-width: 600px) {
  .seo-brand-sigs-grid  { grid-template-columns: 1fr 1fr; }
  .seo-social-grid      { grid-template-columns: repeat(3,1fr); }
  .seo-brand-top        { flex-direction: column; text-align: center; }
}


/* ── Same styles scoped under popup body for max override priority ── */
#seo-popup-body .seo-brand-wrap,
.seo-results-wrap .seo-brand-wrap { display: flex !important; flex-direction: column !important; gap: 18px !important; }

#seo-popup-body .seo-brand-top,
.seo-results-wrap .seo-brand-top { display: flex !important; align-items: center !important; gap: 22px !important; background: linear-gradient(135deg, #fc1d55 0%, #ffffff 100%) !important; padding: 22px 24px !important; border-radius: 10px !important; color: #fff !important; }

#seo-popup-body .seo-brand-score-circle,
.seo-results-wrap .seo-brand-score-circle { width: 80px !important; height: 80px !important; border-radius: 50% !important; background: rgba(255,255,255,.18) !important; border: 3px solid rgba(255,255,255,.5) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }

#seo-popup-body .seo-brand-score-n,
.seo-results-wrap .seo-brand-score-n { font-size: 1.7rem !important; font-weight: 900 !important; line-height: 1 !important; display: block !important; color: #fff !important; }

#seo-popup-body .seo-brand-score-l,
.seo-results-wrap .seo-brand-score-l { font-size: .62rem !important; display: block !important; color: rgba(255,255,255,.85) !important; }

#seo-popup-body .seo-brand-sigs-grid,
.seo-results-wrap .seo-brand-sigs-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(175px,1fr)) !important; gap: 10px !important; }

#seo-popup-body .seo-brand-sig-card,
.seo-results-wrap .seo-brand-sig-card { display: flex !important; align-items: center !important; gap: 10px !important; padding: 13px 14px !important; border: 1px solid #edd8df !important; border-radius: 10px !important; background: #fff !important; }

#seo-popup-body .seo-brand-sig-card.sig-pass,
.seo-results-wrap .seo-brand-sig-card.sig-pass { border-left: 4px solid #00c48c !important; background: #f0fff8 !important; }

#seo-popup-body .seo-brand-sig-card.sig-fail,
.seo-results-wrap .seo-brand-sig-card.sig-fail { border-left: 4px solid #ef4444 !important; background: #fff5f5 !important; }

#seo-popup-body .seo-social-grid,
.seo-results-wrap .seo-social-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)) !important; gap: 8px !important; }

#seo-popup-body .seo-social-card,
.seo-results-wrap .seo-social-card { display: flex !important; align-items: center !important; gap: 8px !important; padding: 9px 13px !important; border-radius: 10px !important; border: 1px solid #edd8df !important; font-size: .78rem !important; font-weight: 700 !important; }

#seo-popup-body .seo-social-card.sc-on,
.seo-results-wrap .seo-social-card.sc-on { background: #f0fff8 !important; border-color: #a0f0cc !important; color: #00663a !important; }

#seo-popup-body .seo-social-card.sc-off,
.seo-results-wrap .seo-social-card.sc-off { background: #f8f8f8 !important; border-color: #e0e0e0 !important; color: #aaa !important; }

/* Roadmap phase-v2 scoped */
#seo-popup-body .seo-phase-v2,
.seo-results-wrap .seo-phase-v2 { border-radius: 10px !important; overflow: hidden !important; border: 1px solid #edd8df !important; margin-bottom: 16px !important; }

#seo-popup-body .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2-head { padding: 18px 22px !important; color: #fff !important; display: flex !important; align-items: center !important; gap: 14px !important; }

#seo-popup-body .seo-phase-v2.p1 .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2.p1 .seo-phase-v2-head { background: linear-gradient(135deg,#fc1d55,#e8004a) !important; }
#seo-popup-body .seo-phase-v2.p2 .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2.p2 .seo-phase-v2-head { background: linear-gradient(135deg,#6366f1,#8b5cf6) !important; }
#seo-popup-body .seo-phase-v2.p3 .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2.p3 .seo-phase-v2-head { background: linear-gradient(135deg,#0ea5e9,#6366f1) !important; }
#seo-popup-body .seo-phase-v2.p4 .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2.p4 .seo-phase-v2-head { background: linear-gradient(135deg,#10b981,#0ea5e9) !important; }
#seo-popup-body .seo-phase-v2.p5 .seo-phase-v2-head,
.seo-results-wrap .seo-phase-v2.p5 .seo-phase-v2-head { background: linear-gradient(135deg,#f59e0b,#ef4444) !important; }

#seo-popup-body .seo-phase-v2-period,
.seo-results-wrap .seo-phase-v2-period { background: rgba(255,255,255,.2) !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 20px !important; padding: 3px 12px !important; font-size: .7rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; white-space: nowrap !important; flex-shrink: 0 !important; color: #fff !important; display: inline-block !important; }

#seo-popup-body .seo-phase-v2-title,
.seo-results-wrap .seo-phase-v2-title { font-size: .98rem !important; font-weight: 800 !important; color: #fff !important; }

#seo-popup-body .seo-phase-v2-obj,
.seo-results-wrap .seo-phase-v2-obj { font-size: .75rem !important; opacity: .88; line-height: 1.4 !important; color: #fff !important; margin-top: 3px !important; }

#seo-popup-body .seo-phase-v2-tasks,
.seo-results-wrap .seo-phase-v2-tasks { background: #fff !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }

#seo-popup-body .seo-phase-task-card,
.seo-results-wrap .seo-phase-task-card { display: flex !important; align-items: flex-start !important; gap: 12px !important; background: #fdf5f7 !important; border: 1px solid #edd8df !important; border-radius: 7px !important; padding: 11px 13px !important; }

#seo-popup-body .seo-phase-task-num,
.seo-results-wrap .seo-phase-task-num { width: 24px !important; height: 24px !important; min-width: 24px !important; border-radius: 50% !important; background: linear-gradient(135deg,#fc1d55,#ff6b35) !important; color: #fff !important; font-size: .65rem !important; font-weight: 900 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-top: 2px !important; }

#seo-popup-body .seo-phase-task-name,
.seo-results-wrap .seo-phase-task-name { font-size: .82rem !important; font-weight: 600 !important; color: #1a0a14 !important; line-height: 1.45 !important; margin-bottom: 6px !important; }

#seo-popup-body .seo-phase-task-tags,
.seo-results-wrap .seo-phase-task-tags { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; }

#seo-popup-body .seo-phase-task-tag,
.seo-results-wrap .seo-phase-task-tag { padding: 2px 8px !important; border-radius: 10px !important; font-size: .63rem !important; font-weight: 800 !important; text-transform: uppercase !important; display: inline-block !important; }

.ptag-high   { background: #ffe0e6 !important; color: #99000d !important; }
.ptag-medium { background: #fff5e0 !important; color: #7a4a00 !important; }
.ptag-low    { background: #e0edff !important; color: #003d99 !important; }
.ptag-content{ background: #f0fdf4 !important; color: #005f40 !important; border: 1px solid #a7f3d0 !important; }
.ptag-tech   { background: #eff6ff !important; color: #1e3a8a !important; border: 1px solid #bfdbfe !important; }
.ptag-links  { background: #fdf4ff !important; color: #6b21a8 !important; border: 1px solid #e9d5ff !important; }
.ptag-brand  { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }
.ptag-local  { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #6ee7b7 !important; }

#seo-popup-body .seo-phase-v2-kpi,
.seo-results-wrap .seo-phase-v2-kpi { background: #fdf5f7 !important; border-top: 1px solid #edd8df !important; padding: 10px 18px !important; display: flex !important; align-items: center !important; gap: 8px !important; font-size: .78rem !important; }