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

:root {
  --bg: #FDFCF8;
  --fg: #2C2C24;
  --primary: #5D7052;
  --primary-fg: #F3F4F1;
  --secondary: #C18C5D;
  --accent: #E6DCCD;
  --accent-fg: #4A4A40;
  --muted: #F0EBE5;
  --muted-fg: #78786C;
  --border: #DED8CF;
  --surface: #FEFEFA;
  --surface2: #F0EBE5;
  --destructive: #A85448;
  --shadow-moss: 0 4px 20px -2px rgba(93,112,82,0.15);
  --shadow-clay: 0 4px 20px -2px rgba(193,140,93,0.15);
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Nunito', system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Grain texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* Blobs */
.blob-bg { position: fixed; pointer-events: none; z-index: 0; filter: blur(80px); opacity: 0.16; }
.blob-1 { width: 500px; height: 400px; background: #5D7052; border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; top: -100px; left: -150px; }
.blob-2 { width: 400px; height: 350px; background: #C18C5D; border-radius: 40% 60% 70% 30%/40% 70% 30% 60%; top: 200px; right: -100px; }
.blob-3 { width: 350px; height: 300px; background: #E6DCCD; border-radius: 50% 50% 30% 70%/40% 60% 40% 60%; bottom: 100px; left: 30%; opacity: 0.25; }

.app-wrapper { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ── Header ── */
header {
  padding: 1.25rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,252,248,0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(222,216,207,0.4);
}
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon { width: 38px; height: 38px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 17px; }
.logo-text { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--fg); }
.logo-text span { color: var(--primary); }
.badge-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; background: var(--accent); color: var(--accent-fg); padding: 0.22rem 0.7rem; border-radius: 999px; text-transform: uppercase; }

/* ── Mode switcher ── */
.mode-section { padding: 2.25rem 2.5rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.mode-headline { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--fg); text-align: center; line-height: 1.15; }
.mode-headline em { color: var(--primary); font-style: normal; }
.mode-sub { font-size: 0.9rem; color: var(--muted-fg); text-align: center; max-width: 460px; line-height: 1.6; }
.mode-switcher { display: inline-flex; background: var(--muted); border-radius: 999px; padding: 5px; gap: 4px; margin-top: 0.4rem; }
.mode-btn { padding: 0.48rem 1.4rem; border-radius: 999px; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.28s ease; background: transparent; color: var(--muted-fg); }
.mode-btn.active { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-moss); }
.mode-btn:not(.active):hover { color: var(--fg); background: rgba(93,112,82,0.08); }

/* ── Main layout ── */
.main-content {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 1.5rem; padding: 1.75rem 2.5rem;
  max-width: 1380px; margin: 0 auto; width: 100%;
}
.left-col { display: flex; flex-direction: column; gap: 1.25rem; }
.right-col { display: flex; flex-direction: column; gap: 1rem; }

/* ── Cards ── */
.card {
  background: rgba(254,254,250,0.92);
  border: 1px solid rgba(222,216,207,0.5);
  border-radius: 2rem; padding: 1.625rem;
  box-shadow: var(--shadow-moss);
}
.card-sm { border-radius: 1.5rem; padding: 1.2rem 1.4rem; }

/* ── Section label ── */
.section-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-fg);
  margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.45rem;
}
.section-label::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }

/* ── Input fields ── */
.input-label { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: var(--fg); margin-bottom: 0.4rem; display: block; }
.input-sublabel { font-size: 0.72rem; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.3rem; display: block; }

textarea.field-textarea, input.field-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 1.1rem;
  padding: 0.75rem 1.1rem; font-family: var(--font-sans); font-size: 0.9rem;
  color: var(--fg); background: rgba(255,255,255,0.5); outline: none;
  transition: all 0.28s ease; line-height: 1.6;
}
input.field-input { border-radius: 999px; height: 2.6rem; padding: 0 1.1rem; }
textarea.field-textarea::placeholder, input.field-input::placeholder { color: var(--muted-fg); }
textarea.field-textarea:focus, input.field-input:focus {
  border-color: rgba(93,112,82,0.5);
  box-shadow: 0 0 0 3px rgba(93,112,82,0.1);
  background: rgba(255,255,255,0.82);
}

