/* ════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Color */
  --bg:           #0a0a0a;
  --surface:      #161616;
  --surface-1:    #161616;   /* alias = --surface */
  --surface-2:    #1f1f1f;
  --border:       #262626;
  --border-2:     #383838;
  --text:         #fafafa;
  --text-2:       #a3a3a3;
  --muted:        #6b6b6b;
  --accent:       #c4ff3d;
  --accent-hover: #d6ff5e;
  --accent-bg:    rgba(196, 255, 61, 0.08);
  --accent-fg:    #0a0a0a;
  --error:        #f87171;
  --error-bg:     rgba(248, 113, 113, 0.10);
  --warning:      #f59e0b;
  --warning-bg:   rgba(245, 158, 11, 0.10);

  /* Spacing — 4 values */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Type — 5 sizes */
  --t-xs:   0.75rem;    /* 12px */
  --t-sm:   0.8125rem;  /* 13px */
  --t-base: 0.875rem;   /* 14px */
  --t-lg:   1rem;       /* 16px */
  --t-xl:   1.75rem;    /* 28px */

  /* Radius — 5 sizes */
  --r-xs:   4px;        /* tiny: badges, status pills small */
  --r-sm:   6px;        /* inputs, segment buttons */
  --r-md:   10px;       /* small cards, dropdowns */
  --r-lg:   14px;       /* main cards, modals */
  --r-pill: 999px;      /* pill-shape buttons & badges */

  /* Layout */
  --header-h: 56px;
  --tabs-h:   48px;
  --sidebar-w: 340px;   /* inner form sidebar (Generate Video/Image tabs) */
  /* --sidenav-w defined later in sidenav section (Step 7) — outer left navigation */
}

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

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--t-base);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
.heading {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 600;
}

h1.heading { font-size: var(--t-xl); }
h2.heading { font-size: var(--t-lg); }
h3.heading { font-size: var(--t-base); font-weight: 600; }

.label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.body { color: var(--text-2); font-size: var(--t-sm); }
.hint { color: var(--muted); font-size: var(--t-xs); line-height: 1.5; }

code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--accent);
}

pre {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: var(--t-xs);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--gap-sm);
  color: var(--text-2);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

kbd {
  font-family: "JetBrains Mono", monospace;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: var(--t-xs);
}

ol, ul { padding-left: 1.4rem; }
ol li, ul li { margin: 4px 0; color: var(--text-2); font-size: var(--t-sm); }

/* ════════════════════════════════════════════════════════════════════
   HEADER + TABS
   ════════════════════════════════════════════════════════════════════ */
.header {
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap-lg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: "Space Grotesk", ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
}
.brand-ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
  fill: var(--accent);
  stroke: var(--accent);
}
body.mkt-active .brand-ico { color: var(--mkt-pink); fill: var(--mkt-pink); stroke: var(--mkt-pink); }
.brand-tag {
  font-size: var(--t-xs);
  color: var(--muted);
  font-family: ui-sans-serif, system-ui;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.header-status {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--t-xs);
}

/* ════════════════════════════════════════════════════════════════════
   Affiliate marquee ticker — desktop-only horizontal scroller in the
   header center between .brand and .header-status. Click jumps to
   /affiliate. Pauses on hover so user can read the visible message.
   ════════════════════════════════════════════════════════════════════ */
.aff-ticker {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 56vw;
  margin-left: var(--gap-md);
  margin-right: auto;        /* anchor ticker to the left, push header-status to the right */
  height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, rgba(255, 42, 135, 0.10), rgba(196, 255, 61, 0.06));
  border: 1px solid rgba(255, 42, 135, 0.25);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.aff-ticker:hover {
  border-color: rgba(255, 42, 135, 0.55);
  background: linear-gradient(90deg, rgba(255, 42, 135, 0.18), rgba(196, 255, 61, 0.10));
}
.aff-ticker::before,
.aff-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}
.aff-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.aff-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.aff-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  animation: aff-ticker-scroll 45s linear infinite;
  width: max-content;
  will-change: transform;
}
.aff-ticker:hover .aff-ticker-track { animation-play-state: paused; }
.aff-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
.aff-ticker-item strong { color: var(--mkt-pink); }
.aff-ticker-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--mkt-pink);
}
.aff-ticker-sep {
  color: var(--muted);
  opacity: 0.45;
  user-select: none;
}
@keyframes aff-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hide on tablet+mobile — header has zero room there */
@media (max-width: 900px) {
  .aff-ticker { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Affiliate mobile bar — thin sticky-top promo shown only on mobile
   (≤900px). Always visible, non-dismissible. Sits above the sticky
   header so it stays pinned even when scrolling.
   ════════════════════════════════════════════════════════════════════ */
.aff-mbar { display: none; }   /* desktop hides it */

@media (max-width: 900px) {
  .aff-mbar {
    display: flex;   /* mobile running bar — scrolling announcements (GH + Figma maintenance) */
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    /* Solid base so content underneath isn't visible when sticky/scrolled */
    background-color: var(--bg);
    background-image: linear-gradient(90deg, rgba(255, 42, 135, 0.22), rgba(196, 255, 61, 0.12));
    border-bottom: 1px solid rgba(255, 42, 135, 0.30);
    color: var(--text);
    text-decoration: none;
    font-size: 11.5px;
    line-height: 1.2;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 51;        /* sits above .header (z-index: 50) */
  }
  .aff-mbar-ico {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--mkt-pink);
    fill: var(--mkt-pink);
  }
  /* scrolling marquee (mirrors the desktop .aff-ticker so multiple notices fit on one line) */
  .aff-mbar-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .aff-mbar-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    white-space: nowrap;
    animation: aff-ticker-scroll 28s linear infinite;
  }
  .aff-mbar:active .aff-mbar-track { animation-play-state: paused; }
  .aff-mbar-text {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--text-2);
  }
  .aff-mbar-text strong { color: var(--mkt-pink); }
  .aff-mbar-sep { flex: 0 0 auto; color: var(--muted); }
  .aff-mbar-x { flex: 0 0 auto; }

  /* Promo bar hidden on mobile → header pins to the very top */
  .aff-mbar ~ .header { top: 0; }
}
#status-text {
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  height: var(--tabs-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gap-lg);
  display: flex;
  gap: 0;
  align-items: stretch;
  position: sticky;
  top: var(--header-h);
  z-index: 49;
  overflow-x: auto;
}
.tab {
  background: none;
  border: none;
  padding: 0 var(--gap-md);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════════════════════════════════════ */
.app {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gap-md) var(--gap-lg) var(--gap-lg);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Generate: sidebar + main */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap-md);
  align-items: start;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* Other tabs: single column, narrow */
.layout-narrow {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR (Generate inputs)
   ════════════════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: sticky;
  top: calc(var(--header-h) + var(--tabs-h) + var(--gap-md));
  max-height: calc(100vh - var(--header-h) - var(--tabs-h) - var(--gap-lg));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-md) var(--gap-md) var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.sidebar-footer {
  padding: var(--gap-sm) var(--gap-md) var(--gap-md);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Field groups inside sidebar */
.field { display: flex; flex-direction: column; gap: var(--gap-xs); min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.field-row > * { min-width: 0; }   /* allow shrink instead of overflow */

/* ════════════════════════════════════════════════════════════════════
   MAIN AREA
   ════════════════════════════════════════════════════════════════════ */
.main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ════════════════════════════════════════════════════════════════════
   CARD (universal box)
   ════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--gap-md);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}
.card-head .label { margin: 0; }

.card-section { margin-top: var(--gap-md); }
.card-section:first-child { margin-top: 0; }

.card h2.heading { margin: 0 0 var(--gap-md); }
.card h2.heading + p { margin-top: calc(var(--gap-md) * -1 + 6px); color: var(--text-2); font-size: var(--t-sm); }
.card h3.heading { font-size: var(--t-base); font-weight: 600; margin-top: var(--gap-md); margin-bottom: 6px; color: var(--text); }
.card h3.heading:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ════════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-size: var(--t-base);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: 0.7; }

/* Browser autofill juga harus dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Range slider */
input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.slider-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--t-sm);
  background: var(--accent-bg);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  min-width: 32px;
  text-align: center;
}

/* Checkbox */
.check {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  cursor: pointer;
  user-select: none;
}
.check input { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; }

/* Segmented control */
.seg {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
  width: 100%;
  overflow: hidden;
}
.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 7px 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface-2); color: var(--text); }
.seg-btn.disabled { opacity: 0.3; pointer-events: none; }

/* Aspect-ratio card grid variant: shows proportional preview rectangle + label */
.seg.seg-aspect {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible;
}
@media (max-width: 600px) {
  .seg.seg-aspect { grid-template-columns: repeat(3, 1fr); }
}
.seg-aspect .seg-btn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 6px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  min-height: 88px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.seg-aspect .seg-btn:hover {
  border-color: var(--muted);
  color: var(--text);
}
.seg-aspect .seg-btn.active {
  background: var(--surface-2);
  border-color: var(--text);
  color: var(--text);
}
.seg-aspect-preview {
  background: var(--muted);
  border-radius: 4px;
  flex: 0 0 auto;
}
.seg-aspect .seg-btn.active .seg-aspect-preview { background: var(--text); }
.seg-aspect-16-9 { width: 44px; height: 25px; }
.seg-aspect-9-16 { width: 25px; height: 44px; }
.seg-aspect-1-1  { width: 34px; height: 34px; }
.seg-aspect-4-3  { width: 42px; height: 31px; }
.seg-aspect-3-4  { width: 31px; height: 42px; }
.seg-aspect-21-9 { width: 46px; height: 20px; }
.seg-aspect-2-3  { width: 28px; height: 42px; }
.seg-aspect-3-2  { width: 42px; height: 28px; }
.seg-aspect-auto {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent);
}
.seg-aspect .seg-btn.active .seg-aspect-auto { background: transparent; }
.seg-aspect-auto svg { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  width: 100%;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

.btn-tiny {
  padding: 3px 10px;
  font-size: var(--t-xs);
  border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-tiny:hover { color: var(--text); border-color: var(--border-2); }
.btn-tiny.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.btn-tiny-success, .btn-tiny.btn-tiny-success { color: var(--accent); border-color: var(--accent); }
.btn-tiny-success:hover { background: var(--accent-bg); border-color: var(--accent); }
.btn-tiny-danger,  .btn-tiny.btn-tiny-danger  { color: var(--error);  border-color: var(--error); }
.btn-tiny-danger:hover  { background: var(--error-bg);  border-color: var(--error); }

.btn-danger {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.btn-danger:hover { background: var(--error-bg); border-color: var(--error); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Generate — special */
.btn-generate {
  width: 100%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: var(--t-base);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-generate:hover:not(:disabled) { background: var(--accent-hover); }
.btn-generate:active:not(:disabled) { transform: scale(0.98); }
.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; }

/* Action row (buttons side-by-side) */
.actions { display: flex; gap: var(--gap-xs); }
.actions > * { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge.loading { background: var(--surface-2); color: var(--muted); }
.badge.ok      { background: var(--accent-bg); color: var(--accent); }
.badge.error   { background: var(--error-bg); color: var(--error); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }

/* ════════════════════════════════════════════════════════════════════
   DROPZONE & PREVIEWS
   ════════════════════════════════════════════════════════════════════ */
.dropzone {
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-sm);
  padding: var(--gap-md);
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  font-size: var(--t-sm);
  background: var(--bg);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--text);
}

.preview {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-top: var(--gap-xs);
  background: #000;
}
audio.preview { max-height: none; height: 36px; padding: 0 8px; }

/* Remove button for upload previews (frame / video / audio) */
.upload-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.upload-clear-btn:hover {
  background: var(--error, #d63838);
  color: #fff;
  border-color: var(--error, #d63838);
}
.upload-clear-btn svg { flex-shrink: 0; }

/* I2V grid — 2 columns */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xs); }

/* RefGen grid — 3×3 */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ref-slot {
  aspect-ratio: 1;
  position: relative;
  background: var(--bg);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-slot:hover { border-color: var(--accent); }
.ref-slot.has-image { border-style: solid; border-color: var(--border-2); }
.ref-slot.ref-warning {
  border-color: var(--error);
  border-style: solid;
  animation: ref-warn-pulse 1.5s ease-in-out infinite;
}
.ref-slot.ref-warning::after {
  content: "referenced in prompt";
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  font-size: 9px;
  color: var(--error);
  background: rgba(0,0,0,0.85);
  padding: 2px 4px;
  border-radius: var(--r-xs);
  text-align: center;
  z-index: 3;
}
@keyframes ref-warn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0); }
}
.ref-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-slot .label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  z-index: 2;
}
.ref-slot .placeholder {
  font-size: var(--t-lg);
  color: var(--muted);
  opacity: 0.4;
}
.ref-slot .remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--error);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   RESULT CARD STATES
   ════════════════════════════════════════════════════════════════════ */
.result-empty {
  padding: var(--gap-lg) var(--gap-md);
  text-align: center;
}
.result-empty .heading {
  margin-bottom: var(--gap-xs);
  color: var(--text);
  background: linear-gradient(180deg, var(--text) 0%, var(--text-2) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.result-empty p {
  color: var(--text-2);
  font-size: var(--t-sm);
  max-width: 48ch;
  margin: 0 auto;
}

.task-meta {
  display: flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-bottom: var(--gap-sm);
}

.progress-bar {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  height: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
/* Indeterminate (infinite-loop) loading bar — same in ALL modes (BytePlus / DOLA / Figma /
   Image / Marketing). A soft glowing segment slides across continuously; it does NOT track
   real progress (render time is unknown), like the loaders on Leonardo / BytePlus console.
   The inline width set by JS is intentionally overridden. */
#progress-fill, #img-progress-fill, #mkt-progress-fill, #fg-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40% !important;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  animation: loadbar-indeterminate 1.15s ease-in-out infinite;
}
#img-progress-fill { background: linear-gradient(90deg, transparent 0%, var(--img-cyan, #3dd6ff) 50%, transparent 100%); }
#mkt-progress-fill { background: linear-gradient(90deg, transparent 0%, var(--mkt-pink, #ff4d8d) 50%, transparent 100%); }
@keyframes loadbar-indeterminate {
  0%   { left: -42%; }
  100% { left: 100%; }
}
#progress-label { font-size: var(--t-sm); color: var(--text-2); }

#result-video, #img-result-video, #fg-result video {
  width: 100%;
  max-height: 58vh;          /* fit in the tab — portrait (9:16) no longer overflows */
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #000;
  margin-top: var(--gap-sm);
  display: block;
}

.result-actions {
  display: flex;
  gap: var(--gap-xs);
  margin-top: var(--gap-sm);
}
.result-actions a { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   LOG
   ════════════════════════════════════════════════════════════════════ */
#log {
  max-height: 160px;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════════
   TASK HISTORY
   ════════════════════════════════════════════════════════════════════ */
.task-history { display: flex; flex-direction: column; gap: var(--gap-xs); }
.task-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px var(--gap-sm);
  transition: border-color 0.15s;
}
.task-item:hover { border-color: var(--border-2); }
.task-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-xs);
  margin-bottom: 2px;
}
.task-item-head code {
  font-size: 11px;
  background: transparent;
  padding: 0;
}
.task-item-head time {
  font-size: var(--t-xs);
  color: var(--muted);
}
.task-item-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2px;
}
.task-item-prompt {
  font-size: var(--t-sm);
  color: var(--text-2);
  margin-bottom: 6px;
  font-style: italic;
}
.task-item .btn-link {
  font-size: var(--t-xs);
  color: var(--accent);
  font-weight: 500;
}
.task-item .btn-link:hover { text-decoration: underline; }
.task-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xs);
  margin-top: 4px;
}
.task-item-actions .btn-regen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid transparent;
  font-weight: 500;
}
.task-item-actions .btn-regen:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
.task-item-actions .btn-regen svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   QUOTA WIDGET (Header)
   ════════════════════════════════════════════════════════════════════ */
.quota-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: var(--t-xs);
  color: var(--text-2);
}
.quota-widget.hidden { display: none; }
.quota-widget .quota-ico { color: var(--accent); flex-shrink: 0; }
.quota-bar {
  width: 80px;
  height: 6px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quota-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6affd1);
  transition: width 0.4s ease, background 0.3s;
  width: 0%;
}
.quota-bar-fill.low { background: linear-gradient(90deg, #d9a020, #e8c060); }
.quota-bar-fill.empty { background: var(--error, #c93030); }
.quota-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .quota-widget { padding: 3px 6px; }
  .quota-bar { width: 50px; height: 4px; }
  .quota-text { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   LOGS DRAWER (Floating right-side panel)
   ════════════════════════════════════════════════════════════════════ */
.logs-drawer-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 49;
  width: 28px;
  height: 56px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.logs-drawer-toggle:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
}
.logs-drawer-toggle .pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(73, 255, 178, 0.6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(73, 255, 178, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(73, 255, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(73, 255, 178, 0); }
}

.logs-drawer {
  position: fixed;
  right: 0;
  top: 70px;
  bottom: 16px;
  width: 360px;
  max-width: 90vw;
  z-index: 50;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md) 0 0 var(--r-md);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0,0,0,0.4);
  transition: transform 0.25s ease;
}
.logs-drawer.hidden {
  transform: translateX(110%);
  pointer-events: none;
}
.logs-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.logs-drawer-title {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text);
}
.logs-drawer-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-2);
}
.logs-drawer-feed .log-entry {
  padding: 2px 0;
  display: flex;
  gap: 8px;
}
.logs-drawer-feed .log-time {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 10px;
}
.logs-drawer-feed .log-msg.ok    { color: var(--accent); }
.logs-drawer-feed .log-msg.error { color: var(--error, #ff6b6b); }
.logs-drawer-feed .log-msg.info  { color: var(--text-2); }
.logs-drawer-feed .log-msg.warn  { color: #ffb84d; }
.logs-drawer-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .logs-drawer { top: 60px; bottom: 0; width: 100vw; border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   GALLERY (Recent Generations)
   ════════════════════════════════════════════════════════════════════ */
.gallery-card .card-head { margin-bottom: var(--gap-sm); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-sm);
}
.gallery-grid .hint { grid-column: 1 / -1; padding: 8px 0; }

.gallery-card-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.gallery-card-item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-bg);
}

.gallery-preview {
  position: relative;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;     /* uniform card height — image/video cropped via object-fit: cover */
}
.gallery-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--t-xs);
  background: var(--surface-1);
}
.gallery-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  opacity: 0.75;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  pointer-events: none;
}

