/* ════════════════════════════════════════════════════════════
   CHIRAG ARORA — DESIGN SYSTEM  |  style.css
   Mobile-first. Shared across all pages.
════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  --cream:     #FAFAF7;
  --white:     #FFFFFF;
  --gold:      #C8963E;
  --gold-lt:   #F0D9B0;
  --gold-bg:   #FBF5EA;
  --ink:       #1A1A2E;
  --slate:     #4B5563;
  --muted:     #9CA3AF;
  --border:    #E9E5DC;
  --blue:      #1D4ED8;
  --red-yt:    #FF0000;
  --li-blue:   #0A66C2;
  --fb-blue:   #1877F2;
  --shadow-s:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-m:  0 6px 30px rgba(0,0,0,0.10);
  --shadow-l:  0 16px 60px rgba(0,0,0,0.12);
  --radius:    12px;
  --radius-lg: 20px;
  --nav-h:     64px;
  --mob-cta-h: 68px;   /* height of sticky bottom bar */
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--cream);color:var(--ink);overflow-x:hidden;
  /* leave room for sticky bottom bar on mobile */
  padding-bottom: var(--mob-cta-h);
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}

/* Desktop: no bottom padding needed (CTA bar hidden) */
@media(min-width:769px){ body{ padding-bottom:0; } }

/* ── 3. NAVBAR ────────────────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(250,250,247,0.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:var(--nav-h);display:flex;align-items:center;
  padding:0 5%;gap:1.5rem;transition:box-shadow .3s;
}
#navbar.scrolled{box-shadow:var(--shadow-m);}

.nav-brand{
  font-family:'Playfair Display',serif;font-size:1.45rem;
  font-weight:800;color:var(--ink);white-space:nowrap;flex-shrink:0;
}
.nav-brand em{font-style:italic;color:var(--gold);}

.nav-links{display:flex;align-items:center;gap:0.15rem;margin-left:auto;}
.nav-links a{
  font-size:0.76rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);
  padding:.45rem .65rem;border-radius:6px;transition:all .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.nav-cta{
  background:var(--ink)!important;color:var(--white)!important;
  padding:.5rem 1.1rem!important;border-radius:6px!important;margin-left:.4rem;
}
.nav-cta:hover,.nav-cta.active{background:var(--gold)!important;}

/* ── MEGA-DROPDOWN ──────────────────────────────────────── */

/* The <li> wrapper — establishes positioning context */
.nav-has-drop { position: relative; }

/* Trigger chevron */
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-chev {
  font-size: .55rem; transition: transform .2s;
  color: var(--muted);
}
.nav-has-drop:hover .nav-chev,
#nav-tools-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

/* The dropdown panel */
.nav-mega {
  display: none;                      /* hidden by default */
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--white);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,.12);
  z-index: 899;
  animation: megaFadeIn .18s ease;
}
.nav-mega.open { display: block; }

@keyframes megaFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Inner grid: 6 equal columns — full width */
.nav-mega-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 0 5%;
}

/* Each category column */
.nav-mega-col {
  padding: 1.6rem 1.2rem 1.6rem 0;
  border-right: 1px solid var(--border);
}
.nav-mega-col:last-child { border-right: none; padding-right: 0; }
.nav-mega-col:first-child { padding-left: 0; }

/* Category heading row */
.nav-mega-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink);
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}
.nav-mega-ico {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem;
}

/* Tool links inside each column */
.nav-mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.nav-mega-col ul a {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 500; color: var(--slate);
  padding: .42rem .5rem; border-radius: 7px;
  text-decoration: none; transition: all .15s;
  white-space: nowrap;
}
.nav-mega-col ul a i {
  width: 14px; text-align: center; font-size: .68rem;
  color: var(--muted); flex-shrink: 0;
}
.nav-mega-col ul a:hover {
  color: var(--gold); background: var(--gold-bg);
}
.nav-mega-col ul a:hover i { color: var(--gold); }

/* "View All" CTA at bottom of last col */
.nav-mega-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 1.1rem; padding: .55rem .9rem;
  background: var(--ink); color: var(--white) !important;
  border-radius: 9px; font-size: .74rem; font-weight: 700;
  text-decoration: none; transition: background .18s;
  white-space: nowrap;
}
.nav-mega-cta:hover { background: var(--gold) !important; color: var(--ink) !important; }
.nav-mega-cta i { font-size: .68rem; }

/* ── MOBILE TOOLS ACCORDION ─────────────────────────────── */

/* The accordion item sits inside the mobile drawer */
/* ── MOBILE TOOLS ACCORDION ──────────────────────────────── */
.mob-tools-item {
  border-bottom: 1px solid var(--border);
}
/* Trigger row — same height/look as top-level nav links */
.mob-tools-trigger {
  width: 100%; background: none; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  padding: 1rem 0;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; text-align: left;
}
.mob-tools-trigger:hover { color: var(--gold); }
.mob-tools-chev { font-size: .72rem; color: var(--gold); transition: transform .25s; flex-shrink: 0; }

/* Accordion panel — inset cream background */
.mob-tools-panel {
  display: none; flex-direction: column; gap: 0;
  background: var(--cream);
  margin: 0 -6%;
  padding: .6rem 6% 1.2rem;
}
.mob-tools-panel.open { display: flex; }

/* Category block */
.mob-tools-cat { margin-bottom: .85rem; }

.mob-cat-label {
  font-size: .61rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  padding: .55rem 0 .3rem;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: .3rem;
}
.mob-cat-label i { color: var(--gold); font-size: .58rem; }

/* 2-col link grid */
.mob-cat-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.mob-cat-links a {
  display: block;
  font-size: .84rem; font-weight: 600; color: var(--slate);
  padding: .42rem .4rem .42rem 0;
  text-decoration: none;
  border: none !important; background: none;
}
.mob-cat-links a:hover { color: var(--gold); }
.mob-cat-links a::after { display: none !important; content: none !important; }

/* View All CTA */
.mob-tools-all {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: .85rem; padding: .65rem 1rem;
  background: var(--ink); color: #fff !important;
  border-radius: 9px; font-size: .82rem; font-weight: 700;
  text-decoration: none; border: none !important;
}
.mob-tools-all:hover { background: var(--gold); color: var(--ink) !important; }
.mob-tools-all::after { display: none !important; content: none !important; }

/* ── Hamburger ──────────────────────────────────────────── */
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;margin-left:auto;padding:6px;}
.hamburger span{width:22px;height:2px;background:var(--ink);display:block;border-radius:2px;transition:.3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ── Mobile menu drawer ─────────────────────────────────── */
.mobile-menu{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--white);z-index:899;flex-direction:column;
  padding:1.5rem 6%;overflow-y:auto;
}
.mobile-menu.open{display:flex;}

/* ONLY direct <a> children get the big style + arrow */
.mobile-menu > a{
  font-size:1.05rem;font-weight:700;color:var(--ink);
  padding:1rem 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;
}
.mobile-menu > a::after{content:'›';color:var(--gold);font-size:1.4rem;}
.mobile-menu > a.active{color:var(--gold);}
.mobile-menu > a:hover{color:var(--gold);}

.mobile-menu .mob-social-row{
  display:flex;gap:.8rem;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--border);
}

/* ── 4. MOBILE CTA BAR (YesMadam style) ──────────────────── */
.mobile-cta-bar{
  display:none; /* hidden on desktop */
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:var(--white);
  border-top:1.5px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,0.12);
  height:var(--mob-cta-h);
  padding:0 .5rem;
  align-items:center;gap:.4rem;
}
.mobile-cta-bar .mob-cta-btn{
  flex:1;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;transition:all .2s;
  border:none;text-decoration:none;
}
.mob-cta-call{background:var(--cream);color:var(--ink);border:1.5px solid var(--border)!important;}
.mob-cta-call:hover{background:var(--border);}
.mob-cta-wa{background:#25D366;color:white;}
.mob-cta-wa:hover{background:#1EB757;}
.mob-cta-li{background:#0A66C2;color:white;}
.mob-cta-li:hover{background:#064C8C;}
.mob-cta-btn i{font-size:.85rem;}

@media(max-width:768px){
  .mobile-cta-bar{display:flex;}
}

/* ── 5. BUTTONS ──────────────────────────────────────────── */
.btn-primary{
  background:var(--ink);color:var(--white);
  padding:.9rem 2rem;border-radius:10px;
  font-size:.85rem;font-weight:700;letter-spacing:.03em;
  border:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s;
}
.btn-primary:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,150,62,.35);}

.btn-secondary{
  background:transparent;color:var(--ink);
  padding:.9rem 2rem;border-radius:10px;
  font-size:.85rem;font-weight:700;
  border:1.5px solid var(--border);display:inline-flex;align-items:center;gap:8px;transition:all .25s;
}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}

.btn-gold{
  background:var(--gold);color:var(--white);
  padding:.85rem 2rem;border-radius:10px;
  font-size:.85rem;font-weight:700;border:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;
}
.btn-gold:hover{background:#B8832E;transform:translateY(-2px);}

.btn-outline-gold{
  background:transparent;color:var(--gold);
  padding:.85rem 2rem;border-radius:10px;
  font-size:.85rem;font-weight:700;
  border:1.5px solid var(--gold);
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;
}
.btn-outline-gold:hover{background:var(--gold);color:var(--white);}

.btn-full{width:100%;justify-content:center;}

/* ── 6. SECTION COMMONS ──────────────────────────────────── */
section{padding:50px 5%;}
@media(max-width:768px){section{padding:36px 5%;}}

.section-tag{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gold);font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:.8rem;
}
.section-tag::before{content:'';width:20px;height:2px;background:var(--gold);display:block;}

.section-h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:800;line-height:1.15;color:var(--ink);margin-bottom:.9rem;
}
.section-h2 em{font-style:italic;color:var(--gold);}
.section-sub{color:var(--slate);font-size:.93rem;line-height:1.75;max-width:580px;}
.section-header{margin-bottom:2rem;}
@media(max-width:768px){.section-header{margin-bottom:1.4rem;}}

.card{
  background:var(--white);border-radius:var(--radius);
  border:1px solid var(--border);box-shadow:var(--shadow-s);
  transition:all .25s;overflow:hidden;
}
.card:hover{box-shadow:var(--shadow-m);transform:translateY(-4px);}

/* ── 7. PAGE BANNER ──────────────────────────────────────── */
.page-banner{
  padding:calc(var(--nav-h) + 50px) 5% 60px;
  background:linear-gradient(135deg,var(--cream) 0%,var(--gold-bg) 100%);
  position:relative;overflow:hidden;
}
.page-banner::after{
  content:attr(data-label);
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  font-family:'Playfair Display',serif;font-size:9rem;font-weight:800;
  color:rgba(200,150,62,.06);white-space:nowrap;pointer-events:none;
}
.page-banner-blob{
  position:absolute;right:-5%;bottom:-20%;width:500px;height:500px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,150,62,.1) 0%,transparent 70%);
}
.page-banner-inner{position:relative;z-index:1;max-width:680px;}
.breadcrumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.8rem;
}
.breadcrumb a{color:var(--gold);}
.breadcrumb i{font-size:.55rem;}
.page-banner h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3.8rem);
  font-weight:800;line-height:1.1;color:var(--ink);margin-bottom:.7rem;
}
.page-banner h1 em{font-style:italic;color:var(--gold);}
.page-banner p{font-size:.95rem;color:var(--slate);line-height:1.75;max-width:560px;margin-bottom:1.4rem;}
.page-banner-badges{display:flex;gap:.5rem;flex-wrap:wrap;}
.pb-badge{
  background:var(--white);border:1px solid var(--border);
  padding:.3rem .8rem;border-radius:20px;
  font-size:.73rem;font-weight:600;color:var(--slate);
  display:flex;align-items:center;gap:5px;box-shadow:var(--shadow-s);
}
.pb-badge i{color:var(--gold);}

@media(max-width:768px){
  .page-banner{padding:calc(var(--nav-h) + 30px) 5% 40px;}
  .page-banner::after{display:none;}
  .page-banner h1{font-size:2rem;}
}

/* ── 8. HERO (index only) ────────────────────────────────── */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding:calc(var(--nav-h) + 40px) 5% 60px;
  position:relative;overflow:hidden;gap:4rem;
}
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cream) 50%,var(--gold-bg) 100%);z-index:0;
}
.hero-blob{
  position:absolute;right:-10%;bottom:-5%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,150,62,.12) 0%,transparent 70%);z-index:0;
}
.hero-content{position:relative;z-index:1;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold-bg);border:1px solid var(--gold-lt);
  color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:.35rem 1rem;border-radius:20px;margin-bottom:1.3rem;animation:fadeUp .6s ease both;
}
.hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,4.5vw,5rem);font-weight:800;line-height:1.07;
  color:var(--ink);margin-bottom:1rem;animation:fadeUp .7s .1s ease both;
}
.hero-h1 .line2{font-style:italic;color:var(--gold);display:block;}
.hero-subtitle{
  font-size:.97rem;color:var(--slate);line-height:1.75;
  max-width:480px;margin-bottom:1.8rem;animation:fadeUp .7s .2s ease both;
}
.hero-subtitle strong{color:var(--ink);}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;animation:fadeUp .7s .25s ease both;}
.badge{
  background:var(--white);border:1px solid var(--border);
  padding:.3rem .8rem;border-radius:20px;
  font-size:.73rem;font-weight:600;color:var(--slate);
  display:flex;align-items:center;gap:5px;box-shadow:var(--shadow-s);
}
.badge i{color:var(--gold);}
.hero-btns{display:flex;gap:.9rem;flex-wrap:wrap;animation:fadeUp .7s .3s ease both;}
.hero-visual{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:1.4rem;animation:fadeUp .8s .35s ease both;
}
.hero-photo-card{
  background:var(--white);border-radius:var(--radius-lg);
  padding:2rem;box-shadow:var(--shadow-l);
  display:flex;align-items:center;gap:1.5rem;border:1px solid var(--border);
}
.hero-avatar{
  width:100px;height:100px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:2.4rem;font-weight:800;color:var(--white);
  font-family:'Playfair Display',serif;box-shadow:0 8px 24px rgba(200,150,62,.4);
}
.hero-info h3{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;margin-bottom:.2rem;}
.hero-info p{font-size:.8rem;color:var(--slate);margin-bottom:.5rem;}
.hero-social-row{display:flex;gap:.4rem;flex-wrap:wrap;}
.soc-btn{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:var(--white);transition:transform .2s;
}
.soc-btn:hover{transform:scale(1.15);}
.soc-li{background:var(--li-blue);}
.soc-fb{background:var(--fb-blue);}
.soc-ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);}
.soc-yt{background:var(--red-yt);}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.stat-card{
  background:var(--white);border-radius:var(--radius);
  padding:1.2rem;text-align:center;
  box-shadow:var(--shadow-s);border:1px solid var(--border);transition:transform .2s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);}
.stat-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:800;color:var(--gold);display:block;}
.stat-label{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.07em;}
.companies-strip{
  background:var(--white);border-radius:var(--radius);
  padding:.9rem 1.4rem;box-shadow:var(--shadow-s);border:1px solid var(--border);
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.companies-strip span{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;}
.company-tag{
  background:var(--gold-bg);border:1px solid var(--gold-lt);
  color:var(--gold);font-size:.73rem;font-weight:700;padding:.2rem .65rem;border-radius:20px;
}

/* ── 9. SERVICES GRID ────────────────────────────────────── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.service-card{
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--border);padding:1.8rem;
  box-shadow:var(--shadow-s);transition:all .25s;position:relative;overflow:hidden;
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));
}
.service-card:hover{box-shadow:var(--shadow-m);transform:translateY(-5px);}
.service-card:hover .service-icon{background:var(--gold);color:var(--white);}
.service-icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--gold-bg);display:flex;align-items:center;
  justify-content:center;font-size:1.4rem;color:var(--gold);
  margin-bottom:1.1rem;transition:all .25s;
}
.service-card h3{font-size:1rem;font-weight:700;margin-bottom:.4rem;color:var(--ink);}
.service-card p{font-size:.82rem;color:var(--slate);line-height:1.65;margin-bottom:1rem;}
.service-link{font-size:.77rem;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:5px;transition:gap .2s;}
.service-card:hover .service-link{gap:10px;}

/* ── 10. SOCIAL TABS ─────────────────────────────────────── */
.social-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem;}
.social-tab{
  display:flex;align-items:center;gap:7px;padding:.55rem 1.1rem;
  border-radius:8px;font-size:.8rem;font-weight:700;
  border:2px solid var(--border);cursor:pointer;transition:all .2s;
  background:var(--white);color:var(--slate);
}
.social-tab.active-li{background:var(--li-blue);color:white;border-color:var(--li-blue);}
.social-tab.active-fb{background:var(--fb-blue);color:white;border-color:var(--fb-blue);}
.social-tab.active-ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:white;border-color:#dc2743;}
.social-tab.active-yt{background:var(--red-yt);color:white;border-color:var(--red-yt);}
.social-panel{display:none;animation:fadeIn .3s ease;}
.social-panel.active{display:block;}
.social-feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.feed-card{
  background:var(--cream);border-radius:var(--radius);
  border:1px solid var(--border);overflow:hidden;transition:all .2s;cursor:pointer;
}
.feed-card:hover{box-shadow:var(--shadow-m);transform:translateY(-3px);}
.feed-thumb{
  height:155px;background:linear-gradient(135deg,var(--gold-lt),var(--gold-bg));
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;color:var(--gold);position:relative;
}
.feed-thumb .play-icon{
  position:absolute;width:44px;height:44px;background:rgba(255,0,0,.9);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:.9rem;
}
.feed-body{padding:.85rem;}
.feed-body h4{font-size:.83rem;font-weight:700;margin-bottom:.25rem;color:var(--ink);}
.feed-body p{font-size:.73rem;color:var(--muted);}
.sync-info-box{
  margin-top:1.8rem;background:var(--gold-bg);border:1px solid var(--gold-lt);
  border-radius:var(--radius);padding:1.3rem;display:flex;align-items:flex-start;gap:.9rem;
}
.sync-info-box i{color:var(--gold);font-size:1.1rem;margin-top:2px;flex-shrink:0;}
.sync-info-box p{font-size:.8rem;color:var(--slate);line-height:1.7;}
.sync-info-box strong{color:var(--ink);}

/* ── 11. CTA BANNER ──────────────────────────────────────── */
.cta-banner{
  background:linear-gradient(135deg,var(--ink) 0%,#2D2D4E 100%);
  border-radius:var(--radius-lg);padding:3.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;gap:3rem;
}
.cta-banner h2{font-family:'Playfair Display',serif;color:var(--white);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:700;margin-bottom:.5rem;}
.cta-banner h2 em{font-style:italic;color:var(--gold);}
.cta-banner p{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.6;}
.cta-banner-btns{display:flex;gap:.9rem;flex-shrink:0;}

/* Mobile — full-width stacked layout */
@media(max-width:768px){
  .cta-banner{
    flex-direction:column;
    align-items:stretch;
    gap:1.6rem;
    padding:2rem 1.4rem;
    border-radius:var(--radius);
    text-align:left;
  }
  .cta-banner-btns{
    flex-direction:column;
    width:100%;
    gap:.75rem;
  }
  .cta-banner-btns a{
    width:100%;
    justify-content:center;
    box-sizing:border-box;
  }
}

/* ── 12. ABOUT ───────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.about-text p{font-size:.93rem;color:var(--slate);line-height:1.8;margin-bottom:1rem;}
.about-text p strong{color:var(--ink);}
.expertise-list{margin-top:1.4rem;display:flex;flex-direction:column;gap:.75rem;}
.exp-item{display:flex;align-items:flex-start;gap:.75rem;font-size:.86rem;color:var(--slate);}
.exp-item i{color:var(--gold);width:16px;text-align:center;margin-top:2px;flex-shrink:0;}
.about-visual{display:flex;flex-direction:column;gap:1.2rem;}
.about-quote{
  background:var(--gold-bg);border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.4rem;
  font-family:'Playfair Display',serif;font-size:1.1rem;font-style:italic;color:var(--ink);line-height:1.65;
}
/* ── Skills Grid — responsive 4 → 3 → 2 col ── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}
@media(max-width:1024px) {
  .skills-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:768px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
}

.skill-pill {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
  cursor: default;
}
.skill-pill:hover {
  border-color: var(--gold-lt);
  background: var(--gold-bg);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}
.skill-pill i {
  color: var(--gold);
  font-size: .9rem;
  flex-shrink: 0;
}
@media(max-width:768px) {
  .skill-pill { padding: .7rem .75rem; font-size: .76rem; border-radius: 9px; }
}
@media(max-width:420px) {
  .skills-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .skill-pill { font-size: .72rem; padding: .6rem .65rem; gap: 6px; }
}
.about-offer-box{background:var(--cream);border-radius:var(--radius);padding:1.4rem;border:1px solid var(--border);}
.about-offer-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.9rem;}
.about-offer-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.83rem;padding:.45rem 0;border-bottom:1px solid var(--border);
}
.about-offer-row:last-child{border:none;}
.about-offer-row span:first-child{color:var(--slate);}
.about-offer-row .val{font-weight:700;color:var(--gold);}

.companies-section{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;}
.company-card{
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--border);padding:2rem;box-shadow:var(--shadow-s);transition:all .25s;
}
.company-card:hover{box-shadow:var(--shadow-m);transform:translateY(-4px);}
.company-logo{width:60px;height:60px;border-radius:14px;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:1rem;}
.company-card h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;}
.company-card p{font-size:.83rem;color:var(--slate);line-height:1.65;}
.company-tag-label{display:inline-block;background:var(--gold-bg);color:var(--gold);font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .65rem;border-radius:20px;border:1px solid var(--gold-lt);margin-bottom:.6rem;}

.btn-tool{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--ink);color:var(--white);padding:.6rem 1.2rem;border-radius:7px;
  font-size:.77rem;font-weight:700;transition:all .2s;margin-top:.8rem;
}
.btn-tool:hover{background:var(--gold);}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;}
.timeline::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--border);}
.timeline-item{display:flex;gap:1.4rem;position:relative;padding-bottom:1.8rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--gold-bg);border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;color:var(--gold);position:relative;z-index:1;
}
.timeline-content{background:var(--white);border-radius:var(--radius);padding:1.1rem;border:1px solid var(--border);box-shadow:var(--shadow-s);flex:1;}
.timeline-content h4{font-size:.93rem;font-weight:700;margin-bottom:.3rem;}
.timeline-content p{font-size:.8rem;color:var(--slate);line-height:1.6;}
.timeline-year{font-size:.67rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem;display:block;}

/* Speaker stats */
.speaker-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.spk-stat{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem;text-align:center;box-shadow:var(--shadow-s);}
.spk-stat-num{font-family:'Playfair Display',serif;font-size:2rem;font-weight:800;color:var(--gold);display:block;}
.spk-stat-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}

/* ── 13. TOOLS PAGE ──────────────────────────────────────── */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.tool-card{
  background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);
  padding:1.7rem;box-shadow:var(--shadow-s);transition:all .25s;position:relative;overflow:hidden;
}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-lt));}
.tool-card:hover{box-shadow:var(--shadow-m);transform:translateY(-4px);}
.tool-icon{width:50px;height:50px;border-radius:12px;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;font-size:1.35rem;color:var(--gold);}
.tool-badge{display:inline-block;background:var(--gold-bg);color:var(--gold);font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .65rem;border-radius:20px;border:1px solid var(--gold-lt);margin-bottom:.75rem;}
.tool-card h3{font-size:.98rem;font-weight:700;margin-bottom:.45rem;color:var(--ink);}
.tool-card p{font-size:.81rem;color:var(--slate);line-height:1.6;margin-bottom:.5rem;}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.how-step{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:1.4rem;text-align:center;box-shadow:var(--shadow-s);}
.how-num{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--white);font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;}
.how-step h4{font-size:.86rem;font-weight:700;margin-bottom:.35rem;}
.how-step p{font-size:.77rem;color:var(--slate);line-height:1.6;}
.tools-coming-soon{grid-column:1/-1;background:linear-gradient(135deg,var(--gold-bg),var(--white));border:2px dashed var(--gold-lt);border-radius:var(--radius-lg);padding:2.5rem;text-align:center;}
.tools-coming-soon h3{color:var(--gold);font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:.5rem;}
.tools-coming-soon p{color:var(--muted);font-size:.86rem;margin-bottom:1.4rem;}

/* ── 14. TRAINING PAGE ───────────────────────────────────── */
.training-hero{
  background:linear-gradient(135deg,var(--ink) 0%,#2D2D4E 100%);
  border-radius:var(--radius-lg);padding:3rem;margin-bottom:2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.training-hero h3{font-family:'Playfair Display',serif;color:var(--white);font-size:1.7rem;font-weight:700;margin-bottom:.7rem;line-height:1.3;}
.training-hero h3 em{color:var(--gold);font-style:italic;}
.training-hero p{color:rgba(255,255,255,.7);font-size:.86rem;line-height:1.7;margin-bottom:1.4rem;}
.training-playlist{display:flex;flex-direction:column;gap:.75rem;}
.playlist-item{
  background:rgba(255,255,255,.08);border-radius:9px;padding:.85rem 1.1rem;
  display:flex;align-items:center;gap:.9rem;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.08);
}
.playlist-item:hover{background:rgba(255,255,255,.15);}
.playlist-num{width:30px;height:30px;border-radius:50%;background:rgba(200,150,62,.3);display:flex;align-items:center;justify-content:center;font-size:.73rem;font-weight:700;color:var(--gold);flex-shrink:0;}
.playlist-info h4{font-size:.8rem;font-weight:600;color:var(--white);margin-bottom:.15rem;}
.playlist-info span{font-size:.68rem;color:rgba(255,255,255,.5);}
.playlist-play{margin-left:auto;color:var(--gold);}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.video-card{background:var(--white);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-s);transition:all .2s;}
.video-card:hover{box-shadow:var(--shadow-m);transform:translateY(-3px);}
.video-thumb{height:175px;position:relative;background:linear-gradient(135deg,#1A1A2E,#2D2D4E);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;}
.video-thumb iframe{width:100%;height:100%;border:none;position:absolute;inset:0;}
.video-play-btn{width:54px;height:54px;background:rgba(255,0,0,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;cursor:pointer;transition:transform .2s;z-index:2;border:none;}
.video-play-btn:hover{transform:scale(1.1);}
.video-meta{padding:.95rem;}
.video-meta h4{font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:.25rem;line-height:1.4;}
.video-meta span{font-size:.72rem;color:var(--muted);}
.video-tag{display:inline-block;background:var(--gold-bg);color:var(--gold);font-size:.63rem;font-weight:700;padding:.18rem .5rem;border-radius:8px;margin-bottom:.4rem;}
.course-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:2rem;}
.course-cat{background:var(--white);border-radius:var(--radius);border:2px solid var(--border);padding:1.1rem;text-align:center;cursor:pointer;transition:all .2s;}
.course-cat.active,.course-cat:hover{border-color:var(--gold);background:var(--gold-bg);}
.course-cat i{font-size:1.5rem;color:var(--gold);margin-bottom:.4rem;display:block;}
.course-cat span{font-size:.75rem;font-weight:700;color:var(--ink);}

/* ── 15. EVENTS PAGE ─────────────────────────────────────── */
.events-list{display:flex;flex-direction:column;gap:1.1rem;}
.event-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.6rem;display:grid;grid-template-columns:80px 1fr auto;
  gap:1.4rem;align-items:center;box-shadow:var(--shadow-s);transition:all .2s;
}
.event-card:hover{box-shadow:var(--shadow-m);transform:translateX(4px);border-left:3px solid var(--gold);}
.event-date{text-align:center;background:var(--gold-bg);border:1px solid var(--gold-lt);border-radius:9px;padding:.65rem .5rem;}
.event-date .month{font-size:.67rem;font-weight:700;text-transform:uppercase;color:var(--gold);letter-spacing:.1em;}
.event-date .day{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1.1;}
.event-date .year{font-size:.63rem;color:var(--muted);}
.event-info h3{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;}
.event-info p{font-size:.78rem;color:var(--slate);display:flex;align-items:center;gap:5px;margin-bottom:.25rem;}
.event-info p i{color:var(--gold);width:13px;}
.event-badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem;}
.event-badge{font-size:.67rem;font-weight:600;padding:.18rem .55rem;border-radius:20px;}
.badge-speaking{background:#EFF6FF;color:var(--blue);}
.badge-workshop{background:#F0FDF4;color:#16A34A;}
.badge-webinar{background:#FFF7ED;color:#EA580C;}
.badge-upcoming{background:var(--gold-bg);color:var(--gold);}
.badge-past{background:var(--cream);color:var(--muted);}
.event-register{background:var(--ink);color:var(--white);padding:.55rem 1.1rem;border-radius:7px;font-size:.73rem;font-weight:700;white-space:nowrap;border:none;transition:all .2s;}
.event-register:hover{background:var(--gold);}
.event-register.past{background:transparent;color:var(--muted);border:1px solid var(--border);}

/* ── 16. GALLERY PAGE ────────────────────────────────────── */
.gallery-filter{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.8rem;}
.filter-btn{padding:.4rem 1rem;border-radius:20px;font-size:.77rem;font-weight:600;border:1.5px solid var(--border);background:var(--white);color:var(--slate);cursor:pointer;transition:all .2s;}
.filter-btn.active,.filter-btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.gallery-masonry{columns:3;gap:1.1rem;}
.gallery-item{break-inside:avoid;margin-bottom:1.1rem;border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-s);cursor:pointer;transition:all .2s;position:relative;}
.gallery-item:hover{box-shadow:var(--shadow-m);transform:scale(1.02);}
.gallery-img{width:100%;background:linear-gradient(135deg,var(--gold-lt),var(--gold-bg));display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:rgba(200,150,62,.5);}
.gallery-img.h1{height:210px;} .gallery-img.h2{height:170px;} .gallery-img.h3{height:250px;} .gallery-img.h4{height:145px;}
.gallery-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(26,26,46,.85));padding:.9rem;opacity:0;transition:opacity .2s;}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-overlay span{color:white;font-size:.77rem;font-weight:600;}
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(26,26,46,.95);z-index:2000;align-items:center;justify-content:center;}
.lightbox-overlay.open{display:flex;}
.lightbox-inner{position:relative;max-width:80vw;max-height:90vh;}
.lightbox-close{position:absolute;top:-2.5rem;right:0;background:none;border:none;color:white;font-size:1.5rem;cursor:pointer;}
.lightbox-caption{text-align:center;color:rgba(255,255,255,.7);font-size:.8rem;margin-top:.75rem;}