.field-stack { display: flex; flex-direction: column; gap: 0.6rem; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.field-group { display: flex; flex-direction: column; gap: 0.3rem; }
.field-group select {
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0 1.1rem; height: 2.6rem; font-family: var(--font-sans);
  font-size: 0.875rem; color: var(--fg); background: rgba(255,255,255,0.5);
  outline: none; transition: all 0.28s ease;
}
.field-group select:focus { border-color: rgba(93,112,82,0.5); box-shadow: 0 0 0 3px rgba(93,112,82,0.1); }

/* ── Buttons ── */
.btn-primary {
  background: var(--primary); color: var(--primary-fg); border: none;
  border-radius: 999px; padding: 0.7rem 1.875rem;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.28s ease; box-shadow: var(--shadow-moss);
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
}
.btn-primary:hover { transform: scale(1.04); box-shadow: 0 6px 24px -4px rgba(93,112,82,0.3); }
.btn-primary:active { transform: scale(0.97); }

.btn-outline {
  background: transparent; color: var(--secondary);
  border: 2px solid var(--secondary); border-radius: 999px;
  padding: 0.48rem 1.2rem; font-family: var(--font-sans);
  font-size: 0.83rem; font-weight: 700; cursor: pointer;
  transition: all 0.28s ease; display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-outline:hover { background: rgba(193,140,93,0.08); transform: scale(1.03); }

.btn-ghost {
  background: transparent; color: var(--primary); border: none;
  border-radius: 999px; padding: 0.38rem 0.875rem;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.28s ease;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn-ghost:hover { background: rgba(93,112,82,0.1); }

.copy-btn {
  background: transparent; border: 1px solid rgba(222,216,207,0.8);
  border-radius: 999px; padding: 0.28rem 0.7rem;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  color: var(--muted-fg); cursor: pointer; transition: all 0.22s ease;
  display: inline-flex; align-items: center; gap: 0.28rem;
}
.copy-btn:hover { color: var(--primary); border-color: var(--primary); background: rgba(93,112,82,0.06); }
.copy-btn.copied { color: var(--primary); border-color: var(--primary); background: rgba(93,112,82,0.1); }

/* ── Input bar bottom ── */
.input-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.625rem; }
.char-hint { font-size: 0.78rem; color: var(--muted-fg); }

/* ── Empty state ── */
.empty-state-inner { text-align: center; padding: 2.75rem 2rem; }
.empty-icon { font-size: 2.75rem; display: block; margin-bottom: 0.875rem; }
.empty-state-inner h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--fg); margin-bottom: 0.5rem; }
.empty-state-inner p { font-size: 0.88rem; color: var(--muted-fg); line-height: 1.65; max-width: 380px; margin: 0 auto; }
.empty-tips { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; max-width: 340px; margin-left: auto; margin-right: auto; }
.empty-tip { display: flex; gap: 0.6rem; font-size: 0.82rem; color: var(--muted-fg); line-height: 1.5; }
.empty-tip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; margin-top: 7px; }

/* ── Loading ── */
.loading-inner { display: flex; flex-direction: column; align-items: center; padding: 1.4rem 1.5rem 1.5rem; gap: 0.7rem; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--muted); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.75s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--fg); }
.loading-sub { font-size: 0.8rem; color: var(--muted-fg); display: none; }
.loading-row { display: flex; align-items: center; gap: 0.6rem; }
.loading-bar { width: 220px; height: 3px; border-radius: 3px; background: rgba(93,112,82,0.15); overflow: hidden; position: relative; }
.loading-bar::after { content:''; position:absolute; inset:0; width:35%; background:var(--primary); border-radius:3px; animation: loading-bar-run 1.4s ease-in-out infinite; }
@keyframes loading-bar-run { 0%{transform:translateX(-100%)} 100%{transform:translateX(390%)} }

