/* InfinityWriter — Light Design System (app.css)
   Inspired by clean SaaS dashboards: white cards, soft shadows, big numbers,
   pastel icon chips, sectioned sidebar. Variable names kept from the old dark
   theme so inline `var(--x)` references adapt automatically. */

:root {
  --primary:         #ff4d43;
  --primary-d:       #e8323f;
  --primary-glow:    rgba(255, 77, 67, 0.25);
  --accent:          #ff2461;
  --accent-glow:     rgba(255, 36, 97, 0.22);
  --success:         #10b981;
  --success-glow:    rgba(16, 185, 129, 0.22);
  --warning:         #f59e0b;
  --danger:          #ef4444;
  --info:            #3b82f6;

  /* Legacy variable names — now carrying LIGHT values */
  --bg-dark:         #f6f7f9;   /* app canvas */
  --bg-card:         #ffffff;
  --bg-card-hover:   #fcfcfd;
  --bg-input:        #f9fafb;
  --border:          #e8eaee;
  --border-highlight:rgba(255, 77, 67, 0.45);

  --text-main:       #111827;
  --text-muted:      #6b7280;
  --text-dim:        #9ca3af;

  --sidebar-w:       256px;
  --radius:          18px;
  --radius-sm:       10px;
  --transition:      all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card:     0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05);
  --shadow-pop:      0 4px 12px rgba(16, 24, 40, 0.08), 0 16px 44px rgba(16, 24, 40, 0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; background: var(--bg-dark); }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-d); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
input, select, textarea, button { font-family: inherit; font-size: 1rem; }
code {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: .85em;
  background: #fff3f1; padding: 2px 7px; border-radius: 6px;
  color: #e8323f; border: 1px solid #ffdcd8;
}

/* ── App Layout ─────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #ffffff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}
.sidebar-logo b { background: linear-gradient(135deg, #ff4d43, #ff6132); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.logo-text { flex: 1; }
.sidebar-logo .logo-mark { flex: 0 0 auto; width: 29px; height: auto; }

.nav-items { flex: 1; padding: 6px 12px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 16px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  border: 1px solid transparent;
}
.nav-item:hover { background: #f4f5f7; color: var(--text-main); }
.nav-item.active {
  background: #fff3f1;
  color: var(--primary-d);
  font-weight: 600;
}
.nav-icon { font-size: 17px; width: 22px; text-align: center; display: inline-flex; justify-content: center; }
.nav-item svg { width: 17px; height: 17px; }

.sidebar-footer { padding: 14px; border-top: 1px solid var(--border); }
.credit-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--primary-d);
  background: #fff3f1;
  border: 1px solid #ffdcd8;
  border-radius: 999px; padding: 8px 14px; margin-bottom: 12px;
}
.user-row { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #ff4d43, #ff6132);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }
.logout-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); width: 32px; height: 32px; border-radius: 9px;
  cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.logout-btn:hover { background: #fdecec; border-color: #f6c6c6; color: #dc2626; }

/* ── Main Content Area ──────────────────────────────────────────────────── */
/* min-width:0 is the flexbox fix, not a tweak: a flex item defaults to
   min-width:auto, so any wide child — a scrolling card row, a long table —
   stretches the whole column past the viewport instead of scrolling inside it. */
.main-content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); min-height: 100vh; }
/* Fluid, with no cap: a fixed max-width left ~200px of dead margin on each
   side of a wide monitor while the calendar and the article tables were
   squeezed into the middle. The padding scales with the viewport instead, so
   the gutter stays proportional from a laptop to an ultrawide. */
