:root{
  /* Dark theme (default): monochrome black/white */
  --bg: #060607;
  --bg2:#0b0c0e;
  --card:#0e1013;
  --text:#f2f2f2;
  --muted:#b5b8c0;
  --brand:#ffffff;
  --brand2:#d7d9df;
  --danger:#e6e6e6;
  --ok:#dcdcdc;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 22px;
  --max: 1120px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Glassmorphism */
  /* iOS-like liquid glass: stronger blur + clearer highlight */
  --glass-blur: 28px;
  --glass-sat: 135%;
  --glass-brightness: 1.18;
  --glass-contrast: 1.08;

  /* Frosted (iOS-like) base */
  --glass-bg: rgba(255,255,255,.14);
  --glass-bg-2: rgba(255,255,255,.07);
  --glass-bg-soft: rgba(255,255,255,.12);
  --glass-bg-soft-2: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.38);
  --glass-border-2: rgba(255,255,255,.22);
  --glass-outline: inset 0 0 0 1px rgba(255,255,255,.22);
  --glass-outline-2: inset 0 0 0 2px rgba(255,255,255,.08);
  --glass-halo: 0 0 0 1px rgba(255,255,255,.10);
  --glass-shadow: 0 26px 70px rgba(0,0,0,.34);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -18px 28px rgba(0,0,0,.22);

  /* Premium accents */
  --ring: rgba(255,255,255,.16);
  --ring2: rgba(255,255,255,.10);
  --vignette: rgba(0,0,0,.55);
  --noise-opacity: .030;
  --shine: rgba(255,255,255,.14);
  --shine2: rgba(255,255,255,.06);

  /* Glow colors (for animated accents) */
  --glow-1: rgba(255,255,255,.16);
  --glow-2: rgba(255,255,255,.10);
  --glow-3: rgba(255,255,255,.10);
  --glow-opacity: .22;
}

/* Light theme */
html[data-theme="light"]{
  --bg:#f6f7fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --text:#0b1020;
  --muted:#4a557a;
  --brand:#7c5cff;
  --brand2:#2fe3ff;
  --danger:#ff4d6d;
  --ok:#41ffb8;
  --border: rgba(12, 18, 40, .12);
  --shadow: 0 18px 40px rgba(15, 23, 48, .12);

  /* Glassmorphism (light) */
  --glass-brightness: 1.04;
  --glass-contrast: 1.02;
  --glass-bg: rgba(255,255,255,.66);
  --glass-bg-2: rgba(255,255,255,.44);
  --glass-bg-soft: rgba(255,255,255,.56);
  --glass-bg-soft-2: rgba(255,255,255,.38);
  --glass-border: rgba(12,18,40,.20);
  --glass-border-2: rgba(12,18,40,.15);
  --glass-outline: inset 0 0 0 1px rgba(255,255,255,.58);
  --glass-outline-2: inset 0 0 0 2px rgba(255,255,255,.22);
  --glass-halo: 0 0 0 1px rgba(12,18,40,.06);
  --glass-shadow: 0 18px 54px rgba(15, 23, 48, .10);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -16px 28px rgba(12,18,40,.06);

  /* Premium accents (light) */
  --ring: rgba(124,92,255,.22);
  --ring2: rgba(47,227,255,.16);
  --vignette: rgba(15,23,48,.10);
  --noise-opacity: .03;
  --shine: rgba(255,255,255,.24);
  --shine2: rgba(255,255,255,.10);

  /* Glow colors (light): more subtle */
  --glow-1: rgba(124,92,255,.20);
  --glow-2: rgba(47,227,255,.14);
  --glow-3: rgba(255,255,255,.22);
  --glow-opacity: .12;
}

/* Accent variants (selected via Theme panel) */
html[data-accent="blue"]{
  --brand:#5f86ff;
  --brand2:#2fe3ff;
  --ring: rgba(95,134,255,.24);
  --ring2: rgba(47,227,255,.18);
  --glow-1: rgba(95,134,255,.22);
  --glow-2: rgba(47,227,255,.16);
}
html[data-accent="green"]{
  --brand:#47d880;
  --brand2:#7cf3bf;
  --ring: rgba(71,216,128,.24);
  --ring2: rgba(124,243,191,.18);
  --glow-1: rgba(71,216,128,.22);
  --glow-2: rgba(124,243,191,.16);
}
html[data-accent="red"]{
  --brand:#ff5f7a;
  --brand2:#ff8a6b;
  --ring: rgba(255,95,122,.24);
  --ring2: rgba(255,138,107,.18);
  --glow-1: rgba(255,95,122,.24);
  --glow-2: rgba(255,138,107,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}

/* Premium background: subtle noise + vignette */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity: 0;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.24), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.14), transparent 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 3px);
  filter: blur(.2px);
}

/* Readability tweaks (dark): make placeholders and muted text visible */
::placeholder{ color: rgba(176, 184, 200, .72); }
body:after{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(1100px 700px at 50% 115%, var(--vignette), transparent 55%);
  opacity:0;
}

/* Ensure content renders above background overlays */
.topbar, main, footer{ position:relative; z-index:1; }

a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.grid{display:grid; gap:18px}
/* Hide admin-only links before JS role check (prevents flicker). */
[data-admin-only="1"]{ display:none; }
.landing-nav a[href$="providers.html"]{ display:none !important; }

/* Small utility classes for shared page layouts */
.logo-round{ border-radius:10px; }
.grid-cols-12{ grid-template-columns: repeat(12, 1fr); }
.col-span-12{ grid-column: span 12; }
.col-span-7{ grid-column: span 7; }
.col-span-6{ grid-column: span 6; }
.col-span-5{ grid-column: span 5; }
.full-span{ grid-column: 1 / -1; }
.mt-0{ margin-top:0; }
.mt-10{ margin-top:10px; }
.mt-14{ margin-top:14px; }
.m-0{ margin:0; }
.mb-6{ margin-bottom:6px; }
.mb-16{ margin-bottom:16px; }
.fw-800{ font-weight:800; }
.actions-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
body.page-photo .photo-step[data-step="3"] .actions-row{
  margin-top: 14px;
}
.actions-row--tight{ gap:8px; }
.actions-row--soft{ gap:10px; }
.choice-card{
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.maxw-340{ max-width:340px; }

/* Glass base */
.glass{
  border: 1px solid var(--glass-border-2);
  background: linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: var(--glass-shadow), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  position: relative;
}
.glass:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, var(--shine), transparent 40%),
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
  opacity:.65;
}
.glass:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08), transparent 55%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding:1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.22;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}

/* Header */
.topbar{
  position: sticky;
  top:0;
  z-index:50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.26));
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.70);
}
.topbar{
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    inset 0 -1px 0 rgba(255,255,255,.10);
}
.topbar:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 140px at 12% 0%, rgba(255,255,255,.08), transparent 62%),
    radial-gradient(900px 140px at 88% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%);
  opacity:.75;
}
.topbar:after{
  /* Apple-like hairline highlight */
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0),
      rgba(255,255,255,.22),
      var(--ring),
      var(--ring2),
      rgba(255,255,255,.20),
      rgba(0,0,0,0)
    );
  opacity:.7;
  filter: blur(.2px);
}
html[data-theme="light"] .topbar:after{
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0),
      rgba(12,18,40,.10),
      rgba(124,92,255,.10),
      rgba(47,227,255,.08),
      rgba(12,18,40,.10),
      rgba(0,0,0,0)
    );
  opacity:.55;
}
.topbar__inner{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  padding:16px 0;
  column-gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
  flex: 0 0 auto;
  justify-self: start;
  position: relative;
  transform-style: preserve-3d;
  perspective: 360px;
}
.brand img{ position:relative; z-index:2; }
.brand__mark{
  width:28px; height:28px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 14px color-mix(in oklab, var(--brand) 12%, transparent);
}

/* Atomic logo animation (entry + idle) */
.brand-logo{ border-radius: 10px; }
.text-grid{ grid-template-columns: repeat(12, 1fr); }
.text-col-8{ grid-column: span 8; }
.text-col-4{ grid-column: span 4; }
.text-col-12{ grid-column: span 12; }
.title-zero{ margin: 0; }
.footer-brand-title{ font-weight: 800; margin-bottom: 6px; }
.card-full-row{ grid-column: 1 / -1; }
.support-grid{ grid-template-columns: repeat(12, 1fr); }
.support-card-full{ grid-column: span 12; }
.support-kvgrid{ margin-top: 14px; }
.support-hint-top{ margin-top: 10px; }
.pricing-card-intro{ margin-top: 12px; }
.video-grid{ grid-template-columns: repeat(12, 1fr); }
.video-main-col{ grid-column: span 7; }
.video-result-col{ grid-column: span 5; }
.video-tabs-row{ display:flex; gap:8px; flex-wrap:wrap; }
.video-quality-card{
  padding: 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.video-quality-title{ font-weight: 800; }
.video-control-video-block{ display:none; }
.video-control-options-block{ display:none; }
.video-kling3-frames-block{ display:none; }
.video-avatar-audio-block{ display:none; }
.video-audio-rec-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.video-audio-preview{ width:100%; margin-top:10px; }
.form-actions-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.page-video #durationField{ margin-top: 8px; }
.video-form--kling-motion #durationField{ display:none !important; }
.video-quiz{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08));
}
.video-quiz-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
.video-quiz-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.token-cost-note{
  border: 1px solid var(--glass-border-2);
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color: var(--text);
  font-size: 13px;
}
.photo-wizard{
  display: grid;
  gap: 12px;
}
.photo-wizard__steps{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 2px;
  align-items: center;
}
.photo-step-dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  background: color-mix(in oklab, var(--card) 92%, transparent);
}
.photo-step-dot.active{
  color: var(--text);
  border-color: var(--ring);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 26%, transparent), color-mix(in oklab, var(--brand2) 20%, transparent));
}
.photo-step{
  display: none;
}
.photo-step.active{
  display: block;
}
body.swipe-page-out-left main{
  animation: pageSwipeOutLeft .24s cubic-bezier(.2,.7,.2,1) both;
}
body.swipe-page-out-right main{
  animation: pageSwipeOutRight .24s cubic-bezier(.2,.7,.2,1) both;
}
body.swipe-page-in-left main{
  animation: pageSwipeInLeft .38s cubic-bezier(.2,.8,.2,1) both;
}
body.swipe-page-in-right main{
  animation: pageSwipeInRight .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pageSwipeOutLeft{
  0%{ opacity:1; transform:translate3d(0,0,0); }
  100%{ opacity:.90; transform:translate3d(-14px,0,0); }
}
@keyframes pageSwipeOutRight{
  0%{ opacity:1; transform:translate3d(0,0,0); }
  100%{ opacity:.90; transform:translate3d(14px,0,0); }
}
@keyframes pageSwipeInLeft{
  0%{ opacity:.82; transform:translate3d(14px,0,0); }
  100%{ opacity:1; transform:translate3d(0,0,0); }
}
@keyframes pageSwipeInRight{
  0%{ opacity:.82; transform:translate3d(-14px,0,0); }
  100%{ opacity:1; transform:translate3d(0,0,0); }
}
.topbar--landing .landing-nav > a.active,
.topbar--landing .landing-nav .nav-cat__link.active{
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--brand) 24%, transparent), color-mix(in oklab, var(--brand2) 16%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
body.page-video .photo-wizard.video-mode-animating .video-tabs-row,
body.page-video .photo-wizard.video-mode-animating .photo-step.video-step.active{
  will-change: transform, opacity;
}
body.page-video .photo-wizard.video-mode-swipe-left .video-tabs-row,
body.page-video .photo-wizard.video-mode-swipe-left .photo-step.video-step.active{
  animation: videoModeSlideLeft .26s cubic-bezier(.2,.8,.2,1);
}
body.page-video .photo-wizard.video-mode-swipe-right .video-tabs-row,
body.page-video .photo-wizard.video-mode-swipe-right .photo-step.video-step.active{
  animation: videoModeSlideRight .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes videoModeSlideLeft{
  0%{ opacity:.68; transform:translateX(18px); }
  100%{ opacity:1; transform:translateX(0); }
}
@keyframes videoModeSlideRight{
  0%{ opacity:.68; transform:translateX(-18px); }
  100%{ opacity:1; transform:translateX(0); }
}
.photo-mode-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.photo-mode-btn{
  justify-content: center;
}
.photo-mode-btn.active{
  border-color: transparent;
}
.photo-wizard__nav{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  align-items: center;
}
.photo-wizard__nav .btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Video wizard nav buttons +20% size. */
body.page-video .photo-wizard__nav .btn{
  min-height: 41px;
  padding: 12px 17px;
  font-size: 14px;
}
.photo-wizard__hidden{
  display: none !important;
}
.blend-window{
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
}
.blend-tabs{
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.blend-tab{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.blend-tab.active{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 26%, transparent), color-mix(in oklab, var(--brand2) 20%, transparent));
}
.blend-tab.has-file::after{
  content: "✓";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ok) 80%, #ffffff);
  color: #020617;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(15,23,42,.28), 0 4px 6px rgba(15,23,42,.38);
}
.blend-panel{ padding: 12px; }
.blend-slot{ display: none; }
.blend-slot.active{ display: block; }
.blend-slot__controls{
  display: flex;
  gap: 8px;
  align-items: center;
}
.blend-slot__controls .input{
  flex: 1 1 auto;
  min-width: 0;
}
.blend-slot__remove[hidden]{
  display: none !important;
}
.admin-only-hidden{ display: none; }
@media (max-width: 700px){
  .photo-mode-grid{
    grid-template-columns: 1fr;
  }
  .photo-wizard__nav{
    position: sticky;
    bottom: 8px;
    z-index: 20;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--glass-bg);
  }
}