.gallery-meta {
  padding: 8px 10px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-prompt {
  font-size: var(--t-sm);
  color: var(--text);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gallery-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-weight: 500;
}

.gallery-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px 8px;
  align-items: center;
}
.gallery-iconbtn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gallery-iconbtn:hover {
  background: var(--surface-1);
  color: var(--accent);
  border-color: var(--accent-bg);
}
.gallery-iconbtn-danger { margin-left: auto; }
.gallery-iconbtn-danger:hover {
  background: #d63838;
  color: #fff;
  border-color: #d63838;
}
.gallery-iconbtn svg { flex-shrink: 0; }
.gallery-time {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-left: auto;
  white-space: nowrap;
}
.gallery-badge-mode {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
/* Task ID badge — small, monospace, easy to read out / copy when reporting a bug. */
.gallery-badge-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(196, 255, 61, .12);
  color: var(--mode-accent, #c4ff3d);
  letter-spacing: .02em;
  user-select: all;
  cursor: text;
}
.gitem-id {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  font: 600 10px/1 ui-monospace, monospace;
  background: rgba(0, 0, 0, .6); color: var(--mode-accent, #c4ff3d);
  padding: 3px 6px; border-radius: 5px; user-select: all;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-xs);
  }
  .gallery-btn { padding: 3px 6px; font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   MODELS LIST
   ════════════════════════════════════════════════════════════════════ */
.model-stats {
  display: flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--text-2);
  margin-bottom: var(--gap-sm);
}
.model-stats strong { color: var(--text); font-size: var(--t-lg); font-weight: 700; }
.model-stats strong.stat-ok { color: var(--accent); }
.model-stats strong.stat-err { color: var(--error); }

.model-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.model-list li {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--t-xs);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin: 0;
  color: var(--text-2);
}
.model-list li.exhausted {
  opacity: 0.5;
  text-decoration: line-through;
  border-color: rgba(248,113,113,0.25);
}

/* ════════════════════════════════════════════════════════════════════
   ALERT
   ════════════════════════════════════════════════════════════════════ */
.alert {
  padding: 10px var(--gap-sm);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  border: 1px solid;
}
.alert-warning {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Subtle inline notice for restriction reminders (Generate Video sidebar + Marketing hero) */
.face-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: var(--gap-sm);
  border-radius: var(--r-sm);
  background: var(--warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.20);
  font-size: var(--t-xs);
  color: var(--muted);
  line-height: 1.5;
}
.face-notice > svg {
  flex-shrink: 0;
  color: var(--warning);
  margin-top: 1px;
}
.face-notice p { margin: 0; }
.face-notice strong { color: var(--text); font-weight: 600; }
.face-notice a {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.face-notice a:hover { text-decoration: none; }
.face-notice.mkt-face-notice {
  max-width: 720px;
  margin: 0 auto var(--gap-md);
}

/* Pro-tip variant — accent color, used for helpful hints (e.g. temp email trick on Help page) */
.face-notice.pro-tip {
  background: var(--accent-bg);
  border-color: rgba(196, 255, 61, 0.20);
  margin-top: var(--gap-sm);
}
.face-notice.pro-tip > svg { color: var(--accent); }

/* Telegram community card on Help page */
.help-tg-card { border-color: rgba(38, 165, 228, 0.35); }
.help-tg-card .heading-ico {
  display: flex;
  align-items: center;
  gap: 10px;
}
.help-tg-card .ico-tg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: #26a5e4;
  background: rgba(38, 165, 228, 0.12);
  border-radius: 50%;
  padding: 6px;
}
.help-tg-cta {
  display: inline-flex;
  align-items: center;
  background: #26a5e4;
  color: #fff;
  border: 1px solid #26a5e4;
  margin-top: var(--gap-sm);
}
.help-tg-cta:hover { background: #1f8ec5; border-color: #1f8ec5; color: #fff; }

/* Tutorial video on Help page */
.help-tutorial-video {
  width: 100%;
  max-width: 720px;
  border-radius: 12px;
  display: block;
  margin: var(--gap-sm) 0 var(--gap-md);
  background: #000;
}

/* Long BytePlus URL in setup instructions — break on mobile */
.help-long-link {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Mobile optimizations for Help page */
@media (max-width: 600px) {
  .help-tg-cta { width: 100%; justify-content: center; }
  .help-tg-card .heading-ico { font-size: var(--t-md); }
  .help-tutorial-video { border-radius: 8px; }
}

/* Telegram invite inside onboarding step */
.onb-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px 14px;
  background: rgba(38, 165, 228, 0.10);
  border: 1px solid rgba(38, 165, 228, 0.30);
  border-radius: var(--r-sm);
  color: #26a5e4;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: all 0.15s;
}
.onb-tg-link:hover { background: rgba(38, 165, 228, 0.18); color: #1f8ec5; }
.onb-tg-link svg { flex-shrink: 0; }

/* Payment success — Telegram CTA block */
.checkout-tg-block {
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--surface-2);
}
.checkout-tg-btn { background: #26a5e4 !important; color: #fff !important; border-color: #26a5e4 !important; }
.checkout-tg-btn:hover { background: #1f8ec5 !important; border-color: #1f8ec5 !important; }

.mt-xs { margin-top: var(--gap-xs); }
/* Utility classes — replace common inline styles */
.text-error { color: var(--error); }
.form-inline { display: inline-block; margin: 0; }
.truncate-cell { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sm { margin-top: var(--gap-sm); }

/* ════════════════════════════════════════════════════════════════════
   MARKETING STUDIO
   ════════════════════════════════════════════════════════════════════ */
:root {
  --mkt-bg: #1a0410;
  --mkt-bg-2: #2a0820;
  --mkt-pink: #ff2a87;
  --mkt-pink-hover: #ff45a0;
  --mkt-pink-bg: rgba(255, 42, 135, 0.12);
  --mkt-card-bg: #1f0a18;
  --mkt-card-border: #3a1530;
  --mkt-card-border-active: #ff2a87;
}

/* Marketing pane — extends to viewport edges via body class */
.mkt-pane {
  margin: calc(-1 * var(--gap-lg));
  padding: var(--gap-lg);
  min-height: calc(100vh - var(--header-h) - var(--tabs-h));
  flex-direction: column;
  gap: var(--gap-lg);
}
.tab-pane.active.mkt-pane {
  display: flex;
}

/* When Marketing tab active, body has gradient — kanan/kiri TIDAK abu lagi */
body.mkt-active {
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, var(--mkt-bg-2) 0%, transparent 70%),
    linear-gradient(180deg, #1a0410 0%, #0a0204 100%);
}
body.mkt-active .topbar,
body.mkt-active .tabs {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}
body.mkt-active .app {
  background: transparent;
}

/* Hero stage (centered title + result area) */
.mkt-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
  text-align: center;
  padding: var(--gap-lg) 0;
}

.mkt-hero {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 4px 32px rgba(255, 42, 135, 0.3);
  background: linear-gradient(180deg, #fff 0%, #ffd6e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Space Grotesk", ui-sans-serif, sans-serif;
}

/* Hook prompt banner */
.mkt-hook-banner {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: rgba(196, 255, 61, 0.08);
  border: 1px solid rgba(196, 255, 61, 0.3);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  max-width: 800px;
  font-size: var(--t-sm);
  color: var(--text);
}
.mkt-hook-tag {
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.mkt-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mkt-x:hover { color: var(--text); }

/* Result area */
.mkt-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--gap-md);
  width: 100%;
  max-width: 720px;
}
.mkt-result-progress { margin-bottom: var(--gap-sm); }
#mkt-progress-fill {
  height: 4px;
  background: var(--mkt-pink);
  border-radius: var(--r-pill);
  width: 0%;
  transition: width 0.4s ease;
}
#mkt-video {
  width: 100%;
  border-radius: var(--r-sm);
  background: #000;
  margin-top: var(--gap-sm);
}
.mkt-result-actions {
  display: flex;
  gap: var(--gap-xs);
  margin-top: var(--gap-sm);
}
.mkt-result-actions a { flex: 1; }

/* ─── Bottom command bar ─────────────────────────────────── */
.mkt-bar {
  display: flex;
  gap: var(--gap-sm);
  align-items: flex-end;   /* buttons fixed-size, anchor at bottom */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--r-md);
  padding: var(--gap-sm);
  position: sticky;
  bottom: var(--gap-md);
  margin-top: auto;
}

.mkt-bar-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  min-width: 0;
}
.mkt-bar-input-row {
  display: flex;
  gap: var(--gap-xs);
  align-items: flex-start;
  position: relative; /* for tag dropdown anchor */
}
#mkt-prompt {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--t-base);
  resize: none;
  outline: none;
  padding: 8px;
  min-height: 36px;     /* 1 line */
  max-height: 124px;    /* 5 lines */
  line-height: 1.5;
  font-family: inherit;
  overflow-y: auto;
}
#mkt-prompt::placeholder { color: var(--muted); }

/* Tag autocomplete dropdown */
.mkt-tag-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--mkt-card-border);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
}
.mkt-tag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 10px;
  color: var(--text);
  font-size: var(--t-sm);
  cursor: pointer;
  border-radius: var(--r-xs);
  text-align: left;
  font-family: inherit;
}
.mkt-tag-item-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.mkt-tag-item-info { flex: 1; min-width: 0; }
.mkt-tag-item-tag {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--accent);
}
/* Override pink accent only inside Marketing tab context */
body.mkt-active .mkt-tag-item-tag { color: var(--mkt-pink); }
body.mkt-active .mkt-tag-item:hover,
body.mkt-active .mkt-tag-item.active {
  background: var(--mkt-pink-bg);
  color: var(--mkt-pink);
}
.mkt-tag-item:hover, .mkt-tag-item.active {
  background: var(--accent-bg);
  color: var(--accent);
}

/* Generic tag input wrap — used by Generate Video prompt */
.tag-input-wrap {
  position: relative;
  width: 100%;
}
.mkt-tag-item-name {
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkt-tag-item-empty {
  padding: 12px;
  color: var(--muted);
  font-size: var(--t-sm);
  text-align: center;
}

.mkt-pills { display: flex; gap: var(--gap-xs); flex-wrap: wrap; }
.mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.mkt-pill:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.mkt-pill.selected {
  background: var(--accent-bg);
  border-color: rgba(196, 255, 61, 0.4);
  color: var(--accent);
}
.mkt-pill-svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.mkt-pill-arrow { width: 10px; height: 10px; opacity: 0.4; flex-shrink: 0; }
.mkt-pill.selected .mkt-pill-svg,
.mkt-pill.selected .mkt-pill-arrow { opacity: 1; }

/* Generic small icon */
.ico-sm { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
.ico-success { color: var(--accent); }
.ico-error   { color: var(--error); }

.btn-svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Heading with icon */
.heading-ico { display: inline-flex; align-items: center; gap: 6px; }

/* Label with icon (Credential tab) */
.field .label svg { display: inline-block; vertical-align: -2px; }

/* Slot (Product / Avatar) — fixed size, doesn't stretch with prompt */
.mkt-slot {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--mkt-card-bg);
  border: 1.5px dashed var(--mkt-card-border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
  font-family: inherit;
}
.mkt-slot:hover { border-color: var(--mkt-pink); color: var(--text); }
.mkt-slot.filled { border-style: solid; border-color: var(--mkt-card-border); }
.mkt-slot-plus-svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}
.mkt-slot.filled .mkt-slot-plus-svg { display: none; }
.mkt-slot-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.mkt-slot.filled .mkt-slot-label { display: none; }
.mkt-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkt-slot-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.mkt-slot-x:hover { background: var(--error); }
.mkt-slot.filled .mkt-slot-x { display: inline-flex; }

/* Settings button (gear/sliders) — fixed size */
.mkt-settings-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mkt-settings-btn svg { width: 18px; height: 18px; }
.mkt-settings-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.mkt-bar-settings { display: flex; align-items: stretch; }

/* Generate button — fixed size */
.mkt-generate {
  background: linear-gradient(135deg, var(--mkt-pink) 0%, #d6206d 100%);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: 0.04em;
  padding: 0 var(--gap-md);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 130px;
  height: 44px;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 0 4px 20px rgba(255, 42, 135, 0.3);
  transition: transform 0.1s, box-shadow 0.15s;
}
.mkt-generate-svg { width: 16px; height: 16px; flex-shrink: 0; }
.mkt-generate:hover:not(:disabled) {
  box-shadow: 0 4px 28px rgba(255, 42, 135, 0.5);
  transform: translateY(-1px);
}
.mkt-generate:active:not(:disabled) { transform: scale(0.98); }
.mkt-generate:disabled { opacity: 0.4; cursor: not-allowed; }

/* Settings panel popover */
.mkt-settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--gap-md);
  position: fixed;
  bottom: 140px;
  right: var(--gap-lg);
  z-index: 30;
  min-width: 300px;
  max-width: 360px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.mkt-settings-grid { display: flex; flex-direction: column; gap: var(--gap-sm); }

/* Compact aspect-ratio cards inside marketing settings panel */
.mkt-settings-panel .seg-aspect { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mkt-settings-panel .seg-aspect .seg-btn {
  min-height: 70px;
  padding: 8px 4px 6px;
  gap: 5px;
  font-size: 10px;
}
.mkt-settings-panel .seg-aspect-16-9 { width: 36px; height: 20px; }
.mkt-settings-panel .seg-aspect-9-16 { width: 20px; height: 36px; }
.mkt-settings-panel .seg-aspect-1-1  { width: 28px; height: 28px; }
.mkt-settings-panel .seg-aspect-4-3  { width: 34px; height: 25px; }
.mkt-settings-panel .seg-aspect-3-4  { width: 25px; height: 34px; }
.mkt-settings-panel .seg-aspect-21-9 { width: 38px; height: 16px; }
.mkt-settings-panel .seg-aspect-2-3  { width: 22px; height: 34px; }
.mkt-settings-panel .seg-aspect-3-2  { width: 34px; height: 22px; }
.mkt-settings-panel .seg-aspect-auto { width: 28px; height: 28px; }
.mkt-settings-panel .seg-aspect-auto svg { width: 18px; height: 18px; }

/* ─── Modal ──────────────────────────────────────────────── */
body.mkt-modal-open { overflow: hidden; }
.mkt-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
}
.mkt-modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.mkt-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  font-family: inherit;
}
.mkt-modal-x:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.mkt-modal-head {
  padding: var(--gap-lg) var(--gap-lg) var(--gap-sm);
  flex-shrink: 0;
}
.mkt-modal-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  font-family: "Space Grotesk", ui-sans-serif;
}
.mkt-modal-head .body {
  color: var(--muted);
  font-size: var(--t-sm);
  max-width: 60ch;
}

.mkt-modal-controls {
  padding: 0 var(--gap-lg) var(--gap-sm);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.mkt-tabs { display: flex; gap: var(--gap-xs); }
.mkt-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.mkt-tab:hover { color: var(--text); }
.mkt-tab.active {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.mkt-search {
  flex: 1;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  outline: none;
  margin-left: auto;
  max-width: 280px;
}

.mkt-modal-body {
  padding: var(--gap-md) var(--gap-lg) var(--gap-lg);
  overflow-y: auto;
  flex: 1;
}

/* ─── Card grid ──────────────────────────────────────────── */
.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--gap-sm);
}
.mkt-grid-assets { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.mkt-card {
  background: var(--mkt-card-bg);
  border: 2px solid var(--mkt-card-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  padding: 0;
  position: relative;
}
.mkt-card:hover {
  border-color: var(--mkt-pink);
  transform: translateY(-2px);
}
.mkt-card.selected {
  border-color: var(--mkt-pink);
  box-shadow: 0 0 0 1px var(--mkt-pink), 0 4px 20px rgba(255, 42, 135, 0.3);
}
.mkt-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #000;
  display: block;
}
.mkt-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mkt-bg-2), var(--mkt-card-bg));
}
.mkt-card-emoji { font-size: 48px; opacity: 0.6; }
.mkt-card-info {
  padding: 8px 10px 10px;
}
.mkt-card-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.mkt-card-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* Asset card delete button */
.mkt-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}
.mkt-card-asset:hover .mkt-card-delete { opacity: 1; }
.mkt-card-delete:hover { background: var(--error); }

/* Asset uploader (in product/avatar modal) */
.mkt-asset-uploader {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--border);
}
.mkt-asset-name-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-family: inherit;
  outline: none;
}
.mkt-asset-name-input:focus { border-color: var(--mkt-pink); }

/* ─── Marketing log + history cards (mirror Generate tab) ───── */
.mkt-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .mkt-cards-row { grid-template-columns: 1fr; }
}
.mkt-side-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mkt-card-border);
  backdrop-filter: blur(6px);
}
.mkt-side-card #mkt-log {
  font-size: var(--t-xs);
  color: var(--muted);
  max-height: 140px;
  background: rgba(0,0,0,0.3);
  margin: 0;
  border-color: var(--mkt-card-border);
}
.mkt-history-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 42, 135, 0.07);
  border: 1px solid rgba(255, 42, 135, 0.18);
  border-radius: var(--r-xs);
  line-height: 1.5;
}
.mkt-history-hint > svg {
  flex-shrink: 0;
  color: var(--mkt-pink);
  margin-top: 2px;
}
.mkt-history-hint a {
  color: var(--mkt-pink);
  font-weight: 600;
  cursor: pointer;
}
.mkt-history-hint a:hover { text-decoration: none; }

/* Marketing result card — adjust spacing */
#mkt-result {
  background: rgba(0, 0, 0, 0.45);
  border-color: var(--mkt-card-border);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  backdrop-filter: blur(6px);
}
#mkt-result .mkt-result-progress { margin-top: var(--gap-sm); }
#mkt-result .progress-bar { background: var(--mkt-card-border); }
#mkt-progress-fill { background: var(--mkt-pink); }

#mkt-task-info code { color: var(--mkt-pink); }
#mkt-result-actions { display: flex; gap: var(--gap-xs); margin-top: var(--gap-sm); }
#mkt-result-actions a { flex: 1; }

/* ════════════════════════════ GENERATE IMAGE TAB ═══════════════════════════ */
:root {
  --img-cyan:    #3dd6ff;
  --img-cyan-bg: rgba(61, 214, 255, 0.10);
}

/* Cyan accent override for image tab — preserves layout but recolors highlights */
body.img-active a              { color: var(--img-cyan); }
body.img-active .tab.active    { border-bottom-color: var(--img-cyan); color: var(--text); }
body.img-active #img-result-active code        { color: var(--img-cyan); }
body.img-active #btn-img-generate              { background: var(--img-cyan); color: var(--bg); }
body.img-active #btn-img-generate:hover:not(:disabled) { background: #6ee0ff; }
body.img-active #img-progress-fill             { background: var(--img-cyan); }
body.img-active input:focus,
body.img-active textarea:focus                 { border-color: var(--img-cyan); }
body.img-active .seg-btn.active                { color: var(--text); }
body.img-active input[type="range"]            { accent-color: var(--img-cyan); }
body.img-active .ref-slot:hover                { border-color: var(--img-cyan); }
body.img-active .ref-slot.filled               { border-color: var(--img-cyan); border-style: solid; }
body.img-active .mkt-tag-item-tag              { color: var(--img-cyan); }
body.img-active .mkt-tag-item.active,
body.img-active .mkt-tag-item:hover            { background: var(--img-cyan-bg); }