/* ── 17. BLOG PAGE ───────────────────────────────────────── */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;}
.blog-featured{display:grid;grid-template-columns:1.3fr 1fr;gap:1.4rem;margin-bottom:2rem;}
.blog-card-featured{background:var(--cream);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-s);transition:all .25s;cursor:pointer;}
.blog-card-featured:hover{box-shadow:var(--shadow-m);transform:translateY(-4px);}
.blog-thumb{height:230px;background:linear-gradient(135deg,var(--ink),#2D2D4E);display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden;}
.blog-thumb .blog-cat{position:absolute;top:1rem;left:1rem;background:var(--gold);color:white;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.22rem .65rem;border-radius:20px;}
.blog-body{padding:1.4rem;}
.blog-body h3{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;line-height:1.4;}
.blog-body p{font-size:.8rem;color:var(--slate);line-height:1.7;margin-bottom:.9rem;}
.blog-meta{display:flex;align-items:center;gap:.9rem;font-size:.72rem;color:var(--muted);flex-wrap:wrap;}
.blog-meta i{color:var(--gold);}
.blog-side{display:flex;flex-direction:column;gap:.9rem;}
.blog-card-sm{background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);display:flex;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-s);}
.blog-card-sm:hover{box-shadow:var(--shadow-m);transform:translateY(-2px);}
.blog-card-sm-thumb{width:85px;flex-shrink:0;background:linear-gradient(135deg,var(--gold-lt),var(--gold-bg));display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--gold);}
.blog-card-sm-body{padding:.85rem;}
.blog-card-sm-body .cat{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:.25rem;display:block;}
.blog-card-sm-body h4{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:.25rem;}
.blog-card-sm-body span{font-size:.68rem;color:var(--muted);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem;}
.blog-card{background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-s);cursor:pointer;transition:all .2s;}
.blog-card:hover{box-shadow:var(--shadow-m);transform:translateY(-3px);}
.blog-card-thumb{height:145px;background:linear-gradient(135deg,var(--gold-lt),var(--gold-bg));display:flex;align-items:center;justify-content:center;font-size:2.4rem;position:relative;}
.blog-card-thumb .cat-badge{position:absolute;top:.6rem;left:.6rem;background:var(--ink);color:white;font-size:.62rem;font-weight:700;padding:.18rem .5rem;border-radius:8px;text-transform:uppercase;letter-spacing:.07em;}
.blog-card-body{padding:.95rem;}
.blog-card-body h3{font-size:.87rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;line-height:1.4;}
.blog-card-body p{font-size:.76rem;color:var(--slate);line-height:1.6;margin-bottom:.75rem;}
.blog-card-footer{display:flex;justify-content:space-between;align-items:center;}
.read-more{font-size:.73rem;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:3px;}
.blog-date{font-size:.68rem;color:var(--muted);}
.blog-sidebar{display:flex;flex-direction:column;gap:1.4rem;}
.sidebar-widget{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:1.4rem;box-shadow:var(--shadow-s);}
.sidebar-widget h4{font-family:'Playfair Display',serif;font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:2px solid var(--gold-lt);}
.category-list{display:flex;flex-direction:column;gap:.4rem;}
.category-item{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--slate);padding:.38rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color .2s;}
.category-item:last-child{border:none;}
.category-item:hover{color:var(--gold);}
.category-item span{background:var(--gold-bg);color:var(--gold);font-size:.67rem;font-weight:700;padding:.13rem .45rem;border-radius:10px;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4rem;}
.tag{background:var(--cream);border:1px solid var(--border);padding:.28rem .65rem;border-radius:20px;font-size:.7rem;font-weight:600;color:var(--slate);cursor:pointer;transition:all .2s;}
.tag:hover{background:var(--gold-bg);border-color:var(--gold-lt);color:var(--gold);}
.blog-newsletter{background:linear-gradient(135deg,var(--ink),#2D2D4E);border-radius:var(--radius-lg);padding:3rem;display:flex;align-items:center;gap:3rem;}
.blog-newsletter h3{font-family:'Playfair Display',serif;color:var(--white);font-size:1.5rem;font-weight:700;margin-bottom:.4rem;white-space:nowrap;}
.blog-newsletter p{color:rgba(255,255,255,.7);font-size:.83rem;}
.newsletter-form{display:flex;gap:.45rem;flex:1;min-width:0;}
.newsletter-form input{flex:1;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.75rem 1rem;color:white;font-size:.83rem;font-family:'Plus Jakarta Sans',sans-serif;outline:none;}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5);}
.newsletter-form input:focus{border-color:var(--gold);}

/* ── 18. CONTACT PAGE ────────────────────────────────────── */
.contact-wrapper{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start;}
.contact-info h3{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:700;color:var(--ink);margin-bottom:.9rem;}
.contact-info > p{font-size:.88rem;color:var(--slate);line-height:1.75;margin-bottom:1.8rem;}
.contact-items{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.8rem;}
.contact-item{display:flex;align-items:center;gap:.9rem;padding:.9rem;background:var(--cream);border-radius:9px;border:1px solid var(--border);}
.contact-icon{width:42px;height:42px;background:var(--gold-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.95rem;flex-shrink:0;}
.contact-item h4{font-size:.78rem;font-weight:700;color:var(--ink);margin-bottom:.18rem;}
.contact-item span{font-size:.77rem;color:var(--slate);}
.contact-follow-label{margin-bottom:.9rem;font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.contact-socials{display:flex;gap:.6rem;}
.social-big{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:white;cursor:pointer;transition:transform .2s;}
.social-big:hover{transform:scale(1.12);}
.contact-form{background:var(--cream);border-radius:var(--radius-lg);border:1px solid var(--border);padding:2.3rem;box-shadow:var(--shadow-s);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:0;}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem;}
.form-group label{font-size:.77rem;font-weight:700;color:var(--ink);}
.form-group input,.form-group select,.form-group textarea{
  background:var(--white);border:1.5px solid var(--border);border-radius:8px;
  padding:.72rem 1rem;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.84rem;color:var(--ink);outline:none;transition:border-color .2s;width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--gold);}
.form-group textarea{resize:vertical;min-height:105px;}

/* ── 19. TESTIMONIALS ────────────────────────────────────── */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
.testimonial-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border);padding:1.7rem;box-shadow:var(--shadow-s);transition:all .25s;}
.testimonial-card:hover{box-shadow:var(--shadow-m);transform:translateY(-4px);}
.stars{color:var(--gold);font-size:.83rem;margin-bottom:.9rem;letter-spacing:2px;}
.testimonial-card blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:.93rem;color:var(--ink);line-height:1.7;margin-bottom:1.4rem;}
.testimonial-author{display:flex;align-items:center;gap:.75rem;}
.author-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold-bg);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--gold);font-size:.87rem;flex-shrink:0;}
.author-info h4{font-size:.8rem;font-weight:700;color:var(--ink);}
.author-info span{font-size:.7rem;color:var(--muted);}

/* ── 20. FOOTER ──────────────────────────────────────────── */
/* ── 20. FOOTER ──────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.8);
  padding: 4rem 5% 0;
}

/* ── Main grid: Brand | Nav | Tools ── */
.ft-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: start;
}

/* ── Brand column ── */
.ft-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem; font-weight: 800;
  color: #fff; display: block; margin-bottom: .9rem;
  text-decoration: none;
}
.ft-logo em { color: var(--gold); font-style: italic; }

.ft-bio {
  font-size: .8rem; line-height: 1.75;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.4rem;
  max-width: 320px;
}

/* Social icons */
.ft-socials {
  display: flex; gap: 8px; margin-bottom: 1.4rem;
}
.ft-soc {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; text-decoration: none; transition: all .2s;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.05);
}
.ft-soc:hover               { transform: translateY(-2px); }
.ft-soc--li:hover { background:#0A66C2; border-color:#0A66C2; color:#fff; }
.ft-soc--fb:hover { background:#1877F2; border-color:#1877F2; color:#fff; }
.ft-soc--ig:hover {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  border-color: transparent; color: #fff;
}
.ft-soc--yt:hover { background:#FF0000; border-color:#FF0000; color:#fff; }

/* Contact links */
.ft-contact {
  display: flex; flex-direction: column; gap: 6px;
}
.ft-contact-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: rgba(255,255,255,.45);
  text-decoration: none; transition: color .2s;
}
.ft-contact-link i { color: var(--gold); font-size: .75rem; width: 14px; }
.ft-contact-link:hover { color: var(--gold); }

/* ── Nav / Tools columns ── */
.ft-heading {
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.35);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ft-links {
  list-style: none;
  display: flex; flex-direction: column; gap: .5rem;
}
.ft-links a {
  font-size: .8rem; color: rgba(255,255,255,.58);
  text-decoration: none; transition: color .18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.ft-links a:hover { color: var(--gold); }

/* Tools list — 2-column grid inside the column */
.ft-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem 1.2rem;
}
.ft-tools-grid a { font-size: .76rem; }

/* "View All" link below tools */
.ft-all-tools {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 1.1rem; font-size: .74rem; font-weight: 700;
  color: var(--gold); text-decoration: none;
  transition: gap .15s;
}
.ft-all-tools:hover { gap: 10px; }

/* ── Bottom bar ── */
.ft-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem;
  padding: 1.3rem 0 1.4rem;
}
.ft-copy    { font-size: .74rem; color: rgba(255,255,255,.3); }
.ft-tagline { font-size: .72rem; color: rgba(255,255,255,.22); }

/* ── Tablet (≤ 1024px) ── */
@media(max-width:1024px){
  .ft-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 2rem;
  }
  .ft-brand { grid-column: 1 / -1; }
  .ft-bio   { max-width: 100%; }
}

/* ── Mobile (≤ 640px) ── */
@media(max-width:640px){
  .site-footer { padding: 2rem 5% 0; }
  .ft-inner {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-bottom: 1.5rem;
  }
  .ft-brand { grid-column: unset; }
  .ft-bio{max-width:100%;margin-bottom:.8rem;}
  .ft-socials{margin-bottom:.8rem;}
  .ft-contact{gap:4px;}
  .ft-heading{margin-bottom:.7rem;padding-bottom:.4rem;}
  .ft-links{gap:.35rem;}
  .ft-tools-grid { grid-template-columns: 1fr 1fr; gap:.3rem .8rem; }
  .ft-all-tools{margin-top:.7rem;}
  .ft-bottom {
    flex-direction: column; text-align: center;
    gap: .3rem; padding: .9rem 0 1rem;
  }
}

/* ── 21. FLOATING ELEMENTS ───────────────────────────────── */
.scroll-top{
  position:fixed;bottom:calc(var(--mob-cta-h) + 1rem);right:1.2rem;z-index:800;
  width:42px;height:42px;background:var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:white;cursor:pointer;box-shadow:var(--shadow-m);
  transition:all .3s;opacity:0;pointer-events:none;border:none;
}
.scroll-top.visible{opacity:1;pointer-events:auto;}
.scroll-top:hover{background:var(--gold);transform:translateY(-3px);}
@media(min-width:769px){
  .scroll-top{bottom:2rem;right:2rem;}
}

/* ── 22. ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.fade-in-section{opacity:0;transform:translateY(26px);transition:all .6s ease;}
.fade-in-section.visible{opacity:1;transform:translateY(0);}

/* ── 23. THREE-COL UTIL ──────────────────────────────────── */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:60px;gap:2.5rem;}
  .hero-bg{background:var(--cream);}
  .hero-subtitle{max-width:100%;}
  .two-col{grid-template-columns:1fr;gap:2.5rem;}

  .blog-layout{grid-template-columns:1fr;}
  .blog-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
  .training-hero{grid-template-columns:1fr;}
  .blog-newsletter{flex-direction:column;gap:1.4rem;}
  .speaker-stats{grid-template-columns:repeat(2,1fr);}
  .contact-wrapper{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   YesMadam-inspired: full width, large taps
══════════════════════════════════════════════ */
@media(max-width:768px){
  /* Nav — hide hamburger, center brand */
  .nav-links{display:none;}
  .hamburger{display:none !important;}
  #navbar{justify-content:center;}
  .nav-brand{margin-left:0;margin-right:0;}
  /* Never show desktop mega on mobile — accordion handles it */
  .nav-mega { display: none !important; }

  /* Mobile menu — opens from BOTTOM above CTA bar */
  .mobile-menu{
    display:flex !important;
    position:fixed;
    top:auto !important;
    bottom:var(--mob-cta-h);
    left:0;right:0;
    max-height:75vh;
    background:var(--white);
    z-index:999;
    flex-direction:column;
    padding:1.2rem 6% 1.5rem;
    overflow-y:auto;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    box-shadow:0 -8px 40px rgba(0,0,0,.15);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  .mobile-menu.open{
    transform:translateY(0) !important;
    visibility:visible !important;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }

  /* Backdrop overlay when menu is open */
  .mob-menu-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    z-index:998;
  }
  .mob-menu-backdrop.open{display:block;}

  /* Bottom CTA bar — add room for menu btn */
  .mob-cta-menu{
    flex:1;
    height:44px;
    border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--ink);color:var(--white);
    border:none;cursor:pointer;
    font-size:1rem;
    transition:all .2s;
  }
  .mob-cta-menu:hover{background:var(--gold);}
  .mob-cta-menu.open{background:var(--gold);}
  .mobile-menu .mob-social-row{display:none !important;}

  /* Hero — stacked, compact */
  .hero{padding:calc(var(--nav-h) + 24px) 5% 36px;gap:2rem;}
  .hero-h1{font-size:1.85rem;}
  .hero-subtitle{font-size:.9rem;}
  .hero-badges{gap:.4rem;}
  .badge{font-size:.7rem;padding:.28rem .7rem;}

  /* ── Hero buttons — SIDE BY SIDE on mobile ── */
  .hero-btns{flex-direction:row;gap:.55rem;}
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary{
    flex:1;min-width:0;width:auto;
    justify-content:center;
    padding:.85rem .6rem;font-size:.82rem;
    white-space:nowrap;
  }

  /* ── Mobile-only: standing photo beside H1 name ── */
  .hero-name-wrap{
    display:block;
    overflow:hidden;
    margin-bottom:.4rem;
    animation:fadeUp .7s .1s ease both;
  }
  .hero-name-wrap .hero-h1{
    margin-bottom:.5rem;
    animation:none;
  }
  .hero-mob-standing{
    display:block !important;
    float:right;
    width:82px;
    height:140px;
    margin:0 0 .3rem .7rem;
    border-radius:14px;
    object-fit:cover;
    object-position:top center;
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    border:2.5px solid var(--gold-lt);
  }

  /* Hide large hero photo + card on mobile — small profile pic at top instead */
  .hero-photo,
  .hero-photo-card,
  .hero-photo-slot{display:none !important;}

  .hero-avatar{width:80px;height:80px;font-size:1.8rem;}

  /* Stats — always 3 in one row on mobile */
  .stats-row{grid-template-columns:repeat(3,1fr) !important;gap:.5rem;}
  .stat-card{padding:.9rem .5rem;}
  .stat-num{font-size:1.4rem;}
  .stat-label{font-size:.62rem;}
  .companies-strip{justify-content:center;gap:.5rem;}

  /* Services — horizontal scroll on mobile */
  .services-grid{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    padding-bottom:.5rem;
    scrollbar-width:none;
  }
  .services-grid::-webkit-scrollbar{display:none;}
  .service-card{
    flex:0 0 75vw;
    max-width:280px;
    scroll-snap-align:start;
    display:flex;align-items:flex-start;gap:1rem;
    padding:1.1rem 1.2rem;border-radius:12px;
  }
  .service-card::before{display:none;}
  .service-icon{margin-bottom:0;flex-shrink:0;width:44px;height:44px;}
  .service-card h3{font-size:.92rem;margin-bottom:.25rem;}
  .service-card p{font-size:.77rem;margin-bottom:.5rem;}

  /* Sections */
  .section-h2{font-size:1.6rem;}
  .page-banner h1{font-size:1.75rem;}

  /* Tools — horizontal scroll */
  .tools-grid{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .tools-grid::-webkit-scrollbar{display:none;}
  .tools-grid > *{flex:0 0 75vw;max-width:280px;scroll-snap-align:start;}

  /* How it works — horizontal scroll */
  .how-grid{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .how-grid::-webkit-scrollbar{display:none;}
  .how-grid > *{flex:0 0 75vw;max-width:280px;scroll-snap-align:start;}

  /* Training — horizontal scroll */
  .video-grid{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .video-grid::-webkit-scrollbar{display:none;}
  .video-grid > *{flex:0 0 80vw;max-width:300px;scroll-snap-align:start;}
  .course-cats{grid-template-columns:repeat(4,1fr);gap:.5rem;}
  .course-cat{padding:.7rem .4rem;}
  .course-cat i{font-size:1.1rem;}
  .course-cat span{font-size:.67rem;}

  /* Events */
  .event-card{grid-template-columns:70px 1fr;gap:.9rem;}

  /* Events — horizontal scroll */
  .events-list{
    display:flex !important;
    flex-direction:row !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    padding-bottom:.5rem;
    scrollbar-width:none;
  }
  .events-list::-webkit-scrollbar{display:none;}
  .events-list > .event-card{
    flex:0 0 85vw;
    max-width:320px;
    scroll-snap-align:start;
  }
  .events-list > .event-card:hover{transform:none;}
  .event-register{display:none;}
  .speaker-stats{grid-template-columns:1fr 1fr;gap:.8rem;}

  /* Gallery */
  .gallery-masonry{columns:2;gap:.7rem;}
  .gallery-filter{gap:.4rem;}
  .filter-btn{font-size:.72rem;padding:.35rem .8rem;}

  /* Blog — horizontal scroll */
  .blog-featured{grid-template-columns:1fr;}
  .blog-grid{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
    margin-top:1rem;
  }
  .blog-grid::-webkit-scrollbar{display:none;}
  .blog-grid > *{flex:0 0 80vw;max-width:300px;scroll-snap-align:start;}
  .blog-sidebar{display:flex;flex-direction:column;gap:1rem;}
  .blog-newsletter{padding:1.8rem 1.4rem;border-radius:var(--radius);}
  .newsletter-form{flex-direction:column;}
  .newsletter-form input,.newsletter-form button{width:100%;}
  .blog-newsletter h3{font-size:1.2rem;white-space:normal;}

  /* Contact */
  .form-row{grid-template-columns:1fr;}
  .contact-form{padding:1.4rem;}

  /* Testimonials */
  /* Testimonials — horizontal scroll on mobile */
  .testimonials-grid{
    display:flex !important;
    grid-template-columns:unset !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    padding-bottom:.5rem;
    scrollbar-width:none;
  }
  .testimonials-grid::-webkit-scrollbar{display:none;}
  .testimonial-card{
    flex:0 0 80vw;
    max-width:300px;
    scroll-snap-align:start;
  }



  /* Companies — horizontal scroll */
  .companies-section{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .companies-section::-webkit-scrollbar{display:none;}
  .companies-section > *{flex:0 0 85vw;max-width:320px;scroll-snap-align:start;}

  /* Three col — horizontal scroll */
  .three-col{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .three-col::-webkit-scrollbar{display:none;}
  .three-col > *{flex:0 0 80vw;max-width:300px;scroll-snap-align:start;}

  /* Social tabs */
  .social-tabs{gap:.35rem;}
  .social-tab{font-size:.72rem;padding:.45rem .8rem;}
  /* Social feed — horizontal scroll */
  .social-feed-grid{
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .social-feed-grid::-webkit-scrollbar{display:none;}
  .social-feed-grid > *{flex:0 0 70vw;max-width:260px;scroll-snap-align:start;}

  /* About */
  .about-visual{gap:.9rem;}
  .timeline::before{left:18px;}

  /* Blog sidebar on mobile */
  .blog-sidebar .sidebar-widget:nth-child(n+3){display:none;}
}

/* ══════════════════════════════════════════════
   RESPONSIVE — SMALL (≤ 420px)
══════════════════════════════════════════════ */
@media(max-width:420px){
  .hero-h1{font-size:1.6rem;}
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary{font-size:.76rem;padding:.8rem .4rem;gap:5px;}
  .hero-mob-profile{gap:.65rem;padding:.55rem .85rem .55rem .55rem;}
  .hero-mob-avatar{width:44px;height:44px;}
  .hero-mob-name{font-size:.88rem;}
  .hero-mob-role{font-size:.63rem;}
  .hero-mob-standing{width:72px;height:120px;margin-left:.5rem;border-radius:12px;}
  .stats-row{grid-template-columns:repeat(3,1fr) !important;gap:.35rem;}
  .stat-card{padding:.7rem .3rem;}
  .stat-num{font-size:1.15rem;}
  .stat-label{font-size:.55rem;}
  .gallery-masonry{columns:1;}
  .course-cats{grid-template-columns:1fr 1fr;}
  .mobile-cta-bar .mob-cta-btn span{display:none;}
  .mobile-cta-bar .mob-cta-btn{font-size:.7rem;}
  .speaker-stats{grid-template-columns:1fr 1fr;}
}

/* ══════════════════════════════════════════════
   ABOUT PAGE — LinkedIn-style Experience Timeline
══════════════════════════════════════════════ */

/* ── Career Timeline (vertical, LinkedIn-style) ── */
.career-timeline { position: relative; padding-left: 0; }

.career-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--gold-lt), transparent);
}

.career-item {
  display: flex;
  gap: 1.4rem;
  position: relative;
  margin-bottom: 1.6rem;
  align-items: flex-start;
}
.career-item:last-child { margin-bottom: 0; }

/* The coloured dot */
.career-dot {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--white);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-s);
  transition: all .2s;
}
.career-item:hover .career-dot {
  border-color: var(--gold);
  background: var(--gold-bg);
  box-shadow: 0 4px 16px rgba(200,150,62,.25);
}

/* The card */
.career-card {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: var(--shadow-s);
  transition: all .2s;
  position: relative;
}
.career-card::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 18px;
  width: 8px;
  height: 2px;
  background: var(--border);
}
.career-item:hover .career-card {
  box-shadow: var(--shadow-m);
  border-color: var(--gold-lt);
  transform: translateX(4px);
}

.career-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.career-title {
  font-size: .97rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.career-company {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: .12rem;
}
.career-period {
  background: var(--gold-bg);
  border: 1px solid var(--gold-lt);
  color: var(--gold);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .22rem .65rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.career-desc {
  font-size: .8rem;
  color: var(--slate);
  line-height: 1.65;
  margin-top: .5rem;
}
.career-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .7rem;
}
.career-badge {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--slate);
  font-size: .67rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 6px;
}

/* Parallel role indicator */
.career-parallel {
  position: absolute;
  top: .7rem;
  right: .7rem;
  background: #EFF6FF;
  color: var(--blue);
  font-size: .62rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 8px;
  border: 1px solid #DBEAFE;
}

/* ── Education Card ── */
.edu-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  box-shadow: var(--shadow-s);
  transition: all .25s;
  margin-top: 1rem;
}
.edu-card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); }
.edu-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  border: 2px solid var(--gold-lt);
}
.edu-info h3 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: .25rem; }
.edu-info p  { font-size: .85rem; color: var(--slate); margin-bottom: .15rem; }
.edu-info span { font-size: .73rem; color: var(--muted); font-weight: 600; }

/* ── Recommendations ── */
.reco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.reco-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-s);
  position: relative;
  transition: all .25s;
}
.reco-card:hover { box-shadow: var(--shadow-m); transform: translateY(-4px); }
.reco-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.4rem;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: var(--gold-lt);
  line-height: 1;
  pointer-events: none;
}
.reco-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 1.2rem;
  margin-top: 1.8rem;
  position: relative;
  z-index: 1;
}
.reco-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .9rem;
}
.reco-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 2px solid var(--gold-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  color: var(--gold);
  flex-shrink: 0;
}
.reco-author-info h4 { font-size: .8rem; font-weight: 700; color: var(--ink); }
.reco-author-info span { font-size: .72rem; color: var(--muted); }

/* ── LI Profile Banner ── */
.li-profile-strip {
  background: linear-gradient(135deg, #0A66C2 0%, #064C8C 100%);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  box-shadow: var(--shadow-m);
  flex-wrap: wrap;
}
.li-profile-strip-left { display: flex; align-items: center; gap: 1.2rem; }
.li-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 3px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.li-profile-strip h3 {
  font-family: 'Playfair Display', serif;
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.li-profile-strip p { color: rgba(255,255,255,.75); font-size: .82rem; }
.li-profile-strip .li-meta {
  display: flex;
  gap: 1rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}
.li-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: rgba(255,255,255,.65);
}
.li-meta-item i { color: rgba(255,255,255,.4); }

/* ── Responsive ── */
@media(max-width: 768px) {
  /* Career timeline — horizontal scroll */
  .career-timeline{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    padding-bottom:.5rem;
    padding-left:0;
    scrollbar-width:none;
  }
  .career-timeline::-webkit-scrollbar{display:none;}
  .career-timeline::before{display:none;}
  .career-item{
    flex:0 0 80vw;
    max-width:300px;
    scroll-snap-align:start;
    margin-bottom:0;
    flex-direction:column;
    align-items:center;
    gap:.6rem;
  }
  .career-dot{width:42px;height:42px;font-size:1rem;border-radius:10px;}
  .career-card{padding:1rem 1.1rem;width:100%;}
  .career-card::before{display:none;}
  .career-card-top{flex-direction:column;gap:.35rem;}
  .career-item:hover .career-card{transform:none;}

  .reco-grid {
    display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.5rem;scrollbar-width:none;
  }
  .reco-grid::-webkit-scrollbar{display:none;}
  .reco-grid > *{flex:0 0 80vw;max-width:300px;scroll-snap-align:start;}
  .edu-card { flex-direction: column; text-align: center; gap: 1rem; }
  .li-profile-strip { flex-direction: column; text-align: center; }
  .li-profile-strip-left { flex-direction: column; }
  .li-meta { justify-content: center; }
  .career-parallel { display: none; }
}

/* ══════════════════════════════════════════════
   MEDIA COVERAGE SECTION
══════════════════════════════════════════════ */

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 1.4rem;
}

.media-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: all .28s cubic-bezier(.34,1.2,.64,1);
  cursor: pointer;
}
.media-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
  border-color: transparent;
}

/* Thumbnail */
.media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.media-card:hover .media-thumb img { transform: scale(1.04); }

/* Fallback when YouTube thumbnail can't load */
.media-thumb-fallback {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.media-thumb-fallback img { display: none; }

/* Red YouTube play button overlay — exactly like the screenshot */
.media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  transition: background .2s;
}
.media-play i {
  font-size: 3.2rem;
  color: #FF0000;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
  transition: transform .2s, filter .2s;
}
.media-card:hover .media-play { background: rgba(0,0,0,.08); }
.media-card:hover .media-play i {
  transform: scale(1.12);
  filter: drop-shadow(0 4px 20px rgba(255,0,0,.6));
}