.brand.atom-logo-shell::before,
.brand.atom-logo-shell::after{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:42px;
  height:22px;
  border-radius:50%;
  border: 1.5px solid rgba(134, 176, 255, .42);
  box-shadow:
    0 0 16px color-mix(in oklab, var(--brand2) 18%, transparent),
    inset 0 0 8px color-mix(in oklab, var(--brand) 14%, transparent);
  pointer-events:none;
  z-index:1;
  transform-origin:center;
}
.brand.atom-logo-shell::before{
  border-color: rgba(134, 176, 255, .54);
  transform: translate(-50%,-50%) rotate(30deg);
  animation: atomRingSpinA 7.5s linear infinite;
}
.brand.atom-logo-shell::after{
  border-color: rgba(129, 214, 255, .48);
  transform: translate(-50%,-50%) rotate(-30deg);
  animation: atomRingSpinB 6.8s linear infinite;
}
.brand img.atom-logo{
  filter:
    drop-shadow(0 0 10px color-mix(in oklab, var(--brand2) 26%, transparent))
    drop-shadow(0 0 18px color-mix(in oklab, var(--brand) 22%, transparent))
    drop-shadow(0 0 30px rgba(255,255,255,.10));
  animation: atomCorePulse 2.6s ease-in-out infinite;
}

.brand.atom-logo-shell.logo-enter::before{
  animation: atomRingEnter .85s cubic-bezier(.2,.7,.2,1) 1, atomRingSpinA 7.5s linear .85s infinite;
}
.brand.atom-logo-shell.logo-enter::after{
  animation: atomRingEnter .95s cubic-bezier(.2,.7,.2,1) 1, atomRingSpinB 6.8s linear .95s infinite;
}
.brand img.atom-logo.logo-enter{
  animation: atomLogoEnter .9s cubic-bezier(.2,.8,.2,1) 1, atomCorePulse 2.6s ease-in-out .9s infinite;
}

/* Additional 3D orbital rings for premium logo animation */
.brand .atom-rings{
  position:absolute;
  left:14px;
  top:50%;
  width:56px;
  height:56px;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
  transform-style: preserve-3d;
}
.brand .atom-ring{
  position:absolute;
  left:50%;
  top:50%;
  width: var(--ring-w, 44px);
  height: var(--ring-h, 22px);
  transform: translate(-50%,-50%) rotateX(var(--rx, 68deg)) rotateZ(var(--rz, 0deg));
  border-radius: 50%;
  border: 1.6px solid var(--ring-color, var(--ring));
  opacity: .92;
  box-shadow:
    0 0 18px color-mix(in oklab, var(--ring-color, var(--ring)) 60%, transparent),
    inset 0 0 10px color-mix(in oklab, var(--ring-color, var(--ring)) 35%, transparent);
  animation: atomRing3DSpin var(--dur, 7s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.brand.logo-enter .atom-ring{
  animation:
    atomRing3DEnter .95s cubic-bezier(.2,.75,.2,1) 1,
    atomRing3DSpin var(--dur, 7s) linear .95s infinite;
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-evenly;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-self: stretch;
}
.nav a{
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  border:1px solid transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 14px;
}
.nav a:hover{
  color: var(--text);
  border-color: var(--glass-border);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  transform: translateY(-1px);
}
.nav a.active{
  color:var(--text);
  border-color: var(--glass-border);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 14%, transparent),
      color-mix(in oklab, var(--brand2) 12%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nav a:hover, .nav a.active{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
  }
}
.nav__right{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 0 0 auto;
  justify-self: end;
}

/* Header is a bit wider than page content */
.topbar .wrap{
  max-width: 1440px;
  padding: 0 20px;
}

/* No-scroll header: hide less important nav items on narrower widths */
@media (max-width: 1180px){
  .nav a[data-nav="docs.html"]{ display:none; }
  .nav a[data-nav="providers.html"]{ display:none; }
}
@media (max-width: 1040px){
  .nav a[data-nav="history.html"]{ display:none; }
}
@media (max-width: 940px){
  .nav a[data-nav="pricing.html"]{ display:none; }
}

/* Ergonomics: keep result visible on desktop */
.card--sticky{
  position: sticky;
  top: 88px;
  align-self: start;
}
@media (max-width: 820px){
  body.page-video .hero{
    display: none;
  }
  body.page-video .cards{
    padding-top: 8px;
  }
  body.page-video .cards .wrap{
    padding-left: 10px;
    padding-right: 10px;
  }
  body.page-video .video-result-col{
    display: block;
    grid-column: 1 / -1;
    order: 3;
    margin-top: 12px;
  }
  body.page-video .video-main-col{
    grid-column: 1 / -1;
    border-radius: 14px;
    padding: 12px;
    box-shadow: none;
    background: color-mix(in oklab, var(--card) 96%, transparent);
  }
  body.page-video .photo-wizard{
    gap: 10px;
  }
  body.page-video .photo-step-dot{
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  body.page-video .video-quiz-grid{
    grid-template-columns: 1fr;
  }
  body.page-video .photo-wizard__nav{
    position: sticky;
    bottom: 8px;
    z-index: 22;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 8px;
  }
  body.page-video .photo-wizard__nav .btn{
    min-height: 41px;
    padding: 12px 16px;
    font-size: 14px;
  }
  body.page-video .video-result-col .result{
    min-height: 140px;
  }
  .card--sticky{ position: static; top: auto; }
  body.page-photo .hero{
    display: none;
  }
  body.page-photo .cards{
    padding-top: 8px;
  }
  body.page-photo .cards .wrap{
    padding-left: 10px;
    padding-right: 10px;
  }
  body.page-photo .col-span-5{
    display: none;
  }
  body.page-photo .card.col-span-7{
    border-radius: 14px;
    padding: 12px;
    box-shadow: none;
    background: color-mix(in oklab, var(--card) 96%, transparent);
  }
  body.page-photo .photo-wizard{
    gap: 10px;
  }
  body.page-photo .photo-wizard__steps{
    justify-content: center;
  }
  body.page-photo .photo-step-dot{
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  body.page-photo .blend-tabs{
    gap: 4px;
    padding: 6px;
  }
  body.page-photo .blend-tab{
    padding: 5px 8px;
    font-size: 12px;
  }
  body.page-photo .blend-slot__controls{
    flex-direction: column;
    align-items: stretch;
  }
  body.page-photo .photo-wizard__nav{
    position: sticky;
    bottom: 8px;
    z-index: 22;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 8px;
  }
  body.page-text .chat-toolbar{
    justify-content: center;
  }
}

/* Buttons */
.btn{
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 16%, transparent),
      color-mix(in oklab, var(--brand2) 12%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: 0 14px 34px rgba(0,0,0,.18), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  color:var(--text);
  padding:10px 14px;
  border-radius:18px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
}
.btn:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.26), transparent 52%),
    radial-gradient(520px 160px at 18% 0%, rgba(255,255,255,.18), transparent 62%);
  opacity:.9;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: var(--glass-border);
  box-shadow: 0 18px 44px rgba(0,0,0,.22), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
}
.btn:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), var(--glass-inset);
}
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 14px 32px rgba(0,0,0,.22),
    0 0 0 4px var(--ring),
    0 0 0 9px rgba(0,0,0,0),
    var(--glass-inset);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .btn{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.btn--primary{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 95%, transparent),
    color-mix(in oklab, var(--brand2) 82%, transparent)
  );
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
    0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
    var(--glass-inset);
}
.btn--primary:hover{ transform: translateY(-1px); }
.btn--ghost{
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
}
.btn--danger{
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: rgba(255, 118, 118, .42);
}
.btn--small{ padding:8px 10px; border-radius:12px; font-size: 14px; }
.btn--small{ border-radius:16px; }

/* Hero */
.hero{
  padding:48px 0 22px;
}
.hero__card{
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  border-radius: var(--radius2);
  box-shadow: var(--shadow), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  padding:28px;
  overflow:hidden;
  position:relative;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero__card{
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.hero__card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(800px 320px at 20% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 55%),
    radial-gradient(760px 340px at 85% 25%, color-mix(in oklab, var(--brand2) 16%, transparent), transparent 55%);
  pointer-events:none;
}
.hero__card:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(1200px 240px at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  opacity:.75;
}
.hero__content{ position:relative; display:grid; gap:10px; }
.kicker{
  display:inline-flex;
  align-items:center;
  flex-wrap: nowrap;
  gap:10px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid var(--glass-border-2);
  color:var(--muted);
  background: linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: 0 10px 24px rgba(0,0,0,.14), var(--glass-inset);
  white-space: nowrap;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .kicker{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
  }
}
.kicker code{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.85);
}
.kicker span,
.kicker code{
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
html[data-theme="light"] .kicker code{ color: rgba(12,18,40,.85); }
.hero h1{
  margin:0;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.5px;
}
.hero p{ margin:0; color: var(--muted); font-size: 16px; line-height:1.6; max-width: 70ch; }
.cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top: 12px; }
.cta small{ color: var(--muted); }
#googleLoginBtn{ width: 100%; }
#telegramLoginWrap{ width: 100%; }
#googleLoginBtn,
#telegramLoginFallbackBtn{
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 16px;
}