/* Seg wrap — 8 ratio buttons jadi multi-row */
.seg.seg-wrap { flex-wrap: wrap; }
.seg.seg-wrap .seg-btn { flex: 0 0 calc(25% - 4px); }

/* Disabled seg button — e.g. 4K untuk Seedream 5.0 Lite */
.seg-btn:disabled,
.seg-btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Reference image grid (14 slots) */
.img-ref-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
}
@media (max-width: 600px) {
  .img-ref-grid { grid-template-columns: repeat(5, 1fr); }
}
.img-ref-grid .ref-slot {
  font-size: var(--t-xs);
}
.ref-slot-num {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  z-index: 2;
  pointer-events: none;
}
.ref-slot.filled .ref-slot-num {
  color: var(--bg);
  background: var(--img-cyan);
  border-radius: var(--r-xs);
  padding: 1px 4px;
}
.ref-slot-plus {
  font-size: 18px;
  color: var(--text-2);
  font-weight: 300;
}
.ref-slot.filled .ref-slot-plus { display: none; }
.ref-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-slot-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 3;
}
.ref-slot-x:hover { background: var(--error); }
.ref-slot.dragover { border-color: var(--img-cyan); background: var(--img-cyan-bg); }

/* Result image grid */
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-xs);
  margin-top: var(--gap-sm);
}
.img-grid-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
}
.img-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.img-grid-cell:hover img { transform: scale(1.02); }
.img-grid-dl {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}
.img-grid-cell:hover .img-grid-dl { opacity: 1; }
.img-grid-dl:hover { background: var(--img-cyan); color: var(--bg); }

/* Lightbox */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 24px;
}
.img-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Small inline spinner */
.spinner-sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════ AUTH PAGES ═══════════════════════════ */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 30%, rgba(196, 255, 61, 0.06), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(61, 214, 255, 0.06), transparent 60%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: var(--gap-md);
}
.auth-wrap { width: 100%; max-width: 440px; }
.auth-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: 22px;
  color: var(--accent);
}
.auth-brand .brand-ico { width: 22px; height: 22px; color: var(--accent); fill: none; stroke: var(--accent); }
.auth-title { font-size: 24px; margin-bottom: 16px; }
.auth-sub { color: var(--text-2); margin-bottom: 20px; font-size: var(--t-sm); }
.auth-form { display: flex; flex-direction: column; gap: var(--gap-sm); }
.auth-btn { justify-content: center; margin-top: 8px; width: 100%; }
/* Billing upgrade CTA — primary accent (was rendering as default white button) */
.checkout-btn:not(:disabled) {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  font-weight: 700;
}
.checkout-btn:not(:disabled):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.auth-alt {
  text-align: center;
  color: var(--text-2);
  font-size: var(--t-sm);
  margin-top: 18px;
}
.auth-alt a { color: var(--accent); font-weight: 500; }
.auth-flash { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }

/* Checkout finish page */
.checkout-finish {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 32px 16px;
}
.checkout-finish-ico {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin-bottom: 18px;
}
.checkout-finish-ico-ok { background: var(--accent-bg); color: var(--accent); }
.checkout-finish-ico-pending { background: rgba(249,115,22,0.15); color: #f97316; }
.checkout-finish-ico-error { background: var(--error-bg); color: var(--error); }
.checkout-finish-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--text);
}
.checkout-finish-sub {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.checkout-finish-hint {
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 16px;
}
.checkout-finish-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 24px;
}
.checkout-finish-meta code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* Language toggle pill (auth pages) */
.auth-lang-toggle {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.lang-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  line-height: 1;
}
.lang-toggle-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}
.lang-toggle-pill .lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.lang-toggle-pill .lang-flag svg { display: block; }
.lang-toggle-pill .lang-toggle-label {
  white-space: nowrap;
}
.alert-info, .alert-ok { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.alert-error { background: var(--error-bg); color: var(--error); }

/* Billing page — 3-card pricing grid */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}
.billing-card {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.billing-card-highlight {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.billing-card .heading { font-size: var(--t-lg); margin: 0; }
.billing-price {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 0;
  font-family: 'Space Grotesk', sans-serif;
}
.billing-features {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  font-size: var(--t-sm);
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.billing-features li::before {
  content: "✓";
  color: var(--accent);
  margin-right: 6px;
  font-weight: 600;
}
.billing-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.billing-badge-gold {
  background: linear-gradient(135deg, #ffd166, #f3a73a);
  color: #1a1a1a;
}
.billing-badge-current {
  background: #10b981;
  color: white;
}

/* Current tier status card — shown above billing grid */
.billing-status-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.billing-status-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.billing-status-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.billing-status-tier {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #10b981;
}
.billing-status-expires {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.billing-status-warn {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #fbbf24;
}
.billing-status-card .hint { margin: 0; }

/* Current paket card — highlight border */
.billing-card-current {
  border-color: #10b981 !important;
  background: linear-gradient(180deg, rgba(16,185,129,0.06) 0%, transparent 60%) !important;
}

/* Disabled (lower tier) card */
.billing-card-disabled {
  opacity: 0.5;
  filter: grayscale(0.3);
}
.billing-card-disabled .billing-features li { color: var(--muted); }

.auth-card .billing-grid { margin-bottom: 16px; }
.auth-card { max-width: 780px; }
@media (min-width: 600px) {
  .auth-wrap:has(.billing-grid) { max-width: 880px; }
}

/* Header user widget — Day 1 (akan dipakai di index.html) */
.user-widget {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 10px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.user-widget code { background: transparent; color: var(--text); font-size: 11px; }
.user-widget .btn-tiny { margin: 0; }
.user-widget form { display: inline; margin: 0; }
.user-widget form button { background: none; border: none; cursor: pointer; color: var(--text-2); font-size: var(--t-xs); padding: 4px 8px; border-radius: var(--r-pill); }
.user-widget form button:hover { color: var(--error); background: var(--error-bg); }

/* ════════════════════════════ HEADER DROPDOWNS ═══════════════════════════ */
.tab-hidden { display: none !important; }  /* sembunyi dari main tab nav */

.hdr-menu { position: relative; }
.hdr-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.hdr-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-1); }
.hdr-menu.open .hdr-btn { color: var(--accent); border-color: var(--accent); }

.hdr-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 6px;
  display: none;
  z-index: 100;
}
.hdr-menu.open .hdr-dropdown { display: block; }

.hdr-item, .hdr-item-form button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
}
.hdr-item:hover, .hdr-item-form button:hover { background: var(--surface-2); }
.hdr-item-form { margin: 0; padding: 0; }
/* "Bagikan" consent toggle in the settings dropdown */
.hdr-toggle { justify-content: space-between; }
.hdr-toggle-label { display: flex; align-items: center; gap: 10px; }
.hdr-switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 999px; background: var(--border-2, #3a3f47);
  position: relative; cursor: pointer; transition: background .2s; margin: 0;
}
.hdr-switch::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
.hdr-switch:checked { background: #34c759; }
.hdr-switch:checked::before { transform: translateX(16px); }
.hdr-item-danger { color: var(--error) !important; }
.hdr-item-danger:hover { background: var(--error-bg) !important; }
.hdr-item-email {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hdr-item-email code {
  background: transparent;
  padding: 0;
  font-size: 12px;
  color: var(--text-2);
  word-break: break-all;
}
.hdr-item-email .badge { align-self: flex-start; font-size: 10px; }

/* ════════════════════════════ GRID TOOL TAB ═══════════════════════════ */
.grid-tool-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--gap-md);
  padding: var(--gap-md);
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .grid-tool-wrap { grid-template-columns: 1fr; }
}

.grid-tool-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.grid-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}
.grid-dims {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-sm);
  color: var(--text-2);
}

/* Canvas container with checkerboard transparency pattern */
.grid-canvas-wrap {
  position: relative;
  min-height: 480px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background-color: #0d0d0d;
  background-image:
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--gap-md);
}
.grid-canvas-wrap.dragover {
  border-color: var(--accent);
  background-color: rgba(196, 255, 61, 0.05);
}
.grid-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  width: auto;
  border-radius: var(--r-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.grid-empty {
  text-align: center;
  color: var(--text-2);
  cursor: pointer;
  padding: var(--gap-lg);
}
.grid-empty svg { color: var(--text-2); opacity: 0.4; margin-bottom: 12px; }
.grid-empty p { margin: 6px 0; }
.grid-empty p:first-of-type { color: var(--text); }

/* Sidebar */
.grid-tool-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
.grid-tool-side .card { padding: var(--gap-sm); }
.grid-tool-side .heading {
  font-size: var(--t-base);
  margin: 0 0 var(--gap-xs);
}

/* Presets grid 2 cols */
.grid-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.grid-preset-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--t-xs);
  padding: 9px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.grid-preset-btn:hover { border-color: var(--border-2); background: var(--surface-2); }
.grid-preset-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

/* Field rows (label + slider + number input) */
.grid-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.grid-field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-2);
  font-weight: 500;
}
.grid-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.grid-num-input {
  width: 56px !important;
  padding: 4px 6px !important;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs) !important;
}
.grid-unit {
  font-style: normal;
  font-size: 10px;
  color: var(--text-2);
}
.grid-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* Color swatches */
.grid-hex-input {
  width: 90px !important;
  padding: 4px 6px !important;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs) !important;
  text-transform: uppercase;
}
.grid-swatches {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 6px;
}
.grid-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
}
.grid-swatch:hover { transform: scale(1.1); }
.grid-swatch.active { border-color: var(--accent); transform: scale(1.05); }
.grid-color-picker {
  width: 100%;
  height: 32px;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  background: transparent !important;
}
.grid-color-picker::-webkit-color-swatch-wrapper { padding: 0; border-radius: var(--r-sm); }
.grid-color-picker::-webkit-color-swatch { border: none; border-radius: var(--r-sm); }

/* Action buttons */
.grid-action-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}
.grid-action-btn:last-child { margin-bottom: 0; }

/* Paywall view */
.grid-paywall {
  text-align: center;
  padding: 60px var(--gap-md);
}
.grid-paywall .heading { font-size: 24px; margin-bottom: 12px; }
.grid-paywall .body { margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.grid-paywall .btn { margin-top: 12px; }

/* ════════════════════════════ APP-LAYOUT PAGES (affiliate, billing, account) ═══ */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--gap-md) var(--gap-md) var(--gap-lg);
}
@media (max-width: 720px) {
  .page-container { padding: var(--gap-sm); }
}

/* ════════════════════════════ AFFILIATE PAGE ═══════════════════════════ */
.aff-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aff-link-row input {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-sm);
}
.aff-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-sm);
  margin: var(--gap-md) 0;
}
.aff-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aff-stat-label {
  font-size: var(--t-xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.aff-stat-value {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text);
}
.aff-stat-card-paid .aff-stat-value { color: var(--accent); }

.aff-payout-ready {
  border: 1px solid var(--accent);
  background: var(--accent-bg);
  color: var(--text);
  padding: 14px 18px;
  margin-top: 12px;
}
.aff-payout-locked {
  background: var(--surface-2);
  padding: 14px 18px;
  margin-top: 12px;
}

/* Affiliate Rules card */
.aff-rules { margin-top: var(--gap-md); }
.aff-rules .heading { margin-bottom: 12px; }
.aff-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aff-rules-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.aff-rules-list li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--accent);
  font-size: 18px;
  line-height: 1.3;
}
.aff-rules-list strong { color: var(--text); }
.aff-rules-list .hint { font-size: 11px; }

/* Affiliate hero */
.aff-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.aff-hero-ico { width: 36px; height: 36px; color: var(--accent); flex-shrink: 0; }
.aff-hero-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.aff-hero-sub { margin: 0; color: var(--text-2); font-size: var(--t-sm); }

.aff-stat-ico {
  display: inline-flex;
  width: 32px; height: 32px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* Affiliate user-page sub-tabs */
.aff-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-2);
  margin: 24px 0 16px;
}
.aff-tab {
  background: none;
  border: none;
  color: var(--text-2);
  padding: 10px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-sm);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.aff-tab:hover { color: var(--text); }
.aff-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.aff-pane { display: none; }
.aff-pane.active { display: block; }

/* Top Affiliates leaderboard */
.aff-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aff-rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.aff-rank-me {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
}
.aff-rank-pos {
  width: 36px;
  font-weight: 600;
  color: var(--text-2);
  font-size: 16px;
  text-align: center;
}
.aff-rank-name { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.aff-rank-name small { color: var(--accent); font-weight: 600; font-family: inherit; font-size: 11px; }
.aff-rank-amount { font-weight: 600; font-family: 'Space Grotesk', sans-serif; }

/* ════════════════════════════ ONBOARDING MODAL ═══════════════════════════ */
.onb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
}
.onb-modal {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  max-width: 520px;
  width: 100%;
  padding: 32px 28px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.onb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-close:hover { background: var(--surface-2); color: var(--text); }

.onb-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}
.onb-dot {
  width: 24px;
  height: 4px;
  background: var(--border-2);
  border-radius: var(--r-xs);
  transition: background 0.2s;
}
.onb-dot.active { background: var(--accent); }

