/* PixelBrief design system
   Shared by app.html (authenticated dashboard) and index.html (landing/login).
   See PixelBrief_Design_Spec.md for the underlying token rationale. */

/* ────────────────────────────────────────────────────────────────────
   1.  Tokens
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:            #f7f8fa;
  --surface:       #ffffff;
  --surface-soft:  #f3f4f8;
  --surface-elev:  rgba(255, 255, 255, 0.88);

  /* Borders */
  --border:        #e8eaee;
  --border-strong: #d7dae0;
  --focus-ring:    rgba(91, 95, 239, 0.35);

  /* Text */
  --text:          #172033;
  --text-secondary:#4b5563;
  --text-muted:    #6b7280;
  --text-on-accent:#ffffff;

  /* Accent — used sparingly, primarily on the gradient button + numbered steps */
  --accent:        #5b5fef;
  --accent-2:      #8b5cf6;
  --accent-soft:   #eef0ff;
  --accent-soft-2: #f3eeff;
  --gradient:      linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --gradient-soft: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft-2) 100%);

  /* Feedback */
  --error-bg:      #fef2f2;
  --error-fg:      #9a1f1f;
  --success-bg:    #ecfdf5;
  --success-fg:    #065f46;
  --info-bg:       #eff6ff;
  --info-fg:       #1e40af;

  /* Radii */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    14px;
  --r-xl:    20px;
  --r-pill:  999px;

  /* Spacing */
  --gutter: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.04), 0 1px 1px rgba(23, 32, 51, 0.02);
  --shadow-md: 0 4px 12px rgba(23, 32, 51, 0.06), 0 1px 2px rgba(23, 32, 51, 0.04);
  --shadow-lg: 0 12px 32px rgba(23, 32, 51, 0.10), 0 4px 10px rgba(23, 32, 51, 0.05);

  /* Motion */
  --t-fast:   150ms cubic-bezier(.2, 0, .2, 1);
  --t-med:    220ms cubic-bezier(.2, 0, .2, 1);
}

/* ────────────────────────────────────────────────────────────────────
   2.  Reset + base
   ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea, select, button { font: inherit; }

/* ────────────────────────────────────────────────────────────────────
   3.  Typography
   ──────────────────────────────────────────────────────────────────── */
.t-display   { font-size: 40px; font-weight: 700; line-height: 1.1;  letter-spacing: -0.02em; }
.t-section   { font-size: 24px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.t-card      { font-size: 18px; font-weight: 600; line-height: 1.35; }
.t-body      { font-size: 16px; line-height: 1.6;  color: var(--text); }
.t-muted     { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.t-tiny      { font-size: 12px; line-height: 1.4;  color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ────────────────────────────────────────────────────────────────────
   4.  Top bar (shared by app + landing)
   ──────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: var(--surface-elev);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 18px; color: var(--text);
}
.topbar .brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--gradient);
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 8px rgba(91, 95, 239, 0.35);
}
.topbar .tools {
  display: flex; align-items: center; gap: 12px;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px; font-weight: 500;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center;
  cursor: pointer; color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-soft); color: var(--text); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  position: relative;
}
.avatar-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 6px; min-width: 200px;
  display: none;
}
.avatar-menu.open { display: block; }
.avatar-menu .email { padding: 8px 12px; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.avatar-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: transparent; border: 0; cursor: pointer;
  color: var(--text); font-size: 14px;
}
.avatar-menu button:hover { background: var(--surface-soft); }

/* ────────────────────────────────────────────────────────────────────
   5.  App layout
   ──────────────────────────────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: var(--gutter);
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 28px;
}
@media (max-width: 1180px) {
  .app-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .preview-rail { display: none; }
}
@media (max-width: 820px) {
  .app-grid { grid-template-columns: 1fr; padding: 16px; }
  .sidebar { order: 2; }
}

/* ────────────────────────────────────────────────────────────────────
   6.  Sidebar
   ──────────────────────────────────────────────────────────────────── */
.sidebar {
  display: flex; flex-direction: column; gap: 16px;
}
.sidebar .section-label {
  padding: 0 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.module-list {
  display: flex; flex-direction: column; gap: 2px;
}
.module-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 0; background: transparent;
  border-radius: var(--r-md);
  font-size: 14px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background var(--t-fast);
}
.module-btn:hover { background: var(--surface); }
.module-btn.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-weight: 550;
}
.module-btn .module-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--gradient-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.module-btn.disabled { color: var(--text-muted); cursor: default; }
.module-btn.disabled:hover { background: transparent; }
.module-btn .badge {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
}

/* Pro tip and plan cards in sidebar — stack naturally after the module
   list rather than getting pushed to the bottom of the grid row, so the
   bottom of the plan card aligns with the bottom of the center form card. */
.sidebar-card {
  margin-top: 4px;
  padding: 16px;
  background: var(--gradient-soft);
  border-radius: var(--r-lg);
}
.sidebar-card .icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gradient);
  display: grid; place-items: center;
  color: white;
  margin-bottom: 10px;
}
.sidebar-card .label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.sidebar-card .text { font-size: 13px; color: var(--text-secondary); }