/* Channel badge in top-right corner */
.media-channel-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .28rem .65rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 5px;
}
.media-channel-badge i { color: #FF0000; font-size: .72rem; }

/* Card body */
.media-card-body {
  padding: 1rem 1.2rem 1.1rem;
}
.media-card-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 .55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card:hover .media-card-title { color: var(--gold); }
.media-card-source {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.media-card-source i { color: #FF0000; font-size: .7rem; }

/* View All button — pill shape, salmon-red like screenshot */
.media-view-all {
  text-align: center;
  margin-top: .5rem;
}
.btn-media-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E05A4E;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  padding: .85rem 2.6rem;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(224,90,78,.35);
  transition: all .22s;
}
.btn-media-all:hover {
  background: #c94f44;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(224,90,78,.45);
}

/* ── Responsive ── */
@media(max-width: 900px) {
  .media-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}
@media(max-width: 560px) {
  .media-grid {
    display:flex !important;
    grid-template-columns:unset !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:.75rem;
    padding-bottom:.5rem;
    margin-bottom:1rem;
    scrollbar-width:none;
  }
  .media-grid::-webkit-scrollbar{display:none;}
  .media-card {
    flex:0 0 80vw;
    max-width:300px;
    scroll-snap-align:start;
  }
  .media-play i { font-size: 2.6rem; }
  .media-view-all{margin-top:0;}
  .btn-media-all { font-size: .85rem; padding: .78rem 2rem; }
}

/* ══════════════════════════════════════════════
   NEW HERO BANNER — Anuraag Singh style
══════════════════════════════════════════════ */

.hero-banner {
  background: linear-gradient(105deg, #f5f0e4 0%, #ede5cc 40%, #d4c49a 100%);
  min-height: 380px;
  overflow: hidden;
  position: relative;
}

/* subtle radial vignette on the right like the reference */
.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(180,150,80,.18) 0%, transparent 65%);
  pointer-events: none;
}

.hero-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

/* ── LEFT ── */
.hb-left {
  flex: 1;
  padding-bottom: 52px;
  max-width: 600px;
}

.hb-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  margin: 0 0 .3rem;
}

.hb-title {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  color: #2a2a2a;
  margin: 0 0 .85rem;
  letter-spacing: -.01em;
}

.hb-desc {
  font-size: clamp(.8rem, 1.6vw, .92rem);
  font-weight: 600;
  color: #444;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 1.8rem;
}

/* ── Stats row ── */
.hb-stats {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.hb-stat {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.hb-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #c8463a;  /* red like the reference */
  line-height: 1;
  min-width: 3.5ch;
}

.hb-stat-label {
  font-size: .62rem;
  font-weight: 800;
  color: #555;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.hb-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(0,0,0,.15);
  flex-shrink: 0;
}

/* ── Buttons ── */
.hb-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  padding: .85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37,211,102,.35);
  transition: all .22s;
}
.btn-whatsapp i { font-size: 1.15rem; }
.btn-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
}

.btn-hb-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #2a2a2a;
  font-size: .9rem;
  font-weight: 700;
  padding: .82rem 1.6rem;
  border-radius: 50px;
  border: 2px solid rgba(0,0,0,.25);
  text-decoration: none;
  transition: all .22s;
}
.btn-hb-secondary:hover {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.45);
}

/* ── RIGHT — Photo ── */
.hb-right {
  flex-shrink: 0;
  position: relative;
  align-self: flex-end;
  text-align: center;
  /* push photo down so it bleeds out of the banner bottom exactly like the reference */
  margin-bottom: 0;
}

/* Actual photo — cut-out, bottom-aligned */
.hb-photo {
  display: block;
  height: clamp(320px, 45vw, 520px);
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.22));
  position: relative;
  z-index: 1;
}

/* Placeholder shown before photo is added */
.hb-photo-placeholder {
  width: 280px;
  height: 340px;
  background: rgba(255,255,255,.35);
  border: 2.5px dashed rgba(0,0,0,.2);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}
.hb-avatar-initials {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8963e, #a87228);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 16px rgba(200,150,62,.4);
}
.hb-photo-placeholder p {
  font-size: .75rem;
  color: #666;
  text-align: center;
  line-height: 1.6;
  padding: 0 1rem;
}
.hb-photo-placeholder small { font-size: .65rem; color: #999; font-family: monospace; }

/* Cursive signature — bottom-right like the reference */
.hb-signature {
  font-family: 'Dancing Script', 'Brush Script MT', cursive;
  font-size: 1.5rem;
  color: rgba(80,60,20,.45);
  position: absolute;
  bottom: 28px;
  right: 10px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

/* ── Responsive ── */
@media(max-width: 900px) {
  .hero-banner-inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding: 40px 24px 0;
    gap: 0;
  }
  .hb-left { max-width: 100%; padding-bottom: 40px; }
  .hb-desc { max-width: 100%; }
  .hb-stats { justify-content: center; }
  .hb-btns  { justify-content: center; }
  .hb-right { width: 100%; }
  .hb-photo-placeholder { width: 220px; height: 260px; margin: 0 auto 0; }
  .hb-photo { height: 260px; }
  .hb-signature { right: 50%; transform: translateX(60%); bottom: 6px; }
}

@media(max-width: 480px) {
  .hb-stat-num { font-size: 2rem; }
  .hb-stats { gap: 1rem; }
  .hb-stat-divider { height: 30px; }
  .btn-whatsapp, .btn-hb-secondary { width: 100%; justify-content: center; }
  .hb-btns { flex-direction: column; }
}

/* ══════════════════════════════════════════════
   HERO — Photo slot (right side)
══════════════════════════════════════════════ */

/* When real photo is used */
.hero-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
  display: block;
  border: 3px solid var(--gold-lt);
}

/* Placeholder shown until photo is added */
.hero-photo-slot {
  background: var(--white);
  border: 2.5px dashed var(--gold-lt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.hero-photo-slot-inner {
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}
.hero-photo-slot .hero-avatar {
  width: 90px;
  height: 90px;
  font-size: 2rem;
  margin: 0;
  opacity: .8;
}
.hero-photo-slot-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-photo-slot-hint {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.8;
  background: var(--cream);
  border-radius: 8px;
  padding: .7rem 1rem;
  border: 1px solid var(--border);
}
.hero-photo-slot-hint code {
  font-family: monospace;
  font-size: .68rem;
  color: var(--ink);
  background: rgba(0,0,0,.06);
  padding: .1rem .3rem;
  border-radius: 4px;
}

/* Hero CTA — WhatsApp & Call */
/* ── Mobile profile/standing photo — hidden on desktop ── */
.hero-mob-profile{display:none;}
.hero-mob-standing{display:none;}
.hero-name-wrap .hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.4rem,4.5vw,5rem);font-weight:800;line-height:1.07;
  color:var(--ink);margin-bottom:1rem;animation:fadeUp .7s .1s ease both;
}

.btn-wa-hero {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 6px 20px rgba(37,211,102,.35) !important;
}
.btn-wa-hero:hover {
  background: #1ebe5d !important;
  border-color: #1ebe5d !important;
  box-shadow: 0 10px 28px rgba(37,211,102,.45) !important;
}
.btn-call-hero {
  border-color: var(--border) !important;
  color: var(--ink) !important;
  background: var(--white) !important;
}
.btn-call-hero i {
  transform: rotate(90deg);
  display: inline-block;
}
.btn-call-hero:hover {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* ══════════════════════════════════════════════
   FAQ GRID — contact page, mobile-first
══════════════════════════════════════════════ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.faq-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .2s, transform .2s;
}
.faq-card:hover {
  box-shadow: var(--shadow-m);
  transform: translateY(-3px);
}

.faq-card h4 {
  font-size: .92rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .7rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.faq-card h4 i {
  color: var(--gold);
  font-size: 1rem;
  margin-top: 1px;
  flex-shrink: 0;
}
.faq-card p {
  font-size: .82rem;
  color: var(--slate);
  line-height: 1.75;
  margin: 0;
}
.faq-card a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
}
.faq-card a:hover { text-decoration: underline; }

/* Mobile: stack to 1 column */
@media(max-width: 600px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .faq-card {
    padding: 1.2rem 1.1rem;
    border-radius: 14px;
  }
  .faq-card h4 { font-size: .88rem; }
  .faq-card p  { font-size: .8rem; }
}