.onb-step { display: none; }
.onb-step.active { display: block; }
.onb-ico {
  width: 48px;
  height: 48px;
  color: var(--accent);
  margin: 0 auto 14px;
  display: block;
}
.onb-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px;
  color: var(--text);
}
.onb-body {
  text-align: center;
  color: var(--text-2);
  margin: 0 0 18px;
  line-height: 1.5;
}
.onb-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.onb-checklist li { color: var(--text); font-size: var(--t-sm); }
.video-placeholder {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: var(--r-sm);
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  cursor: not-allowed;
}
.video-placeholder svg {
  background: rgba(196,255,61,0.12);
  border: 2px solid rgba(196,255,61,0.4);
  padding: 14px;
  border-radius: 50%;
  color: var(--accent);
}
.video-placeholder-label {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Settings info card — embedded setup guide */
.settings-info-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.02));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 0;
  color: var(--text);
}
.settings-info-card h3 { margin: 0 0 14px; font-size: 17px; }
.settings-info-card details {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 6px 0;
}
.settings-info-card details[open] { background: rgba(0, 0, 0, 0.25); }
.settings-info-card summary {
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
  user-select: none;
}
.settings-info-card summary:hover { color: var(--accent); }
.settings-info-card ol, .settings-info-card ul { margin: 10px 0; padding-left: 22px; line-height: 1.65; font-size: 13px; }
.settings-info-card li { margin-bottom: 4px; }
.settings-info-card a { color: var(--accent); text-decoration: underline; }
.settings-info-card code { background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.settings-info-card h4 { margin: 12px 0 6px; font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }

.video-placeholder-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.onb-steps {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.onb-steps li { margin-bottom: 4px; }
.onb-steps a, .onb-hint a { color: var(--accent); }
.onb-steps code, .onb-hint code, .onb-steps kbd {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.onb-hint {
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: var(--t-xs);
  color: var(--text);
  margin: 12px 0 18px;
}
.onb-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.onb-actions .btn { flex: 1; justify-content: center; }
.onb-step > .btn.onb-next, #onb-done { width: 100%; justify-content: center; }

/* Onboarding v2: two-mode explainer + T&C footer */
.onb-modecards { display: flex; gap: 10px; margin: 4px 0 20px; }
.onb-modecard {
  flex: 1; background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--r-sm); padding: 14px 12px; text-align: center;
}
.onb-modecard p { margin: 8px 0 0; font-size: var(--t-sm); color: var(--text-2); line-height: 1.4; }
.onb-modebadge {
  display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .5px; padding: 3px 11px; border-radius: 999px;
  background: rgba(38, 165, 228, .15); color: var(--accent);
}
.onb-modebadge.db { background: rgba(255, 138, 61, .16); color: #ff8a3d; }
.onb-modebadge.dl { background: rgba(167, 107, 255, .16); color: #a76bff; }
.onb-modebadge.fg { background: rgba(90, 209, 122, .16); color: #5ad17a; }
.onb-modebadge.lm { background: rgba(77, 159, 255, .16); color: #4d9fff; }
.onb-modebadge.gh { background: rgba(255, 179, 64, .16); color: #ffb340; }
.onb-stepbadge { display: block; width: fit-content; margin: 0 auto 10px; }
.onb-proscons { display: flex; gap: 10px; margin: 0 0 16px; text-align: left; }
.onb-pros, .onb-cons { flex: 1; background: var(--bg); border-radius: var(--r-sm); padding: 12px 14px; }
.onb-pros h4, .onb-cons h4, .onb-feat h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
.onb-pros h4 { color: #28c76f; }
.onb-cons h4 { color: #ff8a65; }
.onb-proscons ul, .onb-feat ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.onb-proscons li, .onb-feat li { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.onb-feat {
  background: rgba(167, 107, 255, .08); border: 1px solid rgba(167, 107, 255, .25);
  border-radius: var(--r-sm); padding: 12px 14px; margin: 0 0 16px; text-align: left;
}
.onb-feat h4 { color: #a76bff; }
.onb-feat li strong { color: var(--text); }
.onb-textlink {
  display: block; width: 100%; margin: 12px auto 0; background: none; border: none;
  color: var(--accent); font-size: var(--t-sm); cursor: pointer; text-align: center;
}
.onb-textlink:hover { text-decoration: underline; }
.onb-footer { border-top: 1px solid var(--border-2); margin-top: 16px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.onb-tos { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.onb-tos input, .onb-dontshow input { margin-top: 1px; flex-shrink: 0; }
.onb-tos a { color: inherit; text-decoration: underline; }
.onb-tos.onb-shake { animation: onbShake .42s; }
.onb-tos.onb-shake span { color: #ff6b6b; }
@keyframes onbShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.onb-dontshow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.onb-finish-full { width: 100%; justify-content: center; margin-top: 4px; }
/* slide 1 & 2: single centered forward button */
.onb-actions-single { justify-content: center; }
.onb-actions-single .btn { flex: 0 1 260px; }
/* slide 2 mode cards: each lists pros + cons */
.onb-modecard { text-align: left; }
.onb-pc-h { margin: 12px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.onb-pc-h:first-of-type { margin-top: 12px; }
.onb-pc-pros { color: #28c76f; }
.onb-pc-cons { color: #ff8a65; }
/* lean onboarding: pick ONE mode — each card is also its setup CTA */
.onb-pickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.onb-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; position: relative;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 13px 14px; text-decoration: none; cursor: pointer; transition: border-color .14s, transform .14s;
}
.onb-pick:hover { border-color: var(--accent); transform: translateY(-1px); }
.onb-pick-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.onb-pick-rec { border-color: rgba(167,107,255,.45); box-shadow: inset 0 0 0 1px rgba(167,107,255,.15); }
.onb-pick .onb-rec {
  position: absolute; top: 11px; right: 11px; font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #a76bff; background: rgba(167,107,255,.16); padding: 2px 7px; border-radius: 999px;
}
@media (max-width: 560px) { .onb-pickgrid { grid-template-columns: 1fr; } }
.onb-adv { list-style: none; padding: 0; margin: 6px 0 0; text-align: left; display: flex; flex-direction: column; gap: 5px; }
.onb-adv li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.onb-adv li strong { color: var(--text); }
.onb-adv li::before { content: "✓"; position: absolute; left: 0; color: #28c76f; font-weight: 700; }
.onb-adv-cons li::before { content: "✕"; color: #ff6b6b; }
.onb-modecard-rec { border-color: rgba(167,107,255,.5); box-shadow: 0 0 0 1px rgba(167,107,255,.25); }
/* slide 3 setup CTAs side by side (compound selector to beat .onb-setup-list column) */
.onb-setup-list.onb-setup-row { flex-direction: row; }
.onb-setup-list.onb-setup-row .btn { flex: 1; width: auto; min-width: 0; }
/* CTA buttons must NOT reuse the green primary (that's reserved for Selesai):
   BytePlus = neutral, DOLA = purple (matches its badge) */
.onb-setup-row .onb-cta { position: relative; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); }
.onb-setup-row .onb-cta:hover { border-color: var(--text-2); background: var(--surface-1); }
.onb-setup-row .onb-cta-rec { border-color: #a76bff; background: rgba(167,107,255,.14); color: #c9a6ff; font-weight: 600; }
.onb-setup-row .onb-cta-rec:hover { background: rgba(167,107,255,.24); border-color: #a76bff; }
/* T&C + don't-show: use the app's .check style; tighten for the footer */
.onb-footer .check { font-size: 12px; color: var(--text-2); align-items: flex-start; }
.onb-footer .check a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) {
  .onb-modecards, .onb-proscons, .onb-setup-list.onb-setup-row { flex-direction: column; }
  .onb-setup-list.onb-setup-row .btn { width: 100%; }
}

/* Onboarding v3: how-it-works flow + comparison table + setup buttons */
.onb-flow { counter-reset: onbf; list-style: none; padding: 0; margin: 4px 0 20px; text-align: left; }
.onb-flow li {
  counter-increment: onbf; position: relative; padding: 8px 0 8px 38px;
  color: var(--text-2); font-size: var(--t-sm); line-height: 1.45;
  border-bottom: 1px solid var(--border-2);
}
.onb-flow li:last-child { border-bottom: none; }
.onb-flow li::before {
  content: counter(onbf); position: absolute; left: 0; top: 7px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-bg, rgba(196,255,61,.15));
  color: var(--accent); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.onb-cmp { width: 100%; border-collapse: collapse; margin: 4px 0 18px; font-size: 13px; }
.onb-cmp th, .onb-cmp td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border-2); vertical-align: top; color: var(--text); }
.onb-cmp thead th { font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--accent); }
.onb-cmp thead th.onb-col-dola { color: #a76bff; }
.onb-cmp .onb-cmp-rowlabel { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.onb-cmp td.onb-col-dola { background: rgba(167, 107, 255, .08); font-weight: 500; }
.onb-cmp tbody tr:last-child td { border-bottom: none; }
.onb-setup-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.onb-setup-list .btn { width: 100%; justify-content: center; }
.onb-cta-rec { position: relative; }
.onb-rec {
  position: absolute; top: -9px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #a76bff; color: #fff;
}
.onb-footrow-btns { display: flex; gap: 8px; align-items: center; }

/* Admin sub-tabs */
.aff-admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-2);
  margin: 20px 0 16px;
}
.aff-admin-tabs a {
  padding: 10px 18px;
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--t-sm);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.aff-admin-tabs a:hover { color: var(--text); }
.aff-admin-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ════════════════════════════ TRIAL BANNER + PAYWALL ═══════════════════ */
.trial-banner {
  background: linear-gradient(90deg, var(--warning-bg), transparent);
  border-bottom: 1px solid var(--warning);
  padding: 10px var(--gap-md);
}
.trial-banner-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: var(--t-sm);
}
.trial-banner-content svg { color: var(--warning); flex-shrink: 0; }
.trial-banner-content a { color: var(--accent); font-weight: 600; text-decoration: none; margin-left: auto; padding-left: 8px; }
.trial-banner-content a:hover { text-decoration: none; }

.paywall-card {
  max-width: 520px;
  margin: 60px auto;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 40px 32px;
}
.paywall-ico {
  width: 56px;
  height: 56px;
  color: var(--accent);
  margin: 0 auto 16px;
  display: block;
}
.paywall-card .heading { font-size: 22px; margin: 0 0 8px; }
.paywall-card .body { color: var(--text-2); margin: 0 0 20px; }
.paywall-features {
  list-style: none;
  padding: 16px 20px;
  margin: 0 0 24px;
  background: var(--bg);
  border-radius: var(--r-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--text);
}
.paywall-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px !important;
  font-size: var(--t-base);
  width: auto !important;
}

@media (max-width: 600px) {
  .trial-banner { padding: 8px var(--gap-sm); }
  .trial-banner-content { font-size: var(--t-xs); flex-wrap: wrap; }
  .trial-banner-content a { margin-left: 0; }
  .paywall-card { margin: 24px var(--gap-sm); padding: 28px 20px; }
  .paywall-card .heading { font-size: 18px; }
  .paywall-ico { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════
   📱 MOBILE-FIRST RESPONSIVE (≤ 900px tablet, ≤ 600px phone, ≤ 400px tiny)
   ════════════════════════════════════════════════════════════════════ */

/* iOS Safari — prevent zoom on input focus (need 16px+ font).
   Covers tablet+phone (≤900px) so tablet portrait juga ga zoom. */
@media (max-width: 900px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="search"], input[type="url"],
  input[type="tel"], input[type="datetime-local"], textarea, select {
    font-size: 16px !important;
  }
}

/* ── Tablet ≤ 900px ── */
@media (max-width: 900px) {
  /* Header tighter — mockup layout: brand · mode-pill … gear */
  .header { padding: 0 14px; height: 56px; justify-content: flex-start; gap: 8px; }
  .brand { font-size: var(--t-base); flex-shrink: 0; }
  .brand-ico { width: 16px; height: 16px; }
  .brand-suffix { display: none; }                /* "Seedance Unlimited" → "Seedance" on mobile */
  .header-status { gap: 4px; margin-left: auto; flex-shrink: 0; }
  #cred-badge, #status-text { display: none; }   /* hide secondary info on mobile */
  #lang-toggle, #quota-widget { display: none !important; }  /* no language/quota in mobile header */
  #hdr-profile { display: none; }                 /* profile lives in the bottom nav */

  /* Tabs nav — horizontal scroll ONLY (lock vertical) */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--gap-sm);
    gap: 4px;
    /* Lock height so vertical pan tidak jalan */
    height: var(--tabs-h);
    flex-wrap: nowrap;
    touch-action: pan-x;   /* mobile: izinkan horizontal swipe saja */
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    padding: 0 14px;
    font-size: var(--t-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: max-content;
  }
  /* Mobile: sidenav hidden — surface Chat + Galeri di top tab nav.
     Kredensial/Detail Kuota/Bantuan tetap hidden (akses via gear icon di header). */
  .tabs .tab[data-tab="chat"],
  .tabs .tab[data-tab="assets"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Affiliate user-tabs scrollable — horizontal only */
  .aff-tabs, .aff-admin-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    touch-action: pan-x;
  }
  .aff-tabs::-webkit-scrollbar, .aff-admin-tabs::-webkit-scrollbar { display: none; }
  .aff-tab, .aff-admin-tabs a { flex-shrink: 0; white-space: nowrap; }

  /* Cards / app pages */
  .page-container { padding: var(--gap-sm); }
  .card { padding: var(--gap-sm); }

  /* Pricing cards — stack vertically */
  .billing-grid, .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-highlight { transform: none !important; }

  /* Grid Tool — stack sidebar */
  .grid-tool-wrap { grid-template-columns: 1fr; gap: var(--gap-sm); padding: var(--gap-sm); }
  .grid-canvas-wrap { min-height: 320px; padding: var(--gap-sm); }

  /* Hero affiliate */
  .aff-hero { flex-direction: column; text-align: center; gap: 8px; padding: 16px; }
  .aff-hero-title { font-size: 20px; }
  .aff-stats { grid-template-columns: 1fr 1fr; }
  .aff-stat-value { font-size: 18px; }

  /* Header dropdowns adjust position */
  .hdr-dropdown { min-width: 200px; right: 0; }
}

/* ── Phone ≤ 600px ── */
@media (max-width: 600px) {
  :root { --header-h: 50px; }

  /* Heading sizes */
  h1.heading { font-size: 22px; }
  h2.heading { font-size: 17px; }

  /* Header more compact */
  .header { padding: 0 12px; }
  .hdr-btn { width: 34px; height: 34px; }
  .hdr-btn svg { width: 16px; height: 16px; }

  /* Sidebar — kalau tampil di mobile (Generate tabs) */
  .sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sidebar-scroll { overflow: visible !important; max-height: none !important; }

  /* Buttons — bigger touch targets */
  .btn { padding: 10px 16px; min-height: 40px; }
  .btn-tiny { padding: 6px 10px; min-height: 30px; }
  .seg-btn { padding: 8px 10px; min-height: 36px; }

  /* Stats compact */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .aff-stats { grid-template-columns: 1fr; }

  /* Tables — horizontal scroll wrap */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Modals (onboarding) — fill more screen */
  .onb-modal { max-width: calc(100vw - 16px); padding: 22px 16px; max-height: 92vh; }
  .onb-title { font-size: 18px; }
  .onb-body { font-size: 13px; }
  .onb-ico { width: 36px; height: 36px; margin-bottom: 10px; }
  .onb-progress { margin-bottom: 18px; }
  .onb-actions { flex-direction: column-reverse; }
  /* slide 1 & 2 single forward button: full width on phones */
  .onb-actions-single .btn { flex: 1 1 auto; width: 100%; }
  /* slide 2: stack the two mode cards on phones (pros/cons need full width) */
  .onb-modecards { flex-direction: column; gap: 10px; }
  .onb-modecard { padding: 14px; }
  .onb-adv li { font-size: 13px; }
  /* slide 3: stack the setup CTAs; extra gap so the "Rekomendasi" badge has room */
  .onb-setup-list.onb-setup-row { flex-direction: column; gap: 16px; }
  .onb-setup-list.onb-setup-row .btn { width: 100%; }
  /* footer checkboxes + Selesai */
  .onb-footer .check { font-size: 12.5px; }

  /* Marketing Studio bar — stack */
  .mkt-bar { flex-direction: column; gap: var(--gap-xs); align-items: stretch; padding: var(--gap-sm); }
  .mkt-bar-main, .mkt-bar-settings { width: 100%; }
  .mkt-slot { width: 100% !important; height: 60px !important; flex-direction: row; justify-content: flex-start; padding: 0 14px; gap: 10px; }

  /* Marketing pills + modal */
  .mkt-pills { flex-wrap: wrap; }
  .mkt-modal { max-width: calc(100vw - 16px); padding: 20px 16px; max-height: 92vh; overflow-y: auto; }

  /* Affiliate leaderboard — compact */
  .aff-rank { padding: 8px 12px; font-size: var(--t-xs); }
  .aff-rank-pos { width: 28px; font-size: 14px; }
  .aff-rank-name { font-size: 11px; }

  /* Image grid result — smaller cells */
  .img-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* Reference slots — smaller grid on mobile */
  .img-ref-grid { grid-template-columns: repeat(5, 1fr); }
  .ref-grid { grid-template-columns: repeat(3, 1fr); }

  /* Generate button - sticky bottom on mobile feels native */
  .sidebar-footer { padding: var(--gap-sm); }

  /* Landing header burger-like */
  .landing-header { padding: 12px var(--gap-sm); }
  .landing-nav { gap: 10px; }
  .landing-nav a:not(.btn):not(.btn-tiny) { font-size: 12px; }

  /* Hero landing */
  .hero { padding: 40px var(--gap-sm) 30px; }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 15px; }
  .hero-cta { gap: 8px; }
  .btn-lg { padding: 11px 20px; font-size: 14px; }

  /* Feature grid */
  .feature-grid { gap: 12px; }
  .feature-card { padding: 20px; }

  /* Section padding */
  .section { padding: 50px var(--gap-sm); }
  .section-title { font-size: 26px; }

  /* FAQ */
  .faq-grid { gap: 8px; }
  .faq-item { padding: 12px 14px; }
  .faq-item summary { font-size: 14px; }

  /* Pricing */
  .pricing-card { padding: 24px 18px; }
  .pricing-price { font-size: 24px; }

  /* Footer */
  .landing-footer { padding: 20px var(--gap-sm); flex-direction: column; gap: 12px; text-align: center; }

  /* Tag autocomplete dropdown — fix position above content */
  .mkt-tag-dropdown { max-height: 200px; }

  /* Lightbox for image preview */
  .img-lightbox { padding: 12px; }

  /* ─── Mobile audit pass fixes (2026-05-17) ─── */

  /* Fix #1 — Affiliate/admin tables readable: allow wrap, override global nowrap */
  .admin-table {
    white-space: normal !important;
    font-size: var(--t-xs);
    min-width: 0;
  }
  .admin-table th,
  .admin-table td {
    padding: 6px 6px;
    word-break: break-word;
    vertical-align: top;
  }
  .admin-table .badge { font-size: 10px; padding: 2px 6px; }

  /* Fix #4 — Form field gaps less cramped */
  .field { gap: 10px; }
  .field-row { grid-template-columns: 1fr; gap: 10px; }

  /* Fix #5 — Billing status row gap tighter on phone */
  .billing-status-row { gap: 10px; }

  /* Fix #6 — Header touch target back to 40px (44 ideal but 40 keeps header compact) */
  .hdr-btn { width: 40px; height: 40px; }
  .hdr-btn svg { width: 18px; height: 18px; }

  /* Fix #9 — Modal padding tighter */
  .onb-modal { padding: 20px 14px; }
  .mkt-modal { padding: 16px 12px; }

  /* Fix #10 — Tab padding micro-tighter */
  .tabs { padding: 0 8px; }
  .tab { padding: 0 10px; }
}

/* Fix #7 — Narrow phones: aff-link-row stack input above buttons */
@media (max-width: 480px) {
  .aff-link-row { flex-wrap: wrap; gap: 6px; }
  .aff-link-row input { flex: 1 1 100%; min-width: 0; }
}

/* Fix #8 — Responsive font scaling via clamp(): elegant cross-device */
.billing-price { font-size: clamp(18px, 5vw, 22px); }
.auth-title { font-size: clamp(20px, 5.5vw, 24px); }

/* ── Tiny phones ≤ 380px ── */
@media (max-width: 380px) {
  .hero-title { font-size: 26px; }
  .pricing-price { font-size: 20px; }
  .aff-hero-title { font-size: 18px; }
  .seg.seg-wrap .seg-btn { flex: 0 0 calc(33.33% - 4px); }   /* 3 col instead of 4 */
  .img-ref-grid { grid-template-columns: repeat(4, 1fr); }
  .ref-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   SIDE NAVIGATION (Desktop layout shell)
   ════════════════════════════════════════════════════════════════════ */
:root { --sidenav-w: 220px; }

body.has-sidenav { display: block; }
.sidenav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidenav-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  gap: 8px;
  z-index: 30;
}
.app-shell {
  margin-left: var(--sidenav-w);
  min-height: 100vh;
}
.sidenav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sidenav-brand .brand-ico { color: var(--accent); width: 22px; height: 22px; }
.sidenav-brand-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--text);
}
.sidenav-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.sidenav-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 6px;
}
.sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: var(--t-sm);
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sidenav-item:hover { background: var(--bg); color: var(--text); }
.sidenav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}
.sidenav-item svg { flex-shrink: 0; }
/* Anchor-based nav items (Affiliate links → /affiliate) render identically to their <button> siblings. */
a.sidenav-item, a.hdr-btn, a.mhome-card { text-decoration: none; }

.sidenav-foot {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidenav-quota {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  border: 1px solid var(--border);
}
.sidenav-quota.hidden { display: none; }
.sidenav-quota-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.sidenav-quota-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text);
  margin-top: 4px;
}
/* Override the 80px-wide quota-bar (which was sized for header chip) — sidenav needs full-width */
.sidenav-quota .quota-bar { width: 100%; height: 6px; }
.sidenav-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.sidenav-user-email {
  font-size: 10px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sidenav-logout-form { display: inline; margin: 0; }
.sidenav-logout-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: var(--r-xs);
}
.sidenav-logout-btn:hover { color: var(--error, #ff6b6b); background: var(--surface-1); }

/* Desktop overrides: hide top tabs nav + header brand when sidenav active */
@media (min-width: 901px) {
  body.has-sidenav .tabs { display: none; }
  body.has-sidenav .header .brand { display: none; }
  body.has-sidenav .header {
    padding-left: 24px;
    justify-content: flex-end;   /* right-align status group when brand hidden */
  }
  /* Header quota widget redundant on desktop (sidebar already has it) */
  body.has-sidenav .header #quota-widget { display: none !important; }
  /* When top-tab nav is hidden, sidebar sticky top + max-height shouldn't account for tabs-h */
  body.has-sidenav .sidebar {
    top: calc(var(--header-h) + var(--gap-md));
    max-height: calc(100vh - var(--header-h) - var(--gap-lg));
  }
  /* Main content area also no longer needs tabs-h offset */
  body.has-sidenav main.app { min-height: calc(100vh - var(--header-h)); }
}

/* Mobile: hide sidenav, show top tabs nav and full header */
@media (max-width: 900px) {
  .sidenav { display: none; }
  .app-shell { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   USAGE SUMMARY GRID
   ════════════════════════════════════════════════════════════════════ */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}
.usage-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.usage-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════
   GALLERY tab — All Assets with filter
   ════════════════════════════════════════════════════════════════════ */
.assets-stage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 80px;
}
.assets-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-bottom: var(--gap-md);
}
.assets-head h2 { margin: 0 0 4px; font-size: 22px; }
.assets-head .hint { margin: 0; }
.assets-controls {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.assets-filter.seg {
  display: inline-flex;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.assets-filter .seg-btn {
  border: none;
  background: transparent;
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
}
.assets-filter .seg-btn:hover { color: var(--text); }
.assets-filter .seg-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
}
.assets-refresh-btn {
  width: 36px;
  height: 36px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.4s;
}
.assets-refresh-btn:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.assets-refresh-btn:active { transform: rotate(180deg); }

.gallery-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (max-width: 700px) {
  .assets-head { flex-direction: column; align-items: stretch; }
  .assets-controls { justify-content: space-between; }
  .assets-filter .seg-btn { padding: 6px 10px; font-size: 12px; }
  .gallery-grid-large { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   CHAT (LLM) — v2 modern, full-width like Halo/Higgsfield reference
   ════════════════════════════════════════════════════════════════════ */
.chat-stage-v2 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h) - 24px);
  width: 100%;
  background: transparent;
  border: none;
  overflow: hidden;
  position: relative;
}

.chat-stage-v2 .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 180px;   /* bottom padding for floating input */
  display: flex;
  flex-direction: column;
  gap: 22px;
  scroll-behavior: smooth;
}
.chat-stage-v2 .chat-messages > * {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Empty state — centered hero ────────────────────────────── */
.chat-stage-v2 .chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 80px 0 40px;
  gap: 18px;
  max-width: 760px;
}
.chat-empty-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-bg), var(--surface-1));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.chat-empty-logo svg { width: 28px; height: 28px; }
.chat-empty-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}
.chat-empty-sub {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.6;
  max-width: 600px;
}
.chat-suggest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  width: 100%;
}
.chat-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chat-suggest-item:hover {
  background: var(--surface-1);
  color: var(--text);
}
.chat-suggest-item svg { color: var(--muted); flex-shrink: 0; }

/* ── Bubbles — minimal, no harsh borders ───────────────────── */
.chat-bubble {
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble-user {
  align-self: flex-end;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 18px;
  padding: 10px 16px;
  max-width: 78%;
  margin-right: 0;
  margin-left: auto;
}
.chat-bubble-assistant {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0 0 0 36px;
  position: relative;
  width: 100%;
  max-width: 100%;
}
.chat-bubble-assistant::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-bg), var(--surface-1));
  border: 1px solid var(--border);
  background-image:
    linear-gradient(135deg, var(--accent-bg), var(--surface-1)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349ffb2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, 14px 14px;
}
.chat-bubble-assistant.streaming::after {
  content: "▊";
  animation: chat-cursor 0.8s steps(2) infinite;
  margin-left: 2px;
  color: var(--accent);
}
.chat-reasoning {
  background: var(--surface-1);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}
.chat-reasoning summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chat-reasoning[open] summary { margin-bottom: 6px; }
@keyframes chat-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Floating input pill at bottom ─────────────────────────── */
.chat-stage-v2 .chat-form {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  pointer-events: none;
}
.chat-form-inner {
  pointer-events: auto;
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: border-color 0.15s;
}
.chat-form-inner:focus-within { border-color: var(--accent); }
.chat-stage-v2 .chat-input {
  width: 100%;
  min-height: 32px;
  max-height: 200px;
  resize: none;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 4px 4px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
}
.chat-stage-v2 .chat-input:focus { outline: none; }
.chat-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.chat-form-left { display: flex; align-items: center; gap: 6px; }

/* Custom model dropdown — consistent dark-theme look */
.chat-model-dd { position: relative; }
.chat-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 10px 5px 11px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chat-model-trigger:hover { background: var(--bg); border-color: var(--accent); }
.chat-model-trigger[aria-expanded="true"] { background: var(--bg); border-color: var(--accent); }
.chat-model-trigger-ico { color: var(--accent); flex-shrink: 0; }
.chat-model-trigger-label { font-weight: 500; }
.chat-model-trigger-caret { color: var(--muted); transition: transform 0.15s; }
.chat-model-trigger[aria-expanded="true"] .chat-model-trigger-caret { transform: rotate(180deg); }

.chat-model-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 6px;
  z-index: 60;
}
.chat-model-menu[hidden] { display: none; }
.chat-model-menu-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-model-menu-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px 4px;
}
.chat-model-opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.chat-model-opt:hover { background: var(--bg); }
.chat-model-opt.active {
  background: var(--accent-bg);
  color: var(--accent);
}
.chat-model-opt .opt-main { font-weight: 500; }
.chat-model-opt .opt-badge {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.chat-model-opt.active .opt-badge { color: var(--accent); }
.chat-form-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-form-icon:hover { background: var(--bg); color: var(--text); border-color: var(--accent); }
.chat-stage-v2 .chat-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.chat-stage-v2 .chat-send:hover { filter: brightness(1.1); }
.chat-stage-v2 .chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 700px) {
  .chat-stage-v2 .chat-messages { padding: 16px 12px 160px; }
  .chat-stage-v2 .chat-form { left: 8px; right: 8px; bottom: 8px; }
  .chat-empty-title { font-size: 22px; }
  .chat-empty { padding-top: 40px; }
  .chat-bubble-user { max-width: 90%; }
  .chat-bubble-assistant { padding-left: 32px; }
  .chat-bubble-assistant::before { width: 22px; height: 22px; }
}