/* Cards */
.cards{ padding: 18px 0 40px; }
.card{
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 10%, transparent),
      color-mix(in oklab, var(--brand2) 8%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 42%),
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.10), transparent 62%);
  opacity:.78;
  z-index: 0;
}
.card:after{
  content:"";
  position:absolute;
  inset:-60px;
  border-radius: 999px;
  pointer-events:none;
  background:
    conic-gradient(from 180deg,
      rgba(0,0,0,0),
      var(--glow-1),
      var(--glow-2),
      var(--glow-3),
      rgba(0,0,0,0)
    );
  filter: blur(28px);
  opacity: .0;
  transform: translate3d(0,0,0);
  mix-blend-mode: screen;
  z-index: 0;
  animation: glowSpin 12s linear infinite;
}
.card > *{ position: relative; z-index: 1; }
.card:hover{
  transform: translateY(-2px);
  border-color: var(--glass-border);
  box-shadow: 0 18px 44px rgba(0,0,0,.22), var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
}
.card:hover:after{ opacity: var(--glow-opacity); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .card{
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.card h3{ margin:0 0 6px; font-size: 18px; }
.card p{ margin:0; color: var(--muted); line-height:1.6; }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.card__top:last-child{ margin-bottom: 0; }
.badge{
  font-family: var(--mono);
  font-size: 12px;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid var(--glass-border-2);
  color: var(--muted);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: var(--glass-inset);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .badge{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.card__actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

/* Forms */
.form{
  display:grid;
  gap:14px;
}
.field{
  display:grid;
  gap:8px;
}
.label{ display:flex; justify-content:space-between; gap:12px; color: var(--muted); font-size: 14px; }
.label b{ color: var(--text); font-weight:700; }
.input, .select, .textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 10%, transparent),
      color-mix(in oklab, var(--brand2) 8%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
}
.input::placeholder, .textarea::placeholder{
  color: rgba(176, 184, 200, .72);
}
.sr-file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.file-picker{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:52px;
  padding:12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 10%, transparent),
      color-mix(in oklab, var(--brand2) 8%, transparent)
    ),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
}
.file-picker__value{
  min-width:0;
  flex:1 1 auto;
  color: var(--text);
  font-size: 15px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.textarea{ min-height: 120px; resize: vertical; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .input, .select, .textarea{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
  .file-picker{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--glass-border);
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 10px rgba(0,0,0,0), var(--glass-inset);
}
.hint{ color: var(--muted); font-size: 13px; line-height:1.45; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 820px){
  .row{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .nav__right{ gap:8px; }
  .file-picker{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .file-picker__value{
    width:100%;
  }
}

/* Text chat */
.chat-shell{
  border: 1px solid var(--glass-border-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  min-height: 580px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .chat-shell{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
.chat-messages{
  flex:1;
  overflow:auto;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap:12px;
}
.chat-msg{
  display:flex;
  align-items: flex-start;
}
.chat-msg--assistant{ justify-content:flex-start; }
.chat-msg--user{ justify-content:flex-end; }
.chat-bubble{
  width: fit-content;
  max-width: min(100%, 82%);
  border-radius: 16px;
  border: 1px solid rgba(130, 168, 232, .42);
  padding: 12px;
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.18);
}
.chat-msg--assistant .chat-bubble{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.12),
    0 8px 20px rgba(6,12,28,.16);
}
.chat-msg--user .chat-bubble{
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 18%, transparent),
      color-mix(in oklab, var(--brand2) 14%, transparent)
    ),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
}
.chat-msg__meta{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.chat-text p{
  margin: 0 0 8px;
  line-height: 1.55;
}
.chat-text p:last-child{ margin-bottom: 0; }
.chat-inline-code{
  font-family: var(--mono);
  border: 1px solid rgba(128, 168, 236, .52);
  border-radius: 8px;
  padding: 1px 6px;
  background: rgba(5,8,18,.44);
  color: #c8e3ff;
}
.chat-quote{
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid rgba(143, 186, 255, .86);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #d8dfeb;
}
.chat-table{
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
}
.chat-table th, .chat-table td{
  border: 1px solid rgba(128, 168, 236, .35);
  padding: 7px 8px;
  text-align: left;
}
.chat-table th{
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.chat-actions{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.chat-action{
  border: 1px solid var(--glass-border-2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chat-action--icon{
  width: 30px;
  height: 30px;
  padding: 0;
  display:grid;
  place-items:center;
  font-size: 14px;
}
.chat-action:hover{
  border-color: var(--glass-border);
}
.chat-action--mini{
  margin-bottom: 8px;
}
.chat-code-wrap{
  margin-top: 8px;
}
.chat-code-top{
  display:flex;
  justify-content: space-between;
  gap:8px;
  align-items:center;
  margin-bottom: 8px;
}
.chat-code-lang{
  font-family: var(--mono);
  font-size: 10px;
  color: #eaf4ff;
  border: 1px solid rgba(143, 184, 255, .8);
  border-radius: 999px;
  padding: 2px 8px;
  background: linear-gradient(180deg, rgba(37,62,120,.62), rgba(14,24,56,.62));
}
.chat-code{
  margin: 0;
  max-width: 100%;
  overflow:auto;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 232, .46);
  background: linear-gradient(180deg, rgba(2,6,18,.88), rgba(0,0,0,.66));
  padding: 10px;
  line-height: 1.5;
}
.chat-code code{
  font-family: var(--mono);
  font-size: 12px;
  color: #bfe6ff;
}
html[data-theme="light"] .chat-code-lang{
  color: #15223f;
  border-color: rgba(108, 156, 235, .78);
  background: linear-gradient(180deg, rgba(210,228,255,.92), rgba(194,217,255,.88));
}
.chat-composer{
  border-top: 1px solid var(--glass-border-2);
  padding: 12px;
}
.chat-input-row{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap:10px;
  align-items: center;
  width: min(100%, 900px);
  margin: 0 auto;
}
.chat-attach{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-2);
  color: var(--text);
  background: rgba(255,255,255,.05);
  box-shadow: var(--glass-inset);
  cursor: pointer;
  font-size: 18px;
  display:grid;
  place-items:center;
  line-height: 1;
}
.chat-attach:hover{
  border-color: var(--glass-border);
}
.chat-input{
  min-height: 44px;
  max-height: 180px;
  resize: none;
  overflow: hidden;
  text-align: left;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.45;
}
.chat-send{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--text);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 22%, transparent),
      color-mix(in oklab, var(--brand2) 16%, transparent)
    ),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18));
  box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  display:grid;
  place-items:center;
  line-height: 1;
}
.chat-send:hover{
  border-color: var(--glass-border);
  transform: translateY(-1px);
}
.chat-send:active{
  transform: translateY(0);
}
.chat-attachments{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.chat-attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--glass-border-2);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}
.chat-attachment button{
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
.typing-dots{
  display:inline-flex;
  gap:5px;
  align-items:center;
  min-height: 10px;
}
.typing-dots span{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 56%, #fff);
  opacity: .32;
  animation: typingPulse 1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay: .15s; }
.typing-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes typingPulse{
  0%, 100%{ transform: translateY(0); opacity: .26; }
  50%{ transform: translateY(-3px); opacity: .95; }
}

/* Admin dashboard */
.admin-spend-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.admin-spend-card{
  border: 1px solid var(--glass-border-2);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  display:grid;
  gap:10px;
}
.admin-spend-head{
  display:grid;
  gap:2px;
}
.admin-spend-head h4{
  margin:0;
  font-size: 24px;
  line-height: 1.15;
  text-transform: lowercase;
}
.admin-spend-total{
  color: var(--muted);
  font-size: 21px;
}
.admin-spend-chart{
  height: 190px;
  display:grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap:8px;
  align-items:end;
}
.admin-spend-bar{
  display:flex;
  align-items:flex-end;
  height:100%;
}
.admin-spend-bar span{
  width:100%;
  min-height: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}
.admin-spend-range{
  display:flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}
.admin-stats{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
.admin-stat{
  border: 1px solid var(--glass-border-2);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  display:grid;
  gap:4px;
}
.admin-stat b{
  font-size: 22px;
  line-height: 1.1;
}
.admin-stat span{
  color: var(--muted);
  font-size: 12px;
}
.admin-bars{
  display:grid;
  gap:10px;
}
.admin-bar-row{
  display:grid;
  grid-template-columns: 110px minmax(0, 1fr) 34px;
  gap:8px;
  align-items: center;
}
.admin-bar-label{
  color: var(--muted);
  font-size: 13px;
  text-transform: capitalize;
}
.admin-bar-track{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-2);
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.admin-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.admin-bar-value{
  text-align: right;
  font-family: var(--mono);
  color: var(--text);
}
.admin-hours{
  display:grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap:6px;
  align-items: end;
  min-height: 140px;
}
.admin-hour-col{
  display:grid;
  gap:6px;
  align-items: end;
}
.admin-hour-col span{
  display:block;
  width: 100%;
  min-height: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
}
.admin-hour-col code{
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.payments-kpi{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.payments-kpi-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08));
}
.payments-kpi-card.is-accent{
  border-color: rgba(62, 201, 160, .45);
}
.payments-kpi-label{
  color: var(--muted);
  font-size: 13px;
}
.payments-kpi-value{
  margin-top: 4px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.payments-chart-wrap{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
}
.payments-chart-y{
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  color: var(--muted);
  font-size: 12px;
}
.payments-chart-main{
  display: grid;
  grid-template-rows: 280px auto;
  gap: 8px;
}
#paymentsChart{
  width: 100%;
  height: 280px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to top, rgba(255,255,255,.06) 0 1px, transparent 1px 56px);
}
#paymentsChart .payments-line{
  fill: none;
  stroke: url(#payStroke);
  stroke-width: 3;
}
#paymentsChart .payments-area{
  fill: url(#payFill);
}
#paymentsChart circle{
  fill: #38c7a8;
}
.payments-chart-x{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.payments-list{
  margin-top: 8px;
  display: grid;
  gap: 10px;
}
.payments-row{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 92px 1fr 180px 120px;
  gap: 10px;
  align-items: center;
}
.payments-row-status{
  color: #4ad5b1;
  font-weight: 700;
}
.payments-row-main{
  min-width: 0;
}
.payments-row-id{
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payments-row-time{
  color: var(--muted);
  margin-top: 2px;
  font-size: 13px;
}
.payments-row-desc{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.payments-row-method{
  color: var(--muted);
  white-space: nowrap;
}
.payments-row-amount{
  text-align: right;
  font-size: 26px;
  font-weight: 800;
}
html[data-theme="light"] .chat-msg--assistant .chat-bubble{
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
}

/* Text page: neutral background + frosted chat bubbles */
body.page-text{
  background:
    radial-gradient(1200px 560px at 12% -8%, rgba(95, 164, 255, .28), transparent 62%),
    radial-gradient(980px 520px at 92% 4%, rgba(83, 238, 246, .20), transparent 60%),
    radial-gradient(1200px 660px at 50% 112%, rgba(158, 126, 255, .14), transparent 66%),
    linear-gradient(180deg, #eef3fb 0%, #e8edf7 48%, #e6ecf7 100%);
}
body.page-text:before{
  opacity: .18;
  mix-blend-mode: normal;
  background-image:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.56), transparent 40%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.42), transparent 36%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, rgba(255,255,255,0) 1px 2px);
}
body.page-text:after{
  opacity: .34;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(0,0,0,.035), transparent 60%),
    radial-gradient(1000px 620px at 50% 116%, rgba(0,0,0,.05), transparent 64%);
}
html[data-theme="dark"] body.page-text{
  background:
    radial-gradient(980px 520px at 14% -12%, rgba(72, 118, 255, .24), transparent 62%),
    radial-gradient(940px 520px at 88% 0%, rgba(53, 214, 223, .18), transparent 62%),
    radial-gradient(1080px 620px at 50% 112%, rgba(148, 108, 255, .16), transparent 66%),
    linear-gradient(180deg, #0b0f18 0%, #0f1623 52%, #111a2a 100%);
}
html[data-theme="dark"] body.page-text:before{
  opacity: .12;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.11), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.09), transparent 35%);
}
html[data-theme="dark"] body.page-text:after{
  opacity: .2;
}