/* ══════════════════════════════════════════════
   SITEMAP GENERATOR — sg-* components
══════════════════════════════════════════════ */
/* ── Sitemap Generator — tool-specific styles ── */
    .sg-wrap {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-m);
    }

    /* Input panel */
    .sg-input-panel {
      background: var(--cream);
      padding: 2.2rem 2.4rem 1.8rem;
      border-bottom: 1.5px solid var(--border);
    }
    .sg-input-panel h3 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 1.4rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sg-input-panel h3 i { color: var(--gold); }

    .sg-url-row {
      display: flex;
      gap: .75rem;
      margin-bottom: 1.4rem;
      flex-wrap: wrap;
    }
    .sg-url-row input {
      flex: 1;
      min-width: 200px;
      padding: .85rem 1.1rem;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .9rem;
      background: var(--white);
      color: var(--ink);
      transition: border-color .2s;
      outline: none;
    }
    .sg-url-row input:focus { border-color: var(--gold); }
    .sg-url-row input::placeholder { color: var(--muted); }
    .btn-generate {
      background: var(--gold);
      color: var(--white);
      border: none;
      padding: .85rem 1.8rem;
      border-radius: var(--radius);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      transition: all .2s;
    }
    .btn-generate:hover { background: #b8862e; transform: translateY(-1px); }
    .btn-generate:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    /* Options row */
    .sg-options {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    .sg-opt-group label {
      display: block;
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      margin-bottom: .4rem;
    }
    .sg-opt-group select,
    .sg-opt-group input[type="number"] {
      width: 100%;
      padding: .55rem .75rem;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .82rem;
      background: var(--white);
      color: var(--ink);
      cursor: pointer;
      outline: none;
      transition: border-color .2s;
    }
    .sg-opt-group select:focus,
    .sg-opt-group input[type="number"]:focus { border-color: var(--gold); }

    /* Progress bar */
    .sg-progress {
      padding: 1.5rem 2.4rem;
      border-bottom: 1px solid var(--border);
      display: none;
    }
    .sg-progress.active { display: block; }
    .sg-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: .78rem;
      font-weight: 600;
      color: var(--slate);
      margin-bottom: .6rem;
    }
    .sg-progress-label span:last-child { color: var(--gold); font-weight: 700; }
    .sg-progress-bar {
      height: 7px;
      background: var(--border);
      border-radius: 4px;
      overflow: hidden;
    }
    .sg-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold-lt), var(--gold));
      border-radius: 4px;
      transition: width .4s ease;
      width: 0%;
    }
    .sg-log {
      margin-top: .9rem;
      font-size: .73rem;
      color: var(--muted);
      font-family: monospace;
      max-height: 70px;
      overflow-y: auto;
      line-height: 1.8;
    }
    .sg-log-line { display: block; }
    .sg-log-line.ok   { color: #16a34a; }
    .sg-log-line.skip { color: var(--muted); }
    .sg-log-line.info { color: var(--gold); }
    .sg-log-line.err  { color: #dc2626; }

    /* Results area */
    .sg-results {
      display: none;
      flex-direction: column;
    }
    .sg-results.active { display: flex; }

    /* Stats strip */
    .sg-stats-strip {
      display: flex;
      gap: 0;
      border-bottom: 1.5px solid var(--border);
    }
    .sg-stat {
      flex: 1;
      padding: 1.2rem 1.5rem;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .sg-stat:last-child { border-right: none; }
    .sg-stat-num {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--gold);
      line-height: 1.1;
    }
    .sg-stat-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      margin-top: .2rem;
      display: block;
    }

    /* URL table */
    .sg-url-table-wrap {
      overflow-x: auto;
      max-height: 340px;
      overflow-y: auto;
    }
    .sg-url-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .8rem;
    }
    .sg-url-table thead tr {
      background: var(--cream);
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .sg-url-table th {
      padding: .65rem 1rem;
      text-align: left;
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      border-bottom: 1.5px solid var(--border);
      white-space: nowrap;
    }
    .sg-url-table td {
      padding: .6rem 1rem;
      border-bottom: 1px solid var(--border);
      color: var(--slate);
      vertical-align: middle;
    }
    .sg-url-table tbody tr:hover { background: var(--gold-bg); }
    .sg-url-table td.url-cell {
      color: var(--ink);
      font-size: .78rem;
      word-break: break-all;
      max-width: 350px;
    }
    .sg-url-table td.url-cell a {
      color: var(--ink);
      text-decoration: none;
    }
    .sg-url-table td.url-cell a:hover { color: var(--gold); }
    .priority-badge {
      display: inline-block;
      padding: .15rem .55rem;
      border-radius: 12px;
      font-size: .68rem;
      font-weight: 700;
    }
    .pri-high   { background: #dcfce7; color: #16a34a; }
    .pri-medium { background: #fef9c3; color: #854d0e; }
    .pri-low    { background: var(--cream); color: var(--muted); }
    .freq-tag {
      font-size: .7rem;
      color: var(--slate);
      font-weight: 600;
    }

    /* Action bar */
    .sg-action-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.2rem 2rem;
      background: var(--cream);
      border-top: 1.5px solid var(--border);
      flex-wrap: wrap;
      gap: .75rem;
    }
    .sg-action-bar-left {
      font-size: .8rem;
      color: var(--slate);
      font-weight: 600;
    }
    .sg-action-bar-left span { color: var(--gold); font-weight: 800; }
    .sg-action-btns {
      display: flex;
      gap: .65rem;
      flex-wrap: wrap;
    }
    .btn-sg-action {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: .65rem 1.2rem;
      border-radius: var(--radius);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: all .2s;
    }
    .btn-download-xml  { background: var(--gold); color: white; }
    .btn-download-xml:hover  { background: #b8862e; }
    .btn-download-csv  { background: var(--ink);  color: white; }
    .btn-download-csv:hover  { background: #2a2a3e; }
    .btn-copy-xml      { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
    .btn-copy-xml:hover      { border-color: var(--gold); color: var(--gold); }
    .btn-reset         { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
    .btn-reset:hover         { color: var(--ink); border-color: var(--slate); }

    /* XML preview */
    .sg-xml-preview {
      display: none;
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--border);
    }
    .sg-xml-preview.open { display: block; }
    .sg-xml-preview pre {
      background: #0f1117;
      color: #e2e8f0;
      padding: 1.4rem;
      border-radius: var(--radius);
      font-size: .72rem;
      line-height: 1.8;
      overflow-x: auto;
      max-height: 260px;
      overflow-y: auto;
      border: 1px solid rgba(255,255,255,.08);
    }
    .xml-tag    { color: #93c5fd; }
    .xml-attr   { color: #86efac; }
    .xml-val    { color: #fcd34d; }
    .xml-decl   { color: #a78bfa; }

    /* No CORS note */
    .sg-cors-note {
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      border-radius: var(--radius);
      padding: 1.1rem 1.4rem;
      font-size: .78rem;
      color: #92400e;
      line-height: 1.65;
      margin-bottom: 1.4rem;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .sg-cors-note i { color: #d97706; flex-shrink: 0; margin-top: 2px; }

    /* Error state */
    .sg-error {
      display: none;
      padding: 2rem;
      text-align: center;
    }
    .sg-error.active { display: block; }
    .sg-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
    .sg-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
    .sg-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; }

    /* Empty state */
    .sg-empty {
      padding: 3.5rem 2rem;
      text-align: center;
    }
    .sg-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
    .sg-empty p { font-size: .88rem; color: var(--muted); }

    /* Responsive */
    @media(max-width: 768px) {
      .sg-input-panel { padding: 1.5rem 1.2rem; }
      .sg-options { grid-template-columns: 1fr 1fr; gap: .75rem; }
      .sg-stats-strip { flex-wrap: wrap; }
      .sg-stat { min-width: 50%; border-bottom: 1px solid var(--border); }
      .sg-action-bar { flex-direction: column; align-items: flex-start; }
      .sg-action-btns { width: 100%; }
      .btn-sg-action { flex: 1; justify-content: center; }
      .sg-xml-preview { padding: 1rem; }
    }
    @media(max-width: 480px) {
      .sg-options { grid-template-columns: 1fr 1fr; }
      .sg-url-row { flex-direction: column; }
      .btn-generate { width: 100%; justify-content: center; }
    }
/* ══════════════════════════════════════════════
   SCHEMA VALIDATOR — sv-* components
══════════════════════════════════════════════ */

.sv-wrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}

/* ── Input panel ── */
.sv-input-panel {
  background: var(--cream);
  padding: 2.2rem 2.4rem 1.8rem;
  border-bottom: 1.5px solid var(--border);
}
.sv-input-panel h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-input-panel h3 i { color: var(--gold); }

/* Tab switcher — URL / Paste Code */
.sv-tabs {
  display: flex;
  gap: 0;
  background: var(--border);
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  margin-bottom: 1.3rem;
}
.sv-tab {
  padding: .45rem 1.2rem;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  transition: all .18s;
}
.sv-tab.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

.sv-url-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.sv-url-row input {
  flex: 1;
  min-width: 200px;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.sv-url-row input:focus { border-color: var(--gold); }
.sv-url-row input::placeholder { color: var(--muted); }

.sv-code-area {
  width: 100%;
  box-sizing: border-box;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: monospace;
  font-size: .8rem;
  line-height: 1.7;
  background: #0f1117;
  color: #e2e8f0;
  resize: vertical;
  min-height: 160px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: .9rem;
  display: none;
}
.sv-code-area.active { display: block; }
.sv-code-area:focus { border-color: var(--gold); }

.btn-validate {
  background: var(--gold);
  color: var(--white);
  border: none;
  padding: .85rem 1.8rem;
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all .2s;
}
.btn-validate:hover:not(:disabled) { background: #b8862e; transform: translateY(-1px); }
.btn-validate:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Loading bar ── */
.sv-progress {
  padding: 1.4rem 2.4rem;
  border-bottom: 1px solid var(--border);
  display: none;
}
.sv-progress.active { display: block; }
.sv-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: .6rem;
}
.sv-progress-label span:last-child { color: var(--gold); font-weight: 700; }
.sv-progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.sv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  border-radius: 4px;
  transition: width .35s ease;
  width: 0%;
}

/* ── Score ring & summary ── */
.sv-results { display: none; }
.sv-results.active { display: block; }

.sv-summary-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem 2.4rem;
  border-bottom: 1.5px solid var(--border);
  flex-wrap: wrap;
}
.sv-score-ring {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sv-score-ring circle { fill: none; stroke-width: 8; }
.sv-ring-bg    { stroke: var(--border); }
.sv-ring-fill  { stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.sv-score-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 800;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.sv-score-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  text-align: center;
  display: block;
}

.sv-summary-info { flex: 1; min-width: 200px; }
.sv-summary-info h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: .35rem;
}
.sv-summary-info p { font-size: .82rem; color: var(--slate); line-height: 1.65; }

.sv-summary-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .28rem .75rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
}
.chip-pass  { background: #dcfce7; color: #16a34a; }
.chip-warn  { background: #fef9c3; color: #854d0e; }
.chip-fail  { background: #fee2e2; color: #dc2626; }
.chip-info  { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-lt); }

/* ── Schema type badges ── */
.sv-schema-types {
  padding: 1.2rem 2.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.sv-schema-types-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  flex-shrink: 0;
}
.sv-type-badge {
  background: var(--ink);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .75rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sv-type-badge i { font-size: .65rem; color: var(--gold); }

/* ── Issues list ── */
.sv-issues-wrap {
  max-height: 420px;
  overflow-y: auto;
}
.sv-issue {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 2.4rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.sv-issue:hover { background: var(--gold-bg); }
.sv-issue:last-child { border-bottom: none; }
.sv-issue-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  margin-top: 2px;
}
.icon-pass { background: #dcfce7; color: #16a34a; }
.icon-warn { background: #fef9c3; color: #854d0e; }
.icon-fail { background: #fee2e2; color: #dc2626; }
.icon-info { background: var(--gold-bg); color: var(--gold); }

.sv-issue-body { flex: 1; }
.sv-issue-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.sv-issue-severity {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .1rem .45rem;
  border-radius: 8px;
}
.sev-critical { background: #fee2e2; color: #dc2626; }
.sev-warning  { background: #fef9c3; color: #854d0e; }
.sev-info     { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-lt); }
.sev-pass     { background: #dcfce7; color: #16a34a; }
.sv-issue-desc { font-size: .78rem; color: var(--slate); line-height: 1.65; }
.sv-issue-fix  {
  font-size: .75rem;
  color: var(--gold);
  font-weight: 600;
  margin-top: .35rem;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.sv-issue-fix i { margin-top: 2px; flex-shrink: 0; }

/* ── Raw JSON / preview panel ── */
.sv-code-panel {
  display: none;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border);
}
.sv-code-panel.open { display: block; }
.sv-code-panel pre {
  background: #0f1117;
  color: #e2e8f0;
  padding: 1.4rem;
  border-radius: var(--radius);
  font-size: .72rem;
  line-height: 1.8;
  overflow-x: auto;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.08);
}
.json-key   { color: #93c5fd; }
.json-str   { color: #86efac; }
.json-num   { color: #fcd34d; }
.json-bool  { color: #f9a8d4; }
.json-null  { color: #94a3b8; }

/* ── Action bar ── */
.sv-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  background: var(--cream);
  border-top: 1.5px solid var(--border);
  flex-wrap: wrap;
  gap: .75rem;
}
.sv-action-bar-info {
  font-size: .8rem;
  color: var(--slate);
  font-weight: 600;
}
.sv-action-bar-info b { color: var(--ink); }
.sv-action-btns {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.btn-sv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.btn-sv-gold    { background: var(--gold); color: white; }
.btn-sv-gold:hover    { background: #b8862e; }
.btn-sv-dark    { background: var(--ink); color: white; }
.btn-sv-dark:hover    { background: #2a2a3e; }
.btn-sv-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-sv-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Empty / Error states ── */
.sv-empty {
  padding: 3.5rem 2rem;
  text-align: center;
}
.sv-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.sv-empty p { font-size: .88rem; color: var(--muted); }

.sv-error {
  display: none;
  padding: 2.4rem;
  text-align: center;
}
.sv-error.active { display: block; }
.sv-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.sv-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.sv-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 420px; margin: 0 auto 1.2rem; }

/* ── Responsive ── */
@media(max-width: 768px) {
  .sv-input-panel { padding: 1.5rem 1.2rem; }
  .sv-url-row { flex-direction: column; }
  .btn-validate { width: 100%; justify-content: center; }
  .sv-summary-row { padding: 1.4rem 1.2rem; gap: 1.2rem; }
  .sv-schema-types { padding: 1rem 1.2rem; }
  .sv-issue { padding: 1rem 1.2rem; gap: .75rem; }
  .sv-action-bar { flex-direction: column; align-items: flex-start; }
  .sv-action-btns { width: 100%; }
  .btn-sv { flex: 1; justify-content: center; }
  .sv-code-panel { padding: 1rem; }
  .sv-issues-wrap { max-height: 340px; }
  .sv-progress { padding: 1.2rem 1.2rem; }
}
@media(max-width: 480px) {
  .sv-score-ring { width: 80px; height: 80px; }
  .sv-score-num  { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════
   BACKLINK CHECKER — bc-* components
══════════════════════════════════════════════ */

.bc-wrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}

/* ── Input panel ── */
.bc-input-panel {
  background: var(--cream);
  padding: 2.2rem 2.4rem 1.8rem;
  border-bottom: 1.5px solid var(--border);
}
.bc-input-panel h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bc-input-panel h3 i { color: var(--gold); }

.bc-url-row {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.bc-url-row input {
  flex: 1;
  min-width: 200px;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.bc-url-row input:focus { border-color: var(--gold); }
.bc-url-row input::placeholder { color: var(--muted); }

.bc-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .9rem;
  margin-top: .2rem;
}
.bc-opt-group label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .4rem;
}
.bc-opt-group select {
  width: 100%;
  padding: .55rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
.bc-opt-group select:focus { border-color: var(--gold); }

.btn-bc-check {
  background: var(--gold);
  color: var(--white);
  border: none;
  padding: .85rem 1.8rem;
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all .2s;
  align-self: flex-end;
}
.btn-bc-check:hover:not(:disabled) { background: #b8862e; transform: translateY(-1px); }
.btn-bc-check:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Progress ── */
.bc-progress { padding: 1.4rem 2.4rem; border-bottom: 1px solid var(--border); display: none; }
.bc-progress.active { display: block; }
.bc-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: .6rem;
}
.bc-progress-label span:last-child { color: var(--gold); font-weight: 700; }
.bc-progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.bc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  border-radius: 4px;
  transition: width .35s ease;
  width: 0%;
}
.bc-log {
  margin-top: .85rem;
  font-size: .73rem;
  color: var(--muted);
  font-family: monospace;
  max-height: 65px;
  overflow-y: auto;
  line-height: 1.9;
}
.bc-log-line        { display: block; }
.bc-log-line.ok     { color: #16a34a; }
.bc-log-line.skip   { color: var(--muted); }
.bc-log-line.info   { color: var(--gold); }
.bc-log-line.err    { color: #dc2626; }

/* ── Domain hero metrics ── */
.bc-domain-hero {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1.5px solid var(--border);
}
.bc-metric {
  padding: 1.4rem 1rem;
  text-align: center;
  border-right: 1px solid var(--border);
}
.bc-metric:last-child { border-right: none; }
.bc-metric-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
}
.bc-metric-label {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-top: .25rem;
  display: block;
}
.bc-metric-note {
  font-size: .65rem;
  color: var(--muted);
  margin-top: .15rem;
  display: block;
}

/* ── Filter / search bar ── */
.bc-filter-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  flex-wrap: wrap;
}
.bc-filter-bar input[type="text"] {
  flex: 1;
  min-width: 160px;
  padding: .5rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.bc-filter-bar input[type="text"]:focus { border-color: var(--gold); }
.bc-filter-btn {
  padding: .48rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--white);
  color: var(--slate);
  transition: all .18s;
}
.bc-filter-btn.active, .bc-filter-btn:hover { background: var(--gold); color: white; border-color: var(--gold); }
.bc-filter-count {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Tabs ── */
.bc-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--border);
  background: var(--white);
  overflow-x: auto;
}
.bc-tab-btn {
  padding: .85rem 1.4rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bc-tab-btn i { font-size: .75rem; }
.bc-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.bc-tab-btn:hover:not(.active) { color: var(--ink); }
.bc-tab-count {
  background: var(--border);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
  padding: .1rem .42rem;
  border-radius: 10px;
}
.bc-tab-btn.active .bc-tab-count { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-lt); }

/* ── Tab panels ── */
.bc-panel { display: none; }
.bc-panel.active { display: block; }

/* ── Link table (main backlinks view) ── */
.bc-table-wrap {
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
}
.bc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .79rem;
}
.bc-table thead tr {
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 2;
}
.bc-table th {
  padding: .65rem .9rem;
  text-align: left;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.bc-table th:hover { color: var(--ink); }
.bc-table th i { margin-left: 4px; font-size: .6rem; opacity: .5; }
.bc-table td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
  color: var(--slate);
  vertical-align: middle;
}
.bc-table tbody tr:hover { background: var(--gold-bg); }
.bc-table td.bc-url-cell {
  color: var(--ink);
  max-width: 280px;
  word-break: break-all;
}
.bc-table td.bc-url-cell a { color: var(--ink); text-decoration: none; font-size: .77rem; }
.bc-table td.bc-url-cell a:hover { color: var(--gold); }
.bc-table td.bc-anchor-cell {
  max-width: 160px;
  font-style: italic;
  color: var(--slate);
  font-size: .76rem;
}

/* Link type badges */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .18rem .55rem;
  border-radius: 10px;
  font-size: .64rem;
  font-weight: 700;
  white-space: nowrap;
}
.bc-b-dofollow  { background: #dcfce7; color: #16a34a; }
.bc-b-nofollow  { background: #fee2e2; color: #dc2626; }
.bc-b-ugc       { background: #ede9fe; color: #7c3aed; }
.bc-b-sponsored { background: #fef9c3; color: #854d0e; }
.bc-b-external  { background: var(--cream); color: var(--slate); border: 1px solid var(--border); }
.bc-b-internal  { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-lt); }
.bc-b-image     { background: #e0f2fe; color: #0369a1; }

/* ── Domain grid ── */
.bc-domain-grid {
  padding: 1.2rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
  max-height: 400px;
  overflow-y: auto;
}
.bc-domain-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  transition: box-shadow .15s, transform .15s;
}
.bc-domain-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.bc-domain-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 800;
  color: var(--gold);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.bc-domain-info { flex: 1; min-width: 0; }
.bc-domain-name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-domain-meta { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.bc-domain-count {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
}

/* ── Anchor cloud ── */
.bc-anchor-cloud {
  padding: 1.5rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  max-height: 340px;
  overflow-y: auto;
}
.bc-anchor-pill {
  padding: .32rem .85rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  cursor: default;
  border: 1.5px solid var(--border);
  color: var(--ink);
  background: var(--white);
  transition: all .15s;
}
.bc-anchor-pill:hover { border-color: var(--gold); color: var(--gold); }
/* size tiers */
.bc-ap-xl   { font-size: 1.05rem; padding: .42rem 1.1rem; border-color: var(--gold); color: var(--gold); }
.bc-ap-lg   { font-size: .9rem;  padding: .38rem 1rem; }
.bc-ap-md   { font-size: .8rem; }
.bc-ap-sm   { font-size: .72rem; color: var(--slate); }

/* ── Link health breakdown ── */
.bc-health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.4rem 1.6rem;
}
.bc-health-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}
.bc-health-card h4 {
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bc-health-card h4 i { color: var(--gold); }
.bc-bar-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .6rem;
}
.bc-bar-label {
  font-size: .75rem;
  color: var(--slate);
  min-width: 90px;
  font-weight: 600;
}
.bc-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.bc-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
}
.bc-bar-val {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 36px;
  text-align: right;
}

/* ── Action bar ── */
.bc-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.8rem;
  background: var(--cream);
  border-top: 1.5px solid var(--border);
  flex-wrap: wrap;
  gap: .75rem;
}
.bc-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.bc-action-info b { color: var(--ink); }
.bc-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-bc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .6rem 1.1rem;
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.btn-bc-gold    { background: var(--gold); color: white; }
.btn-bc-gold:hover    { background: #b8862e; }
.btn-bc-dark    { background: var(--ink); color: white; }
.btn-bc-dark:hover    { background: #2a2a3e; }
.btn-bc-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-bc-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Empty / Error / Results ── */
.bc-results { display: none; }
.bc-results.active { display: block; }

.bc-empty {
  padding: 3.5rem 2rem;
  text-align: center;
}
.bc-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.bc-empty p { font-size: .88rem; color: var(--muted); }

.bc-error { display: none; padding: 2.4rem; text-align: center; }
.bc-error.active { display: block; }
.bc-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.bc-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.bc-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Responsive ── */
@media(max-width: 1024px) {
  .bc-domain-hero { grid-template-columns: repeat(3, 1fr); }
  .bc-domain-hero .bc-metric:nth-child(4),
  .bc-domain-hero .bc-metric:nth-child(5) { border-top: 1px solid var(--border); }
}
@media(max-width: 768px) {
  .bc-input-panel  { padding: 1.5rem 1.2rem; }
  .bc-url-row      { flex-direction: column; }
  .btn-bc-check    { width: 100%; justify-content: center; }
  .bc-options-row  { grid-template-columns: 1fr 1fr; }
  .bc-domain-hero  { grid-template-columns: repeat(2, 1fr); }
  .bc-domain-hero .bc-metric:nth-child(n) { border-top: 1px solid var(--border); }
  .bc-domain-hero .bc-metric:nth-child(-n+2) { border-top: none; }
  .bc-health-grid  { grid-template-columns: 1fr; }
  .bc-filter-bar   { padding: .85rem 1.1rem; }
  .bc-domain-grid  { grid-template-columns: 1fr 1fr; padding: .9rem; }
  .bc-action-bar   { flex-direction: column; align-items: flex-start; }
  .bc-action-btns  { width: 100%; }
  .btn-bc          { flex: 1; justify-content: center; }
  .bc-progress     { padding: 1.2rem 1.2rem; }
  .bc-log          { max-height: 55px; }
  .bc-tabs         { overflow-x: auto; }
}
@media(max-width: 480px) {
  .bc-options-row  { grid-template-columns: 1fr; }
  .bc-domain-grid  { grid-template-columns: 1fr; }
  .bc-domain-hero  { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   KEYWORD RESEARCH TOOL — kr-* components
══════════════════════════════════════════════ */

.kr-wrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-m);
}

/* ── Input panel ── */
.kr-input-panel {
  background: var(--cream);
  padding: 2.2rem 2.4rem 1.8rem;
  border-bottom: 1.5px solid var(--border);
}
.kr-input-panel h3 {
  font-size: 1rem; font-weight: 800; color: var(--ink);
  margin-bottom: 1.4rem; display: flex; align-items: center; gap: 8px;
}
.kr-input-panel h3 i { color: var(--gold); }

.kr-url-row {
  display: flex; gap: .75rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.kr-url-row input {
  flex: 1; min-width: 200px;
  padding: .85rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem; background: var(--white); color: var(--ink);
  outline: none; transition: border-color .2s;
}
.kr-url-row input:focus { border-color: var(--gold); }
.kr-url-row input::placeholder { color: var(--muted); }

.kr-options-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem;
}
.kr-opt-group label {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: .4rem;
}
.kr-opt-group select {
  width: 100%; padding: .55rem .75rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; background: var(--white); color: var(--ink);
  cursor: pointer; outline: none; transition: border-color .2s;
}
.kr-opt-group select:focus { border-color: var(--gold); }

.btn-kr-search {
  background: var(--gold); color: var(--white); border: none;
  padding: .85rem 1.8rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; transition: all .2s; align-self: flex-end;
}
.btn-kr-search:hover:not(:disabled) { background: #b8862e; transform: translateY(-1px); }
.btn-kr-search:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Progress ── */
.kr-progress { padding: 1.4rem 2.4rem; border-bottom: 1px solid var(--border); display: none; }
.kr-progress.active { display: block; }
.kr-progress-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; font-weight: 600; color: var(--slate); margin-bottom: .6rem;
}
.kr-progress-label span:last-child { color: var(--gold); font-weight: 700; }
.kr-progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.kr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  border-radius: 4px; transition: width .35s ease; width: 0%;
}
.kr-log {
  margin-top: .8rem; font-size: .72rem; color: var(--muted);
  font-family: monospace; max-height: 60px; overflow-y: auto; line-height: 1.9;
}
.kr-log-line        { display: block; }
.kr-log-line.ok     { color: #16a34a; }
.kr-log-line.info   { color: var(--gold); }
.kr-log-line.skip   { color: var(--muted); }

/* ── Summary strip ── */
.kr-summary-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1.5px solid var(--border);
}
.kr-stat {
  padding: 1.3rem 1rem; text-align: center;
  border-right: 1px solid var(--border);
}
.kr-stat:last-child { border-right: none; }
.kr-stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.65rem; font-weight: 800;
  color: var(--gold); line-height: 1.1;
}
.kr-stat-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-top: .25rem; display: block;
}

/* ── Tabs ── */
.kr-tabs {
  display: flex; border-bottom: 1.5px solid var(--border);
  background: var(--white); overflow-x: auto;
}
.kr-tab-btn {
  padding: .85rem 1.3rem; border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: all .18s;
  display: flex; align-items: center; gap: 6px;
}
.kr-tab-btn i { font-size: .75rem; }
.kr-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.kr-tab-btn:hover:not(.active) { color: var(--ink); }
.kr-tab-count {
  background: var(--border); color: var(--muted);
  font-size: .62rem; font-weight: 800;
  padding: .1rem .42rem; border-radius: 10px;
}
.kr-tab-btn.active .kr-tab-count {
  background: var(--gold-bg); color: var(--gold);
  border: 1px solid var(--gold-lt);
}

/* ── Tab panels ── */
.kr-panel { display: none; }
.kr-panel.active { display: block; }

/* ── Filter / search bar ── */
.kr-filter-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); flex-wrap: wrap;
}
.kr-filter-bar input[type="text"] {
  flex: 1; min-width: 160px; padding: .5rem .9rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; background: var(--white); color: var(--ink);
  outline: none; transition: border-color .2s;
}
.kr-filter-bar input[type="text"]:focus { border-color: var(--gold); }
.kr-filter-btn {
  padding: .45rem .95rem; border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700; cursor: pointer;
  background: var(--white); color: var(--slate); transition: all .18s;
}
.kr-filter-btn.active, .kr-filter-btn:hover {
  background: var(--gold); color: white; border-color: var(--gold);
}
.kr-filter-count {
  font-size: .72rem; color: var(--muted); white-space: nowrap; margin-left: auto;
}

/* ── Keyword table ── */
.kr-table-wrap { overflow-x: auto; max-height: 440px; overflow-y: auto; }
.kr-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.kr-table thead tr {
  background: var(--cream); position: sticky; top: 0; z-index: 2;
}
.kr-table th {
  padding: .65rem .9rem; text-align: left;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.kr-table th:hover { color: var(--ink); }
.kr-table th i { margin-left: 4px; font-size: .6rem; opacity: .5; }
.kr-table td {
  padding: .6rem .9rem; border-bottom: 1px solid var(--border);
  color: var(--slate); vertical-align: middle;
}
.kr-table tbody tr:hover { background: var(--gold-bg); }
.kr-table td.kr-kw-cell { color: var(--ink); font-weight: 600; font-size: .82rem; }

/* Intent badge */
.kr-intent {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .2rem .55rem; border-radius: 10px;
  font-size: .64rem; font-weight: 700; white-space: nowrap;
}
.kr-i-info       { background: #e0f2fe; color: #0369a1; }
.kr-i-nav        { background: #ede9fe; color: #7c3aed; }
.kr-i-commercial { background: #fef9c3; color: #854d0e; }
.kr-i-trans      { background: #dcfce7; color: #16a34a; }

/* Volume bar */
.kr-vol-bar {
  display: flex; align-items: center; gap: 8px; min-width: 120px;
}
.kr-vol-track {
  flex: 1; height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden;
}
.kr-vol-fill { height: 100%; border-radius: 3px; background: var(--gold); }
.kr-vol-label {
  font-size: .72rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; min-width: 48px;
}

/* Difficulty pill */
.kr-diff {
  display: inline-block; padding: .2rem .6rem;
  border-radius: 10px; font-size: .68rem; font-weight: 800;
}
.kr-diff-easy   { background: #dcfce7; color: #16a34a; }
.kr-diff-medium { background: #fef9c3; color: #854d0e; }
.kr-diff-hard   { background: #fee2e2; color: #dc2626; }

/* CPC tag */
.kr-cpc { font-size: .75rem; font-weight: 700; color: var(--ink); }

/* Add button in table */
.kr-add-btn {
  background: none; border: 1.5px solid var(--border);
  border-radius: 6px; padding: .22rem .55rem;
  font-size: .68rem; font-weight: 700; cursor: pointer;
  color: var(--muted); transition: all .15s;
}
.kr-add-btn:hover, .kr-add-btn.added {
  background: var(--gold); border-color: var(--gold); color: white;
}

/* ── Saved list panel ── */
.kr-saved-wrap { padding: 1.4rem 1.8rem; min-height: 120px; }
.kr-saved-empty {
  text-align: center; color: var(--muted); font-size: .82rem;
  padding: 2rem; opacity: .7;
}
.kr-saved-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kr-saved-tag {
  background: var(--gold-bg); border: 1.5px solid var(--gold-lt);
  color: var(--ink); border-radius: 20px;
  padding: .3rem .85rem; font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; cursor: default;
}
.kr-saved-tag button {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .7rem; padding: 0;
  line-height: 1; transition: color .15s;
}
.kr-saved-tag button:hover { color: #dc2626; }

/* ── Idea cloud panel ── */
.kr-idea-cloud {
  padding: 1.5rem 1.8rem; display: flex;
  flex-wrap: wrap; gap: .55rem;
  max-height: 360px; overflow-y: auto;
}
.kr-idea-pill {
  padding: .32rem .85rem; border-radius: 20px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border); color: var(--ink);
  background: var(--white); transition: all .15s;
}
.kr-idea-pill:hover {
  border-color: var(--gold); color: var(--gold);
  background: var(--gold-bg);
}
/* cloud size tiers */
.kr-ip-xl { font-size: 1.05rem; padding: .42rem 1.1rem; border-color: var(--gold); color: var(--gold); font-weight: 700; }
.kr-ip-lg { font-size: .9rem;  padding: .38rem 1rem; }
.kr-ip-sm { font-size: .72rem; color: var(--slate); }

/* ── Action bar ── */
.kr-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.8rem; background: var(--cream);
  border-top: 1.5px solid var(--border); flex-wrap: wrap; gap: .75rem;
}
.kr-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.kr-action-info b { color: var(--ink); }
.kr-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-kr {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-kr-gold    { background: var(--gold);  color: white; }
.btn-kr-gold:hover    { background: #b8862e; }
.btn-kr-dark    { background: var(--ink);   color: white; }
.btn-kr-dark:hover    { background: #2a2a3e; }
.btn-kr-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-kr-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Empty / Error ── */
.kr-results { display: none; }
.kr-results.active { display: block; }
.kr-empty { padding: 3.5rem 2rem; text-align: center; }
.kr-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.kr-empty p { font-size: .88rem; color: var(--muted); }
.kr-error { display: none; padding: 2.4rem; text-align: center; }
.kr-error.active { display: block; }
.kr-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.kr-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.kr-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Responsive ── */
@media(max-width: 1024px) {
  .kr-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .kr-summary-strip .kr-stat:nth-child(n) { border-top: 1px solid var(--border); }
  .kr-summary-strip .kr-stat:nth-child(-n+2) { border-top: none; }
}
@media(max-width: 768px) {
  .kr-input-panel { padding: 1.5rem 1.2rem; }
  .kr-url-row     { flex-direction: column; }
  .btn-kr-search  { width: 100%; justify-content: center; }
  .kr-options-row { grid-template-columns: 1fr 1fr; }
  .kr-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .kr-filter-bar  { padding: .85rem 1.1rem; }
  .kr-action-bar  { flex-direction: column; align-items: flex-start; }
  .kr-action-btns { width: 100%; }
  .btn-kr         { flex: 1; justify-content: center; }
  .kr-progress    { padding: 1.2rem; }
}
@media(max-width: 480px) {
  .kr-options-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   META TAG GENERATOR  |  meta-tag-generator.html
════════════════════════════════════════════════════════════ */

/* ── Wrapper: 2-column grid ── */
.mtg-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media(max-width: 960px) { .mtg-wrap { grid-template-columns: 1fr; } }

/* ── Panels ── */
.mtg-input-panel,
.mtg-output-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.mtg-panel-head {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.mtg-panel-head h3 {
  font-size: .92rem; font-weight: 700; color: var(--ink);
}
.mtg-panel-head i { color: var(--gold); }
.mtg-panel-body { padding: 1.4rem 1.6rem; }

/* ── Tabs ── */
.mtg-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.mtg-tab-btn {
  flex: 1; background: none; border: none;
  color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .55rem .6rem; border-radius: 7px;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.mtg-tab-btn i { font-size: .7rem; }
.mtg-tab-btn:hover { color: var(--ink); background: var(--white); }
.mtg-tab-btn.active { background: var(--ink); color: var(--white); }

/* Tab panels */
.mtg-panel { display: none; padding: 1.4rem 1.6rem; }
.mtg-panel.active { display: block; }

/* ── Fields ── */
.mtg-field { margin-bottom: 1.1rem; }
.mtg-field label {
  display: block; font-size: .76rem; font-weight: 700;
  color: var(--ink); margin-bottom: 5px; letter-spacing: .02em;
}
.mtg-field label .req { color: var(--gold); margin-left: 2px; }
.mtg-field label .hint { color: var(--muted); font-weight: 400; font-size: .72rem; }

.mtg-field input[type="text"],
.mtg-field input[type="url"],
.mtg-field textarea,
.mtg-field select {
  width: 100%;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .83rem; padding: .6rem .9rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
  resize: vertical;
}
.mtg-field input:focus,
.mtg-field textarea:focus,
.mtg-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}
.mtg-field-row { display: flex; gap: 12px; }
.mtg-field.half { flex: 1; min-width: 0; }
.mtg-field .field-note { font-size: .7rem; color: var(--muted); margin-top: 4px; }

/* Character counter */
.mtg-char-bar {
  font-size: .68rem; color: var(--muted);
  display: flex; gap: 5px; margin-top: 4px; margin-bottom: 3px;
}
.mtg-char-bar .ideal { color: var(--gold); font-weight: 700; }
.mtg-char-track {
  height: 3px; background: var(--border);
  border-radius: 4px; overflow: hidden;
}
.mtg-char-fill {
  height: 100%; width: 0%;
  background: var(--gold); border-radius: 4px;
  transition: width .2s, background .2s;
}
.mtg-char-fill.warn { background: #f59e0b; }
.mtg-char-fill.over { background: #ef4444; }

/* Color picker row */
.mtg-color-row { display: flex; gap: 10px; align-items: center; }
.mtg-color-row input[type="color"] {
  width: 40px; height: 40px; padding: 3px;
  border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--cream);
}

/* ── Buttons ── */
.mtg-btn-row {
  display: flex; gap: 10px;
  padding: 1.1rem 1.6rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.mtg-btn-generate {
  flex: 1; background: var(--ink); color: var(--white);
  border: none; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  padding: .75rem 1.2rem; cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.mtg-btn-generate:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.mtg-btn-reset {
  background: var(--white); color: var(--slate);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 600;
  padding: .75rem 1.1rem; cursor: pointer; transition: all .2s;
}
.mtg-btn-reset:hover { border-color: var(--gold); color: var(--gold); }

/* ── Output: code box ── */
.mtg-output-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.mtg-output-head h3 { font-size: .9rem; font-weight: 700; color: var(--ink); }
.mtg-btn-copy {
  background: var(--gold-bg); color: var(--gold);
  border: 1.5px solid var(--gold-lt); border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .38rem 1rem; cursor: pointer; transition: all .2s;
}
.mtg-btn-copy:hover:not(:disabled) { background: var(--gold); color: var(--white); }
.mtg-btn-copy:disabled { opacity: .35; cursor: not-allowed; }

.mtg-code-wrap { padding: 1.2rem 1.4rem; }
.mtg-code-box {
  background: var(--ink); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; min-height: 260px;
  font-family: 'Courier New', monospace;
  font-size: .73rem; line-height: 1.85;
  color: #c9d0e0; white-space: pre; overflow-x: auto;
  position: relative;
}
.mtg-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; text-align: center; padding: 2rem;
}
.mtg-placeholder-icon { font-size: 2.2rem; opacity: .45; }

/* Syntax highlight */
.mtg-code-box .cm { color: #6b7a99; }
.mtg-code-box .tg { color: var(--gold); }
.mtg-code-box .at { color: #7ec8e3; }
.mtg-code-box .vl { color: #f0c264; }

/* ── Previews ── */
.mtg-preview-wrap { padding: 0 1.4rem 1.4rem; }
.mtg-preview-label {
  font-size: .66rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 8px; margin-top: 16px;
  display: flex; align-items: center; gap: 6px;
}
.mtg-preview-label::before { content: ''; width: 14px; height: 2px; background: var(--gold); display: block; }

/* SERP */
.mtg-serp-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem;
  box-shadow: var(--shadow-s);
}
.mtg-serp-url  { font-size: .75rem; color: #555; font-family: Arial, sans-serif; margin-bottom: 2px; }
.mtg-serp-title { font-size: 1rem; color: #1a0dab; font-family: Arial, sans-serif; line-height: 1.3; margin-bottom: 4px; cursor: pointer; }
.mtg-serp-title:hover { text-decoration: underline; }
.mtg-serp-desc  { font-size: .78rem; color: #4d5156; font-family: Arial, sans-serif; line-height: 1.6; }

/* Social */
.mtg-social-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--white); box-shadow: var(--shadow-s);
}
.mtg-sp-img {
  background: var(--cream); height: 140px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .78rem; overflow: hidden;
}
.mtg-sp-img img { width: 100%; height: 100%; object-fit: cover; }
.mtg-sp-body { padding: .75rem 1rem; }
.mtg-sp-site  { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.mtg-sp-title { font-size: .88rem; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
.mtg-sp-desc  { font-size: .75rem; color: var(--slate); }

/* ── Toast ── */
.mtg-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: .83rem;
  padding: .65rem 1.4rem; border-radius: 50px;
  opacity: 0; transition: all .35s cubic-bezier(.175,.885,.32,1.275);
  z-index: 9999; pointer-events: none; white-space: nowrap;
  border-left: 3px solid var(--gold);
}
.mtg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media(max-width:768px) { .mtg-toast { bottom: calc(var(--mob-cta-h) + 12px); } }

/* ── Responsive ── */
@media(max-width:768px) {
  .mtg-panel-body, .mtg-panel { padding: 1.1rem 1.1rem; }
  .mtg-btn-row { flex-direction: column; padding: 1rem 1.1rem; }
  .mtg-field-row { flex-direction: column; gap: 0; }
  .mtg-tabs { flex-wrap: wrap; }
  .mtg-tab-btn { font-size: .65rem; padding: .45rem .4rem; }
}

/* ════════════════════════════════════════════════════════════
   WEBSITE SPEED CHECKER  |  website-speed-checker.html
════════════════════════════════════════════════════════════ */

/* ── Input panel ── */
.sc-wrap { display: flex; flex-direction: column; gap: 20px; }

.sc-input-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.sc-input-head {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.sc-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.sc-input-head i  { color: var(--gold); }

.sc-input-body { padding: 1.4rem 1.6rem; }

.sc-url-row {
  display: flex; gap: 10px; align-items: stretch; margin-bottom: 1.1rem;
}
.sc-url-row input[type="url"] {
  flex: 1;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem; padding: .65rem 1rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.sc-url-row input[type="url"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}
.sc-url-row input::placeholder { color: var(--muted); }

.btn-sc-run {
  background: var(--ink); color: var(--white);
  border: none; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  padding: .65rem 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; white-space: nowrap;
}
.btn-sc-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-sc-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Device toggle */
.sc-options-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.sc-opt-group { display: flex; flex-direction: column; gap: 5px; }
.sc-opt-group label {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.sc-device-toggle {
  display: flex; gap: 4px;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; padding: 3px;
}
.sc-device-btn {
  background: none; border: none; border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700; color: var(--muted);
  padding: .4rem .9rem; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: 6px;
}
.sc-device-btn.active { background: var(--ink); color: var(--white); }
.sc-device-btn i { font-size: .8rem; }

.sc-opt-select {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; padding: .42rem .8rem;
  outline: none; cursor: pointer; transition: border-color .2s;
}
.sc-opt-select:focus { border-color: var(--gold); }

/* ── Progress bar ── */
.sc-progress {
  display: none;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.6rem 1.8rem;
}
.sc-progress.active { display: block; }
.sc-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink);
  margin-bottom: .6rem;
}
.sc-progress-pct { color: var(--gold); font-weight: 800; }
.sc-progress-bar {
  height: 6px; background: var(--border);
  border-radius: 4px; overflow: hidden; margin-bottom: 1rem;
}
.sc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8b84b);
  border-radius: 4px; transition: width .4s ease;
}
.sc-progress-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sc-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: .7rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cream); font-size: .7rem; font-weight: 600;
  color: var(--muted); text-align: center; transition: all .3s;
}
.sc-step i { font-size: 1rem; color: var(--border); transition: color .3s; }
.sc-step.done { color: var(--ink); border-color: var(--gold-lt); background: var(--gold-bg); }
.sc-step.done i { color: var(--gold); }
.sc-step.active { color: var(--gold); border-color: var(--gold); background: var(--gold-bg); animation: sc-pulse .8s ease-in-out infinite; }
.sc-step.active i { color: var(--gold); }
@keyframes sc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,150,62,.3); } 50% { box-shadow: 0 0 0 6px rgba(200,150,62,0); } }

/* ── Empty + Error ── */
.sc-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 3.5rem 2rem; text-align: center;
}
.sc-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.sc-empty p { font-size: .88rem; color: var(--muted); }

.sc-error {
  display: none;
  background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 2.4rem; text-align: center;
}
.sc-error.active { display: block; }
.sc-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.sc-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.sc-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Results panel ── */
.sc-results { display: none; }
.sc-results.active { display: block; }

/* Analysed URL bar */
.sc-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.4rem;
  box-shadow: var(--shadow-s); margin-bottom: 20px;
}
.sc-result-url {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--slate); font-weight: 500;
  min-width: 0;
}
.sc-result-url i { color: var(--gold); flex-shrink: 0; }
.sc-result-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-result-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sc-device-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-bg); border: 1px solid var(--gold-lt);
  color: var(--gold); font-size: .7rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 20px;
}
.btn-sc-rerun {
  background: none; border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--slate);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .3rem .8rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-sc-rerun:hover { border-color: var(--gold); color: var(--gold); }

/* ── Score + vitals grid ── */
.sc-main-grid {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 20px; margin-bottom: 20px; align-items: start;
}
@media(max-width: 900px) { .sc-main-grid { grid-template-columns: 1fr; } }

/* Score card */
.sc-score-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.6rem; text-align: center;
}
.sc-score-card h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 1.2rem;
}
/* Circular gauge */
.sc-gauge-wrap { position: relative; display: inline-block; margin-bottom: 1rem; }
.sc-gauge {
  transform: rotate(-90deg);
  display: block;
}
.sc-gauge-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.sc-gauge-arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1), stroke .4s; }
.sc-gauge-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sc-gauge-score {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--ink);
}
.sc-gauge-label { font-size: .7rem; font-weight: 700; color: var(--muted); margin-top: 2px; }

.sc-score-grade {
  display: inline-block; padding: .3rem 1rem; border-radius: 20px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em;
  margin-bottom: 1rem;
}
.sc-grade-good  { background: #dcfce7; color: #16a34a; }
.sc-grade-ok    { background: #fef9c3; color: #854d0e; }
.sc-grade-poor  { background: #fee2e2; color: #dc2626; }

.sc-score-desc { font-size: .78rem; color: var(--slate); line-height: 1.6; }

/* Vitals grid */
.sc-vitals-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  overflow: hidden;
}
.sc-vitals-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.sc-vitals-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.sc-cwv-badge {
  font-size: .68rem; font-weight: 700; color: var(--gold);
  background: var(--gold-bg); border: 1px solid var(--gold-lt);
  padding: .15rem .6rem; border-radius: 10px;
}

.sc-vitals-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 640px) { .sc-vitals-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 400px) { .sc-vitals-grid { grid-template-columns: 1fr; } }

.sc-vital {
  padding: 1.2rem 1rem; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  transition: background .2s;
}
.sc-vital:hover { background: var(--cream); }
.sc-vital:nth-child(3n) { border-right: none; }
.sc-vital-name {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.sc-vital-name .sc-help {
  cursor: help; border-bottom: 1px dashed var(--border);
}
.sc-vital-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 800; color: var(--ink);
  line-height: 1;
}
.sc-vital-unit { font-size: .62rem; font-weight: 700; color: var(--muted); }
.sc-vital-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: .18rem .5rem; border-radius: 10px;
  font-size: .62rem; font-weight: 800; width: fit-content;
}
.sc-vital-bar-track {
  height: 4px; background: var(--border); border-radius: 2px;
  overflow: hidden; margin-top: 4px;
}
.sc-vital-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease .3s; }

/* status colours reused in pills and bars */
.sc-good  { background: #dcfce7; color: #16a34a; }
.sc-ok    { background: #fef9c3; color: #854d0e; }
.sc-poor  { background: #fee2e2; color: #dc2626; }
.sc-bar-good { background: #22c55e; }
.sc-bar-ok   { background: #eab308; }
.sc-bar-poor { background: #ef4444; }

/* ── Recommendations ── */
.sc-reco-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  overflow: hidden; margin-bottom: 20px;
}
.sc-reco-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.sc-reco-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.sc-reco-count {
  background: var(--border); color: var(--muted);
  font-size: .62rem; font-weight: 800;
  padding: .1rem .5rem; border-radius: 10px;
}
.sc-reco-list { padding: .4rem 0; }
.sc-reco-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: .9rem 1.4rem; border-bottom: 1px solid var(--border);
  transition: background .15s; cursor: default;
}
.sc-reco-item:last-child { border-bottom: none; }
.sc-reco-item:hover { background: var(--cream); }
.sc-reco-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0; margin-top: 1px;
}
.sc-reco-icon.high   { background: #fee2e2; color: #dc2626; }
.sc-reco-icon.medium { background: #fef9c3; color: #854d0e; }
.sc-reco-icon.low    { background: #dcfce7; color: #16a34a; }
.sc-reco-body { flex: 1; min-width: 0; }
.sc-reco-title { font-size: .83rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sc-reco-desc  { font-size: .76rem; color: var(--slate); line-height: 1.6; }
.sc-reco-impact {
  flex-shrink: 0; font-size: .68rem; font-weight: 800;
  padding: .18rem .55rem; border-radius: 8px; align-self: flex-start;
  margin-top: 3px;
}
.sc-reco-impact.high   { background: #fee2e2; color: #dc2626; }
.sc-reco-impact.medium { background: #fef9c3; color: #854d0e; }
.sc-reco-impact.low    { background: #dcfce7; color: #16a34a; }

/* ── Summary stats strip ── */
.sc-summary-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s);
  overflow: hidden; margin-bottom: 20px;
}
.sc-stat {
  padding: 1.2rem 1rem; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.sc-stat:last-child { border-right: none; }
.sc-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.sc-stat-label { font-size: .68rem; font-weight: 600; color: var(--muted); }
@media(max-width: 680px) {
  .sc-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .sc-stat:nth-child(2) { border-right: none; }
  .sc-stat:nth-child(3) { border-top: 1px solid var(--border); }
}

/* ── Action bar ── */
.sc-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
}
.sc-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.sc-action-info b { color: var(--ink); }
.sc-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-sc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-sc-gold    { background: var(--gold);  color: white; }
.btn-sc-gold:hover    { background: #b8862e; }
.btn-sc-dark    { background: var(--ink);   color: white; }
.btn-sc-dark:hover    { background: #2a2a3e; }
.btn-sc-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-sc-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Responsive ── */
@media(max-width: 768px) {
  .sc-url-row    { flex-direction: column; }
  .btn-sc-run    { width: 100%; justify-content: center; }
  .sc-options-row { gap: .75rem; }
  .sc-progress-steps { grid-template-columns: repeat(2, 1fr); }
  .sc-action-bar { flex-direction: column; align-items: flex-start; }
  .sc-action-btns { width: 100%; }
  .btn-sc { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   ROBOTS.TXT GENERATOR  |  robots-txt-generator.html
════════════════════════════════════════════════════════════ */

/* ── Main 2-col layout ── */
.rtg-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media(max-width: 960px) { .rtg-wrap { grid-template-columns: 1fr; } }

/* ── Panels ── */
.rtg-input-panel,
.rtg-output-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

/* ── Panel header ── */
.rtg-panel-head {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.rtg-panel-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.rtg-panel-head i  { color: var(--gold); }

/* ── Section inside panel ── */
.rtg-section {
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.rtg-section:last-of-type { border-bottom: none; }
.rtg-section-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 1rem;
}
.rtg-section-title::before { content: ''; width: 14px; height: 2px; background: var(--gold); display: block; }

/* ── Preset templates row ── */
.rtg-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.rtg-preset-btn {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .38rem .85rem; cursor: pointer;
  transition: all .18s;
  display: inline-flex; align-items: center; gap: 5px;
}
.rtg-preset-btn:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }
.rtg-preset-btn i { font-size: .7rem; }

/* ── Field ── */
.rtg-field { margin-bottom: 1rem; }
.rtg-field:last-child { margin-bottom: 0; }
.rtg-field label {
  display: block; font-size: .76rem; font-weight: 700;
  color: var(--ink); margin-bottom: 5px;
}
.rtg-field label .hint { color: var(--muted); font-weight: 400; font-size: .72rem; }
.rtg-field input[type="text"],
.rtg-field input[type="url"],
.rtg-field select {
  width: 100%;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .83rem; padding: .6rem .9rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.rtg-field input:focus, .rtg-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}
.rtg-field .field-note { font-size: .7rem; color: var(--muted); margin-top: 4px; }

/* ── Bot rules list ── */
.rtg-bot-list { display: flex; flex-direction: column; gap: 8px; }
.rtg-bot-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px; align-items: center;
}
.rtg-bot-row select,
.rtg-bot-row input[type="text"] {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; padding: .48rem .75rem;
  outline: none; transition: border-color .2s;
  width: 100%;
}
.rtg-bot-row input:focus, .rtg-bot-row select:focus { border-color: var(--gold); }
.rtg-bot-del {
  width: 30px; height: 30px; flex-shrink: 0;
  background: none; border: 1.5px solid var(--border);
  border-radius: 7px; color: var(--muted);
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.rtg-bot-del:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

.rtg-bot-header {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 8px; margin-bottom: 2px;
}
.rtg-bot-header span {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}

.btn-rtg-add {
  margin-top: 8px;
  background: none; border: 1.5px dashed var(--border);
  border-radius: 9px; color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  padding: .5rem 1rem; cursor: pointer; width: 100%;
  transition: all .18s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-rtg-add:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }

/* ── Disallow paths textarea ── */
.rtg-field textarea {
  width: 100%;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Courier New', monospace;
  font-size: .8rem; padding: .65rem .9rem;
  outline: none; resize: vertical; min-height: 90px;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.7;
}
.rtg-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}

/* ── Toggle checkbox row ── */
.rtg-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
}
.rtg-toggle-row:last-child { border-bottom: none; }
.rtg-toggle-info { flex: 1; min-width: 0; }
.rtg-toggle-label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.rtg-toggle-desc  { font-size: .72rem; color: var(--muted); margin-top: 1px; }
/* Toggle switch */
.rtg-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; margin-left: 12px; }
.rtg-switch input { opacity: 0; width: 0; height: 0; }
.rtg-slider {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 22px; cursor: pointer; transition: .25s;
}
.rtg-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; bottom: 3px;
  background: var(--white); border-radius: 50%; transition: .25s;
}
.rtg-switch input:checked + .rtg-slider { background: var(--gold); }
.rtg-switch input:checked + .rtg-slider::before { transform: translateX(16px); }

/* ── Sitemap entries ── */
.rtg-sitemap-list { display: flex; flex-direction: column; gap: 8px; }
.rtg-sitemap-row  { display: flex; gap: 8px; align-items: center; }
.rtg-sitemap-row input[type="url"] {
  flex: 1;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; padding: .48rem .75rem;
  outline: none; transition: border-color .2s;
}
.rtg-sitemap-row input:focus { border-color: var(--gold); }

/* ── Action buttons ── */
.rtg-btn-row {
  display: flex; gap: 10px;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.rtg-btn-generate {
  flex: 1; background: var(--ink); color: var(--white);
  border: none; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  padding: .75rem 1.2rem; cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.rtg-btn-generate:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.rtg-btn-reset {
  background: var(--white); color: var(--slate);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 600;
  padding: .75rem 1.1rem; cursor: pointer; transition: all .2s;
}
.rtg-btn-reset:hover { border-color: var(--gold); color: var(--gold); }

/* ── Output: code box ── */
.rtg-output-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.rtg-output-head h3 { font-size: .9rem; font-weight: 700; color: var(--ink); }
.rtg-output-actions { display: flex; gap: 8px; }

.rtg-btn-copy,
.rtg-btn-download {
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .38rem 1rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.rtg-btn-copy {
  background: var(--gold-bg); color: var(--gold);
  border: 1.5px solid var(--gold-lt);
}
.rtg-btn-copy:hover:not(:disabled) { background: var(--gold); color: var(--white); }
.rtg-btn-copy:disabled, .rtg-btn-download:disabled { opacity: .35; cursor: not-allowed; }
.rtg-btn-download {
  background: var(--ink); color: var(--white); border: none;
}
.rtg-btn-download:hover:not(:disabled) { background: var(--gold); }

.rtg-code-wrap { padding: 1.2rem 1.4rem; }
.rtg-code-box {
  background: var(--ink); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; min-height: 260px;
  font-family: 'Courier New', monospace;
  font-size: .76rem; line-height: 1.9;
  color: #c9d0e0; white-space: pre; overflow-x: auto;
  position: relative;
}
.rtg-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; text-align: center; padding: 2rem;
}
.rtg-placeholder-icon { font-size: 2.2rem; opacity: .45; }

/* Robots.txt syntax colours */
.rtg-code-box .rc  { color: #6b7a99; }   /* comment */
.rtg-code-box .rk  { color: var(--gold); }  /* directive key */
.rtg-code-box .rv  { color: #7ec8e3; }   /* value */
.rtg-code-box .rb  { color: #f0c264; }   /* bot name */

/* ── Validation strip ── */
.rtg-validation {
  margin: 0 1.4rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rtg-val-row {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .9rem; border-bottom: 1px solid var(--border);
  font-size: .76rem;
}
.rtg-val-row:last-child { border-bottom: none; }
.rtg-val-row i { width: 16px; text-align: center; flex-shrink: 0; }
.rtg-val-ok   { background: #f0fdf4; color: #16a34a; }
.rtg-val-warn { background: #fefce8; color: #854d0e; }
.rtg-val-err  { background: #fef2f2; color: #dc2626; }

/* ── Toast ── */
.rtg-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600; font-size: .83rem;
  padding: .65rem 1.4rem; border-radius: 50px;
  opacity: 0; transition: all .35s cubic-bezier(.175,.885,.32,1.275);
  z-index: 9999; pointer-events: none; white-space: nowrap;
  border-left: 3px solid var(--gold);
}
.rtg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media(max-width:768px) { .rtg-toast { bottom: calc(var(--mob-cta-h) + 12px); } }

/* ── Responsive ── */
@media(max-width:768px) {
  .rtg-bot-row   { grid-template-columns: 1fr auto; }
  .rtg-bot-row select:first-child { display: none; }
  .rtg-btn-row   { flex-direction: column; padding: 1rem 1.1rem; }
  .rtg-section   { padding: 1rem 1.1rem; }
  .rtg-output-actions { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════
   BROKEN LINK CHECKER  |  broken-link-checker.html
════════════════════════════════════════════════════════════ */

/* ── Input panel ── */
.blc-wrap { display: flex; flex-direction: column; gap: 20px; }

.blc-input-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.blc-input-head {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.blc-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.blc-input-head i  { color: var(--gold); }
.blc-input-body { padding: 1.4rem 1.6rem; }

.blc-url-row {
  display: flex; gap: 10px; align-items: stretch; margin-bottom: 1.1rem;
}
.blc-url-row input[type="url"] {
  flex: 1;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem; padding: .65rem 1rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.blc-url-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}
.blc-url-row input::placeholder { color: var(--muted); }

.btn-blc-run {
  background: var(--ink); color: var(--white);
  border: none; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  padding: .65rem 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; white-space: nowrap;
}
.btn-blc-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-blc-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.blc-options-row {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1rem;
}
.blc-opt-group { display: flex; flex-direction: column; gap: 5px; }
.blc-opt-group label {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.blc-opt-select {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; padding: .42rem .8rem;
  outline: none; cursor: pointer; transition: border-color .2s;
}
.blc-opt-select:focus { border-color: var(--gold); }

/* ── Progress ── */
.blc-progress {
  display: none;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.6rem 1.8rem;
}
.blc-progress.active { display: block; }
.blc-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem;
}
.blc-progress-pct { color: var(--gold); font-weight: 800; }
.blc-progress-bar {
  height: 6px; background: var(--border);
  border-radius: 4px; overflow: hidden; margin-bottom: 1rem;
}
.blc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8b84b);
  border-radius: 4px; transition: width .35s ease;
}
.blc-log {
  background: var(--ink); border-radius: var(--radius);
  padding: .8rem 1rem; max-height: 140px; overflow-y: auto;
  font-family: 'Courier New', monospace; font-size: .72rem;
  line-height: 1.75; color: #8899aa;
}
.blc-log-line { display: block; }
.blc-log-ok   { color: #4ade80; }
.blc-log-err  { color: #f87171; }
.blc-log-warn { color: #fbbf24; }
.blc-log-info { color: #7ec8e3; }

/* ── Empty / Error ── */
.blc-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 3.5rem 2rem; text-align: center;
}
.blc-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.blc-empty p { font-size: .88rem; color: var(--muted); }

.blc-error {
  display: none;
  background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 2.4rem; text-align: center;
}
.blc-error.active { display: block; }
.blc-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.blc-error h4  { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.blc-error p   { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Results ── */
.blc-results { display: none; }
.blc-results.active { display: block; }

/* Result bar */
.blc-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.4rem;
  box-shadow: var(--shadow-s); margin-bottom: 20px;
}
.blc-result-url {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--slate); font-weight: 500; min-width: 0;
}
.blc-result-url i { color: var(--gold); flex-shrink: 0; }
.blc-result-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blc-result-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-blc-rerun {
  background: none; border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--slate);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .3rem .8rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-blc-rerun:hover { border-color: var(--gold); color: var(--gold); }

/* Summary strip */
.blc-summary-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s);
  overflow: hidden; margin-bottom: 20px;
}
.blc-stat {
  padding: 1.1rem .9rem; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.blc-stat:last-child { border-right: none; }
.blc-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.blc-stat-num.good  { color: #16a34a; }
.blc-stat-num.warn  { color: #854d0e; }
.blc-stat-num.err   { color: #dc2626; }
.blc-stat-num.ink   { color: var(--ink); }
.blc-stat-label { font-size: .66rem; font-weight: 600; color: var(--muted); }
@media(max-width: 700px) {
  .blc-summary-strip { grid-template-columns: repeat(3, 1fr); }
  .blc-stat:nth-child(3) { border-right: none; }
  .blc-stat:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* ── Filter bar ── */
.blc-filter-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.4rem; background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-wrap: wrap;
}
.blc-filter-tabs { display: flex; gap: 4px; }
.blc-filter-tab {
  background: none; border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700;
  padding: .35rem .85rem; cursor: pointer; transition: all .18s;
  display: inline-flex; align-items: center; gap: 5px;
}
.blc-filter-tab:hover { color: var(--ink); border-color: var(--ink); }
.blc-filter-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.blc-filter-tab .blc-tab-count {
  background: rgba(255,255,255,.2); font-size: .62rem;
  padding: .05rem .38rem; border-radius: 8px; font-weight: 800;
}
.blc-filter-tab:not(.active) .blc-tab-count {
  background: var(--border); color: var(--muted);
}
.blc-search-input {
  flex: 1; min-width: 160px; padding: .42rem .85rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; background: var(--white); color: var(--ink);
  outline: none; transition: border-color .2s;
}
.blc-search-input:focus { border-color: var(--gold); }
.blc-filter-count { font-size: .72rem; color: var(--muted); white-space: nowrap; margin-left: auto; }

/* ── Link table ── */
.blc-table-wrap {
  overflow-x: auto; max-height: 480px; overflow-y: auto;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--white);
}
.blc-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.blc-table thead tr {
  background: var(--cream); position: sticky; top: 0; z-index: 2;
}
.blc-table th {
  padding: .65rem .9rem; text-align: left;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.blc-table th:hover { color: var(--ink); }
.blc-table th i { margin-left: 4px; font-size: .6rem; opacity: .5; }
.blc-table td {
  padding: .62rem .9rem; border-bottom: 1px solid var(--border);
  color: var(--slate); vertical-align: middle;
}
.blc-table tbody tr:last-child td { border-bottom: none; }
.blc-table tbody tr:hover { background: var(--gold-bg); }

/* Status badge */
.blc-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .2rem .6rem; border-radius: 10px;
  font-size: .66rem; font-weight: 800; white-space: nowrap;
}
.blc-s-ok      { background: #dcfce7; color: #16a34a; }
.blc-s-broken  { background: #fee2e2; color: #dc2626; }
.blc-s-redirect{ background: #fef9c3; color: #854d0e; }
.blc-s-timeout { background: #f1f5f9; color: #64748b; }
.blc-s-warning { background: #fef3c7; color: #92400e; }

/* URL cell */
.blc-url-cell { max-width: 260px; }
.blc-url-cell a {
  color: var(--blue); text-decoration: none; font-size: .78rem;
  font-weight: 500; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blc-url-cell a:hover { text-decoration: underline; }
.blc-source-cell {
  font-size: .72rem; color: var(--muted); max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blc-anchor-cell {
  font-size: .74rem; color: var(--slate); font-style: italic;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blc-code-cell { font-family: 'Courier New', monospace; font-size: .78rem; font-weight: 700; }
.blc-time-cell { font-size: .74rem; color: var(--muted); white-space: nowrap; }

/* Copy link button */
.blc-copy-btn {
  background: none; border: 1.5px solid var(--border);
  border-radius: 6px; padding: .2rem .5rem;
  font-size: .65rem; font-weight: 700; cursor: pointer;
  color: var(--muted); transition: all .15s;
}
.blc-copy-btn:hover { background: var(--gold); border-color: var(--gold); color: white; }

/* ── Action bar ── */
.blc-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
  margin-top: 16px;
}
.blc-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.blc-action-info b { color: var(--ink); }
.blc-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-blc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-blc-gold    { background: var(--gold);  color: white; }
.btn-blc-gold:hover    { background: #b8862e; }
.btn-blc-dark    { background: var(--ink);   color: white; }
.btn-blc-dark:hover    { background: #2a2a3e; }
.btn-blc-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-blc-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Responsive ── */
@media(max-width: 768px) {
  .blc-url-row    { flex-direction: column; }
  .btn-blc-run    { width: 100%; justify-content: center; }
  .blc-options-row { gap: .75rem; }
  .blc-filter-bar { padding: .85rem 1rem; }
  .blc-action-bar { flex-direction: column; align-items: flex-start; }
  .blc-action-btns { width: 100%; }
  .btn-blc        { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   DA PA CHECKER  |  da-pa-checker.html
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.dpc-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── Input panel ── */
.dpc-input-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.dpc-input-head {
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.dpc-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.dpc-input-head i  { color: var(--gold); }
.dpc-input-body { padding: 1.4rem 1.6rem; }

.dpc-textarea {
  width: 100%; min-height: 130px;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; line-height: 1.85;
  padding: .8rem 1rem;
  outline: none; resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.dpc-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,150,62,.1);
  background: var(--white);
}
.dpc-textarea::placeholder { color: var(--muted); }

.dpc-input-foot {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; margin-top: 1rem;
}
.dpc-url-count {
  font-size: .74rem; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.dpc-url-count b { color: var(--gold); }

.dpc-input-actions { display: flex; gap: 8px; }

.btn-dpc-run {
  background: var(--ink); color: var(--white);
  border: none; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700;
  padding: .65rem 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; white-space: nowrap;
}
.btn-dpc-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-dpc-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-dpc-clear {
  background: var(--white); color: var(--slate);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 600;
  padding: .65rem 1rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-dpc-clear:hover { border-color: var(--gold); color: var(--gold); }

/* Quick-add chips */
.dpc-examples {
  margin-top: .85rem;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dpc-examples-label { font-size: .7rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dpc-chip {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 20px; color: var(--slate);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .7rem; cursor: pointer; transition: all .15s;
}
.dpc-chip:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }

/* ── Progress ── */
.dpc-progress {
  display: none;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.6rem 1.8rem;
}
.dpc-progress.active { display: block; }
.dpc-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem;
}
.dpc-progress-pct { color: var(--gold); font-weight: 800; }
.dpc-progress-bar {
  height: 6px; background: var(--border);
  border-radius: 4px; overflow: hidden; margin-bottom: 1.1rem;
}
.dpc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8b84b);
  border-radius: 4px; transition: width .3s ease;
}
.dpc-checking-list { display: flex; flex-direction: column; gap: 6px; }
.dpc-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: .5rem .9rem;
  background: var(--cream); border-radius: 8px;
  border: 1px solid var(--border); font-size: .78rem;
}
.dpc-check-row i { width: 16px; text-align: center; }
.dpc-check-row .dpc-cr-url { flex: 1; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpc-check-row .dpc-cr-status { font-size: .7rem; font-weight: 700; color: var(--muted); }
.dpc-check-row.done  i { color: #22c55e; }
.dpc-check-row.done  .dpc-cr-status { color: #16a34a; }
.dpc-check-row.active i { color: var(--gold); animation: dpc-spin .8s linear infinite; }
.dpc-check-row.active .dpc-cr-status { color: var(--gold); }
@keyframes dpc-spin { to { transform: rotate(360deg); } }

/* ── Empty / Error ── */
.dpc-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 3.5rem 2rem; text-align: center;
}
.dpc-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.dpc-empty p { font-size: .88rem; color: var(--muted); }

.dpc-error {
  display: none;
  background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 2.4rem; text-align: center;
}
.dpc-error.active { display: block; }
.dpc-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.dpc-error h4   { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.dpc-error p    { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Results ── */
.dpc-results { display: none; }
.dpc-results.active { display: block; }

/* Summary strip */
.dpc-summary-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s);
  overflow: hidden; margin-bottom: 20px;
}
.dpc-stat {
  padding: 1.2rem 1rem; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.dpc-stat:last-child { border-right: none; }
.dpc-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.dpc-stat-label { font-size: .68rem; font-weight: 600; color: var(--muted); }
@media(max-width: 600px) {
  .dpc-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .dpc-stat:nth-child(2) { border-right: none; }
  .dpc-stat:nth-child(3) { border-top: 1px solid var(--border); }
}

/* ── Score cards grid ── */
.dpc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 20px;
}

.dpc-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.dpc-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.dpc-card-head {
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dpc-card-domain {
  font-size: .84rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.dpc-card-domain i { color: var(--gold); font-size: .75rem; flex-shrink: 0; }
.dpc-card-favicon {
  width: 16px; height: 16px; border-radius: 3px;
  object-fit: contain; flex-shrink: 0;
}

/* Health pill */
.dpc-health {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .22rem .65rem; border-radius: 20px;
  font-size: .65rem; font-weight: 800; flex-shrink: 0;
}
.dpc-h-excellent { background: #dcfce7; color: #15803d; }
.dpc-h-good      { background: #d1fae5; color: #059669; }
.dpc-h-average   { background: #fef9c3; color: #854d0e; }
.dpc-h-low       { background: #fee2e2; color: #dc2626; }

/* Metrics row inside card */
.dpc-card-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.dpc-metric {
  padding: 1rem .8rem; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center;
}
.dpc-metric:last-child { border-right: none; }
.dpc-metric-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.dpc-metric-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem; font-weight: 800; line-height: 1;
}
.dpc-metric-sub { font-size: .62rem; color: var(--muted); }

/* Gauge bar under score */
.dpc-score-bar-wrap { padding: 0 .8rem .2rem; margin-top: 2px; width: 100%; }
.dpc-score-bar-track {
  height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.dpc-score-bar-fill {
  height: 100%; border-radius: 2px; transition: width 1s ease .2s;
}
.dpc-bar-excellent { background: #22c55e; }
.dpc-bar-good      { background: #86efac; }
.dpc-bar-average   { background: #fbbf24; }
.dpc-bar-low       { background: #ef4444; }

/* Extra stats row */
.dpc-card-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: .85rem 1.1rem; gap: .5rem;
}
.dpc-card-stat {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; color: var(--slate);
}
.dpc-card-stat i { color: var(--gold); font-size: .7rem; width: 13px; text-align: center; }
.dpc-card-stat b { color: var(--ink); }

/* Spam score indicator */
.dpc-spam {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
  font-size: .72rem;
}
.dpc-spam-label { color: var(--muted); font-weight: 600; }
.dpc-spam-bar-wrap { flex: 1; margin: 0 10px; }
.dpc-spam-track {
  height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden;
}
.dpc-spam-fill {
  height: 100%; border-radius: 2px; transition: width 1s ease .4s;
}
.dpc-spam-low  .dpc-spam-fill { background: #22c55e; }
.dpc-spam-med  .dpc-spam-fill { background: #f59e0b; }
.dpc-spam-high .dpc-spam-fill { background: #ef4444; }
.dpc-spam-val  { font-weight: 800; white-space: nowrap; }
.dpc-spam-low  .dpc-spam-val { color: #16a34a; }
.dpc-spam-med  .dpc-spam-val { color: #854d0e; }
.dpc-spam-high .dpc-spam-val { color: #dc2626; }

/* ── Comparison table ── */
.dpc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-s);
  margin-bottom: 20px;
}
.dpc-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dpc-table thead tr { background: var(--cream); }
.dpc-table th {
  padding: .7rem 1rem; text-align: left;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.dpc-table th:hover { color: var(--ink); }
.dpc-table th i { margin-left: 3px; font-size: .58rem; opacity: .5; }
.dpc-table td {
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--slate);
}
.dpc-table tbody tr:last-child td { border-bottom: none; }
.dpc-table tbody tr:hover { background: var(--gold-bg); }

/* Score cell */
.dpc-score-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: 'Playfair Display', serif;
  font-size: .92rem; font-weight: 800;
}
.dpc-pill-excellent { background: #dcfce7; color: #15803d; }
.dpc-pill-good      { background: #d1fae5; color: #059669; }
.dpc-pill-average   { background: #fef9c3; color: #854d0e; }
.dpc-pill-low       { background: #fee2e2; color: #dc2626; }

.dpc-domain-cell {
  font-weight: 700; color: var(--ink); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dpc-domain-cell a { color: inherit; text-decoration: none; }
.dpc-domain-cell a:hover { color: var(--gold); }
.dpc-num-cell { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }

/* ── Action bar ── */
.dpc-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
}
.dpc-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.dpc-action-info b { color: var(--ink); }
.dpc-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-dpc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-dpc-gold    { background: var(--gold);  color: white; }
.btn-dpc-gold:hover    { background: #b8862e; }
.btn-dpc-dark    { background: var(--ink);   color: white; }
.btn-dpc-dark:hover    { background: #2a2a3e; }
.btn-dpc-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-dpc-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── View toggle (Cards / Table) ── */
.dpc-view-toggle {
  display: flex; gap: 4px;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; padding: 3px; margin-bottom: 16px; width: fit-content;
}
.dpc-view-btn {
  background: none; border: none; border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 700; color: var(--muted);
  padding: .38rem .9rem; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: 6px;
}
.dpc-view-btn.active { background: var(--ink); color: var(--white); }
.dpc-view-btn:not(.active):hover { color: var(--ink); }

/* ── Responsive ── */
@media(max-width: 768px) {
  .dpc-input-foot  { flex-direction: column; align-items: flex-start; }
  .dpc-input-actions { width: 100%; }
  .btn-dpc-run, .btn-dpc-clear { flex: 1; justify-content: center; }
  .dpc-cards-grid  { grid-template-columns: 1fr; }
  .dpc-action-bar  { flex-direction: column; align-items: flex-start; }
  .dpc-action-btns { width: 100%; }
  .btn-dpc         { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   SEO ANALYZER  |  seo-analyzer.html
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.sea-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── Input panel ── */
.sea-input-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.sea-input-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.sea-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.sea-input-head i  { color: var(--gold); }
.sea-input-body    { padding: 1.4rem 1.6rem; }

.sea-url-row {
  display: flex; gap: 10px; align-items: stretch; margin-bottom: 1rem;
}
.sea-url-row input[type="url"] {
  flex: 1; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .85rem;
  padding: .65rem 1rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.sea-url-row input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); background: var(--white);
}
.sea-url-row input::placeholder { color: var(--muted); }

.btn-sea-run {
  background: var(--ink); color: var(--white); border: none;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700; padding: .65rem 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: all .2s; white-space: nowrap;
}
.btn-sea-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-sea-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.sea-kw-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sea-kw-row label { font-size: .76rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.sea-kw-input {
  flex: 1; min-width: 180px; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .83rem;
  padding: .55rem .9rem; outline: none; transition: border-color .2s;
}
.sea-kw-input:focus { border-color: var(--gold); background: var(--white); }
.sea-kw-input::placeholder { color: var(--muted); }
.sea-kw-hint { font-size: .72rem; color: var(--muted); }

/* ── Progress ── */
.sea-progress {
  display: none; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 1.6rem 1.8rem;
}
.sea-progress.active { display: block; }
.sea-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem;
}
.sea-progress-pct { color: var(--gold); font-weight: 800; }
.sea-progress-bar {
  height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 1rem;
}
.sea-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8b84b);
  border-radius: 4px; transition: width .35s ease;
}
.sea-audit-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.sea-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: .7rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cream); font-size: .7rem; font-weight: 600;
  color: var(--muted); text-align: center; transition: all .3s;
}
.sea-step i { font-size: 1rem; color: var(--border); transition: color .3s; }
.sea-step.done   { color: var(--ink); border-color: var(--gold-lt); background: var(--gold-bg); }
.sea-step.done i { color: var(--gold); }
.sea-step.active { color: var(--gold); border-color: var(--gold); background: var(--gold-bg); animation: sea-pulse .8s ease-in-out infinite; }
.sea-step.active i { color: var(--gold); }
@keyframes sea-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,150,62,.3); } 50% { box-shadow: 0 0 0 6px rgba(200,150,62,0); } }

/* ── Empty / Error ── */
.sea-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 3.5rem 2rem; text-align: center;
}
.sea-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.sea-empty p { font-size: .88rem; color: var(--muted); }

.sea-error {
  display: none; background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 2.4rem; text-align: center;
}
.sea-error.active { display: block; }
.sea-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.sea-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.sea-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Results ── */
.sea-results { display: none; }
.sea-results.active { display: block; }

/* Result bar */
.sea-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.4rem; box-shadow: var(--shadow-s); margin-bottom: 20px;
}
.sea-result-url {
  display: flex; align-items: center; gap: 8px; font-size: .82rem;
  color: var(--slate); font-weight: 500; min-width: 0;
}
.sea-result-url i { color: var(--gold); flex-shrink: 0; }
.sea-result-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sea-result-kw {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-bg); border: 1px solid var(--gold-lt);
  color: var(--gold); font-size: .7rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 20px; flex-shrink: 0;
}
.btn-sea-rerun {
  background: none; border: 1.5px solid var(--border); border-radius: 8px; color: var(--slate);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .74rem; font-weight: 700;
  padding: .3rem .8rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-sea-rerun:hover { border-color: var(--gold); color: var(--gold); }

/* ── Top row: score card + overview ── */
.sea-top-grid {
  display: grid; grid-template-columns: 260px 1fr; gap: 20px;
  margin-bottom: 20px; align-items: start;
}
@media(max-width: 880px) { .sea-top-grid { grid-template-columns: 1fr; } }

/* Score card */
.sea-score-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.6rem; text-align: center;
}
.sea-score-card h4 {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 1.1rem;
}
.sea-gauge-wrap { position: relative; display: inline-block; margin-bottom: .9rem; }
.sea-gauge { transform: rotate(-90deg); display: block; }
.sea-gauge-bg  { fill: none; stroke: var(--border); stroke-width: 10; }
.sea-gauge-arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1), stroke .4s; }
.sea-gauge-num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sea-gauge-score {
  font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 800;
  line-height: 1; color: var(--ink);
}
.sea-gauge-label { font-size: .7rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.sea-score-grade {
  display: inline-block; padding: .28rem .9rem; border-radius: 20px;
  font-size: .76rem; font-weight: 800; letter-spacing: .03em; margin-bottom: .9rem;
}
.sea-grade-excellent { background: #dcfce7; color: #16a34a; }
.sea-grade-good      { background: #d1fae5; color: #059669; }
.sea-grade-average   { background: #fef9c3; color: #854d0e; }
.sea-grade-poor      { background: #fee2e2; color: #dc2626; }
.sea-score-desc { font-size: .76rem; color: var(--slate); line-height: 1.65; }

/* Category overview mini bars */
.sea-overview-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.sea-overview-head {
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
}
.sea-overview-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.sea-overview-list { padding: .5rem 0; }
.sea-ov-row {
  display: flex; align-items: center; gap: 12px;
  padding: .6rem 1.4rem; border-bottom: 1px solid var(--border); transition: background .15s;
}
.sea-ov-row:last-child { border-bottom: none; }
.sea-ov-row:hover { background: var(--cream); }
.sea-ov-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0;
}
.sea-ov-icon.pass { background: #dcfce7; color: #16a34a; }
.sea-ov-icon.warn { background: #fef9c3; color: #854d0e; }
.sea-ov-icon.fail { background: #fee2e2; color: #dc2626; }
.sea-ov-label { flex: 1; font-size: .82rem; font-weight: 600; color: var(--ink); }
.sea-ov-bar-wrap { width: 100px; }
.sea-ov-track {
  height: 5px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.sea-ov-fill { height: 100%; border-radius: 3px; transition: width 1s ease .2s; }
.sea-ov-fill.pass { background: #22c55e; }
.sea-ov-fill.warn { background: #f59e0b; }
.sea-ov-fill.fail { background: #ef4444; }
.sea-ov-score { font-size: .74rem; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* ── Summary strip ── */
.sea-summary-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.sea-stat {
  padding: 1.1rem 1rem; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.sea-stat:last-child { border-right: none; }
.sea-stat-num {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.sea-stat-num.pass { color: #16a34a; }
.sea-stat-num.warn { color: #854d0e; }
.sea-stat-num.fail { color: #dc2626; }
.sea-stat-num.ink  { color: var(--ink); }
.sea-stat-label { font-size: .68rem; font-weight: 600; color: var(--muted); }
@media(max-width: 600px) {
  .sea-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .sea-stat:nth-child(2) { border-right: none; }
  .sea-stat:nth-child(3) { border-top: 1px solid var(--border); }
}

/* ── Audit category accordion ── */
.sea-category {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  overflow: hidden; margin-bottom: 16px;
}
.sea-cat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 1rem 1.4rem; background: var(--cream);
  cursor: pointer; user-select: none; transition: background .15s;
  border-bottom: 1px solid transparent;
}
.sea-cat-head:hover { background: var(--gold-bg); }
.sea-cat-head.open  { border-bottom-color: var(--border); }
.sea-cat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.sea-cat-icon.pass { background: #dcfce7; color: #16a34a; }
.sea-cat-icon.warn { background: #fef9c3; color: #854d0e; }
.sea-cat-icon.fail { background: #fee2e2; color: #dc2626; }
.sea-cat-title { flex: 1; }
.sea-cat-title h4 { font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.sea-cat-title p  { font-size: .72rem; color: var(--muted); }
.sea-cat-pills { display: flex; gap: 5px; flex-shrink: 0; }
.sea-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: .18rem .55rem; border-radius: 10px; font-size: .62rem; font-weight: 800;
}
.sea-pill.pass { background: #dcfce7; color: #16a34a; }
.sea-pill.warn { background: #fef9c3; color: #854d0e; }
.sea-pill.fail { background: #fee2e2; color: #dc2626; }
.sea-cat-chevron { color: var(--muted); font-size: .78rem; transition: transform .25s; flex-shrink: 0; }
.sea-cat-head.open .sea-cat-chevron { transform: rotate(180deg); }

.sea-cat-body { display: none; }
.sea-cat-body.open { display: block; }

/* Audit item */
.sea-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: .9rem 1.4rem; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.sea-item:last-child { border-bottom: none; }
.sea-item:hover { background: var(--cream); }

.sea-item-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0; margin-top: 1px;
}
.sea-item-icon.pass { background: #dcfce7; color: #16a34a; }
.sea-item-icon.warn { background: #fef9c3; color: #854d0e; }
.sea-item-icon.fail { background: #fee2e2; color: #dc2626; }
.sea-item-icon.info { background: #e0f2fe; color: #0369a1; }

.sea-item-body { flex: 1; min-width: 0; }
.sea-item-title { font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.sea-item-value {
  font-size: .78rem; color: var(--slate); line-height: 1.6; margin-bottom: 3px;
}
.sea-item-value code {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 5px; padding: .1rem .4rem;
  font-family: 'Courier New', monospace; font-size: .76rem; color: var(--ink);
}
.sea-item-tip { font-size: .72rem; color: var(--muted); line-height: 1.55; font-style: italic; }
.sea-item-status {
  flex-shrink: 0; font-size: .65rem; font-weight: 800;
  padding: .2rem .55rem; border-radius: 8px; align-self: flex-start; margin-top: 3px;
}
.sea-item-status.pass { background: #dcfce7; color: #16a34a; }
.sea-item-status.warn { background: #fef9c3; color: #854d0e; }
.sea-item-status.fail { background: #fee2e2; color: #dc2626; }
.sea-item-status.info { background: #e0f2fe; color: #0369a1; }

/* ── Action bar ── */
.sea-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem; margin-top: 4px;
}
.sea-action-info { font-size: .8rem; color: var(--slate); font-weight: 600; }
.sea-action-info b { color: var(--ink); }
.sea-action-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-sea {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-sea-gold    { background: var(--gold);  color: white; }
.btn-sea-gold:hover    { background: #b8862e; }
.btn-sea-dark    { background: var(--ink);   color: white; }
.btn-sea-dark:hover    { background: #2a2a3e; }
.btn-sea-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-sea-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Responsive ── */
@media(max-width: 768px) {
  .sea-url-row      { flex-direction: column; }
  .btn-sea-run      { width: 100%; justify-content: center; }
  .sea-audit-steps  { grid-template-columns: repeat(2, 1fr); }
  .sea-action-bar   { flex-direction: column; align-items: flex-start; }
  .sea-action-btns  { width: 100%; }
  .btn-sea          { flex: 1; justify-content: center; }
  .sea-ov-bar-wrap  { display: none; }
  .sea-cat-pills    { display: none; }
}

/* ════════════════════════════════════════════════════════════
   COMPETITOR ANALYZER  |  competitor-analyzer.html
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.ca-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── Input panel ── */
.ca-input-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.ca-input-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.ca-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.ca-input-head i  { color: var(--gold); }
.ca-input-body    { padding: 1.5rem 1.6rem; }

/* Domain input grid */
.ca-domains-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 1.2rem;
}
@media(max-width: 640px) { .ca-domains-grid { grid-template-columns: 1fr; } }

.ca-domain-field { display: flex; flex-direction: column; gap: 6px; }
.ca-domain-label {
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  display: flex; align-items: center; gap: 6px;
}
.ca-domain-label .ca-you   { color: var(--gold); }
.ca-domain-label .ca-comp  { color: var(--slate); }

.ca-domain-input-wrap { display: flex; gap: 8px; align-items: center; }
.ca-domain-input {
  flex: 1; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem;
  padding: .6rem .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ca-domain-input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); background: var(--white);
}
.ca-domain-input::placeholder { color: var(--muted); }
.ca-domain-input.ca-yours { border-color: var(--gold-lt); background: var(--gold-bg); }
.ca-domain-input.ca-yours:focus { border-color: var(--gold); background: var(--white); }

/* Add/remove competitor button */
.ca-add-comp {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1.5px dashed var(--border);
  border-radius: 9px; color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  padding: .6rem 1rem; cursor: pointer;
  transition: all .18s; width: 100%; justify-content: center;
  margin-bottom: 1rem;
}
.ca-add-comp:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }

.ca-input-foot {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}

.btn-ca-run {
  background: var(--ink); color: var(--white); border: none;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700; padding: .65rem 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s; white-space: nowrap;
}
.btn-ca-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-ca-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ca-clear {
  background: var(--white); color: var(--slate); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 600; padding: .65rem 1rem; cursor: pointer;
  transition: all .2s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-ca-clear:hover { border-color: var(--gold); color: var(--gold); }

/* ── Progress ── */
.ca-progress {
  display: none; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 1.6rem 1.8rem;
}
.ca-progress.active { display: block; }
.ca-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem;
}
.ca-progress-pct { color: var(--gold); font-weight: 800; }
.ca-progress-bar {
  height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 1rem;
}
.ca-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #e8b84b);
  border-radius: 4px; transition: width .35s ease;
}
.ca-domain-rows { display: flex; flex-direction: column; gap: 8px; }
.ca-prog-row {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .9rem; background: var(--cream);
  border: 1px solid var(--border); border-radius: 8px; font-size: .78rem;
}
.ca-prog-row i { width: 16px; text-align: center; flex-shrink: 0; }
.ca-prog-row .ca-pr-domain { flex: 1; color: var(--slate); font-weight: 600; }
.ca-prog-row .ca-pr-status { font-size: .7rem; font-weight: 700; color: var(--muted); }
.ca-prog-row.done  i { color: #22c55e; }
.ca-prog-row.done  .ca-pr-status { color: #16a34a; }
.ca-prog-row.active i { color: var(--gold); animation: ca-spin .8s linear infinite; }
.ca-prog-row.active .ca-pr-status { color: var(--gold); }
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* ── Empty / Error ── */
.ca-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 3.5rem 2rem; text-align: center;
}
.ca-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.ca-empty p { font-size: .88rem; color: var(--muted); }

.ca-error {
  display: none; background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 2.4rem; text-align: center;
}
.ca-error.active { display: block; }
.ca-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.ca-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.ca-error p  { font-size: .82rem; color: var(--slate); line-height: 1.65; max-width: 440px; margin: 0 auto 1.2rem; }

/* ── Results ── */
.ca-results { display: none; }
.ca-results.active { display: block; }

/* Result bar */
.ca-result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1rem 1.4rem; box-shadow: var(--shadow-s); margin-bottom: 20px;
}
.ca-result-info { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--slate); font-weight: 500; }
.ca-result-info i { color: var(--gold); }
.btn-ca-rerun {
  background: none; border: 1.5px solid var(--border); border-radius: 8px; color: var(--slate);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .74rem; font-weight: 700;
  padding: .3rem .8rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.btn-ca-rerun:hover { border-color: var(--gold); color: var(--gold); }

/* ── Winner banner ── */
.ca-winner-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--ink) 0%, #2a2a4e 100%);
  border-radius: var(--radius-lg); padding: 1.3rem 1.6rem;
  margin-bottom: 20px; box-shadow: var(--shadow-m);
}
.ca-winner-trophy { font-size: 2rem; flex-shrink: 0; }
.ca-winner-text h4 { font-size: .92rem; font-weight: 800; color: var(--white); margin-bottom: 2px; }
.ca-winner-text p  { font-size: .78rem; color: rgba(255,255,255,.65); }
.ca-winner-domain  {
  margin-left: auto; background: var(--gold); color: var(--ink);
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 800;
  padding: .5rem 1.2rem; border-radius: var(--radius); flex-shrink: 0;
}

/* ── Summary strip ── */
.ca-summary-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.ca-stat { padding: 1.1rem .9rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.ca-stat:last-child { border-right: none; }
.ca-stat-num { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.ca-stat-label { font-size: .65rem; font-weight: 600; color: var(--muted); }
@media(max-width: 680px) {
  .ca-summary-strip { grid-template-columns: repeat(3, 1fr); }
  .ca-stat:nth-child(3) { border-right: none; }
  .ca-stat:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* ── Domain comparison cards ── */
.ca-cards-row {
  display: grid; gap: 16px; margin-bottom: 20px;
}
.ca-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
  position: relative;
}
.ca-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.ca-card.ca-yours-card { border-color: var(--gold-lt); }

/* You badge */
.ca-you-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--gold); color: var(--ink);
  font-size: .6rem; font-weight: 800; letter-spacing: .06em;
  padding: .15rem .55rem; border-radius: 20px; text-transform: uppercase;
}

.ca-card-head {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.ca-card-domain-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; flex-shrink: 0; color: var(--white);
}
.ca-card-title { flex: 1; min-width: 0; }
.ca-card-domain { font-size: .9rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-card-rank-change { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.ca-rank-up   { color: #16a34a; font-weight: 700; }
.ca-rank-down { color: #dc2626; font-weight: 700; }

/* Metric rows */
.ca-card-metrics { padding: .5rem 0; }
.ca-metric-row {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem 1.2rem; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.ca-metric-row:last-child { border-bottom: none; }
.ca-metric-row:hover { background: var(--cream); }
.ca-metric-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; }
.ca-metric-label { flex: 1; font-size: .78rem; color: var(--slate); }
.ca-metric-value { font-size: .88rem; font-weight: 800; color: var(--ink); }
.ca-metric-bar-wrap { width: 70px; flex-shrink: 0; }
.ca-metric-bar-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.ca-metric-bar-fill  { height: 100%; border-radius: 2px; transition: width 1s ease .3s; }

/* Top keywords chips */
.ca-keywords-wrap { padding: .8rem 1.2rem; border-top: 1px solid var(--border); }
.ca-keywords-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.ca-kw-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ca-kw-chip {
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 20px; font-size: .68rem; font-weight: 700; color: var(--slate);
  padding: .15rem .6rem; display: inline-flex; align-items: center; gap: 4px;
}
.ca-kw-chip .ca-kw-pos { color: var(--gold); font-weight: 800; }

/* ── Head-to-head comparison table ── */
.ca-h2h-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.ca-h2h-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream);
}
.ca-h2h-head h4 { font-size: .9rem; font-weight: 700; color: var(--ink); }

.ca-h2h-table { width: 100%; border-collapse: collapse; }
.ca-h2h-table th {
  padding: .65rem 1rem; background: var(--ink); color: var(--white);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  text-align: center; border-right: 1px solid rgba(255,255,255,.1);
}
.ca-h2h-table th:first-child { text-align: left; }
.ca-h2h-table th:last-child  { border-right: none; }
.ca-h2h-table td {
  padding: .65rem 1rem; border-bottom: 1px solid var(--border);
  font-size: .8rem; text-align: center; color: var(--slate);
  border-right: 1px solid var(--border);
}
.ca-h2h-table td:first-child { text-align: left; font-weight: 700; color: var(--ink); border-right: 2px solid var(--border); background: var(--cream); }
.ca-h2h-table td:last-child  { border-right: none; }
.ca-h2h-table tbody tr:last-child td { border-bottom: none; }
.ca-h2h-table tbody tr:hover td { background: var(--gold-bg); }
.ca-h2h-table tbody tr:hover td:first-child { background: var(--gold-bg); }
.ca-h2h-best { font-weight: 800; color: #16a34a; }
.ca-h2h-worst { color: #dc2626; }

/* ── Keyword gap table ── */
.ca-gap-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.ca-gap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream);
  flex-wrap: wrap; gap: .5rem;
}
.ca-gap-head h4 { font-size: .9rem; font-weight: 700; color: var(--ink); }
.ca-gap-filter { display: flex; gap: 5px; }
.ca-gap-tab {
  background: none; border: 1.5px solid var(--border); border-radius: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700;
  color: var(--muted); padding: .28rem .7rem; cursor: pointer; transition: all .15s;
}
.ca-gap-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ca-gap-tab:hover:not(.active) { border-color: var(--gold); color: var(--gold); }

.ca-gap-table { width: 100%; border-collapse: collapse; }
.ca-gap-table th {
  padding: .6rem .9rem; background: var(--cream); text-align: left;
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.ca-gap-table td {
  padding: .6rem .9rem; border-bottom: 1px solid var(--border);
  font-size: .78rem; color: var(--slate);
}
.ca-gap-table tbody tr:last-child td { border-bottom: none; }
.ca-gap-table tbody tr:hover td { background: var(--gold-bg); }
.ca-gap-kw   { font-weight: 700; color: var(--ink); }
.ca-gap-vol  { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); }
.ca-gap-pos-you  { font-weight: 800; color: #16a34a; }
.ca-gap-pos-them { font-weight: 800; color: var(--slate); }
.ca-gap-pos-miss { color: #dc2626; font-weight: 700; }
.ca-gap-opp {
  display: inline-flex; align-items: center; gap: 3px;
  padding: .18rem .5rem; border-radius: 8px; font-size: .64rem; font-weight: 800;
}
.ca-opp-high { background: #dcfce7; color: #16a34a; }
.ca-opp-med  { background: #fef9c3; color: #854d0e; }
.ca-opp-low  { background: #f1f5f9; color: #64748b; }

/* ── Action bar ── */
.ca-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
}
.ca-action-info   { font-size: .8rem; color: var(--slate); font-weight: 600; }
.ca-action-info b { color: var(--ink); }
.ca-action-btns   { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-ca {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-ca-gold    { background: var(--gold);  color: white; }
.btn-ca-gold:hover    { background: #b8862e; }
.btn-ca-dark    { background: var(--ink);   color: white; }
.btn-ca-dark:hover    { background: #2a2a3e; }
.btn-ca-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-ca-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Responsive ── */
@media(max-width: 768px) {
  .btn-ca-run, .btn-ca-clear { flex: 1; justify-content: center; }
  .ca-input-foot { flex-direction: column; }
  .ca-input-foot > div { width: 100%; }
  .ca-action-bar  { flex-direction: column; align-items: flex-start; }
  .ca-action-btns { width: 100%; }
  .btn-ca         { flex: 1; justify-content: center; }
  .ca-winner-domain { margin-left: 0; }
  .ca-metric-bar-wrap { display: none; }
}

/* ════════════════════════════════════════════════════════════
   LOCAL SEO TOOLS — shared tokens
════════════════════════════════════════════════════════════ */
.lseo-input-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.lseo-input-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.lseo-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.lseo-input-head i  { color: var(--gold); }
.lseo-input-body    { padding: 1.4rem 1.6rem; }

.lseo-field { margin-bottom: 1rem; }
.lseo-field:last-child { margin-bottom: 0; }
.lseo-field label {
  display: block; font-size: .76rem; font-weight: 700; color: var(--ink); margin-bottom: 5px;
}
.lseo-field label .hint { color: var(--muted); font-weight: 400; font-size: .72rem; }
.lseo-field input[type="text"],
.lseo-field input[type="url"],
.lseo-field input[type="tel"],
.lseo-field input[type="email"],
.lseo-field select,
.lseo-field textarea {
  width: 100%; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem;
  padding: .6rem .9rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.lseo-field textarea { resize: vertical; min-height: 72px; line-height: 1.7; }
.lseo-field input:focus, .lseo-field select:focus, .lseo-field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); background: var(--white);
}
.lseo-field input::placeholder, .lseo-field textarea::placeholder { color: var(--muted); }
.lseo-field .field-note { font-size: .7rem; color: var(--muted); margin-top: 4px; }

.lseo-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width: 640px) { .lseo-fields-grid { grid-template-columns: 1fr; } }

.lseo-btn-row {
  display: flex; gap: 10px; padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--border); background: var(--cream);
}
.btn-lseo-run {
  flex: 1; background: var(--ink); color: var(--white); border: none;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; font-weight: 700; padding: .72rem 1.2rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s;
}
.btn-lseo-run:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.3); }
.btn-lseo-run:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-lseo-reset {
  background: var(--white); color: var(--slate); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .82rem; font-weight: 600; padding: .72rem 1rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-lseo-reset:hover { border-color: var(--gold); color: var(--gold); }

/* Shared progress */
.lseo-progress {
  display: none; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 1.6rem 1.8rem;
}
.lseo-progress.active { display: block; }
.lseo-prog-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem;
}
.lseo-prog-pct  { color: var(--gold); font-weight: 800; }
.lseo-prog-bar  { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.lseo-prog-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), #e8b84b); transition: width .35s ease;
}
.lseo-prog-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.lseo-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: .65rem .4rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cream); font-size: .68rem; font-weight: 600; color: var(--muted); text-align: center; transition: all .3s;
}
.lseo-step i { font-size: .95rem; color: var(--border); transition: color .3s; }
.lseo-step.done   { color: var(--ink); border-color: var(--gold-lt); background: var(--gold-bg); }
.lseo-step.done i { color: var(--gold); }
.lseo-step.active { color: var(--gold); border-color: var(--gold); background: var(--gold-bg); animation: lseo-pulse .8s ease-in-out infinite; }
.lseo-step.active i { color: var(--gold); }
@keyframes lseo-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,150,62,.3)} 50%{box-shadow:0 0 0 6px rgba(200,150,62,0)} }
@media(max-width:640px) { .lseo-prog-steps { grid-template-columns: repeat(2,1fr); } }

/* Shared empty / error */
.lseo-empty {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 3.5rem 2rem; text-align: center;
}
.lseo-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.lseo-empty p    { font-size: .88rem; color: var(--muted); }
.lseo-error {
  display: none; background: var(--white); border: 1px solid #fecaca;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 2.4rem; text-align: center;
}
.lseo-error.active { display: block; }
.lseo-error-icon { font-size: 2.5rem; margin-bottom: .8rem; }
.lseo-error h4 { font-weight: 800; color: var(--ink); margin-bottom: .5rem; }
.lseo-error p  { font-size: .82rem; color: var(--slate); max-width: 440px; margin: 0 auto 1.2rem; line-height: 1.65; }

/* Shared summary strip */
.lseo-summary {
  display: grid; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.lseo-stat { padding: 1.1rem .9rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.lseo-stat:last-child { border-right: none; }
.lseo-stat-num { font-family: 'Playfair Display',serif; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.lseo-stat-num.good { color: #16a34a; } .lseo-stat-num.warn { color: #854d0e; }
.lseo-stat-num.fail { color: #dc2626; } .lseo-stat-num.ink  { color: var(--ink); }
.lseo-stat-label { font-size: .67rem; font-weight: 600; color: var(--muted); }

/* Shared action bar */
.lseo-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
}
.lseo-action-info   { font-size: .8rem; color: var(--slate); font-weight: 600; }
.lseo-action-info b { color: var(--ink); }
.lseo-action-btns   { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-lseo {
  display: inline-flex; align-items: center; gap: 7px; padding: .6rem 1.1rem;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .78rem; font-weight: 700; cursor: pointer; border: none; transition: all .2s;
}
.btn-lseo-gold    { background: var(--gold);  color: white; }
.btn-lseo-gold:hover    { background: #b8862e; }
.btn-lseo-dark    { background: var(--ink);   color: white; }
.btn-lseo-dark:hover    { background: #2a2a3e; }
.btn-lseo-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-lseo-outline:hover { border-color: var(--gold); color: var(--gold); }
@media(max-width:768px) {
  .lseo-action-bar { flex-direction: column; align-items: flex-start; }
  .lseo-action-btns { width: 100%; }
  .btn-lseo { flex: 1; justify-content: center; }
}

/* ── GBP AUDIT specific ── */
.gbp-wrap { display: flex; flex-direction: column; gap: 20px; }
.gbp-results { display: none; }
.gbp-results.active { display: block; }

/* Score card */
.gbp-score-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; margin-bottom: 20px; align-items: start; }
@media(max-width:860px) { .gbp-score-grid { grid-template-columns: 1fr; } }
.gbp-score-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); padding: 1.6rem; text-align: center;
}
.gbp-score-card h4 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1rem; }
.gbp-gauge-wrap { position: relative; display: inline-block; margin-bottom: .8rem; }
.gbp-gauge { transform: rotate(-90deg); display: block; }
.gbp-gauge-bg  { fill: none; stroke: var(--border); stroke-width: 10; }
.gbp-gauge-arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1), stroke .4s; }
.gbp-gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gbp-gauge-score { font-family: 'Playfair Display',serif; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ink); }
.gbp-gauge-lbl   { font-size: .68rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.gbp-grade {
  display: inline-block; padding: .28rem .9rem; border-radius: 20px;
  font-size: .76rem; font-weight: 800; margin-bottom: .8rem;
}
.gbp-grade-exc { background:#dcfce7;color:#16a34a; } .gbp-grade-good { background:#d1fae5;color:#059669; }
.gbp-grade-avg { background:#fef9c3;color:#854d0e; } .gbp-grade-poor { background:#fee2e2;color:#dc2626; }
.gbp-score-desc { font-size: .75rem; color: var(--slate); line-height: 1.65; }

/* Category list (overview panel) */
.gbp-overview-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.gbp-ov-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream); }
.gbp-ov-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.gbp-ov-row {
  display: flex; align-items: center; gap: 12px; padding: .65rem 1.4rem;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s;
}
.gbp-ov-row:last-child { border-bottom: none; }
.gbp-ov-row:hover { background: var(--cream); }
.gbp-ov-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; }
.gbp-ov-icon.pass { background:#dcfce7;color:#16a34a; } .gbp-ov-icon.warn { background:#fef9c3;color:#854d0e; } .gbp-ov-icon.fail { background:#fee2e2;color:#dc2626; }
.gbp-ov-label { flex: 1; font-size: .82rem; font-weight: 600; color: var(--ink); }
.gbp-ov-bar-wrap { width: 90px; }
.gbp-ov-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.gbp-ov-fill { height: 100%; border-radius: 3px; transition: width 1s ease .2s; }
.gbp-ov-fill.pass{background:#22c55e} .gbp-ov-fill.warn{background:#f59e0b} .gbp-ov-fill.fail{background:#ef4444}
.gbp-ov-pct { font-size: .72rem; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Checklist accordion — same as sea-category */
.gbp-category { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 14px; }
.gbp-cat-head {
  display: flex; align-items: center; gap: 12px; padding: 1rem 1.4rem;
  background: var(--cream); cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent; transition: background .15s;
}
.gbp-cat-head:hover { background: var(--gold-bg); }
.gbp-cat-head.open  { border-bottom-color: var(--border); }
.gbp-cat-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .88rem; flex-shrink: 0; }
.gbp-cat-icon.pass{background:#dcfce7;color:#16a34a} .gbp-cat-icon.warn{background:#fef9c3;color:#854d0e} .gbp-cat-icon.fail{background:#fee2e2;color:#dc2626}
.gbp-cat-title h4 { font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.gbp-cat-title p  { font-size: .72rem; color: var(--muted); }
.gbp-cat-title { flex: 1; }
.gbp-cat-chevron { color: var(--muted); font-size: .78rem; transition: transform .25s; flex-shrink: 0; }
.gbp-cat-head.open .gbp-cat-chevron { transform: rotate(180deg); }
.gbp-cat-body { display: none; }
.gbp-cat-body.open { display: block; }
.gbp-item { display: flex; align-items: flex-start; gap: 12px; padding: .9rem 1.4rem; border-bottom: 1px solid var(--border); transition: background .15s; }
.gbp-item:last-child { border-bottom: none; }
.gbp-item:hover { background: var(--cream); }
.gbp-item-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; margin-top: 1px; }
.gbp-item-icon.pass{background:#dcfce7;color:#16a34a} .gbp-item-icon.warn{background:#fef9c3;color:#854d0e} .gbp-item-icon.fail{background:#fee2e2;color:#dc2626} .gbp-item-icon.info{background:#e0f2fe;color:#0369a1}
.gbp-item-body { flex: 1; min-width: 0; }
.gbp-item-title { font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.gbp-item-value { font-size: .78rem; color: var(--slate); line-height: 1.6; margin-bottom: 3px; }
.gbp-item-tip   { font-size: .72rem; color: var(--muted); line-height: 1.55; font-style: italic; }
.gbp-item-badge { flex-shrink: 0; font-size: .65rem; font-weight: 800; padding: .2rem .55rem; border-radius: 8px; align-self: flex-start; margin-top: 3px; }
.gbp-item-badge.pass{background:#dcfce7;color:#16a34a} .gbp-item-badge.warn{background:#fef9c3;color:#854d0e} .gbp-item-badge.fail{background:#fee2e2;color:#dc2626} .gbp-item-badge.info{background:#e0f2fe;color:#0369a1}

/* ── LOCAL CITATION CHECKER specific ── */
.lcc-wrap { display: flex; flex-direction: column; gap: 20px; }
.lcc-results { display: none; }
.lcc-results.active { display: block; }

/* Directory grid */
.lcc-dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px;
}
.lcc-dir-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; transition: transform .2s;
}
.lcc-dir-card:hover { transform: translateY(-2px); }
.lcc-dir-head {
  display: flex; align-items: center; gap: 10px; padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--border); background: var(--cream);
}
.lcc-dir-logo {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: var(--white);
}
.lcc-dir-name  { flex: 1; font-size: .84rem; font-weight: 700; color: var(--ink); }
.lcc-dir-badge { font-size: .65rem; font-weight: 800; padding: .18rem .55rem; border-radius: 8px; flex-shrink: 0; }
.lcc-badge-found   { background:#dcfce7;color:#16a34a; }
.lcc-badge-issues  { background:#fef9c3;color:#854d0e; }
.lcc-badge-missing { background:#fee2e2;color:#dc2626; }

.lcc-dir-body { padding: .75rem 1.1rem; }
.lcc-nap-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: .76rem; }
.lcc-nap-row:last-child { margin-bottom: 0; }
.lcc-nap-row i { width: 14px; flex-shrink: 0; margin-top: 2px; }
.lcc-nap-ok   { color: #16a34a; } .lcc-nap-warn { color: #854d0e; } .lcc-nap-miss { color: #dc2626; }
.lcc-nap-val  { flex: 1; color: var(--slate); }
.lcc-nap-val span.match  { color: var(--ink); font-weight: 600; }
.lcc-nap-val span.diff   { color: #854d0e; font-weight: 600; }
.lcc-nap-val span.absent { color: #dc2626; font-style: italic; }

/* NAP consistency bars */
.lcc-consistency-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.lcc-cons-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream); }
.lcc-cons-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.lcc-cons-row { display: flex; align-items: center; gap: 14px; padding: .85rem 1.4rem; border-bottom: 1px solid var(--border); }
.lcc-cons-row:last-child { border-bottom: none; }
.lcc-cons-label { width: 110px; font-size: .78rem; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.lcc-cons-bar-wrap { flex: 1; }
.lcc-cons-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.lcc-cons-fill  { height: 100%; border-radius: 4px; transition: width 1s ease .2s; }
.lcc-cons-pct   { font-size: .8rem; font-weight: 800; min-width: 40px; text-align: right; }

/* ── LOCAL SCHEMA GENERATOR specific ── */
.lsg-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media(max-width:960px) { .lsg-wrap { grid-template-columns: 1fr; } }

.lsg-section { padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); }
.lsg-section:last-of-type { border-bottom: none; }
.lsg-section-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 1rem;
}
.lsg-section-title::before { content:''; width:14px; height:2px; background:var(--gold); display:block; }

/* Type selector chips */
.lsg-type-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.lsg-type-btn {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 9px;
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: .73rem; font-weight: 700; color: var(--slate);
  padding: .38rem .9rem; cursor: pointer; transition: all .18s;
  display: inline-flex; align-items: center; gap: 5px;
}
.lsg-type-btn:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }
.lsg-type-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Hours grid */
.lsg-hours-grid { display: flex; flex-direction: column; gap: 6px; }
.lsg-hours-row { display: grid; grid-template-columns: 80px 1fr 1fr auto; gap: 8px; align-items: center; font-size: .78rem; }
.lsg-hours-row label { font-size: .76rem; font-weight: 600; color: var(--ink); }
.lsg-hours-row input[type="time"],
.lsg-hours-row select {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: .78rem; color: var(--ink);
  padding: .38rem .6rem; outline: none; width: 100%; transition: border-color .2s;
}
.lsg-hours-row input:focus, .lsg-hours-row select:focus { border-color: var(--gold); }
.lsg-hours-closed { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }

/* Output panel */
.lsg-output-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; position: sticky; top: 90px;
}
.lsg-output-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream);
}
.lsg-output-head h3 { font-size: .9rem; font-weight: 700; color: var(--ink); }
.lsg-output-actions { display: flex; gap: 8px; }
.btn-lsg-copy, .btn-lsg-dl {
  border-radius: 8px; font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .74rem; font-weight: 700; padding: .38rem 1rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-lsg-copy { background: var(--gold-bg); color: var(--gold); border: 1.5px solid var(--gold-lt); }
.btn-lsg-copy:hover { background: var(--gold); color: var(--white); }
.btn-lsg-dl   { background: var(--ink); color: var(--white); border: none; }
.btn-lsg-dl:hover { background: var(--gold); }
.lsg-code-wrap { padding: 1.2rem 1.4rem; }
.lsg-code-box {
  background: var(--ink); border-radius: var(--radius); padding: 1.2rem 1.3rem;
  min-height: 300px; font-family: 'Courier New',monospace; font-size: .74rem; line-height: 1.85;
  color: #c9d0e0; white-space: pre; overflow-x: auto; overflow-y: auto; max-height: 520px;
}
.lsg-code-box .lc  { color: #6b7a99; }
.lsg-code-box .lk  { color: var(--gold); }
.lsg-code-box .lv  { color: #7ec8e3; }
.lsg-code-box .ls  { color: #98d4a3; }

/* Validation */
.lsg-validation { margin: 0 1.4rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lsg-val-row { display: flex; align-items: center; gap: 10px; padding: .5rem .9rem; border-bottom: 1px solid var(--border); font-size: .75rem; }
.lsg-val-row:last-child { border-bottom: none; }
.lsg-val-row i { width: 16px; text-align: center; flex-shrink: 0; }
.lsg-val-ok   { background:#f0fdf4;color:#16a34a; }
.lsg-val-warn { background:#fefce8;color:#854d0e; }
.lsg-val-err  { background:#fef2f2;color:#dc2626; }

/* Toast (shared) */
.lseo-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--white); font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 600; font-size: .83rem; padding: .65rem 1.4rem; border-radius: 50px;
  opacity: 0; transition: all .35s cubic-bezier(.175,.885,.32,1.275); z-index: 9999;
  pointer-events: none; white-space: nowrap; border-left: 3px solid var(--gold);
}
.lseo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media(max-width:768px) { .lseo-toast { bottom: calc(var(--mob-cta-h) + 12px); } }

/* ════════════════════════════════════════════════════════════
   SERP SNIPPET PREVIEW  |  serp-snippet-preview.html
════════════════════════════════════════════════════════════ */
.ssp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media(max-width:960px) { .ssp-wrap { grid-template-columns: 1fr; } }

/* Input panel */
.ssp-input-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.ssp-input-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.ssp-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.ssp-input-head i  { color: var(--gold); }
.ssp-fields        { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }

.ssp-field { display: flex; flex-direction: column; gap: 5px; }
.ssp-field-top { display: flex; align-items: center; justify-content: space-between; }
.ssp-field-label { font-size: .76rem; font-weight: 700; color: var(--ink); }
.ssp-char-counter {
  font-size: .7rem; font-weight: 700; padding: .15rem .55rem;
  border-radius: 20px; transition: all .2s;
}
.ssp-counter-ok   { background: #dcfce7; color: #16a34a; }
.ssp-counter-warn { background: #fef9c3; color: #854d0e; }
.ssp-counter-over { background: #fee2e2; color: #dc2626; }

.ssp-field input, .ssp-field textarea {
  width: 100%; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .84rem; padding: .6rem .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s; resize: none;
}
.ssp-field input:focus, .ssp-field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); background: var(--white);
}
.ssp-field input::placeholder, .ssp-field textarea::placeholder { color: var(--muted); }
.ssp-field-hint { font-size: .7rem; color: var(--muted); }

/* Pixel bar */
.ssp-px-bar-wrap { margin-top: 4px; }
.ssp-px-label { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-bottom: 3px; }
.ssp-px-track { height: 4px; background: var(--border); border-radius: 2px; overflow: visible; position: relative; }
.ssp-px-fill  { height: 100%; border-radius: 2px; transition: width .2s, background .2s; }
.ssp-px-limit { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--gold); border-radius: 1px; }

/* Preview panel */
.ssp-preview-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden; position: sticky; top: 90px;
}
.ssp-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border); background: var(--cream);
}
.ssp-preview-head h3 { font-size: .9rem; font-weight: 700; color: var(--ink); }

/* Device toggle */
.ssp-device-toggle { display: flex; gap: 4px; background: var(--white); border: 1.5px solid var(--border); border-radius: 8px; padding: 3px; }
.ssp-dev-btn {
  background: none; border: none; border-radius: 5px; padding: .3rem .7rem; cursor: pointer;
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 700; color: var(--muted);
  transition: all .18s; display: flex; align-items: center; gap: 5px;
}
.ssp-dev-btn.active { background: var(--ink); color: var(--white); }

/* SERP result mock */
.ssp-result-wrap { padding: 1.5rem; }

/* Desktop mock */
.ssp-desktop-result {
  font-family: arial, sans-serif; max-width: 600px; margin: 0 auto;
}
.ssp-breadcrumb {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.ssp-favicon-mock {
  width: 18px; height: 18px; border-radius: 4px; background: #4285F4;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ssp-favicon-mock span { color: white; font-size: .55rem; font-weight: 800; }
.ssp-url-line { font-size: .8rem; color: #202124; line-height: 1.3; }
.ssp-url-line .ssp-domain { font-weight: 600; }
.ssp-url-line .ssp-path   { color: #202124; }
.ssp-result-title {
  font-size: 1.18rem; color: #1a0dab; line-height: 1.35;
  margin: 2px 0 3px; cursor: pointer; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.ssp-result-title:hover { text-decoration: underline; }
.ssp-result-title.truncated { color: #dc2626; }
.ssp-result-desc {
  font-size: .84rem; color: #4d5156; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ssp-result-desc.truncated { color: #854d0e; }
.ssp-date-snippet { font-size: .82rem; color: #70757a; }
.ssp-date-snippet::after { content: ' — '; }

/* Mobile mock */
.ssp-mobile-wrap { max-width: 360px; margin: 0 auto; }
.ssp-mobile-result { font-family: arial, sans-serif; }
.ssp-mobile-result .ssp-url-line { font-size: .73rem; }
.ssp-mobile-result .ssp-result-title { font-size: 1rem; }
.ssp-mobile-result .ssp-result-desc { font-size: .8rem; -webkit-line-clamp: 3; }

/* Status badges below preview */
.ssp-status-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: .9rem 1.5rem; border-top: 1px solid var(--border); background: var(--cream);
}
.ssp-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .22rem .65rem; border-radius: 20px; font-size: .7rem; font-weight: 700;
}
.ssp-badge-ok   { background: #dcfce7; color: #16a34a; }
.ssp-badge-warn { background: #fef9c3; color: #854d0e; }
.ssp-badge-over { background: #fee2e2; color: #dc2626; }

/* Quick presets */
.ssp-presets { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.ssp-presets-label { font-size: .7rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .07em; }
.ssp-preset-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ssp-preset-btn {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 7px;
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: .7rem; font-weight: 700; color: var(--slate);
  padding: .25rem .7rem; cursor: pointer; transition: all .15s;
}
.ssp-preset-btn:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }

/* ════════════════════════════════════════════════════════════
   UTM PARAMETER BUILDER  |  utm-parameter-builder.html
════════════════════════════════════════════════════════════ */
.utm-wrap { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
@media(max-width:960px) { .utm-wrap { grid-template-columns: 1fr; } }

.utm-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.utm-panel-head {
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; gap: 10px;
}
.utm-panel-head h3 { font-size: .9rem; font-weight: 700; color: var(--ink); }
.utm-panel-head i  { color: var(--gold); }
.utm-panel-body    { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

.utm-field { display: flex; flex-direction: column; gap: 5px; }
.utm-field label { font-size: .76rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.utm-field label .req { color: var(--gold); font-size: .65rem; }
.utm-field label .opt { color: var(--muted); font-weight: 400; font-size: .7rem; }
.utm-field input {
  width: 100%; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 9px; color: var(--ink); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .84rem; padding: .6rem .9rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.utm-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); background: var(--white); }
.utm-field input::placeholder { color: var(--muted); }
.utm-field-hint { font-size: .7rem; color: var(--muted); }

/* Preset strips */
.utm-presets-strip {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: .85rem 1.5rem; border-top: 1px solid var(--border); background: var(--cream);
}
.utm-presets-label { font-size: .7rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.utm-preset-chip {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 20px;
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: .7rem; font-weight: 700; color: var(--slate);
  padding: .2rem .7rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 5px;
}
.utm-preset-chip:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }

/* Right panel */
.utm-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }

/* Output card */
.utm-output-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.utm-output-head {
  padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); background: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
}
.utm-output-head h4 { font-size: .86rem; font-weight: 700; color: var(--ink); }
.utm-output-body { padding: 1.2rem 1.3rem; }
.utm-url-box {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 9px;
  padding: .75rem 1rem; font-family: 'Courier New',monospace; font-size: .73rem;
  color: var(--ink); line-height: 1.75; word-break: break-all; min-height: 60px;
  margin-bottom: .9rem;
}
.utm-url-box .utm-base   { color: var(--ink); }
.utm-url-box .utm-q      { color: var(--muted); }
.utm-url-box .utm-key    { color: var(--gold); font-weight: 700; }
.utm-url-box .utm-val    { color: #3b82f6; }
.utm-url-box .utm-amp    { color: var(--muted); }
.utm-copy-btn {
  width: 100%; background: var(--ink); color: var(--white); border: none;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .82rem; font-weight: 700; padding: .65rem 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s;
}
.utm-copy-btn:hover { background: var(--gold); }

/* History card */
.utm-history-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.utm-history-head {
  padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); background: var(--cream);
  display: flex; align-items: center; justify-content: space-between;
}
.utm-history-head h4 { font-size: .86rem; font-weight: 700; color: var(--ink); }
.utm-clear-history {
  background: none; border: none; color: var(--muted); font-size: .72rem; font-weight: 700;
  cursor: pointer; transition: color .15s; font-family: 'Plus Jakarta Sans',sans-serif;
}
.utm-clear-history:hover { color: #dc2626; }
.utm-history-list { max-height: 260px; overflow-y: auto; }
.utm-history-item {
  display: flex; align-items: flex-start; gap: 10px; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s;
}
.utm-history-item:last-child { border-bottom: none; }
.utm-history-item:hover { background: var(--gold-bg); }
.utm-history-url { flex: 1; font-size: .72rem; color: var(--slate); word-break: break-all; line-height: 1.5; }
.utm-history-url b { color: var(--ink); }
.utm-history-copy { flex-shrink: 0; background: var(--cream); border: 1.5px solid var(--border); border-radius: 6px; color: var(--muted); font-size: .68rem; font-weight: 700; padding: .18rem .5rem; cursor: pointer; transition: all .15s; }
.utm-history-copy:hover { border-color: var(--gold); color: var(--gold); }
.utm-history-empty { padding: 2rem; text-align: center; font-size: .8rem; color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   READABILITY CHECKER  |  readability-checker.html
════════════════════════════════════════════════════════════ */
.rdc-wrap  { display: flex; flex-direction: column; gap: 20px; }
.rdc-input-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.rdc-input-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--border);
  background: var(--cream); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.rdc-input-head-left { display: flex; align-items: center; gap: 10px; }
.rdc-input-head h3 { font-size: .92rem; font-weight: 700; color: var(--ink); }
.rdc-input-head i  { color: var(--gold); }
.rdc-live-badge {
  background: #dcfce7; color: #16a34a; font-size: .65rem; font-weight: 800;
  padding: .15rem .55rem; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px;
}
.rdc-live-dot { width: 6px; height: 6px; background: #16a34a; border-radius: 50%; animation: rdc-blink 1.4s ease-in-out infinite; }
@keyframes rdc-blink { 0%,100%{opacity:1}50%{opacity:.3} }

.rdc-textarea-wrap { position: relative; }
.rdc-textarea {
  width: 100%; min-height: 200px; background: var(--cream); border: none;
  color: var(--ink); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .87rem; line-height: 1.85; padding: 1.3rem 1.5rem;
  outline: none; resize: vertical;
}
.rdc-textarea:focus { background: var(--white); }
.rdc-textarea::placeholder { color: var(--muted); }
.rdc-word-count {
  position: absolute; bottom: 10px; right: 14px;
  font-size: .68rem; font-weight: 700; color: var(--muted); pointer-events: none;
}

.rdc-btn-row {
  display: flex; gap: 10px; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--cream);
}
.btn-rdc-check {
  flex: 1; background: var(--ink); color: var(--white); border: none;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .84rem; font-weight: 700; padding: .7rem 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s;
}
.btn-rdc-check:hover { background: var(--gold); }
.btn-rdc-clear {
  background: var(--white); color: var(--slate); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .82rem; font-weight: 600; padding: .7rem 1rem; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-rdc-clear:hover { border-color: var(--gold); color: var(--gold); }

.rdc-results { display: none; }
.rdc-results.active { display: block; }

/* Score row */
.rdc-score-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; }
@media(max-width:680px) { .rdc-score-row { grid-template-columns: 1fr 1fr; } }

.rdc-score-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s);
  padding: 1.4rem 1.2rem; text-align: center;
}
.rdc-score-card h4 { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .7rem; }
.rdc-score-num {
  font-family: 'Playfair Display',serif; font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: .4rem;
}
.rdc-score-label { font-size: .72rem; font-weight: 700; padding: .18rem .6rem; border-radius: 20px; display: inline-block; }
.rdc-lvl-1 { background:#dcfce7;color:#16a34a; } /* Very Easy */
.rdc-lvl-2 { background:#d1fae5;color:#059669; } /* Easy */
.rdc-lvl-3 { background:#fef9c3;color:#854d0e; } /* Fairly Easy */
.rdc-lvl-4 { background:#fef9c3;color:#854d0e; } /* Standard */
.rdc-lvl-5 { background:#fee2e2;color:#dc2626; } /* Fairly Difficult */
.rdc-lvl-6 { background:#fee2e2;color:#dc2626; } /* Difficult */
.rdc-lvl-7 { background:#fee2e2;color:#dc2626; } /* Very Confusing */

/* Stats strip */
.rdc-stats-strip {
  display: grid; grid-template-columns: repeat(6,1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-s); overflow: hidden; margin-bottom: 20px;
}
.rdc-stat { padding: 1rem .7rem; border-right: 1px solid var(--border); text-align: center; }
.rdc-stat:last-child { border-right: none; }
.rdc-stat-num { font-family: 'Playfair Display',serif; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.rdc-stat-lbl { font-size: .62rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
@media(max-width:700px) {
  .rdc-stats-strip { grid-template-columns: repeat(3,1fr); }
  .rdc-stat:nth-child(3) { border-right: none; }
  .rdc-stat:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* Two-col results grid */
.rdc-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media(max-width:860px) { .rdc-results-grid { grid-template-columns: 1fr; } }

.rdc-panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); overflow: hidden;
}
.rdc-panel-head {
  padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); background: var(--cream);
  display: flex; align-items: center; gap: 8px;
}
.rdc-panel-head h4 { font-size: .88rem; font-weight: 700; color: var(--ink); }
.rdc-panel-head i  { color: var(--gold); }
.rdc-panel-body    { padding: 1.1rem 1.3rem; }

/* Suggestion items */
.rdc-suggestion {
  display: flex; align-items: flex-start; gap: 10px; padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}
.rdc-suggestion:last-child { border-bottom: none; }
.rdc-sug-icon { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; margin-top: 1px; }
.rdc-sug-icon.pass{background:#dcfce7;color:#16a34a} .rdc-sug-icon.warn{background:#fef9c3;color:#854d0e} .rdc-sug-icon.fail{background:#fee2e2;color:#dc2626}
.rdc-sug-text { flex: 1; font-size: .78rem; color: var(--slate); line-height: 1.55; }
.rdc-sug-text b { color: var(--ink); }

/* Keyword frequency table */
.rdc-kw-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.rdc-kw-table th { padding: .45rem .7rem; background: var(--cream); text-align: left; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-bottom: 1.5px solid var(--border); }
.rdc-kw-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); color: var(--slate); }
.rdc-kw-table tbody tr:last-child td { border-bottom: none; }
.rdc-kw-table tbody tr:hover td { background: var(--gold-bg); }
.rdc-kw-word   { font-weight: 700; color: var(--ink); }
.rdc-kw-bar-wrap { width: 70px; }
.rdc-kw-bar-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.rdc-kw-bar-fill  { height: 100%; background: var(--gold); border-radius: 2px; transition: width .8s ease .2s; }

/* Long sentence highlighting in textarea  */
.rdc-long-sentence { background: rgba(239,68,68,.08); border-bottom: 2px solid rgba(239,68,68,.4); }

/* Action bar */
.rdc-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-s); flex-wrap: wrap; gap: .75rem;
}
.rdc-action-info   { font-size: .8rem; color: var(--slate); font-weight: 600; }
.rdc-action-info b { color: var(--ink); }
.rdc-action-btns   { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-rdc {
  display: inline-flex; align-items: center; gap: 7px; padding: .6rem 1.1rem;
  border-radius: var(--radius); font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: .78rem; font-weight: 700; cursor: pointer; border: none; transition: all .2s;
}
.btn-rdc-gold    { background: var(--gold);  color: white; }
.btn-rdc-gold:hover    { background: #b8862e; }
.btn-rdc-dark    { background: var(--ink);   color: white; }
.btn-rdc-dark:hover    { background: #2a2a3e; }
.btn-rdc-outline { background: var(--white); color: var(--ink); border: 1.5px solid var(--border); }
.btn-rdc-outline:hover { border-color: var(--gold); color: var(--gold); }
@media(max-width:768px) {
  .rdc-action-bar { flex-direction: column; align-items: flex-start; }
  .rdc-action-btns { width: 100%; }
  .btn-rdc { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   TOOLS PAGE REDESIGN  |  tools.html
════════════════════════════════════════════════════════════ */

/* ── Hero finder ── */
.tpg-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #1e1e32 60%, #2a1e3a 100%);
  padding: 5rem 0 4.5rem; position: relative; overflow: hidden;
}
.tpg-hero-blob {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,.18) 0%, transparent 70%);
  top: -200px; right: -150px; pointer-events: none;
}
.tpg-hero-blob2 {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,.10) 0%, transparent 70%);
  bottom: -150px; left: -100px; pointer-events: none;
}
.tpg-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 2rem; text-align: center; position: relative; z-index: 1; }

.tpg-hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(200,150,62,.15); border: 1px solid rgba(200,150,62,.35);
  border-radius: 20px; font-size: .72rem; font-weight: 700;
  color: var(--gold); padding: .35rem 1rem; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 1.4rem;
}
.tpg-hero-h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 1rem;
}
.tpg-hero-h1 em { color: var(--gold); font-style: italic; }
.tpg-hero-sub { font-size: .98rem; color: rgba(255,255,255,.65); max-width: 560px; margin: 0 auto 2.4rem; line-height: 1.75; }

/* Badges row */
.tpg-hero-badges { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2.8rem; }
.tpg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.8);
  padding: .3rem .9rem;
}
.tpg-badge i { color: var(--gold); }

/* ── Smart Finder Card ── */
.tpg-finder {
  background: var(--white); border-radius: 20px; padding: 2rem 2.4rem 2.4rem;
  box-shadow: 0 32px 80px rgba(0,0,0,.35); max-width: 720px; margin: 0 auto; text-align: left;
}
.tpg-finder-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 8px;
}
.tpg-finder-title::before { content:''; width:16px; height:2px; background:var(--gold); display:block; }

.tpg-finder-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media(max-width:640px) { .tpg-finder-row { grid-template-columns: 1fr; } }

.tpg-finder-field { display: flex; flex-direction: column; gap: 5px; }
.tpg-finder-field label { font-size: .72rem; font-weight: 700; color: var(--ink); }
.tpg-finder-field select {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .85rem; font-weight: 600; color: var(--ink);
  padding: .7rem 1rem; outline: none; cursor: pointer; transition: border-color .2s;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.tpg-finder-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,62,.1); }

.btn-tpg-go {
  background: var(--gold); color: var(--ink); border: none; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem; font-weight: 800;
  padding: .72rem 1.6rem; cursor: pointer; white-space: nowrap; height: fit-content;
  display: inline-flex; align-items: center; gap: 8px; transition: all .2s;
  box-shadow: 0 4px 16px rgba(200,150,62,.4);
}
.btn-tpg-go:hover { background: #b8862e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,150,62,.5); }
.btn-tpg-go:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Quick links below finder */
.tpg-quick-links {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.tpg-quick-label { font-size: .68rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tpg-quick-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 20px;
  font-size: .7rem; font-weight: 700; color: var(--slate); padding: .2rem .7rem;
  cursor: pointer; text-decoration: none; transition: all .15s;
}
.tpg-quick-chip:hover { background: var(--gold-bg); border-color: var(--gold-lt); color: var(--gold); }
.tpg-quick-chip i { font-size: .65rem; }

/* ── Stats row ── */
.tpg-stats-row {
  display: flex; align-items: center; justify-content: center; gap: 0;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.tpg-stat-pill {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 1.2rem 2.5rem; border-right: 1px solid var(--border); flex: 1;
  text-align: center;
}
.tpg-stat-pill:last-child { border-right: none; }
.tpg-stat-num  { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; color: var(--gold); line-height: 1; }
.tpg-stat-lbl  { font-size: .67rem; font-weight: 600; color: var(--muted); }
@media(max-width:600px) {
  .tpg-stats-row { flex-wrap: wrap; }
  .tpg-stat-pill { min-width: 50%; }
  .tpg-stat-pill:nth-child(2n) { border-right: none; }
  .tpg-stat-pill:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ── Category Filter Tabs ── */
.tpg-cat-filter {
  position: sticky; top: 68px; z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.tpg-cat-filter-inner {
  display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(1rem, calc((100% - 1140px) / 2));
}
.tpg-cat-filter-inner::-webkit-scrollbar { display: none; }
.tpg-cat-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: .9rem 1.2rem; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--muted); background: none; border-left: none; border-right: none; border-top: none;
  transition: all .2s; flex-shrink: 0;
}
.tpg-cat-tab .tpg-tab-count {
  background: var(--border); color: var(--muted); font-size: .6rem; font-weight: 800;
  padding: .1rem .45rem; border-radius: 20px; transition: all .2s;
}
.tpg-cat-tab:hover { color: var(--ink); border-bottom-color: var(--border); }
.tpg-cat-tab.active {
  color: var(--gold); border-bottom-color: var(--gold);
}
.tpg-cat-tab.active .tpg-tab-count { background: var(--gold); color: var(--ink); }

/* ── Category sections ── */
.tpg-cat-section { padding: 3.5rem 0; }
.tpg-cat-section:nth-child(odd)  { background: var(--cream); }
.tpg-cat-section:nth-child(even) { background: var(--white); }

.tpg-cat-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.tpg-cat-header-left { display: flex; align-items: center; gap: 16px; }
.tpg-cat-icon-wrap {
  width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.tpg-cat-header-text h2 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 3px;
}
.tpg-cat-header-text h2 em { font-style: italic; color: var(--gold); }
.tpg-cat-header-text p { font-size: .78rem; color: var(--muted); max-width: 420px; line-height: 1.6; }
.tpg-cat-count {
  flex-shrink: 0; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 10px; font-size: .72rem; font-weight: 800; color: var(--muted);
  padding: .35rem .9rem; white-space: nowrap;
}

/* Tool card redesign */
.tpg-tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.tpg-tool-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-s); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s; position: relative;
}
.tpg-tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--gold-lt); }
.tpg-tool-card-top {
  padding: 1.4rem 1.4rem 1rem; flex: 1;
}
.tpg-tool-card-icon-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.tpg-tool-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.tpg-tool-badge {
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  padding: .18rem .55rem; border-radius: 20px; background: #dcfce7; color: #16a34a;
}
.tpg-tool-card h3 { font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.tpg-tool-card p  { font-size: .78rem; color: var(--slate); line-height: 1.6; }
.tpg-tool-card-foot {
  padding: .9rem 1.4rem; border-top: 1px solid var(--border); background: var(--cream);
}
.btn-tpg-launch {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--ink); color: var(--white); border: none; border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; font-weight: 700;
  padding: .6rem 1rem; cursor: pointer; text-decoration: none; transition: all .2s;
}
.btn-tpg-launch:hover { background: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(200,150,62,.3); }

/* Featured tool card (wide) */
.tpg-tool-card.featured {
  grid-column: span 2; flex-direction: row;
}
.tpg-tool-card.featured .tpg-tool-card-top { display: flex; align-items: center; gap: 1.5rem; }
.tpg-tool-card.featured .tpg-tool-card-foot { min-width: 160px; display: flex; align-items: center; border-top: none; border-left: 1px solid var(--border); }
@media(max-width:720px) {
  .tpg-tool-card.featured { grid-column: span 1; flex-direction: column; }
  .tpg-tool-card.featured .tpg-tool-card-foot { border-left: none; border-top: 1px solid var(--border); width: 100%; }
}

/* Coming soon card */
.tpg-coming-soon {
  background: linear-gradient(135deg, var(--ink) 0%, #2a1e3a 100%);
  border: 1px solid rgba(200,150,62,.25); border-radius: var(--radius-lg);
  padding: 2rem; text-align: center; color: var(--white);
}
.tpg-coming-soon h4 { font-family:'Playfair Display',serif; font-size:1rem; font-weight:800; margin-bottom:.5rem; }
.tpg-coming-soon p  { font-size:.76rem; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:1rem; }


/* ═══════════════════════════════════════════════════
   SOCIAL MEDIA & ADS TOOLS — Moved from inline HTML
═══════════════════════════════════════════════════ */

/* ── SOCIAL-MEDIA-IMAGE-SIZES ──────────────────────────────────── */
.smis-tip-box{background:linear-gradient(135deg,#fffbf0,#fff9e6);border:1px solid rgba(200,150,62,.25);border-radius:12px;padding:1.2rem 1.5rem;margin-bottom:2rem;display:flex;align-items:flex-start;gap:12px;}
    .smis-tip-box i{color:var(--gold);font-size:1.1rem;margin-top:2px;flex-shrink:0;}
    .smis-tip-box p{font-size:.8rem;color:var(--slate);line-height:1.65;margin:0;}
    .smis-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:2.2rem;}
    .smis-tab{padding:.42rem 1rem;border-radius:20px;border:1.5px solid var(--border);background:var(--cream);font-size:.74rem;font-weight:700;color:var(--slate);cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:5px;}
    .smis-tab:hover{border-color:var(--gold-lt);color:var(--gold);}
    .smis-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
    .smis-platform{margin-bottom:2.5rem;}
    .smis-plat-head{display:flex;align-items:center;gap:14px;padding:1rem 1.4rem;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid var(--border);border-bottom:none;}
    .smis-plat-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;flex-shrink:0;}
    .smis-plat-name h3{font-size:.95rem;font-weight:800;color:var(--ink);margin:0;}
    .smis-plat-name p{font-size:.72rem;color:var(--muted);margin:2px 0 0;}
    .smis-badge-new{margin-left:auto;font-size:.6rem;font-weight:800;background:#dcfce7;color:#15803d;padding:.18rem .6rem;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;}
    .smis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;}
    .smis-card{padding:1.1rem 1.3rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--white);transition:background .15s;}
    .smis-card:hover{background:#fffdf5;}
    .smis-card-label{font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem;}
    .smis-card-dim{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.2rem;}
    .smis-card-ratio{font-size:.68rem;color:var(--muted);font-weight:600;margin-bottom:.55rem;}
    .smis-card-tips{list-style:none;padding:0;margin:0 0 .6rem;display:flex;flex-direction:column;gap:3px;}
    .smis-card-tips li{font-size:.71rem;color:var(--slate);display:flex;align-items:flex-start;gap:5px;line-height:1.5;}
    .smis-card-tips li::before{content:'·';color:var(--gold);font-weight:900;flex-shrink:0;margin-top:.1rem;}
    .smis-copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:.65rem;font-weight:700;color:var(--muted);cursor:pointer;background:none;border:1px solid var(--border);border-radius:6px;padding:.16rem .55rem;transition:all .15s;}
    .smis-copy-btn:hover{color:var(--gold);border-color:var(--gold-lt);}
    @media(max-width:600px){.smis-grid{grid-template-columns:1fr 1fr;}.smis-card{border-right:none;}}
    @media(max-width:380px){.smis-grid{grid-template-columns:1fr;}}

/* ── OPEN-GRAPH-PREVIEW ──────────────────────────────────── */
/* ── Layout ── */
    .ogp-wrap{display:grid;grid-template-columns:400px 1fr;gap:2rem;align-items:start;}
    @media(max-width:900px){.ogp-wrap{grid-template-columns:1fr;}}

    /* ── Input panel ── */
    .ogp-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:90px;}
    .ogp-panel-head{background:var(--ink);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:10px;}
    .ogp-panel-head h3{font-size:.9rem;font-weight:800;color:#fff;margin:0;}
    .ogp-panel-head i{color:var(--gold);}
    .ogp-panel-body{padding:1.4rem;}

    .ogp-field{margin-bottom:1rem;}
    .ogp-field label{display:block;font-size:.71rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem;}
    .ogp-field label .ogp-tag{font-size:.6rem;font-weight:600;color:var(--muted);margin-left:4px;text-transform:none;font-family:monospace;}
    .ogp-input,.ogp-textarea{width:100%;border:1.5px solid var(--border);border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;color:var(--ink);padding:.6rem .9rem;outline:none;background:var(--cream);transition:border-color .2s;box-sizing:border-box;}
    .ogp-textarea{resize:vertical;min-height:70px;}
    .ogp-input:focus,.ogp-textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(200,150,62,.1);}

    .ogp-char{font-size:.65rem;color:var(--muted);text-align:right;margin-top:2px;}
    .ogp-char.warn{color:#f59e0b;}
    .ogp-char.over{color:#ef4444;}

    /* Platform toggle */
    .ogp-platforms{display:flex;gap:6px;margin-bottom:1.3rem;}
    .ogp-plat-btn{flex:1;padding:.5rem .4rem;border-radius:8px;border:1.5px solid var(--border);background:var(--cream);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--slate);}
    .ogp-plat-btn:hover{border-color:var(--gold-lt);}
    .ogp-plat-btn.active{border-color:transparent;color:#fff;}
    .ogp-plat-btn[data-plat="facebook"].active{background:#1877F2;}
    .ogp-plat-btn[data-plat="linkedin"].active{background:#0A66C2;}
    .ogp-plat-btn[data-plat="twitter"].active{background:#000;}

    /* Image URL preview thumb */
    .ogp-img-preview{width:100%;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--border);margin-top:.5rem;display:none;background:var(--cream);}
    .ogp-img-placeholder{width:100%;height:60px;border-radius:8px;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;margin-top:.5rem;color:var(--muted);font-size:.74rem;gap:6px;}

    .ogp-btn{width:100%;background:var(--gold);color:var(--ink);border:none;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;font-weight:800;padding:.78rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 16px rgba(200,150,62,.3);margin-top:.3rem;}
    .ogp-btn:hover{background:#b8862e;transform:translateY(-1px);}

    /* ── Preview cards ── */
    .ogp-previews{display:flex;flex-direction:column;gap:1.8rem;}

    .ogp-preview-block{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
    .ogp-preview-head{display:flex;align-items:center;gap:10px;padding:.85rem 1.2rem;border-bottom:1px solid var(--border);background:var(--cream);}
    .ogp-preview-head .ogp-plat-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;flex-shrink:0;}
    .ogp-preview-head h4{font-size:.8rem;font-weight:800;color:var(--ink);margin:0;}
    .ogp-preview-head span{font-size:.7rem;color:var(--muted);margin-left:auto;}

    /* Facebook card mock */
    .fb-card{margin:1.2rem;border:1px solid #dddfe2;border-radius:3px;overflow:hidden;font-family:'Helvetica Neue',Arial,sans-serif;max-width:500px;}
    .fb-card-img{width:100%;height:261px;object-fit:cover;background:#f0f2f5;display:flex;align-items:center;justify-content:center;color:#bcc0c4;font-size:.85rem;}
    .fb-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .fb-card-body{padding:12px;background:#f2f3f5;border-top:1px solid #dddfe2;}
    .fb-card-domain{font-size:12px;color:#65676b;text-transform:uppercase;margin-bottom:3px;}
    .fb-card-title{font-size:16px;font-weight:600;color:#1c1e21;margin-bottom:3px;line-height:1.3;max-height:2.6em;overflow:hidden;}
    .fb-card-desc{font-size:14px;color:#606770;line-height:1.38;max-height:2.76em;overflow:hidden;}

    /* LinkedIn card mock */
    .li-card{margin:1.2rem;border:1px solid #dce6f1;border-radius:2px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:500px;background:#fff;}
    .li-card-img{width:100%;height:261px;background:#f3f6f8;display:flex;align-items:center;justify-content:center;color:#b4b4b4;font-size:.85rem;}
    .li-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .li-card-body{padding:12px 16px;}
    .li-card-title{font-size:14px;font-weight:600;color:#000000e0;margin-bottom:4px;line-height:1.4;}
    .li-card-url{font-size:12px;color:#00000099;}

    /* Twitter/X card mock */
    .tw-card{margin:1.2rem;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:500px;background:#fff;}
    .tw-card-img{width:100%;height:261px;background:#eff3f4;display:flex;align-items:center;justify-content:center;color:#8b98a5;font-size:.85rem;}
    .tw-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .tw-card-body{padding:10px 14px;}
    .tw-card-title{font-size:15px;font-weight:700;color:#0f1419;margin-bottom:2px;line-height:1.3;}
    .tw-card-desc{font-size:13px;color:#536471;margin-bottom:4px;line-height:1.4;}
    .tw-card-url{font-size:13px;color:#536471;display:flex;align-items:center;gap:4px;}

    /* Empty state */
    .ogp-empty{text-align:center;padding:3rem 2rem;color:var(--muted);}
    .ogp-empty i{font-size:2.5rem;margin-bottom:1rem;display:block;color:var(--border);}
    .ogp-empty h4{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.3rem;}
    .ogp-empty p{font-size:.78rem;line-height:1.6;}

    /* Tags hint */
    .ogp-tags-hint{background:var(--cream);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1rem;}
    .ogp-tags-hint p{font-size:.72rem;color:var(--muted);margin:0 0 .5rem;font-weight:700;}
    .ogp-tag-code{display:flex;align-items:center;gap:6px;font-family:monospace;font-size:.68rem;color:var(--slate);background:#fff;border:1px solid var(--border);border-radius:6px;padding:.25rem .6rem;margin-bottom:3px;}
    .ogp-tag-code i{color:var(--gold);font-size:.55rem;}

/* ── AD-COPY-GENERATOR ──────────────────────────────────── */
.adcg-wrap{display:grid;grid-template-columns:380px 1fr;gap:2rem;align-items:start;}
    @media(max-width:900px){.adcg-wrap{grid-template-columns:1fr;}}

    .adcg-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:90px;}
    .adcg-panel-head{background:var(--ink);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:10px;}
    .adcg-panel-head h3{font-size:.9rem;font-weight:800;color:#fff;margin:0;}
    .adcg-panel-head i{color:var(--gold);}
    .adcg-panel-body{padding:1.4rem;}

    .adcg-field{margin-bottom:1rem;}
    .adcg-field label{display:block;font-size:.71rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem;}
    .adcg-field label .adcg-hint{font-size:.62rem;font-weight:500;color:var(--muted);text-transform:none;display:block;margin-top:1px;}
    .adcg-input,.adcg-textarea,.adcg-select{width:100%;border:1.5px solid var(--border);border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;color:var(--ink);padding:.6rem .9rem;outline:none;background:var(--cream);transition:border-color .2s;box-sizing:border-box;}
    .adcg-textarea{resize:vertical;min-height:64px;}
    .adcg-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.3rem;}
    .adcg-input:focus,.adcg-textarea:focus,.adcg-select:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(200,150,62,.1);}

    /* Tone chips */
    .adcg-tone-row{display:flex;gap:5px;flex-wrap:wrap;}
    .adcg-tone-chip{padding:.3rem .75rem;border-radius:20px;border:1.5px solid var(--border);background:var(--cream);font-size:.7rem;font-weight:700;color:var(--slate);cursor:pointer;transition:all .15s;}
    .adcg-tone-chip:hover{border-color:var(--gold-lt);}
    .adcg-tone-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

    .adcg-btn{width:100%;background:var(--gold);color:var(--ink);border:none;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:800;padding:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 16px rgba(200,150,62,.3);margin-top:.4rem;}
    .adcg-btn:hover{background:#b8862e;transform:translateY(-1px);}
    .adcg-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

    /* Results */
    .adcg-empty{text-align:center;padding:3.5rem 2rem;color:var(--muted);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);}
    .adcg-empty i{font-size:2.5rem;margin-bottom:1rem;display:block;color:var(--border);}
    .adcg-empty h4{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}
    .adcg-empty p{font-size:.78rem;line-height:1.6;}

    .adcg-results{display:flex;flex-direction:column;gap:1.6rem;}
    .adcg-fw-block{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
    .adcg-fw-head{display:flex;align-items:center;gap:12px;padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);}
    .adcg-fw-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;flex-shrink:0;}
    .adcg-fw-info h4{font-size:.88rem;font-weight:800;color:var(--ink);margin:0 0 2px;}
    .adcg-fw-info p{font-size:.7rem;color:var(--muted);margin:0;}

    .adcg-copy-list{padding:0;}
    .adcg-copy-item{padding:1rem 1.4rem;border-bottom:1px solid var(--border);}
    .adcg-copy-item:last-child{border-bottom:none;}
    .adcg-copy-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:.4rem;}
    .adcg-copy-text{font-size:.88rem;color:var(--ink);line-height:1.55;margin-bottom:.4rem;font-weight:500;}
    .adcg-copy-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;}
    .adcg-copy-chars{font-size:.65rem;font-weight:600;color:var(--muted);}
    .adcg-copy-chars.warn{color:#f59e0b;}
    .adcg-copy-chars.over{color:#ef4444;}
    .adcg-copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--slate);background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:.22rem .7rem;cursor:pointer;transition:all .15s;}
    .adcg-copy-btn:hover{background:var(--gold-bg);border-color:var(--gold-lt);color:var(--gold);}

/* ── GOOGLE-ADS-QUALITY-SCORE ──────────────────────────────────── */
.qs-wrap{display:grid;grid-template-columns:400px 1fr;gap:2rem;align-items:start;}
    @media(max-width:960px){.qs-wrap{grid-template-columns:1fr;}}

    /* Input panel */
    .qs-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:sticky;top:90px;}
    .qs-panel-head{background:linear-gradient(135deg,#4285F4,#34A853);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:10px;}
    .qs-panel-head h3{font-size:.9rem;font-weight:800;color:#fff;margin:0;}
    .qs-panel-body{padding:1.4rem;}

    .qs-field{margin-bottom:1rem;}
    .qs-field label{display:block;font-size:.71rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem;}
    .qs-field label .qs-sub{font-size:.62rem;font-weight:500;color:var(--muted);text-transform:none;display:block;margin-top:1px;}
    .qs-input,.qs-textarea{width:100%;border:1.5px solid var(--border);border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.83rem;color:var(--ink);padding:.6rem .9rem;outline:none;background:var(--cream);transition:border-color .2s;box-sizing:border-box;}
    .qs-textarea{resize:vertical;min-height:60px;}
    .qs-input:focus,.qs-textarea:focus{border-color:#4285F4;background:#fff;box-shadow:0 0 0 3px rgba(66,133,244,.12);}

    /* Char counter */
    .qs-count{font-size:.65rem;text-align:right;margin-top:2px;color:var(--muted);}
    .qs-count.warn{color:#f59e0b;} .qs-count.over{color:#ef4444;}

    .qs-btn{width:100%;background:linear-gradient(135deg,#4285F4,#34A853);color:#fff;border:none;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:800;padding:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 18px rgba(66,133,244,.3);margin-top:.4rem;}
    .qs-btn:hover{opacity:.92;transform:translateY(-1px);}

    /* Score card */
    .qs-score-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:1.6rem;display:grid;grid-template-columns:160px 1fr;gap:2rem;align-items:center;}
    @media(max-width:600px){.qs-score-card{grid-template-columns:1fr;text-align:center;}}

    .qs-score-ring{
      width:130px;height:130px;border-radius:50%;
      border:8px solid var(--border);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      position:relative;transition:all .4s;
      margin:0 auto;
    }
    .qs-score-ring.good{border-color:#22c55e;background:#f0fdf4;}
    .qs-score-ring.ok  {border-color:#f59e0b;background:#fffbeb;}
    .qs-score-ring.poor{border-color:#ef4444;background:#fef2f2;}
    .qs-score-num{font-family:'Playfair Display',serif;font-size:3rem;font-weight:800;line-height:1;color:var(--ink);}
    .qs-score-denom{font-size:.72rem;font-weight:700;color:var(--muted);}
    .qs-score-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem;}
    .qs-score-label.good{color:#16a34a;} .qs-score-label.ok{color:#d97706;} .qs-score-label.poor{color:#dc2626;}

    .qs-score-right h3{font-size:1.1rem;font-weight:800;color:var(--ink);margin-bottom:.4rem;}
    .qs-score-right p{font-size:.82rem;color:var(--slate);line-height:1.6;margin-bottom:.8rem;}

    /* Component scores */
    .qs-components{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-bottom:1.6rem;}
    @media(max-width:600px){.qs-components{grid-template-columns:1fr;}}
    .qs-comp{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;}
    .qs-comp-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.6rem;}
    .qs-comp-bar-track{width:100%;height:8px;background:var(--border);border-radius:6px;overflow:hidden;margin-bottom:.4rem;}
    .qs-comp-bar-fill{height:100%;border-radius:6px;transition:width .6s ease;}
    .qs-comp-rating{font-size:.72rem;font-weight:700;}
    .qs-comp-rating.above{color:#16a34a;} .qs-comp-rating.average{color:#d97706;} .qs-comp-rating.below{color:#dc2626;}

    /* Tips list */
    .qs-tips-block{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
    .qs-tips-head{background:var(--cream);padding:.9rem 1.3rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
    .qs-tips-head h4{font-size:.85rem;font-weight:800;color:var(--ink);margin:0;}
    .qs-tips-head i{color:var(--gold);}
    .qs-tip-item{display:flex;align-items:flex-start;gap:12px;padding:.9rem 1.3rem;border-bottom:1px solid var(--border);}
    .qs-tip-item:last-child{border-bottom:none;}
    .qs-tip-pri{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900;flex-shrink:0;}
    .qs-tip-pri.high{background:#fee2e2;color:#dc2626;}
    .qs-tip-pri.med {background:#fef3c7;color:#d97706;}
    .qs-tip-pri.low {background:#dcfce7;color:#16a34a;}
    .qs-tip-text strong{font-size:.8rem;font-weight:700;color:var(--ink);display:block;margin-bottom:2px;}
    .qs-tip-text p{font-size:.75rem;color:var(--slate);margin:0;line-height:1.55;}

    /* Empty state */
    .qs-empty{text-align:center;padding:3.5rem 2rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--muted);}
    .qs-empty i{font-size:2.5rem;margin-bottom:1rem;display:block;color:var(--border);}
    .qs-empty h4{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}

    /* Google Ads preview */
    .qs-ad-preview{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem;margin-bottom:1.6rem;}
    .qs-ad-preview-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.8rem;}
    .qs-ad-mock{font-family:'Google Sans',Arial,sans-serif;max-width:540px;}
    .qs-ad-badge{display:inline-block;font-size:11px;color:#188038;border:1px solid #188038;padding:1px 5px;border-radius:3px;margin-right:6px;vertical-align:middle;}
    .qs-ad-url{font-size:13px;color:#202124;display:inline;}
    .qs-ad-title{font-size:20px;color:#1a0dab;margin:3px 0;line-height:1.3;cursor:pointer;}
    .qs-ad-title:hover{text-decoration:underline;}
    .qs-ad-desc{font-size:14px;color:#4d5156;line-height:1.5;}


/* ── Premium Dropdown (smaller mega) ── */
.nav-mega-sm {
  min-width: 280px !important;
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}
.nav-mega-sm .nav-mega-inner {
  display: block !important;
  padding: 1rem !important;
}


/* ════════════════════════════════════════════════════════════
   THEMES PAGE  |  themes.html
════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────── */
.themes-page { padding-top: var(--nav-h); }

/* ── HERO BANNER ───────────────────────────────────────────── */
.hero-banner {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: 540px;
  display: flex; align-items: center;
}
.hero-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(200,150,62,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(29,78,216,.2)   0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 50% 10%, rgba(200,150,62,.10) 0%, transparent 50%);
  pointer-events: none;
}
.hero-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 5%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
@media(max-width:900px){ .hero-inner { grid-template-columns: 1fr; padding: 3rem 5%; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(200,150,62,.15); border: 1px solid rgba(200,150,62,.3);
  padding: .28rem .9rem; border-radius: 20px; margin-bottom: 1.2rem;
}
.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800; color: #fff;
  line-height: 1.15; margin-bottom: 1rem;
}
.hero-text h1 em { font-style: italic; color: var(--gold); }
.hero-text p {
  font-size: .95rem; color: rgba(255,255,255,.6);
  line-height: 1.7; max-width: 420px; margin-bottom: 1.8rem;
}
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 800; font-family: inherit;
  padding: .7rem 1.5rem; border-radius: 9px;
  background: var(--gold); color: var(--ink); border: none; cursor: pointer;
  transition: all .2s; box-shadow: 0 4px 20px rgba(200,150,62,.35);
}
.hero-btn-primary:hover { background: #b8862e; transform: translateY(-1px); }
.hero-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 800; font-family: inherit;
  padding: .7rem 1.5rem; border-radius: 9px;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.25); cursor: pointer;
  transition: all .2s;
}
.hero-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* Hero stats strip */
.hero-stats {
  display: flex; gap: 1.8rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 800; color: var(--gold);
}
.hero-stat span {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}

/* ── Hero showcase carousel ────────────────────────────────── */
.hero-showcase { position: relative; height: 360px; }
@media(max-width:900px){ .hero-showcase { height: 260px; } }

.hero-showcase-track { position: relative; height: 100%; }

.showcase-slide {
  position: absolute; width: 100%; top: 0; left: 0;
  opacity: 0;
  transform: translateX(40px) scale(.96);
  transition: all .5s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.showcase-slide.active  { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; z-index: 2; }
.showcase-slide.prev    { opacity: 0; transform: translateX(-40px) scale(.96); }

/* Browser chrome — hero */
.browser-frame {
  background: #1e1e2e; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
.browser-bar {
  background: #2a2a3e; padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
}
.browser-dots { display: flex; gap: 5px; }
.browser-dot  { width: 10px; height: 10px; border-radius: 50%; }
.browser-dot:nth-child(1){ background: #ff5f57; }
.browser-dot:nth-child(2){ background: #febc2e; }
.browser-dot:nth-child(3){ background: #28c840; }
.browser-url {
  flex: 1; background: rgba(255,255,255,.08);
  border-radius: 5px; padding: 4px 10px;
  font-size: .65rem; color: rgba(255,255,255,.4);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-screenshot {
  width: 100%; height: 270px;
  object-fit: cover; object-position: top; display: block;
}
@media(max-width:900px){ .browser-screenshot { height: 180px; } }

/* Slide label */
.slide-label {
  position: absolute; bottom: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold); color: var(--ink);
  font-size: .68rem; font-weight: 900;
  padding: .25rem .9rem; border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(200,150,62,.4);
}

/* Showcase dots */
.showcase-dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.showcase-dot  {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.2);
  cursor: pointer; transition: all .3s; border: none;
}
.showcase-dot.active { width: 22px; background: var(--gold); }

/* Showcase arrows */
.showcase-arrows {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: calc(100% + 60px);
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.showcase-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  transition: all .2s;
}
.showcase-arrow:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar-wrap {
  position: sticky; top: var(--nav-h); z-index: 80;
  background: rgba(250,250,247,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.filter-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .85rem 5%; overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  padding: .38rem .95rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--white); color: var(--slate);
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.filter-chip:hover  { border-color: var(--gold-lt); color: var(--gold); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-chip i { font-size: .6rem; }

.filter-search {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 20px; padding: .36rem 1rem;
  transition: border-color .2s;
}
.filter-search:focus-within { border-color: var(--gold); }
.filter-search i { color: var(--muted); font-size: .68rem; }
.filter-search input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .73rem; color: var(--ink); width: 120px;
}
.filter-search input::placeholder { color: var(--muted); }

.results-label {
  font-size: .73rem; font-weight: 600; color: var(--muted);
  padding: .6rem 5% .1rem;
}
.results-label strong { color: var(--ink); }

/* ── Themes grid ───────────────────────────────────────────── */
.themes-grid-wrap { padding: .8rem 5% 3rem; }
.themes-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.6rem;
}
@media(max-width:960px){ .themes-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .themes-grid { grid-template-columns: 1fr; } }

/* ── Theme card ────────────────────────────────────────────── */
.theme-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
  display: flex; flex-direction: column;
  cursor: pointer;
  opacity: 0; transform: translateY(20px);
  transition: box-shadow .25s, transform .25s, opacity .45s ease;
}
.theme-card.visible { opacity: 1; transform: translateY(0); }
.theme-card:hover   { box-shadow: var(--shadow-l); transform: translateY(-5px); }
.theme-card.visible:hover { transform: translateY(-5px); }

/* Mini browser bar on card */
.theme-thumb { position: relative; background: #1e1e2e; }
.thumb-browser-bar {
  background: #2a2a3e; padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
}
.thumb-browser-dots { display: flex; gap: 4px; }
.thumb-browser-dot  { width: 8px; height: 8px; border-radius: 50%; }
.thumb-browser-dot:nth-child(1){ background: #ff5f57; }
.thumb-browser-dot:nth-child(2){ background: #febc2e; }
.thumb-browser-dot:nth-child(3){ background: #28c840; }
.thumb-browser-url {
  flex: 1; background: rgba(255,255,255,.08);
  border-radius: 4px; padding: 3px 8px;
  font-size: .58rem; color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Screenshot image */
.theme-screenshot {
  width: 100%; height: 200px;
  object-fit: cover; object-position: top; display: block;
  transition: transform .5s ease;
}
.theme-card:hover .theme-screenshot { transform: translateY(-6%); }

/* Hover overlay */
.theme-overlay {
  position: absolute; inset: 0; top: 30px;
  background: rgba(26,26,46,.6);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  opacity: 0; transition: opacity .25s;
  flex-wrap: wrap; padding: 1rem;
}
.theme-card:hover .theme-overlay { opacity: 1; }

.thumb-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 800; font-family: inherit;
  padding: .48rem 1.05rem; border-radius: 7px;
  cursor: pointer; transition: all .18s; border: none;
}
.thumb-btn-demo { background: var(--gold); color: var(--ink); }
.thumb-btn-demo:hover { background: #b8862e; }
.thumb-btn-info {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1.5px solid rgba(255,255,255,.4) !important;
}
.thumb-btn-info:hover { background: rgba(255,255,255,.28); }

/* Badges on thumbnail */
.theme-cat-badge {
  position: absolute; top: 38px; left: 8px;
  font-size: .57rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: .18rem .6rem; border-radius: 10px;
  backdrop-filter: blur(6px);
}
.theme-new-badge {
  position: absolute; top: 38px; right: 8px;
  background: var(--gold); color: var(--ink);
  font-size: .55rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; padding: .18rem .55rem; border-radius: 8px;
}

/* Card body */
.theme-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.theme-name { font-size: .92rem; font-weight: 800; color: var(--ink); margin-bottom: .2rem; }
.theme-desc { font-size: .73rem; color: var(--slate); line-height: 1.55; flex: 1; margin-bottom: .7rem; }

.theme-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .8rem; }
.theme-tag  {
  font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  padding: .15rem .55rem; border-radius: 7px;
  background: var(--cream); color: var(--slate); border: 1px solid var(--border);
}

.theme-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .7rem; border-top: 1px solid var(--border);
}
.theme-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
}
.theme-price .price-note {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .58rem; font-weight: 600; color: var(--muted);
  display: block; margin-top: -2px;
}
.theme-cta-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 800; font-family: inherit;
  padding: .38rem .9rem; border-radius: 7px;
  background: var(--ink); color: #fff; border: none; cursor: pointer;
  transition: background .18s;
}
.theme-cta-btn:hover { background: var(--gold); color: var(--ink); }

/* ── Empty state ───────────────────────────────────────────── */
.themes-empty { text-align: center; padding: 4rem 2rem; display: none; }
.themes-empty.show { display: block; }
.themes-empty i  { font-size: 2.8rem; color: var(--border); margin-bottom: 1rem; display: block; }
.themes-empty h3 { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: .4rem; }
.themes-empty p  { font-size: .82rem; color: var(--muted); }

/* ── Pagination ────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .45rem; padding: 1.2rem 0 3rem;
}
.page-btn {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; color: var(--slate);
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; transition: all .18s; font-family: inherit;
}
.page-btn:hover  { border-color: var(--gold-lt); color: var(--gold); }
.page-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-btn.next   { width: auto; padding: 0 1rem; gap: 5px; display: inline-flex; align-items: center; }

/* ── CTA bottom banner ─────────────────────────────────────── */
.themes-cta-banner {
  margin: 0 5% 3.5rem;
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 2.4rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.themes-cta-banner::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,.15) 0%, transparent 70%);
  pointer-events: none;
}
.themes-cta-banner .banner-left h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem; font-weight: 800; color: #fff; margin-bottom: .4rem;
}
.themes-cta-banner .banner-left h2 em { color: var(--gold); font-style: italic; }
.themes-cta-banner .banner-left p {
  font-size: .83rem; color: rgba(255,255,255,.58);
  max-width: 420px; line-height: 1.6;
}
.banner-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.banner-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 800; font-family: inherit;
  padding: .65rem 1.4rem; border-radius: 9px;
  background: var(--gold); color: var(--ink); border: none; cursor: pointer;
  transition: all .2s;
}
.banner-btn-primary:hover { background: #b8862e; color: #fff; }
.banner-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 800; font-family: inherit;
  padding: .65rem 1.4rem; border-radius: 9px;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.25); cursor: pointer;
  transition: all .2s;
}
.banner-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }