/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

/* ── VARIABLES ── */
:root {
  --bg: #ffffff;
  --surface: #f8fafc;
  --card: #ffffff;
  --card2: #f1f5f9;
  --border: rgba(0,0,0,0.08);
  --border-hi: rgba(0,0,0,0.15);
  --txt: #0f172a;
  --txt2: #475569;
  --txt3: #64748b;
  --violet: #7c3aed;
  --pink: #ec4899;
  --grad: linear-gradient(135deg,#7c3aed,#ec4899);
  --glow: rgba(124,58,237,0.35);
  --r: 14px;
  --rl: 22px;
  --sidebar: 248px;
}

/* ── BASE ── */
html, body { height: 100%; }
body {
  background: var(--surface);
  color: var(--txt);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* App-shell pages lock scroll at body level */
body.app-page { overflow: hidden; }

/* ── APP SHELL ── */
.app { display: flex; height: 100vh; }

/* ── MAIN ── */
.main { flex: 1; overflow-y: auto; padding: 36px 44px; }

/* ── ANIMATIONS ── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer  { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes modalIn  { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes cardIn   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.sidebar-logo {
  padding: 20px 20px 16px;
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.sidebar-nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--txt3);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.nav-item:hover  { background: var(--surface); color: var(--txt2); }
.nav-item.active { background: rgba(124,58,237,0.08); color: var(--violet); font-weight: 600; }
.nav-item svg    { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item i      { font-size: 18px; flex-shrink: 0; line-height: 1; }

.sidebar-section-label {
  padding: 16px 22px 6px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--txt3);
}

.recent-list { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.recent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 9px;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.recent-item:hover        { background: var(--surface); }
.recent-item.active       { background: rgba(124,58,237,0.08); }
.recent-item.active .recent-name { color: var(--violet); }
.recent-thumb {
  width: 26px; height: 26px; border-radius: 6px;
  object-fit: cover; background: var(--card2);
  flex-shrink: 0; border: 1px solid var(--border);
}
.recent-name {
  font-size: .78rem; font-weight: 600; color: var(--txt2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 14px 14px;
  border-top: 1px solid var(--border);
}

.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 9px;
  cursor: pointer; transition: background .15s;
}
.user-row:hover { background: var(--surface); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-name { font-size: .8rem; font-weight: 600; color: var(--txt); }
.user-plan { font-size: .68rem; color: var(--txt3); }

/* ════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad); border: none; color: #fff;
  font-weight: 700; font-size: .95rem; padding: 13px 28px;
  border-radius: 10px; cursor: pointer;
  box-shadow: 0 0 20px var(--glow); transition: all .2s;
  width: 100%; justify-content: center;
}
.btn-primary:hover    { opacity: .88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1.5px solid var(--border-hi);
  color: var(--txt2); font-weight: 600; font-size: .9rem;
  padding: 11px 24px; border-radius: 10px; cursor: pointer;
  transition: all .15s; width: 100%; justify-content: center; margin-top: 10px;
}
.btn-ghost:hover { border-color: rgba(124,58,237,0.4); color: var(--txt); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid rgba(239,68,68,0.3); color: #ef4444;
  font-weight: 600; font-size: .85rem; padding: 10px 22px;
  border-radius: 9px; cursor: pointer; transition: all .15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.05); }

.btn-add {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1.5px solid var(--border-hi); color: var(--txt2);
  font-weight: 600; font-size: .85rem; padding: 10px 20px;
  border-radius: 10px; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.btn-add:hover   { border-color: var(--violet); color: var(--violet); background: rgba(124,58,237,0.04); }
.btn-add svg     { width: 15px; height: 15px; }

.btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

/* ════════════════════════════════════════════════════════
   CHIPS
   ════════════════════════════════════════════════════════ */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-hi); background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--txt2);
  cursor: pointer; transition: all .15s; user-select: none;
}
.chip:hover    { border-color: rgba(124,58,237,0.3); color: var(--txt); }
.chip.selected { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.4); color: var(--violet); }

/* onboarding variant */
.ob-chip {
  padding: 7px 15px; border-radius: 999px;
  border: 1.5px solid var(--border-hi); background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--txt2);
  cursor: pointer; transition: all .15s; user-select: none;
}
.ob-chip:hover    { border-color: rgba(124,58,237,0.3); color: var(--txt); }
.ob-chip.selected { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.4); color: var(--violet); }

/* ════════════════════════════════════════════════════════
   STYLE GRID (ad style picker)
   ════════════════════════════════════════════════════════ */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.style-card { border: 1.5px solid var(--border-hi); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: all .15s; }
.style-card:hover    { border-color: rgba(124,58,237,0.3); }
.style-card.selected { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.style-preview {
  height: 72px; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #fff;
}
.style-preview.clean { background: linear-gradient(135deg,#f8fafc,#e2e8f0); color: var(--txt3); }
.style-preview.bold  { background: linear-gradient(135deg,#7c3aed,#ec4899); }
.style-preview.life  { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.style-preview.promo { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.style-name { padding: 7px 10px; font-size: .78rem; font-weight: 600; color: var(--txt); background: var(--card); }

/* ════════════════════════════════════════════════════════
   FORM FIELDS
   ════════════════════════════════════════════════════════ */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-label { font-size: .8rem; font-weight: 600; color: var(--txt2); margin-bottom: 7px; display: block; }
.field-input {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border-hi); border-radius: 10px;
  font-size: .95rem; font-family: 'Inter',sans-serif;
  color: var(--txt); background: var(--surface); outline: none; transition: all .15s;
}
.field-input:focus { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,0.1); }
.field-hint { font-size: .72rem; color: var(--txt3); margin-top: 6px; display: flex; align-items: flex-start; gap: 5px; }
.field-hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ════════════════════════════════════════════════════════
   MODAL OVERLAY + BASE MODAL
   ════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 200; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }

/* Generate-ads modal (inside .modal-overlay) */
.modal {
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--rl); padding: 36px;
  width: 100%; max-width: 480px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 80px rgba(124,58,237,0.08);
  animation: modalIn .25s ease-out;
}
.modal-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 28px; }
.modal-step-dot { height: 3px; flex: 1; border-radius: 99px; background: var(--border-hi); transition: background .3s; }
.modal-step-dot.done   { background: var(--grad); }
.modal-step-dot.active { background: var(--violet); }
.modal-step        { display: none; }
.modal-step.active { display: block; }
.modal-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--violet); margin-bottom: 6px; }
.modal h2    { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.modal-sub   { font-size: .85rem; color: var(--txt2); margin-bottom: 22px; }
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn-back { background: none; border: 1px solid var(--border-hi); color: var(--txt2); font-weight: 600; font-size: .85rem; padding: 10px 18px; border-radius: 9px; cursor: pointer; transition: all .15s; }
.btn-back:hover { border-color: var(--violet); color: var(--txt); }
.btn-next { background: var(--grad); border: none; color: #fff; font-weight: 700; font-size: .85rem; padding: 10px 22px; border-radius: 9px; cursor: pointer; box-shadow: 0 0 16px var(--glow); transition: all .2s; margin-left: auto; }
.btn-next:hover { opacity: .88; }
.modal-product-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 999px; padding: 5px 12px 5px 5px; margin-bottom: 20px; }
.modal-product-thumb { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--card2); }
.modal-product-name  { font-size: .78rem; font-weight: 600; color: var(--txt); }

/* ════════════════════════════════════════════════════════
   PAGE HEADERS
   ════════════════════════════════════════════════════════ */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.page-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 4px; }
.page-header p  { font-size: .88rem; color: var(--txt3); }
.page-header-left h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 4px; }
.page-header-left p  { font-size: .88rem; color: var(--txt3); }

/* ════════════════════════════════════════════════════════
   PRODUCT GRID
   ════════════════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.product-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--rl); overflow: hidden; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  min-width: 0;
}
.product-card:hover {
  border-color: rgba(124,58,237,0.3);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.1), 0 12px 40px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.product-img {
  width: 100%; aspect-ratio: 1/1;
  object-fit: cover; background: var(--surface); display: block;
}
.product-img-placeholder {
  width: 100%; aspect-ratio: 1/1; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.product-img-placeholder svg { width: 36px; height: 36px; color: var(--txt3); opacity: .4; }

.product-body { padding: 14px 16px 16px; }
.product-name {
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-meta { font-size: .75rem; color: var(--txt3); margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.product-stats { display: flex; gap: 12px; margin-bottom: 14px; }
.product-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; flex: 1; text-align: center;
}
.product-stat-val {
  font-size: .88rem; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 2px;
}
.product-stat-lbl { font-size: .6rem; font-weight: 500; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; }
.product-stat.generating { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.25); }
.generating-val {
  background: none !important; -webkit-text-fill-color: var(--violet) !important;
  color: var(--violet) !important;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.generating-val::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,0.3); border-top-color: var(--violet);
  animation: spin .7s linear infinite; flex-shrink: 0;
}

.btn-generate {
  width: 100%; background: var(--grad); border: none; color: #fff;
  font-weight: 700; font-size: .9rem; padding: 13px 16px; border-radius: 10px;
  cursor: pointer; box-shadow: 0 4px 20px rgba(124,58,237,0.38); transition: all .2s;
  letter-spacing: .01em;
}
.btn-generate:hover {
  opacity: .92; transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(124,58,237,0.52);
}

/* Generating overlay on product image */
.product-img-wrap { position: relative; overflow: hidden; display: block; }
.product-gen-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(15,10,30,0.82) 0%, rgba(15,10,30,0) 100%);
  padding: 28px 12px 11px;
}
.pgo-row {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; color: #fff; margin-bottom: 7px;
}
.pgo-spin {
  width: 11px; height: 11px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.pgo-bar { height: 2px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.pgo-bar-fill {
  height: 100%; width: 35%; background: linear-gradient(90deg,rgba(124,58,237,0.9),rgba(167,139,250,0.9));
  border-radius: 999px;
  animation: pgo-sweep 1.6s ease-in-out infinite;
}
@keyframes pgo-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(380%); }
}

/* Add product card */
.product-card.add-card {
  border: 2px dashed var(--border-hi); background: transparent;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; min-height: 280px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.product-card.add-card:hover {
  border-color: rgba(124,58,237,0.4);
  background: rgba(124,58,237,0.03);
  transform: none; box-shadow: none;
}
.add-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2);
  display: flex; align-items: center; justify-content: center;
}
.add-icon svg { width: 20px; height: 20px; color: var(--violet); }
.add-label { font-size: .85rem; font-weight: 600; color: var(--txt2); }

/* ════════════════════════════════════════════════════════
   AD GRID & CARDS
   ════════════════════════════════════════════════════════ */
.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
  width: 100%;
  align-items: start;
}

.ad-card.skeleton { pointer-events: none; }

/* Creative area */
.ad-creative {
  width: 100%;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ad-creative img { width: 100%; height: auto; display: block; }

/* Badges */
.ad-platform-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; padding: 5px 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ad-product-tag {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 3px 9px;
  font-size: .6rem; font-weight: 600; color: rgba(255,255,255,0.9);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Center layout */
.ad-product-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-overlay-dark   { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); pointer-events: none; }
.ad-center-content { position: absolute; bottom: 14px; left: 14px; right: 14px; }
.ad-eyebrow-center { font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
.ad-headline-center { font-size: .78rem; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 2px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.ad-sub-center { font-size: .62rem; color: rgba(255,255,255,0.75); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* Split layout */
.ad-layout-split { display: flex; width: 100%; height: 100%; align-items: stretch; }
.ad-text-col { flex: 1; padding: 16px 10px 16px 14px; display: flex; flex-direction: column; justify-content: center; }
.ad-headline-lg { font-size: .78rem; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.ad-sub-txt { font-size: .62rem; color: rgba(255,255,255,0.7); line-height: 1.4; }
.ad-img-col { width: 46%; flex-shrink: 0; overflow: hidden; position: relative; }
.ad-product-img-right { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shared creative text */
.ad-eyebrow   { font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.55); margin-bottom: 5px; }
.ad-cta-pill  { display: inline-block; background: #fff; color: #0f172a; font-size: .6rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-top: 8px; }

/* Card body */
.ad-body { padding: 12px 14px 14px; }
.ad-platform-tag { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: .65rem; font-weight: 600; color: var(--txt3); margin-bottom: 10px; }
.ad-copy-section { margin-bottom: 10px; }
.ad-copy-primary {
  font-size: .82rem; font-weight: 800; color: var(--txt);
  line-height: 1.35; margin-bottom: 3px; letter-spacing: -.01em;
  cursor: text; border-radius: 5px; padding: 1px 4px; margin-left: -4px; transition: background .15s;
}
.ad-copy-primary:hover { background: rgba(124,58,237,0.07); }
.ad-copy-primary:hover::after { content: ' ✎'; font-size: .65rem; color: var(--txt3); }
.ad-copy-body { font-size: .72rem; color: var(--txt2); line-height: 1.5; margin-bottom: 8px; }
.ad-cta-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-top: 8px; margin-bottom: 3px; }
.ad-cta-btn-preview { display: inline-block; background: var(--surface); border: 1px dashed var(--border-hi); color: var(--txt3); font-size: .7rem; font-weight: 500; padding: 4px 10px; border-radius: 6px; font-style: italic; }
.ad-footer { display: flex; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 10px; }

.ad-btn {
  background: none; border: 1px solid var(--border-hi); border-radius: 7px;
  padding: 5px 9px; font-size: .7rem; font-weight: 600; color: var(--txt2);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ad-btn:hover         { border-color: var(--violet); color: var(--violet); }
.ad-btn.primary       { background: var(--grad); border-color: transparent; color: #fff; }
.ad-btn.primary:hover { opacity: .88; }
.ad-btn.refine        { background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.25); color: var(--violet); flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ad-btn.refine:hover  { background: rgba(124,58,237,0.13); border-color: var(--violet); }

/* Skeleton */
.skeleton-img {
  width: 100%; aspect-ratio: 1/1;
  background: linear-gradient(90deg, var(--card2) 25%, #e8edf2 50%, var(--card2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
  position: relative;
}
.skeleton-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.skeleton-line {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--card2) 25%, #e8edf2 50%, var(--card2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line.short { width: 55%; }
.skeleton-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: .65rem; font-weight: 600; color: var(--txt3);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.skeleton-label .mini-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(124,58,237,0.2); border-top-color: var(--violet);
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* Headline inline-edit input */
.ad-headline-input {
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35;
  border: 1.5px solid var(--violet); border-radius: 5px; padding: 2px 6px;
  outline: none; color: var(--txt); background: var(--card);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1); width: 100%; font-family: 'Inter',sans-serif;
}

/* Misc ad creative helpers */
.ad-creative-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%); pointer-events: none; }
.ad-copy-overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; color: #fff; }
.ad-copy-headline { font-size: .78rem; font-weight: 800; line-height: 1.3; margin-bottom: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.ad-copy-sub { font-size: .62rem; opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* === MODAL BOX === */
.modal-box { background:var(--card);border:1px solid var(--border-hi);border-radius:var(--rl);padding:0;width:100%;max-width:480px;box-shadow:0 24px 80px rgba(0,0,0,0.15);animation:modalIn .25s ease-out;overflow:hidden; }
.modal-box-header { display:flex;align-items:center;justify-content:space-between;padding:22px 28px 18px;border-bottom:1px solid var(--border); }
.modal-box-title { font-size:1rem;font-weight:800;letter-spacing:-.01em; }
.modal-close-btn { background:none;border:none;cursor:pointer;color:var(--txt3);padding:4px;border-radius:6px;display:flex;align-items:center;transition:color .15s; }
.modal-close-btn:hover { color:var(--txt); }
.modal-close-btn svg { width:18px;height:18px; }
.modal-box-footer { display:flex;justify-content:flex-end;gap:10px;padding:20px 28px;margin-top:18px;border-top:1px solid var(--border); }
.ep-field { padding:18px 28px 0; }
.ep-label { display:block;font-size:.78rem;font-weight:600;color:var(--txt2);margin-bottom:7px; }
.ep-input { width:100%;padding:10px 14px;border:1.5px solid var(--border-hi);border-radius:9px;font-size:.9rem;font-family:Inter,sans-serif;color:var(--txt);background:var(--surface);outline:none;transition:all .15s; }
.ep-input:focus { border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
.ep-img-row { display:flex;gap:14px;align-items:flex-start; }
.ep-img-preview { width:72px;height:72px;border-radius:10px;border:1px solid var(--border-hi);background:var(--card2);flex-shrink:0;overflow:hidden; }
.ep-img-preview img { width:100%;height:100%;object-fit:cover;display:block; }
.ep-img-actions { flex:1;display:flex;flex-direction:column;gap:8px; }
.ep-btn-upload { display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1.5px solid var(--border-hi);color:var(--txt2);font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;transition:all .15s;white-space:nowrap; }
.ep-btn-upload:hover { border-color:var(--violet);color:var(--violet); }
.ep-btn-upload svg { width:14px;height:14px; }
.ep-btn-cancel { background:none;border:1.5px solid var(--border-hi);color:var(--txt2);font-weight:600;font-size:.88rem;padding:9px 18px;border-radius:9px;cursor:pointer;transition:all .15s; }
.ep-btn-cancel:hover { border-color:var(--txt2);color:var(--txt); }
.ep-btn-save { background:var(--grad);border:none;color:#fff;font-weight:700;font-size:.88rem;padding:9px 22px;border-radius:9px;cursor:pointer;box-shadow:0 0 16px var(--glow);transition:all .2s; }
.ep-btn-save:hover { opacity:.88; }
.ep-btn-save:disabled { opacity:.5;cursor:not-allowed; }
.ep-btn-apply { background:#10b981;border:none;color:#fff;font-weight:700;font-size:.88rem;padding:9px 22px;border-radius:9px;cursor:pointer;transition:all .2s; }
.ep-btn-apply:hover { opacity:.88; }
.refine-context { font-size:.82rem;font-weight:700;color:var(--txt);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-top:18px;line-height:1.4; }
.refine-textarea { resize:none;line-height:1.6; }
.refine-result { margin:0 28px;background:rgba(124,58,237,0.05);border:1px solid rgba(124,58,237,0.2);border-radius:10px;padding:14px 16px; }
.refine-result-row { display:flex;flex-direction:column;gap:2px;margin-bottom:10px; }
.refine-result-row:last-child { margin-bottom:0; }
.refine-result-label { font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--violet); }
.refine-result-row span:last-child { font-size:.82rem;color:var(--txt);line-height:1.45; }

/* === AD POPUP === */
.ad-popup { background:var(--card);border-radius:20px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 100px rgba(0,0,0,0.2);animation:modalIn .25s ease-out;position:relative; }
.ad-popup-close { position:absolute;top:14px;right:14px;z-index:10;background:rgba(255,255,255,0.9);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s; }
.ad-popup-close:hover { background:#fff;border-color:var(--violet);color:var(--violet); }
.ad-popup-close svg { width:16px;height:16px; }
.ad-popup-inner { display:flex;flex-direction:column; }
.ad-popup-creative { position:relative;overflow:hidden;border-radius:20px 20px 0 0; }
.ad-popup-creative .ad-creative { width:100%;border-radius:0; }
.ad-popup-details { padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px; }
.ad-popup-headline { font-size:.95rem;font-weight:800;letter-spacing:-.01em;line-height:1.4;color:var(--txt); }
.ad-popup-body { font-size:.8rem;color:var(--txt3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.ad-popup-actions { display:flex;gap:6px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border); }

/* === ADD PRODUCT MODAL === */
.ap-modal { background:var(--card);border:1px solid var(--border-hi);border-radius:var(--rl);padding:36px;width:100%;max-width:520px;box-shadow:0 24px 80px rgba(0,0,0,0.15);animation:modalIn .25s ease-out;max-height:90vh;overflow-y:auto; }
.ap-progress { display:flex;gap:6px;margin-bottom:20px; }
.ap-dot { height:3px;flex:1;border-radius:99px;background:var(--border-hi);transition:background .3s; }
.ap-dot.done { background:var(--grad); }
.ap-dot.active { background:var(--violet); }
.ap-label { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--violet);margin-bottom:6px; }
.ap-title { font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px; }
.ap-step { display:none; }
.ap-step.active { display:block; }
.ap-field { margin-bottom:18px; }
.ap-field-label { display:block;font-size:.78rem;font-weight:600;color:var(--txt2);margin-bottom:7px; }
.ap-input { width:100%;padding:10px 14px;border:1.5px solid var(--border-hi);border-radius:9px;font-size:.9rem;font-family:Inter,sans-serif;color:var(--txt);background:var(--surface);outline:none;transition:all .15s; }
.ap-input:focus { border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
.ap-method-tabs { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px; }
.ap-method-tab { padding:10px 14px;border-radius:10px;border:1.5px solid var(--border-hi);background:var(--surface);cursor:pointer;text-align:center;transition:all .15s; }
.ap-method-tab.active { border-color:var(--violet);background:rgba(124,58,237,0.06); }
.ap-method-tab-icon { font-size:1.1rem;margin-bottom:3px; }
.ap-method-tab-label { font-size:.8rem;font-weight:700;color:var(--txt); }
.ap-method-tab-sub { font-size:.68rem;color:var(--txt3); }
.ap-panel { display:none; }
.ap-panel.active { display:block; }
.ap-upload-box { border:2px dashed var(--border-hi);border-radius:var(--r);padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;margin-bottom:10px; }
.ap-upload-box:hover { border-color:rgba(124,58,237,0.5);background:rgba(124,58,237,0.03); }
.ap-upload-box input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer; }
.ap-upload-box svg { width:28px;height:28px;color:var(--txt3);opacity:.4;margin-bottom:8px; }
.ap-upload-box-title { font-size:.85rem;font-weight:700;color:var(--txt2);margin-bottom:3px; }
.ap-upload-box-hint { font-size:.7rem;color:var(--txt3); }
.ap-upload-preview { display:none;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:10px; }
.ap-upload-preview img { width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--border); }
.ap-upload-preview-name { font-size:.78rem;font-weight:600;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ap-upload-preview-remove { background:none;border:none;color:var(--txt3);cursor:pointer;font-size:.9rem;padding:2px 6px; }
.ap-footer { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border); }
.ap-btn-back { background:none;border:1.5px solid var(--border-hi);color:var(--txt2);font-weight:600;font-size:.85rem;padding:10px 18px;border-radius:9px;cursor:pointer;transition:all .15s; }
.ap-btn-back:hover { border-color:var(--txt2);color:var(--txt); }
.ap-btn-next { background:var(--grad);border:none;color:#fff;font-weight:700;font-size:.88rem;padding:10px 22px;border-radius:9px;cursor:pointer;box-shadow:0 0 16px var(--glow);transition:opacity .2s;margin-left:auto; }
.ap-btn-next:hover { opacity:.88; }
.ap-btn-next:disabled { opacity:.4;cursor:not-allowed; }
.ap-url-hero-wrap { display:flex;align-items:center;gap:11px;background:var(--surface);border:2px solid var(--border-hi);border-radius:13px;padding:0 16px;margin-bottom:10px;transition:border-color .15s,box-shadow .15s; }
.ap-url-hero-wrap:focus-within { border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,0.1);background:#fff; }
.ap-url-hero-wrap:focus-within #apUrlHeroIcon { color:var(--violet); }
.ap-url-hero-input { flex:1;border:none;outline:none;background:transparent;font-size:.97rem;font-family:Inter,sans-serif;color:var(--txt);padding:16px 0;min-width:0; }
.ap-url-hero-input::placeholder { color:var(--txt3); }
.ap-url-hero-hint { font-size:.77rem;color:var(--txt3);margin-bottom:0; }
.ap-manual-divider { display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--txt3);font-size:.78rem; }
.ap-manual-divider::before,.ap-manual-divider::after { content:'';flex:1;height:1px;background:var(--border); }
.ap-manual-link { display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--txt3);font-size:.82rem;font-weight:600;cursor:pointer;padding:0;transition:color .15s;font-family:Inter,sans-serif; }
.ap-manual-link:hover { color:var(--txt); }
.ap-back-to-url { display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--violet);font-size:.78rem;font-weight:600;cursor:pointer;padding:0;transition:opacity .15s;font-family:Inter,sans-serif; }
.ap-back-to-url:hover { opacity:.75; }
.ap-scrape-spinner { width:32px;height:32px;border:3px solid var(--border-hi);border-top-color:var(--violet);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 18px; }
@keyframes spin { to { transform:rotate(360deg); } }
.ap-scrape-img-wrap { width:80px;height:80px;border-radius:12px;border:1.5px solid var(--border-hi);background:var(--card2);flex-shrink:0;overflow:hidden;cursor:pointer;position:relative;transition:border-color .15s; }
.ap-scrape-img-wrap:hover { border-color:rgba(124,58,237,0.5); }
.ap-scrape-img-opt { width:56px;height:56px;border-radius:8px;object-fit:cover;border:2px solid var(--border);cursor:pointer;transition:all .15s; }
.ap-scrape-img-opt:hover { border-color:var(--violet); }
.ap-scrape-img-opt.selected { border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,0.2); }
.ap-success-check { width:52px;height:52px;border-radius:50%;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#10b981; }
.ap-success-secondary { background:none;border:none;color:var(--txt3);font-size:.83rem;font-weight:500;cursor:pointer;font-family:Inter,sans-serif;padding:4px 8px;transition:color .15s; }
.ap-success-secondary:hover { color:var(--txt); }
.ap-audience-add { display:flex;gap:6px; }
.ap-audience-input { flex:1;padding:7px 12px;border:1.5px solid var(--border-hi);border-radius:8px;font-size:.82rem;font-family:Inter,sans-serif;color:var(--txt);background:var(--surface);outline:none;transition:border-color .15s; }
.ap-audience-input:focus { border-color:var(--violet);background:#fff; }
.ap-audience-add-btn { padding:7px 14px;border-radius:8px;background:var(--surface);border:1.5px solid var(--border-hi);color:var(--txt2);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:Inter,sans-serif; }
.ap-audience-add-btn:hover { border-color:var(--violet);color:var(--violet); }

/* === IMAGE REQUIRED POPUP === */
.ir-modal { background:var(--card);border:1px solid var(--border-hi);border-radius:var(--rl);padding:32px 36px;width:100%;max-width:440px;box-shadow:0 24px 80px rgba(0,0,0,0.15);animation:modalIn .25s ease-out; }
.ir-icon { width:44px;height:44px;border-radius:12px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:16px; }
.ir-icon svg { width:22px;height:22px;color:#f59e0b; }
.ir-title { font-size:1.1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px; }
.ir-sub { font-size:.88rem;color:var(--txt2);line-height:1.55;margin-bottom:20px; }
.ir-product-chip { display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px 4px 4px;margin-bottom:20px;font-size:.78rem;font-weight:600;color:var(--txt); }
.ir-product-chip-dot { width:20px;height:20px;border-radius:50%;background:var(--grad); }
.ir-upload-box { border:2px dashed var(--border-hi);border-radius:var(--r);padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;margin-bottom:10px; }
.ir-upload-box:hover { border-color:rgba(124,58,237,0.5);background:rgba(124,58,237,0.03); }
.ir-upload-box input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer; }
.ir-upload-box svg { width:28px;height:28px;color:var(--txt3);opacity:.4;margin-bottom:8px; }
.ir-upload-box-title { font-size:.85rem;font-weight:700;color:var(--txt2);margin-bottom:3px; }
.ir-upload-box-hint { font-size:.7rem;color:var(--txt3); }
.ir-upload-preview { display:none;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:12px; }
.ir-upload-preview img { width:44px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--border); }
.ir-upload-preview-name { font-size:.78rem;font-weight:600;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ir-footer { display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════
   ONBOARDING PAGE
   ═══════════════════════════════════════════════════════ */
/* onboarding body needs flex column, not overflow:hidden */
body.onboarding-page { overflow:visible;display:flex;flex-direction:column;min-height:100vh; }
.topbar { display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;position:relative;z-index:1000; }
.topbar-logo { font-weight:800;font-size:1.1rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.topbar-step { font-size:.78rem;font-weight:600;color:var(--txt3); }
.progress-wrap { height:3px;background:var(--border);flex-shrink:0;position:relative;z-index:1000; }
.progress-fill { height:100%;background:var(--grad);transition:width .4s ease; }
.onboard-wrap { flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px; }
.ob-card { background:var(--card);border:1px solid var(--border-hi);border-radius:var(--rl);padding:48px 52px;width:100%;max-width:560px;box-shadow:0 8px 40px rgba(0,0,0,0.07),0 0 60px rgba(124,58,237,0.04);animation:cardIn .3s ease-out; }
.ob-step { display:none; }
.ob-step.active { display:block; }
.ob-eyebrow { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--violet);margin-bottom:10px; }
.ob-title { font-size:1.7rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px; }
.ob-title em { font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.ob-sub { font-size:.9rem;color:var(--txt2);line-height:1.65;margin-bottom:32px; }
.input-method-tabs { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px; }
.method-tab { padding:12px 16px;border-radius:10px;border:1.5px solid var(--border-hi);background:var(--surface);cursor:pointer;transition:all .15s;text-align:center; }
.method-tab:hover { border-color:rgba(124,58,237,0.3); }
.method-tab.active { border-color:var(--violet);background:rgba(124,58,237,0.06);box-shadow:0 0 0 3px rgba(124,58,237,0.08); }
.method-tab-icon { font-size:1.2rem;margin-bottom:4px; }
.method-tab-label { font-size:.82rem;font-weight:700;color:var(--txt); }
.method-tab-sub { font-size:.7rem;color:var(--txt3);margin-top:1px; }
.method-panel { display:none; }
.method-panel.active { display:block; }
.url-warning { display:flex;align-items:flex-start;gap:10px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:9px;padding:12px 14px;margin-bottom:16px; }
.url-warning svg { width:16px;height:16px;color:#f59e0b;flex-shrink:0;margin-top:1px; }
.url-warning p { font-size:.78rem;color:var(--txt2);line-height:1.5; }
.url-warning strong { color:var(--txt); }
.upload-box { border:2px dashed var(--border-hi);border-radius:var(--r);padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative; }
.upload-box:hover,.upload-box.dragover { border-color:rgba(124,58,237,0.5);background:rgba(124,58,237,0.03); }
.upload-box input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer; }
.upload-box svg { width:32px;height:32px;color:var(--txt3);opacity:.5;margin-bottom:10px; }
.upload-box-title { font-size:.88rem;font-weight:700;color:var(--txt2);margin-bottom:4px; }
.upload-box-hint { font-size:.72rem;color:var(--txt3); }
.upload-preview { display:none;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:9px;margin-top:12px; }
.upload-preview img { width:44px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--border); }
.upload-preview-name { font-size:.8rem;font-weight:600;color:var(--txt);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.upload-preview-remove { background:none;border:none;color:var(--txt3);cursor:pointer;font-size:1rem;padding:2px 6px;transition:color .15s; }
.upload-preview-remove:hover { color:#ef4444; }
.good-image-guide { background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-top:16px; }
.guide-title { font-size:.78rem;font-weight:700;color:var(--txt);margin-bottom:10px;display:flex;align-items:center;gap:7px; }
.guide-title svg { width:14px;height:14px;color:var(--violet); }
.guide-list { display:flex;flex-direction:column;gap:7px; }
.guide-item { display:flex;align-items:flex-start;gap:8px;font-size:.75rem;color:var(--txt2);line-height:1.45; }
.guide-dot { width:6px;height:6px;border-radius:50%;background:var(--grad);flex-shrink:0;margin-top:5px; }
.guide-item.bad .guide-dot { background:#ef4444; }
.loading-screen { display:none;position:fixed;inset:0;background:var(--bg);z-index:999;flex-direction:column;align-items:center;justify-content:center;padding:40px; }
.loading-screen.active { display:flex; }
.loading-inner { text-align:center;max-width:400px;width:100%; }
.loading-logo { font-weight:800;font-size:1.1rem;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:40px; }
.loading-spinner { width:52px;height:52px;border:3px solid rgba(124,58,237,0.15);border-top-color:var(--violet);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 32px; }
.loading-title { font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px; }
.loading-sub { font-size:.88rem;color:var(--txt3);margin-bottom:32px;min-height:22px;transition:opacity .3s; }
.loading-bar-wrap { height:6px;background:var(--card2);border-radius:999px;overflow:hidden;margin-bottom:10px; }
.loading-bar-fill { height:100%;background:var(--grad);border-radius:999px;width:0%;transition:width .8s ease; }
.loading-pct { font-size:.82rem;font-weight:700;color:var(--violet); }

/* ═══════════════════════════════════════════════════════
   SETTINGS PAGE
   ═══════════════════════════════════════════════════════ */
.settings-layout { display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:start; }
.settings-tabs { display:flex;flex-direction:column;gap:2px;position:sticky;top:0; }
.stab { display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:10px;font-size:.92rem;font-weight:500;color:var(--txt2);cursor:pointer;transition:all .15s;border:none;background:none;text-align:left;width:100%; }
.stab:hover { background:var(--card);color:var(--txt); }
.stab.active { background:var(--card);color:var(--violet);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.stab svg { width:18px;height:18px;flex-shrink:0; }
.settings-panel { display:none; }
.settings-panel.active { display:block; }
.s-card { background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:28px 32px;margin-bottom:20px; }
.s-card-title { font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px; }
.s-card-sub { font-size:.82rem;color:var(--txt3);margin-bottom:24px; }
.s-divider { height:1px;background:var(--border);margin:20px 0; }
.tone-chip { padding:6px 14px;border-radius:999px;border:1px solid var(--border-hi);background:var(--surface);font-size:.8rem;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .15s;user-select:none; }
.tone-chip:hover { border-color:rgba(124,58,237,0.3);color:var(--txt); }
.tone-chip.active { background:rgba(124,58,237,0.1);border-color:rgba(124,58,237,0.4);color:var(--violet); }
.colour-swatch { width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border-hi);cursor:pointer;transition:transform .15s; }
.colour-swatch:hover { transform:scale(1.1); }
.add-swatch { background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:var(--txt3); }
.logo-upload-box { border:2px dashed var(--border-hi);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:all .15s; }
.logo-upload-box:hover { border-color:rgba(124,58,237,0.4);background:rgba(124,58,237,0.02); }
.logo-upload-box svg { width:28px;height:28px;color:var(--txt3);margin-bottom:8px; }
.logo-upload-txt { font-size:.85rem;font-weight:600;color:var(--txt2);margin-bottom:3px; }
.logo-upload-hint { font-size:.72rem;color:var(--txt3); }
.integration-row { display:flex;align-items:center;gap:14px;padding:4px 0; }
.integration-icon { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;color:#fff;flex-shrink:0; }
.integration-icon.meta { background:#1877f2; }
.integration-icon.tiktok { background:#010101; }
.integration-icon.pinterest { background:#e60023; }
.integration-icon.shopify { background:#96bf48; }
.integration-info { flex:1; }
.integration-name { font-size:.88rem;font-weight:700;color:var(--txt);line-height:1.2; }
.integration-sub { font-size:.72rem;color:var(--txt3); }
.btn-connect { padding:7px 16px;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;border:1px solid var(--border-hi);background:var(--surface);color:var(--txt2);transition:all .15s;white-space:nowrap; }
.btn-connect:hover { border-color:var(--violet);color:var(--violet); }
.btn-connect.connected { background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.3);color:#10b981; }
.usage-bar-bg { height:8px;background:var(--card2);border-radius:999px;overflow:hidden; }
.usage-bar-fill { height:100%;background:var(--grad);border-radius:999px;transition:width .6s ease; }

/* ═══════════════════════════════════════════════════════
   AD LIBRARY PAGE
   ═══════════════════════════════════════════════════════ */
.header-stat { text-align:right; }
.header-stat-val { font-size:1.4rem;font-weight:900;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.header-stat-lbl { font-size:.72rem;color:var(--txt3);margin-top:2px; }
.filter-bar { display:flex;align-items:center;gap:10px;margin-bottom:28px;flex-wrap:wrap; }
.search-box { display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border-hi);border-radius:9px;padding:8px 14px;flex:1;min-width:180px;max-width:260px;transition:border-color .15s; }
.search-box:focus-within { border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,0.08); }
.search-box svg { width:14px;height:14px;color:var(--txt3);flex-shrink:0; }
.search-box input { border:none;outline:none;background:none;font-size:.85rem;font-family:Inter,sans-serif;color:var(--txt);width:100%; }
.search-box input::placeholder { color:var(--txt3); }
.filter-select { background:var(--card);border:1px solid var(--border-hi);border-radius:9px;padding:8px 14px;font-size:.85rem;font-family:Inter,sans-serif;color:var(--txt2);outline:none;cursor:pointer;transition:border-color .15s; }
.filter-select:focus { border-color:var(--violet); }
.filter-chips { display:flex;gap:6px;flex-wrap:wrap; }
.fchip { padding:7px 13px;border-radius:999px;border:1px solid var(--border-hi);background:var(--card);font-size:.78rem;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap; }
.fchip:hover { border-color:rgba(124,58,237,0.3);color:var(--txt); }
.fchip.active { background:rgba(124,58,237,0.1);border-color:rgba(124,58,237,0.4);color:var(--violet); }
.filter-bar-right { margin-left:auto;display:flex;gap:8px;align-items:center; }
.view-btn { width:32px;height:32px;border-radius:7px;border:1px solid var(--border-hi);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s; }
.view-btn:hover,.view-btn.active { border-color:var(--violet);background:rgba(124,58,237,0.08); }
.view-btn svg { width:14px;height:14px;color:var(--txt3); }
.view-btn.active svg { color:var(--violet); }

/* Compact photo-only grid */
.ad-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 8px;
  margin-bottom: 36px;
  width: 100%;
  align-items: start;
}
.ad-card-compact {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1/1; background: var(--card2);
  cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.ad-card-compact:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.13); }
.ad-card-compact img { width:100%; height:100%; object-fit:cover; display:block; }
.empty-state { text-align:center;padding:80px 20px;color:var(--txt3); }
.empty-state svg { width:40px;height:40px;margin-bottom:14px;opacity:.3; }
.empty-state p { font-size:.9rem; }

/* ═══════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════ */
.product-header { display:flex;align-items:center;gap:20px;margin-bottom:32px; }
.back-btn { display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--txt3);cursor:pointer;transition:color .15s;text-decoration:none;flex-shrink:0; }
.back-btn:hover { color:var(--violet); }
.back-btn svg { width:15px;height:15px; }
.divider-v { width:1px;height:28px;background:var(--border-hi);flex-shrink:0; }
.product-header-img { width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--card2);border:1px solid var(--border);flex-shrink:0; }
.product-header-info { flex:1;min-width:0; }
.product-header-name { font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;cursor:text;border-radius:6px;padding:2px 6px;margin-left:-6px;transition:background .15s; }
.product-header-name:hover { background:rgba(124,58,237,0.07); }
.product-header-name:hover::after { content:' ✎';font-size:.75rem;color:var(--txt3); }
.product-header-meta { font-size:.78rem;color:var(--txt3); }
.product-name-input { font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;border:1.5px solid var(--violet);border-radius:6px;padding:2px 8px;outline:none;color:var(--txt);background:var(--card);box-shadow:0 0 0 3px rgba(124,58,237,0.1);width:100%;font-family:Inter,sans-serif; }
.header-actions { display:flex;gap:10px;align-items:center; }
.btn-generate-more { display:inline-flex;align-items:center;gap:7px;background:var(--grad);border:none;color:#fff;font-weight:700;font-size:.85rem;padding:10px 20px;border-radius:10px;cursor:pointer;box-shadow:0 0 18px var(--glow);transition:all .2s;white-space:nowrap; }
.btn-generate-more:hover { opacity:.88;transform:translateY(-1px); }
.btn-generate-more svg { width:15px;height:15px; }
.btn-edit-product { display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--border-hi);color:var(--txt2);font-weight:600;font-size:.85rem;padding:9px 16px;border-radius:10px;cursor:pointer;transition:all .15s;white-space:nowrap; }
.btn-edit-product:hover { border-color:var(--violet);color:var(--violet); }
.btn-edit-product svg { width:15px;height:15px; }
.generating-banner { display:flex;align-items:center;gap:12px;background:rgba(124,58,237,0.06);border:1px solid rgba(124,58,237,0.18);border-radius:var(--r);padding:12px 18px;margin-bottom:28px; }
.gen-spinner { width:18px;height:18px;border:2px solid rgba(124,58,237,0.2);border-top-color:var(--violet);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0; }
.gen-banner-txt { font-size:.85rem;font-weight:600;color:var(--violet); }
.gen-banner-sub { font-size:.78rem;color:var(--txt3);margin-left:auto; }
.section-label { font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--txt3);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.section-label span { background:var(--card2);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-size:.68rem; }


/* ═══════════════════════════════════════════════════════
   SIDEBAR FOOTER WIDGETS
   ═══════════════════════════════════════════════════════ */

/* Generating progress */
.sidebar-generating {
  display: none;
  margin: 0 14px 8px;
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 10px;
  padding: 10px 12px;
}
.sidebar-generating.visible { display: block; }
.sg-header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.sg-spinner { width: 12px; height: 12px; border: 2px solid rgba(124,58,237,0.2); border-top-color: var(--violet); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.sg-label { font-size: .72rem; font-weight: 600; color: var(--violet); flex: 1; }
.sg-count { font-size: .68rem; color: var(--txt3); }
.sg-bar-bg { height: 4px; background: rgba(124,58,237,0.15); border-radius: 999px; overflow: hidden; }
.sg-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; transition: width .5s ease; }

/* Quota / usage */
.sidebar-quota {
  margin: 0 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.sq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sq-label { font-size: .7rem; font-weight: 600; color: var(--txt2); }
.sq-count { font-size: .68rem; color: var(--txt3); }
.sq-bar-bg { height: 5px; background: var(--card2); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.sq-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; transition: width .6s ease; }
.sq-bar-fill.warn { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.sq-upgrade-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 7px 10px; border-radius: 8px;
  background: var(--grad); border: none; color: #fff;
  font-size: .72rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 0 12px var(--glow); transition: opacity .2s;
}
.sq-upgrade-btn:hover { opacity: .88; }

/* ═══════════════════════════════════════════════════════
   UPGRADE MODAL
   ═══════════════════════════════════════════════════════ */
.upgrade-modal { position: relative;
  background: var(--card); border-radius: 24px;
  width: 100%; max-width: 1100px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 32px 100px rgba(0,0,0,0.2); animation: modalIn .25s ease-out;
}
.upgrade-modal-header { padding: 48px 52px 0; text-align: center; }
.upgrade-modal-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--violet); margin-bottom: 10px; }
.upgrade-modal-title { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 10px; }
.upgrade-modal-title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.upgrade-modal-sub { font-size: .95rem; color: var(--txt2); margin-bottom: 36px; }
.upgrade-plans { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 0 52px 48px; }
.up-plan {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 32px 24px; cursor: pointer; transition: all .25s; position: relative; background: var(--card);
}
.up-plan:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.up-plan.current { background: var(--surface); cursor: default; }
.up-plan.current:hover { transform: none; box-shadow: none; }
.up-plan.popular { border-color: rgba(124,58,237,0.5); background: linear-gradient(160deg,rgba(124,58,237,0.08),var(--card) 60%); box-shadow: 0 0 0 1px rgba(124,58,237,0.15),0 0 60px rgba(124,58,237,0.08); }
.up-plan.popular:hover { box-shadow: 0 0 0 1px rgba(124,58,237,0.3),0 20px 60px rgba(124,58,237,0.12); }
.up-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.up-plan-name { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); margin-bottom: 12px; }
.up-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.up-plan-price .amt { font-size: 2.4rem; font-weight: 900; color: var(--txt); line-height: 1; }
.up-plan-price .per { font-size: .85rem; color: var(--txt3); }
.up-plan-vol { text-align: center; padding: 16px 0; margin-bottom: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.up-plan-vol .vol-num { display: block; font-size: 2.6rem; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.up-plan-vol .vol-label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); margin-top: 5px; }
.up-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.up-plan-feats li { font-size: .82rem; color: var(--txt2); display: flex; align-items: center; gap: 8px; }
.up-plan-feats li::before { content: "✓"; font-weight: 800; color: var(--violet); font-size: .75rem; }
.up-plan-feats li.locked { color: var(--txt3); }
.up-plan-feats li.locked::before { content: "–"; color: var(--border-hi); }
.up-plan-btn { margin-top: 20px; width: 100%; padding: 11px; border-radius: 9px; font-size: .88rem; font-weight: 700; cursor: pointer; transition: opacity .2s; border: none; background: var(--surface); color: var(--txt2); border: 1.5px solid var(--border-hi); }
.up-plan-btn:hover { border-color: var(--violet); color: var(--violet); }
.up-plan.popular .up-plan-btn { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 14px var(--glow); }
.up-plan.popular .up-plan-btn:hover { opacity: .88; }
.up-plan.current .up-plan-btn { background: var(--card2); border-color: var(--border); color: var(--txt3); cursor: default; }
.upgrade-modal-footer { padding: 20px 52px 36px; text-align: center; font-size: .82rem; color: var(--txt3); border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════
   FEATURE LOCKED MODAL
   ═══════════════════════════════════════════════════════ */
.locked-modal {
  background: var(--card); border-radius: 20px; width: 100%; max-width: 400px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18); animation: modalIn .25s ease-out;
  padding: 36px; text-align: center;
}
.locked-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.locked-icon svg { width: 24px; height: 24px; color: var(--violet); }
.locked-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.locked-sub { font-size: .88rem; color: var(--txt2); line-height: 1.6; margin-bottom: 24px; }
.locked-plan-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--grad); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; margin-bottom: 24px; }
.locked-actions { display: flex; gap: 10px; justify-content: center; }


/* ═══════════════════════════════════════════════════════
   SIDEBAR USER CARD (merged user + quota)
   ═══════════════════════════════════════════════════════ */
.sidebar-user-card { margin: 0 10px 10px; padding: 12px; }
.suc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.suc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.suc-info { flex: 1; min-width: 0; }
.suc-name { font-size: .82rem; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suc-plan { font-size: .68rem; color: var(--txt3); }
.suc-quota-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.suc-quota-txt { font-size: .68rem; font-weight: 600; color: var(--txt2); }
.suc-quota-count { font-size: .68rem; color: var(--txt3); }
.suc-bar-bg { height: 3px; background: var(--border); border-radius: 999px; overflow: hidden; }
.suc-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; transition: width .6s ease; }
.suc-bar-fill.warn { background: linear-gradient(135deg,#f59e0b,#ef4444); }


/* ═══════════════════════════════════════════════════════
   BRAND SELECTOR
   ═══════════════════════════════════════════════════════ */
.brand-selector {
  margin: 0 10px 4px;
  position: relative;
}
.brand-selector-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px;
  cursor: pointer; transition: background .15s;
  border: 1px solid var(--border);
  background: var(--surface);
}
.brand-selector-inner:hover { background: var(--card2); }
.brand-dot {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; color: #fff;
}
.brand-name {
  flex: 1; font-size: .82rem; font-weight: 600; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-chevron { color: var(--txt3); flex-shrink: 0; transition: transform .2s; }
.brand-selector.open .brand-chevron { transform: rotate(180deg); }
.brand-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border-hi);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  z-index: 100; overflow: hidden;
}
.brand-selector.open .brand-dropdown { display: block; }
.brand-option {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; cursor: pointer; transition: background .15s;
  font-size: .82rem; font-weight: 500; color: var(--txt2);
}
.brand-option:hover { background: var(--surface); }
.brand-option.active { color: var(--violet); font-weight: 600; background: rgba(124,58,237,0.05); }
.brand-option-dot {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  background: var(--grad); display: flex; align-items: center;
  justify-content: center; font-size: .58rem; font-weight: 800; color: #fff;
}

.product-img-missing {
  background: rgba(245,158,11,0.06);
  border-bottom: 2px solid rgba(245,158,11,0.3);
  flex-direction: column;
  gap: 0;
}


.ad-card-actions {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.ad-card-actions .ad-btn { flex: 1; text-align: center; }

.ep-btn-archive { display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid rgba(239,68,68,0.3);color:#ef4444;font-weight:600;font-size:.85rem;padding:9px 14px;border-radius:9px;cursor:pointer;transition:all .15s; }
.ep-btn-archive:hover { background:rgba(239,68,68,0.06); }


/* ════════════════════════════════════════════════════════
   AD CARD — redesigned premium
   ════════════════════════════════════════════════════════ */
.ad-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  animation: fadeUp .35s ease-out both;
  cursor: default;
}
.ad-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(124,58,237,0.15);
  transform: translateY(-2px);
  border-color: rgba(124,58,237,0.25);
}
.ad-creative-wrap { display: block; line-height: 0; cursor: pointer; position: relative; }
.ad-creative-wrap:hover::after {
  content: View;
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}

/* Card info section */
.ad-card-info {
  padding: 12px 14px 6px;
}
.ad-card-platform {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .62rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt3);
  margin-bottom: 6px;
}
.ad-card-platform::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad); flex-shrink: 0;
}
.ad-card-headline {
  font-size: .88rem; font-weight: 700; color: var(--txt);
  line-height: 1.4; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}

/* Card actions */
.ad-card-actions {
  display: flex; gap: 6px;
  padding: 10px 14px 14px;
}
.ad-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 8px; border: 1px solid var(--border-hi);
  background: var(--surface); cursor: pointer;
  font-size: .75rem; font-weight: 600; color: var(--txt2);
  transition: all .15s ease; white-space: nowrap;
}
.ad-action-btn:hover { border-color: rgba(124,58,237,0.4); color: var(--violet); background: rgba(124,58,237,0.04); }
.ad-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ad-action-btn.refine { color: var(--violet); border-color: rgba(124,58,237,0.25); background: rgba(124,58,237,0.05); }
.ad-action-btn.refine:hover { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.4); }
.ad-action-btn.download { flex: 0 0 34px; padding: 0; }

.ad-card-body { font-size: .75rem; color: var(--txt3); line-height: 1.45; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px;color:var(--txt3); }

/* Skeleton grids inherit from .ad-grid (regular CSS grid) */

.ad-action-btn.copy { flex: 0 0 34px; }

/* ── Ad card copy & download redesign ── */
.ad-card-headline-row, .ad-card-body-row {
  display: flex; align-items: flex-start; gap: 6px; cursor: pointer;
  border-radius: 6px; padding: 3px 4px; margin: 0 -4px;
  transition: background .15s;
}
.ad-card-headline-row:hover, .ad-card-body-row:hover { background: rgba(124,58,237,0.06); }
.ad-card-headline-row .ad-card-headline,
.ad-card-body-row .ad-card-body { flex: 1; margin: 0; }
.ad-copy-icon {
  flex-shrink: 0; opacity: 0; transition: opacity .15s;
  color: var(--txt3); padding: 2px;
  display: flex; align-items: center;
}
.ad-card-headline-row:hover .ad-copy-icon,
.ad-card-body-row:hover .ad-copy-icon { opacity: 1; }
.ad-copy-icon svg { width: 12px; height: 12px; }
.ad-copy-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: #fff; font-size: .78rem; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  white-space: nowrap;
}
.ad-copy-toast.show { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 768px)
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile top bar ── */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: 56px; background: var(--card);
  border-bottom: 1px solid var(--border);
  align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.mobile-topbar-logo {
  font-weight: 800; font-size: 1.1rem;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mobile-burger {
  background: none; border: none; cursor: pointer;
  padding: 6px; color: var(--txt2);
  display: flex; align-items: center; justify-content: center;
}
.mobile-burger svg { width: 22px; height: 22px; }

/* ── Sidebar overlay backdrop ── */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 149;
  background: rgba(0,0,0,0.45);
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {

  /* Show mobile top bar */
  .mobile-topbar { display: flex; }

  /* Push content below fixed top bar */
  .app { flex-direction: column; height: auto; min-height: 100vh; }
  .main {
    padding: 72px 16px 24px;
    width: 100%;
    overflow-y: visible;
    height: auto;
  }

  /* Sidebar becomes slide-in drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Page header stacks on mobile */
  .page-header {
    flex-direction: column; align-items: flex-start; gap: 12px;
    margin-bottom: 20px;
  }
  .page-header h1, .page-header-left h1 { font-size: 1.3rem; }

  /* Product grid: single column */
  .product-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Ad card grid: single column */
  .ad-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Ad card full width */
  .ad-card { width: 100% !important; }

  /* Settings: stack layout, tabs become horizontal scroll row */
  .settings-layout {
    display: block !important;
  }
  .settings-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 0 0 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    position: static !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .stab {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: .82rem !important;
    width: auto !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }
  .stab svg { display: none; }
  .stab.active { box-shadow: none !important; }

  /* Filter bar wraps */
  .filter-bar { flex-wrap: wrap; gap: 8px; }

  /* ── Product detail header ── */
  .product-header {
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 20px;
    align-items: center;
  }
  .back-btn        { order: 1; flex-shrink: 0; }
  .divider-v       { display: none; }
  #productHeaderImgWrap { order: 2; flex-shrink: 0; }
  .product-header-img { width: 36px !important; height: 36px !important; }
  .product-header-info { order: 3; flex: 1; min-width: 0; }
  .product-header-name { font-size: 1rem !important; }
  /* Actions drop to second row, full width */
  .header-actions {
    order: 4;
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .btn-edit-product  { flex: 1; justify-content: center; font-size: .8rem !important; padding: 9px 10px !important; }
  .btn-generate-more { flex: 1; justify-content: center; font-size: .8rem !important; padding: 9px 10px !important; }

  /* Generate modal: slide up from bottom */
  .modal { width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important; bottom: 0 !important;
    top: auto !important; max-height: 88vh; overflow-y: auto;
  }
  #gmOverlay { align-items: flex-end !important; }

  /* Upgrade overlay: full screen (centred) */
  #upgradeOverlay { align-items: flex-start !important; padding: 0 !important; }

  /* ── Upgrade modal: full-screen with 2×2 grid ── */
  .upgrade-modal {
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 !important;
    height: 100vh; max-height: 100vh;
    overflow-y: auto;
  }
  .upgrade-modal-header { padding: 24px 20px 0 !important; }
  .upgrade-modal-title { font-size: 1.4rem !important; }
  .upgrade-modal-sub { font-size: .82rem !important; margin-bottom: 20px !important; }
  .upgrade-plans {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 16px 24px !important;
  }
  .up-plan { padding: 14px !important; }
  .up-plan-price .amt { font-size: 1.6rem !important; }
  .up-plan-vol { padding: 10px 0 !important; margin-bottom: 12px !important; }
  .up-plan-vol .vol-num { font-size: 1.6rem !important; }
  .up-plan-vol .vol-label { font-size: .62rem !important; }
  .up-plan-feats { gap: 5px !important; margin-bottom: 2px !important; }
  .up-plan-feats li { font-size: .75rem !important; }
  .up-plan-btn { padding: 8px !important; font-size: .8rem !important; margin-top: 12px !important; }
  .upgrade-modal-footer { padding: 16px 20px 24px !important; font-size: .75rem !important; }

  /* Chip groups wrap */
  .chip-group { gap: 6px; }

  /* Buttons full width where appropriate */
  .btn-primary, .btn-ghost { width: 100%; }
  .btn-row { flex-direction: column; gap: 8px; }
  .btn-row .btn-ghost, .btn-row .btn-primary,
  .btn-row .btn-danger { width: 100%; }

  /* Pricing grid single column */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-scroll-wrap { overflow: visible; }

  /* Recent list in sidebar stays readable */
  .recent-list { padding: 0 6px; }

  /* Usage / quota box */
  .suc-bar-bg { width: 100%; }

  /* Hide desktop body scroll lock on mobile */
  body.app-page { overflow: auto; }
}
.ad-action-btn.copy { display: none; }