body.page-text .chat-shell{
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14));
  border-color: rgba(120,130,150,.34);
}
html[data-theme="dark"] body.page-text .chat-shell{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.16);
}
body.page-text .chat-bubble{
  border-color: rgba(118,130,160,.42);
  background:
    radial-gradient(220px 120px at 10% 0%, rgba(255,255,255,.42), transparent 60%),
    linear-gradient(135deg, rgba(124, 172, 255, .18), rgba(123, 231, 255, .12)),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.32));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 18px rgba(20,24,30,.06),
    0 14px 30px rgba(16,20,28,.10);
}
body.page-text .chat-msg--assistant .chat-bubble{
  background:
    radial-gradient(230px 110px at 8% 0%, rgba(255,255,255,.48), transparent 62%),
    linear-gradient(135deg, rgba(91, 161, 255, .22), rgba(91, 245, 255, .16)),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.34));
}
body.page-text .chat-msg--user .chat-bubble{
  background:
    radial-gradient(240px 120px at 14% 0%, rgba(255,255,255,.45), transparent 62%),
    linear-gradient(135deg, rgba(145, 132, 255, .24), rgba(114, 226, 255, .16)),
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.30));
}
html[data-theme="dark"] body.page-text .chat-bubble{
  border-color: rgba(255,255,255,.18);
  background:
    radial-gradient(220px 120px at 10% 0%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(135deg, rgba(84, 126, 246, .24), rgba(54, 185, 210, .16)),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 18px rgba(0,0,0,.22),
    0 8px 20px rgba(0,0,0,.25);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  body.page-text .chat-shell,
  body.page-text .chat-bubble{
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    backdrop-filter: blur(16px) saturate(1.08);
  }
}

body.page-text .topbar{
  background: rgba(255,255,255,.56);
  border-bottom: 1px solid rgba(110,118,132,.22);
}
html[data-theme="dark"] body.page-text .topbar{
  background: rgba(11,13,15,.62);
  border-bottom-color: rgba(255,255,255,.12);
}
body.page-text .topbar:before,
body.page-text .topbar:after{
  opacity: .25;
}

.text-minimal{
  min-height: calc(100vh - 72px);
}
.text-minimal__chat{
  padding: 10px 0 10px;
  min-height: calc(100vh - 72px);
}
.text-minimal__chat .wrap{
  max-width: none;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
body.page-text .chat-shell--minimal{
  min-height: calc(100vh - 92px);
  height: calc(100vh - 92px);
  border: none;
  box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
body.page-text .chat-toolbar{
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 8px;
}
body.page-text .chat-model-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
body.page-text .chat-model-select{
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  min-width: 132px;
}
body.page-text .chat-shell--minimal .chat-messages{
  padding: 8px 0 12px;
}
body.page-text .chat-empty-title{
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #1b1e24;
  margin: 12vh 0 20px;
}
body.page-text .chat-empty-model{
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
body.page-text .chat-empty-question{
  color: inherit;
}
html[data-theme="dark"] body.page-text .chat-empty-title{
  color: #eceff5;
}
body.page-text .chat-shell--empty .chat-composer{
  margin-top: 0;
}
body.page-text .chat-composer{
  border-top: none;
  padding: 8px 0 10px;
  width: 100%;
  margin: 0;
  position: sticky;
  bottom: 0;
}
body.page-text .chat-compose-meta{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 6px;
}
body.page-text .chat-input-row{
  border: 1px solid rgba(115,123,136,.24);
  border-radius: 18px;
  padding: 8px;
  width: 100%;
  background:
    radial-gradient(420px 140px at 12% 0%, rgba(255,255,255,.56), transparent 62%),
    linear-gradient(135deg, rgba(96, 161, 255, .16), rgba(88, 236, 244, .10)),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  box-shadow: 0 12px 36px rgba(16,20,28,.10), inset 0 1px 0 rgba(255,255,255,.64);
}
html[data-theme="dark"] body.page-text .chat-input-row{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}
body.page-text .chat-input{
  border: none;
  box-shadow: none;
  background: transparent;
}
body.page-text .chat-attach{
  background: rgba(255,255,255,.34);
}
body.page-text .chat-send{
  box-shadow: none;
}
body.page-text .chat-msg__meta{
  display: none;
}
@media (max-width: 820px){
  body.page-text .chat-compose-meta{
    margin-bottom: 4px;
    justify-content: flex-end;
  }
  body.page-text .chat-model-wrap{
    gap: 6px;
    font-size: 11px;
  }
  body.page-text .chat-model-select{
    min-height: 30px;
    min-width: 116px;
    padding: 4px 8px;
    font-size: 12px;
  }
  body.page-text .chat-empty-title{
    font-size: 30px;
    margin-top: 8vh;
  }
  .text-minimal__chat{
    padding-top: 16px;
  }
}

@media (max-width: 820px){
  body.page-text .text-minimal__chat .wrap{
    padding-bottom: 126px;
  }
  body.page-text .chat-shell--minimal .chat-messages{
    padding-bottom: 132px !important;
  }
  body.page-text .chat-composer{
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.82) 38%, rgba(255,255,255,.92));
    margin: 0;
  }
  html[data-theme="dark"] body.page-text .chat-composer{
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(6,10,18,.78) 38%, rgba(6,10,18,.9));
  }
  body.page-text .chat-attachments{
    margin-top: 6px;
    min-height: 22px;
  }
}
@media (max-width: 980px){
  .admin-spend-grid{
    grid-template-columns: 1fr;
  }
  .text-chat-card,
  .text-settings-card{
    grid-column: span 12 !important;
  }
  .chat-shell{
    min-height: 520px;
  }
  .admin-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payments-kpi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payments-chart-wrap{
    grid-template-columns: 1fr;
  }
  .payments-row{
    grid-template-columns: 1fr;
  }
  .payments-row-amount{
    text-align: left;
  }
}

/* Result */
.result{
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 4px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 9%, transparent),
      color-mix(in oklab, var(--brand2) 7%, transparent)
    ),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10));
  color: var(--muted);
  box-shadow: var(--glass-outline), var(--glass-outline-2), var(--glass-halo);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .result{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast));
  }
}
html[data-theme="light"] .result{
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.50));
  border-color: rgba(12,18,40,.18);
}
.result__media{
  margin-top: 12px;
  display:grid;
  gap:12px;
}
.result__media img, .result__media video{
  width: 100%;
  max-height: 520px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}

/* Footer */
footer{
  padding: 40px 0 60px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin: 40px 0 0;
  width: 100%;
}

@media (prefers-reduced-motion: reduce){
  .btn, .card, .nav a{ transition: none !important; }
  .btn:hover, .card:hover, .nav a:hover{ transform: none !important; }
  .card:after, .stat:after, .history-item:before, .brand::before, .brand::after, .brand img{ animation: none !important; }
}

/* Make glass feel consistent across "blocks" */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .pill, .kv, .setting-row, .stat, .history-item, .badge, .kicker{
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
    backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
  }
}

/* Light theme: glow should stay premium (not washed out) */
html[data-theme="light"] .card:after,
html[data-theme="light"] .stat:after{
  mix-blend-mode: multiply;
  filter: blur(30px);
}

@keyframes glowSpin{
  0%{ transform: rotate(0deg) scale(1); }
  100%{ transform: rotate(360deg) scale(1); }
}
@keyframes shimmerX{
  0%,100%{ transform: translateX(-8%); opacity: .35; }
  50%{ transform: translateX(8%); opacity: .65; }
}
@keyframes atomLogoEnter{
  0%{ transform: translateY(-4px) scale(.68); opacity:.2; filter: blur(1px); }
  60%{ transform: translateY(0) scale(1.08); opacity:1; filter: blur(0); }
  100%{ transform: translateY(0) scale(1); opacity:1; filter: blur(0); }
}
@keyframes atomCorePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}
@keyframes atomRingEnter{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.55) rotate(0deg); }
  100%{ opacity:1; }
}
@keyframes atomRing3DEnter{
  0%{
    opacity:0;
    transform: translate(-50%,-50%) scale(.45) rotateX(var(--rx, 68deg)) rotateZ(0deg);
    filter: blur(1px);
  }
  100%{
    opacity:.92;
    transform: translate(-50%,-50%) scale(1) rotateX(var(--rx, 68deg)) rotateZ(var(--rz, 0deg));
    filter: blur(0);
  }
}
@keyframes atomRingSpinA{
  from{ transform: translate(-50%,-50%) rotate(30deg); }
  to{ transform: translate(-50%,-50%) rotate(390deg); }
}
@keyframes atomRingSpinB{
  from{ transform: translate(-50%,-50%) rotate(-30deg); }
  to{ transform: translate(-50%,-50%) rotate(-390deg); }
}
@keyframes atomRing3DSpin{
  from{ transform: translate(-50%,-50%) rotateX(var(--rx, 68deg)) rotateZ(var(--rz, 0deg)) rotateY(0deg); }
  to{ transform: translate(-50%,-50%) rotateX(var(--rx, 68deg)) rotateZ(var(--rz, 0deg)) rotateY(360deg); }
}

/* Profile page */
.profile-hero .hero__card{ padding: 26px; }
.profile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top: 8px;
}
.profile-head__meta{ min-width: 0; }
.profile-name{
  margin:0;
  font-size: clamp(24px, 3.2vw, 38px);
  letter-spacing: -.4px;
}
.profile-sub{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }
.profile-head__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.avatar{
  width: 68px;
  height: 68px;
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(26px 26px at 26% 18%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 95%, transparent),
      color-mix(in oklab, var(--brand2) 70%, transparent)
    );
  box-shadow: 0 18px 44px color-mix(in oklab, var(--brand) 18%, transparent), var(--glass-inset);
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-2);
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: var(--glass-inset);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}
.pill--muted{ color: var(--muted); }
.pill--ok{
  border-color: rgba(95, 205, 137, .45);
  background: color-mix(in oklab, var(--ok) 10%, transparent);
}
.pill--bad{
  border-color: rgba(255, 118, 118, .45);
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}

.profile-grid{ grid-template-columns: repeat(12, 1fr); }
.profile-grid > .card{ grid-column: span 12; }
.profile-grid > .card:nth-child(1),
.profile-grid > .card:nth-child(2){ grid-column: span 6; }

.statgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.stat{
  border: 1px solid var(--glass-border-2);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: 0 12px 28px rgba(0,0,0,.16), var(--glass-inset);
  padding: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stat:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 140px at 10% 0%, rgba(255,255,255,.10), transparent 62%);
  opacity:.6;
  z-index: 0;
}
.stat:after{
  content:"";
  position:absolute;
  inset:-50px;
  pointer-events:none;
  border-radius: 999px;
  background: conic-gradient(from 220deg, rgba(0,0,0,0), var(--glow-2), var(--glow-1), rgba(0,0,0,0));
  filter: blur(26px);
  opacity: .0;
  mix-blend-mode: screen;
  z-index: 0;
  animation: glowSpin 14s linear infinite;
}
.stat > *{ position: relative; z-index: 1; }
.stat:hover:after{ opacity: calc(var(--glow-opacity) * .82); }
.stat__k{ color: var(--muted); font-size: 13px; }
.stat__v{ font-weight: 900; font-size: 26px; letter-spacing: -.3px; margin-top: 4px; }
.stat__hint{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.profile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

.settings{ display:grid; gap: 10px; margin-top: 12px; }
.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--glass-border-2);
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: var(--glass-inset);
}

.switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  -webkit-user-select:none;
  user-select:none;
}
.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.switch__ui{
  width: 48px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-2);
  background: rgba(0,0,0,.20);
  box-shadow: var(--glass-inset);
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}
.switch__ui:before{
  content:"";
  position:absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .16s ease;
}
.switch input:checked + .switch__ui{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 85%, transparent),
    color-mix(in oklab, var(--brand2) 60%, transparent)
  );
  border-color: rgba(255,255,255,.22);
}
.switch input:checked + .switch__ui:before{ transform: translateX(18px); }

.history{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.history-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border-2);
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: var(--glass-inset);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.history-item:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(720px 180px at 20% 0%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  opacity:.55;
  z-index: 0;
  animation: shimmerX 4.8s ease-in-out infinite;
}
.history-item > *{ position: relative; z-index: 1; }
.history-item:hover{
  transform: translateY(-1px);
  border-color: var(--glass-border);
  box-shadow: 0 14px 34px rgba(0,0,0,.18), var(--glass-inset);
}
.history-item__title{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.history-item__prompt{ margin-top: 6px; color: var(--text); font-weight: 650; line-height: 1.35; }
.history-item__meta{ margin-top: 6px; color: var(--muted); font-size: 12px; }

.kvgrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.kv{
  border: 1px solid var(--glass-border-2);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: var(--glass-inset);
}
.kv__k{ color: var(--muted); font-size: 12px; }
.kv__v{ margin-top: 6px; font-weight: 800; overflow:hidden; text-overflow: ellipsis; }

@media (max-width: 900px){
  .statgrid{ grid-template-columns: repeat(2, 1fr); }
  .kvgrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px){
  .profile-head{ flex-direction: column; align-items:flex-start; }
  .profile-head__actions{ width: 100%; justify-content:flex-start; }
  .profile-grid > .card:nth-child(1),
  .profile-grid > .card:nth-child(2){ grid-column: span 12; }
}

/* Generic content lists + grids */
.list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}
.list b{ color: var(--text); }

.pricing-grid{
  grid-template-columns: repeat(12, 1fr);
}
.pricing-card{ grid-column: span 3; }
.pricing-card--featured{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 24px 70px color-mix(in oklab, var(--brand) 18%, transparent),
    0 18px 44px rgba(0,0,0,.20),
    var(--glass-inset);
}

/* Pricing: token packages */
.price{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 34px;
  line-height: 1.05;
}
.price__sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.price__sub b{ color: var(--text); }

.docs-grid{
  grid-template-columns: repeat(12, 1fr);
}
.docs-grid > .card{ grid-column: span 4; }

@media (max-width: 980px){
  .pricing-card{ grid-column: span 6; }
  .docs-grid > .card{ grid-column: span 6; }
}
@media (max-width: 820px){
  .pricing-card{ grid-column: span 12; }
  .docs-grid > .card{ grid-column: span 12; }
}
.footer__inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mono{ font-family: var(--mono); font-size: 12px; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 140;
  max-width: min(720px, calc(100vw - 36px));
  width: max-content;
  border-radius: 18px;
  border: 1px solid var(--glass-border-2);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand2) 8%, transparent)),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat)) brightness(var(--glass-brightness));
  backdrop-filter: blur(22px) saturate(var(--glass-sat)) brightness(var(--glass-brightness));
  box-shadow:
    0 22px 54px rgba(0,0,0,.30),
    var(--glass-inset),
    var(--glass-outline),
    var(--glass-outline-2),
    var(--glass-halo);
  padding: 10px 16px;
  color: var(--text);
  display:none;
}
html[data-theme="light"] .toast{
  background:
    linear-gradient(160deg, rgba(124,92,255,.08), rgba(47,227,255,.06)),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
}
.toast.show{ display:block; animation: pop .18s ease-out; }
@keyframes pop{
  from{ transform: translateX(-50%) translateY(8px); opacity:.0 }
  to{ transform: translateX(-50%) translateY(0); opacity:1 }
}
.toast__title{ display:none; }
.toast__msg{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cookie/Privacy consent banner */
body.has-consent-banner{
  padding-bottom: 104px;
}
.consent-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--glass-border-2);
  color: var(--text);
  background:
    linear-gradient(160deg, color-mix(in oklab, var(--brand) 10%, transparent), color-mix(in oklab, var(--brand2) 8%, transparent)),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
  box-shadow:
    0 22px 54px rgba(0,0,0,.30),
    var(--glass-inset),
    var(--glass-outline),
    var(--glass-outline-2),
    var(--glass-halo);
  -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat)) brightness(var(--glass-brightness));
  backdrop-filter: blur(22px) saturate(var(--glass-sat)) brightness(var(--glass-brightness));
}
.consent-banner__text{
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.consent-banner__text a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-banner__btn{
  flex: 0 0 auto;
}
@media (max-width: 820px){
  body.has-consent-banner{
    padding-bottom: 132px;
  }
  .consent-banner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .consent-banner__btn{
    width: 100%;
  }
}
html[data-theme="light"] .consent-banner{
  background:
    linear-gradient(160deg, rgba(124,92,255,.08), rgba(47,227,255,.06)),
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2));
}

/* ------------------------------------------------------------------
   Landing page header (index): compact, premium, like reference
------------------------------------------------------------------- */
.topbar--landing{
  position: sticky;
  top: 0;
  z-index: 80;
  overflow: visible;
}
.topbar--landing .wrap{
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.landing-topbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  min-height: 58px;
  border-radius: 0;
  border: 1px solid rgba(171, 194, 238, .34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -10px 16px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}
.landing-brand{
  min-width: max-content;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
  justify-self: start;
}
.landing-brand span{
  font-weight: 900;
  letter-spacing: .02em;
  display: inline-block;
  line-height: 1;
  background: linear-gradient(135deg, #255dff 0%, #4a9dff 36%, #67d4ff 68%, #8af1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 12px rgba(53, 150, 255, .14);
}
.landing-brand img,
.landing-brand .brand-logo,
.landing-brand .logo-round{
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  mix-blend-mode: screen;
  isolation: isolate;
}
html[data-theme="light"] .landing-topbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.44)),
    linear-gradient(180deg, rgba(124,92,255,.04), rgba(47,227,255,.03));
  border-color: rgba(12,18,40,.14);
}
.landing-nav{
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 95%, transparent),
    color-mix(in oklab, var(--brand2) 82%, transparent)
  );
  box-shadow:
    0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
    0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
    var(--glass-inset);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  max-width: min(100%, 520px);
  overflow-x: auto;
  width: min-content;
  min-height: 42px;
}
.landing-nav--has-admin{
  max-width: min(100%, 640px);
}
.landing-nav::-webkit-scrollbar{ display: none; }
.landing-nav--categories{
  overflow: visible;
}
.landing-nav a{
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: .14s ease;
}
.landing-nav a:hover,
.landing-nav a.active{
  color: var(--text);
  border-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.nav-cat{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-cat__link{
  display: inline-flex;
  align-items: center;
}
.nav-cat__menu{
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-8px);
  min-width: 210px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--glass-border-2);
  background: linear-gradient(180deg, rgba(18,18,20,.94), rgba(12,12,14,.92));
  box-shadow:
    0 18px 38px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.16);
  display: grid;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 220;
}
.nav-cat__menu a{
  color: var(--text);
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.nav-cat__menu a:hover{
  border-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
}
.nav-cat.open .nav-cat__menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
html[data-theme="light"] .nav-cat__menu{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,255,.94));
  border-color: rgba(12,18,40,.16);
  box-shadow:
    0 14px 30px rgba(15,23,48,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme="light"] .nav-cat__menu a{
  color: #18223d;
}
html[data-theme="light"] .nav-cat__menu a:hover{
  border-color: rgba(12,18,40,.22);
  background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(47,227,255,.08));
}
.landing-auth{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: relative;
  z-index: 100;
  margin-left: 0;
  margin-right: 4px;
  min-height: 35px;
}
.landing-auth #themeToggle{
  border: 1px solid rgba(179, 198, 232, .44);
}
.landing-auth .btn{
  min-height: 35px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  line-height: 1;
}
.landing-auth a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(179, 198, 232, .46);
  color: var(--text);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 20%, transparent),
      color-mix(in oklab, var(--brand2) 16%, transparent),
      rgba(255,255,255,.04)
    ),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -10px 16px rgba(0,0,0,.12),
    0 10px 22px rgba(0,0,0,.18);
}
.landing-auth a.btn::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%, rgba(255,255,255,.18));
  opacity: .48;
  mix-blend-mode: screen;
}
.landing-auth a.btn:hover,
.landing-auth a.btn:focus-visible{
  border-color: rgba(139, 176, 240, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -10px 16px rgba(0,0,0,.10),
    0 14px 28px color-mix(in oklab, var(--brand) 20%, transparent);
}
html[data-theme="light"] .landing-auth a.btn{
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 18%, rgba(255,255,255,.44)),
      color-mix(in oklab, var(--brand2) 14%, rgba(255,255,255,.34))
    ),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.54));
  border-color: rgba(12,18,40,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -10px 16px rgba(12,18,40,.06),
    0 10px 22px rgba(15,23,48,.12);
}
.theme-host{ position: relative; }
.theme-popover{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(300px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.20));
  box-shadow:
    0 16px 36px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  display: none;
  z-index: 280;
}
.theme-open .theme-popover{ display: grid; gap: 8px; }
.theme-popover__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.theme-chip{
  border-radius: 999px;
  min-height: 34px;
  border: 1px solid var(--glass-border-2);
  color: var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}
.theme-chip.active{
  color: var(--text);
  border-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.theme-popover__title{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.theme-slider{
  width: 100%;
  accent-color: var(--brand);
}
.theme-popover__labels{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.landing-auth .btn:hover,
.landing-auth .btn:focus-visible,
.landing-auth .btn.btn--primary{
  color: var(--text);
  border-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.landing-auth .btn::after{
  display: none;
}
.landing-avatar-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(179, 198, 232, .46);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  overflow: hidden;
  padding: 0;
}
.landing-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-avatar-fallback{
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.landing-avatar-wrap{
  position: relative;
  display: inline-flex;
}
.landing-avatar-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 132px;
  border: 1px solid var(--glass-border-2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.94));
  box-shadow: 0 14px 30px rgba(15,23,48,.18);
  padding: 6px;
  display: none;
  z-index: 260;
}
.landing-avatar-wrap.open .landing-avatar-menu{
  display: grid;
  gap: 4px;
}
.landing-avatar-menu__item{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.landing-avatar-menu__item:hover{
  background: linear-gradient(180deg, rgba(124,92,255,.10), rgba(47,227,255,.08));
}

/* Dark theme: avatar dropdown must stay readable */
html[data-theme="dark"] .landing-avatar-menu{
  border-color: rgba(166,188,228,.28);
  background:
    linear-gradient(180deg, rgba(17,21,30,.96), rgba(13,17,26,.94));
  box-shadow:
    0 18px 38px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="dark"] .landing-avatar-menu__item{
  color: #eaf1ff;
}
html[data-theme="dark"] .landing-avatar-menu__item:hover,
html[data-theme="dark"] .landing-avatar-menu__item:focus-visible{
  color: #ffffff;
  background: linear-gradient(180deg, rgba(101,136,238,.24), rgba(66,201,230,.20));
}

.hero--landing .hero__card{
  padding: 36px;
}
.landing-points{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.landing-point{
  border: 1px solid var(--glass-border-2);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 8px;
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  box-shadow: var(--glass-inset);
}
.landing-point b{
  color: var(--text);
}
.landing-point span{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 900px){
  .landing-topbar{
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: stretch;
    padding: 10px 0 12px;
  }
  .landing-brand{ justify-self: flex-start; }
  .landing-brand span{ font-size: 13px; }
  .landing-auth{ justify-self: flex-end; }
  .landing-nav{
    min-width: 0;
    width: min(100%, 560px);
  }
}
@media (max-width: 700px){
  .landing-topbar{
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "brand . auth"
      "nav nav nav";
    align-items: center;
    gap: 8px;
    padding: 8px 0 10px;
  }
  .landing-brand{
    grid-area: brand;
    min-width: 0;
    margin-left: 0;
    gap: 6px;
  }
  .landing-brand span{
    font-size: 11px;
    letter-spacing: .01em;
    max-width: 86px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .landing-brand img,
  .landing-brand .brand-logo,
  .landing-brand .logo-round{
    width: 22px;
    height: 22px;
  }
  .landing-nav{
    grid-area: nav;
    justify-self: center;
    width: 100%;
    max-width: 560px;
    min-height: 36px;
    padding: 3px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(135deg, rgba(106,143,240,.16), rgba(59,210,236,.14));
  }
  .landing-nav a{
    padding: 6px 11px;
    font-size: 13px;
  }
  .landing-auth{
    grid-area: auth;
    width: auto;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    margin-right: 0;
    min-height: 30px;
  }
  .landing-auth .btn{
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: none;
  }
  .landing-avatar-btn{
    width: 32px;
    height: 32px;
  }
  .landing-avatar-menu{
    right: -4px;
  }
  html[data-theme="dark"] .landing-auth a.btn,
  html[data-theme="dark"] .landing-auth #themeToggle{
    box-shadow: none;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border-color: rgba(166,188,228,.34);
  }
  html[data-theme="dark"] .landing-nav{
    box-shadow: none;
    background: linear-gradient(135deg, rgba(106,143,240,.22), rgba(59,210,236,.20));
  }
  .landing-auth #themeToggle{
    min-width: 56px;
  }
  .theme-popover{
    right: 0;
    left: auto;
    width: min(250px, calc(100vw - 24px));
  }
  .brand.atom-logo-shell::before,
  .brand.atom-logo-shell::after,
  .brand .atom-rings{
    display: none !important;
  }
  .brand img.atom-logo{
    animation: none !important;
    filter: none !important;
  }
  .nav-cat__menu{
    left: 0;
    right: auto;
    transform: translateX(0) translateY(-8px);
    min-width: 180px;
  }
  .nav-cat.open .nav-cat__menu{
    transform: translateX(0) translateY(0);
  }
  .landing-points{
    grid-template-columns: 1fr;
  }
  .hero--landing .hero__card{
    padding: 24px;
  }
}
@media (max-width: 420px){
  .landing-brand span{
    max-width: 68px;
    font-size: 10px;
  }
  .landing-auth .btn{
    padding: 5px 8px;
    font-size: 11px;
  }
}

@media (max-width: 820px){
  .grid-cols-12{
    grid-template-columns: 1fr;
  }
  .col-span-7,
  .col-span-5{
    grid-column: 1 / -1;
  }
}

/* Site-wide adaptive layout */
@media (max-width: 1200px){
  .wrap{ padding-left: 14px; padding-right: 14px; }
  .hero{ padding: 40px 0 18px; }
  .hero__card{ padding: 24px; }
  .card{ padding: 16px; }
}
@media (max-width: 980px){
  .wrap{ padding-left: 12px; padding-right: 12px; }
  .cards{ padding: 14px 0 28px; }
  .hero h1{ line-height: 1.1; }
  .cta, .card__actions{ gap: 8px; }
}
@media (max-width: 760px){
  .hero{ padding: 26px 0 14px; }
  .hero__card{ padding: 18px; border-radius: 16px; }
  .card{ padding: 14px; border-radius: 14px; }
  .btn{ min-height: 40px; padding: 9px 12px; }
  .kicker{ max-width: 100%; }
  .topbar,
  .landing-topbar{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--glass-bg) !important;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .topbar:before,
  .topbar:after{
    display:none;
  }
  .landing-topbar{
    box-shadow: none;
    border-color: var(--glass-border-2);
  }
}

/* ------------------------------------------------------------------
   Dark theme: iOS Liquid Glass (global override)
   Applies to blocks, buttons and form fields.
------------------------------------------------------------------- */
html[data-theme="dark"]{
  --liquid-sheen: color-mix(in oklab, var(--brand) 28%, rgba(255,255,255,.20));
  --liquid-sheen-soft: color-mix(in oklab, var(--brand2) 18%, rgba(255,255,255,.08));
  --liquid-edge: color-mix(in oklab, var(--brand) 44%, rgba(255,255,255,.24));
  --liquid-edge-soft: color-mix(in oklab, var(--brand2) 30%, rgba(255,255,255,.12));
  --liquid-fill-a: color-mix(in oklab, var(--brand) 20%, rgba(255,255,255,.06));
  --liquid-fill-b: color-mix(in oklab, var(--brand2) 12%, rgba(255,255,255,.04));
  --liquid-fill-c: color-mix(in oklab, var(--brand) 8%, rgba(255,255,255,.02));
  --liquid-drop: 0 26px 70px color-mix(in oklab, var(--brand) 14%, rgba(0,0,0,.44));
}

html[data-theme="dark"] .topbar{
  background:
    linear-gradient(180deg, rgba(10,10,12,.62), rgba(10,10,12,.28)),
    radial-gradient(1000px 180px at 50% 0%, var(--liquid-sheen-soft), transparent 65%);
  border-bottom-color: var(--liquid-edge-soft);
  box-shadow:
    0 24px 56px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.20);
  -webkit-backdrop-filter: blur(24px) saturate(135%) brightness(1.15);
  backdrop-filter: blur(24px) saturate(135%) brightness(1.15);
}

/* Landing header: full-width matte transparent shell */
.topbar.topbar--landing{
  border-bottom-color: transparent;
  box-shadow: none;
}
.topbar.topbar--landing:before,
.topbar.topbar--landing:after{
  opacity: .35;
}
html[data-theme="dark"] .topbar.topbar--landing{
  background:
    linear-gradient(180deg, rgba(10,10,12,.26), rgba(10,10,12,.10)),
    radial-gradient(1000px 180px at 50% 0%, rgba(255,255,255,.06), transparent 68%);
}
html[data-theme="light"] .topbar.topbar--landing{
  background:
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.28)),
    radial-gradient(1000px 180px at 50% 0%, rgba(124,92,255,.06), transparent 70%);
}

