:root {
  --paper: #f1f1ef;
  --ink: #151516;
  --muted: #737378;
  --glass: rgba(255, 255, 255, 0.58);
  --accent: #065dfd;
  --accent-rgb: 6, 93, 253;
  --green: #1f9f49;
  --orange: #ee872b;
  --radius-card: 30px;
  --radius-pill: 999px;
  --shadow: 0 24px 80px rgba(20, 20, 22, 0.12);
  --mx: 50vw;
  --my: 46vh;
}

@property --fluid-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(720px circle at var(--mx) var(--my), rgba(var(--accent-rgb), 0.09), transparent 56%),
    radial-gradient(620px circle at 16% 18%, rgba(255,255,255,0.86), transparent 58%),
    linear-gradient(125deg, #fafafa, #e1e1df);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.92); outline-offset: 4px; }
.hidden { display: none !important; }
body.guest .auth-only-link, body.guest .billing-ledger { display: none !important; }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}
.mono {
  font-family: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  background: linear-gradient(to bottom, rgba(241,241,239,0.94), rgba(241,241,239,0.64) 72%, transparent);
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 3px 12px 3px 3px;
  border-radius: var(--radius-pill);
  width: max-content;
  font-weight: 800;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--ink);
  box-shadow: 0 16px 44px rgba(20,20,22,0.18);
}
.top-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.54);
  backdrop-filter: blur(22px);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.top-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
}
.top-nav a:hover { color: #fff; }
.top-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 8px;
}
.topbar .top-actions .btn.primary {
  color: var(--ink);
  background-color: rgba(255,255,255,0.62);
  border-color: rgba(255,255,255,0.82);
}
.topbar .top-actions .btn.primary.is-fluid-active {
  color: #fff;
  border-color: rgba(21,21,22,0.82);
}
.credit-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.8);
  font-weight: 800;
}
.btn {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: rgba(255,255,255,0.62);
  box-shadow: 0 14px 42px rgba(20,20,22,0.1);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  transition: transform 180ms ease, color 260ms ease, box-shadow 180ms ease, border-color 260ms ease;
}
.btn.primary { color: white; background-color: var(--ink); border-color: rgba(20,20,22,0.9); }
.btn.icon { width: 46px; padding: 0; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 20px 54px rgba(20,20,22,0.14); }
.btn.is-pressing { transform: translateY(2px) scale(0.975); box-shadow: inset 0 2px 10px rgba(0,0,0,0.16); }
.layout {
  width: min(1240px, calc(100% - 48px));
  margin: 18px auto 72px;
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.side-panel, .side-note, .glass-card, .inner-panel {
  border: 1px solid rgba(255,255,255,0.76);
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(26px) saturate(1.16);
  box-shadow: var(--shadow);
}
.side-panel { padding: 14px; border-radius: 28px; }
.side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.side-title span:last-child { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav { display: grid; gap: 6px; }
.side-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.side-link:hover, .side-link.active { color: var(--ink); background-color: rgba(255,255,255,0.74); transform: translateX(3px); }
.side-link .material-symbols-outlined { font-size: 19px; }
.side-note {
  padding: 18px;
  border-radius: 28px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}
.main { min-width: 0; display: grid; gap: 24px; }
.section { scroll-margin-top: 110px; display: grid; gap: 18px; }
#dashboard { order: 1; }
#generator { order: 2; }
#billing { order: 3; }
#history { order: 4; }
#profile { order: 5; }
#auth { order: 6; }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
}
.label {
  display: inline-flex;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
h1, h2, h3, p { margin: 0; }
h1 {
  max-width: 780px;
  margin-top: 18px;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: 0;
}
h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1; font-weight: 300; }
h3 { font-size: 22px; line-height: 1.1; font-weight: 500; }
.lead {
  max-width: 720px;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  font-weight: 300;
}
.grid { display: grid; gap: 18px; }
.hero-grid { grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr); align-items: stretch; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.glass-card {
  --dot-rgb: 112, 114, 120;
  --liquid-x: 50%;
  --liquid-y: 50%;
  --spot-x: 50%;
  --spot-y: 50%;
  --liquid-radius: 0px;
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 220px;
  padding: 28px;
  border-radius: var(--radius-card);
  transform: translate3d(var(--push-x), var(--push-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, box-shadow 220ms ease;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0px at var(--liquid-x) var(--liquid-y));
  background:
    radial-gradient(circle, rgba(var(--dot-rgb, var(--accent-rgb)), var(--dot-a1, 0.58)) 0 1.15px, transparent 1.55px) 0 0 / 15px 15px,
    radial-gradient(circle, rgba(var(--dot-rgb, var(--accent-rgb)), var(--dot-a2, 0.28)) 0 1px, transparent 1.4px) 7px 6px / 21px 21px,
    radial-gradient(circle, rgba(var(--dot-rgb, var(--accent-rgb)), var(--dot-a3, 0.16)) 0 1.25px, transparent 1.65px) 3px 4px / 31px 31px,
    radial-gradient(circle, rgba(var(--dot-rgb, var(--accent-rgb)), var(--dot-a4, 0.11)) 0 1px, transparent 1.4px) 12px 10px / 39px 39px;
  mask-image: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(0,0,0,0.96), rgba(0,0,0,0.38) 52%, rgba(0,0,0,0.08) 78%);
  transition: clip-path 960ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}
.glass-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0px at var(--liquid-x) var(--liquid-y));
  background: rgba(112,114,120,0.14);
  mix-blend-mode: soft-light;
  transition: clip-path 960ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}
.glass-card > * { position: relative; z-index: 1; }
.glass-card.is-liquid-hover { border-color: rgba(var(--accent-rgb),0.28); box-shadow: 0 34px 100px rgba(20,20,22,0.16); }
.glass-card.is-liquid-hover::before { opacity: 0.58; clip-path: circle(var(--liquid-radius) at var(--liquid-x) var(--liquid-y)); }
.glass-card.is-liquid-hover::after { opacity: 1; clip-path: circle(var(--liquid-radius) at var(--liquid-x) var(--liquid-y)); }
.glass-card.has-active-control {
  --push-x: 0px;
  --push-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transition-duration: 420ms;
}
.hero-card { min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; }
.quick-card { display: grid; align-content: space-between; gap: 18px; }
.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.metric {
  min-height: 104px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 24px;
  background: rgba(255,255,255,0.42);
}
.dot-number {
  font-family: "IBM Plex Mono", monospace;
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(20,20,22,0.78);
  text-shadow: 2px 0 rgba(20,20,22,0.18), 4px 0 rgba(20,20,22,0.08);
}
.metric span, .mini-copy {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.card-title, .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.icon-bubble {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.62);
}
.list { display: grid; gap: 10px; margin-top: 22px; }
.list-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.46);
  color: rgba(20,20,22,0.78);
  font-size: 13px;
  font-weight: 700;
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb),0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.auth-card { min-height: 680px; }
.auth-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.inner-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 26px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
input, textarea, select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  padding: 14px 16px;
  outline: 0;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.5; }

.native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}
.custom-select { position: relative; width: 100%; }
.custom-select-trigger {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 16px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 20px;
  color: var(--ink);
  background-color: rgba(255,255,255,0.72);
  text-align: left;
  cursor: pointer;
}
.custom-select-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: rgba(20,20,22,0.06);
  font-size: 21px;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), background-color 180ms ease;
  pointer-events: none;
}
.custom-select.is-open .custom-select-arrow { transform: rotate(180deg); }
.custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 32;
  display: grid;
  gap: 3px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  background: rgba(248,248,247,0.94);
  backdrop-filter: blur(24px) saturate(1.12);
  box-shadow: 0 24px 70px rgba(20,20,22,0.18), 0 2px 8px rgba(20,20,22,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px) scale(0.985);
  transform-origin: 50% 0;
  transition: opacity 170ms ease, transform 190ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 190ms;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),0.42) transparent;
}
.custom-select.is-open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.custom-select-option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 13px;
  color: rgba(20,20,22,0.78);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}
.custom-select-option[aria-selected="true"] {
  color: var(--accent);
  background-color: rgba(var(--accent-rgb),0.09);
  font-weight: 800;
}
.custom-select-menu::-webkit-scrollbar { width: 10px; }
.custom-select-menu::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.42);
  background-clip: padding-box;
}

.liquid-control {
  --fluid-x: 50%;
  --fluid-y: 50%;
  --fluid-max: 0px;
  --fluid-radius: 0px;
  --control-base: transparent;
  --control-fluid: #151516;
  isolation: isolate;
  background-image: radial-gradient(
    circle at var(--fluid-x) var(--fluid-y),
    var(--control-fluid) 0 var(--fluid-radius),
    transparent calc(var(--fluid-radius) + 0.75px)
  );
  background-color: var(--control-base);
  background-repeat: no-repeat;
  transition:
    --fluid-radius 680ms cubic-bezier(0.16, 1, 0.3, 1),
    color 260ms ease,
    border-color 260ms ease,
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms ease;
}
.btn.liquid-control { --control-base: rgba(255,255,255,0.62); }
.btn.primary.liquid-control { --control-base: #151516; }
.custom-select-trigger.liquid-control { --control-base: rgba(255,255,255,0.72); }
input.liquid-control,
textarea.liquid-control,
select.liquid-control { --control-base: rgba(255,255,255,0.72); }
.upload-box.liquid-control { --control-base: rgba(255,255,255,0.48); }
.side-link.active.liquid-control:not(.is-fluid-active) { --control-base: rgba(255,255,255,0.74); }
.liquid-control.is-fluid-active {
  --fluid-radius: var(--fluid-max);
  color: #fff;
  border-color: rgba(21,21,22,0.82);
  box-shadow: 0 16px 44px rgba(20,20,22,0.16);
}
.liquid-control.is-fluid-exiting {
  --fluid-radius: 0px;
  transition-timing-function: cubic-bezier(0.55, 0, 0.45, 1), ease, ease, ease, ease;
  transition-duration: 520ms, 280ms, 280ms, 360ms, 180ms;
}
.liquid-control.is-surface-control {
  --control-fluid: var(--accent);
}
.liquid-control.is-surface-control.is-fluid-active {
  color: #fff;
  border-color: rgba(var(--accent-rgb),0.88);
  box-shadow: 0 18px 48px rgba(var(--accent-rgb),0.18), inset 0 0 0 1px rgba(255,255,255,0.24);
}
.liquid-control.is-fluid-active::placeholder { color: rgba(255,255,255,0.7); }
.liquid-control.is-surface-control.is-fluid-active::placeholder { color: rgba(255,255,255,0.72); }
.side-link.liquid-control:hover,
.side-link.liquid-control.active.is-fluid-active {
  color: #fff;
  background-color: var(--control-base);
}
.top-nav .liquid-control { border-radius: var(--radius-pill); }
select.liquid-control option { color: var(--ink); background: #fff; }
.upload-box {
  margin-top: 14px;
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(var(--accent-rgb),0.45);
  border-radius: 26px;
  background: rgba(255,255,255,0.48);
  cursor: pointer;
}
.upload-box input { display: none; }
.card-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(20,20,22,0.08); color: var(--muted); font-size: 13px; }
.plan-card strong { font-size: 42px; font-weight: 300; }
.result-card img, .result-card .mock-preview {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22px;
  background: rgba(255,255,255,0.5);
}
.result-card .mock-preview { display: grid; place-items: center; color: var(--muted); }
.status { font-weight: 800; color: var(--accent); }
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, calc(100% - 44px));
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  font-size: 14px;
  font-weight: 800;
}
.toast.visible { opacity: 1; transform: translateY(0); }
#custom-cursor {
  --cursor-size: 16px;
  --cursor-fill: #151516;
  --cursor-border: transparent;
  --cursor-shadow: none;
  --cursor-x: -40px;
  --cursor-y: -40px;
  --cursor-angle: 0deg;
  --cursor-stretch: 1;
  --cursor-squash: 1;
  --cursor-tail-radius: 50%;
  --cursor-nose-radius: 50%;
  --cursor-origin: 50% 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: var(--cursor-tail-radius) var(--cursor-nose-radius) var(--cursor-nose-radius) var(--cursor-tail-radius) / 50%;
  background: var(--cursor-fill);
  border: 1.5px solid var(--cursor-border);
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%) rotate(var(--cursor-angle)) scaleX(var(--cursor-stretch)) scaleY(var(--cursor-squash));
  transform-origin: var(--cursor-origin);
  box-shadow: var(--cursor-shadow);
  will-change: transform, width, height, background, border-color;
  transition:
    width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    height 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease,
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor-droplet {
  --drop-x: -40px;
  --drop-y: -40px;
  --drop-scale: .5;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 119;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #151516;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--drop-x), var(--drop-y), 0) translate(-50%, -50%) scale(var(--drop-scale));
  will-change: transform, opacity;
}
.cursor-droplet-b { filter: blur(.25px); }
body.cursor-in-surface #custom-cursor {
  --cursor-size: 16px;
  --cursor-fill: transparent;
  --cursor-border: rgba(255,255,255,0.94);
  --cursor-shadow: 0 8px 24px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(20,20,22,0.08);
  mix-blend-mode: normal;
}
body.cursor-merging #custom-cursor {
  --cursor-size: 9px;
  --cursor-shadow: 0 5px 12px rgba(0,0,0,0.2);
  transition-duration: 90ms;
}
body.cursor-absorbed #custom-cursor {
  --cursor-size: 14px;
  --cursor-fill: #fff;
  --cursor-border: rgba(255,255,255,0.72);
  --cursor-shadow: 0 7px 18px rgba(0,0,0,0.18);
}
body.cursor-surface-control.cursor-absorbed #custom-cursor {
  --cursor-fill: #fff;
  --cursor-border: rgba(255,255,255,0.78);
  --cursor-shadow: 0 7px 18px rgba(0,0,0,0.18);
}
body.cursor-pressing #custom-cursor { --cursor-size: 9px; }
body.cursor-ejecting #custom-cursor {
  animation: cursor-eject 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cursor-eject {
  0% { width: 8px; height: 8px; opacity: 0.72; }
  52% { width: 16px; height: 13px; opacity: 1; }
  100% { width: 16px; height: 16px; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button, body.cursor-ready input, body.cursor-ready textarea, body.cursor-ready select { cursor: none; }
  body.cursor-ready .upload-stage,
  body.cursor-ready .upload-stage * { cursor: none !important; }
}
@media (max-width: 1060px) {
  .topbar { grid-template-columns: 1fr auto; }
  .top-nav { display: none; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 76px; z-index: 50; }
  .side-panel { overflow-x: auto; scrollbar-width: none; }
  .side-panel::-webkit-scrollbar { display: none; }
  .side-title, .side-note { display: none; }
  .side-nav { display: flex; min-width: max-content; }
  .hero-grid, .plans-grid, .results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 14px; }
  .brand span:last-child { display: none; }
  .top-actions .btn.primary { display: none; }
  .layout { width: min(100% - 28px, 1240px); margin-top: 12px; gap: 16px; }
  .section { scroll-margin-top: 138px; }
  .hero-grid, .plans-grid, .results-grid, .form-grid, .auth-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 520px; }
  .metric-strip { grid-template-columns: 1fr; }
  h1 { font-size: clamp(42px, 14vw, 64px); }
  h2 { font-size: 34px; }
  .glass-card { padding: 22px; }
  .card-foot { align-items: start; flex-direction: column; }
  .card-foot .btn { width: 100%; }
  .toast { left: 12px; right: 12px; bottom: 12px; border-radius: 24px; }
}

/* Workspace refinement */
.app-topbar { grid-template-columns: 1fr auto; }
.generator-studio {
  align-items: stretch;
  min-height: 0;
}
.upload-stage { min-height: 410px; }
.brief-panel { align-content: stretch; grid-template-rows: auto auto auto auto; }
.brief-field {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20,20,22,0.07);
  background-color: #e7e7e4;
  box-shadow: inset 0 1px 2px rgba(20,20,22,0.04);
}
.brief-field.liquid-control {
  --control-base: #e7e7e4;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + 0.75px));
  background-color: var(--control-base);
}
.brief-field > span,
.brief-field input,
.brief-field textarea { transition: color 220ms ease; }
.brief-field.is-fluid-active > span,
.brief-field.is-fluid-active input,
.brief-field.is-fluid-active textarea { color: #fff; }
.brief-field.is-fluid-active input::placeholder,
.brief-field.is-fluid-active textarea::placeholder { color: rgba(255,255,255,0.72); }
.brief-field input:focus,
.brief-field textarea:focus { outline: 0; }
.brief-field textarea { min-height: 106px; }
.tool-rack { align-self: start; }
.tool-field {
  min-height: 90px;
  border: 1px solid rgba(20,20,22,0.06);
  background: #e7e7e4;
}
.tool-field .custom-select-trigger { min-width: 0; padding-right: 4px; }
.custom-select-value {
  position: relative;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.custom-select-value-track { display: inline-block; padding-right: 12px; }
.custom-select-trigger:hover .custom-select-value.is-overflowing .custom-select-value-track,
.custom-select-trigger:focus-visible .custom-select-value.is-overflowing .custom-select-value-track {
  animation: select-value-marquee 4.8s ease-in-out infinite alternate;
}
@keyframes select-value-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% + var(--value-window, 112px))); }
}
.tool-field .custom-select-menu {
  min-width: 270px;
  max-width: min(340px, calc(100vw - 40px));
  padding: 8px;
}
.custom-select-option {
  min-height: 46px;
  padding: 10px 16px;
  white-space: normal;
  line-height: 1.35;
  text-wrap: pretty;
}
.generator-footer { margin-top: 0; }