.content-inner {
  padding: clamp(18px, 1.8vw, 34px) clamp(14px, 2.2vw, 48px) 48px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Page Headers ────────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.page-title { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em; }
.page-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.card:hover { border-color: #dde0e6; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.card-title { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: var(--text-main); }
.card-body { padding: 24px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 12px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: var(--transition);
  text-decoration: none; white-space: nowrap;
  /* Without this the body's 1.6 applies, and a button's height then depends on
     what is inside it: a text label gets a 1.6em line box while an icon-only
     button gets only the icon's own height. That is why the caret next to
     Optimize sat seven pixels shorter than everything beside it. A fixed
     line-height plus a min-height per size makes every button the same box
     whatever it contains. */
  line-height: 1.2;
  box-sizing: border-box;
}
/* The rail's own charcoal. The action and the navigation then share one solid
   colour, and the pink is left to do a single job — marking what is current or
   recommended — rather than competing with every button on the page. */
.btn-primary {
  background: #16171c;
  color: #fff;
  box-shadow: 0 4px 14px rgba(17, 17, 20, 0.22);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: #24262e;
  box-shadow: 0 6px 22px rgba(17, 17, 20, 0.3);
  color: #fff;
}
.btn-outline {
  background: #ffffff;
  color: #374151;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.btn-outline:hover {
  background: #f9fafb;
  border-color: #d5d9e0;
  color: var(--text-main);
}
.btn-danger {
  background: #fdecec;
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.22);
}
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* The amber already used for site and status accents elsewhere in the product,
   so Optimize reads as the same family rather than a new colour. */
.btn-warning {
  background: #fff3f1;
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.32);
}
.btn-warning:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.btn-success:hover { transform: translateY(-1px); color: #fff; }
.btn-full { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 12.5px; min-height: 34px; }
.btn-xs { padding: 4px 10px; font-size: 11.5px; border-radius: 8px; min-height: 26px; }

/* One row of equal actions.
   Flex with a real gap rather than literal spaces between tags, so the buttons
   line up whatever their label length, and the row never wraps mid-action. */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
/* One measure for the whole row: same height from .btn-xs, and a floor on the
   width so a short label like "Edit" is not a third the size of "Optimize". */
.row-actions .btn { white-space: nowrap; min-width: 64px; }
.row-actions .opt-caret { min-width: 0; }

/* The Status and On-site cells: same trigger box as a .btn-xs, same menu as
   Optimize. One dropdown pattern on the row instead of two. */
.cell-wrap { position: relative; display: inline-flex; }
.cell-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  box-sizing: border-box; min-height: 26px; min-width: 104px;
  padding: 4px 8px 4px 10px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2;
  color: #374151; background: #fff;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: pointer; transition: var(--transition);
}
.cell-trigger:hover:not(:disabled) { background: #f9fafb; border-color: #d5d9e0; color: var(--text-main); }
.cell-trigger:disabled { cursor: default; }
.cell-value { text-transform: capitalize; }
.cell-menu { width: 268px; }
.opt-menu button.on { background: #fff3f1; }
.opt-menu button.on b { color: #c81e3a; }
.cell-msg { display: block; font-size: 10.5px; margin-top: 3px; }

/* Optimize: one action with a menu of narrower versions of itself. The split
   button keeps the common case a single click and puts the specific repairs one
   step away, instead of five buttons competing in a table row. */
.opt-wrap { position: relative; display: inline-flex; }
.opt-wrap .opt-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.opt-wrap .opt-caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(245, 158, 11, 0.32);
  padding-left: 7px;
  padding-right: 7px;
}
/* Fixed, not absolute.
   .card sets overflow:hidden to keep its rounded corners, which clipped any
   menu opened from the last row of a table — the options were there and simply
   could not be seen. Fixed positioning takes the menu out of every ancestor's
   clipping box; openMenuAt() in the page script then places it against the
   trigger and flips it above when there is no room below. */
.opt-menu {
  position: fixed;
  z-index: 200;
  width: 292px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
  text-align: left;
}
.opt-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.opt-menu button:hover { background: #fff3f1; }
.opt-menu button b { display: block; font-size: 12.5px; color: var(--text-main); font-weight: 600; }
.opt-menu button span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; line-height: 1.4; }
.opt-note {
  border-top: 1px solid #f1f2f4;
  margin-top: 4px;
  padding: 8px 10px 4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Form Controls ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.form-group small { font-weight: 400; color: var(--text-dim); display: block; margin-top: 4px; }
.form-control {
  width: 100%; padding: 11px 16px;
  background: #ffffff;
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  font-size: 14px;
  color: var(--text-main);
  transition: var(--transition);
}
.form-control::placeholder { color: var(--text-dim); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 77, 67, 0.15);
}
select.form-control option { background: #fff; color: var(--text-main); }
textarea.form-control { resize: vertical; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ── Stats Grid ─────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px; display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.stat-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.stat-value { font-family: 'Outfit', sans-serif; font-size: 30px; font-weight: 800; color: var(--text-main); line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; font-weight: 500; }

/* ── Quick Actions Grid ─────────────────────────────────────────────────── */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 24px; }
.quick-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px; text-decoration: none; transition: var(--transition);
  box-shadow: var(--shadow-card);
}
.quick-action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 77, 67, 0.35);
  box-shadow: 0 10px 30px rgba(255, 77, 67, 0.14);
}
.quick-action-card .qa-icon svg { width: 26px; height: 26px; }
.qa-icon { font-size: 26px; margin-bottom: 12px; }
.qa-title { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.qa-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
/* The row is wide — title, keyword, two dropdowns and five actions — so the
   card scrolls sideways rather than cutting the Actions column off at the edge,
   which is what it did at anything under a very wide window. */
.table-scroll { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-scroll .table { min-width: 940px; }
.table th {
  padding: 12px 18px; text-align: left; font-size: 11px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border); background: #fafbfc;
}
.table td { padding: 14px 18px; border-bottom: 1px solid #f1f3f5; color: var(--text-main); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfd; }
.td-title { font-weight: 600; color: var(--text-main); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Badges (soft pastel) ───────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge-success { background: #e7f8f0; color: #059669; border: 1px solid #c4ead9; }
.badge-danger  { background: #fdecec; color: #dc2626; border: 1px solid #f6c6c6; }
.badge-primary { background: #fff3f1; color: #e8323f; border: 1px solid #ffdcd8; }
.badge-muted   { background: #f3f4f6; color: var(--text-muted); border: 1px solid #e5e7eb; }
.badge-warning { background: #fef4e6; color: #b45309; border: 1px solid #f6dfb8; }

/* ── SEO Score Gauge ────────────────────────────────────────────────────── */
.seo-score {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #059669;
  background: conic-gradient(var(--success) calc(var(--s, 0) * 3.6deg), #e8ebef 0);
  box-shadow: inset 0 0 0 5px #ffffff;
}
.seo-na { color: var(--text-dim); }

/* ── Alerts (soft pastel) ───────────────────────────────────────────────── */
.alert { padding: 14px 18px; border-radius: 12px; font-size: 13.5px; margin-bottom: 20px; line-height: 1.55; }
.alert-success { background: #e9f9f2; color: #067a55; border: 1px solid #c4ead9; }
.alert-error   { background: #fdecec; color: #dc2626; border: 1px solid #f6c6c6; }
.alert-warning { background: #fef7e6; color: #92400e; border: 1px solid #f6dfb8; }
.alert-info    { background: #eaf1fe; color: #1d4ed8; border: 1px solid #c6d9fb; }

/* ── Generator & Tools Layouts ─────────────────────────────────────────── */
.gen-layout { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; }
.result-content-preview {
  font-size: 14px; line-height: 1.75; color: #374151;
  max-height: 500px; overflow-y: auto; padding: 22px;
  background: #f9fafb; border-radius: 12px; border: 1px solid var(--border);
}
.result-content-preview h2, .result-content-preview h3 { font-family: 'Outfit', sans-serif; color: var(--text-main); margin: 18px 0 10px; }
.result-content-preview h1 { font-family: 'Outfit', sans-serif; color: var(--text-main); }
.result-content-preview p { margin-bottom: 12px; }
.result-content-preview img { max-width: 100%; border-radius: 12px; }

/* ── Auth Pages ─────────────────────────────────────────────────────────── */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background:
    radial-gradient(at 12% 18%, rgba(255, 77, 67, 0.14) 0px, transparent 45%),
    radial-gradient(at 88% 12%, rgba(255, 36, 97, 0.12) 0px, transparent 40%),
    radial-gradient(at 70% 90%, rgba(16, 185, 129, 0.10) 0px, transparent 45%),
    var(--bg-dark);
}
.auth-container { width: 100%; display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 38px 34px;
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 24px 64px rgba(16, 24, 40, 0.10);
}
.auth-card h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 25px; font-weight: 700; color: var(--text-main);
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.auth-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--text-main);
  margin-bottom: 22px;
}
.auth-logo b { background: linear-gradient(135deg, #ff4d43, #ff6132); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px; }
.auth-card .alert { margin-bottom: 18px; }
.auth-card input {
  width: 100%; padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  font-size: 14px; color: var(--text-main);
  transition: var(--transition);
}
.auth-card input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 77, 67, 0.15);
}
.auth-card input::placeholder { color: var(--text-dim); }
.auth-link { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 22px; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200; padding: 24px;
}
.modal {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.20);
}
.modal-lg { max-width: 760px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: var(--text-main); }
.modal-body { padding: 22px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--border);
  background: #fafbfc;
}
.modal-close {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 16px; line-height: 1;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #fdecec; color: #dc2626; }

/* ── Sites ──────────────────────────────────────────────────────────────── */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.site-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.site-card:hover { border-color: #dde0e6; transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.site-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: #fff3f1; border: 1px solid #ffdcd8;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.site-info { flex: 1; min-width: 0; }
.site-name { font-size: 14.5px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-url { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-token-row { margin-bottom: 14px; }
.site-token-row label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.token-display {
  display: flex; align-items: center; gap: 8px;
  background: #f9fafb;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}
.token-code {
  flex: 1; font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 11px; color: #e8323f;
  background: transparent; border: none; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12px; color: var(--text-muted); margin-bottom: 14px;
}
.site-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Templates ──────────────────────────────────────────────────────────── */
.templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.template-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.template-card:hover { border-color: rgba(255, 77, 67, 0.35); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.template-card.is-builtin { border-color: #ffdcd8; }
.tc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tc-name { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-main); }
.tc-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }
.tc-tone { font-size: 12px; color: var(--text-dim); }

/* ── Empty States ───────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 52px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.empty-state h3 { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 600; color: var(--text-main); }
.empty-state p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; }
.empty-icon {
  width: 72px; height: 72px; border-radius: 22px;
  background: #f3f4f6; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; margin-bottom: 14px;
}
.empty-cell { text-align: center; color: var(--text-muted); padding: 32px 18px !important; font-size: 13.5px; }

/* ── Loading / Spinners ─────────────────────────────────────────────────── */
.loading-state { padding: 32px 24px; }
.gen-loading { display: none; flex-direction: column; justify-content: center; }
.gen-result { display: none; flex-direction: column; }
.loader-ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid #e8ebef;
  border-top-color: var(--primary);
  animation: bfc-spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes bfc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader-ring { animation-duration: 2.5s; } }

/* ── Settings / Account Rows ────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; }
.account-info { display: flex; flex-direction: column; }
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid #f1f3f5;
}
.account-row:last-child { border-bottom: none; }
.acc-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.acc-val { font-size: 13.5px; color: var(--text-main); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.api-key-box {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
}
.api-key-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; }
.api-key-display {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.api-key-code {
  flex: 1; min-width: 200px;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12px; color: #e8323f;
  background: transparent; border: none; padding: 2px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-key-meta { font-size: 12px; color: var(--text-dim); margin-top: 10px; }
.meta-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.meta-val { display: block; font-size: 14px; color: var(--text-main); font-weight: 600; }

/* ── Generator Result / Misc ────────────────────────────────────────────── */
.result-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.result-meta-item {
  background: #f9fafb;
  border: 1px solid var(--border);
  padding: 14px; border-radius: 12px;
}
.card-actions { display: flex; align-items: center; gap: 10px; }
.icon { display: inline-flex; align-items: center; }
.required { color: var(--danger); }
.stat-body { flex: 1; min-width: 0; }

/* ── Plans / Billing ────────────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 14px; }
.plan-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 26px; position: relative;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
/* The recommended card used to invert to near-black, which put one dark panel
   in the middle of a light page. It is marked by its border and badge instead. */
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff4d43, #ff6132); color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 16px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255, 77, 67, 0.4);
}
.plan-name { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.plan-price { font-family: 'Outfit', sans-serif; font-size: 36px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; letter-spacing: -0.03em; }
.plan-price span { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.plan-features { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-features li { font-size: 13.5px; color: #374151; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stats-grid, .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .gen-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
  .result-meta { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { width: 70px; }
  .sidebar-logo .logo-text, .nav-label, .nav-section, .sidebar-footer .credit-pill, .user-info { display: none; }
  .main-content { margin-left: 70px; }
  .content-inner { padding: 20px; }
  .stats-grid, .quick-actions { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .auth-card { padding: 28px 22px; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}
/* ── Content Calendar ───────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.cal-head {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center; padding: 6px 0;
}
.cal-cell {
  min-height: 104px;
  background: #fafbfc;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.cal-empty { background: transparent; border: none; }
.cal-cell.cal-today { border-color: var(--primary); background: #f5f6ff; }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.cal-today .cal-daynum { color: var(--primary-d); }
.cal-item {
  font-size: 11px; font-weight: 600;
  border-radius: 8px; padding: 4px 7px;
  cursor: pointer; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: var(--transition);
  border: 1px solid transparent;
}
.cal-item:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16,24,40,0.12); }
.cal-sched { background: #fff3f1; color: #e8323f; border-color: #ffdcd8; }
.cal-pub   { background: #e7f8f0; color: #059669; border-color: #c4ead9; }
.cal-pend  { background: #fef4e6; color: #b45309; border-color: #f6dfb8; }
.cal-fail  { background: #fdecec; color: #dc2626; border-color: #f6c6c6; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

/* ── Phones ─────────────────────────────────────────────────────────────────
   Below 700px the fixed sidebar has nowhere to go, so the shell stacks: the
   nav becomes a scrollable strip across the top and the content takes the
   full width. Wide things (tables, the calendar) scroll inside their own box
   instead of dragging the whole page sideways. */
@media (max-width: 700px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-logo { padding: 0 8px 0 2px; margin: 0; border-bottom: none; flex: 0 0 auto; }
  .sidebar-logo .logo-text { display: inline; font-size: 14px; }

  .nav-items { flex: 0 0 auto; flex-direction: row; padding: 0; overflow: visible; gap: 4px; }
  .nav-section { display: none; }
  .nav-item { flex: 0 0 auto; padding: 7px 11px; white-space: nowrap; font-size: 13px; }
  .nav-label { display: inline; }

  .sidebar-footer { flex: 0 0 auto; margin-left: auto; padding: 0 4px; border-top: none; display: flex; align-items: center; gap: 8px; }
  .sidebar-footer .credit-pill { display: inline-flex; white-space: nowrap; }
  .user-info { display: none; }

  .main-content { margin-left: 0; }
  .content-inner { padding: 18px 14px 48px; }

  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-title { font-size: 22px; }

  /* Tables keep their shape and scroll within the card */
  .card-body { overflow-x: auto; }
  .table { min-width: 560px; }

  .cal-grid { min-width: 620px; }
  .cal-wrap, .calendar-card .card-body { overflow-x: auto; }

  .stats-grid, .quick-actions, .plans-grid, .settings-grid, .gen-layout { grid-template-columns: 1fr; }

  .btn { white-space: nowrap; }
  img, svg, iframe, pre { max-width: 100%; }
}

/* ── Collapsible sidebar ──────────────────────────────────────────────────
   Collapsed, the rail keeps only the icons. Everything already measures from
   --sidebar-w, so the whole state is one custom property plus a few rules that
   hide the text — no duplicated layout, and the main content follows on its
   own. The width transitions; nothing else has to.                          */
.app-shell { --rail-w: 72px; }
.app-shell.rail .sidebar      { width: var(--rail-w); }
.app-shell.rail .main-content { margin-left: var(--rail-w); }

.sidebar, .main-content { transition: width .18s ease, margin-left .18s ease; }

/* The toggle sits with the logo and stays put when the rail narrows. */
.sidebar-logo { position: relative; }
.rail-toggle {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); cursor: pointer; transition: var(--transition); padding: 0;
}
.rail-toggle:hover { background: #f4f5f7; color: var(--text-main); }
.rail-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }

/* Collapsed: hide every label, centre what is left. */
.app-shell.rail .logo-text,
.app-shell.rail .nav-label,
.app-shell.rail .nav-section,
.app-shell.rail .user-info,
.app-shell.rail .credit-pill span:last-child { display: none; }

.app-shell.rail .sidebar-logo { justify-content: center; padding: 20px 0; }
.app-shell.rail .rail-toggle  { position: static; transform: none; }
.app-shell.rail .sidebar-logo svg:first-child,
.app-shell.rail .sidebar-logo .logo-mark { display: none; }

.app-shell.rail .nav-items { padding: 10px 10px 16px; }
.app-shell.rail .nav-item  { justify-content: center; padding: 11px 0; gap: 0; }
.app-shell.rail .nav-item.active::after { display: none; }

.app-shell.rail .sidebar-footer { padding: 12px 10px; }
.app-shell.rail .credit-pill    { justify-content: center; padding: 8px 0; }
.app-shell.rail .user-row       { justify-content: center; flex-wrap: wrap; gap: 8px; }
.app-shell.rail .logout-btn     { width: 30px; height: 30px; }

/* The label becomes a tooltip, so a rail is still navigable. */
.app-shell.rail .nav-item { position: relative; }
.app-shell.rail .nav-item::before {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #16171f; color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 6px 10px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 200;
}
.app-shell.rail .nav-item:hover::before { opacity: 1; }


/* ── Sidebar ──────────────────────────────────────────────────────────────
   The reference layout, on a light grey surface instead of a black one: a
   workspace pill at the top, generous rows, and one lit edge marking the
   current page. Only the palette is inverted — the structure and the accent
   are the same, so the pink still reads as "you are here" against grey.     */
.app-shell {
  /* Charcoal, not pure black: #0b0b0d was harsh against a white page, and a
     light grey sat too close to the content to read as its own surface —
     which also left the accent with nothing to glow against. */
  --rail-bg:     #16171c;
  --rail-line:   rgba(255,255,255,.08);
  --rail-text:   rgba(255,255,255,.58);
  --rail-strong: #ffffff;
}

.sidebar {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
}

.sidebar-logo {
  padding: 22px 18px 18px;
  color: var(--rail-strong);
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.sidebar-logo b { -webkit-text-fill-color: initial; background: none; color: var(--rail-strong); }
.logo-text { color: var(--rail-strong); font-weight: 650; }

.rail-toggle { border-color: var(--rail-line); color: rgba(255,255,255,.45); background: transparent; }
.rail-toggle:hover { background: rgba(255,255,255,.09); color: var(--rail-strong); }

/* Workspace switcher. */
.rail-workspace {
  display: flex; align-items: center; gap: 11px;
  margin: 0 14px 16px; padding: 11px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--rail-line);
  border-radius: 12px;
  color: var(--rail-strong); font-size: 14px; font-weight: 550;
}
.rail-workspace:hover { background: rgba(255,255,255,.1); }
.rail-workspace .ws-badge {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: rgba(255,255,255,.12); color: var(--rail-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.rail-workspace .ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-workspace .ws-caret { color: rgba(255,255,255,.4); flex: none; }
.app-shell.rail .rail-workspace { margin: 0 10px 12px; padding: 10px 0; justify-content: center; }
.app-shell.rail .rail-workspace .ws-name,
.app-shell.rail .rail-workspace .ws-caret { display: none; }

.nav-section { color: rgba(255,255,255,.34); padding: 18px 13px 8px; font-size: 10px; }
.nav-items   { gap: 5px; padding: 4px 12px 16px; }

.nav-item {
  position: relative;
  color: var(--rail-text);
  padding: 12px 13px;
  border-radius: 12px;
  font-size: 14.5px;
  border: 1px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.95); }

/* The current page: a soft lift, and one lit edge. */
.nav-item.active {
  background: linear-gradient(90deg, rgba(255,255,255,.09) 0%, rgba(255, 36, 97,.16) 100%);
  border-color: var(--rail-line);
  color: var(--rail-strong);
  font-weight: 600;
}
.nav-item.active::after {
  content: '';
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 62%; border-radius: 99px;
  background: linear-gradient(180deg, #ff6132, #ff2461);
  box-shadow: 0 0 14px 2px rgba(255, 36, 97, .7);
}
.nav-item.active .nav-icon { color: var(--rail-strong); }

.sidebar-footer { border-top: 1px solid var(--rail-line); }
.credit-pill {
  background: rgba(255,255,255,.06);
  border-color: var(--rail-line);
  color: rgba(255,255,255,.78);
}
.user-name  { color: var(--rail-strong); }
.logout-btn { border-color: var(--rail-line); color: #8a8d95; background: transparent; }
.logout-btn:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); color: #fca5a5; }

/* Monochrome mark, so the pink edge is the only colour in the column. */
.sidebar-logo svg rect[fill^="url"] { fill: rgba(255,255,255,.11); }
.sidebar-logo svg path { stroke: #fff; }

.app-shell.rail .nav-items { gap: 6px; }
.app-shell.rail .nav-item::before { background: #000; }


/* Narrow screens already have their own layout further up: a rail below 768px
   and a horizontal bar below 700px. These overrides sit at the end of the file
   so they actually win — the collapse button has nothing to collapse once the
   rail is forced, and the top bar needs the content flush against it. */
@media (max-width: 768px) {
  .rail-toggle { display: none; }
}
@media (max-width: 700px) {
  .rail-workspace { display: none; }
  .main-content   { margin-left: 0; }
}

/* ── Credit meter ─────────────────────────────────────────────────────────
   A ring instead of a bare number: the arc is how much of the allowance is
   left, and it glows in its own colour so the state reads at a glance without
   anyone having to parse a fraction.                                        */
.rail-meter {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin-bottom: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--rail-line);
  border-radius: 999px;
  transition: var(--transition);
}
.rail-meter:hover { background: rgba(255,255,255,.09); }

.meter-ring { width: 32px; height: 32px; flex: none; transform: rotate(-90deg); }
.meter-track {
  fill: none; stroke: rgba(255,255,255,.10); stroke-width: 3.4;
}
.meter-value {
  fill: none; stroke-width: 3.4; stroke-linecap: round;
  /* The same glow the current page carries, so the rail has one accent rather
     than two competing ones. currentColor cannot be used with a gradient
     stroke, so the shadow names the colour directly. */
  filter: drop-shadow(0 0 5px rgba(255, 77, 67, .9));
  transition: stroke-dasharray .5s ease;
}

.meter-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.meter-text strong {
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.meter-text span {
  font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Collapsed: the ring alone still says how much is left. */
.app-shell.rail .rail-meter { padding: 8px; justify-content: center; border-radius: 14px; }
.app-shell.rail .meter-text { display: none; }

/* In the horizontal bar there is no room for the label either. */
@media (max-width: 700px) {
  .rail-meter { margin-bottom: 0; padding: 6px; }
  .meter-text { display: none; }
}

/* ── Top bar & account menu ───────────────────────────────────────────────
   Account business — subscription, settings, sign out — moved out of the rail
   and behind the avatar, so the navigation only lists the work.             */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 2.2vw, 48px) 0;
  width: 100%; box-sizing: border-box;
  /* Its own stacking context, above the page: without this the dropdown opened
     *behind* the page header — the panel was painted, then the content on top
     of it, which read as a transparent menu. */
  position: relative;
  z-index: 400;
}

.usermenu { position: relative; }
.um-trigger {
  background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0;
  border-radius: 50%; transition: var(--transition);
}
.um-trigger:hover { box-shadow: 0 0 0 3px rgba(17,17,20,.14); }
.um-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #16171c;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.um-avatar-lg { width: 40px; height: 40px; font-size: 15px; }

.um-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 272px; z-index: 401;
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 6px;
  box-shadow: 0 16px 44px rgba(16,24,40,.14);
  animation: umIn .13s ease;
}
@keyframes umIn { from { opacity: 0; transform: translateY(-4px); } }

.um-head { display: flex; align-items: center; gap: 11px; padding: 11px 12px 12px; }
.um-who  { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.um-who strong { font-size: 13.5px; color: var(--text-main); }
.um-who span   { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

.um-group  { border-top: 1px solid var(--border); padding: 6px 0; }
.um-last   { padding-bottom: 2px; }

.um-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--text-main);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; transition: var(--transition);
}
.um-item:hover { background: #f4f5f7; }
.um-icon  { display: inline-flex; color: var(--text-muted); flex: none; }
.um-label { flex: 1; }
.um-item:hover .um-icon { color: var(--text-main); }

.um-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #a21caf; background: #fae8ff; border: 1px solid #f5d0fe;
  padding: 3px 8px; border-radius: 999px; flex: none;
}
.um-signout { color: #dc2626; }
.um-signout:hover { background: #fdecec; }
.um-signout .um-icon { color: #dc2626; }

@media (max-width: 700px) {
  .topbar { padding: 12px 18px 0; }
}

/* ── Header bar title ─────────────────────────────────────────────────────
   The page's name now sits in the bar with the avatar, so the big heading that
   used to open every page would only repeat it. The subtitle and the action
   buttons stay where they are — those still belong with the content.        */
.topbar-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-main); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-title { display: none; }

/* Without its heading the header row is just a subtitle and some buttons, so
   it needs less space above than a full title block did. */
.page-header { margin-bottom: 20px; }

@media (max-width: 700px) {
  .topbar-title { font-size: 16.5px; }
}

/* ── Pricing cards ────────────────────────────────────────────────────────
   Plan name and price in a header band, features below it, and the action
   pinned to the bottom so the buttons line up across cards of unequal length. */
.plan-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0; overflow: hidden;
  transition: var(--transition);
}
.plan-card:hover { box-shadow: 0 10px 30px rgba(16,24,40,.08); transform: translateY(-2px); }

.plan-head {
  padding: 26px 26px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);
}
.plan-name  { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.plan-price {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text-main); line-height: 1;
}
.plan-price span { font-size: 17px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

.plan-features { list-style: none; margin: 0; padding: 22px 26px; display: grid; gap: 14px; flex: 1; }
.plan-features li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; color: var(--text-main); line-height: 1.5;
}
.plan-tick {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  background: #fff3f1; color: var(--primary-d);
  display: flex; align-items: center; justify-content: center;
}
.plan-tick svg { width: 11px; height: 11px; }

.plan-cta { padding: 0 26px 26px; }
.plan-cta .btn { border-radius: 12px; padding: 13px 18px; font-size: 14px; }

/* The recommended plan is the one that inverts, the way the reference does. */
.plan-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--primary-d); color: #fff; padding: 5px 10px; border-radius: 999px;
}
.plan-card { position: relative; }

/* Excluded features stay visible but recede, so the gap between plans reads at
   a glance instead of having to be inferred from what is missing. */
.plan-features li.hasnt { color: var(--text-dim); }
.plan-features li.hasnt .plan-tick { background: #f3f4f6; color: #b3b7c0; }
.plan-features li.hasnt span:last-child { text-decoration: line-through; text-decoration-color: #d4d7de; }

/* Below the point where four cards stop fitting, they scroll sideways instead
   of wrapping — a lone Agency card on its own row under the other three looked
   like a mistake rather than a layout. */
@media (max-width: 1150px) {
  .plans-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    /* The bleed-to-edge version widened the container itself, so it overflowed
       the page instead of scrolling inside it. A plain full-width box with
       min-width:0 is what actually lets a flex child scroll. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .plans-grid .plan-card {
    flex: 0 0 clamp(250px, 74vw, 300px);
    scroll-snap-align: start;
  }
  .plans-grid::-webkit-scrollbar { height: 6px; }
  .plans-grid::-webkit-scrollbar-thumb { background: #d4d7de; border-radius: 99px; }
}

/* The heading block in the bar: page name with its own subtitle beneath, which
   is where a description of the page belongs — not repeated inside the content
   under a heading that is no longer there. */
.topbar { align-items: flex-start; }
.topbar-heading { min-width: 0; }
.topbar-sub {
  margin: 3px 0 0; font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu { flex: none; margin-top: 2px; }

/* ── Pricing, monochrome ──────────────────────────────────────────────────
   The reference does this in black and white: a big confident price, ticks in
   solid dark discs, and no colour anywhere. The only thing that distinguishes
   the recommended plan is weight — a darker border and a filled button — not a
   second hue. */
.plan-head { position: relative; overflow: hidden; background: #fff; }
.plan-head::before {
  content: '';
  position: absolute; top: -60%; right: -25%;
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(17,17,20,.07) 0%, rgba(17,17,20,0) 70%);
  filter: blur(28px);
  opacity: .8; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.plan-card:hover .plan-head::before { opacity: 1; transform: scale(1.12); }

.plan-name  { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; }
.plan-price {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 44px; font-weight: 700; letter-spacing: -0.035em;
  color: #14151a; line-height: 1;
}
.plan-price span { font-size: 17px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

/* Solid dark discs, white ticks — as in the reference. */
.plan-tick { background: #16171c; color: #fff; }
.plan-features li.hasnt .plan-tick { background: #eceef1; color: #9ca1ab; }

.plan-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.plan-card:hover { border-color: rgba(17,17,20,.22); }

.plan-card.plan-popular { border-color: #16171c; box-shadow: 0 10px 34px rgba(17,17,20,.10); }
.plan-card.plan-popular .plan-head { background: #fff; }
.plan-popular .plan-head::before { opacity: 1; background: radial-gradient(circle, rgba(17,17,20,.10) 0%, rgba(17,17,20,0) 70%); }
.plan-badge {
  background: #16171c; color: #fff;
  box-shadow: 0 4px 12px rgba(17,17,20,.28);
}

/* ── Generator composer ───────────────────────────────────────────────────
   The generator used to be a settings column beside a result panel. It is one
   thing you do — say what to write about — so it reads as one box: the prompt,
   with every setting on the bar beneath it, centred on the page.            */
.composer-wrap { max-width: 760px; margin: 0 auto 34px; }

.composer-hero { text-align: center; margin-bottom: 26px; }
.composer-mark { width: 72px; height: 72px; margin: 0 auto 18px; }
.composer-mark svg { width: 100%; height: 100%; display: block; }
.composer-greeting { margin: 0; font-size: 20px; color: var(--text-dim); font-weight: 500; }
.composer-ask {
  font-family: 'Outfit', 'Inter', sans-serif;
  margin: 2px 0 10px; font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text-main);
}
.composer-note { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.composer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 8px 8px;
  box-shadow: 0 8px 30px rgba(16,24,40,.07);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.composer:focus-within { border-color: rgba(17,17,20,.28); box-shadow: 0 10px 36px rgba(16,24,40,.12); }
.composer.is-disabled { opacity: .6; pointer-events: none; }

.composer-input {
  width: 100%; box-sizing: border-box;
  border: 0; outline: none; resize: none; background: none;
  padding: 14px 14px 8px; font: inherit; font-size: 15.5px;
  color: var(--text-main); line-height: 1.55;
}
.composer-input::placeholder { color: #a4a8b2; }

.composer-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 2px;
}
.composer-opts { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }

/* Every setting is a chip: small, quiet, and out of the way until needed. */
.chip {
  appearance: none; -webkit-appearance: none;
  background: #f4f5f7; border: 1px solid transparent; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; max-width: 190px;
  text-overflow: ellipsis; transition: var(--transition);
}
.chip:hover  { background: #eceef1; color: var(--text-main); }
.chip:focus  { outline: none; border-color: rgba(17,17,20,.25); color: var(--text-main); }
.chip-btn.on { background: #16171c; color: #fff; }

.composer-send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: #16171c; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.composer-send:hover:not(:disabled) { background: #2a2c35; transform: translateY(-1px); }
.composer-send:disabled { opacity: .4; cursor: not-allowed; }
.composer-send svg { width: 18px; height: 18px; }

.composer-brief { padding: 4px 6px 8px; }
.composer-brief textarea { font-size: 13px; border-radius: 12px; }

.composer-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 18px;
}
.composer-card {
  text-align: left; cursor: pointer; font: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 4px;
  transition: var(--transition);
}
.composer-card:hover { border-color: rgba(17,17,20,.22); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,.07); }
.composer-card strong { font-size: 13.5px; color: var(--text-main); font-weight: 600; }
.composer-card span   { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

.gen-stack { display: grid; gap: 20px; }

@media (max-width: 700px) {
  .composer-ask { font-size: 24px; }
  .composer-mark { width: 58px; height: 58px; }
  .chip { max-width: 140px; }
}

/* ── The mark ─────────────────────────────────────────────────────────────
   Idle it breathes and blinks; while you type it glances down at what you are
   writing and stops blinking, then comes back a moment after you stop. Built
   from two rects rather than a GIF so it stays crisp, weighs nothing, and can
   react to what the person is actually doing.                               */
.composer-mark svg { overflow: visible; }
.composer-mark { animation: markFloat 4.5s ease-in-out infinite; }
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.mark-eyes { transform-origin: 50px 48px; }
/* x/y animate reliably; the rect's width/height attributes do not respond to
   CSS in every engine, so the size change rides on a transform instead. */
.eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: x .28s cubic-bezier(.34,1.3,.64,1),
              y .28s cubic-bezier(.34,1.3,.64,1),
              transform .28s cubic-bezier(.34,1.3,.64,1);
}

/* Blink: a quick squash of the whole pair, on a long loop so it reads as
   idling rather than twitching. */
.composer-mark:not(.is-typing) .mark-eyes { animation: markBlink 5.2s infinite; }
@keyframes markBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.08); }
  98%           { transform: scaleY(1); }
}

/* Typing: eyes narrow and shift down-left, as if reading the line being typed.
   The blink stops — it is concentrating. */
.composer-mark.is-typing .eye-l { x: 30; y: 46; transform: scale(.86, .62); }
.composer-mark.is-typing .eye-r { x: 49; y: 44; transform: scale(.86, .70); }
.composer-mark.is-typing { animation-duration: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .composer-mark, .composer-mark .mark-eyes { animation: none; }
}

/* Opportunity results, now a plain surface under the composer instead of a
   green card with its own seed box and site picker duplicating the ones above. */
.opp-status { max-width: 760px; margin: 0 auto; }
.opp-results { max-width: 980px; margin: 4px auto 30px; }
.opp-results-head { margin-bottom: 14px; }
.opp-results-head strong { display: block; font-size: 15px; color: var(--text-main); }
.opp-results-head span   { font-size: 12.5px; color: var(--text-muted); }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

/* This chip carries a full sentence, not a one-word setting, so it is exempt
   from the truncation the others use — the label is the whole point of it. */
#opp-fetch-btn { max-width: none; white-space: nowrap; }

/* Discovering topics is an action, not a setting — it goes and does something
   and changes what is on the page. Sitting in the same grey as Language and
   Tone made it look like one more dropdown to configure. */
.composer-action {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #16171c; border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #16171c; cursor: pointer; white-space: nowrap;
  transition: var(--transition);
}
.composer-action:hover:not(:disabled) { background: #16171c; color: #fff; transform: translateY(-1px); }
.composer-action:disabled { opacity: .55; cursor: wait; }

/* ── Topic suggestions ────────────────────────────────────────────────────
   A numbered list of things worth writing, not a wall of badges. The whole row
   is the target — clicking anywhere loads the topic into the box above — and
   the arrow only appears on hover so the resting state stays quiet.         */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }

.opp-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 16px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.opp-card:hover,
.opp-card:focus-visible {
  border-color: rgba(17,17,20,.28);
  box-shadow: 0 6px 20px rgba(16,24,40,.08);
  transform: translateY(-2px);
  outline: none;
}

.opp-num {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; color: #c3c7d0;
  flex: none; padding-top: 1px; min-width: 20px;
}
.opp-card:hover .opp-num { color: #16171c; }

.opp-body { flex: 1; min-width: 0; }
.opp-body h4 {
  margin: 0 0 7px; font-size: 14.5px; font-weight: 600;
  color: var(--text-main); line-height: 1.4;
}
.opp-kw {
  display: inline-block; background: #f4f5f7; color: #4b5563;
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.opp-body p {
  margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.opp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opp-meta span {
  font-size: 11px; font-weight: 500; color: var(--text-dim);
  background: #f8f9fa; border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

.opp-go {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #16171c; color: #fff;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.opp-card:hover .opp-go,
.opp-card:focus-visible .opp-go { opacity: 1; transform: translateX(0); }
.opp-go svg { width: 14px; height: 14px; }

/* A card that is being written: the words step back and the mark takes over
   the middle of it — the brand's own animation, on the one card that was
   clicked, instead of a line of text counting the seconds out loud. */
.opp-card.is-writing {
  cursor: default;
  border-color: rgba(255, 77, 67, .35);
  box-shadow: 0 0 0 1px rgba(255, 77, 67, .12), 0 8px 26px rgba(16, 24, 40, .10);
  transform: none;
}
.opp-card.is-writing > *:not(.opp-working) { opacity: .16; pointer-events: none; }

.opp-working {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* The mark is the file itself — a transparent GIF that carries its own
   motion. Nothing is animated here; adding to it would fight it. */
/* The mark sits in a lot of empty canvas inside its own frame, so the box is
   larger than the mark looks. On a short card it scales down rather than
   spilling over the edges. */
.opp-working img {
  display: block;
  width: 150px; height: 150px;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* The finished article. It used to be a pale green notice; this is the same
   black as the rail with the same lit orange edge the current page carries,
   so a result reads as part of the app rather than a browser-ish alert. */
.opp-done {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding: 20px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16171c 0%, #1d1e25 100%);
  border: 1px solid rgba(255, 77, 67, .22);
  box-shadow: 0 0 22px rgba(255, 77, 67, .20), 0 10px 30px rgba(16, 24, 40, .16);
  animation: oppDoneIn .34s cubic-bezier(.2, .9, .3, 1) both;
}
/* The lit edge from the active menu item, laid along the top of the card. */
.opp-done::before {
  content: '';
  position: absolute; left: 22%; right: 22%; top: 0; height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg, rgba(255,97,50,0), #ff6132, #ff2461, rgba(255,36,97,0));
  box-shadow: 0 0 14px 2px rgba(255, 77, 67, .8);
}
/* And the same glow breathing behind it, so the card is lit rather than flat. */
.opp-done::after {
  content: '';
  position: absolute; inset: -40% -10% auto; height: 140%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 77, 67,.22), rgba(255, 77, 67,0) 70%);
  pointer-events: none;
  animation: oppDoneGlow 3.6s ease-in-out infinite;
}
.opp-done > * { position: relative; z-index: 1; }

.opp-done strong {
  font-size: 14.5px; font-weight: 600; color: #fff; line-height: 1.45;
}
.opp-done-scores {
  font-size: 12px; color: rgba(255,255,255,.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.opp-done a {
  margin-top: 6px;
  font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none;
  padding: 7px 15px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.09) 0%, rgba(255, 77, 67,.30) 100%);
  border: 1px solid rgba(255, 77, 67, .40);
  transition: var(--transition);
}
.opp-done a:hover {
  background: linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(255, 77, 67,.46) 100%);
  box-shadow: 0 0 16px rgba(255, 77, 67, .45);
}

@keyframes oppDoneIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes oppDoneGlow {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .opp-done, .opp-done::after { animation: none; }
}

/* ── Page backdrop ────────────────────────────────────────────────────────
   There is no backdrop any more. Two blurred orange layers used to drift
   across the bottom of every page; they were removed on request. The stacking
   they set up is kept, because the glass header and the content column still
   rely on sitting in a known order.                                         */
.main-content  { position: relative; isolation: isolate; }
.content-inner { position: relative; z-index: 1; }

/* ── Paper grid ───────────────────────────────────────────────────────────
   A faint ruled grid under everything, so the canvas reads as a sheet rather
   than an empty panel — fitting for a product whose whole job is writing. */
.main-content {
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(to right,  rgba(17, 17, 20, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 20, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  /* Fixed, so the lines stay still while the page scrolls — a grid that slides
     with the content turns into visual noise on a long table. */
  background-attachment: fixed;
}

/* ── Glass header ─────────────────────────────────────────────────────────
   Frosted glass over the page. The blur only reads as glass when something
   moves behind it, so the bar is sticky: content scrolls underneath and comes
   through softened, along with the ruled grid.                               */
.topbar {
  position: sticky;
  top: 0;
  /* Above the content, which has z-index:1 for the backdrop glow. Without this
     the rows scrolled over the glass rather than under it. */
  z-index: 40;
  /* 18px hid what was passing underneath entirely, which defeats the point —
     the movement showing through is what makes it read as glass rather than a
     grey bar. Enough to soften, not enough to erase. */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  backdrop-filter: blur(9px) saturate(150%);
  border-bottom: 1px solid rgba(17, 17, 20, .07);
  padding-bottom: clamp(10px, 1vw, 14px);
  /* Its own layer, or the blur has nothing to composite against and the
     browser quietly drops it. */
  will-change: backdrop-filter;
}

/* The glass edges: a bright line along the top where light catches it, and a
   soft one underneath — that lower line is the refraction you noticed. */
.topbar::before,
.topbar::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px; pointer-events: none;
}
.topbar::before {
  top: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 22%,
    rgba(255,255,255,.9) 78%, rgba(255,255,255,0) 100%);
}
.topbar::after {
  bottom: -1px;
  background: linear-gradient(90deg,
    rgba(17,17,20,0) 0%, rgba(17,17,20,.05) 30%,
    rgba(17,17,20,.05) 70%, rgba(17,17,20,0) 100%);
  filter: blur(.5px);
}

/* The avatar and its menu are glass too, so the chrome is one material. */
.um-panel {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(17, 17, 20, .09);
}

/* Safari and Firefox without backdrop-filter get a solid bar rather than a
   half-transparent one you cannot read text on. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar   { background: rgba(255, 255, 255, .96); }
  .um-panel { background: #fff; }
}

/* The mark while a search is running: the eyes sweep left and right, the way
   you scan a page you are reading. It replaces the "please wait" strip that
   used to sit under the composer saying the same thing in words. */
.composer-mark.is-working .mark-eyes { animation: markScan 1.15s ease-in-out infinite; }
.composer-mark.is-working { animation-duration: 1.8s; }

@keyframes markScan {
  0%, 100% { transform: translateX(-5px) scaleY(.9); }
  50%      { transform: translateX(5px)  scaleY(.9); }
}

/* Working beats typing: if a key lands mid-search the scan keeps running. */
.composer-mark.is-working .eye-l,
.composer-mark.is-working .eye-r { x: 35; y: 36; transform: none; }
.composer-mark.is-working .eye-r { x: 56; }

/* ══ InfinityWriter UX pass ══════════════════════════════════════════════
   Onboarding, empty and locked states, the connect flow, pricing cards shared
   with the public site, and the phone drawer. Brand: #ff6132 → #ff6132.     */
:root { --brand-grad: linear-gradient(135deg, #ff6132, #ff2461); }

/* Getting-started checklist on the dashboard */
.onboarding { padding: 22px 24px; margin-bottom: 22px; }
.ob-head { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.ob-head p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.ob-bar { flex: 0 1 260px; height: 8px; border-radius: 99px; background: #f1f2f5; overflow: hidden; }
.ob-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); transition: width .4s ease; }
.ob-steps { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.ob-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.ob-step.next { border-color: #ffdcd8; background: #fff8f7; }
.ob-step.done { background: #fafbfc; }
.ob-mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-muted); background: #f1f2f5; }
.ob-step.next .ob-mark { background: var(--brand-grad); color: #fff; }
.ob-step.done .ob-mark { background: #fff3f1; color: #c81e3a; }
.ob-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-text b { font-size: 14px; font-weight: 600; color: var(--text-main); }
.ob-step.done .ob-text b { color: var(--text-muted); text-decoration: line-through; text-decoration-color: #c9ccd3; }
.ob-text span { font-size: 12.5px; color: var(--text-muted); }

/* Empty and locked states: one centred card, whatever grid it sits in */
.sites-grid > .empty-card, .sites-grid > .empty-state { grid-column: 1 / -1; }
.empty-card {
  max-width: 520px; margin: 24px auto; padding: 40px 32px; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty-card-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 8px; color: #e8323f; background: #fff3f1; border: 1px solid #ffdcd8; }
.empty-card h3 { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.empty-card p { font-size: 14px; color: var(--text-muted); max-width: 400px; margin-bottom: 12px; }
.empty-card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.empty-card.locked .empty-card-icon { color: #6b7280; background: #f3f4f6; border-color: var(--border); }
.lock-plan { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #e8323f; background: #fff3f1; border: 1px solid #ffdcd8; padding: 3px 10px; border-radius: 99px; }
.empty-state .empty-icon svg { color: var(--text-muted); }
.plan-note { font-size: 13.5px; color: #7f1327; background: #fff3f1; border: 1px solid #ffdcd8; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.plan-note a { font-weight: 600; color: #c81e3a; }
.nav-lock { margin-left: auto; opacity: .55; flex: 0 0 auto; }

/* Sites: cards and the connect flow */
.site-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f3f4f6; color: var(--text-muted); font-size: 0; }
.connect-steps { list-style: none; counter-reset: cs; display: grid; gap: 18px; }
.connect-steps li { counter-increment: cs; position: relative; padding-left: 44px; }
.connect-steps li::before { content: counter(cs); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--brand-grad); }
.cs-title { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.cs-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.key-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.key-mask { font-size: 12.5px; padding: 7px 10px; }
.connect-wait { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: #f6f7f9; font-size: 13px; color: var(--text-muted); }
.cw-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,.5); animation: cw-pulse 1.6s ease-out infinite; }
.connect-wait.ok { background: #e7f8f0; color: #047857; font-weight: 600; }
.connect-wait.ok .cw-dot { background: #10b981; animation: none; }
@keyframes cw-pulse { to { box-shadow: 0 0 0 10px rgba(245,158,11,0); } }
.limit-note { font-size: 14px; color: var(--text-main); line-height: 1.55; }
.settings-lead { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.settings-lead a { font-weight: 600; }

/* Pricing cards — the same card as the public pricing section */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.prices .price { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 26px 22px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); isolation: isolate; overflow: hidden; }
.prices .price.current { border: 2px solid #ff4d43; }
.prices .p-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #f3f4f6; color: #374151; }
.prices .pn { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-top: 18px; }
.prices .p-for { color: var(--text-muted); font-size: 13.5px; margin-top: 2px; }
.prices .amt { font-family: 'Outfit', sans-serif; font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 20px; }
.prices .amt small { font-size: 14px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 3px; }
.prices .p-note { color: var(--text-dim); font-size: 12px; margin-top: 7px; }
.prices .p-btn { display: block; width: 100%; text-align: center; margin-top: 18px; padding: 11px 14px; border-radius: 12px; font: 600 14px/1.2 'Inter', sans-serif; border: 1.5px solid #111114; color: #111114; background: #fff; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.prices .p-btn:hover:not(:disabled) { background: #111114; color: #fff; }
.prices .p-btn:disabled { border-color: var(--border); color: var(--text-dim); background: #f6f7f9; cursor: default; }
.prices .p-key { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-bottom: 16px; border-bottom: 1.5px dashed #e3e5ea; font-size: 14px; color: #374151; }
.prices .p-key svg { color: var(--text-muted); flex: 0 0 auto; }
.prices .p-key b { color: var(--text-main); }
.prices .price ul { list-style: none; margin-top: 16px; display: grid; gap: 11px; font-size: 13.5px; color: #374151; }
.prices .price li { display: flex; gap: 9px; align-items: center; }
.prices .price li svg { flex: 0 0 auto; color: #9ca3af; }
.prices .price li.off { color: #b4b8c0; }
.prices .price li.off svg { color: #d6d9de; }
.prices .price .badge { position: absolute; top: 0; right: 20px; display: inline-block; background: var(--brand-grad); border: 0; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px 6px; border-radius: 0 0 10px 10px; gap: 0; }
.prices .price.hot { background: #14151b; border-color: #14151b; color: #fff; box-shadow: 0 24px 56px rgba(17,17,20,.28); }
.prices .price.hot.current { border: 2px solid #ff4d43; }
.prices .price.hot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(75% 55% at 88% 0%, rgba(255, 77, 67,.42), rgba(255, 36, 97,.12) 45%, transparent 72%); }
.prices .price.hot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(80% 60% at 80% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 60% at 80% 0%, #000, transparent 75%); }
.prices .price.hot .p-ico { background: var(--brand-grad); color: #fff; }
.prices .price.hot .p-for, .prices .price.hot .p-key { color: #c9cad3; }
.prices .price.hot .p-note, .prices .price.hot .amt small { color: #8b8c98; }
.prices .price.hot .p-key { border-bottom-color: rgba(255,255,255,.14); }
.prices .price.hot .p-key svg, .prices .price.hot li svg { color: #ff6132; }
.prices .price.hot .p-key b { color: #fff; }
.prices .price.hot ul { color: #e4e4ea; }
.prices .price.hot li.off { color: #5f606b; }
.prices .price.hot li.off svg { color: #3f4049; }
.prices .price.hot .p-btn { background: var(--brand-grad); border-color: transparent; color: #fff; }
.prices .price.hot .p-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.prices .price.hot .p-btn:disabled { background: rgba(255,255,255,.08); color: #8b8c98; }
@media (max-width: 1200px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Phones: the sidebar becomes a drawer behind a menu button */
.nav-burger, .nav-scrim { display: none; }
@media (max-width: 700px) {
  .prices { grid-template-columns: 1fr; }
  .prices .price.hot { order: -1; }

  .app-shell { flex-direction: row; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: 280px; max-width: 84vw;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    overflow-x: hidden; overflow-y: auto;
    border-bottom: none; border-right: 1px solid var(--rail-line);
    transform: translateX(-105%); transition: transform .25s ease;
    z-index: 300;
  }
  .app-shell.nav-open .sidebar { transform: none; box-shadow: 0 0 44px rgba(0,0,0,.35); }
  .sidebar-logo { padding: 22px 18px 18px; margin: 0; }
  .sidebar-logo .logo-text { display: inline; font-size: 15.5px; }
  .nav-items { flex: 1; flex-direction: column; padding: 6px 12px 16px; gap: 2px; overflow: visible; }
  .nav-section { display: block; }
  .nav-item { padding: 12px 13px; font-size: 14.5px; white-space: normal; }
  .nav-label { display: inline; }
  .sidebar-footer { margin-left: 0; padding: 14px; border-top: 1px solid var(--rail-line); display: block; }
  .sidebar-footer .credit-pill { display: flex; }
  .sidebar .rail-workspace { display: flex; }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(10,10,14,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 250; }
  .app-shell.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--text-main); cursor: pointer; }
  .topbar { align-items: center; padding-top: 12px; }
  .topbar-heading { flex: 1; }

  .stats-grid, .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-card { padding: 16px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .ob-step { flex-wrap: wrap; }
  .ob-step .btn { width: 100%; }
}

/* Composer chips: a light menu in place of the system select popup, same look as the workspace switcher */
.cdd { position: relative; }
.cdd-native { display: none; }
.cdd-btn { display: inline-flex; align-items: center; gap: 6px; }
.cdd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdd-caret { flex: 0 0 auto; opacity: .55; transition: transform .15s ease; }
.cdd-btn[aria-expanded="true"] { background: #eceef1; color: var(--text-main); }
.cdd-btn[aria-expanded="true"] .cdd-caret { transform: rotate(180deg); }
.cdd-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 70; min-width: 100%; width: max-content; max-width: min(280px, 80vw); max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(15,23,42,.14); }
.cdd-up .cdd-menu { top: auto; bottom: calc(100% + 6px); }
.cdd-opt { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 9px; background: none; cursor: pointer; font: inherit; font-size: 13px; color: #374151; text-align: left; }
.cdd-opt:hover, .cdd-opt:focus-visible { background: #f3f4f6; outline: none; }
.cdd-opt.on { background: #fff3f1; color: #c81e3a; font-weight: 600; }

/* ── Articles table (Articles page and the Dashboard's recent list) ──────────
   The Actions column stays pinned to the right while the rest scrolls, so Edit,
   Optimize and Delete never sit out of sight behind a hidden scrollbar. */
.table-articles td.td-actions, .table-articles th:last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -10px 0 14px -10px rgba(30, 32, 45, .18); }
.table-articles th:last-child { background: #fafbfc; }
.table-articles tr:hover td.td-actions { background: #fafbfd; }
/* Keywords are plain labels, not code: neutral chips that wrap by phrase, not by word */
.table-articles td code { display: inline-block; max-width: 240px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: normal; word-break: normal; overflow-wrap: break-word; background: #f3f4f6; color: var(--text-main); border: 1px solid #e5e7eb; }
.table-articles td:nth-child(2) { min-width: 190px; }
/* Tighter columns so the whole row fits a laptop screen without sideways scrolling */
.table-articles th, .table-articles td { padding-left: 12px; padding-right: 12px; }
.table-articles td.td-title { max-width: 168px; }
.table-articles td:nth-child(2) { min-width: 0; width: 150px; }
.table-articles td code { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 150px; }
.table-articles .row-actions { gap: 6px; }
.table-articles .row-actions .btn { padding: 7px 10px; min-width: 0; }
.table-articles .row-actions .opt-caret { padding: 7px 6px; }
@media (max-width: 1500px) and (min-width: 761px) { .table-articles th:nth-child(6), .table-articles td:nth-child(6) { display: none; } }
.page-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  /* A table does not fit a phone: each article becomes a card */
  .table-scroll .table-articles { min-width: 0; }
  .table-articles thead { display: none; }
  .table-articles, .table-articles tbody, .table-articles tr, .table-articles td { display: block; width: 100%; }
  .table-articles tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .table-articles td { padding: 4px 0; border: 0; max-width: none; white-space: normal; }
  .table-articles td::before { content: attr(data-l); display: inline-block; min-width: 76px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
  .table-articles td.td-title { font-size: 15px; padding-bottom: 6px; }
  .table-articles td.td-title::before, .table-articles td.td-actions::before { display: none; }
  .table-articles td:nth-child(2) { min-width: 0; width: 100%; }
  .table-articles td code { display: inline-block; max-width: 100%; -webkit-line-clamp: unset; overflow: visible; }
  .table-articles td.td-actions { position: static; box-shadow: none; padding-top: 10px; background: transparent; }
  .table-articles tr:hover td { background: transparent; }
  .table-articles .row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .page-tools .btn-primary { flex: 1 1 100%; }
}