/* Gallery: expired media placeholder */
.gallery-media-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--t-xs);
  text-align: center;
  padding: 12px;
  gap: 6px;
  background: linear-gradient(135deg, var(--surface-1), var(--bg));
}
.gallery-media-expired svg { width: 24px; height: 24px; opacity: 0.6; }

/* Grace period banner — shown when subscription expired but still within grace window */
.grace-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
  border-bottom: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 1.4;
  flex-wrap: wrap;
}
.grace-banner svg { flex-shrink: 0; color: #fbbf24; }
.grace-banner-text { flex: 1 1 auto; min-width: 200px; }
.grace-banner-text strong { color: #fde68a; font-weight: 700; }
.grace-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b;
  color: #1f2937;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
  white-space: nowrap;
}
.grace-banner-cta:hover { background: #fbbf24; }
@media (max-width: 600px) {
  .grace-banner { padding: 10px 16px; font-size: 13px; }
  .grace-banner-cta { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — Higgsfield-inspired bottom tab bar + home hub
   Only applies at ≤900px; desktop retains its sidenav + top tab strip.
   ════════════════════════════════════════════════════════════════════ */

/* ── Home hub (card-grid pick-tool) ────────────────────────────────── */
.mhome { padding: 16px 14px 24px; }
.mhome-greet {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 4px;
  color: var(--text);
}
.mhome-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 18px;
}
.mhome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mhome-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  min-height: 130px;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.mhome-card:active { transform: scale(0.98); }
.mhome-card:hover { border-color: var(--accent); background: var(--surface-2); }
.mhome-card.mhome-card-lg { grid-column: span 2; min-height: 110px; flex-direction: row; align-items: center; }
.mhome-card.mhome-card-lg .mhome-card-ico-wrap { width: 56px; height: 56px; }
.mhome-card.mhome-card-pink:hover { border-color: var(--mkt-pink); }
.mhome-card-ico-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent-bg);
  color: var(--accent);
}
.mhome-card-pink .mhome-card-ico-wrap {
  background: rgba(255, 42, 135, 0.10);
  color: var(--mkt-pink);
}
.mhome-card-ico-wrap svg { width: 22px; height: 22px; }
.mhome-card.mhome-card-lg .mhome-card-ico-wrap svg { width: 28px; height: 28px; }
.mhome-card-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
}
.mhome-card-body p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.mhome-secondary {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.mhome-secondary::-webkit-scrollbar { display: none; }
.mhome-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--text-2);
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.mhome-quick:hover { border-color: var(--accent); color: var(--text); }

/* Home tab is hidden by default on desktop */
.mhome-pane { display: none; }
.mhome-pane.active { display: block; }

/* ── Bottom tab bar (mobile-only) ──────────────────────────────────── */
.mbtn-bar { display: none; }
.mprofile-sheet.hidden { display: none !important; }

@media (max-width: 900px) {
  /* Hide desktop sidenav + top tab strip on mobile */
  .sidenav { display: none !important; }
  .tabs { display: none !important; }
  .app-shell { margin-left: 0 !important; }

  /* Body needs bottom padding so content isn't hidden behind fixed nav.
     env(safe-area-inset-bottom) handles iOS home indicator. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom tab bar */
  .mbtn-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    z-index: 60;
  }
  .mbtn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    padding: 6px 4px;
    text-decoration: none;
    transition: color 0.12s;
  }
  .mbtn svg { width: 22px; height: 22px; }
  .mbtn:active { transform: scale(0.95); }
  .mbtn.active { color: var(--accent); }

  /* Center FAB-style Generate */
  .mbtn-fab {
    margin-top: -22px;
    pointer-events: none;
  }
  .mbtn-fab-inner {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(196, 255, 61, 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .mbtn-fab:active .mbtn-fab-inner { transform: scale(0.93); }
  .mbtn-fab svg { width: 24px; height: 24px; color: var(--accent-fg); }
  /* No span label on FAB — previous "span { display:none }" hid the
     .mbtn-fab-inner wrapper itself and the icon disappeared. */

  /* Move floating logs drawer above bottom bar */
  .logs-drawer-toggle { bottom: 80px !important; }
}

/* ── Mobile profile bottom sheet ───────────────────────────────────── */
.mprofile-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mprofile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  animation: mprofile-fade 0.2s ease-out;
}
.mprofile-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface-1);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 8px 0 16px;
  animation: mprofile-slide 0.24s ease-out;
}
.mprofile-handle {
  width: 36px;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  margin: 0 auto 8px;
}
.mprofile-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mprofile-email code { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.mprofile-list { display: flex; flex-direction: column; padding: 6px 8px; }
.mprofile-item,
.mprofile-item-form button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.mprofile-item:hover, .mprofile-item:active,
.mprofile-item-form button:hover, .mprofile-item-form button:active {
  background: var(--surface-2);
}
.mprofile-item-danger { color: var(--error) !important; }
.mprofile-item-form { margin: 0; }
body.mprofile-open { overflow: hidden; }

@keyframes mprofile-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mprofile-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Per-tool mobile polish — sticky bottom Generate button ────────── */
@media (max-width: 900px) {
  /* Generate Video sidebar-footer becomes sticky above mbtn-bar */
  #tab-generate .sidebar-footer {
    position: sticky;
    bottom: 64px;          /* clear the mbtn-bar (64px) */
    background: linear-gradient(to top, var(--bg) 60%, transparent);
    padding: 12px 0 8px;
    margin-top: 0;
    z-index: 5;
  }
  #tab-generate .btn-generate { width: 100%; justify-content: center; height: 48px; font-size: 14px; }

  /* Image tab — same treatment if it has similar structure */
  #tab-image .sidebar-footer {
    position: sticky;
    bottom: 64px;
    background: linear-gradient(to top, var(--bg) 60%, transparent);
    padding: 12px 0 8px;
    z-index: 5;
  }
  #tab-image .btn-generate { width: 100%; justify-content: center; height: 48px; font-size: 14px; }

  /* Marketing bottom command bar sits above mbtn-bar */
  #tab-marketing .mkt-bar { bottom: 64px !important; }

  /* Reduce sidebar inner padding on mobile to claim back vertical space */
  .sidebar-scroll { padding-bottom: 8px; }

  /* Tighter card padding on mobile */
  .card { padding: 12px; }

  /* Trial banner: leave it visible but compact */
  .trial-banner-content { font-size: 12px; }

  /* Tab pane should fill remaining viewport so bottom CTAs anchor correctly */
  .app { padding-bottom: 16px; }
}

/* ── Gallery loading skeleton + empty state ─────────────────────────── */
.gallery-skeleton {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: gal-skel 1.4s linear infinite;
}
@keyframes gal-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
  color: var(--muted);
}
.gallery-empty svg { color: var(--muted); opacity: 0.55; }
.gallery-empty h3 {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}
.gallery-empty p { margin: 0; max-width: 320px; font-size: 13px; }
.gallery-empty .btn { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE — Higgsfield-inspired tool polish for Generate Video/Image
   and Marketing Studio. Targets ≤900px so desktop is untouched.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Sidebar reflows to natural top stack ────────────────────────── */
  .sidebar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  .sidebar-scroll {
    padding: 14px 12px 12px !important;
    overflow-x: hidden;
  }

  /* Each .field tighter on mobile */
  .sidebar-scroll .field {
    margin-bottom: 14px;
  }
  .sidebar-scroll .field > .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
    display: block;
  }

  /* ── Mode segment (T2V/I2V/Refgen) — more prominent ─────────────── */
  #mode-seg {
    background: var(--surface-1);
    border-color: var(--border);
    padding: 4px;
    border-radius: 12px;
  }
  #mode-seg .seg-btn {
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    min-height: 40px;
  }
  #mode-seg .seg-btn.active {
    background: var(--accent);
    color: var(--accent-fg);
  }

  /* ── Segment buttons in general: bigger touch targets ───────────── */
  .sidebar-scroll .seg .seg-btn {
    min-height: 38px;
    padding: 8px 6px;
    font-size: 12px;
  }
  .sidebar-scroll .seg-aspect .seg-btn { min-height: 56px; padding: 8px 4px; }

  /* ── Dropzone — Higgsfield-style card with dashed border ─────────── */
  .dropzone {
    min-height: 110px;
    border-radius: 12px;
    border-style: dashed;
    border-width: 1.5px;
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-size: 12px;
    color: var(--muted);
    transition: border-color 0.15s, background 0.15s;
  }
  .dropzone:active { background: var(--surface-2); border-color: var(--accent); }

  /* I2V first/last frames side-by-side on mobile too (grid-2 already handles) */
  #panel-i2v .grid-2 { gap: 10px; }
  #panel-i2v .preview {
    border-radius: 10px;
    margin-top: 8px;
  }

  /* ── RefGen 9-slot grid — bigger tap targets ─────────────────────── */
  #ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  #ref-grid .ref-slot {
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 10px;
  }
  #ref-grid .ref-slot .label { font-size: 9px; }

  /* ── Audio checkbox: chip-style ──────────────────────────────────── */
  .sidebar-scroll .check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    width: auto;
  }
  .sidebar-scroll .check input[type="checkbox"] { accent-color: var(--accent); }

  /* ── Duration slider ─────────────────────────────────────────────── */
  .sidebar-scroll .slider {
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .sidebar-scroll .slider-value {
    font-weight: 700;
    color: var(--accent);
  }

  /* ── Generate button: bigger, more prominent ─────────────────────── */
  .btn-generate {
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 700;
    border-radius: 14px;
    letter-spacing: 0.02em;
  }

  /* ── Prompt textarea: better padding ─────────────────────────────── */
  .sidebar-scroll textarea#prompt,
  .sidebar-scroll textarea {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    min-height: 96px;
  }

  /* ── Main result panel stacks below sidebar inputs ───────────────── */
  #tab-generate .main,
  #tab-image .main {
    padding: 0 12px 12px;
  }

  /* ── Marketing Studio: better bottom command bar spacing ─────────── */
  #tab-marketing .mkt-bar {
    padding: 10px 12px !important;
    border-top: 1px solid var(--border);
  }
  #tab-marketing .mkt-slot {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }
  #tab-marketing .mkt-pill {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 999px;
  }
  #tab-marketing .mkt-generate {
    height: 52px !important;
    border-radius: 14px;
    font-size: 15px !important;
    font-weight: 700;
  }

  /* ── Image tab specific: layout reflow same as video ─────────────── */
  #tab-image .img-ref-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* ── Marketing quickrow: pills + slots + settings on one mobile line ── */
/* Desktop: display:contents flattens the wrapper so children behave as
   direct flex items of .mkt-bar (preserves original layout). */
.mkt-quickrow { display: contents; }

@media (max-width: 900px) {
  /* Override the old "slot stretches full width" mobile rule */
  .mkt-bar > .mkt-quickrow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 4px;
    margin: 0;
    scrollbar-width: none;
  }
  .mkt-bar > .mkt-quickrow::-webkit-scrollbar { display: none; }

  /* Flatten pills container so its 3 pills sit in the same scroll row */
  .mkt-quickrow .mkt-pills { display: contents; }
  /* Flatten settings wrapper too — gear button joins the row directly */
  .mkt-quickrow .mkt-bar-settings { display: contents; }

  /* Compact slot — small square matching pill/gear height (40px) */
  .mkt-quickrow .mkt-slot {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    flex: 0 0 40px;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 10px;
    gap: 0;
    overflow: hidden;
  }
  .mkt-quickrow .mkt-slot .mkt-slot-label { display: none; }
  .mkt-quickrow .mkt-slot .mkt-slot-plus-svg { width: 18px; height: 18px; opacity: 0.85; }
  .mkt-quickrow .mkt-slot-x {
    width: 16px; height: 16px; top: 2px; right: 2px;
  }

  /* Pills: match 40px height, keep label */
  .mkt-quickrow .mkt-pill {
    height: 40px;
    padding: 0 12px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .mkt-quickrow .mkt-pill-svg { width: 14px; height: 14px; }
  .mkt-quickrow .mkt-pill-arrow { width: 10px; height: 10px; opacity: 0.6; }

  /* Settings gear matches square */
  .mkt-quickrow .mkt-settings-btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
    border-radius: 10px;
  }

  /* On really tight screens (<360px), hide pill labels — leave icon only */
  @media (max-width: 360px) {
    .mkt-quickrow .mkt-pill-label { display: none; }
    .mkt-quickrow .mkt-pill { width: 40px; padding: 0; justify-content: center; }
    .mkt-quickrow .mkt-pill-arrow { display: none; }
  }
}

/* ────────────────────────────────────────────────────────────────────
   Marketing Studio mobile refinements:
   - Settings panel becomes a slide-up bottom sheet with X close + backdrop
   - Pills become icon-only across all mobile sizes (no labels, no scroll)
   - Format/Hook/Setting modal sizing tuned for mobile
   ──────────────────────────────────────────────────────────────────── */

/* Close button visible on the settings panel — default desktop top-right */
.mkt-settings-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}
.mkt-settings-close:hover { background: rgba(255,255,255,0.16); color: var(--text); }
.mkt-settings-close svg { width: 16px; height: 16px; pointer-events: none; }

/* Backdrop — ONLY visible on mobile when the settings sheet is open.
   On desktop, the settings panel is a small popover and doesn't need a
   backdrop. Showing one would cover & blur the panel itself because the
   desktop panel z-index (30) is below the backdrop z-index (65). */
.mkt-settings-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 65;
  animation: mkt-fade 0.18s ease-out;
}
.mkt-settings-backdrop.hidden { display: none !important; }
@media (min-width: 901px) {
  /* Desktop: never show backdrop (panel is a popover, not a sheet) */
  .mkt-settings-backdrop { display: none !important; }
}
@keyframes mkt-fade { from { opacity: 0; } to { opacity: 1; } }

body.mkt-settings-open { overflow: hidden; }

@media (max-width: 900px) {
  /* ─── Pills: icon-only on all mobile sizes — no scroll ────────────── */
  .mkt-quickrow .mkt-pill-label { display: none; }
  .mkt-quickrow .mkt-pill-arrow { display: none; }
  .mkt-quickrow .mkt-pill {
    width: 40px;
    padding: 0;
    justify-content: center;
    flex: 0 0 40px;
  }
  .mkt-quickrow .mkt-pill-svg { width: 18px; height: 18px; }

  /* Remove horizontal scroll — everything should fit */
  .mkt-bar > .mkt-quickrow {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }

  /* ─── Settings panel becomes slide-up bottom sheet ────────────────── */
  .mkt-settings-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    padding: 22px 16px 24px !important;
    z-index: 70 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
    max-height: 80vh !important;
    animation: mkt-sheet-slide 0.24s ease-out;
  }
  .mkt-settings-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .mkt-settings-close {
    top: 10px;
    right: 10px;
  }
  @keyframes mkt-sheet-slide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* ─── Format/Hook/Setting modal: full-width, less padding ─────────── */
  .mkt-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-bottom: 0 !important;
  }
  .mkt-modal-root {
    align-items: flex-end !important;
  }
  .mkt-modal-x {
    top: 10px !important;
    right: 10px !important;
  }
}