.template-wave {
  position: absolute;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.template-wave::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -42%;
  width: 42%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.86) 0 1.2px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.72) 48%, rgba(var(--accent-rgb),0.08));
  filter: blur(0.15px);
  transform: skewX(-10deg);
}
.template-wave.is-running { opacity: 1; }
.template-wave.is-running::before { animation: template-dot-wave 760ms cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes template-dot-wave {
  0% { left: -42%; opacity: 0; }
  16% { opacity: 0.95; }
  100% { left: 108%; opacity: 0; }
}

.ideas-strip {
  display: grid;
  gap: 12px;
  padding: 2px 6px 8px;
}
.ideas-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.ideas-heading > div { display: flex; align-items: baseline; gap: 12px; }
.ideas-heading h2 { font-size: 20px; font-weight: 600; }
.ideas-heading > span { color: var(--muted); font-size: 11px; }
.ideas-carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),0.28) transparent;
}
.idea-template {
  min-width: 174px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 999px;
  color: var(--ink);
  background-color: rgba(255,255,255,0.58);
  scroll-snap-align: start;
  text-align: left;
  cursor: pointer;
}
.idea-template img {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(20,20,22,0.08);
}
.idea-template-copy { min-width: 0; display: grid; gap: 2px; }
.idea-template-copy strong,
.idea-template-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea-template-copy strong { font-size: 12px; }
.idea-template-copy small { color: var(--muted); font-size: 10px; }
.idea-template.active { border-color: rgba(var(--accent-rgb),0.34); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.08); }

.recent-projects {
  max-height: min(430px, calc(100vh - 420px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),0.24) transparent;
}
.recent-date-group { display: grid; gap: 5px; }
.recent-date-label,
.project-date-label {
  padding: 7px 10px 3px;
  color: rgba(115,115,120,0.78);
  font-size: 9px;
}
.recent-project {
  position: relative;
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: transparent;
}
.recent-project-main {
  min-width: 0;
  min-height: 50px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}