.plan-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Button reset (the element is now <button> so it can be clicked). */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.plan-card:hover { background: var(--surface-soft); border-color: var(--accent-soft); }
.plan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-card .avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gradient); color: white;
  display: grid; place-items: center; font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;  /* clip the img to the circle */
}
.plan-card .avatar-sm.has-photo { background: transparent; }
.plan-card .avatar-sm img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.plan-card .info { line-height: 1.3; min-width: 0; flex: 1; }
.plan-card .name {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-card .tier { font-size: 12px; color: var(--text-secondary); }

/* Topbar avatar: photo support. We can't put overflow:hidden on the
   .avatar itself because the dropdown menu lives inside it and gets
   clipped — instead, round the img directly. */
.avatar.has-photo { background: transparent; }
.avatar #avatar-initials img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ────────────────────────────────────────────────────────────────────
   7.  Workspace + module hero
   ──────────────────────────────────────────────────────────────────── */
.workspace { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.module-hero {
  position: relative;
  background: var(--gradient-soft);
  border-radius: var(--r-xl);
  padding: 32px 32px 28px;
  overflow: hidden;
}
.module-hero .text {
  position: relative; z-index: 2;
  max-width: 60%;
}
.module-hero .text .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px; font-weight: 500; color: var(--accent);
  margin-bottom: 14px;
}
.module-hero h1 {
  margin: 0 0 8px;
  font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
.module-hero p {
  margin: 0;
  font-size: 16px; color: var(--text-secondary); max-width: 460px;
}
.module-hero svg.hero-art {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 280px; height: 200px; z-index: 1; pointer-events: none;
}
@media (max-width: 720px) {
  .module-hero .text { max-width: 100%; }
  .module-hero svg.hero-art { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   8.  Workflow cards
   ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.workflow-step {
  margin-bottom: 24px;
}
.workflow-step:last-child { margin-bottom: 0; }
.step-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.step-number {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.step-title { font-size: 17px; font-weight: 600; }

/* ────────────────────────────────────────────────────────────────────
   9.  Dropzone
   ──────────────────────────────────────────────────────────────────── */
.dropzone {
  min-height: 180px;
  padding: 28px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone .cloud {
  width: 44px; height: 44px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.dropzone .primary-text {
  font-size: 15px; font-weight: 500; color: var(--text);
}
.dropzone .browse-link { color: var(--accent); }
.dropzone .secondary-text {
  font-size: 13px; color: var(--text-muted);
}
.dropzone.has-image {
  border-style: solid;
  background: var(--surface);
}
.dropzone .preview-img {
  max-width: 200px; max-height: 160px; border-radius: var(--r-sm);
  margin-bottom: 6px;
}

/* ────────────────────────────────────────────────────────────────────
   10.  Form controls
   ──────────────────────────────────────────────────────────────────── */
.form-control, select.form-control {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px; color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
}
textarea.form-control { height: auto; padding: 12px 16px; min-height: 80px; line-height: 1.5; }
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
select.form-control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

/* Toggle switch */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track {
  width: 36px; height: 22px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  position: relative; transition: background var(--t-fast);
}
.toggle .track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white; border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(14px); }
.toggle.is-disabled { opacity: 0.45; cursor: not-allowed; }
.toggle.is-disabled .track { cursor: not-allowed; }

/* ────────────────────────────────────────────────────────────────────
   11.  Aspect ratio picker
   ──────────────────────────────────────────────────────────────────── */
.ar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px;
}
.ar-card {
  height: 110px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ar-card .frame {
  flex: 1; width: 100%;
  display: grid; place-items: center;
}
.ar-card .box {
  background: var(--border-strong);
  border-radius: 3px;
  transition: background var(--t-fast);
  max-width: 90%; max-height: 90%;
}
.ar-card .label {
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.1; text-align: center;
}
.ar-card .ratio { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ar-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.ar-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.ar-card.active .box { background: var(--accent); }

/* ────────────────────────────────────────────────────────────────────
   12.  Primary button + footer row
   ──────────────────────────────────────────────────────────────────── */
.workflow-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 8px;
}
.workflow-actions-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.btn {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-md);
  border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.btn-primary {
  background: var(--gradient); color: white;
  box-shadow: 0 4px 14px rgba(91, 95, 239, 0.3);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(91, 95, 239, 0.4);
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-soft); }

/* Secure footer bar */
.secure-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 13px;
}
.secure-bar svg { width: 14px; height: 14px; color: var(--text-muted); }

/* ────────────────────────────────────────────────────────────────────
   13.  Preview rail (right column)
   ──────────────────────────────────────────────────────────────────── */
.preview-rail { display: flex; flex-direction: column; gap: 16px; }
.preview-rail .card { padding: 20px; }
.preview-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary); letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.preview-main {
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: 14px;
}
.preview-main img { width: 100%; height: 100%; object-fit: contain; }
.preview-main .empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; }

.preview-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.preview-thumb {
  aspect-ratio: 1 / 1; padding: 0; border: 1.5px solid var(--border); background: var(--surface-soft);
  border-radius: var(--r-sm); cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.preview-thumb.empty {
  display: grid; place-items: center;
  color: var(--text-muted); font-size: 18px;
  cursor: default;
}

/* Marketing benefit cards in right rail */
.benefit {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.benefit:first-of-type { border-top: 0; padding-top: 4px; }
.benefit .icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gradient-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.benefit .label { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.benefit .text  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Result actions when an image has been generated */
.result-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.result-actions a, .result-actions button, .ra-btn {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.result-actions a:hover, .result-actions button:hover {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--accent);
}
.result-actions svg { flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────────────
   14.  Status messages
   ──────────────────────────────────────────────────────────────────── */
.msg {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  display: none;
  margin-top: 16px;
}
.msg.error { background: var(--error-bg); color: var(--error-fg); display: block; }
.msg.info  { background: var(--info-bg);  color: var(--info-fg);  display: block; }
.msg.success { background: var(--success-bg); color: var(--success-fg); display: block; }

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ────────────────────────────────────────────────────────────────────
   15.  Landing / auth page
   ──────────────────────────────────────────────────────────────────── */
.auth-shell {
  min-height: calc(100vh - 60px);
  display: grid; place-items: center;
  padding: 48px 24px;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.auth-card h1 {
  font-size: 28px; font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.02em;
}
.auth-card .sub {
  color: var(--text-secondary);
  margin-bottom: 24px; font-size: 15px;
}
.auth-tabs {
  display: flex; gap: 4px;
  background: var(--surface-soft);
  padding: 4px;
  border-radius: var(--r-md);
  margin-bottom: 24px;
}
.auth-tabs button {
  flex: 1; height: 36px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.auth-tabs button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.field-group { margin-bottom: 14px; }
.field-group label {
  display: block; font-size: 13px; color: var(--text-secondary);
  margin-bottom: 6px; font-weight: 500;
}
.btn-block { width: 100%; }
.btn-google {
  width: 100%; height: 48px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-md); cursor: pointer;
  font-size: 15px; font-weight: 500;
  margin-top: 12px;
}
.btn-google:hover { background: var(--surface-soft); }
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--text-muted); font-size: 12px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ────────────────────────────────────────────────────────────────────
   16.  Lightbox (full-resolution modal)
   ──────────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  inset: 0 !important;
  background: rgba(15, 18, 25, 0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 40px;
  z-index: 9999;
  cursor: zoom-out;
}
.lightbox.open { display: flex !important; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ────────────────────────────────────────────────────────────────────
   17.  Multi-image uploader
   ──────────────────────────────────────────────────────────────────── */
.multi-uploader {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .multi-uploader { grid-template-columns: 1fr; }
}
.dropzone-tile {
  min-height: 140px;
  padding: 16px;
}
.dropzone-tile .cloud { width: 28px; height: 28px; margin-bottom: 6px; }
.dropzone-tile .primary-text { font-size: 13px; line-height: 1.3; text-align: center; }
.dropzone-tile .preview-img { max-width: 100%; max-height: 96px; }
.dz-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; }

/* ────────────────────────────────────────────────────────────────────
   18.  Frame list field (Storyboard)
   ──────────────────────────────────────────────────────────────────── */
.frame-list { display: flex; flex-direction: column; gap: 8px; }
.frame-row {
  display: flex; align-items: center; gap: 12px;
}
.frame-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}
.frame-row .form-control { height: 44px; }

/* ────────────────────────────────────────────────────────────────────
   19.  Variation count picker
   ──────────────────────────────────────────────────────────────────── */
.count-picker {
  display: flex; gap: 8px;
}
.count-card {
  width: 56px; height: 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600; color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.count-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.count-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ────────────────────────────────────────────────────────────────────
   20.  Preview strip (multi-output tab row)
   ──────────────────────────────────────────────────────────────────── */
.preview-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.preview-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1.5px solid var(--border);
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  display: grid; place-items: center;
  transition: border-color var(--t-fast);
}
.preview-slot img { width: 100%; height: 100%; object-fit: cover; }
.preview-slot.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.preview-slot.loading .slot-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(91, 95, 239, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.preview-slot.error { background: var(--error-bg); color: var(--error-fg); font-weight: 700; }
.preview-slot .slot-label {
  position: absolute; top: 2px; left: 4px;
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 5px; border-radius: 4px;
  pointer-events: none;
}
.preview-slot img + .slot-label { color: var(--text); }

.thumb-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent); color: white;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-pill);
}
.preview-thumb { position: relative; }

/* ────────────────────────────────────────────────────────────────────
   21.  Mode tabs (Studio | Library) in the topbar
   ──────────────────────────────────────────────────────────────────── */
.mode-tabs {
  display: flex; gap: 2px;
  background: var(--surface-soft);
  padding: 4px;
  border-radius: var(--r-pill);
}
.mode-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 16px;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 550; color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.mode-tab svg { stroke-width: 2; }

/* Make topbar a 3-column grid so the tabs sit centered between brand+tools. */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.topbar .brand { justify-self: start; }
.topbar .tools { justify-self: end; }
@media (max-width: 720px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .mode-tab { padding: 0 12px; font-size: 12px; }
  .mode-tab svg { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   22.  "Saving to" pill + project picker dropdown
   ──────────────────────────────────────────────────────────────────── */
.saving-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  color: var(--text); font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  max-width: 240px;
}
.saving-pill:hover { border-color: var(--accent); }
.saving-pill .saving-label {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}
.saving-pill .saving-prefix {
  font-size: 10px; color: var(--text-muted);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
}
.saving-pill #saving-project {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}
@media (max-width: 820px) {
  .saving-pill .saving-prefix { display: none; }
  .saving-pill #saving-project { font-size: 12px; }
}

/* Project picker dropdown */
.project-picker {
  position: absolute;
  top: calc(100% - 4px);
  right: 28px;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 50;
  overflow: hidden;
}
.project-picker.open { display: block; }
.pp-search { padding: 12px; border-bottom: 1px solid var(--border); }
.pp-search input {
  width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.pp-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.pp-list { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.pp-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.pp-group {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.pp-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  font-size: 14px; color: var(--text);
}
.pp-row:hover { background: var(--surface-soft); }
.pp-row.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pp-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gradient-soft);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px; color: var(--text);
  flex-shrink: 0;
}
.pp-row.active .pp-icon { background: var(--accent); color: white; }
.pp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-count { font-size: 11px; color: var(--text-muted); }
.pp-footer { border-top: 1px solid var(--border); padding: 8px; }
.pp-new {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 36px;
  padding: 0 12px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--accent);
  cursor: pointer;
}
.pp-new:hover { background: var(--accent-soft); }

/* ────────────────────────────────────────────────────────────────────
   23.  Library view shell
   ──────────────────────────────────────────────────────────────────── */
.library-view { background: var(--bg); min-height: calc(100vh - 60px); }
.library-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 28px 80px;
}
.library-crumbs {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.crumb { color: var(--text-muted); border: 0; background: transparent; padding: 4px 0; font-size: 13px; }
.crumb.clickable { color: var(--accent); cursor: pointer; }
.crumb.clickable:hover { text-decoration: underline; }
.crumb-sep { color: var(--text-muted); }
.library-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.empty-panel {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

/* ────────────────────────────────────────────────────────────────────
   24.  Brand cards + tiles
   ──────────────────────────────────────────────────────────────────── */
.brand-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.brand-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 340px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  text-align: left;
}
.brand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Colored gradient header — the dominant visual block of the card. */
.bc-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px;
  min-height: 130px;
  border: 0;
  background: var(--gradient);   /* overridden per hue below */
  color: white;
  cursor: pointer;
  text-align: left;
}
.bc-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.bc-avatar.large { width: 64px; height: 64px; font-size: 24px; }
.bc-titles { flex: 1; min-width: 0; }
.bc-name {
  font-size: 18px; font-weight: 700; color: white;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-meta {
  font-size: 13px; color: rgba(255,255,255,0.85);
  margin-top: 4px; font-weight: 500;
}
.bc-more {
  position: absolute;
  top: 10px; right: 12px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-more:hover { background: rgba(255,255,255,0.18); color: white; }
.bc-more:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 1px; }

/* Three-dot popup menu (appended to body, positioned by JS) */
.bc-menu-pop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 9000;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 2px;
}
.bc-menu-item {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.bc-menu-item:hover { background: var(--surface-soft); }
.bc-menu-item-danger { color: var(--error-fg); }
.bc-menu-item-danger:hover { background: var(--error-bg); }

/* Quiet text-link button used in section headers (e.g. "View archived"). */
.link-quiet {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.link-quiet:hover { color: var(--text); text-decoration-color: var(--text-secondary); }

/* Archived-brands modal list rows */
.archived-list { display: flex; flex-direction: column; gap: 8px; }
.archived-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.archived-swatch {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.archived-info { flex: 1; min-width: 0; }
.archived-name { font-weight: 600; font-size: 15px; }
.archived-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.archived-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Hue variants — applied to the entire .bc-head (not just the avatar).
   Newer brand cards set --brand-color-start / --brand-color-end inline
   and read them via the .has-bc-color rule below; the hue-* rules remain
   as a fallback for legacy data without explicit colors. */
.hue-red    .bc-head { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.hue-orange .bc-head { background: linear-gradient(135deg, #f97316, #c2410c); }
.hue-amber  .bc-head { background: linear-gradient(135deg, #f59e0b, #b45309); }
.hue-yellow .bc-head { background: linear-gradient(135deg, #eab308, #a16207); color: #1f2937; }
.hue-yellow .bc-head .bc-name { color: #1f2937; }
.hue-yellow .bc-head .bc-meta { color: rgba(31,41,55,0.75); }
.hue-yellow .bc-head .bc-more { color: rgba(31,41,55,0.5); }
.hue-lime   .bc-head { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.hue-green  .bc-head { background: linear-gradient(135deg, #22c55e, #15803d); }
.hue-teal   .bc-head { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.hue-cyan   .bc-head { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.hue-sky    .bc-head { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.hue-blue   .bc-head { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.hue-indigo .bc-head { background: linear-gradient(135deg, #6366f1, #3730a3); }
.hue-violet .bc-head { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.hue-purple .bc-head { background: linear-gradient(135deg, #a855f7, #6b21a8); }
.hue-pink   .bc-head { background: linear-gradient(135deg, #ec4899, #9d174d); }
.hue-rose   .bc-head { background: linear-gradient(135deg, #f43f5e, #9f1239); }
.hue-slate  .bc-head { background: linear-gradient(135deg, #64748b, #334155); }
.hue-gray   .bc-head { background: linear-gradient(135deg, #6b7280, #374151); }
.hue-default .bc-head { background: var(--gradient); }

/* Explicit per-brand color via inline CSS custom property. Placed AFTER the
   hue-* rules so it wins on document-order tiebreak (same specificity). */
.bc-head.has-bc-color {
  background: linear-gradient(135deg, var(--brand-color-start, #a855f7), var(--brand-color-end, #6b21a8));
}
.bc-avatar-solo.has-bc-color {
  background: linear-gradient(135deg, var(--brand-color-start, #a855f7), var(--brand-color-end, #6b21a8));
}

/* Thumbnail strip below the header */
.bc-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 12px 4px;
}
.bc-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-soft);
}
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-thumb-empty {
  background: repeating-linear-gradient(
    45deg,
    var(--surface-soft),
    var(--surface-soft) 8px,
    var(--surface) 8px,
    var(--surface) 16px
  );
  opacity: 0.5;
}

/* Member avatars row at the bottom */
.bc-members {
  display: flex;
  padding: 12px 18px 16px;
  gap: -8px;  /* visually overlap, achieved via negative margin below */
}
.bc-member-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--surface);
}
.bc-member-avatar + .bc-member-avatar { margin-left: -8px; }

/* Personal Sandbox: subtle visual distinction from real brands */
.brand-card.brand-personal .bc-head {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* New Brand tile: dashed, tall, matches brand-card height */
.brand-card.brand-new {
  border-style: dashed;
  background: var(--surface);
  align-items: center; justify-content: center;
  text-align: center;
  padding: 32px 24px;
  min-height: 340px;
  cursor: pointer;
  gap: 8px;
  display: flex; flex-direction: column;
}
.brand-card.brand-new:hover { background: var(--accent-soft); border-color: var(--accent); }
.bc-new-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-soft); color: var(--accent);
  border: 1.5px solid var(--accent);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.brand-card.brand-new:hover .bc-new-icon { background: white; }
.bc-new-label { font-size: 16px; font-weight: 650; color: var(--accent); }
.bc-new-sub { font-size: 13px; color: var(--text-muted); line-height: 1.4; max-width: 180px; }

/* ────────────────────────────────────────────────────────────────────
   25.  Recent projects table
   ──────────────────────────────────────────────────────────────────── */
.recent-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rt-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 80px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px; color: var(--text);
}
.rt-row:last-child { border-bottom: 0; }
.rt-row:hover:not(.rt-head) { background: var(--surface-soft); }
.rt-head {
  background: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-secondary); text-transform: uppercase;
  cursor: default;
  border-bottom: 1px solid var(--border);
}
.rt-proj { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rt-thumb {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--surface-soft);
  display: grid; place-items: center;
  font-weight: 600; color: var(--text-muted);
  overflow: hidden; flex-shrink: 0;
}
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rt-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}

/* ────────────────────────────────────────────────────────────────────
   26.  Project grid (brand detail)
   ──────────────────────────────────────────────────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.project-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  display: flex; flex-direction: column;
}
.project-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.pt-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--text-muted); font-size: 13px;
}
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pt-name { padding: 14px 16px 2px; font-size: 15px; font-weight: 650; color: var(--text); }
.pt-meta { padding: 0 16px 14px; font-size: 12px; color: var(--text-muted); }

/* "New Project" tile mirrors a regular project tile in size but is dashed. */
.project-tile.project-new {
  border-style: dashed;
  background: var(--surface-soft);
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--accent);
  gap: 10px;
}
.project-tile.project-new:hover { background: var(--accent-soft); border-color: var(--accent); }
.pt-new-thumb {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  aspect-ratio: 1 / 1;
  margin: 0;
  display: grid; place-items: center;
}
.project-tile.project-new:hover .pt-new-thumb { background: white; }
.project-tile.project-new .pt-name {
  padding: 0; font-size: 16px; color: var(--accent); font-weight: 650;
}

/* ────────────────────────────────────────────────────────────────────
   27.  Asset grid (project detail)
   ──────────────────────────────────────────────────────────────────── */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.asset-tile {
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0; cursor: pointer;
  overflow: hidden;
}
.asset-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-tile:hover { border-color: var(--accent); }
.badge-inbox {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px; font-weight: 600;
  border-radius: var(--r-pill);
  vertical-align: middle;
}

/* ────────────────────────────────────────────────────────────────────
   28.  topbar layout adjustments for the picker (positioning)
   ──────────────────────────────────────────────────────────────────── */
.topbar { position: relative; }  /* anchor for .project-picker */

/* ────────────────────────────────────────────────────────────────────
   29.  Sign-in page treatment
   Background image with a clean white card on top.
   ──────────────────────────────────────────────────────────────────── */
.signin-page {
  background-image: url("images/pb-sign-in-background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--bg);   /* fallback if the image fails to load */
}
/* Make the topbar transparent and the brand legible against the photo */
.signin-page .topbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
/* The card itself stays clean white with a bit more shadow so it pops */
.signin-page .auth-card {
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(23, 32, 51, 0.06),
    0 12px 32px rgba(23, 32, 51, 0.14),
    0 32px 80px rgba(23, 32, 51, 0.18);
  border: 0;
}

/* ────────────────────────────────────────────────────────────────────
   30.  View hiding (beats display: grid on .app-grid)
   ──────────────────────────────────────────────────────────────────── */
.view-hidden { display: none !important; }

/* ────────────────────────────────────────────────────────────────────
   31.  Modal (replaces native prompt/alert/confirm)
   ──────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 18, 25, 0.55);
  z-index: 999;
  display: none;
  animation: fadeIn 150ms ease;
}
.modal-backdrop.open { display: block; }

.modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(23, 32, 51, 0.06),
    0 24px 60px rgba(23, 32, 51, 0.25);
  z-index: 1000;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.modal.open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 12px;
  gap: 12px;
}
.modal-title {
  font-size: 18px; font-weight: 650; margin: 0; color: var(--text);
  line-height: 1.3;
}
.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0;
  color: var(--text-muted); cursor: pointer;
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.modal-close:hover { background: var(--surface-soft); color: var(--text); }

.modal-body {
  padding: 4px 24px 8px;
  color: var(--text);
  overflow-y: auto;
}
.modal-label {
  display: block;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  margin-bottom: 6px;
}
.modal-message {
  font-size: 14px; line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--r-md);
}
.modal-message-info    { background: var(--info-bg);    color: var(--info-fg); }
.modal-message-error   { background: var(--error-bg);   color: var(--error-fg); }
.modal-message-success { background: var(--success-bg); color: var(--success-fg); }

.modal-footer { padding: 16px 24px 20px; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* Refine modal — family-budget callout */
.refine-budget {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.refine-budget-empty {
  background: var(--error-bg);
  color: var(--error-fg);
  border-color: transparent;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────
   32.  Preview rail: count indicator, saved check, save button
   ──────────────────────────────────────────────────────────────────── */
.preview-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.preview-count {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Green-check overlay on saved thumbnails */
.thumb-saved {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: #10b981;          /* emerald-500 */
  color: white;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.preview-thumb { position: relative; }   /* anchor for .thumb-saved */

/* Save button — slightly more prominent than the secondary action buttons */
.save-btn {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
}
.save-btn:hover:not(:disabled) {
  background: var(--accent);
  color: white !important;
  border-color: transparent;
}
.save-btn.btn-saved {
  background: rgba(16, 185, 129, 0.12);
  color: #047857 !important;
  cursor: default;
  border-color: transparent;
}
.save-btn.btn-saved:hover {
  background: rgba(16, 185, 129, 0.12);
  color: #047857 !important;
  border-color: transparent;
}
.save-btn:disabled { opacity: 0.7; }

/* Tighter strip-of-tabs sizing now that the rail is the primary navigator */
.preview-strip {
  margin-bottom: 10px;
}

/* ────────────────────────────────────────────────────────────────────
   33.  Signed-in landing variant on index.html
   ──────────────────────────────────────────────────────────────────── */
.signed-in-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 24px;
  margin: 0 auto 16px;
}
#signed-in-card h1 { text-align: center; }
#signed-in-card .sub { text-align: center; }
#signed-in-card .btn svg { margin-left: 2px; }

/* ────────────────────────────────────────────────────────────────────
   34.  Solo brand avatar (brand detail page header)
   ──────────────────────────────────────────────────────────────────── */
.bc-avatar-solo {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gradient);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px;
  flex-shrink: 0;
}
.bc-avatar-solo.large { width: 64px; height: 64px; font-size: 24px; }

.hue-red    .bc-avatar-solo { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.hue-orange .bc-avatar-solo { background: linear-gradient(135deg, #f97316, #c2410c); }
.hue-amber  .bc-avatar-solo { background: linear-gradient(135deg, #f59e0b, #b45309); }
.hue-yellow .bc-avatar-solo { background: linear-gradient(135deg, #eab308, #a16207); color: #1f2937; }
.hue-lime   .bc-avatar-solo { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.hue-green  .bc-avatar-solo { background: linear-gradient(135deg, #22c55e, #15803d); }
.hue-teal   .bc-avatar-solo { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.hue-cyan   .bc-avatar-solo { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.hue-sky    .bc-avatar-solo { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.hue-blue   .bc-avatar-solo { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.hue-indigo .bc-avatar-solo { background: linear-gradient(135deg, #6366f1, #3730a3); }
.hue-violet .bc-avatar-solo { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.hue-purple .bc-avatar-solo { background: linear-gradient(135deg, #a855f7, #6b21a8); }
.hue-pink   .bc-avatar-solo { background: linear-gradient(135deg, #ec4899, #9d174d); }
.hue-rose   .bc-avatar-solo { background: linear-gradient(135deg, #f43f5e, #9f1239); }
.hue-slate  .bc-avatar-solo { background: linear-gradient(135deg, #64748b, #334155); }
.hue-gray   .bc-avatar-solo { background: linear-gradient(135deg, #6b7280, #374151); }

/* ────────────────────────────────────────────────────────────────────
   35.  Persistent rail polish
        - Lightbox icon overlay on the main preview image
        - X discard button on each thumb
        - Bigger member avatar (2x)
        - Lightbox prev/next arrows + counter
   ──────────────────────────────────────────────────────────────────── */

/* Anchor for absolutely-positioned overlay buttons on the main preview */
.preview-main { position: relative; }

/* Lightbox icon overlay on the main preview image (top-right corner). */
.preview-lightbox-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  color: white;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.preview-main:hover .preview-lightbox-btn,
.preview-lightbox-btn:focus { opacity: 1; }
.preview-lightbox-btn:hover { background: rgba(15, 23, 42, 0.8); }

/* X discard button on each rail thumbnail. Hidden until hover. */
.thumb-discard {
  position: absolute;
  top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.7);
  color: white;
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
  padding: 0;
}
.preview-thumb:hover .thumb-discard,
.thumb-discard:focus { opacity: 1; }
.thumb-discard:hover { background: rgba(239, 68, 68, 0.9); }

/* Member avatar on brand cards: 2x bigger than before (was 26px). */
.bc-member-avatar {
  width: 52px; height: 52px;
  font-size: 18px;
  border-width: 3px;
}
.bc-member-avatar + .bc-member-avatar { margin-left: -14px; }

/* Lightbox navigation arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 32px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: none;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

/* ────────────────────────────────────────────────────────────────────
   36.  Ship A: download modal, generation status, asset hover actions
   ──────────────────────────────────────────────────────────────────── */

/* Download format modal — radio cards and chip pickers */
.dl-radio-group { display: flex; flex-direction: column; gap: 10px; }
.dl-radio-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dl-radio-card:hover { border-color: var(--border-strong); }
.dl-radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dl-radio-card input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.dl-radio-title { font-size: 14px; font-weight: 650; color: var(--text); }
.dl-radio-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.dl-custom-options { margin-top: 14px; }
.dl-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dl-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dl-chip:hover { background: var(--surface-soft); }
.dl-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Generation status modal — spinner + text + dismiss-without-cancel note */
.gen-status {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 0;
}
.gen-status-text {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.gen-status-note {
  margin-top: 14px;
  font-size: 13px; color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}
.spinner-lg {
  width: 28px; height: 28px;
  border-width: 3px;
  flex-shrink: 0;
}

/* Asset tile hover actions (Library project detail) */
.asset-tile { position: relative; }
.asset-actions {
  position: absolute;
  top: 6px; right: 6px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 2;
}
.asset-tile:hover .asset-actions,
.asset-tile:focus-within .asset-actions { opacity: 1; }
.asset-action {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0;
  background: rgba(15, 23, 42, 0.7);
  color: white;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--t-fast);
  padding: 0;
}
.asset-action:hover { background: rgba(15, 23, 42, 0.9); }
.asset-action-danger:hover { background: rgba(239, 68, 68, 0.9); }

/* Danger button variant (delete confirmations) */
.btn-danger {
  background: #dc2626;
  color: white;
  border: 1px solid transparent;
}
.btn-danger:hover { background: #b91c1c; }
.btn-danger:focus { outline: 2px solid rgba(220, 38, 38, 0.35); outline-offset: 2px; }

/* ────────────────────────────────────────────────────────────────────
   37.  Credit counter, credits view, generation modal, strip dim
   ──────────────────────────────────────────────────────────────────── */

/* Credit counter — same circle size as the avatar (32px), number only,
   no label. Sits to the left of the avatar in the topbar. */
.credit-counter {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--text);
  border: 1.5px solid var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.credit-counter > span {
  display: block; line-height: 1; text-align: center;
}
.credit-counter:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.credit-counter.warn  {
  background: #fef3c7; color: #92400e; border-color: #b45309;
  animation: credit-pulse 2.4s ease-in-out infinite;
}
.credit-counter.empty {
  background: #fee2e2; color: #991b1b; border-color: #991b1b;
}
@keyframes credit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
}

/* Credits view (placeholder) */
.credits-view {
  max-width: 960px; margin: 0 auto;
  padding: 24px 0;
}
.credits-balance {
  background: var(--gradient);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  color: white;
  text-align: center;
  margin-bottom: 8px;
}
.credits-balance-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
  margin-bottom: 4px;
}
.credits-balance-value {
  font-size: 56px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.credits-balance-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
}
.credits-packs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.credits-packs .pack-card {
  flex: 0 1 260px;
  max-width: 280px;
}
.pack-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
}
.pack-card-featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pack-card-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: white;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.pack-name { font-size: 14px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pack-credits { font-size: 36px; font-weight: 800; color: var(--text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pack-credits-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.pack-price { font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 16px; }

/* Generation modal — title + progress boxes + note + fun fact */
.gen-modal { padding: 8px 0 4px; }
.gen-modal-title {
  text-align: center;
  font-size: 17px; font-weight: 600; color: var(--text);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.gen-modal-boxes {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 22px;
}
.gen-box {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface-soft);
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.gen-box.done {
  background: var(--accent);
  border-color: var(--accent);
}
.gen-box.done::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: white; font-size: 22px; font-weight: 700;
}
.gen-box.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.06);
}
.gen-box-spinner {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
}
.gen-box.active .gen-box-spinner { display: grid; }
.gen-box.active .gen-box-spinner::after {
  content: '';
  width: 22px; height: 22px;
  border: 2.5px solid rgba(91, 95, 239, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.gen-modal-note {
  text-align: center;
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.gen-modal-fact {
  text-align: center;
  font-size: 13px; color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  min-height: 40px;
  opacity: 1;
  transition: opacity 0.2s ease-out;
  padding: 0 8px;
}
.gen-modal-fact.fading { opacity: 0; }

/* Strip-of-tabs: dim mode */
.preview-strip { transition: opacity var(--t-fast); }
.preview-strip.dim { opacity: 0.4; }
.preview-strip.dim:hover { opacity: 0.7; }

/* ────────────────────────────────────────────────────────────────────
   38.  Modal kind headers (accent / danger / success)
   ──────────────────────────────────────────────────────────────────── */

/* Accent header — refine, download, primary confirmations */
.modal.modal-accent .modal-header {
  background: var(--gradient);
  border-bottom: 0;
  padding: 18px 24px;
}
.modal.modal-accent .modal-title { color: white; font-weight: 700; }
.modal.modal-accent .modal-close { color: rgba(255,255,255,0.85); }
.modal.modal-accent .modal-close:hover { color: white; }

/* Danger header — delete, destructive confirms */
.modal.modal-danger .modal-header {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-bottom: 0;
  padding: 18px 24px;
}
.modal.modal-danger .modal-title { color: white; font-weight: 700; }
.modal.modal-danger .modal-close { color: rgba(255,255,255,0.85); }
.modal.modal-danger .modal-close:hover { color: white; }

/* Success header — confirmations of completed actions */
.modal.modal-success .modal-header {
  background: linear-gradient(135deg, #10b981, #047857);
  border-bottom: 0;
  padding: 18px 24px;
}
.modal.modal-success .modal-title { color: white; font-weight: 700; }
.modal.modal-success .modal-close { color: rgba(255,255,255,0.85); }
.modal.modal-success .modal-close:hover { color: white; }

/* ────────────────────────────────────────────────────────────────────
   39.  Stage buttons, picker modal, settings view, Models tile
   ──────────────────────────────────────────────────────────────────── */

/* Row of "Add a model / product / upload" buttons above staging slots */
.stage-buttons {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.stage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
}
.stage-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
@media (max-width: 600px) {
  .stage-hint { width: 100%; margin-left: 0; }
}

/* Per-slot "kind" tag (model / product / upload) shown beneath thumb */
.kind-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  margin-left: 4px;
}
.kind-tag.kind-model   { background: #ede9fe; color: #5b21b6; }
.kind-tag.kind-product { background: #dbeafe; color: #1e40af; }
.kind-tag.kind-upload  { background: var(--surface-soft); color: var(--text-muted); }

/* Picker modal — grid of thumbnails, multi-select */
.picker-modal {
  min-width: 520px;
  max-width: 740px;
}
@media (max-width: 640px) {
  .picker-modal { min-width: 0; max-width: 100%; }
}
.picker-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 12px;
  gap: 12px;
}
.picker-scope {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer;
}
.picker-counter {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}
.picker-loading,
.picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.picker-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-soft);
  padding: 0;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.picker-tile:hover { border-color: var(--border-strong); }
.picker-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.picker-tile .picker-check {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: transparent;
  transition: all var(--t-fast);
}
.picker-tile.selected {
  border-color: var(--accent);
  transform: scale(0.97);
}
.picker-tile.selected .picker-check {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Settings view */
.settings-view { max-width: 720px; margin: 0 auto; padding: 24px 0; }
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-top: 16px;
}
.settings-card-title {
  font-size: 16px; font-weight: 650; color: var(--text);
  margin-bottom: 4px;
}
.settings-card-sub {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.55;
}
.settings-radio-group {
  display: flex; flex-direction: column; gap: 10px;
}
.settings-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.settings-radio:hover { border-color: var(--border-strong); }
.settings-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.settings-radio input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.settings-radio-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.settings-radio-sub {
  font-size: 12px; color: var(--text-secondary);
  margin-top: 2px; line-height: 1.5;
}

/* Distinct background for the Models project tile in the brand grid */
.project-tile-models {
  background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
  border-color: #c4b5fd;
}
.project-tile-models .pt-thumb {
  background: rgba(255, 255, 255, 0.5);
}

/* ────────────────────────────────────────────────────────────────────
   40.  Library search + AI tag UI
   ──────────────────────────────────────────────────────────────────── */

.library-search {
  display: flex; align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  transition: border-color var(--t-fast);
}
.library-search:focus-within { border-color: var(--accent); }
.lib-search-icon { color: var(--text-muted); flex-shrink: 0; }
.lib-search-input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 14px; color: var(--text);
}
.lib-search-input::placeholder { color: var(--text-muted); }
.lib-search-clear {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted);
  font-size: 22px; line-height: 1; padding: 0 4px;
}
.lib-search-clear:hover { color: var(--text); }

.search-header {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 14px;
}
.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.search-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-soft);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.search-tile:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.search-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.search-caption {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px 10px;
  text-align: left;
  line-height: 1.35;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.search-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Tags panel (used on media detail / lightbox metadata) */
.tags-panel { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.tag-chip.tag-ai {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  border-color: #c4b5fd;
  color: #5b21b6;
}
.tag-chip.tag-ai::before { content: '✨'; font-size: 10px; }
.tag-chip-remove {
  border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: 0.5;
  padding: 0; margin-left: 2px;
  font-size: 14px; line-height: 1;
}
.tag-chip-remove:hover { opacity: 1; }
.tag-add-form {
  display: inline-flex; align-items: center; gap: 4px;
}
.tag-add-input {
  border: 1px dashed var(--border);
  background: transparent;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  outline: 0;
  width: 130px;
}
.tag-add-input:focus { border-color: var(--accent); border-style: solid; }

.ai-status-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-status-pending { background: var(--surface-soft); color: var(--text-muted); }
.ai-status-done    { background: #d1fae5; color: #065f46; }
.ai-status-failed  { background: #fee2e2; color: #991b1b; }
.ai-status-skipped { background: var(--surface-soft); color: var(--text-muted); }
.ai-caption-text {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}
.t-pad { padding: 32px 16px; text-align: center; }

/* ────────────────────────────────────────────────────────────────────
   41.  Asset hover icons + asset detail modal
   ──────────────────────────────────────────────────────────────────── */

/* Hover overlay on asset tiles (project view + search results).
   Centered, fades in on tile hover, two icon buttons side-by-side. */
.asset-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.asset-tile:hover .asset-hover,
.search-tile:hover .asset-hover {
  opacity: 1;
  pointer-events: auto;
}
.asset-hover-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  color: #1f2937;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 100ms ease, background 100ms ease;
}
.asset-hover-btn:hover { transform: scale(1.08); background: white; }

/* Both tiles need a positioning context for the overlay. */
.asset-tile, .search-tile {
  position: relative;
}

/* Wider modal for the asset detail view. */
.modal.modal-wide {
  max-width: 980px;
  width: 95vw;
}
@media (max-width: 720px) {
  .modal.modal-wide { width: 100%; max-width: none; }
}

/* Asset detail layout — image left, info right. */
.asset-detail {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 720px) {
  .asset-detail { grid-template-columns: 1fr; }
}

.ad-img-pane {
  background: var(--surface-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid; place-items: center;
  max-height: 560px;
}
.ad-img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
}

.ad-info-pane {
  display: flex; flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.ad-section {
  display: flex; flex-direction: column; gap: 6px;
}
.ad-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.ad-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ad-caption {
  width: 100%;
  resize: vertical;
  min-height: 70px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px; line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  outline: 0;
  font-family: inherit;
}
.ad-caption:focus { border-color: var(--accent); }

.ad-row-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent); cursor: pointer;
  font-size: 13px;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }

.ad-download-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.ad-dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  text-decoration: none;
}
.ad-dl-sm { padding: 6px 10px; font-size: 12px; }
.ad-mini-label { font-size: 12px; margin-right: 4px; }

/* Inline error note shown beneath the description when AI analysis failed */
.ad-error {
  font-size: 12px;
  color: #b91c1c;
  background: #fee2e2;
  padding: 6px 10px;
  border-radius: var(--r-sm, 6px);
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────────────
   42.  Sidebar accordion + favorites
   ──────────────────────────────────────────────────────────────────── */

.sidebar-section {
  margin-bottom: 4px;
}
.sidebar-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
  transition: background 120ms ease;
}
.sidebar-section-head:hover { background: var(--surface-soft); }
.sidebar-section-label { flex: 1; text-align: left; }
.sidebar-section-count {
  font-size: 10px;
  background: var(--surface-soft);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.sidebar-section-chevron {
  display: inline-block;
  transition: transform 140ms ease;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}
.sidebar-section.open .sidebar-section-chevron { transform: rotate(90deg); }

.sidebar-section-body {
  display: none;
  padding: 2px 0 6px;
}
.sidebar-section.open .sidebar-section-body { display: block; }

/* Each module row = clickable button + star toggle */
.module-btn-wrap {
  display: flex;
  align-items: stretch;
  gap: 2px;
  position: relative;
}
.module-btn-wrap .module-btn {
  flex: 1;
  min-width: 0;
}
.module-btn-wrap .module-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-fav {
  flex-shrink: 0;
  width: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--border-strong, #cbd5e1);
  opacity: 0;
  transition: opacity 100ms ease, color 100ms ease, background 100ms ease;
  border-radius: var(--r-sm, 6px);
}
.module-btn-wrap:hover .module-fav,
.module-fav.is-fav {
  opacity: 1;
}
.module-fav:hover {
  color: #f59e0b;
  background: var(--surface-soft);
}
.module-fav.is-fav {
  color: #f59e0b;
}

/* Star toggle animation — favoriting flies up, un-favoriting flies down */
@keyframes pb-fav-leave-up {
  to { opacity: 0; transform: translateY(-12px) scale(0.95); }
}
@keyframes pb-fav-leave-down {
  to { opacity: 0; transform: translateY(12px) scale(0.95); }
}
@keyframes pb-fav-arrive-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pb-fav-arrive-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.module-btn-wrap.fav-leaving-up   { animation: pb-fav-leave-up   200ms ease forwards; }
.module-btn-wrap.fav-leaving-down { animation: pb-fav-leave-down 200ms ease forwards; }
.module-btn-wrap.fav-arriving-up  { animation: pb-fav-arrive-up  260ms ease both; }
.module-btn-wrap.fav-arriving-down{ animation: pb-fav-arrive-down 260ms ease both; }

/* Sign-in / register page brand header — replaces the old "Welcome to PixelBrief" h1 */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.auth-brand .brand-mark {
  /* Match the topbar logo — gradient bg, white letter, soft shadow */
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gradient);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(91, 95, 239, 0.35);
}

/* ────────────────────────────────────────────────────────────────────
   43.  Legal pages (privacy, terms)
   ──────────────────────────────────────────────────────────────────── */

body.legal-page {
  background: var(--bg, #f8fafc);
  min-height: 100vh;
}
.legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.legal-doc {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--r-lg, 12px);
  padding: 40px 44px;
  line-height: 1.65;
  color: var(--text, #111827);
}
.legal-doc h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.legal-doc h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 32px 0 8px;
  letter-spacing: -0.005em;
}
.legal-doc h3 {
  font-size: 14px;
  font-weight: 650;
  margin: 20px 0 4px;
  color: var(--text-secondary, #374151);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legal-doc p, .legal-doc ul, .legal-doc ol {
  font-size: 15px;
  margin: 8px 0 12px;
}
.legal-doc ul, .legal-doc ol {
  padding-left: 22px;
}
.legal-doc li {
  margin: 4px 0;
}
.legal-doc a {
  color: var(--accent, #6366f1);
  text-decoration: none;
}
.legal-doc a:hover { text-decoration: underline; }
.legal-doc strong {
  font-weight: 650;
  color: var(--text, #111827);
}
.legal-meta {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 24px !important;
}
@media (max-width: 640px) {
  .legal-doc { padding: 28px 22px; }
  .legal-doc h1 { font-size: 24px; }
}

.signin-footer {
  text-align: center;
  padding: 24px 0 32px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.signin-footer a {
  color: var(--text-muted, #6b7280);
  text-decoration: none;
  margin: 0 8px;
}
.signin-footer a:hover {
  color: var(--text, #111827);
  text-decoration: underline;
}

/* Toast notifications — used by Stripe return handler and other one-off messages */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--text);
  color: white;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
  z-index: 10000;
  pointer-events: none;
  max-width: 90vw;
}
.toast.toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast-success { background: #065f46; }
.toast-info    { background: #1f2937; }
.toast-error   { background: #991b1b; }

/* Workflow options group — wraps hi-res toggle + provider picker on the left,
   keeping the Generate button anchored on the right. */
.workflow-options {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Provider picker pills — only shown when 2+ providers are configured.
   Visually similar to the mode-tabs in the topbar so it reads as a
   "choose your AI" toggle. */
.provider-pills {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: var(--r-pill, 999px);
  padding: 3px;
  border: 1px solid var(--border);
}
.provider-pill {
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.provider-pill:hover:not(.active) {
  color: var(--text);
}
.provider-pill.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Dropzone CTAs (Browse / Library) ───────────────────────────── */
.dz-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 8px;
  flex-wrap: wrap;
}
.dz-cta-row-sm { margin: 8px 0 4px; gap: 6px; }
.dz-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dz-cta:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
}
.dz-cta-row-sm .dz-cta {
  padding: 6px 10px;
  font-size: 12px;
}
.dz-cta-or {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Library picker modal ───────────────────────────────────────── */
.lib-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 420px;
}
.lib-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t-fast);
  color: var(--text-muted);
}
.lib-picker-search:focus-within { border-color: var(--accent); }
.lib-picker-input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 14px; color: var(--text);
}
.lib-picker-input::placeholder { color: var(--text-muted); }
.lib-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 2px;
}
.lib-picker-tile {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-soft);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.lib-picker-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lib-picker-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.t-muted { color: var(--text-muted); }
.t-pad { padding: 40px 12px; text-align: center; font-size: 13px; }

/* Dropzone loading state (while fetching library image) */
.dropzone.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Brand color picker (modal swatch grid) ───────────────────────── */
.brand-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.brand-color-swatch {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.brand-color-swatch:hover {
  transform: scale(1.08);
  border-color: var(--text);
}

/* ── Project tile: inline action buttons + drop highlight ─────────── */
.project-tile {
  position: relative;
}
.pt-actions {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.project-tile:hover .pt-actions { opacity: 1; }
.pt-action {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
  display: grid; place-items: center;
}
.pt-action:hover { color: var(--text); background: white; }
.project-tile.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  background: var(--accent-soft);
}

/* ── Asset tile: dragging state ───────────────────────────────────── */
.asset-tile { cursor: grab; }
.asset-tile.dragging { opacity: 0.4; }

/* ── Move-to picker list (in the Move modal) ──────────────────────── */
.mt-list {
  max-height: 380px;
  overflow-y: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}


/* ── Palette Extractor (inside Brand Book modal) ─────────────────────── */
.bb-palette-row {
  display: flex; gap: 8px; align-items: stretch;
}
.bb-palette-row .form-control { flex: 1; min-width: 0; }
.bb-extract-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.bb-extract-results {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-soft);
}
.bb-extract-error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--error-bg);
  color: var(--error-fg);
  font-size: 13px;
}
.bb-extract-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.bb-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.bb-swatch {
  border: 0;
  cursor: pointer;
  padding: 12px 10px;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  min-height: 78px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.1s ease;
}
.bb-swatch:hover { transform: translateY(-1px); }
.bb-swatch-hex {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bb-swatch-name {
  font-size: 12px; font-weight: 600;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-swatch-meta {
  font-size: 10px; font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
  text-transform: capitalize;
}
.bb-extract-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}