/* ── Save bar ── */
/* bottom copy-all bar */
.copy-all-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: rgba(93,112,82,0.07);
  border: 1.5px solid rgba(93,112,82,0.18);
  border-radius: 1.5rem;
  gap: 1rem;
}
.copy-all-hint {
  font-size: 0.78rem; font-weight: 700; color: var(--muted-fg);
  font-family: var(--font-sans);
}
.copy-all-btn {
  flex-shrink: 0; font-size: 0.82rem !important;
  padding: 0.55rem 1.1rem !important;
}

.save-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.375rem;
  background: rgba(93,112,82,0.06); border: 1px solid rgba(93,112,82,0.18);
  border-radius: 1.1rem;
}
.save-bar-left { font-size: 0.83rem; color: var(--muted-fg); display: flex; align-items: center; gap: 0.45rem; }
.save-bar-right { display: flex; gap: 0.625rem; }

/* ── Result block shared ── */
.result-block { display: flex; flex-direction: column; gap: 0.7rem; }
.result-header { display: flex; align-items: center; justify-content: space-between; }
.result-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--fg); display: flex; align-items: center; gap: 0.45rem; }
.result-title .ri { width: 26px; height: 26px; background: rgba(93,112,82,0.12); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.result-actions { display: flex; gap: 0.35rem; align-items: center; }

.result-box {
  background: rgba(240,235,229,0.38); border: 1px solid rgba(222,216,207,0.55);
  border-radius: 0.875rem; padding: 0.9rem 1.1rem;
}
.result-text { font-size: 0.92rem; line-height: 1.65; color: var(--fg); }
.result-text[contenteditable="true"] { outline: none; cursor: text; background: rgba(255,255,255,0.55); border-radius: 0.6rem; padding: 0.4rem; margin: -0.4rem; }

.result-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.45rem; }
.char-count { font-size: 0.72rem; color: var(--muted-fg); }
.char-count.good { color: var(--primary); }
.char-count.warn { color: var(--secondary); }
.field-count { font-size: 0.72rem; color: var(--muted-fg); font-weight: 800; white-space: nowrap; }
.field-count.good { color: var(--primary); }
.field-count.warn { color: var(--secondary); }
.field-count.watch { color: var(--destructive); }

/* ── Title variants ── */
.variants-list { display: flex; flex-direction: column; gap: 0.45rem; }
.variant-item {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.65rem 0.875rem; border-radius: 0.75rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all 0.22s ease; background: rgba(255,255,255,0.28);
}
.variant-item:hover { border-color: rgba(93,112,82,0.28); background: rgba(93,112,82,0.04); }
.variant-item.selected { border-color: var(--primary); background: rgba(93,112,82,0.06); }
.variant-badge {
  font-size: 0.67rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted-fg); padding: 0.18rem 0.55rem;
  background: var(--muted); border-radius: 999px; white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.variant-item.selected .variant-badge { background: rgba(93,112,82,0.15); color: var(--primary); }
.variant-text { font-size: 0.88rem; line-height: 1.5; color: var(--fg); }
.variant-toggle {
  border: none; background: transparent; color: var(--primary);
  font-size: 0.72rem; font-weight: 900; cursor: pointer;
  padding: 0.2rem 0; align-self: flex-start;
}
.variant-toggle:hover { text-decoration: underline; }

