/* ══════════════════════════════════════════════════
   AI Meta Tag Generator — Stylesheet
   ══════════════════════════════════════════════════ */

/* ── CSS VARIABLES ─────────────────────────────── */
:root {
  --bg:#f7f6f3;--bg2:#edecea;--surface:#ffffff;--surface2:#f4f3f0;
  --border:#e2e0da;--border2:#ccc9c0;--text:#18171a;--text2:#5c5a66;--text3:#9b99a8;
  --indigo:#4f46e5;--indigo2:#6366f1;--teal:#0d9488;--amber:#d97706;--rose:#e11d48;--green:#059669;
  --grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#0d9488 100%);
  --shadow:0 4px 16px rgba(0,0,0,0.08);--shadow-lg:0 12px 40px rgba(0,0,0,0.12);
  --radius:14px;--radius-sm:8px;
}
[data-theme="dark"] {
  --bg:#0c0b10;--bg2:#13121a;--surface:#18171f;--surface2:#201f28;
  --border:#2c2b38;--border2:#3a3849;--text:#f0eefa;--text2:#9896aa;--text3:#5a5868;
  --shadow:0 4px 16px rgba(0,0,0,0.4);--shadow-lg:0 12px 40px rgba(0,0,0,0.5);
}

/* ── RESET ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-family:'Bricolage Grotesque',sans-serif}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}
.navbar .logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.navbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.2s;
}
.navbar a::before { content: '←'; font-size: 0.9rem; }
.navbar a:hover {
  background: var(--accent-lt);
  border-color: var(--accent2);
  color: var(--accent);
}

.navbar nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.2s;
}
.navbar nav a::before { content: none; }
.navbar nav a:hover {
  background: var(--accent-lt);
  border-color: var(--accent2);
  color: var(--accent);
}
  .seo-content {
    max-width: 860px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: inherit;
    color: #1a1a2e;
    line-height: 1.8;
  }
 
  .seo-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 12px;
    color: #0f172a;
    border-left: 4px solid #0ea5e9;
    padding-left: 12px;
  }
 
  .seo-content p {
    margin-bottom: 14px;
    color: #374151;
    font-size: 0.97rem;
  }
 
  /* Meta Tag Types */
  .tag-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 24px 0;
  }
 
  .tag-type-card {
    border-radius: 12px;
    overflow: hidden;
  }
 
  .tag-type-card .tt-header {
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
  }
 
  .tag-type-card.basic    .tt-header { background: #0ea5e9; }
  .tag-type-card.og       .tt-header { background: #1877f2; }
  .tag-type-card.twitter  .tt-header { background: #1da1f2; }
  .tag-type-card.advanced .tt-header { background: #7c3aed; }
 
  .tag-type-card .tt-body {
    background: #1e1e2e;
    padding: 12px 16px;
    font-family: monospace;
    font-size: 0.78rem;
    line-height: 1.8;
    color: #cdd6f4;
  }
 
  .tag-type-card .tt-body .attr { color: #89b4fa; }
  .tag-type-card .tt-body .val  { color: #a6e3a1; }
  .tag-type-card .tt-body .tag  { color: #f38ba8; }
 
  /* Preview Cards */
  .preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
  }
 
  .preview-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
  }
 
  .preview-card .pc-platform {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }
 
  .preview-card .pc-body {
    padding: 14px;
    background: #f8fafc;
    font-size: 0.83rem;
  }
 
  .pc-google .pc-platform   { background: #fff; border-bottom: 1px solid #e2e8f0; color: #374151; }
  .pc-google .pc-title      { color: #1a0dab; font-size: 0.95rem; font-weight: 600; }
  .pc-google .pc-url        { color: #006621; font-size: 0.78rem; margin: 2px 0; }
  .pc-google .pc-desc       { color: #4d5156; font-size: 0.82rem; }
 
  .pc-fb .pc-platform   { background: #1877f2; color: white; }
  .pc-fb .pc-body       { background: #f0f2f5; }
  .pc-fb .pc-img        { background: #d1d5db; height: 80px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 8px; }
  .pc-fb .pc-title      { font-weight: 700; color: #050505; font-size: 0.88rem; }
  .pc-fb .pc-url        { color: #606770; font-size: 0.75rem; text-transform: uppercase; }
 
  .pc-twitter .pc-platform  { background: #000; color: white; }
  .pc-twitter .pc-img       { background: #d1d5db; height: 80px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 8px; }
  .pc-twitter .pc-title     { font-weight: 700; color: #0f1419; font-size: 0.88rem; }
  .pc-twitter .pc-url       { color: #536471; font-size: 0.78rem; }
 
  /* Features Grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
  }
 
  .feature-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 16px;
  }
 
  .feature-card .icon { font-size: 1.4rem; }
  .feature-card strong { display: block; margin: 6px 0 4px; font-size: 0.95rem; color: #0c4a6e; }
  .feature-card span { font-size: 0.85rem; color: #4b5563; }
 
  /* Steps */
  .steps-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    counter-reset: steps;
  }
 
  .steps-list li {
    counter-increment: steps;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    background: #f8fafc;
    border-radius: 8px;
    padding: 14px;
    border: 1px solid #e2e8f0;
  }
 
  .steps-list li::before {
    content: counter(steps);
    background: #0ea5e9;
    color: white;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
 
  /* Config Options */
  .config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 20px 0;
  }
 
  .config-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 14px 16px;
  }
 
  .config-card .cfg-label { font-weight: 700; color: #0c4a6e; font-size: 0.88rem; margin-bottom: 6px; display: block; }
  .config-card .cfg-opts  { font-size: 0.8rem; color: #4b5563; }
  .config-card .cfg-opts span {
    display: inline-block;
    background: #e0f2fe;
    border-radius: 4px;
    padding: 2px 7px;
    margin: 2px;
    font-size: 0.76rem;
    color: #0369a1;
  }
 
  /* Use Cases */
  .use-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
  }
 
  .use-case-tag {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #0c4a6e;
  }
 
  /* SEO Impact */
  .impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 20px 0;
  }
 
  .impact-card {
    background: #f8fafc;
    border-left: 4px solid #0ea5e9;
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
  }
 
  .impact-card strong { display: block; color: #0f172a; font-size: 0.9rem; margin-bottom: 4px; }
  .impact-card span   { font-size: 0.83rem; color: #4b5563; }
 
  /* Compare Table */
  .compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.92rem;
  }
 
  .compare-table th {
    background: #0ea5e9;
    color: white;
    padding: 12px 16px;
    text-align: left;
  }
 
  .compare-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    vertical-align: top;
  }
 
  .compare-table tr:nth-child(even) td { background: #f0f9ff; }
 
  /* FAQ */
  .faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
  }
 
  .faq-q {
    background: #f9fafb;
    padding: 14px 18px;
    font-weight: 600;
    color: #0c4a6e;
    font-size: 0.95rem;
  }
 
  .faq-a {
    padding: 12px 18px;
    color: #4b5563;
    font-size: 0.9rem;
    border-top: 1px solid #e5e7eb;
  }
 
  .info-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.92rem;
    color: #0c4a6e;
  }
 
  .code-inline {
    background: #1e1e2e;
    color: #a6e3a1;
    font-family: monospace;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
  }
 
  @media (max-width: 600px) {
    .tag-types-grid { grid-template-columns: 1fr; }
  }
/* ── NAVBAR ────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:200;background:rgba(247,246,243,0.82);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);transition:background .3s,border .3s}
[data-theme="dark"] .navbar{background:rgba(12,11,16,0.85)}
.navbar-inner{max-width:1380px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(79,70,229,0.35);flex-shrink:0}
.logo-text{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.3px;white-space:nowrap}
.logo-text span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s}
.icon-btn:hover{background:var(--surface2);border-color:var(--border2);transform:scale(1.05)}
.btn-primary{height:38px;padding:0 18px;border-radius:10px;background:var(--grad);color:#fff;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 4px 14px rgba(79,70,229,0.35);transition:all .25s;white-space:nowrap}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,70,229,0.45)}
.btn-primary:active{transform:translateY(0)}

/* ── LAYOUT ────────────────────────────────────── */
.main{max-width:1380px;margin:0 auto;padding:28px 24px 60px;display:grid;grid-template-columns:520px 1fr;gap:24px;align-items:start}
@media(max-width:1100px){.main{grid-template-columns:1fr}}
@media(max-width:640px){.main{padding:20px 14px 40px}}
.right-col{position:sticky;top:74px;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:thin}
.right-col::-webkit-scrollbar{width:4px}
.right-col::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
@media(max-width:1100px){.right-col{position:static;max-height:none;overflow-y:visible}}

/* ── CARDS ─────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:background .3s,border .3s}
.card-head{padding:22px 22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-body{padding:20px 22px 22px}
.card-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.2px}
.card-sub{font-size:13px;color:var(--text2);line-height:1.55}

/* ── WORKER SETUP BANNER (shown only before URL saved) ── */
.worker-setup{padding:14px 18px;background:rgba(79,70,229,0.07);border:1px solid rgba(79,70,229,0.22);border-radius:12px;margin-bottom:20px}
[data-theme="dark"] .worker-setup{background:rgba(79,70,229,0.13)}
.worker-setup-title{font-size:13px;font-weight:700;color:var(--indigo);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.worker-setup-row{display:flex;gap:8px;align-items:center}
.worker-setup-row input{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:9px;padding:9px 13px;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--text);outline:none;transition:border .2s}
.worker-setup-row input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,0.1)}
.worker-setup-row input::placeholder{color:var(--text3)}
.worker-setup p{font-size:12px;color:var(--text3);margin-top:8px;line-height:1.5}
.worker-setup p a{color:var(--indigo);text-decoration:none}
.worker-setup p a:hover{text-decoration:underline}

/* Worker saved badge (shown after URL is saved) */
.worker-saved-badge{display:none;align-items:center;gap:8px;padding:8px 12px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:9px;margin-bottom:20px;font-size:12.5px;color:#059669;font-weight:600;cursor:pointer}
.worker-saved-badge:hover{background:rgba(16,185,129,0.13)}
.worker-saved-badge .ws-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex-shrink:0}
[data-theme="dark"] .worker-saved-badge{color:#34d399}

/* ── FORM ───────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:600;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}
.char-count{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3)}
.char-count.warn{color:var(--amber)} .char-count.over{color:var(--rose)}
.field{width:100%;padding:10px 13px;background:var(--surface2);border:1.5px solid var(--border);border-radius:9px;color:var(--text);font-family:'Instrument Sans',sans-serif;font-size:14px;transition:all .2s;outline:none}
.field:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,0.1);background:var(--surface)}
.field::placeholder{color:var(--text3)}
textarea.field{resize:vertical;min-height:80px;line-height:1.55}
select.field{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b99a8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.grid2{grid-template-columns:1fr}}

/* ── ACCORDION ─────────────────────────────────── */
.accordion{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:18px}
.accordion-trigger{width:100%;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:none;color:var(--text);font-family:'Instrument Sans',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s;text-align:left}
.accordion-trigger:hover{background:var(--bg2)}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);padding:0 16px;background:var(--surface)}
.accordion-body.open{max-height:600px;padding:16px}
.chev{transition:transform .3s;color:var(--text3)}
.chev.open{transform:rotate(180deg)}

/* ── TOGGLES ───────────────────────────────────── */
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle-name{font-size:13px;font-weight:500;color:var(--text)}
.toggle-desc{font-size:11.5px;color:var(--text3)}
.toggle-switch{position:relative;width:40px;height:22px;border-radius:11px;background:var(--border2);cursor:pointer;border:none;flex-shrink:0;transition:background .2s}
.toggle-switch.on{background:var(--indigo)}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:transform .2s}
.toggle-switch.on::after{transform:translateX(18px)}

/* ── GENERATE BUTTON ───────────────────────────── */
.btn-generate{width:100%;height:52px;border-radius:12px;background:var(--grad);color:white;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 24px rgba(79,70,229,0.4);transition:all .25s;position:relative;overflow:hidden;letter-spacing:-.2px}
.btn-generate:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(79,70,229,0.5)}
.btn-generate:not(:disabled):active{transform:translateY(0)}
.btn-generate:disabled{opacity:.65;cursor:not-allowed;transform:none!important}
.btn-generate::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.15) 50%,transparent 100%);transform:translateX(-100%);transition:transform .5s}
.btn-generate:not(:disabled):hover::before{transform:translateX(100%)}

/* ── PROGRESS ──────────────────────────────────── */
.progress-wrap{margin-top:12px;display:none}
.progress-wrap.show{display:block}
.progress-track{height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.progress-bar{height:100%;border-radius:2px;background:var(--grad);width:0;transition:width .5s ease}
.ai-status{font-size:12px;color:var(--text2);margin-top:8px;display:flex;align-items:center;gap:8px}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--indigo);animation:pulse 1.2s ease infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* ── SEO SCORE ─────────────────────────────────── */
.score-ring-wrap{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.score-ring{position:relative;width:76px;height:76px;flex-shrink:0}
.score-ring svg{transform:rotate(-90deg)}
.score-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.score-ring-num .num{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;line-height:1}
.score-ring-num .lbl{font-size:9px;font-weight:600;color:var(--text2);letter-spacing:.5px;text-transform:uppercase}
.score-heading{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
.score-sub{font-size:12.5px;color:var(--text2);line-height:1.4}
.score-metric{margin-bottom:11px}
.score-metric-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.score-metric-label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.score-metric-val{font-size:12px;font-weight:700;color:var(--text)}
.score-bar-track{height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.score-bar-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.34,1.56,.64,1)}
.fill-good{background:#10b981} .fill-ok{background:#f59e0b} .fill-bad{background:#ef4444} .fill-indigo{background:var(--grad)}
.insights-list{list-style:none;margin-top:4px}
.insights-list li{font-size:12.5px;color:var(--text2);padding:5px 0;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--border)}
.insights-list li:last-child{border-bottom:none}
.insights-list li::before{content:'→';color:var(--indigo);font-weight:700;flex-shrink:0;margin-top:1px}

/* ── TABS ───────────────────────────────────────── */
.tab-bar{display:flex;gap:4px;padding:5px;background:var(--surface2);border-radius:11px;margin-bottom:18px;overflow-x:auto;border:1px solid var(--border)}
.tab-bar::-webkit-scrollbar{height:0}
.tab-btn{flex:1;min-width:72px;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text2);border:none;background:transparent;transition:all .2s;white-space:nowrap;text-align:center;font-family:'Instrument Sans',sans-serif}
.tab-btn.active{background:var(--surface);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid var(--border)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── GOOGLE PREVIEW ─────────────────────────────── */
.google-preview{padding:18px 20px;font-family:Arial,sans-serif}
.gp-bar{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:24px;padding:8px 16px;margin-bottom:16px}
.gp-bar-text{font-size:13px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-site{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.gp-favicon{width:26px;height:26px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:11px;color:white;font-weight:700;font-family:'Bricolage Grotesque',sans-serif;flex-shrink:0;overflow:hidden}
.gp-favicon img{width:100%;height:100%;object-fit:cover}
.gp-sitename{font-size:13px;font-weight:500;color:var(--text);line-height:1.2}
.gp-siteurl{font-size:12px;color:var(--text2)}
.gp-title{font-size:20px;color:#1a0dab;cursor:pointer;margin-bottom:4px;line-height:1.3;font-weight:400}
[data-theme="dark"] .gp-title{color:#8ab4f8}
.gp-url{font-size:13px;color:#006621;margin-bottom:5px}
[data-theme="dark"] .gp-url{color:#81c995}
.gp-desc{font-size:14px;color:#4d5156;line-height:1.55}
[data-theme="dark"] .gp-desc{color:#bdc1c6}

/* ── SOCIAL PREVIEWS ────────────────────────────── */
.social-img{width:100%;height:150px;object-fit:cover;display:none}
.social-img-placeholder{height:150px;background:linear-gradient(135deg,#4f46e5,#0d9488);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:36px}
.fb-preview{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fb-img-wrap{height:150px;overflow:hidden}
.fb-body{padding:12px 14px;background:var(--surface2)}
.fb-domain{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:3px}
.fb-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3}
.fb-desc{font-size:13px;color:var(--text2);line-height:1.4}
.tw-preview{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tw-img-wrap{height:140px;overflow:hidden}
.tw-body{padding:12px 14px;background:var(--surface);border-top:1px solid var(--border)}
.tw-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.3}
.tw-desc{font-size:13px;color:var(--text2);line-height:1.4;margin-bottom:4px}
.tw-domain{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:4px}
.li-preview{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.li-img-wrap{height:140px;background:linear-gradient(135deg,#0077b5,#00a0dc);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:36px}
.li-body{padding:12px 14px;background:var(--surface)}
.li-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
.li-desc{font-size:13px;color:var(--text2);margin-bottom:5px;line-height:1.4}
.li-meta{display:flex;align-items:center;gap:8px}
.li-domain{font-size:11.5px;color:var(--text3)}
.li-dot{width:3px;height:3px;border-radius:50%;background:var(--text3)}
.wa-bg{padding:16px;background:#e5ddd5;border-radius:12px}
[data-theme="dark"] .wa-bg{background:#1a1a2e}
.wa-bubble{background:#fff;border-radius:4px 12px 12px 12px;overflow:hidden;max-width:88%;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
[data-theme="dark"] .wa-bubble{background:#202c33}
.wa-link-img{height:110px;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);font-size:28px}
.wa-link-body{padding:9px 11px}
.wa-link-title{font-size:13.5px;font-weight:700;color:#1a1a1a;margin-bottom:2px;line-height:1.3}
[data-theme="dark"] .wa-link-title{color:#e9edef}
.wa-link-desc{font-size:12px;color:#667781;line-height:1.4;margin-bottom:3px}
.wa-link-url{font-size:11px;color:#667781}
.wa-timestamp{font-size:11px;color:#667781;text-align:right;margin-top:4px;padding:0 11px 8px}

/* ── CODE OUTPUT ────────────────────────────────── */
.code-output-card{margin-top:24px}
.code-output-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.code-output-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.code-badge{font-size:10.5px;font-family:'Instrument Sans',sans-serif;background:rgba(79,70,229,0.1);color:var(--indigo);padding:3px 10px;border-radius:20px;font-weight:600}
[data-theme="dark"] .code-badge{background:rgba(99,102,241,0.2)}
.code-actions{display:flex;gap:8px}
.btn-sm{height:32px;padding:0 13px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:'Instrument Sans',sans-serif;transition:all .2s}
.btn-sm:hover{background:var(--bg2);border-color:var(--border2)}
.btn-sm.accent{background:var(--grad);color:white;border-color:transparent;box-shadow:0 3px 10px rgba(79,70,229,0.3)}
.btn-sm.accent:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(79,70,229,0.4)}
.code-block{background:#0e0d18;color:#e0dfff;padding:20px;overflow:auto;font-family:'JetBrains Mono','Fira Code',monospace;font-size:12.5px;line-height:1.75;max-height:440px;border-radius:0 0 var(--radius) var(--radius)}
.code-line{display:flex;gap:16px}
.ln{color:#3a3850;user-select:none;min-width:22px;text-align:right;font-size:12px;flex-shrink:0}
.lc{flex:1;white-space:pre}
.t-tag{color:#ff8af0} .t-attr{color:#82aaff} .t-val{color:#c3e88d} .t-comment{color:#4a4872;font-style:italic}

/* ── MISC ───────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}
.toast{position:fixed;bottom:24px;right:24px;z-index:999;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px;transform:translateY(80px);opacity:0;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;font-family:'Instrument Sans',sans-serif}
.toast.success{background:#059669;color:white;box-shadow:0 6px 24px rgba(5,150,105,0.4)}
.toast.error{background:#e11d48;color:white;box-shadow:0 6px 24px rgba(225,29,72,0.4)}
.toast.show{transform:translateY(0);opacity:1}
.section-label{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.error-notice{padding:12px 14px;background:rgba(225,29,72,0.08);border:1px solid rgba(225,29,72,0.2);border-radius:9px;color:#e11d48;font-size:13px;display:none;margin-top:12px;line-height:1.5}
.error-notice.show{display:block}