/* ═══════════════════════════════════════════════════════════════
   CrazyDodo theme v2 — avineshbundhoo.com palette
   Loaded AFTER style.css. Remove the <link> in index.php to revert.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy: #1B2140;
  --navy-2: #262D52;
  --indigo: #667EEA;
  --purple: #764BA2;
  --grad: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --lav: #F3F2FC;
  --lav-2: #E9E7FB;

  --sidebar-bg: #1B2140;
  --sidebar-border: #262D52;
  --sidebar-text: #B4BAD6;
  --sidebar-hover: #262D52;
  --sidebar-w: 236px;

  --main-bg: #F8F9FD;
  --card-bg: #FFFFFF;
  --border: #E6E8F2;

  --blue: #667EEA;
  --orange: #667EEA;
  --green: #12B886;
  --red: #E5484D;
  --seafoam: #12B886;
  --gold: #F59F00;
  --muted: #6B7392;
  --text: #1B2140;

  --text-dark: #1B2140;
  --text-body: #3D4466;
  --text-muted: #6B7392;
  --text-light: #AEB3CC;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(27,33,64,.06), 0 1px 6px rgba(27,33,64,.04);
  --shadow-md: 0 6px 20px rgba(27,33,64,.08);
  --shadow-lg: 0 18px 48px rgba(27,33,64,.14);
}

html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { background: var(--main-bg); color: var(--text-body); -webkit-font-smoothing: antialiased; }

html, body { overflow-x: hidden; }
.main-wrapper, .main-content, #results, #hero, .tab-panels, .tab-panel { min-width: 0; max-width: 100%; }
.main-wrapper { background: var(--main-bg); }
.main-content { padding: 28px 32px 48px; }
.card table, .tab-panel table { display: block; overflow-x: auto; max-width: 100%; }

.sidebar { background: var(--navy); border-right: none; }
.sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar-logo-text { color: #fff; font-weight: 800; letter-spacing: -.2px; }
.sidebar-nav { padding: 12px 10px; }
.nav-item { color: var(--sidebar-text); border-radius: 8px; font-weight: 500; font-size: 13.5px; padding: 9px 12px; margin-bottom: 2px; transition: background .15s, color .15s; }
.nav-item:hover { background: var(--navy-2); color: #fff; }
.nav-item.active { background: rgba(102,126,234,.18); color: #fff; box-shadow: inset 3px 0 0 #667EEA; }
.nav-item.active .nav-icon { color: #8EA0F2; }
.nav-section-label { color: #7D84A8; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; padding: 16px 12px 6px; }
.nav-badge { background: var(--grad) !important; color: #fff; font-weight: 700; border-radius: 20px; }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.06); }
.plan-name { color: #fff; }
.plan-sub { color: #7D84A8; }
.btn-signin-sidebar { background: var(--grad); border: none; color: #fff; font-weight: 700; border-radius: 8px; }
.btn-signin-sidebar:hover { filter: brightness(1.08); background: var(--grad); }
.btn-work-with-me { color: #B4BAD6; border-color: rgba(255,255,255,.14); border-radius: 8px; }
.btn-work-with-me:hover { color: #fff; border-color: #667EEA; }

.mobile-topbar { background: var(--navy); }
.mobile-logo { color: #fff; font-weight: 800; }

#hero { position: relative; }
#hero::before { content: ""; position: absolute; inset: -28px -32px auto; height: 420px; z-index: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 20% 0%, rgba(102,126,234,.16), transparent 70%), radial-gradient(520px 240px at 85% 10%, rgba(118,75,162,.14), transparent 70%); }
.hero-center { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; text-align: center; padding-top: 28px; }
.hero-eyebrow { display: inline-block; background: var(--lav); color: var(--purple); border: 1px solid var(--lav-2); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero-headline { color: var(--navy); font-weight: 800; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -1px; }
.hero-sub { color: var(--text-muted); font-size: 17px; margin-top: 12px; }

.hero-form { margin: 30px auto 0; max-width: 720px; }
.hero-input-row { position: relative; display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: var(--shadow-lg); }
#url-input { flex: 1; min-width: 0; border: none !important; outline: none; box-shadow: none !important; font-size: 16px; padding: 12px 14px; background: transparent; color: var(--navy); }
#url-input::placeholder { color: #9AA0BD; }
.hero-input-row:focus-within { border-color: #667EEA; box-shadow: 0 0 0 4px rgba(102,126,234,.15), var(--shadow-lg); }

.btn-cta { background: var(--grad) !important; color: #fff !important; border: none !important; border-radius: 10px; font-weight: 700; padding: 13px 24px; white-space: nowrap; box-shadow: 0 8px 20px rgba(102,126,234,.35); transition: transform .12s, filter .15s, box-shadow .15s; }
.btn-cta:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(102,126,234,.42); }
.btn-cta:active { transform: none; }

.start-arrow-wrap { display: flex !important; position: absolute; left: -128px; top: -26px; flex-direction: column; align-items: flex-end; pointer-events: none; }
.start-label { font-weight: 800; font-size: 13px; color: var(--purple); letter-spacing: .5px; transform: rotate(-6deg); }
.start-arrow { width: 70px; height: 46px; }
.start-arrow path { stroke: var(--purple) !important; }
@media (max-width: 1180px) { .start-arrow-wrap { display: none !important; } }

.dashboard-preview { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); background: #fff; overflow: hidden; margin-top: 44px; }
.preview-topbar { background: var(--lav); border-bottom: 1px solid var(--border); }
.preview-url { color: var(--text-muted); }
.preview-metric-val { color: var(--navy) !important; font-weight: 800; }
.preview-metric:nth-child(odd) .preview-metric-val { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.preview-metric-lbl { color: var(--text-muted); }
.preview-bar { background: var(--grad) !important; border-radius: 6px 6px 0 0; }
.preview-bar:nth-child(even) { opacity: .55; }

.steps-list { gap: 16px; margin-top: 36px; }
.step-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; text-align: left; }
.step-num { background: var(--grad) !important; color: #fff !important; font-weight: 800; }
.step-title { color: var(--navy); font-weight: 700; }
.step-desc { color: var(--text-muted); }

#loading-overlay { background: rgba(248,249,253,.94); backdrop-filter: blur(6px); }
.loading-spinner { border-color: var(--lav-2) !important; border-top-color: #667EEA !important; }
.loading-msg { color: var(--navy); font-weight: 700; }
.loading-domain { color: var(--text-muted); }

.results-topbar { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.domain-name { color: var(--navy); font-weight: 800; font-size: 22px; letter-spacing: -.3px; }
.domain-url { color: var(--text-muted); }
.btn-rescan { background: #fff; color: var(--navy); border: 1px solid var(--border); border-radius: 8px; font-weight: 600; }
.btn-rescan:hover { border-color: #667EEA; color: var(--purple); }

.score-dials-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px; }
.score-dial-wrap { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 20px 12px 16px; }
.dial-track { stroke: var(--lav-2); }
.dial-progress { stroke-width: 8; }
.dial-label { color: var(--text-muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
@media (max-width: 900px) { .score-dials-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } }

.quick-stats { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.qs-chip { background: transparent; border: none; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 12px; min-width: 0; align-items: flex-start; }
.qs-chip:last-child { border-right: none; }
.qs-icon { display: none; }
.qs-lbl { order: -1; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.qs-val { color: var(--navy); font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
@media (max-width: 1100px) { .quick-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qs-chip:nth-child(3n) { border-right: none; } .qs-chip:nth-child(-n+3) { border-bottom: 1px solid var(--border); } }
@media (max-width: 560px) { .quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qs-chip { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); } .qs-chip:nth-child(2n) { border-right: none !important; } .qs-val { font-size: 20px; } }

.card:has(> #domain-cards) { display: none; }

.tab-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; border-bottom: 1px solid var(--border); margin: 26px 0 20px; max-width: 100%; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn { flex: 0 0 auto; background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-muted); font-weight: 600; font-size: 14px; padding: 10px 14px; white-space: nowrap; }
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--purple); border-bottom-color: #667EEA; background: none; }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card-title { color: var(--navy); font-weight: 800; font-size: 16px; letter-spacing: -.2px; }

.iss-card { border-radius: var(--radius-md); border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-sm); }
.iss-card.critical { border-top: 3px solid var(--red); }
.iss-card.warning  { border-top: 3px solid var(--gold); }
.iss-card.passed   { border-top: 3px solid var(--green); }
.iss-card.critical .iss-num { color: var(--red); }
.iss-card.warning .iss-num  { color: var(--gold); }
.iss-card.passed .iss-num   { color: var(--green); }

.quick-win-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: #fff; }
.quick-win-item + .quick-win-item { margin-top: 10px; }
.qw-title { color: var(--navy); font-weight: 700; }
.qw-detail { color: var(--text-body); line-height: 1.55; }

.connect-prompt-card { background: var(--lav); border: 1px dashed #C9C5F1; border-radius: var(--radius-md); }
.connect-prompt-text h3 { color: var(--navy); }

.unlock-overlay { background: linear-gradient(180deg, rgba(248,249,253,0) 0%, rgba(248,249,253,.92) 28%, #F8F9FD 60%); }
.unlock-card { position: relative; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; max-width: 440px; }
.unlock-icon { background: var(--lav); width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.unlock-title { color: var(--navy); font-weight: 800; }
.unlock-sub { color: var(--text-muted); }
.unlock-benefits li { color: var(--text-body); }
.unlock-benefits li::before { color: #667EEA !important; }
.unlock-card .btn-cta { width: 100%; }

.btn-auth-submit { background: var(--grad); }
.btn-auth-submit:hover { background: var(--grad); filter: brightness(1.07); }
.auth-tab.active { color: var(--purple); }
.auth-field input:focus { border-color: #667EEA; box-shadow: 0 0 0 3px rgba(102,126,234,.15); }

@media (max-width: 900px) {
  .main-content { padding: 18px 16px 40px; }
  #hero::before { inset: -18px -16px auto; }
}
@media (max-width: 600px) {
  .hero-center { padding-top: 8px; }
  .hero-sub { font-size: 15px; }
  .hero-input-row { flex-direction: column; align-items: stretch; padding: 8px; }
  .btn-cta { width: 100%; }
  .dashboard-preview { margin-top: 28px; }
  .domain-name { font-size: 18px; }
  .btn-rescan { width: 100%; }
  .dial-svg { width: 68px; height: 68px; }
  .score-dial-wrap .dial-svg + .dial-center { width: 68px; height: 68px; }
  .dial-num { font-size: 19px; }
  .dial-label { margin-top: 20px; }
}
.qw-lock { display:inline-block; margin-top:4px; font-size:13px; font-weight:600; color:#764BA2; text-decoration:none; }
.qw-lock:hover { text-decoration:underline; }

/* ── Shared sidebar (includes/sidebar.php) ── */
.nav-item { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.nav-badge { font-size: 9.5px; padding: 2px 7px; letter-spacing: .4px; }
.nav-badge-soft { background: rgba(102,126,234,.25) !important; color: #C9D2FF !important; }
.nav-badge-new { background: #12B886 !important; }


/* Skeleton previews are decoration for locked tabs only */
.tab-panel[data-gate]:not(.gate-active) .gate-preview-card { display: none !important; }
.kw-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.kw-intro p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.kw-table td a.kw-research { color: #4F5FD6; font-weight: 600; text-decoration: none; }
.kw-table td a.kw-research:hover { text-decoration: underline; }

#kw-content .btn-ghost { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font: 600 13px 'Inter', sans-serif; color: var(--navy); text-decoration: none; white-space: nowrap; }
#kw-content .btn-ghost:hover { border-color: #667EEA; color: var(--purple); }
#kw-content .kw-table { width: 100%; display: table !important; }
#kw-content .kw-table th, #kw-content .kw-table td { text-align: left; }

/* Competitors tab */
#competitors-content .card { padding: 20px; }
.comp-head { margin-bottom: 10px; }
.comp-note { color: var(--text-muted); font-size: 13.5px; margin: 4px 0 0; }
.comp-note a { color: #4F5FD6; font-weight: 600; }
.comp-foot { margin-top: 14px; }
.comp-seeds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.comp-chip { background: var(--lav); color: var(--purple); border-radius: 20px; padding: 4px 10px; font-weight: 600; }
.comp-scroll { overflow-x: auto; max-width: 100%; }
#competitors-content .comp-table { width: 100%; display: table !important; border-collapse: collapse; font-size: 14px; }
#competitors-content .comp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: #FBFBFE; }
#competitors-content .comp-table td { padding: 11px 10px; border-bottom: 1px solid #F0F1F7; vertical-align: middle; }
.comp-n { color: var(--text-muted); font-weight: 600; }
.comp-domain { white-space: nowrap; font-weight: 600; }
.comp-domain img { vertical-align: -3px; margin-right: 4px; border-radius: 3px; }
.comp-domain a { color: var(--navy); text-decoration: none; }
.comp-share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.comp-share .kw-bar-track { width: 60px; }
.comp-share span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.comp-kw { font-size: 12.5px; color: var(--text-muted); }
.comp-go { color: #4F5FD6; font-weight: 600; text-decoration: none; white-space: nowrap; font-size: 13px; }
.comp-loading { display: flex; gap: 14px; align-items: center; color: var(--text-muted); font-size: 14px; }
.comp-loading b { color: var(--navy); }
.comp-spin { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 3px solid var(--lav-2); border-top-color: #667EEA; animation: cdspin2 .8s linear infinite; }
@keyframes cdspin2 { to { transform: rotate(360deg); } }

#competitors-content .comp-table td, #competitors-content .comp-table th { text-align: left !important; }
#competitors-content .comp-domain { display: table-cell; white-space: nowrap; }
#competitors-content .comp-domain img { display: inline-block; }
#competitors-content .comp-share .kw-bar-track { display: block; width: 60px; height: 6px; border-radius: 6px; background: var(--lav-2); overflow: hidden; }
#competitors-content .comp-share .kw-bar-fill { display: block; height: 100%; background: var(--grad); border-radius: 6px; }

/* ── Continue with Google (auth modal) ── */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid #DADCE0; border-radius: 10px; background: #fff; color: #1f1f1f; font: 600 14.5px 'Inter', sans-serif; text-decoration: none; margin: 6px 0 2px; }
.btn-google:hover { background: #F8F9FB; border-color: #C6C9D6; }
.auth-or { display: flex; align-items: center; gap: 10px; color: #6B7392; font-size: 12.5px; margin: 12px 0 6px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #E6E7F2; }