html[data-theme="dark"] .hero__card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .result,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .kv,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .switch__ui,
html[data-theme="dark"] .nav a{
  border-color: var(--liquid-edge-soft);
  background:
    linear-gradient(160deg, var(--liquid-fill-a), var(--liquid-fill-b) 42%, var(--liquid-fill-c)),
    radial-gradient(1200px 260px at 18% -10%, var(--liquid-sheen-soft), transparent 62%);
  box-shadow:
    var(--liquid-drop),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 26px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.10);
  color: var(--text);
  -webkit-backdrop-filter: blur(28px) saturate(138%) brightness(1.16) contrast(1.08);
  backdrop-filter: blur(28px) saturate(138%) brightness(1.16) contrast(1.08);
}

html[data-theme="dark"] .hero__card::before,
html[data-theme="dark"] .card::before,
html[data-theme="dark"] .result::before,
html[data-theme="dark"] .history-item::before,
html[data-theme="dark"] .btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, var(--liquid-sheen), transparent 44%),
    radial-gradient(900px 220px at 22% 0%, rgba(255,255,255,.14), transparent 64%),
    radial-gradient(740px 180px at 82% 18%, rgba(255,255,255,.10), transparent 60%);
  opacity:.9;
}

html[data-theme="dark"] .hero__card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .result{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] .btn--danger{
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  border: 1.4px solid var(--liquid-edge);
  border-radius: 20px;
  min-height: 46px;
  padding: 12px 18px;
  font-weight: 650;
  letter-spacing: .01em;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -14px 22px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.10);
}

html[data-theme="dark"] .btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  padding:1px;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,.42),
      rgba(255,255,255,.18) 35%,
      rgba(255,255,255,.08) 62%,
      rgba(255,255,255,.28)
    );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.92;
}

html[data-theme="dark"] .btn--small{
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 17px;
  font-size: 14px;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea{
  color: #f6f7fb;
}
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder{
  color: rgba(232,236,245,.78);
}

html[data-theme="dark"] .label,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .toast__msg{
  color: rgba(226,230,239,.86);
}

/* Dark theme: keep accent visible and make Theme button calmer than Login */
html[data-theme="dark"] .landing-auth a.btn{
  color: #ffffff;
  border-color: rgba(146, 183, 246, .58);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 34%, rgba(255,255,255,.06)),
      color-mix(in oklab, var(--brand2) 30%, rgba(255,255,255,.03))
    ),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:
    0 12px 28px color-mix(in oklab, var(--brand) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -12px 18px rgba(0,0,0,.18);
}
html[data-theme="dark"] .landing-auth a.btn:hover,
html[data-theme="dark"] .landing-auth a.btn:focus-visible{
  border-color: rgba(146, 190, 255, .78);
  box-shadow:
    0 16px 34px color-mix(in oklab, var(--brand) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -10px 16px rgba(0,0,0,.14);
}
html[data-theme="dark"] .landing-auth #themeToggle{
  color: rgba(226,230,239,.82);
  text-shadow: none;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 16px rgba(0,0,0,.20);
}
html[data-theme="dark"] .landing-auth #themeToggle:hover,
html[data-theme="dark"] .landing-auth #themeToggle:focus-visible{
  color: rgba(240,244,252,.92);
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 16px rgba(0,0,0,.16);
}