.recent-project.is-new-project { animation: recent-project-fan 520ms cubic-bezier(0.23,1,0.32,1); transform-origin: 0 100%; }
@keyframes recent-project-fan {
  0% { opacity: 0; transform: translateY(-18px) rotate(-6deg) scale(0.95); }
  66% { opacity: 1; transform: translateY(2px) rotate(0.8deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
.project-status {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}
.project-status.is-loading { background: rgba(var(--accent-rgb),0.1); }
.project-status.is-loading span {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--accent-rgb),0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: project-spin 760ms linear infinite;
}
@keyframes project-spin { to { transform: rotate(360deg); } }
.project-status.is-ready {
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  font-size: 18px;
  animation: project-ready 420ms cubic-bezier(0.23,1,0.32,1);
}
@keyframes project-ready {
  0% { opacity: 0; transform: scale(0.65) rotate(-18deg); }
  70% { transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.project-status.is-failed { color: #b4233a; background: rgba(180,35,58,0.1); font-size: 18px; }
.project-actions { display: inline-flex; gap: 2px; padding-right: 5px; }
.project-icon-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background-color: rgba(20,20,22,0.045);
  cursor: pointer;
}
.project-icon-action .material-symbols-outlined { font-size: 16px; }
.project-icon-action.is-confirming { color: #fff; background-color: #b4233a; }

#generationsList.results-grid { display: block; }
.project-date-group { display: grid; gap: 8px; margin-top: 18px; }
.project-date-group:first-child { margin-top: 0; }
.project-date-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.project-preview {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background-color: rgba(230,230,228,0.7);
  cursor: pointer;
}
.project-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.project-preview.mock-preview { aspect-ratio: 1; }
.project-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.project-card-heading h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.project-card-status { display: inline-flex; align-items: center; gap: 4px; }
.project-rename-row { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; }
.project-rename-row input { min-width: 0; flex: 1; min-height: 38px; padding: 0 11px; border-radius: 12px; background: #ededeb; }
.project-error { color: #b4233a; }

body:has(dialog[open]) #custom-cursor { opacity: 1 !important; }
body.cursor-ready:has(dialog[open]),
body.cursor-ready:has(dialog[open]) a,
body.cursor-ready:has(dialog[open]) button,
body.cursor-ready:has(dialog[open]) input,
body.cursor-ready:has(dialog[open]) textarea,
body.cursor-ready:has(dialog[open]) select { cursor: none; }
body.cursor-pressing #custom-cursor { --cursor-size: 8px; }

@media (max-width: 1060px) {
  .recent-projects { max-height: none; overflow: visible; }
  .ideas-strip { padding-bottom: 2px; }
}

@media (max-width: 720px) {
  .upload-stage { min-height: 230px; }
  .brief-field textarea { min-height: 96px; }
  .ideas-heading > span { display: none; }
  .idea-template { min-width: 160px; }
  .project-date-grid { grid-template-columns: 1fr; }
  .tool-field .custom-select-menu { min-width: 100%; max-width: 100%; }
}

/* Product workspace */
body.modal-open { overflow: hidden; }
body:has(dialog[open]) #custom-cursor { opacity: 0 !important; }
body.cursor-ready:has(dialog[open]),
body.cursor-ready:has(dialog[open]) a,
body.cursor-ready:has(dialog[open]) button,
body.cursor-ready:has(dialog[open]) input,
body.cursor-ready:has(dialog[open]) textarea,
body.cursor-ready:has(dialog[open]) select { cursor: auto; }
.app-topbar {
  grid-template-columns: 1fr auto 1fr;
  min-height: 78px;
}
.workspace-context {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 800;
}
.workspace-context-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.1);
}
.credit-wrap { position: relative; }
.credit-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.84);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background-color: rgba(255,255,255,0.68);
  font-weight: 800;
  cursor: pointer;
}
.credit-tooltip {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 90;
  width: max-content;
  max-width: 240px;
  padding: 9px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,0.9);
  background: #151516;
  box-shadow: 0 16px 40px rgba(20,20,22,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: 80% 0;
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.23,1,0.32,1), visibility 0s linear 180ms;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
}
.credit-wrap:hover .credit-tooltip,
.credit-wrap:focus-within .credit-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.header-login { min-width: 82px; }

.product-layout {
  width: min(1380px, calc(100% - 48px));
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.product-sidebar { top: 94px; }
.product-side-panel {
  display: grid;
  gap: 6px;
  padding: 12px;
  overflow: visible;
}
.recent-projects { display: grid; gap: 6px; }
.recent-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.recent-project,
.side-action {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}
.recent-thumb {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  font-size: 19px;
}
.recent-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.recent-copy strong,
.recent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-copy strong { font-size: 12px; }
.recent-copy small { color: var(--muted); font-size: 10px; }
.recent-project > .material-symbols-outlined { color: var(--muted); font-size: 18px; }
.side-action {
  min-height: 40px;
  padding-inline: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.side-action .material-symbols-outlined { font-size: 18px; }
.side-divider { height: 1px; margin: 7px 8px; background: rgba(20,20,22,0.07); }
.product-nav .side-link {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.side-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  font-size: 9px;
  text-transform: uppercase;
}

.generator-main { display: grid; align-content: start; gap: 18px; }
.generator-heading {
  min-height: 70px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 0 6px;
}
.generator-heading h1 {
  margin-top: 8px;
  font-size: 38px;
  line-height: 1;
  font-weight: 400;
}
.generation-price {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: rgba(255,255,255,0.52);
  font-size: 12px;
  font-weight: 800;
}
.generation-price .material-symbols-outlined { color: var(--accent); font-size: 18px; }
.generator-studio {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(320px, 0.88fr) minmax(420px, 1.12fr);
  gap: 14px;
  padding: 14px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 32px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(28px) saturate(1.12);
  box-shadow: 0 28px 90px rgba(20,20,22,0.12);
}
.upload-stage {
  min-height: 590px;
  margin: 0;
  align-content: center;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  padding: 28px;
  border-style: solid;
  border-color: rgba(255,255,255,0.72);
  border-radius: 24px;
  text-align: left;
  --control-base: rgba(244,244,242,0.76);
}
.upload-box.liquid-control {
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + 0.75px));
  background-color: var(--control-base);
}
.upload-icon,
.upload-action {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.upload-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
}
.upload-copy { display: grid; gap: 5px; }
.upload-copy strong { font-size: 17px; }
.upload-copy small { color: var(--muted); line-height: 1.45; }
.upload-action {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
}
.upload-stage.is-fluid-active .upload-icon { color: #fff; background: rgba(255,255,255,0.16); }
.upload-stage.is-fluid-active .upload-copy small { color: rgba(255,255,255,0.74); }
.upload-stage.is-fluid-active .upload-action { color: var(--accent); background: #fff; }

.brief-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 10px;
}
.brief-field {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(244,244,242,0.76);
}
.brief-field > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.brief-field input,
.brief-field textarea {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.brief-field input { min-height: 40px; font-size: 20px; font-weight: 600; }
.brief-field textarea { min-height: 150px; font-size: 15px; }
.tool-rack {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.tool-field {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 2px 8px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(244,244,242,0.76);
}
.tool-field:has(.custom-select.is-open) { z-index: 400; }
.tool-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.09);
  font-size: 18px;
}
.tool-copy { grid-column: 2; min-width: 0; }
.tool-copy small { color: var(--muted); font-size: 10px; font-weight: 800; }
.tool-field .custom-select { grid-column: 2; min-width: 0; }
.tool-field .custom-select-trigger {
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background-color: transparent;
  box-shadow: none;
  font-size: 11px;
}
.tool-field .custom-select-arrow {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  font-size: 18px;
}
.tool-field .custom-select-menu {
  left: -44px;
  right: -8px;
  top: calc(100% + 10px);
  z-index: 1000;
  min-width: 210px;
  border-color: rgba(20,20,22,0.08);
  background: #f8f8f7;
  backdrop-filter: none;
  box-shadow: 0 28px 80px rgba(20,20,22,0.24), 0 0 0 1px rgba(20,20,22,0.04);
}
.custom-select-menu { background: #f8f8f7; backdrop-filter: none; }
.custom-select-option { color: #38383c; }
.custom-select-option[aria-selected="true"] { color: var(--accent); background-color: rgba(var(--accent-rgb),0.09); }
.generator-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.generate-button { min-width: 190px; }

dialog.modal-shell {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 180ms ease;
}
dialog.modal-shell[open] { display: grid; place-items: center; }
dialog.modal-shell.is-visible { opacity: 1; }
dialog.modal-shell::backdrop {
  background: rgba(230,230,228,0.48);
  backdrop-filter: blur(22px) saturate(0.82);
}
.modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(820px, calc(100dvh - 48px));
  padding: 28px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.96);
  border-radius: 28px;
  background: #f7f7f5;
  box-shadow: 0 40px 120px rgba(20,20,22,0.24), 0 0 0 1px rgba(20,20,22,0.04);
  opacity: 0;
  transform: translateY(14px) scale(0.975);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.23,1,0.32,1);
}
.modal-shell.is-visible .modal-card { opacity: 1; transform: translateY(0) scale(1); }
.wide-modal .modal-card { width: min(1160px, 100%); }
.modal-scroll-card { overflow-y: auto; overscroll-behavior: contain; }
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background-color: rgba(20,20,22,0.06);
  cursor: pointer;
}
.modal-heading { display: grid; gap: 10px; padding-right: 52px; margin-bottom: 24px; }
.modal-heading h2 { font-size: 34px; }
.modal-heading p { color: var(--muted); line-height: 1.55; }
.modal-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.auth-stage { transform-origin: 12% 100%; }
.auth-view { display: grid; gap: 14px; }
.auth-view input { background-color: rgba(230,230,228,0.72); border-color: rgba(20,20,22,0.06); }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-switch {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background-color: transparent;
  cursor: pointer;
  font-size: 13px;
}
.auth-switch strong { color: var(--accent); }
.modal-plans { margin-top: 8px; }
.modal-plans .glass-card { min-height: 0; padding: 22px; background: #fff; box-shadow: 0 12px 40px rgba(20,20,22,0.08); }
.billing-ledger { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(20,20,22,0.08); }
.profile-form { display: grid; gap: 14px; }
.profile-form input,
.profile-form textarea { background-color: rgba(230,230,228,0.72); border-color: rgba(20,20,22,0.06); }
.modal-form-footer { display: flex; justify-content: flex-end; padding-top: 8px; }
.results-grid .glass-card { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .modal-card,
  dialog.modal-shell,
  .credit-tooltip,
  .custom-select-menu { transition-duration: 1ms !important; }
}

/* Native cursor mode: custom cursor remains implemented but visually disabled. */
#custom-cursor,
.cursor-droplet { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready { cursor: auto; }
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready select,
  body.cursor-ready .upload-stage,
  body.cursor-ready .upload-stage * { cursor: pointer !important; }
  body.cursor-ready input,
  body.cursor-ready textarea { cursor: text !important; }
}

/* Restore the single custom dot without velocity trails or deformation. */
#custom-cursor { display: block !important; }
.cursor-droplet { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready,
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready input,
  body.cursor-ready textarea,
  body.cursor-ready select,
  body.cursor-ready:has(dialog[open]),
  body.cursor-ready:has(dialog[open]) select,
  body.cursor-ready .upload-stage,
  body.cursor-ready .upload-stage * { cursor: none !important; }
}

/* File reset mirrors the upload control and sits below the file count. */
.upload-reset,
.upload-reset.liquid-control,
.upload-reset.liquid-control.is-fluid-exiting {
  --control-base: rgba(20,20,22,.07);
  --control-fluid: #151516;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  margin-top: 12px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  color: var(--ink);
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  box-shadow: none !important;
}
.upload-reset .material-symbols-outlined { font-size: 21px; }
.upload-reset.liquid-control.is-fluid-active,
.upload-stage.is-fluid-active .upload-reset.liquid-control.is-fluid-active {
  color: #fff;
  background-color: var(--control-base) !important;
}

@media (max-width: 1060px) {
  .app-topbar { grid-template-columns: 1fr auto; }
  .workspace-context { display: none; }
  .product-layout { grid-template-columns: 1fr; width: min(100% - 28px, 900px); padding-bottom: 98px; }
  .product-sidebar {
    position: fixed;
    top: auto;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 170;
  }
  .product-side-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    border-radius: 24px;
  }
  .product-side-panel .side-title,
  .product-side-panel .recent-projects,
  .product-side-panel .side-action,
  .product-side-panel .side-divider { display: none; }
  .product-nav { display: flex; min-width: max-content; gap: 6px; }
  .product-nav .side-link { width: auto; min-height: 46px; white-space: nowrap; }
  .generator-studio { grid-template-columns: 1fr; }
  .upload-stage { min-height: 330px; }
}

@media (max-width: 720px) {
  .app-topbar { min-height: 68px; }
  .credit-button { min-height: 42px; padding-inline: 12px; font-size: 12px; }
  .header-login { min-width: 0; width: 42px; padding: 0; font-size: 0; }
  .header-login::after { content: "login"; font-family: "Material Symbols Outlined"; font-size: 21px; }
  .authed .header-login::after { content: "logout"; }
  .generator-heading { min-height: 58px; align-items: center; }
  .generator-heading h1 { font-size: 30px; }
  .generation-price { display: none; }
  .generator-studio { padding: 9px; border-radius: 26px; }
  .upload-stage { min-height: 260px; grid-template-columns: 44px minmax(0,1fr); padding: 20px; border-radius: 20px; }
  .upload-icon { width: 44px; height: 44px; border-radius: 14px; }
  .upload-action { display: none; }
  .brief-panel { padding: 6px; }
  .tool-rack { grid-template-columns: 1fr; }
  .tool-field .custom-select-menu { left: 0; right: 0; }
  .generator-footer { align-items: stretch; flex-direction: column; }
  .generate-button { width: 100%; }
  dialog.modal-shell { padding: 10px; align-items: end; }
  .modal-card { width: 100%; max-height: calc(100dvh - 20px); padding: 22px; border-radius: 26px; }
  .wide-modal .modal-card { width: 100%; }
  .modal-heading h2 { font-size: 28px; }
  .modal-plans,
  .results-grid,
  .profile-form .form-grid { grid-template-columns: 1fr; }
}

/* Final cascade: workspace v5 */
.app-topbar { grid-template-columns: 1fr auto; }
.generator-studio { min-height: 0; align-items: stretch; }
.upload-stage { min-height: 410px; }
.brief-panel { align-content: stretch; grid-template-rows: auto auto auto auto; }
.brief-field {
  overflow: hidden;
  border: 1px solid rgba(20,20,22,0.08);
  background: #e7e7e4;
  box-shadow: inset 0 1px 2px rgba(20,20,22,0.04);
}
.brief-field.liquid-control {
  --control-base: #e7e7e4;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + 0.75px));
  background-color: var(--control-base);
}
.brief-field textarea { min-height: 106px; }
.brief-field.is-fluid-active > span,
.brief-field.is-fluid-active input,
.brief-field.is-fluid-active textarea { color: #fff; }
.brief-field.is-fluid-active input::placeholder,
.brief-field.is-fluid-active textarea::placeholder { color: rgba(255,255,255,0.72); }
.tool-field { min-height: 90px; border: 1px solid rgba(20,20,22,0.06); background: #e7e7e4; }
.tool-field .custom-select-menu {
  z-index: 1000;
  min-width: 270px;
  max-width: min(340px, calc(100vw - 40px));
  padding: 8px;
  background: #f8f8f7;
}
.tool-field:last-child .custom-select-menu {
  left: auto;
  right: 0;
}
.product-sidebar .recent-project {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: transparent;
}
.product-sidebar .recent-project-main {
  min-width: 0;
  min-height: 50px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 16px;
  color: var(--ink);
  background-color: transparent;
  text-align: left;
}
body:has(dialog[open]) #custom-cursor { opacity: 1 !important; }
body.cursor-ready:has(dialog[open]),
body.cursor-ready:has(dialog[open]) a,
body.cursor-ready:has(dialog[open]) button,
body.cursor-ready:has(dialog[open]) input,
body.cursor-ready:has(dialog[open]) textarea,
body.cursor-ready:has(dialog[open]) select { cursor: none; }
body.cursor-pressing #custom-cursor { transition-duration: 90ms; }

@media (max-width: 1060px) {
  .upload-stage { min-height: 330px; }
}

@media (max-width: 720px) {
  .upload-stage { min-height: 230px; }
  .brief-field textarea { min-height: 96px; }
  .tool-field .custom-select-menu { min-width: 100%; max-width: 100%; }
  .tool-field:last-child .custom-select-menu { left: 0; right: 0; }
}

/* Final cascade: quality, layering, and compact project controls */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

.generator-studio { z-index: 40; }
.brief-panel { position: relative; z-index: 80; }
.tool-rack { z-index: 300; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.tool-field {
  min-height: 68px;
  padding: 8px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1px 7px;
  overflow: visible;
  border-radius: 16px;
  --control-base: #e7e7e4;
}
.tool-field:has(.custom-select.is-open) { z-index: 1000; }
.tool-field .tool-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 16px;
}
.tool-field .custom-select-trigger { min-height: 24px; font-size: 10px; }
.tool-field .custom-select-arrow { width: 22px; height: 22px; font-size: 16px; }
.tool-field .custom-select-menu { z-index: 10000; }
.tool-field.is-fluid-active .tool-icon {
  color: #fff;
  background: rgba(255,255,255,0.17);
}
.tool-field.is-fluid-active .tool-copy small,
.tool-field.is-fluid-active .custom-select-trigger { color: #fff; }
.tool-field.is-fluid-active .custom-select-arrow { color: var(--accent); background: #fff; }
.ideas-strip { position: relative; z-index: 1; overflow: visible; }
.ideas-carousel {
  padding: 14px 14px 18px;
  margin: -10px -14px -16px;
  overflow-x: auto;
  overflow-y: hidden;
}
.idea-template { box-shadow: 0 0 0 rgba(20,20,22,0); }
.idea-template.is-fluid-active,
.idea-template:hover { box-shadow: 0 10px 24px rgba(20,20,22,0.12); }

.modal-plans .plan-card {
  position: relative;
  overflow: hidden;
  --control-base: #fff;
  --control-fluid: var(--accent);
  background-image: radial-gradient(
    circle at var(--fluid-x) var(--fluid-y),
    var(--control-fluid) 0 var(--fluid-radius),
    transparent calc(var(--fluid-radius) + 0.75px)
  );
  background-color: var(--control-base);
  transition: --fluid-radius 560ms cubic-bezier(0.16,1,0.3,1), color 180ms ease, border-color 180ms ease, box-shadow 240ms ease;
}
.modal-plans .plan-card.is-fluid-active { color: #fff; border-color: rgba(var(--accent-rgb),0.72); }
.modal-plans .plan-card.is-fluid-active .label,
.modal-plans .plan-card.is-fluid-active .lead,
.modal-plans .plan-card.is-fluid-active strong,
.modal-plans .plan-card.is-fluid-active .list-row,
.modal-plans .plan-card.is-fluid-active .card-foot { color: #fff !important; }
.modal-plans .plan-card.is-fluid-active .tag {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.15);
}
.modal-plans .plan-card.is-fluid-active .card-foot { border-top-color: rgba(255,255,255,0.22); }
.modal-plans .plan-card.is-fluid-active .btn.primary { color: #151516 !important; background-color: #fff; }
.modal-plans .plan-card .btn.primary.is-fluid-active { color: #fff !important; background-color: #151516; }

.project-date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.results-grid .result-card { padding: 11px; border-radius: 18px; }
.project-preview { border-radius: 14px; }
.project-preview img,
.project-preview.mock-preview { aspect-ratio: 4 / 3; }
.project-card-heading { gap: 6px; margin-top: 9px; }
.project-card-heading h3 { font-size: 14px; }
.result-card .mini-copy { margin-top: 6px; font-size: 11px; line-height: 1.4; }
.project-icon-action { width: 26px; height: 26px; }
.project-icon-action .material-symbols-outlined { font-size: 15px; }
.recent-project.is-removing,
.result-card.is-removing { pointer-events: none; animation: project-remove 180ms cubic-bezier(0.55,0,0.45,1) forwards; }
@keyframes project-remove {
  to { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

.compact-modal .modal-card { width: min(430px, 100%); }
.delete-project-card { overflow: hidden; }
.delete-project-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  color: #b4233a;
  background: rgba(180,35,58,0.1);
}
.delete-project-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.delete-project-actions .btn { justify-content: center; }
.delete-confirm-button { color: #fff; background-color: #151516; }

@media (max-width: 900px) and (min-width: 721px) {
  .tool-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .tool-rack { grid-template-columns: 1fr; }
  .tool-field { min-height: 62px; }
  .project-date-grid { grid-template-columns: 1fr; }
}

/* Vitrina brand and compact workbench */
.brand { min-width: 164px; }
.brand img { width: 142px; height: auto; display: block; }
.brand::before { display: none; }
.brand .brand-mark { display: none; }

.product-sidebar { display: grid; gap: 12px; }
.account-side-panel { display: grid; gap: 8px; padding: 10px; }
.account-summary {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 17px;
  color: var(--ink); background: transparent; text-align: left; cursor: pointer;
}
.account-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,20,22,.07); }
.account-identity { min-width: 0; display: grid; gap: 2px; }
.account-identity strong, .account-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: 13px; }
.account-identity small { color: var(--muted); font-size: 10px; }
.account-summary > .material-symbols-outlined { color: var(--muted); font-size: 17px; }
.account-nav { display: grid; gap: 3px; }
.side-link.liquid-control { --control-base: transparent; --control-fluid: var(--accent); }
.side-link.liquid-control.is-fluid-active,
.side-link.liquid-control:hover { color: #fff; background-color: var(--control-base); transform: none; }
.side-link.active,
.side-link.active.liquid-control:not(.is-fluid-active) { color: #fff; background-color: #151516; }
.side-link.active:hover { background-color: #151516; }

#creditsButton.liquid-control, #refreshBtn.liquid-control { --control-fluid: var(--accent); }
#creditsButton.liquid-control.is-fluid-active, #refreshBtn.liquid-control.is-fluid-active { color: #fff; border-color: rgba(var(--accent-rgb),.85); }

.tool-field.liquid-control {
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
  background-color: var(--control-base);
  background-repeat: no-repeat;
}
.tool-field.liquid-control.is-fluid-active { border-color: rgba(var(--accent-rgb),.78); box-shadow: 0 14px 34px rgba(var(--accent-rgb),.15); }
.tool-field.liquid-control.is-fluid-active .tool-icon { color: #fff; background: rgba(255,255,255,.16); }
.tool-field.liquid-control.is-fluid-active .tool-copy small { color: rgba(255,255,255,.78); }
.tool-field.liquid-control.is-fluid-active .custom-select-arrow { color: var(--accent); background: #fff; }
.tool-field .custom-select-trigger { display: flex; align-items: center; justify-content: space-between; }
.custom-select-value { min-width: 0; overflow: visible; }
.custom-select-value-track { display: inline-flex; align-items: center; min-width: 22px; }
.select-current-icon { color: var(--ink); font-size: 18px; }
.tool-field.is-fluid-active .select-current-icon { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.custom-select-option {
  min-height: 52px; display: grid; grid-template-columns: auto 24px minmax(0,1fr) auto; align-items: center;
  gap: 9px; padding: 8px 10px; border-radius: 12px;
}
.custom-select-option .option-leading { color: var(--accent); font-size: 19px; }
.option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.option-preview { width: 34px; height: 34px; border-radius: 10px; display: block; background: #e9eefb; box-shadow: inset 0 0 0 1px rgba(20,20,22,.06); }
.option-preview-studio { background: #dce7ff; position: relative; }
.option-preview-studio::after { content: ""; position: absolute; inset: 8px; border: 5px solid #151516; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #065dfd; }
.option-preview-showcase { background: #151516; position: relative; }
.option-preview-showcase::after { content: ""; position: absolute; inset: 8px; border: 2px solid #fff; border-top: 9px solid #065dfd; border-radius: 5px; }
.option-preview-interior { background: #eae6dd; position: relative; }
.option-preview-interior::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 13px; border-radius: 4px; background: #6b584f; box-shadow: 13px -11px 0 -4px #065dfd; }
.option-preview-info { background: #e6edff; position: relative; }
.option-preview-info::after { content: ""; position: absolute; inset: 9px 7px; border-radius: 3px; background: repeating-linear-gradient(90deg, #065dfd 0 4px, transparent 4px 7px); }
.option-preview-social { background: #065dfd; position: relative; }
.option-preview-social::after { content: ""; position: absolute; width: 12px; height: 12px; top: 6px; right: 6px; border-radius: 50%; background: #fff; box-shadow: -12px 12px 0 -2px #151516; }
.option-preview-mini { background: #e6edff; }
.option-preview-pro { background: #065dfd; box-shadow: inset 12px -12px 0 #dce7ff; }
.option-preview-max { background: #151516; box-shadow: inset 0 0 0 2px #065dfd; }
.option-brands { justify-self: end; display: flex; flex-wrap: wrap; justify-content: end; gap: 3px; max-width: 118px; }
.option-brands i { padding: 3px 5px; border-radius: 7px; color: var(--muted); background: rgba(20,20,22,.05); font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.custom-select-option[aria-selected="true"] .option-brands i { color: var(--accent); background: rgba(var(--accent-rgb),.1); }
.tool-field:has(select[name="quantity"]) .custom-select-option { margin: 3px 0; border: 1px solid rgba(20,20,22,.06); background: rgba(20,20,22,.025); }

.generation-price { margin-right: auto; color: var(--ink); background: rgba(255,255,255,.72); }
.generation-price .material-symbols-outlined { color: var(--accent); }
.generator-footer { justify-content: flex-end; }
.generate-button { margin-left: 0; }
.upload-stage.is-fluid-active .upload-action { color: #fff; background: #151516; }

.idea-template.liquid-control { --control-fluid: var(--accent); }
.idea-template.liquid-control.is-fluid-active,
.idea-template.liquid-control:hover { color: #fff; border-color: rgba(var(--accent-rgb),.8); }
.idea-template.is-fluid-active .idea-template-copy small,
.idea-template:hover .idea-template-copy small { color: rgba(255,255,255,.72); }

.modal-plans .plan-card.is-fluid-active .btn.primary { color: #fff !important; background: #151516; }
.modal-plans .plan-card.is-fluid-active .btn.primary.is-fluid-active { color: #151516 !important; background: #fff; }
.plan-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.plan-quality-grid span { display: grid; gap: 2px; padding: 7px; border-radius: 10px; background: rgba(20,20,22,.045); text-align: center; }
.plan-quality-grid b { font-size: 10px; text-transform: uppercase; }
.plan-quality-grid small { font-size: 11px; font-variant-numeric: tabular-nums; }
.modal-plans .plan-card.is-fluid-active .plan-quality-grid span { background: rgba(255,255,255,.14); }

.avatar-picker-card { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: rgba(230,230,228,.72); }
.avatar-picker-current img { width: 64px; height: 64px; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.84); }
.avatar-picker-card strong { font-size: 14px; }
.avatar-picker-card p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.avatar-picker-options { grid-column: 1 / -1; display: flex; gap: 7px; }
.avatar-option { width: 36px; height: 36px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.avatar-option img { width: 100%; height: 100%; object-fit: cover; }
.avatar-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12); }
.profile-usage { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.profile-usage span { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: rgba(230,230,228,.72); }
.profile-usage strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.profile-usage small { color: var(--muted); font-size: 10px; }
.billing-ledger .list-row > span:first-child { display: grid; gap: 3px; }
.billing-ledger .list-row small { color: var(--muted); font-size: 10px; }

@media (max-width: 1060px) {
  .product-sidebar { display: flex; }
  .account-side-panel { display: flex; padding: 6px; }
  .account-summary { width: 52px; min-height: 46px; grid-template-columns: 1fr; padding: 5px; }
  .account-summary .account-identity, .account-summary > .material-symbols-outlined { display: none; }
  .account-avatar { width: 36px; height: 36px; }
  .account-nav { display: flex; }
  .account-nav .side-link { width: auto; min-height: 46px; font-size: 0; }
  .account-nav .side-link .material-symbols-outlined { font-size: 20px; }
}

@media (max-width: 720px) {
  .brand { min-width: 112px; }
  .brand img { width: 108px; }
  .generation-price { align-self: flex-start; }
  .custom-select-option { grid-template-columns: auto 22px minmax(0,1fr); }
  .option-brands { grid-column: 3; justify-self: start; justify-content: start; max-width: none; margin-top: -5px; }
  .avatar-picker-card { grid-template-columns: 60px minmax(0,1fr); }
  .avatar-picker-current img { width: 54px; height: 54px; }
}

/* Workspace refinement: profile, select density, and modal actions */
.app-topbar { min-height: 94px; height: 94px; }
.brand { min-width: 174px; }
.brand img { width: 158px; }
.product-layout { margin-top: 4px; }
.product-sidebar { top: 86px; }
.generator-main { gap: 14px; }
.ideas-strip { margin-top: -4px; }

.account-side-panel .side-link { min-height: 42px; padding: 7px 10px; border: 0; box-shadow: none; background-color: transparent; }
.account-side-panel .side-link.liquid-control { --control-fluid: var(--accent); }
.account-summary.liquid-control { --control-fluid: var(--accent); }
.account-summary.liquid-control.is-fluid-active { color: #fff; }
.account-summary.liquid-control.is-fluid-active .account-identity small,
.account-summary.liquid-control.is-fluid-active > .material-symbols-outlined { color: rgba(255,255,255,.76); }
.account-summary > .material-symbols-outlined { transition: transform 180ms cubic-bezier(.23,1,.32,1), color 180ms ease; }
.account-summary.is-fluid-active > .material-symbols-outlined { transform: translateX(3px); color: #fff; }
.account-summary.is-pressing { transform: scale(.975); }

.upload-action { color: var(--ink); background: rgba(20,20,22,.07); }
.upload-stage.is-fluid-active .upload-action { color: var(--ink); background: rgba(255,255,255,.76); }
.upload-action.liquid-control { --control-base: rgba(20,20,22,.07); --control-fluid: #151516; }
.upload-action.liquid-control.is-fluid-active { color: #fff; background-color: var(--control-base); }

.toast { color: #fff; background: var(--accent); box-shadow: 0 18px 42px rgba(var(--accent-rgb),.28); }
.toast .material-symbols-outlined { color: #fff; }

.tool-rack { gap: 8px; }
.tool-field { border-radius: 17px; }
.tool-field .custom-select-trigger { min-height: 27px; }
.select-current-format { margin-left: 6px; color: var(--ink); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tool-field.is-fluid-active .select-current-format { color: #fff; }
.custom-select-menu { scrollbar-width: none; }
.custom-select-menu::-webkit-scrollbar { display: none; }
.custom-select-option { min-height: 46px; gap: 8px; }
.custom-select-option:not(:has(.option-preview)) { grid-template-columns: 22px minmax(0,1fr) auto; }
.custom-select-option .option-leading { font-size: 18px; }
.option-credit { display: inline-flex; align-items: center; gap: 3px; justify-self: end; color: var(--muted); font-size: 11px; font-weight: 800; }
.option-credit .material-symbols-outlined { color: var(--accent); font-size: 15px; }
.custom-select-option[aria-selected="true"] .option-credit { color: var(--accent); }
.tool-field:has(select[name="quantity"]) .custom-select-menu { left: auto; right: 0; width: 66px; min-width: 66px; padding: 4px; }
.tool-field:has(select[name="quantity"]) .custom-select-option { min-height: 42px; margin: 2px 0; display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; border-radius: 10px; }
.tool-field:has(select[name="quantity"]) .custom-select-option .option-leading { font-size: 20px; }
.tool-field:has(select[name="quantity"]) .custom-select-option .sr-only { position: absolute; }

.modal-scroll-card { overflow: visible; }
.modal-scroll-card::after { content: ""; position: absolute; top: -1px; right: -1px; z-index: 2; width: 132px; height: 70px; border-bottom-left-radius: 38px; background: rgba(230,230,228,.78); backdrop-filter: blur(16px); pointer-events: none; }
.modal-corner-actions { position: absolute; top: -22px; right: -22px; z-index: 5; display: flex; align-items: center; gap: 7px; }
.modal-corner-actions .modal-close,
.modal-corner-actions .btn { position: relative; top: auto; right: auto; width: 42px; min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.modal-corner-actions .modal-close.liquid-control { --control-fluid: #151516; }
.modal-corner-actions .modal-close.is-fluid-active { color: #fff; }
#refreshJobsBtn.liquid-control { --control-fluid: var(--accent); }
#refreshJobsBtn.liquid-control.is-fluid-active { color: #fff; }
.modal-heading-row { padding-right: 76px; }

.profile-modal-card { width: min(620px, 100%) !important; }
.profile-modal-card::after { width: 82px; }
.profile-form { gap: 12px; }
.profile-identity-card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 14px 34px rgba(20,20,22,.07); }
.profile-cover { height: 138px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 20px; background: var(--accent); }
.profile-cover img { width: 172px; height: auto; filter: brightness(0) invert(1); opacity: .94; }
.profile-identity-row { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: end; gap: 13px; padding: 0 18px; margin-top: -34px; }
.profile-identity-row .avatar-picker-current { width: 74px; height: 74px; padding: 3px; border-radius: 50%; background: #fff; }
.profile-identity-row .avatar-picker-current img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.profile-identity-row .label { color: var(--muted); font-size: 10px; }
.profile-identity-row h2 { margin-top: 5px; font-size: 24px; line-height: 1.05; }
.profile-identity-row p { margin-top: 5px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity-card .profile-usage { margin: 18px; }
.profile-usage { gap: 6px; }
.profile-usage span { min-height: 58px; padding: 10px; border-radius: 13px; background: #f0f0ee; }
.profile-usage strong { font-size: 18px; }
.avatar-picker-card { grid-template-columns: 1fr; gap: 9px; padding: 15px; border-radius: 19px; }
.avatar-picker-options { grid-column: auto; }
.profile-modal-card .form-grid { gap: 9px; }
.profile-modal-card .form-grid label { font-size: 11px; font-weight: 800; }
.profile-modal-card .modal-form-footer { padding-top: 2px; }
.profile-modal-card .modal-form-footer .btn { width: 100%; justify-content: center; }

@media (max-width: 1060px) {
  .product-layout { margin-top: 0; }
  .product-sidebar { top: auto; }
}

@media (max-width: 720px) {
  .brand { min-width: 132px; }
  .brand img { width: 126px; }
  .modal-scroll-card::after { display: none; }
  .modal-corner-actions { top: 14px; right: 14px; }
  .profile-cover { height: 116px; padding: 16px; }
  .profile-cover img { width: 142px; }
  .profile-identity-row { padding-inline: 14px; }
}

/* Account controls and compact idea rail */
.ideas-strip { display: flex; align-items: center; gap: 12px; margin-top: -12px; }
.ideas-heading { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 5px; }
.ideas-heading > .material-symbols-outlined { color: var(--accent); font-size: 18px; }
.ideas-carousel { flex: 1; min-width: 0; }

.account-summary.liquid-control,
.side-action.liquid-control {
  --control-base: transparent;
  --control-fluid: var(--accent);
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
  background-color: var(--control-base);
  background-repeat: no-repeat;
}
.account-summary.liquid-control.is-fluid-active,
.side-action.liquid-control.is-fluid-active { color: #fff; }
.side-action.liquid-control.is-fluid-active .material-symbols-outlined { color: #fff; }

/* A shaped corner recess keeps the action circles visually seated in the card. */
.modal-scroll-card::after { top: 0; right: 0; width: 136px; height: 72px; border-bottom-left-radius: 44px; background: rgba(230,230,228,.82); }
.modal-corner-actions { top: 10px; right: 10px; z-index: 6; }
.modal-corner-actions .modal-close,
.modal-corner-actions .btn { box-shadow: 0 0 0 5px rgba(230,230,228,.82); }
.profile-modal-card::after { width: 72px; }

.profile-identity-row { grid-template-columns: 74px minmax(0,1fr); align-items: center; padding-bottom: 14px; }
.profile-name-line { min-width: 0; display: grid; gap: 9px; }
.profile-identity-row h2 { margin: 0; }
.avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 3px solid #fff; border-radius: 50%; color: #fff; background: #151516; cursor: pointer; }
.avatar-edit .material-symbols-outlined { font-size: 14px; }
.avatar-picker-current { position: relative; }
.avatar-picker-popover { display: none; min-width: 0; padding: 10px; overflow-x: auto; border-radius: 18px; background: #e7e7e4; box-shadow: inset 0 0 0 1px rgba(20,20,22,.06); }
.avatar-picker-popover.is-open { display: block; animation: picker-in 180ms cubic-bezier(.23,1,.32,1); }
@keyframes picker-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.avatar-picker-options { display: flex; width: max-content; gap: 8px; }
.avatar-option { width: 48px; height: 48px; flex: 0 0 auto; }
.achievement-rail { display: flex; align-items: start; gap: 9px; min-width: 0; overflow-x: auto; }
.achievement { width: 22px; min-width: 22px; display: grid; justify-items: center; gap: 4px; color: rgba(20,20,22,.24); }
.achievement i { font-size: 17px; font-style: normal; }
.achievement b { width: 4px; height: 4px; border-radius: 50%; background: rgba(20,20,22,.16); }
.achievement.unlocked { color: #151516; }
.achievement.unlocked b { background: var(--accent); }
.achievement.featured { color: var(--accent); }
.achievement.featured b { visibility: hidden; }
.profile-identity-card .profile-usage { display: grid; grid-template-columns: repeat(2,1fr); margin: 0 18px 18px; }
.profile-usage span { min-height: 50px; padding: 8px 10px; }
.profile-usage strong { font-size: 16px; }
.profile-usage small { font-size: 9px; }
.profile-modal-card .form-grid { grid-template-columns: 1fr 1fr; }
.account-field-action { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 6px; align-items: center; }
.account-field-action .btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.account-security { display: grid; gap: 5px; }
.account-security .side-action { min-height: 44px; padding: 7px 9px; border-radius: 14px; }
.account-security .side-action > .material-symbols-outlined:last-child { margin-left: auto; color: var(--muted); }
.danger-action { color: #b4233a; }
.danger-action .material-symbols-outlined { color: #b4233a; }
.danger-action.liquid-control { --control-fluid: #b4233a; }
.danger-action.liquid-control.is-fluid-active { color: #fff; }
.account-action-form { display: grid; gap: 12px; }
.account-action-form input { background: rgba(230,230,228,.72); border-color: rgba(20,20,22,.06); }
.account-action-form .btn.primary { justify-content: center; }

@media (max-width: 720px) {
  .ideas-strip { display: grid; gap: 3px; margin-top: -6px; }
  .ideas-heading { padding-inline: 4px; }
  .profile-modal-card .form-grid { grid-template-columns: 1fr; }
  .profile-identity-card .profile-usage { margin-inline: 14px; }
  .modal-scroll-card::after { width: 72px; }
}

/* Alignment pass: plans, workbench controls, and ordinary modal corners. */
.modal-scroll-card { overflow-y: auto; overflow-x: hidden; }
.modal-scroll-card::after { display: none; }
.modal-corner-actions { top: 18px; right: 18px; }
.modal-corner-actions .modal-close,
.modal-corner-actions .btn { box-shadow: none; }
.modal-heading-row { padding-right: 104px; }

.modal-plans { align-items: stretch; }
.modal-plans .plan-card {
  min-height: 480px;
  display: grid;
  grid-template-rows: auto minmax(54px, 1fr) 72px auto 1fr auto;
  gap: 12px;
}
.modal-plans .plan-card > div[style] { min-height: 72px; display: flex; align-items: center; margin-top: 0 !important; }
.modal-plans .plan-card .list { display: grid; align-content: start; gap: 8px; }
.modal-plans .plan-card .card-foot { align-self: end; margin-top: 0; }
.modal-plans .plan-card .lead { margin-top: 0 !important; }
.plan-quality-grid { align-self: start; }

.tool-rack { gap: 9px; }
.tool-field { min-height: 84px; display: block; padding: 9px 10px; }
.tool-field .tool-copy { position: absolute; top: 9px; left: 10px; z-index: 2; }
.tool-field .tool-icon { position: absolute; top: 35px; left: 10px; z-index: 2; }
.tool-field .custom-select { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tool-field .custom-select-trigger { position: relative; width: 100%; height: 100%; min-height: 84px; display: flex; align-items: center; justify-content: center; padding: 0 38px; text-align: center; }
.tool-field .custom-select-value { display: inline-flex; align-items: center; justify-content: center; }
.tool-field .custom-select-value-track { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tool-field .custom-select-arrow { position: absolute; top: 50%; right: 9px; margin: 0; transform: translateY(-50%); }
.tool-field .custom-select.is-open .custom-select-arrow { transform: translateY(-50%) rotate(180deg); }
.tool-field .custom-select-menu { top: calc(100% + 13px); }
.select-current-icon { font-size: 20px; }
.select-current-format { margin-left: 0; font-size: 12px; }

.tool-field .custom-select-option[aria-selected="true"] { color: #fff; background: #151516; }
.tool-field .custom-select-option[aria-selected="true"] .option-leading,
.tool-field .custom-select-option[aria-selected="true"] .option-credit,
.tool-field .custom-select-option[aria-selected="true"] .option-credit .material-symbols-outlined { color: #fff; }
.tool-field .custom-select-option:hover:not([aria-selected="true"]) { color: #fff; background: var(--accent); }
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-leading,
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-credit,
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-credit .material-symbols-outlined,
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-brands i { color: #fff; }
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-brands i { background: rgba(255,255,255,.16); }

.ideas-strip { width: calc(100% + 268px); margin-left: -268px; gap: 40px; padding-left: 0; }
.ideas-heading { margin-left: 0; padding-left: 5px; }
.ideas-carousel { margin-left: 0; }
.ideas-carousel::-webkit-scrollbar { display: none; }

.brand { min-width: 184px; }
.brand img { width: 168px; }
.brand.liquid-control,
.brand.liquid-control.is-fluid-active {
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: scale(1.035);
}
.brand.liquid-control.is-pressing { transform: scale(.97); }
.brand:focus-visible { outline: none; }

@media (max-width: 1060px) {
  .ideas-strip { width: 100%; margin-left: 0; }
}

@media (max-width: 720px) {
  .ideas-strip { width: 100%; margin-left: 0; gap: 3px; }
  .brand { min-width: 140px; }
  .brand img { width: 134px; }
  .tool-field { min-height: 80px; }
  .tool-field .custom-select-menu { top: calc(100% + 10px); }
  .modal-plans .plan-card { min-height: auto; }
}

/* Contextual typewriter examples in empty workbench fields. */
.brief-field .brief-control::placeholder { color: rgba(20,20,22,.48); opacity: 1; }
.brief-field.is-fluid-active .brief-control::placeholder { color: rgba(255,255,255,.74); }

/* Profile: the cover is one calm surface; every editable detail lives in its own tile below. */
.profile-modal-card { padding: 12px; }
.profile-modal-card .modal-corner-actions { top: 18px; right: 18px; }
.profile-modal-card .modal-close { --control-base: #fff; background-color: #fff; box-shadow: 0 8px 22px rgba(20,20,22,.14); }
.profile-modal-card .modal-close.is-fluid-active { color: #fff; }
.profile-modal-card .profile-form { gap: 10px; }
.profile-cover-card { position: relative; min-height: 160px; padding-bottom: 30px; }
.profile-cover-card .profile-cover { height: 132px; padding: 18px; overflow: hidden; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.profile-cover-card .profile-cover img { width: 166px; }
.profile-cover-card .avatar-picker-current { position: absolute; left: 20px; bottom: 0; width: 76px; height: 76px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px rgba(20,20,22,.14); }
.profile-cover-card .avatar-picker-current img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; }
.profile-summary-card { display: grid; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(20,20,22,.06); }
.profile-summary-card .profile-name-line { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding-top: 0; }
.profile-summary-card h2 { margin: 0; font-size: 24px; line-height: 1; font-weight: 800; }
.profile-summary-card .achievement-rail { justify-content: flex-end; max-width: 232px; }
.profile-summary-card .profile-usage { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 0; }
.profile-summary-card .profile-usage span { min-height: 50px; padding: 8px 10px; }

@media (max-width: 720px) {
  .profile-modal-card { padding: 10px; }
  .profile-cover-card { min-height: 146px; padding-bottom: 28px; }
  .profile-cover-card .profile-cover { height: 118px; padding: 16px; border-radius: 19px; }
  .profile-cover-card .profile-cover img { width: 136px; }
  .profile-cover-card .avatar-picker-current { left: 16px; width: 68px; height: 68px; }
  .profile-cover-card .avatar-picker-current img { width: 60px; height: 60px; }
  .profile-summary-card { padding: 14px; }
  .profile-summary-card .profile-name-line { grid-template-columns: 1fr; gap: 12px; }
  .profile-summary-card .achievement-rail { justify-content: flex-start; max-width: 100%; }
}

/* Final workbench composition and soft liquid select states. */
.app-topbar { position: relative; display: block; }
.app-topbar .brand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 260ms cubic-bezier(.23,1,.32,1);
}
.app-topbar .top-actions {
  position: absolute;
  top: 50%;
  left: max(24px, calc((100% - 1380px) / 2));
  right: max(24px, calc((100% - 1380px) / 2));
  justify-content: flex-start;
  transform: translateY(-50%);
}
.app-topbar .header-login { position: absolute; right: 0; }
.brand.liquid-control { transform: translate(-50%, -50%) scale(1); }
.brand:hover,
.brand.liquid-control.is-fluid-active { transform: translate(-50%, -50%) scale(1.045); }
.brand.liquid-control.is-pressing { transform: translate(-50%, -50%) scale(.975); }

.ideas-strip { width: 100%; margin-left: 0; }
.ideas-heading { margin-left: 0; padding-left: 5px; }
.ideas-carousel { margin: -10px 0 -16px; padding: 14px 0 18px 14px; }
.generator-main { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.generator-studio { width: 100%; min-width: 0; }

.tool-field > .tool-icon { display: none; }
.tool-field .tool-copy { left: 16px; }
.tool-field .custom-select-trigger { justify-content: flex-start; padding: 14px 38px 0 16px; }
.tool-field .custom-select-value,
.tool-field .custom-select-value-track { justify-content: flex-start; }
.tool-field .select-current-icon { font-size: 31px; }
.tool-field .select-current-format { font-size: 14px; }

.upload-reset {
  width: max-content;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 180ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
.upload-reset:hover { color: var(--accent); }
.upload-reset:active { transform: scale(.97); }
.upload-stage.is-fluid-active .upload-reset { color: rgba(255,255,255,.78); }
.upload-stage.has-files .upload-copy { animation: upload-copy-in 220ms cubic-bezier(.23,1,.32,1); }
.upload-stage.is-dragging { border-color: rgba(var(--accent-rgb),.78); box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb),.16), 0 18px 42px rgba(var(--accent-rgb),.14); }
@keyframes upload-copy-in {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tool-field .custom-select-option.liquid-control {
  --control-base: rgba(248,248,247,.8);
  --control-fluid: rgba(6,93,253,.78);
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
  background-color: var(--control-base);
  box-shadow: none;
}
.tool-field .custom-select-option.liquid-control.is-fluid-active { color: #fff; box-shadow: none; }
.tool-field .custom-select-option[aria-selected="true"] { color: #fff; background: rgba(21,21,22,.88); }
.tool-field .custom-select-option[aria-selected="true"].is-surface-control { --control-fluid: rgba(21,21,22,.84); }
.tool-field .custom-select-option:hover:not([aria-selected="true"]) { color: inherit; background-color: var(--control-base); }
.tool-field .custom-select-option.liquid-control:hover:not([aria-selected="true"]) {
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
  background-color: var(--control-base);
}
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-leading,
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-credit,
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-credit .material-symbols-outlined { color: inherit; }
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-leading,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-label,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit .material-symbols-outlined { color: #fff; }
.tool-field .custom-select-option[aria-selected="true"] .option-leading,
.tool-field .custom-select-option[aria-selected="true"] .option-credit,
.tool-field .custom-select-option[aria-selected="true"] .option-credit .material-symbols-outlined { color: rgba(255,255,255,.92); }

.upload-action.liquid-control.is-surface-control { --control-fluid: #151516; }
.upload-action.liquid-control.is-fluid-active { color: #fff; background-color: rgba(21,21,22,.9); }

#refreshJobsBtn { color: var(--ink); background: rgba(20,20,22,.06); }
.modal-corner-actions .modal-close,
.modal-corner-actions .btn { width: 42px; min-width: 42px; height: 42px; flex: 0 0 42px; aspect-ratio: 1; border-radius: 50%; }

.ideas-strip { margin-top: -6px; }
.ideas-carousel-shell { position: relative; flex: 1; min-width: 0; overflow: visible; }
.ideas-carousel-shell::before,
.ideas-carousel-shell::after { content: none; }
.ideas-carousel {
  width: 100%;
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,.92) calc(100% - 48px), rgba(0,0,0,.52) calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), rgba(0,0,0,.92) calc(100% - 48px), rgba(0,0,0,.52) calc(100% - 22px), transparent 100%);
}
.ideas-carousel.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.48) 22px, rgba(0,0,0,.9) 48px, #000 66px, #000 calc(100% - 64px), rgba(0,0,0,.92) calc(100% - 48px), rgba(0,0,0,.52) calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.48) 22px, rgba(0,0,0,.9) 48px, #000 66px, #000 calc(100% - 64px), rgba(0,0,0,.92) calc(100% - 48px), rgba(0,0,0,.52) calc(100% - 22px), transparent 100%);
}
.ideas-carousel.is-at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.48) 22px, rgba(0,0,0,.9) 48px, #000 66px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.48) 22px, rgba(0,0,0,.9) 48px, #000 66px, #000 100%);
}
.ideas-carousel::-webkit-scrollbar { display: none; width: 0; height: 0; }

@media (max-width: 1060px) {
  .app-topbar .top-actions { left: 14px; right: 14px; }
  .ideas-strip { width: 100%; }
}

@media (max-width: 720px) {
  .app-topbar .brand { left: 50%; }
  .tool-field .select-current-icon { font-size: 28px; }
}

/* Header generation timeline */
.app-topbar .brand {
  left: max(24px, calc((100% - 1380px) / 2));
  transform: translateY(-50%) scale(1);
}
.brand.liquid-control { transform: translateY(-50%) scale(1); }
.brand:hover,
.brand.liquid-control.is-fluid-active { transform: translateY(-50%) scale(1.045); }
.brand.liquid-control.is-pressing { transform: translateY(-50%) scale(.975); }
.app-topbar .top-actions {
  left: auto;
  right: max(24px, calc((100% - 1380px) / 2));
  justify-content: flex-end;
}
.app-topbar .header-login { position: static; right: auto; }

.header-generation-progress {
  position: fixed;
  top: 47px;
  left: 50%;
  z-index: 4100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) translateY(-5px);
  transition: opacity 220ms cubic-bezier(.23,1,.32,1), transform 280ms cubic-bezier(.23,1,.32,1), visibility 0s linear 280ms;
  pointer-events: none;
}
.header-generation-progress.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) translateY(0);
  transition-delay: 0s;
}
.header-progress-stage {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(20,20,22,.34);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(20,20,22,.05);
  opacity: 0;
  transform: scale(0);
  transition: opacity 180ms cubic-bezier(.23,1,.32,1), color 220ms ease, background-color 220ms ease, transform 480ms cubic-bezier(.34,1.56,.64,1);
}
.header-progress-stage .material-symbols-outlined { font-size: 18px; }
.header-progress-stage.is-visible { opacity: 1; transform: scale(1); }
.header-progress-stage.is-passed { color: #151516; }
.header-progress-stage.is-current { color: #fff; background: var(--accent); box-shadow: 0 8px 22px rgba(var(--accent-rgb),.2); }
.header-progress-link {
  width: 34px;
  height: 2px;
  flex: 0 0 34px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 160ms ease, transform 520ms cubic-bezier(.23,1,.32,1);
}
.header-progress-link.is-visible { opacity: .72; transform: scaleX(1); }
.header-progress-finale.is-visible { color: #fff; background: var(--accent); }
.header-progress-finale.is-celebrating { animation: progress-finale-pop 680ms cubic-bezier(.34,1.56,.64,1); }
.header-progress-finale.is-celebrating::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(var(--accent-rgb),.42);
  border-radius: 50%;
  animation: progress-finale-ring 900ms cubic-bezier(.16,.72,.2,1) both;
}
@keyframes progress-finale-pop {
  0% { transform: scale(0); }
  45% { transform: scale(1.82) rotate(-11deg); }
  72% { transform: scale(.86) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes progress-finale-ring {
  0% { opacity: 0; transform: scale(.2); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.25); }
}

.confetti-layer { position: fixed; inset: 0; z-index: 4000; overflow: visible; pointer-events: none; }
.confetti-layer i { position: fixed; display: block; border-radius: 1px; will-change: transform, opacity; }

/* Compact, softly highlighted workbench menus. */
.tool-field .custom-select-menu {
  --option-row: 46px;
  height: 164px;
  max-height: 164px;
  display: block;
  overflow: hidden;
  min-width: 300px;
  max-width: min(380px, calc(100vw - 40px));
  padding: 8px 38px 8px 8px;
}
.tool-field .custom-select-options {
  height: 148px;
  display: grid;
  gap: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.tool-field .custom-select-options::-webkit-scrollbar { display: none; }
.tool-field:has(select[name="quantity"]) .custom-select-menu {
  --option-row: 42px;
  height: 164px;
  max-height: 164px;
  width: 110px;
  min-width: 110px;
  padding: 8px 34px 8px 8px;
}
.tool-field:has(select[name="quantity"]) .custom-select-options { height: 148px; }
.custom-select-dots {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 24px;
  z-index: 4;
  display: grid;
  gap: 6px;
  place-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.custom-select-dots i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: #151516;
  opacity: var(--dot-opacity, .35);
  transform: scale(var(--dot-scale, .8));
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.23,1,.32,1);
}
.custom-select-dots i.is-current {
  opacity: 1;
  transform: scale(1.42);
  box-shadow: 0 0 0 3px rgba(21,21,22,.06);
}
.tool-field:has(select[name="quality"]) .custom-select-menu {
  min-width: 270px;
  width: 270px;
  max-width: min(340px, calc(100vw - 40px));
  padding: 8px;
}
.tool-field:has(select[name="quality"]) .custom-select-dots { display: none; }
.tool-field .custom-select-option.liquid-control {
  --control-base: rgba(248,248,247,.84);
  --control-fluid: rgba(6,93,253,.12);
  color: #38383c;
  border: 1px solid transparent;
}
.tool-field .custom-select-option[aria-selected="true"],
.tool-field .custom-select-option[aria-selected="true"].is-surface-control {
  --control-fluid: rgba(6,93,253,.1);
  color: #1e3158;
  background: rgba(6,93,253,.055);
  border-color: rgba(6,93,253,.24);
  box-shadow: none;
}
.tool-field .custom-select-option.liquid-control.is-fluid-active,
.tool-field .custom-select-option:hover {
  color: #1e3158;
  background-color: rgba(6,93,253,.1);
  border-color: rgba(6,93,253,.08);
}
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-leading,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-label,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit .material-symbols-outlined,
.tool-field .custom-select-option[aria-selected="true"] .option-leading,
.tool-field .custom-select-option[aria-selected="true"] .option-credit,
.tool-field .custom-select-option[aria-selected="true"] .option-credit .material-symbols-outlined { color: #1e3158; }
.generate-button.is-fluid-active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

/* Upload reset remains a quiet destructive text action. */
.upload-reset,
.upload-reset.liquid-control,
.upload-reset.liquid-control.is-fluid-active,
.upload-reset.liquid-control.is-fluid-exiting {
  color: var(--muted);
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.upload-reset:hover,
.upload-reset.liquid-control:hover,
.upload-stage.is-fluid-active .upload-reset:hover { color: #d92d42; }

/* Select states: outline for selection, soft wash for hover. */
.tool-field .custom-select-option,
.tool-field .custom-select-option.liquid-control {
  color: #27272a;
  background-color: transparent;
  border-color: transparent;
}
.tool-field .custom-select-option .option-leading,
.tool-field .custom-select-option .option-credit .material-symbols-outlined { color: #151516; }
.tool-field .custom-select-option[aria-selected="true"],
.tool-field .custom-select-option[aria-selected="true"].is-surface-control {
  color: #27272a;
  background: transparent;
  background-image: none;
  border-color: rgba(6,93,253,.28);
  box-shadow: inset 0 0 0 1px rgba(6,93,253,.08);
}
.tool-field .custom-select-option[aria-selected="true"] .option-leading,
.tool-field .custom-select-option[aria-selected="true"] .option-credit,
.tool-field .custom-select-option[aria-selected="true"] .option-credit .material-symbols-outlined { color: var(--accent); }
.tool-field .custom-select-option:hover,
.tool-field .custom-select-option.liquid-control.is-fluid-active {
  color: #27272a;
  background-color: rgba(6,93,253,.095);
  border-color: rgba(6,93,253,.08);
}
.tool-field .custom-select-option:hover .option-leading,
.tool-field .custom-select-option:hover .option-credit,
.tool-field .custom-select-option:hover .option-credit .material-symbols-outlined,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-leading,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit,
.tool-field .custom-select-option.liquid-control.is-fluid-active .option-credit .material-symbols-outlined { color: #151516; }
.tool-field .custom-select-option:hover:not([aria-selected="true"]) .option-brands i {
  color: #151516;
  background: rgba(21,21,22,.075);
}

@media (max-width: 1060px) {
  .app-topbar .brand { left: 14px; }
  .app-topbar .top-actions { right: 14px; }
}

@media (max-width: 720px) {
  .app-topbar .brand { left: 14px; }
  .brand img { width: 122px; }
  .brand { min-width: 128px; }
  .header-generation-progress {
    position: fixed;
    top: auto;
    bottom: 96px;
    width: min(350px, calc(100% - 28px));
    min-height: 54px;
    padding: 8px 12px;
    gap: 5px;
    border-radius: 28px;
    background: rgba(248,248,247,.9);
    box-shadow: 0 18px 46px rgba(20,20,22,.14);
    backdrop-filter: blur(18px);
    transform: translate(-50%, 12px);
  }
  .header-generation-progress.is-active { transform: translate(-50%, 0); }
  .header-progress-stage { width: 28px; height: 28px; flex-basis: 28px; }
  .header-progress-stage .material-symbols-outlined { font-size: 16px; }
  .header-progress-link { width: min(27px, 7vw); flex-basis: min(27px, 7vw); }
}

@media (prefers-reduced-motion: reduce) {
  .header-generation-progress,
  .header-progress-stage,
  .header-progress-link { transition-duration: 1ms !important; }
  .header-progress-finale.is-celebrating { animation-duration: 1ms; }
}

/* Keep the custom implementation dormant while the product uses native cursors. */
.liquid-control:not(.is-fluid-exiting) {
  transition-duration: 360ms, 140ms, 140ms, 220ms, 120ms;
}
.brief-field > span,
.brief-field input,
.brief-field textarea,
.tool-field .tool-copy,
.tool-field .select-current-icon { transition-duration: 120ms; }
#custom-cursor,
.cursor-droplet { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready,
  body.cursor-ready:has(dialog[open]) { cursor: auto !important; }
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready select,
  body.cursor-ready:has(dialog[open]) select,
  body.cursor-ready .upload-stage,
  body.cursor-ready .upload-stage * { cursor: pointer !important; }
  body.cursor-ready input,
  body.cursor-ready textarea { cursor: text !important; }
}

/* Active cursor mode: one round dot, no velocity satellites. */
#custom-cursor { display: block !important; }
.cursor-droplet { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready,
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready input,
  body.cursor-ready textarea,
  body.cursor-ready select,
  body.cursor-ready:has(dialog[open]),
  body.cursor-ready:has(dialog[open]) select,
  body.cursor-ready .upload-stage,
  body.cursor-ready .upload-stage * { cursor: none !important; }
}

/* Final upload reset treatment. */
.upload-reset,
.upload-reset.liquid-control,
.upload-reset.liquid-control.is-fluid-exiting {
  --control-base: rgba(20,20,22,.07);
  --control-fluid: #151516;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  margin-top: 12px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  color: var(--ink);
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  box-shadow: none !important;
}
.upload-reset .material-symbols-outlined { font-size: 21px; }
.upload-reset.liquid-control.is-fluid-active,
.upload-stage.is-fluid-active .upload-reset.liquid-control.is-fluid-active {
  color: #fff;
  background-color: var(--control-base) !important;
}

/* Fixed desktop chrome, uninterrupted cursor, and quieter support controls. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  body.cursor-ready,
  body.cursor-ready * { cursor: none !important; }
}
.liquid-control:not(.is-fluid-exiting) {
  transition-duration: 430ms, 180ms, 180ms, 250ms, 140ms;
  transition-timing-function: cubic-bezier(.2,.78,.22,1), ease, ease, cubic-bezier(.2,.78,.22,1), ease;
}
.support-side-panel { padding: 10px; }
.support-side-panel .side-nav { display: grid; gap: 3px; }
.support-side-panel .side-link {
  min-height: 42px;
  padding: 7px 10px;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}
.sidebar-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 10px;
  padding: 0 10px;
}
.sidebar-legal-link {
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  transition: color 160ms ease;
}
.sidebar-legal-link:hover { color: var(--ink); }

@media (min-width: 1061px) {
  .app-topbar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    z-index: 1800;
  }
  .product-layout { margin-top: 106px; }
  .product-sidebar {
    position: fixed;
    top: 96px;
    left: max(24px, calc((100vw - 1380px) / 2));
    width: 244px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .product-sidebar::-webkit-scrollbar { display: none; }
  .generator-main { grid-column: 2; }
}

/* Billing starts closer to its content; section headings share one exact type style. */
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 72px;
  padding-bottom: 0;
}
#billingModal .modal-heading,
#projectsModal .modal-heading {
  height: 72px;
}
#billingModal .modal-sticky-header::after,
#projectsModal .modal-sticky-header::after {
  bottom: -18px;
  height: 30px;
}
.billing-ledger h3 {
  margin: 0 0 18px;
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
}

/* Final interactive drawer layer. */
@media (min-width: 1061px) {
  .sidebar-brand-row .sidebar-brand-full,
  .sidebar-brand-row .sidebar-compact-mark {
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1);
    transform-origin: center;
  }
  .sidebar-brand-row .sidebar-brand-full {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
  .sidebar-brand-row .sidebar-compact-mark {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 24px !important;
    height: 24px;
    display: block !important;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
  }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-brand-full {
    display: block;
    opacity: 0;
    transform: scale(0);
  }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-compact-mark {
    display: block !important;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
  body.sidebar-transitioning .sidebar-brand-row .sidebar-brand-full,
  body.sidebar-transitioning .sidebar-brand-row .sidebar-compact-mark {
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
  }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand:hover .sidebar-brand-full { transform: scale(1.035); }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark { transform: translate(-50%,-50%) scale(1.1) !important; }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand.is-pressing .sidebar-brand-full { animation: brand-press-full 300ms cubic-bezier(.34,1.56,.64,1); }
  body.sidebar-collapsed .sidebar-brand-row .brand.is-pressing .sidebar-compact-mark { animation: brand-press-compact 300ms cubic-bezier(.34,1.56,.64,1); }

  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    --control-base: rgba(255,255,255,.9);
    --control-fluid: var(--accent);
    color: var(--ink);
    background-color: var(--control-base);
    background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
    transition-property: --fluid-radius, opacity, color, background-color, box-shadow !important;
  }
  .sidebar-collapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active {
    color: #fff;
    box-shadow: 0 14px 34px rgba(var(--accent-rgb),.18);
  }

  .sidebar-legal-link,
  .sidebar-legal-toggle {
    --control-base: rgba(255,255,255,.38);
    --control-fluid: var(--accent);
    border: 1px solid rgba(255,255,255,.72);
    color: var(--muted);
    background-color: var(--control-base);
    box-shadow: none;
  }
  .sidebar-legal-link {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
  }
  .sidebar-legal-link.liquid-control.is-fluid-active,
  .sidebar-legal-toggle.liquid-control.is-fluid-active {
    color: #fff;
    border-color: rgba(var(--accent-rgb),.78);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb),.14);
  }
}

@keyframes brand-press-full {
  0%,100% { transform: scale(1.035); }
  42% { transform: scale(.94); }
  72% { transform: scale(1.055); }
}
@keyframes brand-press-compact {
  0%,100% { transform: translate(-50%,-50%) scale(1.1); }
  42% { transform: translate(-50%,-50%) scale(.86); }
  72% { transform: translate(-50%,-50%) scale(1.14); }
}

/* Unified drawer controls, independent logo assets and softly animated carousel edges. */
@media (min-width: 1061px) {
  .sidebar-brand-row .brand {
    position: relative;
    overflow: visible;
  }
  .sidebar-brand-row .sidebar-brand-full,
  .sidebar-brand-row .sidebar-compact-mark {
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1);
    transform-origin: center;
  }
  .sidebar-brand-row .sidebar-brand-full {
    display: block;
    opacity: 1;
    transform: scale(1);
  }
  .sidebar-brand-row .sidebar-compact-mark {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 24px;
    height: 24px;
    display: block;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
  }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-brand-full {
    opacity: 0;
    transform: scale(0);
  }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-compact-mark {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
  body.sidebar-transitioning .sidebar-brand-row .sidebar-brand-full,
  body.sidebar-transitioning .sidebar-brand-row .sidebar-compact-mark {
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
  }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand:hover .sidebar-brand-full {
    transform: scale(1.035);
  }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark {
    transform: translate(-50%,-50%) scale(1.1) !important;
  }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand.is-pressing .sidebar-brand-full {
    animation: brand-press-full 300ms cubic-bezier(.34,1.56,.64,1);
  }
  body.sidebar-collapsed .sidebar-brand-row .brand.is-pressing .sidebar-compact-mark {
    animation: brand-press-compact 300ms cubic-bezier(.34,1.56,.64,1);
  }

  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    --control-base: rgba(255,255,255,.9);
    --control-fluid: var(--accent);
    color: var(--ink);
    background-color: var(--control-base);
    background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
    transition-property: --fluid-radius, opacity, color, background-color, box-shadow !important;
  }
  .sidebar-collapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active {
    color: #fff;
    box-shadow: 0 14px 34px rgba(var(--accent-rgb),.18);
  }
  .sidebar-collapse.is-morphing,
  body.sidebar-collapsed #sidebarCollapse.is-morphing {
    opacity: 0 !important;
    pointer-events: none;
  }

  .sidebar-legal-link,
  .sidebar-legal-toggle {
    --control-base: rgba(255,255,255,.38);
    --control-fluid: var(--accent);
    border: 1px solid rgba(255,255,255,.72);
    color: var(--muted);
    background-color: var(--control-base);
    box-shadow: none;
  }
  .sidebar-legal-link {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
  }
  .sidebar-legal-link.liquid-control.is-fluid-active,
  .sidebar-legal-toggle.liquid-control.is-fluid-active {
    color: #fff;
    border-color: rgba(var(--accent-rgb),.78);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb),.14);
  }
}

@keyframes brand-press-full {
  0%,100% { transform: scale(1.035); }
  42% { transform: scale(.94); }
  72% { transform: scale(1.055); }
}
@keyframes brand-press-compact {
  0%,100% { transform: translate(-50%,-50%) scale(1.1); }
  42% { transform: translate(-50%,-50%) scale(.86); }
  72% { transform: translate(-50%,-50%) scale(1.14); }
}

.ideas-carousel {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.ideas-carousel-shell::before,
.ideas-carousel-shell::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  z-index: 5;
  width: 76px;
  display: block;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.23,1,.32,1);
}
.ideas-carousel-shell::before {
  left: -1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(247,247,245,.98), rgba(247,247,245,.72) 38%, transparent 100%);
}
.ideas-carousel-shell::after {
  right: -1px;
  opacity: 1;
  background: linear-gradient(270deg, rgba(247,247,245,.98), rgba(247,247,245,.72) 38%, transparent 100%);
}
.ideas-carousel-shell:has(.ideas-carousel.is-scrolled)::before { opacity: 1; }
.ideas-carousel-shell:has(.ideas-carousel.is-at-end)::after { opacity: 0; }

/* Balanced compact rail and liquid ellipsis transition. */
@media (min-width: 1061px) {
  .sidebar-collapse,
  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-active {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: rgba(255,255,255,.88);
    box-shadow: 0 9px 24px rgba(20,20,22,.08);
  }
  .sidebar-collapse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: -9px 0 0 var(--accent), 9px 0 0 var(--accent);
    opacity: 0;
    transform: translate(-50%,-50%) scale(.25);
  }
  .sidebar-collapse .collapse-glyph { color: var(--ink); opacity: 1; transition: opacity 130ms ease, transform 420ms cubic-bezier(.34,1.56,.64,1); }
  .sidebar-collapse.is-morphing { color: var(--accent); }
  .sidebar-collapse.is-morphing .collapse-glyph { color: var(--accent); opacity: 0; transform: scale(.12) !important; }
  .sidebar-collapse.is-morphing::after { animation: drawer-dots 540ms cubic-bezier(.2,.75,.22,1) both; }

  body.sidebar-collapsed .product-sidebar { align-items: center; }
  body.sidebar-collapsed .sidebar-brand-row {
    width: 74px;
    height: 68px;
    flex-basis: 68px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand { width: 26px; min-width: 26px; }
  body.sidebar-collapsed .sidebar-compact-mark { font-size: 24px; }
  body.sidebar-collapsed .sidebar-collapse { width: 36px; min-width: 36px; height: 36px; }

  body.sidebar-collapsed .account-side-panel { width: 58px; }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    width: 58px;
    height: 58px;
    min-height: 58px;
  }
  body.sidebar-collapsed .account-avatar { width: 58px; height: 58px; }
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 62px;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 6px;
  }
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    width: 50px;
    display: grid;
    justify-items: center;
  }
  body.sidebar-collapsed .sidebar-legal { width: 50px; }
}

@keyframes drawer-dots {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); filter: blur(1px); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  45% { opacity: 1; transform: translate(-62%,-50%) scale(.82); }
  72% { opacity: 1; transform: translate(-38%,-50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.2); filter: blur(1px); }
}

/* Stable, masked headers for scrolling billing and project views. */
#billingModal .modal-scroll-card,
#projectsModal .modal-scroll-card { width: min(1300px, calc(100vw - 24px)); }
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 112px;
  padding-bottom: 18px;
  transition: min-height 360ms cubic-bezier(.22,.8,.24,1), padding 360ms cubic-bezier(.22,.8,.24,1);
}
#billingModal .modal-sticky-header::after,
#projectsModal .modal-sticky-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4px;
  right: -4px;
  bottom: -30px;
  height: 42px;
  pointer-events: none;
  background: linear-gradient(to bottom, #f7f7f5 0%, rgba(247,247,245,.92) 38%, rgba(247,247,245,0) 100%);
}
#billingModal .modal-heading,
#projectsModal .modal-heading {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-right: 64px;
}
#billingModal .modal-heading-title,
#projectsModal .modal-heading-title {
  position: relative;
  display: block;
  height: 58px;
  transition: height 360ms cubic-bezier(.22,.8,.24,1);
}
#billingModal .modal-heading-title .label,
#projectsModal .modal-heading-title .label {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  opacity: 1;
  white-space: nowrap;
  transform: translate(0,0);
  transition: transform 360ms cubic-bezier(.22,.8,.24,1);
}
#billingModal .modal-heading h2,
#projectsModal .modal-heading h2 {
  position: absolute;
  top: 20px;
  left: 0;
  font-size: 30px;
  line-height: 1.08;
  white-space: nowrap;
  transition: transform 360ms cubic-bezier(.22,.8,.24,1);
}
#billingModal .modal-heading p {
  max-height: 48px;
  margin: 0;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 360ms cubic-bezier(.22,.8,.24,1), opacity 220ms ease, transform 360ms cubic-bezier(.22,.8,.24,1);
}
#billingModal .modal-scroll-card.is-header-compact .modal-sticky-header,
#projectsModal .modal-scroll-card.is-header-compact .modal-sticky-header {
  min-height: 64px;
  padding-bottom: 10px;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading {
  min-height: 44px;
  display: grid;
  margin: 0;
  padding-right: 64px;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading-title,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading-title { height: 40px; }
#billingModal .modal-scroll-card.is-header-compact .modal-heading-title .label,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading-title .label {
  width: auto;
  transform: translateY(13px);
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  font-size: 30px;
  transform: translate(72px,-16px);
}
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 { transform: translate(80px,-16px); }
#billingModal .modal-scroll-card.is-header-compact .modal-heading p {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}
#billingModal .modal-scroll-body,
#projectsModal .modal-scroll-body {
  margin: -8px -28px 0;
  padding: 38px 36px 42px;
}

/* Single optical axis for every compact drawer element. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .product-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  body.sidebar-collapsed .sidebar-brand-row { pointer-events: none; }
  body.sidebar-collapsed .product-sidebar > * { margin-inline: auto; }
  body.sidebar-collapsed .account-side-panel {
    display: grid;
    place-items: center;
  }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    display: grid;
    grid-template-columns: 58px;
    grid-template-rows: 58px;
    place-items: center;
    place-content: center;
    gap: 0;
    margin: 0;
  }
  body.sidebar-collapsed .account-avatar {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    box-sizing: border-box;
    place-items: center;
  }
  body.sidebar-collapsed .product-side-panel > *,
  body.sidebar-collapsed .support-side-panel > *,
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav,
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-action {
    margin-inline: auto;
  }
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-action {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.sidebar-collapsed .product-sidebar .side-link > .material-symbols-outlined,
  body.sidebar-collapsed .product-sidebar .side-action > .material-symbols-outlined {
    width: 22px;
    flex: 0 0 22px;
    margin: 0;
    text-align: center;
  }
}

/* Optical correction for nested compact-rail grids. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .product-side-panel .side-action,
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    position: relative;
    left: -4px;
  }
}

/* Floating glass capsule: the rest of the fixed header is transparent and click-through. */
.app-topbar,
.topbar.app-topbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
}
.app-topbar .top-actions {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(247,247,245,.48);
  -webkit-backdrop-filter: blur(24px) saturate(.88);
  backdrop-filter: blur(24px) saturate(.88);
  box-shadow: 0 14px 40px rgba(20,20,22,.09), inset 0 0 0 1px rgba(255,255,255,.28);
  isolation: isolate;
  overflow: visible;
  pointer-events: auto;
}
.app-topbar .top-actions::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.2) 14%, rgba(255,255,255,.2) 86%, rgba(255,255,255,.58));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.app-topbar .credit-button,
.app-topbar #refreshBtn,
.app-topbar .header-login {
  border-color: rgba(255,255,255,.88);
  background-color: rgba(255,255,255,.82);
  box-shadow: 0 5px 16px rgba(20,20,22,.055);
}

@media (max-width: 760px) {
  .app-topbar .top-actions { gap: 4px; padding: 4px; }
}

@media (max-width: 760px) {
  #billingModal .modal-heading h2,
  #projectsModal .modal-heading h2,
  #billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
  #projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 { font-size: 21px; }
  #billingModal .modal-scroll-body,
  #projectsModal .modal-scroll-body { margin-inline: -16px; padding-inline: 22px; }
}

@media (max-width: 1060px) {
  .account-side-panel,
  .support-side-panel,
  .sidebar-legal { display: none; }
}

/* Billing and project headers stay fixed while only their content scrolls. */
#billingModal .modal-scroll-card,
#projectsModal .modal-scroll-card {
  width: min(1240px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  padding: 26px 28px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: rgba(255,255,255,.72);
  border-radius: 34px;
  box-shadow: 0 34px 110px rgba(20,20,22,.18), 0 0 0 1px rgba(20,20,22,.025);
}
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  background: inherit;
  transition: padding 320ms cubic-bezier(.23,1,.32,1);
}
#billingModal .modal-sticky-header .modal-heading,
#projectsModal .modal-sticky-header .modal-heading {
  margin-bottom: 18px;
  transition: margin 320ms cubic-bezier(.23,1,.32,1), gap 320ms cubic-bezier(.23,1,.32,1);
}
#billingModal .modal-sticky-header .modal-heading p {
  max-height: 54px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 280ms cubic-bezier(.23,1,.32,1), opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1), margin 280ms ease;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding-right: 64px;
}
#projectsModal .modal-scroll-card.is-header-compact .modal-heading > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading .label,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading .label { flex: 0 0 auto; }
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  transition: font-size 280ms cubic-bezier(.23,1,.32,1);
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading p {
  max-height: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-8px);
}
#billingModal .modal-scroll-body,
#projectsModal .modal-scroll-body {
  min-height: 0;
  margin: 0 -14px;
  padding: 8px 14px 34px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#billingModal .modal-scroll-body::-webkit-scrollbar,
#projectsModal .modal-scroll-body::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  #billingModal .modal-scroll-card,
  #projectsModal .modal-scroll-card { width: 100%; padding: 20px 16px 12px; border-radius: 28px; }
  #billingModal .modal-scroll-card.is-header-compact .modal-heading,
  #projectsModal .modal-scroll-card.is-header-compact .modal-heading { gap: 8px; padding-right: 50px; }
  #billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
  #projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 { font-size: 18px; }
}

/* Collapsible desktop navigation drawer. */
.sidebar-brand-row { display: none; }
.sidebar-compact-mark { display: none; }
@media (min-width: 1061px) {
  body { --drawer-width: 244px; }
  body.sidebar-collapsed { --drawer-width: 74px; }
  .app-topbar { pointer-events: none; }
  .app-topbar .top-actions { pointer-events: auto; }
  .product-layout {
    grid-template-columns: var(--drawer-width) minmax(0,1fr);
    transition: grid-template-columns 360ms cubic-bezier(.23,1,.32,1);
  }
  .product-sidebar {
    top: 24px;
    z-index: 1900;
    width: var(--drawer-width);
    height: min(calc(100vh - 36px), 710px);
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    transition: width 360ms cubic-bezier(.23,1,.32,1);
  }
  .sidebar-brand-row {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 68px;
    padding: 0 4px 0 8px;
  }
  .sidebar-brand-row .brand,
  .sidebar-brand-row .brand.liquid-control,
  .sidebar-brand-row .brand.liquid-control.is-fluid-active,
  .sidebar-brand-row .brand.liquid-control.is-pressing {
    position: static;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .sidebar-brand-row .brand img { width: 148px; transition: opacity 180ms ease, transform 260ms cubic-bezier(.23,1,.32,1); }
  .sidebar-brand-row .brand:hover img { transform: scale(1.035); }
  .sidebar-collapse {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: rgba(20,20,22,.065);
  }
  .sidebar-collapse .material-symbols-outlined { font-size: 20px; }
  .product-sidebar .side-panel { flex: 0 0 auto; }
  .product-sidebar .side-link,
  .product-sidebar .side-action {
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    border: 0;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
  }
  .product-sidebar .side-link > .material-symbols-outlined,
  .product-sidebar .side-action > .material-symbols-outlined { flex: 0 0 22px; font-size: 21px; }
  .sidebar-legal { margin-top: auto; flex: 0 0 auto; padding-bottom: 2px; }

  body.sidebar-collapsed .sidebar-brand-row { padding-inline: 3px; }
  body.sidebar-collapsed .sidebar-brand-row .brand { width: 28px; justify-content: center; }
  body.sidebar-collapsed .sidebar-brand-row .brand img { display: none; }
  body.sidebar-collapsed .sidebar-compact-mark { display: block; color: var(--accent); font-size: 22px; }
  body.sidebar-collapsed .sidebar-collapse { width: 32px; min-width: 32px; height: 32px; }
  body.sidebar-collapsed .account-side-panel,
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel { padding: 6px; border-radius: 22px; }
  body.sidebar-collapsed .account-summary {
    min-height: 50px;
    display: grid;
    grid-template-columns: 42px;
    place-content: center;
    padding: 4px;
  }
  body.sidebar-collapsed .account-identity,
  body.sidebar-collapsed .account-summary > .material-symbols-outlined,
  body.sidebar-collapsed .product-side-panel .side-title,
  body.sidebar-collapsed .product-side-panel .recent-projects,
  body.sidebar-collapsed .product-side-panel .side-divider,
  body.sidebar-collapsed .side-link:not(.active) .side-badge,
  body.sidebar-collapsed .sidebar-legal { display: none; }
  body.sidebar-collapsed .product-side-panel { display: grid; gap: 4px; }
  body.sidebar-collapsed .product-side-panel .side-action { display: flex; }
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-action {
    width: 50px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  body.sidebar-collapsed .product-sidebar .side-link > .material-symbols-outlined,
  body.sidebar-collapsed .product-sidebar .side-action > .material-symbols-outlined { flex-basis: auto; font-size: 21px; }
  body.sidebar-collapsed .product-sidebar .side-action > span:not(.material-symbols-outlined) { display: none; }
}

@media (max-width: 1060px) {
  .sidebar-brand-row { display: none; }
}

@media (min-width: 1061px) {
  .collapse-glyph.material-symbols-outlined {
    width: auto;
    height: auto;
    font-size: 22px;
    transition: transform 420ms cubic-bezier(.34,1.56,.64,1);
  }
  body.sidebar-collapsed .collapse-glyph.material-symbols-outlined { transform: rotate(180deg); }
  body.sidebar-collapsed .sidebar-collapse:hover .collapse-glyph.material-symbols-outlined { transform: rotate(180deg) translateX(-2px); }
  .sidebar-collapse:active .collapse-glyph.material-symbols-outlined { transform: scale(.78); }
  body.sidebar-collapsed .sidebar-collapse:active .collapse-glyph.material-symbols-outlined { transform: rotate(180deg) scale(.78); }
}

/* Refined compact drawer controls and uninterrupted cursor layer. */
#custom-cursor { z-index: 100000 !important; }
.sidebar-legal-toggle { display: none; }
.sidebar-legal-menu { display: flex; align-items: center; gap: 12px; }

@media (min-width: 1061px) {
  .collapse-glyph {
    position: relative;
    width: 18px;
    height: 16px;
    display: grid;
    place-items: center;
    transition: transform 420ms cubic-bezier(.34,1.56,.64,1);
  }
  .collapse-glyph b { width: 2px; height: 16px; border-radius: 2px; background: currentColor; }
  .collapse-glyph i {
    position: absolute;
    left: 2px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: left center;
    transition: left 360ms ease, transform 360ms cubic-bezier(.34,1.56,.64,1);
  }
  .collapse-glyph i:first-child { top: 5px; transform: rotate(38deg); }
  .collapse-glyph i:last-child { bottom: 5px; transform: rotate(-38deg); }
  .sidebar-collapse:hover .collapse-glyph { transform: translateX(-2px); }
  .sidebar-collapse:active .collapse-glyph { transform: scale(.82); }

  body.sidebar-collapsed .sidebar-brand-row {
    height: 88px;
    flex-basis: 88px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 0;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand { width: 32px; }
  body.sidebar-collapsed .sidebar-collapse:hover .collapse-glyph { transform: translateX(2px); }
  body.sidebar-collapsed .collapse-glyph i { left: 8px; transform-origin: right center; }
  body.sidebar-collapsed .collapse-glyph i:first-child { transform: rotate(-38deg); }
  body.sidebar-collapsed .collapse-glyph i:last-child { transform: rotate(38deg); }

  body.sidebar-collapsed .account-side-panel {
    width: 50px;
    padding: 0;
    align-self: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }
  body.sidebar-collapsed .account-avatar { width: 50px; height: 50px; }
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel { justify-items: center; }

  body.sidebar-collapsed .sidebar-legal {
    position: relative;
    width: 50px;
    display: grid;
    place-items: center;
    align-self: center;
    margin-top: auto;
    padding: 0;
  }
  body.sidebar-collapsed .sidebar-legal-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 32px rgba(20,20,22,.09);
  }
  body.sidebar-collapsed .sidebar-legal-menu {
    position: absolute;
    left: 58px;
    bottom: 0;
    width: max-content;
    max-width: 300px;
    display: flex;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 16px;
    background: rgba(247,247,245,.97);
    box-shadow: 0 18px 44px rgba(20,20,22,.16);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px) scale(.96);
    transform-origin: left bottom;
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1);
  }
  body.sidebar-collapsed .sidebar-legal.is-open .sidebar-legal-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }
  body.sidebar-collapsed .sidebar-legal-link {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    white-space: nowrap;
  }
}

/* Final billing header rhythm. */
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 72px;
  padding-bottom: 0;
}
#billingModal .modal-heading,
#projectsModal .modal-heading { height: 72px; }
#billingModal .modal-sticky-header::after,
#projectsModal .modal-sticky-header::after {
  bottom: -18px;
  height: 30px;
}
.billing-ledger h3 {
  margin: 0 0 18px;
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
}

/* Drawer interaction overrides must remain after the compact-grid overrides. */
@media (min-width: 1061px) {
  .sidebar-brand-row .sidebar-brand-full,
  .sidebar-brand-row .sidebar-compact-mark { transition: opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1); transform-origin: center; }
  .sidebar-brand-row .sidebar-brand-full { display: block; opacity: 1; transform: scale(1); }
  .sidebar-brand-row .sidebar-compact-mark { position: absolute; inset: 50% auto auto 50%; width: 24px !important; height: 24px; display: block !important; opacity: 0; transform: translate(-50%,-50%) scale(0); }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-brand-full { display: block; opacity: 0; transform: scale(0); }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-compact-mark { display: block !important; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  body.sidebar-transitioning .sidebar-brand-row .sidebar-brand-full,
  body.sidebar-transitioning .sidebar-brand-row .sidebar-compact-mark { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand:hover .sidebar-brand-full { transform: scale(1.035); }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark { transform: translate(-50%,-50%) scale(1.1) !important; }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand.is-pressing .sidebar-brand-full { animation: brand-press-full 300ms cubic-bezier(.34,1.56,.64,1); }
  body.sidebar-collapsed .sidebar-brand-row .brand.is-pressing .sidebar-compact-mark { animation: brand-press-compact 300ms cubic-bezier(.34,1.56,.64,1); }

  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    --control-base: rgba(255,255,255,.9); --control-fluid: var(--accent); color: var(--ink);
    background-color: var(--control-base);
    background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
    transition-property: --fluid-radius, opacity, color, background-color, box-shadow !important;
  }
  .sidebar-collapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active { color: #fff; box-shadow: 0 14px 34px rgba(var(--accent-rgb),.18); }

  .sidebar-legal-link,
  .sidebar-legal-toggle { --control-base: rgba(255,255,255,.38); --control-fluid: var(--accent); border: 1px solid rgba(255,255,255,.72); color: var(--muted); background-color: var(--control-base); box-shadow: none; }
  .sidebar-legal-link { min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
  .sidebar-legal-link.liquid-control.is-fluid-active,
  .sidebar-legal-toggle.liquid-control.is-fluid-active { color: #fff; border-color: rgba(var(--accent-rgb),.78); box-shadow: 0 10px 24px rgba(var(--accent-rgb),.14); }
}

@keyframes brand-press-full {
  0%,100% { transform: scale(1.035); }
  42% { transform: scale(.94); }
  72% { transform: scale(1.055); }
}
@keyframes brand-press-compact {
  0%,100% { transform: translate(-50%,-50%) scale(1.1); }
  42% { transform: translate(-50%,-50%) scale(.86); }
  72% { transform: translate(-50%,-50%) scale(1.14); }
}

/* Final compact-rail geometry overrides. */
@media (min-width: 1061px) {
  .sidebar-collapse,
  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-active {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: rgba(255,255,255,.9);
    box-shadow: 0 9px 24px rgba(20,20,22,.08);
  }
  .sidebar-collapse .collapse-glyph { color: var(--ink); }
  .sidebar-collapse.is-morphing .collapse-glyph { color: var(--accent); opacity: 0; transform: scale(.12) !important; }
  .sidebar-collapse.is-morphing::after { animation: drawer-dots 540ms cubic-bezier(.2,.75,.22,1) both; }
  body.sidebar-collapsed .product-sidebar { align-items: center; }
  body.sidebar-collapsed .sidebar-brand-row {
    width: 74px;
    height: 68px;
    flex-basis: 68px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand { width: 26px; min-width: 26px; }
  body.sidebar-collapsed .sidebar-compact-mark { font-size: 24px; }
  body.sidebar-collapsed .sidebar-collapse { width: 36px; min-width: 36px; height: 36px; }
  body.sidebar-collapsed .account-side-panel { width: 58px; }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    width: 58px;
    height: 58px;
    min-height: 58px;
  }
  body.sidebar-collapsed .account-avatar { width: 58px; height: 58px; }
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 62px;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 6px;
  }
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    width: 50px;
    display: grid;
    justify-items: center;
  }
}

/* Viewport lift, edge dissolves and foreground celebration layer. */
.confetti-layer { z-index: 2147483647; }

@media (min-width: 1061px) {
  .product-layout { margin-top: 92px; }
  .product-sidebar { top: 12px; }
}

#billingModal .modal-scroll-body,
#projectsModal .modal-scroll-body {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
  mask-composite: intersect;
}

/* State-independent geometry for compact drawer buttons. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .sidebar-brand-row {
    gap: 12px;
    padding-inline: 0;
  }
  body.sidebar-collapsed .product-side-panel .side-action,
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    left: -4px;
  }
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-link:hover,
  body.sidebar-collapsed .product-sidebar .side-link.active,
  body.sidebar-collapsed .product-sidebar .side-link.is-fluid-active,
  body.sidebar-collapsed .product-sidebar .side-action,
  body.sidebar-collapsed .product-sidebar .side-action:hover,
  body.sidebar-collapsed .product-sidebar .side-action.is-fluid-active {
    left: 0;
    width: 50px;
    height: 44px;
    min-height: 44px;
    margin-inline: auto;
  }
  body.sidebar-collapsed .product-sidebar .side-link:not(.active),
  body.sidebar-collapsed .product-sidebar .side-link:not(.active):hover,
  body.sidebar-collapsed .product-sidebar .side-link:not(.active).is-fluid-active,
  body.sidebar-collapsed .product-sidebar .side-action,
  body.sidebar-collapsed .product-sidebar .side-action:hover,
  body.sidebar-collapsed .product-sidebar .side-action.is-fluid-active { transform: translateX(4px) !important; }
  body.sidebar-collapsed .product-sidebar .side-link.active,
  body.sidebar-collapsed .product-sidebar .side-link.active:hover,
  body.sidebar-collapsed .product-sidebar .side-link.active.is-fluid-active { transform: translateX(3px) !important; }
}

/* Scroll-aware header glass and aligned workbench arrows. */
.app-topbar .top-actions {
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  box-shadow: none;
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease;
}
.app-topbar .top-actions::before {
  opacity: 0;
  transition: opacity 260ms ease;
}
body.header-scrolled .app-topbar .top-actions {
  border-color: rgba(255,255,255,.82);
  background: rgba(247,247,245,.48);
  -webkit-backdrop-filter: blur(24px) saturate(.88);
  backdrop-filter: blur(24px) saturate(.88);
  box-shadow: 0 14px 40px rgba(20,20,22,.09), inset 0 0 0 1px rgba(255,255,255,.28);
}
body.header-scrolled .app-topbar .top-actions::before { opacity: 1; }

.header-generation-progress {
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  box-shadow: none;
}
.header-generation-progress.is-active {
  border-color: rgba(255,255,255,.82);
  background: rgba(247,247,245,.5);
  -webkit-backdrop-filter: blur(24px) saturate(.88);
  backdrop-filter: blur(24px) saturate(.88);
  box-shadow: 0 14px 40px rgba(20,20,22,.09), inset 0 0 0 1px rgba(255,255,255,.3);
}

.tool-field .custom-select-arrow { top: 60%; }

/* Per-role optical centering in the compact rail. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .product-side-panel > .side-action { transform: translateX(-1px) !important; }
  body.sidebar-collapsed .product-sidebar .side-link[data-mode="video"]:not(.active),
  body.sidebar-collapsed .support-side-panel .side-link { transform: translateX(2px) !important; }
  body.sidebar-collapsed .product-sidebar .side-link.active { transform: translateX(3px) !important; }
}

/* The selected format icon never turns into a horizontal marquee. */
.tool-field:has(select[name="outputFormat"]) .custom-select-value-track,
.tool-field:has(select[name="outputFormat"]) .custom-select-trigger:hover .custom-select-value-track,
.tool-field:has(select[name="outputFormat"]) .custom-select-trigger:focus-visible .custom-select-value-track {
  animation: none !important;
  transform: none !important;
}

/* No selected-value marquee in any workbench select card. */
.tool-field .custom-select-value-track,
.tool-field .custom-select-trigger:hover .custom-select-value-track,
.tool-field .custom-select-trigger:focus-visible .custom-select-value-track {
  animation: none !important;
  transform: none !important;
}

/* Before scrolling, content remains fully visible below the spacious modal header. */
#billingModal .modal-scroll-body,
#projectsModal .modal-scroll-body {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
}
#billingModal .modal-scroll-card.is-header-compact .modal-scroll-body,
#projectsModal .modal-scroll-card.is-header-compact .modal-scroll-body {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 30px), transparent 100%);
}

/* Unified desktop alignment grid. */
@media (min-width: 1061px) {
  .sidebar-brand-row { height: 70px; flex-basis: 70px; }
  .sidebar-brand-row .brand img { width: 160px; }
  .sidebar-collapse,
  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-active {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }
  .sidebar-collapse .collapse-glyph.material-symbols-outlined { font-size: 24px; }

  body:not(.sidebar-collapsed) .product-side-panel { transform: translateY(-14px); }
  body:not(.sidebar-collapsed) .support-side-panel { transform: translateY(46px); }

  body.sidebar-collapsed .sidebar-brand-row { height: 70px; flex-basis: 70px; }
  body.sidebar-collapsed .sidebar-collapse { width: 46px; min-width: 46px; height: 46px; }
  body.sidebar-collapsed .sidebar-brand-row {
    width: 84px;
    gap: 10px;
    overflow: visible;
  }
}

/* Drawer toggle teleports as a sequence of blue points. */
.drawer-travel-dot {
  position: fixed;
  z-index: 100001;
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(var(--accent-rgb),.08), 0 8px 22px rgba(var(--accent-rgb),.24);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.15);
  animation: drawer-point-hop 210ms cubic-bezier(.22,.8,.24,1) both;
}
@keyframes drawer-point-hop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.12); }
  38% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  66% { opacity: 1; transform: translate(-50%,-50%) scale(.9); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
}

@media (min-width: 1061px) {
  .sidebar-collapse.is-morphing,
  .sidebar-collapse.is-morphing.liquid-control,
  .sidebar-collapse.is-morphing.liquid-control.is-fluid-active {
    opacity: 0;
    transform: scale(.1) !important;
    transition: opacity 100ms ease, transform 140ms cubic-bezier(.4,0,.8,.2);
  }
  .sidebar-collapse.is-morphing::after { animation: none !important; opacity: 0 !important; }

  body.sidebar-collapsed .sidebar-brand-row {
    position: relative;
    width: 244px;
    display: block;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 26px;
    min-width: 26px;
    transform: translateY(-50%);
  }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover { transform: translateY(-50%) scale(1.04); }
  body.sidebar-collapsed .sidebar-collapse {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 98px;
    transform: translateY(-50%);
  }
  body.sidebar-collapsed .sidebar-collapse:hover { transform: translateY(-50%); }
body.sidebar-collapsed .sidebar-collapse:active { transform: translateY(-50%) scale(.92); }
}

/* Equal, non-overlapping spacing between the three expanded drawer cards. */
@media (min-width: 1061px) {
  body:not(.sidebar-collapsed) .product-sidebar {
    gap: 0;
  }
  body:not(.sidebar-collapsed) .account-side-panel {
    margin-top: 12px;
  }
  body:not(.sidebar-collapsed) .product-side-panel,
  body:not(.sidebar-collapsed) .support-side-panel {
    margin-top: 16px;
    transform: none;
  }
}

/* Compact profile restores workbench alignment while preserving equal gaps. */
@media (min-width: 1061px) {
  body:not(.sidebar-collapsed) .account-side-panel {
    min-height: 66px;
    padding: 0;
  }
  body:not(.sidebar-collapsed) .account-summary { min-height: 64px; }
  body:not(.sidebar-collapsed) .support-side-panel { min-height: 121px; }
}

/* Drawer button: press away, move the drawer, then reveal at the destination. */
@media (min-width: 1061px) {
  .sidebar-collapse,
  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-active {
    transition: opacity 140ms ease, transform 160ms cubic-bezier(.4,0,.8,.2), background-color 180ms ease, box-shadow 180ms ease;
  }
  .sidebar-collapse:hover,
  .sidebar-collapse.liquid-control:hover,
  .sidebar-collapse.liquid-control.is-fluid-active:hover { transform: none !important; }
  .sidebar-collapse:hover .collapse-glyph,
  .sidebar-collapse.liquid-control:hover .collapse-glyph { transform: none !important; }
  body.sidebar-collapsed .sidebar-collapse:hover,
  body.sidebar-collapsed .sidebar-collapse.liquid-control:hover { transform: translateY(-50%) !important; }
  body.sidebar-collapsed .sidebar-collapse:hover .collapse-glyph.material-symbols-outlined { transform: rotate(180deg) !important; }

  .sidebar-collapse.is-morphing,
  .sidebar-collapse.is-morphing.liquid-control,
  .sidebar-collapse.is-morphing.liquid-control.is-fluid-active {
    opacity: 0 !important;
    transform: scale(0) !important;
    pointer-events: none;
  }
  body.sidebar-collapsed .sidebar-collapse.is-morphing,
  body.sidebar-collapsed .sidebar-collapse.is-morphing.liquid-control {
    transform: translateY(-50%) scale(0) !important;
  }
  .sidebar-collapse.is-appearing { animation: drawer-button-appear 240ms cubic-bezier(.34,1.56,.64,1) both; }
  body.sidebar-collapsed .sidebar-collapse.is-appearing { animation-name: drawer-button-appear-collapsed; }
  .drawer-travel-dot { display: none !important; }
}
@keyframes drawer-button-appear {
  0% { opacity: 0; transform: scale(0); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes drawer-button-appear-collapsed {
  0% { opacity: 0; transform: translateY(-50%) scale(0); }
  72% { opacity: 1; transform: translateY(-50%) scale(1.08); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* The account card and project heading share the same visual top and bottom. */
@media (min-width: 1061px) {
  .generator-heading .label {
    display: inline-block;
    transform: translateY(-8px);
  }
}

/* Shared modal action position and two-stage docking title. */
#billingModal .modal-corner-actions,
#projectsModal .modal-corner-actions {
  top: 18px;
  right: 18px;
}
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 124px;
  padding: 0;
  overflow: visible;
}
#billingModal .modal-heading,
#projectsModal .modal-heading,
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading {
  position: relative;
  height: 124px;
  min-height: 0;
  display: block;
  margin: 0;
  padding: 0 64px 0 0;
}
#billingModal .modal-heading-title,
#projectsModal .modal-heading-title,
#billingModal .modal-scroll-card.is-header-compact .modal-heading-title,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading-title {
  position: static;
  display: block;
  height: auto;
}
#billingModal .modal-heading-title .label,
#projectsModal .modal-heading-title .label,
#billingModal .modal-scroll-card.is-header-compact .modal-heading-title .label,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading-title .label {
  position: absolute;
  top: 39px;
  left: 0;
  width: auto;
  opacity: 1;
  transform: translateY(-50%);
}
#billingModal .modal-heading h2,
#projectsModal .modal-heading h2 {
  position: absolute;
  top: 57px;
  left: 0;
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  opacity: 1;
  transform: none;
}
#billingModal .modal-heading p {
  position: absolute;
  top: 96px;
  left: 0;
  max-height: 28px;
  margin: 0;
  opacity: 1;
  transform: none;
}
#billingModal .modal-scroll-card.is-header-compact .modal-sticky-header,
#projectsModal .modal-scroll-card.is-header-compact .modal-sticky-header {
  min-height: 64px;
  padding: 0;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading { height: 64px; }
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  animation: modal-title-dock 430ms cubic-bezier(.22,.8,.24,1) both;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading p {
  animation: modal-description-out 170ms ease both;
}
#billingModal .modal-scroll-card.is-header-expanding .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-expanding .modal-heading h2 {
  animation: modal-title-undock 430ms cubic-bezier(.22,.8,.24,1) both;
}
#billingModal .modal-scroll-card.is-header-expanding .modal-heading p {
  animation: modal-description-in 430ms ease both;
}
@keyframes modal-title-dock {
  0% { left: 0; top: 57px; opacity: 1; transform: scale(1); }
  42% { left: 0; top: 57px; opacity: 0; transform: translateY(8px) scale(.05); }
  52% { left: 50%; top: 39px; opacity: 0; transform: translate(-50%,-50%) scale(.05); }
  100% { left: 50%; top: 39px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes modal-title-undock {
  0% { left: 50%; top: 39px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  42% { left: 50%; top: 39px; opacity: 0; transform: translate(-50%,-50%) scale(.05); }
  52% { left: 0; top: 57px; opacity: 0; transform: translateY(8px) scale(.05); }
  100% { left: 0; top: 57px; opacity: 1; transform: none; }
}

/* One authoritative compact drawer grid: no optical offsets and no hover geometry changes. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .product-sidebar {
    width: 74px;
    align-items: stretch;
    gap: 0;
  }

  body.sidebar-collapsed .sidebar-brand-row {
    position: relative;
    width: 244px;
    height: 70px;
    flex: 0 0 70px;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand,
  body.sidebar-collapsed .sidebar-brand-row .brand:hover,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-active,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-pressing {
    position: absolute;
    top: 50%;
    left: 24px;
    z-index: 5;
    width: 26px;
    min-width: 26px;
    height: 40px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    translate: none !important;
    transform: translateY(-50%) !important;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark,
  body.sidebar-collapsed .sidebar-brand-row .brand.is-fluid-active .sidebar-compact-mark {
    transform: none !important;
  }
  body.sidebar-collapsed #sidebarCollapse,
  body.sidebar-collapsed #sidebarCollapse:hover,
  body.sidebar-collapsed #sidebarCollapse:focus-visible,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    position: absolute;
    top: 50%;
    left: 98px;
    z-index: 6;
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin: 0;
    pointer-events: auto;
    translate: none !important;
    transform: translateY(-50%) !important;
  }
  body.sidebar-collapsed #sidebarCollapse:active {
    transform: translateY(-50%) scale(.92) !important;
  }
  body.sidebar-collapsed #sidebarCollapse.is-morphing {
    transform: translateY(-50%) scale(0) !important;
  }

  body.sidebar-collapsed .account-side-panel {
    width: 70px;
    height: 70px;
    min-height: 70px;
    align-self: center;
    margin: 10px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
  }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary:hover,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-exiting {
    width: 70px;
    height: 70px;
    min-height: 70px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    translate: none !important;
    transform: none !important;
  }
  body.sidebar-collapsed .account-avatar {
    width: 70px;
    height: 70px;
  }

  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 62px;
    align-self: center;
    margin-inline: auto;
    padding: 6px;
    transform: none !important;
  }
  body.sidebar-collapsed .product-side-panel { margin-top: 14px; }
  body.sidebar-collapsed .support-side-panel { margin-top: 16px; }
  body.sidebar-collapsed .product-side-panel > .side-action,
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    position: static;
    left: auto;
    width: 50px;
    margin: 0 auto;
    translate: none !important;
    transform: none !important;
  }
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-link:hover,
  body.sidebar-collapsed .product-sidebar .side-link.active,
  body.sidebar-collapsed .product-sidebar .side-link.is-fluid-active,
  body.sidebar-collapsed .product-sidebar .side-link.is-fluid-exiting,
  body.sidebar-collapsed .product-sidebar .side-action,
  body.sidebar-collapsed .product-sidebar .side-action:hover,
  body.sidebar-collapsed .product-sidebar .side-action.is-fluid-active,
  body.sidebar-collapsed .product-sidebar .side-action.is-fluid-exiting {
    position: relative;
    left: auto;
    width: 50px;
    height: 44px;
    min-height: 44px;
    margin-inline: auto;
    justify-self: center;
    translate: none !important;
    transform: none !important;
  }
  body.sidebar-collapsed .sidebar-legal {
    width: 50px;
    margin: auto auto 0;
    padding: 0;
    place-items: center;
    transform: none !important;
  }
}
@keyframes modal-description-out {
  to { opacity: 0; transform: translateY(8px) scale(.96); }
}
@keyframes modal-description-in {
  0%, 55% { opacity: 0; transform: translateY(8px) scale(.96); }
  100% { opacity: 1; transform: none; }
}

/* Final stable geometry for the compact rail and main heading. */
@media (min-width: 1061px) {
  .generator-heading h1 { transform: translateY(-5px); }

  body.sidebar-collapsed .product-sidebar {
    --compact-control: 50px;
    align-items: center;
  }
  body.sidebar-collapsed .account-side-panel,
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel,
  body.sidebar-collapsed .sidebar-legal {
    margin-inline: auto;
  }
  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 62px;
    box-sizing: border-box;
    padding: 6px;
    display: grid;
    place-items: center;
  }
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    position: static;
    left: auto;
    width: var(--compact-control);
    margin: 0 auto;
    transform: none !important;
    justify-items: center;
  }
  body.sidebar-collapsed .product-side-panel > .side-action,
  body.sidebar-collapsed .product-sidebar .side-link,
  body.sidebar-collapsed .product-sidebar .side-link:hover,
  body.sidebar-collapsed .product-sidebar .side-link.active,
  body.sidebar-collapsed .product-sidebar .side-link.is-fluid-active,
  body.sidebar-collapsed .product-sidebar .side-action,
  body.sidebar-collapsed .product-sidebar .side-action:hover,
  body.sidebar-collapsed .product-sidebar .side-action.is-fluid-active {
    position: relative;
    left: auto;
    width: var(--compact-control);
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
    transform: none !important;
    justify-self: center;
  }
  body.sidebar-collapsed .account-side-panel { width: 58px; place-items: center; }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary:hover,
  body.sidebar-collapsed .account-summary.is-fluid-active {
    margin: 0;
    transform: none !important;
  }
  body.sidebar-collapsed .sidebar-legal { width: var(--compact-control); place-items: center; }

  body.sidebar-collapsed .sidebar-brand-row .brand,
  body.sidebar-collapsed .sidebar-brand-row .brand:hover,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-active,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-pressing {
    z-index: 5;
    pointer-events: auto;
    top: 50%;
    left: 24px;
    width: 26px;
    min-width: 26px;
    transform: translateY(-50%) !important;
  }
  body.sidebar-collapsed #sidebarCollapse,
  body.sidebar-collapsed #sidebarCollapse:hover,
  body.sidebar-collapsed #sidebarCollapse:focus-visible,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    z-index: 6;
    pointer-events: auto;
    top: 50%;
    left: 98px;
    transform: translateY(-50%) !important;
  }
  body.sidebar-collapsed #sidebarCollapse:active { transform: translateY(-50%) scale(.92) !important; }
  body.sidebar-collapsed #sidebarCollapse .collapse-glyph,
  body.sidebar-collapsed #sidebarCollapse:hover .collapse-glyph,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active .collapse-glyph {
    transform: rotate(180deg) !important;
  }
  body.sidebar-collapsed #sidebarCollapse.is-morphing { transform: translateY(-50%) scale(0) !important; }
}

/* Modal headers use the profile card's corner geometry and reveal the active section. */
#billingModal .modal-corner-actions,
#projectsModal .modal-corner-actions {
  top: -10px;
  right: -10px;
}
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 100px;
}
#billingModal .modal-heading,
#projectsModal .modal-heading,
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading {
  height: 100px;
}
#billingModal .modal-heading-title .label,
#projectsModal .modal-heading-title .label,
#billingModal .modal-scroll-card.is-header-compact .modal-heading-title .label,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading-title .label {
  top: 10px;
}
#billingModal .modal-heading h2,
#projectsModal .modal-heading h2 {
  top: 30px;
}
#billingModal .modal-heading p { top: 66px; }
#billingModal .modal-scroll-card.is-header-compact .modal-sticky-header,
#projectsModal .modal-scroll-card.is-header-compact .modal-sticky-header {
  min-height: 50px;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading { height: 50px; }
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  top: 10px;
}
#billingModal .modal-heading h2.is-title-swapping,
#projectsModal .modal-heading h2.is-title-swapping {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.12) !important;
  transition: opacity 140ms ease, transform 170ms cubic-bezier(.4,0,.8,.2);
}
.billing-ledger h3 {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 400;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.23,1,.32,1);
}
.billing-ledger.is-docked-section h3 {
  opacity: 0;
  transform: translateY(-5px) scale(.92);
  pointer-events: none;
}

@keyframes modal-title-dock {
  0% { left: 0; top: 30px; opacity: 1; transform: scale(1); }
  42% { left: 0; top: 30px; opacity: 0; transform: translateY(7px) scale(.05); }
  52% { left: 50%; top: 10px; opacity: 0; transform: translate(-50%,-50%) scale(.05); }
  100% { left: 50%; top: 10px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes modal-title-undock {
  0% { left: 50%; top: 10px; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  42% { left: 50%; top: 10px; opacity: 0; transform: translate(-50%,-50%) scale(.05); }
  52% { left: 0; top: 30px; opacity: 0; transform: translateY(7px) scale(.05); }
  100% { left: 0; top: 30px; opacity: 1; transform: none; }
}

/* Definitive compact rail geometry. Keep this block last to defeat legacy optical offsets. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .product-sidebar {
    width: 74px;
    align-items: stretch;
    gap: 0;
  }

  body.sidebar-collapsed .sidebar-brand-row {
    position: relative;
    width: 244px;
    height: 70px;
    flex: 0 0 70px;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand,
  body.sidebar-collapsed .sidebar-brand-row .brand:hover,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-active,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed .sidebar-brand-row .brand.liquid-control.is-pressing {
    position: absolute;
    top: 50%;
    left: 24px;
    z-index: 5;
    width: 26px;
    min-width: 26px;
    height: 40px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    translate: none !important;
    transform: translateY(-50%) !important;
    transition-property: opacity, color !important;
  }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark,
  body.sidebar-collapsed .sidebar-brand-row .brand.is-fluid-active .sidebar-compact-mark {
    transform: none !important;
  }
  body.sidebar-collapsed #sidebarCollapse,
  body.sidebar-collapsed #sidebarCollapse:hover,
  body.sidebar-collapsed #sidebarCollapse:focus-visible,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-entering,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    position: absolute;
    top: 50%;
    left: 98px;
    z-index: 6;
    width: 46px;
    min-width: 46px;
    height: 46px;
    margin: 0;
    pointer-events: auto;
    translate: none !important;
    transform: translateY(-50%) !important;
    transition-property: opacity, background-color, box-shadow !important;
  }
  body.sidebar-collapsed #sidebarCollapse:active { transform: translateY(-50%) scale(.92) !important; }
  body.sidebar-collapsed #sidebarCollapse.is-morphing { transform: translateY(-50%) scale(0) !important; }

  body.sidebar-collapsed .account-side-panel {
    width: 70px;
    min-width: 70px;
    height: 70px;
    min-height: 70px;
    align-self: center;
    margin: 10px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
  }
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary:hover,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-exiting {
    width: 70px;
    min-width: 70px;
    height: 70px;
    min-height: 70px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
    translate: none !important;
    transform: none !important;
  }
  body.sidebar-collapsed .account-avatar { width: 70px; height: 70px; }

  body.sidebar-collapsed .product-side-panel,
  body.sidebar-collapsed .support-side-panel {
    width: 64px;
    align-self: center;
    margin-inline: auto;
    padding: 6px;
    transform: none !important;
  }
  body.sidebar-collapsed .product-side-panel { margin-top: 14px; }
  body.sidebar-collapsed .support-side-panel { margin-top: 16px; }
  body.sidebar-collapsed .product-side-panel > .side-action,
  body.sidebar-collapsed .product-side-panel .side-nav,
  body.sidebar-collapsed .support-side-panel .side-nav {
    position: static;
    left: auto;
    width: 50px;
    margin: 0 auto;
    justify-self: center;
    translate: none !important;
    transform: none !important;
  }
  html body.sidebar-collapsed .product-sidebar .side-link,
  html body.sidebar-collapsed .product-sidebar .side-link:hover,
  html body.sidebar-collapsed .product-sidebar .side-link.active,
  html body.sidebar-collapsed .product-sidebar .side-link.active:hover,
  html body.sidebar-collapsed .product-sidebar .side-link.liquid-control.is-fluid-active,
  html body.sidebar-collapsed .product-sidebar .side-link.active.liquid-control.is-fluid-active,
  html body.sidebar-collapsed .product-sidebar .side-link.liquid-control.is-fluid-exiting,
  html body.sidebar-collapsed .product-sidebar .side-action,
  html body.sidebar-collapsed .product-sidebar .side-action:hover,
  html body.sidebar-collapsed .product-sidebar .side-action.liquid-control.is-fluid-active,
  html body.sidebar-collapsed .product-sidebar .side-action.liquid-control.is-fluid-exiting {
    position: relative;
    left: auto;
    width: 50px;
    height: 44px;
    min-height: 44px;
    margin-inline: auto;
    justify-self: center;
    translate: none !important;
    transform: none !important;
    transition-property: --fluid-radius, color, border-color, box-shadow, background-color !important;
  }
  html body.sidebar-collapsed .product-sidebar .side-link[data-mode="video"]:not(.active),
  html body.sidebar-collapsed .product-sidebar .side-link[data-mode="video"]:not(.active):hover,
  html body.sidebar-collapsed .product-sidebar .side-link[data-mode="video"].liquid-control.is-fluid-active,
  html body.sidebar-collapsed .support-side-panel .side-link,
  html body.sidebar-collapsed .support-side-panel .side-link:not(.active),
  html body.sidebar-collapsed .support-side-panel .side-link:hover,
  html body.sidebar-collapsed .support-side-panel .side-link:not(.active):hover,
  html body.sidebar-collapsed .support-side-panel .side-link.liquid-control.is-fluid-active,
  html body.sidebar-collapsed .support-side-panel .side-link.liquid-control.is-fluid-exiting {
    translate: none !important;
    transform: none !important;
  }
  body.sidebar-collapsed .sidebar-legal {
    width: 50px;
    margin: auto auto 0;
    padding: 0;
    place-items: center;
    transform: none !important;
  }
}

/* Final billing header rhythm. */
#billingModal .modal-sticky-header,
#projectsModal .modal-sticky-header {
  min-height: 72px;
  padding-bottom: 0;
}
#billingModal .modal-heading,
#projectsModal .modal-heading { height: 72px; }
#billingModal .modal-sticky-header::after,
#projectsModal .modal-sticky-header::after {
  bottom: -18px;
  height: 30px;
}
.billing-ledger h3 {
  margin: 0 0 18px;
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: 0;
}