/* ── Tags ── */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tag-pill {
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.8rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700;
  background: rgba(93,112,82,0.1); color: var(--primary);
  border: 1px solid rgba(93,112,82,0.2);
  cursor: pointer; transition: all 0.18s ease; user-select: none;
}
.tag-pill:hover { background: rgba(93,112,82,0.18); transform: scale(1.04); }
.tag-pill.alt { background: rgba(193,140,93,0.1); color: #8B5E35; border-color: rgba(193,140,93,0.22); }

/* ── Selling points ── */
.sp-list { display: flex; flex-direction: column; gap: 0.45rem; }
.sp-item { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.875rem; line-height: 1.55; color: var(--fg); }
.sp-dot { width: 7px; height: 7px; background: var(--secondary); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* ═══════════════════════════════════════
   OPTIMIZE-SPECIFIC STYLES
═══════════════════════════════════════ */

/* Top opportunities card */
.opp-card {
  border-left: 3px solid var(--secondary);
  border-radius: 1rem 2rem 2rem 1rem;
}
.opp-list { display: flex; flex-direction: column; gap: 0.6rem; }
.opp-item {
  display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 0.8rem 1rem; border-radius: 0.875rem;
  background: rgba(193,140,93,0.07); border: 1px solid rgba(193,140,93,0.18);
  transition: all 0.22s ease;
}
.opp-item:hover { background: rgba(193,140,93,0.12); }
.opp-number {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--secondary); color: white;
  font-size: 0.7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.opp-body { flex: 1; min-width: 0; }
.opp-text { font-size: 0.875rem; line-height: 1.55; color: var(--fg); }
.opp-action {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.35rem; font-size: 0.72rem; font-weight: 800;
  color: var(--secondary); cursor: pointer; transition: all 0.18s ease;
  border: 1px solid rgba(193,140,93,0.35); border-radius: 999px;
  padding: 0.18rem 0.6rem; background: rgba(193,140,93,0.08);
}
.opp-action:hover { background: rgba(193,140,93,0.18); color: #7A5430; }

/* ═══════════════════════════════════════
   RIGHT SIDEBAR STYLES
═══════════════════════════════════════ */
.sb-section-title { font-family: var(--font-serif); font-size: 0.92rem; font-weight: 700; color: var(--fg); margin-bottom: 0.2rem; }
.sb-section-sub { font-size: 0.75rem; color: var(--muted-fg); line-height: 1.5; margin-bottom: 0.8rem; }

.refine-group-label {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-fg);
  margin-bottom: 0.38rem; margin-top: 0.7rem; padding-left: 0.1rem;
}
.refine-group-label:first-of-type { margin-top: 0; }
.refine-grid { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.refine-pill {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.35rem 0.7rem; border: 1.5px solid rgba(222,216,207,0.8);
  border-radius: 999px; font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: 700; color: var(--fg);
  background: rgba(254,254,250,0.8); cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.refine-pill:hover { border-color: var(--primary); color: var(--primary); background: rgba(93,112,82,0.07); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(93,112,82,0.1); }
.refine-pill:active { transform: scale(0.96); }

.sb-divider { border: none; border-top: 1px solid rgba(222,216,207,0.45); margin: 1rem 0; }

.refine-status {
  display: none;
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.85rem;
  background: rgba(93,112,82,0.08);
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.4;
}
.refine-status.show { display: block; }

.refine-shell { margin-top: 1rem; }
.season-chip-grid { display: flex; flex-wrap: wrap; gap: 0.38rem; }

.occasion-control { display: flex; flex-direction: column; gap: 0.5rem; }
.occasion-row { display: flex; gap: 0.45rem; }
.occasion-input {
  flex: 1; min-width: 0; border: 1.5px solid rgba(222,216,207,0.85);
  border-radius: 0.85rem; background: rgba(254,254,250,0.85);
  color: var(--fg); font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700; height: 2.35rem;
  padding: 0 0.75rem; outline: none; appearance: none; cursor: pointer;
}
.occasion-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(93,112,82,0.1); }
.occasion-apply {
  flex-shrink: 0; border: none; border-radius: 0.85rem;
  background: var(--primary); color: var(--primary-fg);
  font-family: var(--font-sans); font-size: 0.76rem; font-weight: 800;
  padding: 0 0.8rem; cursor: pointer;
}
.occasion-apply:hover { background: #4f6047; }

.sidebar-helper {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.85rem; border-radius: 1rem;
  background: rgba(240,235,229,0.44);
  border: 1px solid rgba(222,216,207,0.55);
}
.helper-item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.78rem; color: var(--muted-fg); line-height: 1.5; }
.helper-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; margin-top: 7px; }

.sidebar-block.disabled { opacity: 0.46; pointer-events: none; filter: grayscale(0.15); }

/* Listing Health */
/* ── Listing review panel ── */
.audit-summary {
  display: none; flex-direction: column; gap: 0.6rem;
  margin-bottom: 0.85rem; padding: 0.9rem;
  border-radius: 1.15rem;
  background: rgba(254,254,250,0.9);
  border: 1.5px solid rgba(93,112,82,0.18);
  box-shadow: 0 10px 28px -22px rgba(44,44,36,0.28);
}
.audit-summary.show { display: flex; }
.audit-primary-action {
  width: 100%; border: none; border-radius: 0.85rem; padding: 0.58rem 0.75rem;
  background: var(--primary); color: var(--primary-fg);
  font-size: 0.76rem; font-weight: 900; cursor: pointer; margin-top: 0.15rem;
}
.audit-primary-action:hover { background: #4f6047; }
.review-kicker {
  font-size: 0.67rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-fg);
}
.review-status {
  font-size: 0.88rem; font-weight: 900; color: var(--fg); line-height: 1.25;
}
.review-status.good  { color: var(--primary); }
.review-status.ok    { color: #8B5E35; }
.review-status.watch { color: var(--destructive); }
.review-score-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 0.85rem;
  background: rgba(93,112,82,0.07); border: 1px solid rgba(93,112,82,0.14);
}
.review-score-main { font-size: 1.35rem; font-weight: 900; color: var(--fg); line-height: 1; }
.review-score-main.good { color: var(--primary); }
.review-score-main.ok { color: #8B5E35; }
.review-score-main.watch { color: var(--destructive); }
.review-score-label { font-size: 0.68rem; font-weight: 900; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.07em; }
.review-points { font-size: 0.7rem; font-weight: 900; color: var(--muted-fg); white-space: nowrap; }
/* compliance banner */
.compliance-banner {
  padding: 0.5rem 0.65rem; border-radius: 0.7rem;
  background: rgba(168,84,72,0.08); border: 1px solid rgba(168,84,72,0.22);
}
.compliance-banner-title {
  font-size: 0.7rem; font-weight: 900; color: var(--destructive);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem;
}
.compliance-issue {
  font-size: 0.71rem; line-height: 1.45; color: #8B3A30;
  padding: 0.18rem 0; border-bottom: 1px solid rgba(168,84,72,0.12);
}
.compliance-issue:last-child { border-bottom: none; }
/* review list */
.review-list { display: flex; flex-direction: column; gap: 0; }
.review-item { border-bottom: 1px solid rgba(222,216,207,0.35); }
.review-item:last-child { border-bottom: none; }
.review-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; padding: 0.55rem 0; cursor: pointer; user-select: none;
}
.review-row:hover .review-label { color: var(--primary); }
.review-row-lhs { display: flex; align-items: baseline; gap: 0.38rem; flex: 1; min-width: 0; }
.review-dot {
  flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 1px;
}
.review-dot.good  { background: var(--primary); }
.review-dot.ok    { background: var(--secondary); }
.review-dot.watch { background: var(--destructive); }
.review-label { font-size: 0.78rem; font-weight: 800; color: var(--fg); white-space: nowrap; flex-shrink: 0; }
.review-summary { font-size: 0.71rem; color: var(--muted-fg); line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-item.open .review-summary { white-space: normal; overflow: visible; text-overflow: unset; }
.review-fix-btn {
  flex-shrink: 0;
  border: 1px solid rgba(93,112,82,0.25); background: rgba(93,112,82,0.08);
  color: var(--primary); border-radius: 999px; padding: 0.2rem 0.6rem;
  font-size: 0.66rem; font-weight: 900; cursor: pointer; white-space: nowrap;
}
.review-fix-btn:hover { background: rgba(93,112,82,0.16); }
/* expanded detail */
.review-detail { display: none; padding: 0 0 0.6rem 1.1rem; }
.review-item.open .review-detail { display: block; }
.review-signals { display: flex; flex-direction: column; gap: 0.25rem; }
.review-signal {
  font-size: 0.71rem; line-height: 1.42; display: flex; gap: 0.3rem; align-items: flex-start;
}
.review-sig-icon { flex-shrink: 0; width: 13px; font-size: 0.65rem; margin-top: 0.1rem; }
.review-signal.pass { color: var(--muted-fg); }
.review-signal.pass .review-sig-icon { color: var(--primary); }
.review-signal.warn { color: #8B5E35; }
.review-signal.warn .review-sig-icon { color: var(--secondary); }
.review-signal.tip  { color: #5a6ab0; }
.review-signal.tip  .review-sig-icon { color: #6a7ec8; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 1.75rem; right: 1.75rem;
  background: var(--fg); color: var(--primary-fg);
  padding: 0.65rem 1.2rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; z-index: 9998;
  opacity: 0; transform: translateY(8px);
  transition: all 0.28s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

.is-pending { opacity: 0.68 !important; pointer-events: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* ── Util ── */
.hidden { display: none !important; }
.divider { border: none; border-top: 1px solid rgba(222,216,207,0.4); margin: 0.625rem 0; }

/* ── Input form section dividers ── */
.field-section-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  margin-bottom: -0.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(222,216,207,0.5);
}
.field-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.field-section-opt {
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(120,120,108,0.65);
  text-transform: none;
  letter-spacing: 0;
  background: rgba(222,216,207,0.45);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ── Optimize field blocks ── */
.opt-field-block { display: flex; flex-direction: column; gap: 0.4rem; }
.opt-field-block .input-label { font-size: 0.88rem; }
.opt-field-desc { margin-top: 0.2rem; }

/* ── Results section header ── */
.results-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0.25rem 0.6rem;
}
.results-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(93,112,82,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--primary);
  flex-shrink: 0;
}
.results-section-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.results-section-sub {
  font-size: 0.76rem;
  color: var(--muted-fg);
  margin-top: 0.1rem;
  line-height: 1.4;
}

/* ── Result card spacing — output feels loose ── */
.result-card { margin-top: 1.25rem; }
.result-card:first-of-type { margin-top: 0; }

/* ── Sidebar refine panel ── */
.refine-section-header {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(222,216,207,0.5);
}
.refine-shell {
  padding: 0.85rem;
  border-radius: 1rem;
  background: rgba(240,235,229,0.38);
  border: 1px solid rgba(222,216,207,0.55);
}

/* ── Credit modal ── */
.credit-modal-overlay { position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;background:rgba(44,44,36,0.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:1rem; }
.credit-modal-box { background:#FEFEFA;border:1.5px solid rgba(222,216,207,0.95);border-radius:1.5rem;padding:1.65rem 1.55rem 1.25rem;max-width:390px;width:100%;box-shadow:0 28px 80px rgba(44,44,36,0.28);text-align:left; }
.credit-modal-icon { width:42px;height:42px;border-radius:0.9rem;background:rgba(168,84,72,0.12);color:#A85448;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:0.9rem; }
.credit-modal-title { font-family:var(--font-serif);font-size:1.35rem;font-weight:700;line-height:1.18;color:var(--fg);margin-bottom:0.55rem; }
.credit-modal-sub { font-size:0.92rem;font-weight:650;color:#4A4A40;line-height:1.55;margin-bottom:1.15rem; }
.credit-modal-actions { display:flex;flex-direction:column;gap:0.55rem;margin-bottom:0.55rem; }
.credit-modal-cta { display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--primary-fg);border-radius:999px;font-weight:800;padding:0.9rem 1.5rem;font-size:0.94rem;font-family:var(--font-sans);text-decoration:none;transition:background 0.2s,transform 0.2s; }
.credit-modal-cta:hover { background:#4A5B41; }
.credit-modal-secondary { display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(93,112,82,0.25);background:rgba(93,112,82,0.06);color:var(--primary);border-radius:999px;font-weight:800;padding:0.78rem 1.3rem;font-size:0.88rem;font-family:var(--font-sans);text-decoration:none; }
.credit-modal-secondary:hover { background:rgba(93,112,82,0.12); }
.credit-modal-dismiss { display:block;margin:0.3rem auto 0;background:none;border:none;color:#5F5F52;font-size:0.84rem;font-weight:700;font-family:var(--font-sans);cursor:pointer;padding:0.4rem 1rem;transition:color 0.15s; }
.credit-modal-dismiss:hover { color:var(--fg); }
/* ── Credit badge ── */
.credit-badge { display:inline-flex;align-items:center;font-size:0.76rem;font-weight:700;font-family:var(--font-sans);padding:0.25rem 0.7rem;border-radius:999px;white-space:nowrap;text-decoration:none;transition:opacity 0.2s; }
.credit-badge.good { background:rgba(93,112,82,0.13);color:var(--primary); }
.credit-badge.warn { background:rgba(193,140,93,0.18);color:#8B5E35; }
.credit-badge.out  { background:rgba(180,60,60,0.12);color:#b43c3c;cursor:pointer; }
.credit-badge:hover { opacity:0.8; }
.account-avatar { width:32px;height:32px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(93,112,82,0.12);color:var(--primary);font-size:0.78rem;font-weight:900;font-family:var(--font-sans);text-decoration:none;overflow:hidden;border:1px solid rgba(93,112,82,0.16); }
.account-avatar img { width:100%;height:100%;object-fit:cover;display:block; }
.account-avatar:hover { background:rgba(93,112,82,0.18); }
/* ── Summary / edit bar ── */
.summary-bar { display:flex;align-items:center;gap:0.65rem;background:var(--surface);border:1.5px solid var(--border);border-radius:1.5rem;padding:0.6rem 0.75rem 0.6rem 1rem;margin-bottom:0.6rem; }
.summary-bar-tag { font-size:0.67rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted-fg);background:var(--surface2);padding:0.18rem 0.55rem;border-radius:999px;flex-shrink:0; }
.summary-bar-text { flex:1;font-size:0.87rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.summary-bar-btn { flex-shrink:0;background:transparent;border:1.5px solid var(--border);border-radius:999px;color:var(--primary);font-weight:700;font-size:0.8rem;font-family:var(--font-sans);padding:0.35rem 0.85rem;cursor:pointer;white-space:nowrap;transition:all 0.15s; }
.summary-bar-btn:hover { background:var(--primary);color:var(--primary-fg);border-color:var(--primary); }

/* ── Skeleton loading ── */
@keyframes skel-shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}
.skel-block {
  background: linear-gradient(90deg, var(--surface2) 25%, rgba(0,0,0,0.055) 50%, var(--surface2) 75%);
  background-size: 1000px 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: 5px;
  display: block;
  pointer-events: none;
}
.skel-line { height: 13px; margin: 7px 0; }
.skel-tag  { height: 28px; border-radius: 99px; display: inline-block; margin: 3px 4px; }
.generation-preview {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.generation-preview-card {
  min-height: 148px;
  padding: 1rem;
  border-radius: 1.25rem;
  background: rgba(254,254,250,0.82);
  border: 1.5px solid rgba(222,216,207,0.72);
  box-shadow: 0 8px 28px -18px rgba(93,112,82,0.35);
}
.generation-preview-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.generation-preview-icon {
  width: 28px;
  height: 28px;
  border-radius: 0.55rem;
  background: rgba(93,112,82,0.11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
}
.generation-preview-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg);
}
.generation-preview-sub {
  font-size: 0.72rem;
  color: var(--muted-fg);
  line-height: 1.45;
  margin-bottom: 0.7rem;
}
.generation-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
@media (max-width: 760px) {
  .generation-preview { grid-template-columns: 1fr; }
}

/* ── Refine shimmer ── */
@keyframes refine-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.refining { animation: refine-pulse 1.1s ease-in-out infinite; pointer-events: none; }

/* ── SEO / GEO guide layer ── */
.seo-geo-layer {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 1120px);
  margin: 0 auto;
  padding: 3rem 0 4.5rem;
}
.seo-geo-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 1.5rem;
}
.seo-geo-kicker {
  display: block;
  margin-bottom: 0.7rem;
  color: #9b6c43;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.seo-geo-head h2 {
  margin: 0 0 0.8rem;
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.12;
}
.seo-geo-head p {
  margin: 0;
  color: var(--muted-fg);
  font-size: 1rem;
  line-height: 1.65;
}
.seo-geo-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.seo-geo-card {
  background: rgba(254,254,250,0.86);
  border: 1.5px solid rgba(222,216,207,0.78);
  border-radius: 1.35rem;
  padding: 1.35rem;
  box-shadow: 0 12px 36px -24px rgba(93,112,82,0.35);
}
.seo-geo-card.tint {
  background: rgba(93,112,82,0.08);
  border-color: rgba(93,112,82,0.16);
}
.seo-geo-label {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.seo-geo-label.warn { color: #A85448; }
.seo-geo-card h3 {
  margin: 0 0 0.75rem;
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1.45rem;
  line-height: 1.18;
}
.seo-geo-card p,
.seo-geo-card li {
  color: #4A4A40;
  font-size: 1rem;
  line-height: 1.75;
}
.seo-geo-card p { margin: 0; }
.seo-geo-list {
  margin: 0;
  padding-left: 1.1rem;
}
.seo-geo-list li + li { margin-top: 0.55rem; }
.seo-geo-compact-grid {
  /* single column — inherits flex-direction: column from .seo-geo-grid */
}
.seo-geo-faq {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.seo-geo-faq details {
  background: rgba(254,254,250,0.86);
  border: 1.5px solid rgba(222,216,207,0.78);
  border-radius: 1.25rem;
  padding: 1rem 1.15rem;
}
.seo-geo-faq summary {
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  list-style: none;
}
.seo-geo-faq summary::-webkit-details-marker { display: none; }
.seo-geo-faq p {
  margin: 0.65rem 0 0;
  color: var(--muted-fg);
  font-size: 0.9rem;
  line-height: 1.65;
}
.seo-geo-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--primary);
  border-radius: 2rem;
  padding: 1.6rem;
  color: var(--primary-fg);
}
.seo-geo-cta h3 {
  margin: 0 0 0.35rem;
  color: var(--primary-fg);
  font-family: var(--font-serif);
  font-size: 1.65rem;
  line-height: 1.15;
}
.seo-geo-cta p {
  margin: 0;
  color: rgba(243,244,241,0.75);
  line-height: 1.55;
}
.seo-geo-cta .btn-primary {
  background: var(--primary-fg);
  color: var(--fg);
  box-shadow: none;
}
.seo-geo-cta .btn-primary:hover { background: #fff; }

@media (max-width: 920px) {
  .main-content { grid-template-columns: 1fr; padding: 1.25rem; }
  .right-col { order: 0; }
  .right-col > .card { position: static !important; max-height: none !important; }
  header { padding: 1rem 1.25rem; }
  .mode-section { padding: 1.5rem 1.25rem 0; }
  .field-grid { grid-template-columns: 1fr; }
  .seo-geo-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 760px) {
  body {
    width: 100%;
    overflow-x: hidden;
  }
  .blob-bg {
    max-width: 100vw;
    transform: translateZ(0);
  }
  .blob-1 {
    left: -220px;
  }
  .blob-2 {
    right: -260px;
  }
  .blob-3 {
    left: 5%;
    width: 260px;
  }
  header[style*="position:sticky"] {
    padding: 0 1rem !important;
    width: 100%;
    min-width: 0;
  }
  header[style*="position:sticky"] > div {
    display: none !important;
  }
  header[style*="position:sticky"] > a span {
    font-size: 16px !important;
  }
  .mode-headline {
    font-size: clamp(2rem, 11vw, 3rem);
  }
  .mode-switcher {
    width: 100%;
    max-width: 340px;
  }
  .mode-btn {
    flex: 1;
    min-width: 0;
    padding: 0.62rem 0.7rem;
  }
  .card {
    border-radius: 1.5rem;
    padding: 1.25rem;
  }
  .seo-geo-layer {
    width: min(100% - 1.5rem, 1120px);
    padding: 2.75rem 0 4rem;
  }
  .seo-geo-card,
  .seo-geo-cta {
    border-radius: 1.35rem;
    padding: 1.25rem;
  }
  #main-input {
    padding-bottom: 2.6rem !important;
  }
  #char-hint {
    right: 1rem !important;
    bottom: 0.85rem !important;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: rgba(254,254,250,0.92);
  }
}