/* Dark theme reboot: cleaner and less glossy */
html[data-theme="dark"]{
  --bg:#121417;
  --bg2:#121417;
  --card:#1a1d22;
  --text:#eef1f5;
  --muted:#a6afbd;
  --border: rgba(255,255,255,.10);
  --glass-bg: rgba(28,32,38,.88);
  --glass-bg-2: rgba(22,25,31,.88);
  --glass-bg-soft: rgba(30,35,42,.82);
  --glass-bg-soft-2: rgba(24,27,33,.82);
  --glass-border: rgba(255,255,255,.16);
  --glass-border-2: rgba(255,255,255,.11);
  --glass-shadow: 0 10px 28px rgba(0,0,0,.34);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Keep page canvas truly dark in dark mode (incl. iOS Safari). */
html[data-theme="dark"],
html[data-theme="dark"] body{
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .landing-topbar{
  background: var(--glass-bg);
  border-color: var(--glass-border-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* Dark header contrast fix */
html[data-theme="dark"] .landing-brand span{
  background: linear-gradient(135deg, #84b6ff 0%, #9fd0ff 38%, #7ae8ff 70%, #c8fcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] .landing-nav{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .landing-nav a{
  color: #e8edf5;
}
html[data-theme="dark"] .landing-nav a:hover,
html[data-theme="dark"] .landing-nav a.active{
  color: #ffffff;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
  box-shadow: none;
}
html[data-theme="dark"] .landing-auth .btn{
  color: #eef2f8;
}

html[data-theme="dark"] .hero__card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .result,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea{
  background: linear-gradient(180deg, var(--glass-bg-soft), var(--glass-bg-soft-2));
  border-color: var(--glass-border-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}

/* ------------------------------------------------------------------
   Mobile header hard reset (stable, no flicker, no overlap)
------------------------------------------------------------------- */
@media (max-width: 820px){
  html, body{
    overflow-x: hidden;
  }
  /* Prevent footer overlap with iOS bottom browser bar. */
  footer{
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  html[data-theme="dark"] body{
    min-height: 100dvh;
    background: var(--bg) !important;
  }
  /* Remove heavy fixed overlays on mobile dark mode (Safari artifact fix). */
  html[data-theme="dark"] body:before,
  html[data-theme="dark"] body:after{
    opacity: 0 !important;
    mix-blend-mode: normal;
  }
  html[data-theme="dark"] footer{
    background: var(--bg);
  }
  .topbar--landing{
    position: sticky;
    top: 0;
    z-index: 250;
  }
  .topbar--landing .wrap.landing-topbar{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand auth"
      "nav nav";
    gap: 8px !important;
    padding: 8px 10px 10px !important;
    min-height: 0 !important;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--card) !important;
    animation: none !important;
  }
  .topbar--landing .landing-brand{
    grid-area: brand;
    justify-self: start;
    min-width: 0;
    margin: 0;
    gap: 6px;
  }
  .topbar--landing .landing-brand span{
    font-size: 12px;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .topbar--landing .landing-brand img,
  .topbar--landing .landing-brand .brand-logo,
  .topbar--landing .landing-brand .logo-round{
    width: 28px;
    height: 28px;
  }
  .topbar--landing .landing-auth{
    grid-area: auth;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 0;
    flex-wrap: nowrap;
  }
  .topbar--landing .landing-auth .btn{
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: none !important;
  }
  .topbar--landing .landing-auth a[href="admin.html"]{
    display: none !important;
  }
  .topbar--landing .landing-nav{
    grid-area: nav;
    justify-self: stretch;
    width: 100%;
    max-width: none !important;
    min-height: 0;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: linear-gradient(135deg, rgba(106,143,240,.18), rgba(59,210,236,.14));
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    display: block;
    text-align: center;
    padding: 6px 4px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 86px;
  }
  .topbar--landing .landing-nav .nav-cat{
    display: inline-flex;
    position: relative;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    left: 50%;
    right: auto;
    top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-6px);
    min-width: 180px;
    z-index: 310;
  }
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__menu{
    transform: translateX(-50%) translateY(0);
  }
  .topbar--landing .landing-nav .nav-cat:last-child .nav-cat__menu,
  .topbar--landing .landing-nav .nav-cat:nth-last-child(2) .nav-cat__menu{
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
  }
  .topbar--landing .landing-nav .nav-cat:last-child.open .nav-cat__menu,
  .topbar--landing .landing-nav .nav-cat:nth-last-child(2).open .nav-cat__menu{
    transform: translateX(0) translateY(0);
  }
  .topbar--landing .theme-popover{
    position: fixed;
    top: 56px;
    right: 10px;
    left: auto;
    width: min(260px, calc(100vw - 20px));
    z-index: 300;
  }
  .topbar--landing .brand.atom-logo-shell::before,
  .topbar--landing .brand.atom-logo-shell::after,
  .topbar--landing .brand .atom-rings{
    display: none !important;
  }
  .topbar--landing .brand img.atom-logo{
    animation: none !important;
    filter: none !important;
  }
}

/* Mobile stability fixes: layout + chat/page scroll + full-screen wizard */
@media (max-width: 820px){
  .grid-cols-12{
    grid-template-columns: 1fr !important;
  }
  .col-span-12,
  .col-span-7,
  .col-span-6,
  .col-span-5{
    grid-column: 1 / -1 !important;
  }

  body.page-text{
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.page-text main.text-minimal{
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  body.page-text .text-minimal__chat{
    min-height: 0;
    height: 100%;
    padding: 4px 0 8px;
  }
  body.page-text .chat-shell--minimal{
    min-height: 100%;
    height: 100%;
    grid-template-rows: auto 1fr auto;
  }
  body.page-text .chat-shell--minimal .chat-messages{
    overflow-y: auto;
    min-height: 0;
  }
  body.page-text .chat-composer{
    position: static;
    margin-top: 0;
    padding-bottom: 6px;
  }

  body.page-photo main{
    min-height: calc(100svh - 84px);
  }
  body.page-photo .cards{
    min-height: calc(100svh - 92px);
    padding: 8px 0 16px;
  }
  body.page-photo .card.col-span-7{
    min-height: calc(100svh - 116px);
    display: grid;
    grid-template-rows: auto 1fr;
    font-size: 16px;
  }
  body.page-photo .photo-wizard{
    min-height: 100%;
  }
  body.page-photo .photo-wizard__nav{
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 30;
    pointer-events: auto;
  }
  body.page-photo .photo-wizard__nav .btn{
    min-width: 176px;
    min-height: 32px;
    padding: 4px 20px;
    border-radius: 14px;
    font-size: 17px;
    line-height: 1.1;
    pointer-events: auto;
    touch-action: manipulation;
  }
  body.page-photo .photo-step .label b{
    font-size: 18px;
    line-height: 1.08;
  }
  body.page-photo .photo-step .label{
    margin-bottom: 10px;
    align-items: flex-start;
  }
  body.page-photo .photo-step .label span{
    font-size: 15px;
    color: var(--muted);
    opacity: .74;
    margin-left: auto;
    text-align: right;
    padding-right: 4px;
  }
  body.page-photo .photo-step .textarea{
    min-height: 128px;
    font-size: 18px;
    line-height: 1.35;
  }
  body.page-photo .photo-step .hint{
    font-size: 15px;
    line-height: 1.35;
  }
  body.page-photo .photo-step-dot{
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

.photo-wizard__error{
  min-height: 18px;
  color: #b42318;
  font-size: 12px;
  margin-top: -4px;
}

/* Mobile parity pass: header + photo wizard + text composer */
@media (max-width: 820px){
  /* Keep mobile nav link colors identical to desktop palette. */
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    color: var(--muted) !important;
  }
  .topbar--landing .landing-nav > a:hover,
  .topbar--landing .landing-nav > a.active,
  .topbar--landing .landing-nav .nav-cat__link:hover,
  .topbar--landing .landing-nav .nav-cat__link.active,
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__link{
    color: var(--text) !important;
  }

  .topbar--landing .wrap.landing-topbar{
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "brand nav auth" !important;
    align-items: center;
    gap: 8px !important;
  }
  .topbar--landing .landing-nav{
    grid-area: nav;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 999px;
    padding: 4px;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    min-width: 0;
    padding: 6px 4px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .topbar--landing .landing-nav .nav-cat{
    display: block;
    position: relative;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    min-width: 180px;
    max-width: min(90vw, 240px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-6px);
  }
  .topbar--landing .landing-nav .nav-cat:first-child .nav-cat__menu{
    left: 0;
    transform: translateX(0) translateY(-6px);
  }
  .topbar--landing .landing-nav .nav-cat:last-child .nav-cat__menu{
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
  }
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__menu{
    transform: translateX(-50%) translateY(0);
  }
  .topbar--landing .landing-nav .nav-cat:first-child.open .nav-cat__menu,
  .topbar--landing .landing-nav .nav-cat:last-child.open .nav-cat__menu{
    transform: translateX(0) translateY(0);
  }

  body.page-photo .photo-wizard__steps{
    justify-content: center;
    margin-bottom: 4px;
  }
  body.page-photo .photo-step-dot{
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  body.page-photo .photo-step.active{
    margin-top: 0;
  }
  body.page-photo .photo-wizard{
    gap: 6px;
  }
  body.page-photo .photo-wizard__nav{
    margin-top: 2px;
    gap: 12px;
    padding-top: 2px;
  }
  body.page-photo .photo-wizard__nav .btn{
    min-width: 146px;
    min-height: 36px;
    padding: 6px 16px;
    font-size: 16px;
  }
  body.page-photo .photo-step[data-step="3"] .actions-row{
    margin-top: 18px;
  }

  body.page-text .chat-composer{
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.82) 38%, rgba(255,255,255,.92));
  }
  html[data-theme="dark"] body.page-text .chat-composer{
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(6,10,18,.78) 38%, rgba(6,10,18,.9));
  }
  body.page-text .chat-input-row{
    align-items: center;
  }
  body.page-text .chat-attach,
  body.page-text .chat-send{
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  body.page-text .text-minimal__chat .wrap{
    padding-bottom: 126px;
  }
  body.page-text .chat-shell--minimal .chat-messages{
    padding-bottom: 132px !important;
  }
}

/* Final mobile header parity: force desktop-like single row. */
@media (max-width: 820px){
  .topbar--landing{
    position: sticky;
    top: 0;
    z-index: 260;
  }
  .topbar--landing .wrap.landing-topbar{
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "brand nav auth" !important;
    gap: 8px !important;
    align-items: center;
    overflow: hidden !important;
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .topbar--landing .landing-nav{
    grid-area: nav;
    display: flex !important;
    align-items: center;
    justify-content: stretch;
    gap: 2px;
    width: 100%;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 3px !important;
    border-radius: 999px !important;
    min-height: 36px !important;
    flex-wrap: nowrap !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat{
    flex: 1 1 0;
    min-width: 0;
    position: relative;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 7px 3px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar--landing .landing-auth{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }
  .topbar--landing .landing-auth .btn{
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    max-width: min(92vw, 260px);
    z-index: 320;
  }
}

/* Final photo mobile polish */
@media (max-width: 820px){
  body.page-photo .col-span-5{
    display: block !important;
    grid-column: 1 / -1 !important;
  }
  body.page-photo .card.col-span-5{
    margin-top: 10px;
    padding: 14px;
  }
  body.page-photo .card.col-span-5 .result{
    min-height: 120px;
  }
  body.page-photo .photo-wizard{
    gap: 8px !important;
  }
  body.page-photo .photo-wizard__nav{
    position: relative !important;
    bottom: auto !important;
    margin-top: 4px !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.page-photo .photo-wizard__nav .btn{
    min-width: 124px !important;
    min-height: 34px !important;
    padding: 5px 14px !important;
    font-size: 15px !important;
  }
  body.page-photo .photo-step[data-step="3"] .actions-row{
    margin-top: 22px !important;
  }
  .topbar--landing .wrap.landing-topbar{
    gap: 10px !important;
    min-height: 72px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .topbar--landing .landing-nav{
    gap: 0 !important;
    max-width: 640px !important;
    padding: 4px !important;
    min-height: 44px !important;
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--brand) 14%, transparent),
        color-mix(in oklab, var(--brand2) 12%, transparent)
      ),
      linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2)) !important;
    border: 1px solid var(--glass-border-2) !important;
    box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo) !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    padding: 10px 6px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }
  .topbar--landing .landing-nav > a.active,
  .topbar--landing .landing-nav .nav-cat__link.active{
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--brand) 82%, transparent),
        color-mix(in oklab, var(--brand2) 72%, transparent)
      ) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 20%, transparent), var(--glass-inset) !important;
  }
  .topbar--landing .landing-auth{
    min-height: 44px !important;
  }
  .topbar--landing .landing-auth .btn{
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  }
}

/* Mobile header: two rows, desktop nav style */
@media (max-width: 820px){
  body.page-photo .photo-step .label.mt-8{
    margin-top: 14px !important;
  }
  body.page-photo .photo-mode-grid{
    margin-top: 8px !important;
  }
  .topbar--landing .wrap.landing-topbar{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand auth"
      "nav nav" !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    align-items: center !important;
  }
  .topbar--landing .landing-brand{
    min-width: 0;
    overflow: hidden;
  }
  .topbar--landing .landing-brand span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar--landing .landing-auth{
    grid-area: auth !important;
    justify-self: end !important;
  }
  .topbar--landing .landing-nav{
    grid-area: nav !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--brand) 14%, transparent),
        color-mix(in oklab, var(--brand2) 12%, transparent)
      ),
      linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2)) !important;
    border: 1px solid var(--glass-border-2) !important;
    box-shadow: var(--glass-inset), var(--glass-outline), var(--glass-outline-2), var(--glass-halo) !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    padding: 10px 6px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
  }
  body.page-photo .photo-wizard__nav{
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 0 !important;
    align-items: center !important;
  }
  body.page-photo .photo-wizard__nav .btn{
    min-width: 92px !important;
    min-height: 30px !important;
    padding: 3px 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  body.page-photo #photoPrevStepBtn{
    min-width: 110px !important;
    min-height: 36px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
  }
}

/* Mobile nav button parity with desktop */
@media (max-width: 820px){
  .topbar--landing .landing-nav{
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--brand) 95%, transparent),
      color-mix(in oklab, var(--brand2) 82%, transparent)
    ) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
      0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
      0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
      var(--glass-inset) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    color: var(--muted) !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
  }
  html[data-theme="dark"] .topbar--landing .landing-nav > a,
  html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link{
    color: #e8edf5 !important;
  }
  .topbar--landing .landing-nav > a:hover,
  .topbar--landing .landing-nav > a.active,
  .topbar--landing .landing-nav .nav-cat__link:hover,
  .topbar--landing .landing-nav .nav-cat__link.active,
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__link{
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24) !important;
  }
  html[data-theme="dark"] .topbar--landing .landing-nav > a:hover,
  html[data-theme="dark"] .topbar--landing .landing-nav > a.active,
  html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link:hover,
  html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link.active,
  html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat.open .nav-cat__link{
    color: #ffffff !important;
    border-color: rgba(255,255,255,.26) !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: none !important;
  }
}