/* ── Payment success — Next Steps walkthrough ──────────────────────── */
.checkout-nextsteps {
  margin: 24px auto 20px;
  max-width: 480px;
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
}
.checkout-nextsteps-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.checkout-nextsteps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-nextsteps-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.checkout-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-nextsteps-list strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.checkout-nextsteps-list p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.checkout-nextsteps-list code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* Billing: upgrade pricing breakdown */
.billing-upgrade-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.billing-strike {
  text-decoration: line-through;
  opacity: 0.6;
}
.billing-feature-bonus {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  color: var(--accent);
}
.billing-feature-bonus strong { color: var(--accent); }
/* Billing discount display — LP-style: prominent strike + accent price + warm badge + coupon line */
.billing-strike-big { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; text-decoration: line-through; color: var(--muted); opacity: .7; margin: 6px 0 0; }
.billing-price-off { color: var(--accent); }
.billing-badge-discount { background: linear-gradient(135deg, #ffb55c, #ff8a4c); color: #2a1700; }
.billing-coupon-line { margin: 10px 0 0; font-size: 12px; color: var(--accent); background: var(--accent-bg, rgba(194,247,74,.1)); border-radius: 10px; padding: 8px 11px; line-height: 1.4; }
.billing-coupon-line strong { letter-spacing: .03em; }
.billing-rollover-note { color: var(--accent); opacity: .85; margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════
   Credential card — masked display + per-field reveal + edit mode
   ════════════════════════════════════════════════════════════════════ */
.cred-info-wrap { margin-top: 10px; }
.cred-summary { display: flex; flex-direction: column; gap: 8px; }
.cred-summary-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.cred-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.cred-row-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted, #888);
  font-weight: 600;
}
.cred-row-val {
  font-family: ui-monospace, monospace; font-size: 12px;
  word-break: break-all; overflow-wrap: anywhere;
  max-height: 60px; overflow-y: auto;
}
.cred-row-val.cred-revealed {
  color: var(--accent, #c4ff3d);
}
.btn-mini {
  font-size: 11px; padding: 4px 10px;
  border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: var(--text, #eee);
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-mini:hover { background: rgba(255,255,255,0.15); }
.btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }
.cred-actions { display: flex; gap: 8px; align-items: center; }
.is-hidden { display: none !important; }

/* ─── Credential field — masked input + per-field eye + copy ─── */
.cred-field-wrap { position: relative; }
.cred-field-wrap input,
.cred-field-wrap textarea { padding-right: 76px; }
.cred-field-wrap textarea { padding-right: 12px; }  /* actions float over scrollbar — but textarea always has room */
.cred-field-wrap textarea + .cred-field-actions { top: 6px; bottom: auto; }
.cred-field-actions {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px;
  z-index: 2;
}
.cred-field-wrap textarea ~ .cred-field-actions {
  top: 6px; transform: none;
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, #aaa);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-icon:hover {
  background: rgba(255,255,255,0.14);
  color: var(--accent, #c4ff3d);
}
.btn-icon.cred-copied {
  background: var(--accent, #c4ff3d);
  color: #000;
}
input.is-masked, textarea.is-masked {
  -webkit-text-security: disc;
  text-security: disc;             /* spec proposal; ignored where unsupported */
  font-family: ui-monospace, monospace;
  letter-spacing: 1px;
}

/* ── Credential mode switch (Manual / Auto Beta) ── */
.cred-mode-switch { display: flex; gap: 6px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 8px; }
.cred-mode-btn {
  flex: 1; padding: 10px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-2,#aaa);
  font-weight: 600; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cred-mode-btn.active { background: var(--accent,#c4ff3d); color: #000; }
.cred-mode-btn:not(.active):hover { background: rgba(255,255,255,0.08); color: var(--text,#eee); }

/* ════════════════════════════════════════════════════════════════════
   NATIVE MOBILE SHELL — Phase 1 (≤900px, desktop untouched)
   safe-area · decluttered app bar · tactile feedback · momentum scroll
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* App bar respects the status-bar / notch in standalone PWA */
  .header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(52px + env(safe-area-inset-top, 0px));
  }
  /* Declutter the top bar: technical status noise belongs out of a native app bar */
  .header #quota-widget,
  .header #status-text { display: none !important; }
  /* The floating "Generation Logs" toggle (stray green dot) is a power feature — hide on mobile */
  .logs-drawer-toggle { display: none !important; }

  /* Native tactile feel */
  * { -webkit-tap-highlight-color: transparent; }
  html, body { overflow-x: hidden; }
  .scroll-y, .tab-content, main.app { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

  /* Press feedback on the main tappables */
  .mbtn, .menu-card, .tool-card, .home-card, .card-tap, .pill-link {
    transition: transform .09s ease, background .15s ease;
  }
  .mbtn:active, .menu-card:active, .tool-card:active, .home-card:active, .card-tap:active, .pill-link:active {
    transform: scale(.975);
  }
}

/* ════════ NATIVE MOBILE — Phase 2/3 (≤900px) ════════ */
@media (max-width: 900px) {
  /* Dismissible promo bar */
  .aff-mbar-x { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0; border:none; background:rgba(0,0,0,.22); color:inherit; border-radius:50%; cursor:pointer; }
  .aff-mbar-x:active { transform:scale(.9); }
  body.aff-dismissed .aff-mbar { display:none !important; }
  body.aff-dismissed .aff-mbar ~ .header { top:0 !important; }

  /* Redundant header profile (bottom nav already has "Profil") */
  #hdr-profile { display:none !important; }

  /* Bottom-sheet polish: drag handle + safe-area bottom */
  .mkt-modal { padding-bottom: calc(16px + env(safe-area-inset-bottom,0px)) !important; }
  .mkt-modal-root .mkt-modal::before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; border-radius:3px; background:rgba(255,255,255,.22); z-index:3; pointer-events:none;
  }
  .mkt-modal-head { padding-top:20px !important; }
}

/* Onboarding: Join Telegram CTA */
.onb-tg-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 16px; border-radius:10px; background:rgba(34,158,217,.12); border:1px solid rgba(34,158,217,.45); color:#4cc3f0; font-weight:600; text-decoration:none; transition:background .15s,border-color .15s; }
.onb-tg-cta:hover { background:rgba(34,158,217,.2); border-color:#229ed9; color:#6fd0f5; }

/* ════════════ MOBILE NATIVE: per-mode accent + floating Generate ════════════ */
:root { --mode-accent: #c4ff3d; --mode-accent-2: #84e0c0; --mode-ink: #0a0e03; }
body.mode-figma    { --mode-accent: #a78bfa; --mode-accent-2: #c4b5fd; --mode-ink: #170b2e; }
body.mode-dola     { --mode-accent: #38bdf8; --mode-accent-2: #7dd3fc; --mode-ink: #042233; }
body.mode-byteplus { --mode-accent: #c4ff3d; --mode-accent-2: #84e0c0; --mode-ink: #0a0e03; }
body.mode-gh       { --mode-accent: #c4ff3d; --mode-accent-2: #84e0c0; --mode-ink: #0a0e03; }
body.mode-converge { --mode-accent: #7cf6d0; --mode-accent-2: #a7f6e0; --mode-ink: #04231c; }
body.mode-studio   { --mode-accent: #c4ff3d; --mode-accent-2: #84e0c0; --mode-ink: #0a0e03; }

@media (max-width: 900px) {
  /* center FAB tinted to the active mode */
  .mbtn-fab-inner { background: var(--mode-accent) !important; color: var(--mode-ink) !important; box-shadow: 0 0 26px -4px var(--mode-accent); }
  /* Floating native Generate button — FIXED so it's always visible (mockup2) */
  #tab-generate .sidebar-footer, #tab-image .sidebar-footer {
    position: fixed !important; left: 12px; right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 55 !important; background: none !important; padding: 0 !important; margin: 0 !important;
  }
  /* room so last fields aren't hidden behind the fixed button */
  #tab-generate .layout, #tab-image .layout { padding-bottom: 84px; }
  #tab-generate .btn-generate, #tab-image .btn-generate {
    height: 52px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 800 !important;
    background: linear-gradient(135deg, var(--mode-accent), var(--mode-accent-2)) !important;
    color: var(--mode-ink) !important; border: none !important;
    box-shadow: 0 12px 30px -8px var(--mode-accent), 0 2px 0 rgba(0,0,0,.25) !important;
  }
  #tab-generate .btn-generate:active, #tab-image .btn-generate:active { transform: translateY(1px); }
  /* home launcher: featured card + greeting accent follow the mode */
  .mhome-greet .accent, .mhome-pane .mhome-mode { color: var(--mode-accent) !important; }
}

/* ════════════ HOME LAUNCHER (mobile) — match static/mockup1.html ════════════ */
@media (max-width:900px){
  .mhome { padding: 14px 16px 24px; }
  .mhome-greet { font-size: 27px; letter-spacing: -0.02em; margin: 8px 2px 4px; }
  .mhome-sub { font-size: 14px; margin: 0 2px 20px; color: var(--text-2,#9aa1ad); }
  .mhome-sub .mhome-mode { color: var(--mode-accent); font-weight: 700; }

  .mhome-grid { gap: 13px; }

  /* tool card */
  .mhome-card {
    gap: 0; border-radius: 18px; padding: 18px 16px; min-height: 128px;
    background: var(--surface,#14161c); border: 1px solid var(--border,#262a33);
    justify-content: flex-start;
  }
  .mhome-card:hover, .mhome-card:focus-visible {
    border-color: color-mix(in srgb, var(--mode-accent) 45%, var(--border,#262a33));
    background: var(--surface,#14161c);
  }

  /* mode-tinted square icon box (overrides pink/accent defaults so every
     card follows the active mode accent — incl. dola's Marketing card) */
  .mhome-card .mhome-card-ico-wrap,
  .mhome-card.mhome-card-pink .mhome-card-ico-wrap {
    width: 46px; height: 46px; border-radius: 13px;
    background: color-mix(in srgb, var(--mode-accent) 16%, transparent) !important;
    color: var(--mode-accent) !important;
  }
  .mhome-card-ico-wrap svg { width: 24px; height: 24px; }
  .mhome-card-body { margin-top: 14px; }
  .mhome-card-body h3 { font-size: 16px; }
  .mhome-card-body p { font-size: 12.5px; color: var(--text-3,#646b78); line-height: 1.4; }

  /* featured "Generate Video" card — full-width, horizontal, gradient tint */
  .mhome-card.mhome-card-lg {
    grid-column: 1 / -1; min-height: auto; gap: 14px; padding: 18px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mode-accent) 16%, var(--surface,#14161c)), var(--surface,#14161c));
  }
  .mhome-card.mhome-card-lg .mhome-card-ico-wrap { width: 54px; height: 54px; }
  .mhome-card.mhome-card-lg .mhome-card-ico-wrap svg { width: 26px; height: 26px; }
  .mhome-card.mhome-card-lg .mhome-card-body { margin-top: 0; }

  /* secondary pill row */
  .mhome-secondary { gap: 8px; margin-top: 16px; }
  .mhome-quick {
    background: var(--surface,#14161c); border-color: var(--border,#262a33);
    border-radius: 999px; padding: 9px 15px; color: var(--text-2,#9aa1ad);
  }
  .mhome-quick:hover { border-color: color-mix(in srgb, var(--mode-accent) 45%, var(--border,#262a33)); color: var(--text,#f2f4f7); }
}

/* Mobile: full per-mode accent (slider, pills, selected states follow the mode) */
@media (max-width: 900px) {
  body.mode-figma { --accent: #a78bfa; --accent-2: #c4b5fd; --accent-soft: rgba(167,139,250,.15); --ink: #170b2e; }
  body.mode-dola  { --accent: #38bdf8; --accent-2: #7dd3fc; --accent-soft: rgba(56,189,248,.15); --ink: #042233; }
}

/* ════════════ MODE PICKER (mobile) — match mockup ════════════ */
/* align mode colors to mockup: DL blue, FG purple */
body.mode-dola  { --mode-accent:#5b9dff; --mode-accent-2:#8fc0ff; --mode-ink:#04122e; }
body.mode-figma { --mode-accent:#a78bff; --mode-accent-2:#c4b5fd; --mode-ink:#160b2e; }
/* RimbAI keeps the signature lime accent (overrides the mode-figma purple base) */
body.mode-studio { --mode-accent:#c4ff3d; --mode-accent-2:#84e0c0; --mode-ink:#0a0e03; --accent:#c4ff3d; --accent-2:#84e0c0; --accent-soft:rgba(196,255,61,.15); --ink:#0a0e03; }
@media (max-width:900px){
  body.mode-dola  { --accent:#5b9dff; --accent-2:#8fc0ff; --accent-soft:rgba(91,157,255,.15); --ink:#04122e; }
  body.mode-figma { --accent:#a78bff; --accent-2:#c4b5fd; --accent-soft:rgba(167,139,255,.15); --ink:#160b2e; }
  body.mode-studio { --accent:#c4ff3d; --accent-2:#84e0c0; --accent-soft:rgba(196,255,61,.15); --ink:#0a0e03; }
}
/* mode pill trigger — in-header, mode-tinted pill (dot + name + chevron) */
.mode-pill { display:none; }
@media (max-width:900px){
  .mode-pill {
    display:inline-flex; align-items:center; gap:7px; margin:0 0 0 4px; align-self:center;
    border-radius:999px; padding:6px 11px; cursor:pointer; font-family:inherit; flex-shrink:0;
    background:color-mix(in srgb, var(--mode-accent) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--mode-accent) 40%, transparent);
    color:var(--mode-accent);
  }
  .mode-pill:active { transform:scale(.96); }
  .mode-pill-name { font-weight:700; font-size:13px; }
  .mode-pill-chev { color:currentColor; margin-left:0; }
}
.mode-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--mode-accent); flex-shrink:0; }
.mode-dot-bp { background:#c4ff3d; }
.mode-dot-dl { background:#5b9dff; }
.mode-dot-fg { background:#a78bff; }
.mode-dot-gh { background:#c4ff3d; }
.mode-dot-lm { background:#a78bff; }
.mode-pill-badge { width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.mode-badge-bp { background:#c4ff3d; color:#0a0e03; }
.mode-badge-dl { background:#5b9dff; color:#04122e; }
.mode-badge-fg { background:#a78bff; color:#160b2e; }
/* bottom-sheet */
.msheet { position:fixed; inset:0; z-index:120; }
.msheet.hidden { display:none; }
.msheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); border:none; cursor:pointer; }
.msheet-panel { position:absolute; left:0; right:0; bottom:0; background:var(--surface,#15171c); border-top:1px solid var(--border-2,#2c313b); border-radius:24px 24px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px)); animation:msheet-up .26s cubic-bezier(.4,0,.2,1); }
@keyframes msheet-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
.msheet-handle { width:40px; height:4px; border-radius:3px; background:var(--border-2,#2c313b); margin:0 auto 16px; }
.msheet-title { font-size:18px; font-weight:700; color:var(--text,#e7e9ee); margin:0 0 14px; padding:0 2px; }
.mode-row { display:flex; align-items:center; gap:13px; padding:13px; border-radius:16px; border:1.5px solid var(--border,#262a31); background:var(--surface-2,#1a1d23); text-decoration:none; margin-bottom:10px; }
.mode-row.on { border-color:var(--mode-accent); background:color-mix(in srgb, var(--mode-accent) 10%, var(--surface-2,#1a1d23)); }
.mode-row-badge { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; }
.mode-row-body { flex:1; min-width:0; }
.mode-row-t { font-size:15px; font-weight:700; color:var(--text,#e7e9ee); }
.mode-row-d { font-size:12.5px; color:var(--text-2,#9ba3b0); margin-top:2px; }
.mode-row-active { margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.05em; color:var(--mode-ink,#0a0e03); background:var(--mode-accent); padding:4px 9px; border-radius:7px; align-self:center; flex-shrink:0; }
.mode-row-beta { font-size:9px; background:#a78bff; color:#160b2e; padding:1px 5px; border-radius:4px; font-weight:800; vertical-align:middle; }
.mode-row-limited { font-size:9px; background:#ffb45c; color:#1a1205; padding:1px 5px; border-radius:4px; font-weight:800; vertical-align:middle; }

/* ════════════ Figma model picker → bottom-sheet on mobile ════════════ */
@media (max-width:900px){
  .fg-dd-menu:not(.hidden){
    position:fixed; left:0; right:0; bottom:0; top:auto;
    border-radius:22px 22px 0 0; max-height:72vh; max-width:none;
    padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px));
    z-index:130; box-shadow:0 -8px 44px rgba(0,0,0,.6);
    animation:msheet-up .26s cubic-bezier(.4,0,.2,1);
  }
  .fg-dd-menu:not(.hidden)::before{ content:""; display:block; width:40px; height:4px; border-radius:3px; background:var(--border-2,#2c313b); margin:0 auto 14px; }
  .fg-dd-opt{ padding:14px 12px !important; border-radius:12px !important; }
  .fg-dd-opt .nm{ font-size:15px !important; }
  /* dim backdrop behind the model sheet */
  body.fg-modelsheet-open::after{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:129; }
}
/* model sheet: selected option follows mode accent (not hardcoded lime) */
@media (max-width:900px){
  .fg-dd-opt.on{ background:color-mix(in srgb, var(--accent) 14%, transparent) !important; box-shadow:inset 0 0 0 1.5px var(--accent); }
}

/* ════════════ Native rendering state (mobile) ════════════ */
@media (max-width:900px){
  #result-active:not(.hidden) #progress-wrap,
  #img-result-active:not(.hidden) #img-progress-wrap {
    padding:22px 16px; border-radius:18px; margin:8px 0;
    background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%), var(--surface,#15171c);
    border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  }
  .progress-bar { height:10px !important; border-radius:99px !important; overflow:hidden; }
  #progress-fill, #img-progress-fill, #mkt-progress-fill {
    background:linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
    box-shadow:0 0 16px -2px var(--accent);
  }
  #progress-label, #img-progress-label {
    text-align:center; font-weight:700; font-size:15px; color:var(--accent) !important; margin-top:12px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FIGMA MODE — MOBILE Generate screen, pixel-match static/mockup2.html
   (SCREEN A creation · SCREEN B model sheet · SCREEN C rendering/hasil)
   Scoped to ≤900px + the figma generate tab. Desktop (>900px) untouched:
   #fg-m is display:none by default and only shown inside this media query.
   ════════════════════════════════════════════════════════════════════ */
#fg-m { display:none; }
@media (max-width:900px){
  /* ── Only inside figma mode + generate tab: clean native chrome ───── */
  body.mode-figma:has(#tab-generate.active) .aff-mbar,
  body.mode-figma:has(#tab-generate.active) .header,
  body.mode-figma:has(#tab-generate.active) .trial-banner,
  body.mode-figma:has(#tab-generate.active) .mode-pill { display:none !important; }

  /* The figma generate tab fills the screen; #fg-m is its own app frame */
  body.mode-figma #tab-generate.active { padding:0 !important; }
  body.mode-figma #tab-generate.active .layout { display:none !important; }  /* hide desktop form */

  #fg-m {
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0;
    top:0; bottom:calc(64px + env(safe-area-inset-bottom,0px));
    background:var(--bg,#0a0b0e); z-index:40;
    padding-top:env(safe-area-inset-top,0px);
  }
  /* ── navbar (back + title + Figma pill) ───────────────────────────── */
  .fgm-nav { display:flex; align-items:center; gap:12px; padding:12px 16px 12px; flex-shrink:0; }
  .fgm-back { width:38px; height:38px; border-radius:50%; background:var(--surface,#14161c);
    border:1px solid var(--border,#262a33); display:flex; align-items:center; justify-content:center;
    color:var(--text,#f2f4f7); flex-shrink:0; padding:0; cursor:pointer; }
  .fgm-back:active { transform:scale(.94); }
  .fgm-title { font-size:18px; font-weight:700; color:var(--text,#f2f4f7); }
  .fgm-pill { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
    border-radius:999px; background:color-mix(in srgb,var(--mode-accent) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--mode-accent) 40%,transparent);
    color:var(--mode-accent); font-size:12px; font-weight:700; white-space:nowrap; }
  .fgm-pill-dot { width:6px; height:6px; border-radius:50%; background:var(--mode-accent); }

  /* ── scrollable body ──────────────────────────────────────────────── */
  .fgm-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 16px 18px; }
  .fgm-lbl { font-size:12px; font-weight:600; color:var(--text-3,#646b78); text-transform:uppercase;
    letter-spacing:.06em; margin:14px 2px 8px; }
  .fgm-body > .fgm-lbl:first-child { margin-top:4px; }

  .fgm-prompt { width:100%; background:var(--surface,#14161c); border:1px solid var(--border-2,#333845);
    border-radius:16px; padding:15px; color:var(--text,#f2f4f7); font-size:15px; line-height:1.5;
    min-height:128px; font-family:inherit; resize:none; }
  .fgm-prompt::placeholder { color:var(--text-2,#9aa1ad); }
  .fgm-prompt:focus { outline:none; border-color:color-mix(in srgb,var(--mode-accent) 55%,transparent); }

  /* ── model selectrow ──────────────────────────────────────────────── */
  .selectrow { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
    background:var(--surface,#14161c); border:1px solid var(--border,#262a33); border-radius:14px;
    padding:12px 14px; color:var(--text,#f2f4f7); font-family:inherit; cursor:pointer; }
  .selectrow:active { transform:scale(.995); }
  .selectrow .mi { width:34px; height:34px; border-radius:9px; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; color:#fff; }
  .selectrow-tx { display:flex; flex-direction:column; min-width:0; }
  .selectrow .mt { font-size:14px; font-weight:700; color:var(--text,#f2f4f7); }
  .selectrow .md { font-size:11.5px; color:var(--text-3,#646b78); }
  .selectrow .chev { margin-left:auto; color:var(--text-2,#9aa1ad); display:flex; flex-shrink:0; }

  /* ── OPSI chips ───────────────────────────────────────────────────── */
  #fg-m .chips { display:flex; gap:8px; flex-wrap:wrap; }
  #fg-m .chip { font-size:13px; font-weight:600; color:var(--text-2,#9aa1ad);
    background:var(--surface,#14161c); border:1px solid var(--border,#262a33);
    padding:9px 14px; border-radius:999px; font-family:inherit; cursor:pointer; }
  #fg-m .chip.on { background:color-mix(in srgb,var(--mode-accent) 16%,transparent); color:var(--mode-accent);
    border-color:color-mix(in srgb,var(--mode-accent) 40%,transparent); }
  #fg-m .chip:active { transform:scale(.96); }

  /* ── reference dashed slots ───────────────────────────────────────── */
  #fg-m-refs { margin-top:9px; display:flex; flex-direction:column; gap:9px; }
  #fg-m .refslot { border:1.5px dashed var(--border-2,#333845); border-radius:14px; padding:18px;
    display:flex; align-items:center; gap:10px; color:var(--text-3,#646b78); font-size:13px;
    position:relative; cursor:pointer; }
  #fg-m .refslot.has { padding:0; min-height:150px; overflow:hidden; border-style:solid; background:#000; }
  #fg-m .refslot.has img, #fg-m .refslot.has video { width:100%; height:150px; object-fit:contain; background:#000; display:block; }
  #fg-m .refslot-x { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:6px;
    background:rgba(0,0,0,.7); color:#fff; font-size:14px; line-height:22px; text-align:center; z-index:2; }
  .fgm-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .fgm-th { position:relative; width:58px; height:58px; border-radius:8px; overflow:hidden; background:#000;
    display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; }
  .fgm-th img, .fgm-th video { width:100%; height:100%; object-fit:cover; }

  /* ── footer Generate ──────────────────────────────────────────────── */
  .fgm-foot { padding:14px 16px 18px; border-top:1px solid var(--border,#262a33);
    background:var(--bg,#0a0b0e); flex-shrink:0; }
  #fg-m .genbtn { width:100%; height:54px; border-radius:16px; border:none;
    background:var(--mode-accent); color:var(--mode-ink,#0a0e03); font-weight:800; font-size:16px;
    display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; cursor:pointer;
    box-shadow:0 10px 30px -8px color-mix(in srgb,var(--mode-accent) 60%,transparent); }
  #fg-m .genbtn:active { transform:translateY(1px); }
  #fg-m .genbtn:disabled { opacity:.55; }
  .fgm-hint { text-align:center; color:var(--text-3,#646b78); font-size:11.5px; margin-top:9px; }

  /* ── SCREEN B — model picker bottom sheet ─────────────────────────── */
  .fgm-sheet { position:fixed; inset:0; z-index:140; }
  .fgm-sheet.hidden { display:none; }
  .fgm-sheet-bd { position:absolute; inset:0; background:rgba(0,0,0,.55); border:none; cursor:pointer; padding:0; }
  .fgm-sheet-panel { position:absolute; left:0; right:0; bottom:0; background:var(--surface,#14161c);
    border-radius:24px 24px 0 0; border-top:1px solid var(--border-2,#333845);
    padding:10px 16px calc(24px + env(safe-area-inset-bottom,0px)); max-height:80%; overflow-y:auto;
    animation:msheet-up .26s cubic-bezier(.4,0,.2,1); }
  .fgm-sheet-handle { width:40px; height:4px; border-radius:3px; background:var(--border-2,#333845); margin:0 auto 14px; }
  .fgm-sheet-title { font-size:18px; font-weight:700; color:var(--text,#f2f4f7); margin:0 2px 14px; }
  .fgm-sheet-list { display:flex; flex-direction:column; }
  .fgm-sheet .mrow { display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px;
    border-radius:15px; border:1px solid var(--border,#262a33); margin-bottom:9px; background:var(--bg,#0a0b0e);
    color:var(--text,#f2f4f7); font-family:inherit; cursor:pointer; }
  .fgm-sheet .mrow.on { border-color:var(--mode-accent); background:color-mix(in srgb,var(--mode-accent) 10%,var(--bg,#0a0b0e)); }
  .fgm-sheet .mrow .th { width:46px; height:46px; border-radius:11px; flex-shrink:0; }
  .fgm-sheet .mrow-tx { display:flex; flex-direction:column; min-width:0; }
  .fgm-sheet .mrow .nm { font-size:15px; font-weight:700; color:var(--text,#f2f4f7); }
  .fgm-sheet .mrow .ds { font-size:12px; color:var(--text-2,#9aa1ad); margin-top:1px; }
  .fgm-sheet .mrow .ck { margin-left:auto; color:var(--mode-accent); display:flex; flex-shrink:0; }
  .fgm-tag { font-size:9px; font-weight:800; padding:1px 6px; border-radius:5px; vertical-align:2px;
    margin-left:5px; background:var(--mode-accent); color:var(--mode-ink,#160b2e); }

  /* ── SCREEN C — rendering / result ────────────────────────────────── */
  .fgm-result { position:absolute; inset:0; background:var(--bg,#0a0b0e); z-index:20;
    display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); }
  .fgm-result.hidden { display:none; }
  .fgm-res-body { flex:1; display:flex; flex-direction:column; padding:6px 16px 16px; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .fgm-preview { flex:1 0 52vh; min-height:52vh; border-radius:18px; margin:8px 0; position:relative; overflow:hidden;
    background:linear-gradient(135deg,#5a6bff,#a25cff,#5cc8ff); background-size:200% 200%;
    display:flex; align-items:center; justify-content:center; }
  .fgm-preview video.fgm-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
  .fgm-rendering { position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; color:#fff; }
  .fgm-spin { width:46px; height:46px; border-radius:50%; border:4px solid rgba(255,255,255,.25);
    border-top-color:#fff; animation:fgm-spin .8s linear infinite; }
  @keyframes fgm-spin { to { transform:rotate(360deg); } }
  .fgm-rpct { font-weight:700; }
  .fgm-pbar { width:62%; height:5px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; }
  .fgm-pbar i { display:block; height:100%; width:0%; background:#fff; border-radius:3px; transition:width .4s ease; }
  .fgm-rmeta { font-size:12px; opacity:.8; }
  .fgm-resbar { display:flex; gap:10px; padding:4px 0 6px; }
  .fgm-resbtn { flex:1; height:48px; border-radius:14px; background:var(--surface,#14161c);
    border:1px solid var(--border,#262a33); display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; color:var(--text-2,#9aa1ad); font-size:11px; font-weight:600;
    font-family:inherit; text-decoration:none; cursor:pointer; }
  .fgm-resbtn.primary { background:var(--mode-accent); color:var(--mode-ink,#160b2e); border:none; }
  .fgm-resbtn:active { transform:scale(.97); }
  /* mobile recent-generations list under the result (same cards as desktop) */
  .fgm-m-recent-head { font-size:11px; font-weight:600; color:var(--text-3,#646b78);
    text-transform:uppercase; letter-spacing:.06em; margin:10px 0 8px; }
  #fg-m-recent { flex:0 0 auto; }
}

/* ════════════════════════════════════════════════════════════════════
   RIMBAI (studio) MODE — reuses .mode-figma as its visual base but builds the
   NATIVE .layout generate form (no #fg-m mobile app frame). Undo the figma
   mobile rules that hide the desktop form / strip chrome, so studio shows its
   own native form on mobile just like BytePlus. Scoped to body.mode-studio so
   real Figma mode is untouched.
   ════════════════════════════════════════════════════════════════════ */
.st-mbar { display:none; }
@media (max-width:900px){
  /* show studio's native grid form (figma hides it to show its own #fg-m frame).
     Studio has TWO native panels: #tab-generate (video) + #tab-image (image). */
  body.mode-studio #tab-generate.active .layout,
  body.mode-studio #tab-image.active .layout { display:grid !important; }
  body.mode-studio #tab-generate.active,
  body.mode-studio #tab-image.active { padding:14px !important; }
  /* hide the desktop header + promo/announce chrome — the sticky .st-mbar app-bar
     (built by studio-mode.js) replaces it so studio feels native like the other modes */
  body.mode-studio:has(#tab-generate.active) .header,
  body.mode-studio:has(#tab-image.active) .header,
  body.mode-studio:has(#tab-generate.active) .aff-mbar,
  body.mode-studio:has(#tab-image.active) .aff-mbar,
  body.mode-studio:has(#tab-generate.active) .trial-banner,
  body.mode-studio:has(#tab-image.active) .trial-banner { display:none !important; }
  /* keep the mode-pill so mobile users can still switch modes */
  body.mode-studio:has(#tab-generate.active) .mode-pill,
  body.mode-studio:has(#tab-image.active) .mode-pill { display:inline-flex !important; }
  body.mode-studio #fg-m { display:none !important; }
  /* segmented controls must WRAP (mode / duration / resolution overflowed off-screen).
     Text segs → ~2 per row so long labels don't truncate; the visual ratio picker
     (.seg-aspect) stays compact (many small glyphs per row). */
  body.mode-studio .seg { flex-wrap:wrap; gap:8px; }
  body.mode-studio .seg:not(.seg-aspect) .seg-btn { flex:1 1 44%; }
  /* sticky native app-bar; negative margin bleeds it over the 14px tab padding */
  .st-mbar { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:25;
    background:var(--bg,#0a0b0e); padding:12px 15px; margin:-14px -14px 10px; border-bottom:1px solid var(--border,#262a33); }
  .st-mbar-back { width:38px; height:38px; border-radius:50%; background:var(--surface,#14161c);
    border:1px solid var(--border,#262a33); color:var(--text,#e7e9ee); display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; }
  .st-mbar-title { font-size:18px; font-weight:800; flex:1; min-width:0; color:var(--text,#f2f4f7);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* keep the not-ready / quota toast above the fixed Generate bar on mobile */
  .st-toast { bottom:150px; }
  .st-mbar-pill { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
    color:var(--mode-accent,#c4ff3d); border:1px solid color-mix(in srgb,var(--mode-accent,#c4ff3d) 42%,transparent);
    border-radius:999px; padding:5px 12px; }
  .st-mbar-dot { width:7px; height:7px; border-radius:50%; background:var(--mode-accent,#c4ff3d); }
}

/* ════════════ Mobile native: styled slider for integer params (duration etc) ════════════ */
@media (max-width:900px){
  .fgm-slider { width:100%; background:var(--surface,#14161c); border:1px solid var(--line,#262a33); border-radius:14px; padding:12px 14px; margin-top:4px; }
  .fgm-slider-top { display:flex; justify-content:space-between; font-size:13px; color:var(--text-2,#9aa1ad); margin-bottom:10px; }
  .fgm-slider-val { color:var(--mode-accent,var(--accent)); font-weight:700; }
  .fgm-range { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px; background:var(--line-2,#333845); outline:none; }
  .fgm-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--mode-accent,var(--accent)); box-shadow:0 0 0 4px color-mix(in srgb,var(--mode-accent,var(--accent)) 22%,transparent); cursor:pointer; }
  .fgm-range::-moz-range-thumb { width:20px; height:20px; border:none; border-radius:50%; background:var(--mode-accent,var(--accent)); cursor:pointer; }
}

/* ════════════ Mobile native: labelled OPSI groups + boolean switch ════════════ */
@media (max-width:900px){
  .fgm-opts { display:flex; flex-direction:column; gap:15px; margin-top:2px; }
  .fgm-optgroup { display:flex; flex-direction:column; gap:8px; }
  .fgm-optlbl { font-size:11px; font-weight:600; color:var(--text-3,#646b78); text-transform:uppercase; letter-spacing:.06em; }
  .fgm-optctl { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .fgm-optctl .fgm-slider { flex:1 1 100%; width:100%; margin-top:0; }
  .fgm-switch { width:46px; height:27px; border-radius:99px; background:var(--line-2,#333845); border:none; position:relative; cursor:pointer; transition:background .18s; padding:0; flex:0 0 auto; }
  .fgm-switch.on { background:var(--mode-accent,var(--accent)); }
  .fgm-switch-k { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .18s; }
  .fgm-switch.on .fgm-switch-k { transform:translateX(19px); }
}

/* ════════════════════════════════════════════════════════════════════
   BYTEPLUS + DOLA MODE — MOBILE Generate (video #nm-v + image #nm-i)
   Re-uses the SAME .fgm-* visual classes built for figma (mockup2.html);
   only the controls differ (driven from each mode's real desktop seg/
   slider/checkbox controls). Desktop (>900px) untouched: #nm-v/#nm-i are
   display:none by default and only shown inside this media query.
   ════════════════════════════════════════════════════════════════════ */
#nm-v, #nm-i { display:none; }
@media (max-width:900px){
  /* clean native chrome on the byteplus/dola video + image generate tabs */
  body.mode-byteplus:has(#tab-generate.active) .aff-mbar,
  body.mode-byteplus:has(#tab-generate.active) .header,
  body.mode-byteplus:has(#tab-generate.active) .trial-banner,
  body.mode-byteplus:has(#tab-generate.active) .mode-pill,
  body.mode-byteplus:has(#tab-image.active) .aff-mbar,
  body.mode-byteplus:has(#tab-image.active) .header,
  body.mode-byteplus:has(#tab-image.active) .trial-banner,
  body.mode-byteplus:has(#tab-image.active) .mode-pill,
  body.mode-dola:has(#tab-generate.active) .aff-mbar,
  body.mode-dola:has(#tab-generate.active) .header,
  body.mode-dola:has(#tab-generate.active) .trial-banner,
  body.mode-dola:has(#tab-generate.active) .mode-pill,
  body.mode-dolapro:has(#tab-generate.active) .aff-mbar,
  body.mode-dolapro:has(#tab-generate.active) .header,
  body.mode-dolapro:has(#tab-generate.active) .trial-banner,
  body.mode-dolapro:has(#tab-generate.active) .mode-pill,
  body.mode-dolapro:has(#tab-image.active) .aff-mbar,
  body.mode-dolapro:has(#tab-image.active) .header,
  body.mode-dolapro:has(#tab-image.active) .trial-banner,
  body.mode-dolapro:has(#tab-image.active) .mode-pill { display:none !important; }

  body.mode-byteplus #tab-generate.active,
  body.mode-byteplus #tab-image.active,
  body.mode-dola #tab-generate.active,
  body.mode-dola #tab-image.active,
  body.mode-dolapro #tab-generate.active,
  body.mode-dolapro #tab-image.active { padding:0 !important; }
  body.mode-byteplus #tab-generate.active > .layout,
  body.mode-byteplus #tab-image.active > .layout,
  body.mode-dola #tab-generate.active > .layout,
  body.mode-dola #tab-image.active > .layout,
  body.mode-dolapro #tab-generate.active > .layout,
  body.mode-dolapro #tab-image.active > .layout { display:none !important; }

  #nm-v, #nm-i {
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0;
    top:0; bottom:calc(64px + env(safe-area-inset-bottom,0px));
    background:var(--bg,#0a0b0e); z-index:40;
    padding-top:env(safe-area-inset-top,0px);
  }
  /* mirror the #fg-m-prefixed rules (chips / refslot / genbtn) for #nm-v/#nm-i */
  #nm-v .chips, #nm-i .chips { display:flex; gap:8px; flex-wrap:wrap; }
  #nm-v .chip, #nm-i .chip { font-size:13px; font-weight:600; color:var(--text-2,#9aa1ad);
    background:var(--surface,#14161c); border:1px solid var(--border,#262a33);
    padding:9px 14px; border-radius:999px; font-family:inherit; cursor:pointer; }
  #nm-v .chip.on, #nm-i .chip.on { background:color-mix(in srgb,var(--mode-accent) 16%,transparent); color:var(--mode-accent);
    border-color:color-mix(in srgb,var(--mode-accent) 40%,transparent); }
  #nm-v .chip:active, #nm-i .chip:active { transform:scale(.96); }
  #nm-v-refs, #nm-i-refs { margin-top:9px; display:flex; flex-direction:column; gap:9px; }
  #nm-v .refslot, #nm-i .refslot { border:1.5px dashed var(--border-2,#333845); border-radius:14px; padding:18px;
    display:flex; align-items:center; gap:10px; color:var(--text-3,#646b78); font-size:13px;
    position:relative; cursor:pointer; }
  #nm-v .refslot.has, #nm-i .refslot.has { padding:0; min-height:150px; overflow:hidden; border-style:solid; background:#000; }
  #nm-v .refslot.has img, #nm-v .refslot.has video,
  #nm-i .refslot.has img, #nm-i .refslot.has video { width:100%; height:150px; object-fit:contain; background:#000; display:block; }
  #nm-v .refslot-x, #nm-i .refslot-x { position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:6px;
    background:rgba(0,0,0,.7); color:#fff; font-size:14px; line-height:22px; text-align:center; z-index:2; }
  #nm-v .genbtn, #nm-i .genbtn { width:100%; height:54px; border-radius:16px; border:none;
    background:var(--mode-accent); color:var(--mode-ink,#0a0e03); font-weight:800; font-size:16px;
    display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; cursor:pointer;
    box-shadow:0 10px 30px -8px color-mix(in srgb,var(--mode-accent) 60%,transparent); }
  #nm-v .genbtn:active, #nm-i .genbtn:active { transform:translateY(1px); }
  #nm-v .genbtn:disabled, #nm-i .genbtn:disabled { opacity:.55; }
  /* image-result grid inside the SCREEN-C preview (batch of images) */
  #nm-i-imggrid { position:absolute; inset:0; overflow:auto; display:grid; grid-template-columns:1fr 1fr;
    gap:6px; padding:6px; background:#000; }
  #nm-i-imggrid img { width:100%; border-radius:8px; display:block; }
  #nm-i-imggrid.single { grid-template-columns:1fr; }
}

/* ═══ GH + CONVERGE — MOBILE Generate frame (#ghv-m video, #ghi-m image) ═══
   FG-style app frame built inside gh-mode.js / converge-mode.js. Shares `cur`,
   reuses .fgm-* shell classes; result screen stays the existing #<P>-mres overlay.
   Desktop (>900px) untouched: #ghv-m/#ghi-m are display:none by default. */
#ghv-m, #ghi-m, #rbv-m, #rbu-m { display:none; }
@media (max-width:900px){
  body.mode-rb:has(#tab-generate.active) .aff-mbar,
  body.mode-rb:has(#tab-generate.active) .header,
  body.mode-rb:has(#tab-generate.active) .trial-banner,
  body.mode-rb:has(#tab-generate.active) .mode-pill,
  body.mode-rb:has(#tab-image.active) .aff-mbar,
  body.mode-rb:has(#tab-image.active) .header,
  body.mode-rb:has(#tab-image.active) .trial-banner,
  body.mode-rb:has(#tab-image.active) .mode-pill,
  body.mode-gh:has(#tab-generate.active) .aff-mbar,
  body.mode-gh:has(#tab-generate.active) .header,
  body.mode-gh:has(#tab-generate.active) .trial-banner,
  body.mode-gh:has(#tab-generate.active) .mode-pill,
  body.mode-gh:has(#tab-image.active) .aff-mbar,
  body.mode-gh:has(#tab-image.active) .header,
  body.mode-gh:has(#tab-image.active) .trial-banner,
  body.mode-gh:has(#tab-image.active) .mode-pill,
  body.mode-converge:has(#tab-generate.active) .aff-mbar,
  body.mode-converge:has(#tab-generate.active) .header,
  body.mode-converge:has(#tab-generate.active) .trial-banner,
  body.mode-converge:has(#tab-generate.active) .mode-pill { display:none !important; }

  body.mode-rb #tab-generate.active,
  body.mode-rb #tab-image.active,
  body.mode-gh #tab-generate.active,
  body.mode-gh #tab-image.active,
  body.mode-converge #tab-generate.active { padding:0 !important; }
  body.mode-rb #tab-generate.active > .layout,
  body.mode-rb #tab-image.active > .layout,
  body.mode-gh #tab-generate.active > .layout,
  body.mode-gh #tab-image.active > .layout,
  body.mode-converge #tab-generate.active > .layout { display:none !important; }

  #ghv-m, #ghi-m, #rbv-m, #rbu-m {
    display:flex; flex-direction:column; position:fixed; left:0; right:0;
    top:0; bottom:calc(64px + env(safe-area-inset-bottom,0px));
    background:var(--bg,#0a0b0e); z-index:40; padding-top:env(safe-area-inset-top,0px);
  }
  #ghv-m .fgm-opts, #ghi-m .fgm-opts, #rbv-m .fgm-opts, #rbu-m .fgm-opts { display:flex; flex-direction:column; gap:12px; }
  #ghv-m .chip, #ghi-m .chip, #rbv-m .chip, #rbu-m .chip { font-size:13px; font-weight:600; color:var(--text-2,#9aa1ad);
    background:var(--surface,#14161c); border:1px solid var(--border,#262a33);
    padding:9px 14px; border-radius:999px; font-family:inherit; cursor:pointer; }
  #ghv-m .chip.on, #ghi-m .chip.on { background:color-mix(in srgb,var(--mode-accent) 16%,transparent);
    color:var(--mode-accent); border-color:color-mix(in srgb,var(--mode-accent) 40%,transparent); }
  #ghv-m .chip:active, #ghi-m .chip:active { transform:scale(.96); }
  #ghv-m-refs, #ghi-m-refs { margin-top:9px; display:flex; flex-direction:column; gap:9px; }
  #ghv-m .refslot, #ghi-m .refslot { border:1.5px dashed var(--border-2,#333845); border-radius:14px;
    padding:18px; display:flex; align-items:center; gap:10px; color:var(--text-3,#646b78);
    font-size:13px; position:relative; cursor:pointer; }
  #ghv-m .refslot.has, #ghi-m .refslot.has { padding:0; min-height:150px; overflow:hidden; border-style:solid; background:#000; }
  #ghv-m .refslot.has img, #ghv-m .refslot.has video,
  #ghi-m .refslot.has img, #ghi-m .refslot.has video { width:100%; height:150px; object-fit:contain; background:#000; display:block; }
  #ghv-m .refslot-x, #ghi-m .refslot-x { position:absolute; top:6px; right:6px; width:22px; height:22px;
    border-radius:6px; background:rgba(0,0,0,.7); color:#fff; font-size:14px; line-height:22px; text-align:center; z-index:2; }
  #ghv-m .genbtn, #ghi-m .genbtn { width:100%; height:54px; border-radius:16px; border:none;
    background:var(--mode-accent); color:var(--mode-ink,#0a0e03); font-weight:800; font-size:16px;
    display:flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; cursor:pointer;
    box-shadow:0 10px 30px -8px color-mix(in srgb,var(--mode-accent) 60%,transparent); }
  #ghv-m .genbtn:active, #ghi-m .genbtn:active { transform:translateY(1px); }
  #ghv-m .genbtn:disabled, #ghi-m .genbtn:disabled { opacity:.55; }
}
@media (max-width:900px){
  #rbv-m .chip.on, #rbu-m .chip.on { background:color-mix(in srgb,var(--mode-accent) 16%,transparent);color:var(--mode-accent);border-color:color-mix(in srgb,var(--mode-accent) 40%,transparent); }
  #rbv-m .chip:active, #rbu-m .chip:active { transform:scale(.96); }
  #rbv-m-refs, #rbu-m-refs { margin-top:9px;display:flex;flex-direction:column;gap:9px; }
  #rbv-m .refslot, #rbu-m .refslot { border:1.5px dashed var(--border-2,#333845);border-radius:14px;padding:18px;display:flex;align-items:center;gap:10px;color:var(--text-3,#646b78);font-size:13px;position:relative;cursor:pointer; }
  #rbv-m .refslot.has, #rbu-m .refslot.has { padding:0;min-height:150px;overflow:hidden;border-style:solid;background:#000; }
  #rbv-m .refslot.has img, #rbv-m .refslot.has video, #rbu-m .refslot.has img, #rbu-m .refslot.has video { width:100%;height:150px;object-fit:contain;background:#000;display:block; }
  #rbv-m .refslot-x, #rbu-m .refslot-x { position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:22px;text-align:center;z-index:2; }
  #rbv-m .genbtn, #rbu-m .genbtn { width:100%;height:54px;border-radius:16px;border:none;background:var(--mode-accent);color:var(--mode-ink,#0a0e03);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;cursor:pointer;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--mode-accent) 60%,transparent); }
}
@media (max-width:900px){ .mhome-grid-sec { margin-top: 14px; } }
/* content tabs (galeri/showcase/help/credential/tempmail/models/chat/marketing/grid) must
   clear the fixed bottom nav so their last rows don't bleed under it (mobile audit fix) */
@media (max-width:900px){
  #tab-assets.active, #tab-showcase.active, #tab-help.active, #tab-credential.active,
  #tab-tempmail.active, #tab-models.active, #tab-marketing.active, #tab-grid.active {
    padding-bottom: calc(76px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* chat composer was docked at bottom:8-20px, sitting BEHIND the fixed bottom nav.
     Lift it above the nav + give messages room so they don't hide under the composer. */
  .chat-stage-v2 .chat-form { bottom: calc(70px + env(safe-area-inset-bottom,0px)) !important; }
  .chat-stage-v2 .chat-messages { padding-bottom: calc(156px + env(safe-area-inset-bottom,0px)) !important; }
  /* marketing prompt: min-height 36px (1 line) clipped the 2-line placeholder into the
     toolbar row below it — give it room for two lines on mobile */
  #mkt-prompt { min-height: 52px !important; }
  /* tempmail: the address <code> was squeezed to a truncated stub by the domain select +
     copy button on the same row — give it its own full-width row on mobile */
  .tm-addr-row { flex-wrap: wrap; }
  #tm-addr { flex: 1 1 100%; min-width: 0; overflow-x: auto; white-space: nowrap; }
  /* standalone _app_layout pages (affiliate / billing / account) must clear the fixed
     bottom nav so their last card doesn't bleed under it */
  .page-container { padding-bottom: calc(84px + env(safe-area-inset-bottom,0px)); }
}

/* "(tidak support)" marker on unsupported model (BytePlus Seedance 2.0) */
.model-unsupported { font-size: 10px; color: var(--error, #ff7a7a); font-weight: 600; opacity: .9; margin-left: 3px; white-space: nowrap; }
.seg-btn:has(.model-unsupported) { opacity: .72; }

/* ════════════ Mobile native: adaptive reference slot grid (multi-image/video/audio) ════════════ */
@media (max-width:900px){
  .fgm-refgroup { display:flex; flex-direction:column; gap:8px; margin-top:15px; }
  .fgm-slotgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .fgm-slot { aspect-ratio:1; border:1.5px dashed var(--line-2,#333845); border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:pointer; background:var(--surface,#14161c); }
  .fgm-slot.has { border-style:solid; border-color:var(--mode-accent,var(--accent)); }
  .fgm-slot img, .fgm-slot video { width:100%; height:100%; object-fit:cover; }
  .fgm-slot-plus { font-size:24px; color:var(--text-3,#646b78); }
  .fgm-slot-a { font-size:24px; color:var(--mode-accent,var(--accent)); }
  .fgm-slot .refslot-x { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:12px; line-height:18px; text-align:center; }
}

/* ════════════ MOBILE GALLERY (≤900px) — match mockup2 SCREEN D ════════════ */
@media (max-width:900px){
  #tab-assets .assets-stage { padding: 4px 0 90px; }
  /* Big "Galeri" title, no sub (mockup) */
  #tab-assets .assets-head { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 10px; }
  #tab-assets .assets-head h2.heading { font-size: 26px; font-weight: 700; margin: 2px 0 0; }
  #tab-assets .assets-head .hint { display: none; }
  #tab-assets .assets-controls { gap: 0; }
  /* hide the desktop round refresh button on mobile (gallery auto-loads on tab open) */
  #tab-assets #btn-refresh-gallery-all { display: none; }
  /* filter seg → mockup .gtabs pills */
  #tab-assets .assets-filter.seg {
    background: none; border: none; padding: 0; gap: 8px; flex-wrap: wrap;
  }
  #tab-assets .assets-filter .seg-btn {
    padding: 7px 15px; font-size: 13px; font-weight: 600; border-radius: 999px;
    background: var(--surface-1, #14161c); border: 1px solid var(--border, #262a33);
    color: var(--text-2, #9aa1ad);
  }
  #tab-assets .assets-filter .seg-btn.active {
    background: var(--mode-accent, var(--accent)); color: var(--mode-ink, var(--accent-fg));
    border-color: transparent;
  }
  /* the grid → mockup .ggrid (2 col, 9:16 thumbnails) */
  #gallery-all.gallery-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  #gallery-all.gallery-mobile .gitem {
    position: relative; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden;
    background: var(--surface-1, #14161c); border: 1px solid var(--border, #262a33);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #gallery-all.gallery-mobile .gitem:active { transform: scale(.985); }
  #gallery-all.gallery-mobile .gitem video,
  #gallery-all.gallery-mobile .gitem img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* dark scrim bottom so the badge is legible */
  #gallery-all.gallery-mobile .gitem::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
    background: linear-gradient(to top, rgba(0,0,0,.62), transparent); pointer-events: none;
  }
  #gallery-all.gallery-mobile .gitem.placeholder::after { display: none; }
  #gallery-all.gallery-mobile .gitem .gb {
    position: absolute; left: 7px; bottom: 7px; z-index: 2;
    font-size: 10px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 6px;
    max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* small play glyph for video items */
  #gallery-all.gallery-mobile .gitem .gplay {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; color: #fff;
  }
  /* running / expired placeholder tile */
  #gallery-all.gallery-mobile .gitem.placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: var(--text-3, #646b78); font-size: 11px; text-align: center; padding: 10px;
  }
  /* empty state spans both columns */
  #gallery-all.gallery-mobile .gallery-empty { grid-column: 1 / -1; }

  /* ── Mobile gallery viewer (tap to open) ── */
  #gallery-viewer { display: none; }
  #gallery-viewer.open {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.92); padding: env(safe-area-inset-top,0px) 0 0;
  }
  #gallery-viewer .gv-top {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-shrink: 0;
  }
  #gallery-viewer .gv-close {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center;
  }
  #gallery-viewer .gv-badge {
    font-size: 12px; font-weight: 700; color: var(--mode-accent, var(--accent));
    background: color-mix(in srgb, var(--mode-accent, #c4ff3d) 16%, transparent);
    padding: 5px 11px; border-radius: 999px;
  }
  #gallery-viewer .gv-stage {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 12px;
  }
  #gallery-viewer .gv-stage video,
  #gallery-viewer .gv-stage img {
    max-width: 100%; max-height: 100%; border-radius: 14px; object-fit: contain;
  }
  #gallery-viewer .gv-prompt {
    color: rgba(255,255,255,.7); font-size: 12.5px; line-height: 1.45; padding: 4px 16px 0; flex-shrink: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #gallery-viewer .gv-actions {
    display: flex; gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom,0px)); flex-shrink: 0;
  }
  #gallery-viewer .gv-btn {
    flex: 1; height: 50px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06); color: #fff; font-size: 12px; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
    text-decoration: none;
  }
  #gallery-viewer .gv-btn.primary { background: var(--mode-accent, var(--accent)); color: var(--mode-ink, #0a0e03); border: none; }
  #gallery-viewer .gv-btn.danger { color: #ff7a7a; }
  #gallery-viewer .gv-btn:active { transform: translateY(1px); }
}

/* ════════════ Mobile header: brand icon as mode-colored rounded square (match mockup) ════════════ */
@media (max-width:900px){
  .header .brand { gap:11px; align-items:center; }
  .header .brand .brand-ico { width:36px; height:36px; border-radius:11px; background:var(--mode-accent,#c4ff3d); color:var(--mode-ink,#0a0e03); fill:none; stroke:var(--mode-ink,#0a0e03); padding:8px; box-sizing:border-box; flex-shrink:0; stroke-width:2.4; }
  .header .brand > span { font-size:19px; font-weight:800; letter-spacing:-.01em; }
}

/* -- Mobile quota row ---------------------------------------------------
   Injected above the Generate button by static/js/mobile-quota.js. The sidebar quota box and the
   header quota widget are both display:none below 900px, so this is the only place a phone user
   can see how many generations are left and when the next slot frees up. It borrows the active
   mode's accent, the same colour the Generate button already uses. */
@media (max-width: 900px) {
  .mq-quota { display:flex; align-items:center; gap:7px; margin:0 0 11px; min-height:16px;
    font-size:12.5px; font-weight:650; line-height:1.35; letter-spacing:-.005em;
    color:var(--mode-accent,#c4ff3d); }
  .mq-quota.hidden { display:none; }
  .mq-quota .mq-quota-ico { flex:none; opacity:.85; }
  .mq-quota-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Admin-only escape hatch: shown by mobile-quota.js when the quota is full and the mode has
     revealed its hidden Refresh Kuota button. 40px tall to match the tap-target floor used
     everywhere else on mobile. */
  .mq-quota-reset { margin-left:auto; flex:none; min-height:40px; padding:0 15px;
    border-radius:999px; border:1px solid currentColor; background:transparent; color:inherit;
    font:inherit; font-size:12px; font-weight:700; cursor:pointer; opacity:.92; }
  .mq-quota-reset:active { opacity:.6; }

  /* Out of quota: the row stops being a status line and becomes the reason the button is dead. */
  .mq-quota.full { color:var(--warning,#f59e0b); }
  .mq-quota.full .mq-quota-ico { opacity:1; animation:mq-quota-pulse 1.8s ease-in-out infinite; }
  @keyframes mq-quota-pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mq-quota.full .mq-quota-ico { animation:none; }
}

/* FG image model dropdown: show the per-image credit cost as a muted trailing badge. */
.fg-dd-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fg-dd-cost { flex:none; font-size:11px; font-weight:700; color:var(--text-3,#646b78);
  background:var(--surface-2,#1f1f1f); border:1px solid var(--border,#262626);
  border-radius:999px; padding:2px 8px; letter-spacing:.02em; }