/* Final mobile nav behavior: desktop-like sizing + visible dropdowns */
@media (max-width: 820px){
  .topbar--landing .wrap.landing-topbar{
    overflow: visible !important;
  }
  .topbar--landing .landing-nav{
    width: fit-content !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat{
    flex: 0 0 auto !important;
  }
  .topbar--landing .landing-nav > a,
  .topbar--landing .landing-nav .nav-cat__link{
    width: auto !important;
    min-width: 66px !important;
    min-height: 35px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .topbar--landing .landing-nav .nav-cat{
    display: inline-flex !important;
    align-items: center !important;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    display: grid !important;
    opacity: 0;
    pointer-events: none;
    top: calc(100% + 8px) !important;
  }
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__menu{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Hard override: mobile header + wizard spacing consistency */
@media (max-width: 820px){
  .topbar--landing .wrap.landing-topbar{
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand auth"
      "nav nav" !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .topbar--landing .landing-brand{
    grid-area: brand !important;
  }
  .topbar--landing .landing-brand span{
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .topbar--landing .landing-brand img,
  .topbar--landing .landing-brand .brand-logo,
  .topbar--landing .landing-brand .logo-round{
    width: 32px !important;
    height: 32px !important;
  }
  .topbar--landing .landing-auth{
    grid-area: auth !important;
    justify-self: end !important;
    min-height: 40px !important;
  }
  .topbar--landing .landing-nav{
    grid-area: nav !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
    overflow: visible !important;
    min-height: 46px !important;
  }
  .topbar--landing .landing-nav .nav-cat{
    position: relative !important;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    left: 0 !important;
    right: auto !important;
    transform: translateY(-6px) !important;
    min-width: 220px !important;
    max-width: min(92vw, 280px) !important;
  }
  .topbar--landing .landing-nav .nav-cat:nth-last-child(-n+2) .nav-cat__menu{
    left: auto !important;
    right: 0 !important;
  }
  .topbar--landing .landing-nav .nav-cat.open .nav-cat__menu{
    transform: translateY(0) !important;
  }

  body.page-photo .photo-wizard__steps{
    width: 100% !important;
    margin: 0 auto 10px !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  body.page-photo .photo-step-dot{
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }
  body.page-photo .photo-step .label{
    margin-bottom: 14px !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  body.page-photo .photo-step .label span{
    margin-left: 0 !important;
    text-align: left !important;
    opacity: .72 !important;
  }
  body.page-photo .photo-step .field,
  body.page-photo .photo-step .row,
  body.page-photo .photo-step .hint{
    margin-top: 8px !important;
  }
  body.page-photo .photo-wizard__nav{
    justify-content: space-between !important;
    align-items: center !important;
  }
  body.page-photo .photo-wizard__nav .btn{
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}


/* Final hard-stop: never show legacy "Инструменты" nav link on first paint. */
.topbar--landing .landing-nav a[href$="providers.html"],
.topbar--landing .landing-nav a[data-nav="providers.html"]{
  display: none !important;
}

/* Final nav glass parity: dark and light use the same liquid-glass language. */
.topbar--landing .landing-nav.landing-nav--categories{
  border: 1px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 95%, transparent),
    color-mix(in oklab, var(--brand2) 82%, transparent)
  ) !important;
  box-shadow:
    0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
    0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
    var(--glass-inset) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast)) !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav.landing-nav--categories{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand) 95%, transparent),
    color-mix(in oklab, var(--brand2) 82%, transparent)
  ) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
    0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
    var(--glass-inset) !important;
}
.topbar--landing .landing-nav > a,
.topbar--landing .landing-nav .nav-cat__link{
  color: var(--muted) !important;
}
.topbar--landing .landing-nav > a:hover,
.topbar--landing .landing-nav > a.active,
.topbar--landing .landing-nav .nav-cat__link:hover,
.topbar--landing .landing-nav .nav-cat__link.active,
.topbar--landing .landing-nav .nav-cat.open .nav-cat__link{
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 16%, transparent),
      color-mix(in oklab, var(--brand2) 12%, transparent)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 24px color-mix(in oklab, var(--brand) 12%, transparent) !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav > a,
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link{
  color: #edf3fb !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav > a:hover,
html[data-theme="dark"] .topbar--landing .landing-nav > a.active,
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link:hover,
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__link.active,
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat.open .nav-cat__link{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.26) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 22%, transparent),
      color-mix(in oklab, var(--brand2) 18%, transparent)
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 28px rgba(0,0,0,.18) !important;
}
.topbar--landing .landing-nav .nav-cat__menu{
  border: 1px solid var(--glass-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.94)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 10%, transparent),
      color-mix(in oklab, var(--brand2) 8%, transparent)
    ) !important;
  box-shadow:
    0 24px 54px rgba(15,23,48,.18),
    inset 0 1px 0 rgba(255,255,255,.82),
    var(--glass-outline) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__menu{
  background:
    linear-gradient(180deg, rgba(16,20,28,.98), rgba(10,14,20,.96)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    var(--glass-outline) !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__menu a{
  color: #edf3fb !important;
}
html[data-theme="light"] .topbar--landing .landing-nav .nav-cat__menu a{
  color: #18223d !important;
}
html[data-theme="light"] .topbar--landing .landing-nav .nav-cat__menu a:hover{
  background: linear-gradient(180deg, rgba(124,92,255,.12), rgba(47,227,255,.10)) !important;
}
html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__menu a:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)) !important;
}
@media (max-width: 820px){
  .topbar--landing .landing-nav.landing-nav--categories{
    box-shadow:
      0 16px 34px rgba(15,23,48,.16),
      var(--glass-inset),
      var(--glass-outline),
      var(--glass-outline-2) !important;
  }
  html[data-theme="dark"] .topbar--landing .landing-nav.landing-nav--categories{
    box-shadow:
      0 20px 40px rgba(0,0,0,.30),
      var(--glass-inset),
      var(--glass-outline),
      var(--glass-outline-2) !important;
  }
}

@media (max-width: 820px){
  body.page-video .photo-step-dot{
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  body.page-photo .photo-wizard__nav .btn{
    min-height: 41px !important;
    max-height: 41px !important;
    font-size: 15px !important;
    padding: 6px 14px !important;
    width: auto !important;
    min-width: 134px !important;
    max-width: none !important;
  }
  body.page-photo #photoNextStepBtn{
    min-width: 170px !important;
  }
}

/* Final photo wizard UX: keep nav visible and hide empty upload block in text mode. */
body.page-photo .photo-wizard{
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}
body.page-photo .photo-wizard__nav{
  position: sticky !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 90 !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid var(--glass-border-2) !important;
  background:
    linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2)),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand) 12%, transparent),
      color-mix(in oklab, var(--brand2) 10%, transparent)
    ) !important;
  box-shadow:
    var(--glass-shadow),
    var(--glass-inset),
    var(--glass-outline),
    var(--glass-outline-2) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast)) !important;
  backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) contrast(var(--glass-contrast)) !important;
}
body.page-photo #photoUploadBlock{
  display: grid;
  gap: 8px;
}
@media (max-width: 820px){
  body.page-photo .photo-wizard{
    min-height: 0 !important;
    align-content: start !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  body.page-photo main,
  body.page-photo .cards,
  body.page-photo .card.col-span-7{
    min-height: 0 !important;
  }
  body.page-photo .card.col-span-7{
    display: block !important;
  }
  body.page-photo .photo-wizard__nav{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
  }
  body.page-photo .cards{
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.page-photo .photo-step{
    margin-bottom: 0 !important;
  }
}

/* Final mobile profile header compaction. */
@media (max-width: 820px){
  .profile-hero .hero__card{
    padding: 18px !important;
  }
  .profile-head{
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar meta"
      "actions actions" !important;
    align-items: start !important;
    gap: 12px 14px !important;
  }
  .profile-head .avatar{
    grid-area: avatar;
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
  .profile-head__meta{
    grid-area: meta;
    align-self: center;
    min-width: 0;
  }
  .profile-name{
    font-size: 20px !important;
    line-height: 1.12 !important;
  }
  .profile-sub{
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .profile-sub .pill{
    padding: 6px 9px !important;
    font-size: 13px !important;
  }
  .profile-head__actions{
    grid-area: actions;
    width: 100%;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .profile-head__actions .btn{
    min-height: 40px;
  }
}

/* Final stabilization: photo wizard nav visibility + desktop spacing restore. */
@media (max-width: 820px){
  body.page-photo .photo-wizard{
    padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.page-photo .cards{
    padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.page-photo .photo-wizard__nav{
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--glass-border-2) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, var(--glass-bg), var(--glass-bg-2)),
      linear-gradient(135deg,
        color-mix(in oklab, var(--brand) 10%, transparent),
        color-mix(in oklab, var(--brand2) 8%, transparent)
      ) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.24), var(--glass-inset), var(--glass-outline) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    transform: translateZ(0);
    will-change: transform;
  }
}

@media (min-width: 821px){
  body.page-photo .photo-wizard{
    min-height: 0 !important;
    padding-bottom: 0 !important;
    gap: 18px !important;
  }
  body.page-photo .cards{
    padding-top: 16px !important;
    padding-bottom: 36px !important;
  }
  body.page-photo .card.col-span-7{
    display: block !important;
    min-height: 0 !important;
    padding: 24px !important;
  }
  body.page-photo .photo-wizard__steps{
    margin-bottom: 10px !important;
  }
  body.page-photo .photo-step .label{
    margin-bottom: 12px !important;
  }
  body.page-photo .photo-step .textarea{
    min-height: 182px !important;
  }
  body.page-photo .photo-mode-grid{
    gap: 12px !important;
    margin-top: 14px !important;
  }
  body.page-photo .photo-wizard__nav{
    margin-top: 14px !important;
  }
}

@media (max-width: 820px){
  body.page-photo .photo-mode-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  body.page-photo .photo-mode-btn{
    width: 100% !important;
    justify-content: center !important;
  }
  body.page-photo .photo-wizard__nav{
    padding: 10px 12px !important;
  }
}

/* Mobile nav visual restore: blue liquid glass + matte dropdown. */
@media (max-width: 820px){
  .topbar--landing .landing-nav.landing-nav--categories{
    background: linear-gradient(
      135deg,
      color-mix(in oklab, var(--brand) 95%, transparent),
      color-mix(in oklab, var(--brand2) 82%, transparent)
    ) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
      0 18px 38px color-mix(in oklab, var(--brand) 26%, transparent),
      0 10px 24px color-mix(in oklab, var(--brand2) 12%, transparent),
      var(--glass-inset) !important;
    -webkit-backdrop-filter: blur(16px) saturate(132%) !important;
    backdrop-filter: blur(16px) saturate(132%) !important;
  }
  .topbar--landing .landing-nav .nav-cat__menu{
    background:
      linear-gradient(180deg, rgba(236,244,255,.98), rgba(228,239,254,.97)),
      linear-gradient(135deg, rgba(115,155,246,.10), rgba(75,217,242,.08)) !important;
    border: 1px solid rgba(166,188,228,.46) !important;
    box-shadow:
      0 20px 44px rgba(15,23,48,.24),
      inset 0 1px 0 rgba(255,255,255,.46),
      var(--glass-outline) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
  }
  html[data-theme="dark"] .topbar--landing .landing-nav .nav-cat__menu{
    background:
      linear-gradient(180deg, rgba(18,26,38,.98), rgba(12,20,32,.97)),
      linear-gradient(135deg, rgba(106,143,240,.12), rgba(59,210,236,.10)) !important;
    border: 1px solid rgba(154,178,230,.34) !important;
    box-shadow:
      0 20px 44px rgba(0,0,0,.44),
      inset 0 1px 0 rgba(255,255,255,.12),
      var(--glass-outline) !important;
  }
}

/* Final mobile wizard nav: static and stable in any mode. */
@media (max-width: 820px){
  body.page-photo #photoForm .photo-wizard__nav,
  body.page-video #videoForm .photo-wizard__nav{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  body.page-photo #photoForm .photo-wizard__nav .btn,
  body.page-video #videoForm .photo-wizard__nav .btn{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.page-photo .cards,
  body.page-video .cards{
    padding-bottom: 24px !important;
  }
  body.page-photo .photo-wizard,
  body.page-video .photo-wizard{
    padding-bottom: 0 !important;
  }
}

/* Text chat composer anchor + spacing stability */
body.page-text #textForm{
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: auto;
}
body.page-text #textForm .chat-input-row{
  margin-bottom: 0;
}
@media (max-width: 820px){
  body.page-text #textForm{
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.82) 38%, rgba(255,255,255,.92));
  }
  html[data-theme="dark"] body.page-text #textForm{
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(6,10,18,.78) 38%, rgba(6,10,18,.9));
  }
  body.page-text .text-minimal__chat .wrap{
    padding-bottom: 132px !important;
  }
  body.page-text .chat-shell--minimal .chat-messages{
    padding-bottom: 138px !important;
  }
}

/* Persistent admin announcement banner */
.site-announcement{
  position: sticky;
  top: 0;
  z-index: 310;
  width: 100%;
  border-bottom: 1px solid var(--glass-border-2);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--brand) 24%, transparent), color-mix(in oklab, var(--brand2) 16%, transparent)),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}
.site-announcement__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.site-announcement__text{
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.site-announcement__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.16);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.site-announcement__close:hover{
  border-color: var(--ring);
}

.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-switch .btn{
  min-width: 42px;
}
.lang-switch .btn.active{
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 30%, transparent);
}