/* ------------------------------------------------------------------
   Design tokens (mirrored from meigen.ai)
------------------------------------------------------------------ */
:root{
  --background:#fff;
  --page:#fafafa;
  --card:#fff;
  --foreground:#1b1b1b;
  --muted:#f5f5f5;
  --muted-hover:#e3e3e3;
  --muted-active:#ececec;
  --muted-foreground:#4b5563;
  --muted-foreground-subtle:#6b7280;
  --border:#e5e7eb;
  --secondary:#f3f4f6;
  --primary:#1b1b1b;
  --primary-foreground:#fff;
  --radius:.625rem;
  --sidebar-width:256px;
  --text-xs:.75rem;
  --text-sm:.8125rem;
  --text-base:.9375rem;
  --shadow-float:0 10px 30px #1b1b1b14,0 2px 8px #1b1b1b0a;
  --shadow-panel:0 16px 40px #1b1b1b1a,0 2px 8px #1b1b1b0a;
  --brand-ultimate:#605df3;
  --brand-pro:#147dff;
  --destructive:#ef4444;
  /* translucent surfaces — swapped wholesale by the dark theme */
  --surface-95:rgba(255,255,255,.95);
  --surface-80:rgba(255,255,255,.8);
  --surface-70:rgba(255,255,255,.7);
  --surface-soft:rgba(245,245,245,.35);
  --scrim:rgba(240,240,240,.85);
  --mesh-opacity:1;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------------
   Animated mesh-gradient backdrop (verbatim from the original)
------------------------------------------------------------------ */
.mesh{pointer-events:none;position:fixed;inset:0;z-index:0;overflow:hidden;opacity:var(--mesh-opacity)}
.mesh > div{position:absolute}
.mesh-a{
  top:-432px;left:-768px;width:2816px;height:1584px;filter:blur(60px);
  background-image:
    radial-gradient(80% 60% at 10% 20%, rgba(41,130,255,.42) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(60% 80% at 90% 30%, rgba(184,112,255,.38) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(50% 70% at 30% 60%, rgba(255,166,77,.38) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(60% 60% at 70% 70%, rgba(247,247,247,.5) 0%, rgba(0,0,0,0) 50%);
  animation:mesh-orbit 16s cubic-bezier(.4,0,.6,1) infinite;
}
.mesh-b{
  top:-288px;left:-512px;width:2304px;height:1296px;filter:blur(80px);
  background-image:
    radial-gradient(55% 45% at 80% 10%, rgba(61,158,255,.42) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(45% 55% at 20% 90%, rgba(210,126,252,.38) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(50% 50% at 60% 50%, rgba(255,160,92,.38) 0%, rgba(0,0,0,0) 45%);
  animation:mesh-orbit-reverse 20s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes mesh-orbit{
  0%{transform:translate(0) rotate(0deg) scale(1)}
  10%{transform:translate(8%,-12%) rotate(2deg) scale(1.02)}
  20%{transform:translate(20%,-8%) rotate(4deg) scale(1.05)}
  30%{transform:translate(25%,5%) rotate(3deg) scale(1.03)}
  40%{transform:translate(15%,18%) rotate(0deg) scale(.98)}
  50%{transform:translate(-5%,22%) rotate(-3deg) scale(.95)}
  60%{transform:translate(-18%,12%) rotate(-5deg) scale(.97)}
  70%{transform:translate(-22%,-5%) rotate(-3deg) scale(1.02)}
  80%{transform:translate(-12%,-15%) rotate(-1deg) scale(1.04)}
  90%{transform:translate(-3%,-10%) rotate(1deg) scale(1.01)}
  100%{transform:translate(0) rotate(0deg) scale(1)}
}
@keyframes mesh-orbit-reverse{
  0%{transform:translate(0) rotate(0deg) scale(1)}
  12%{transform:translate(-10%,-8%) rotate(-2deg) scale(.97)}
  25%{transform:translate(-20%,5%) rotate(-4deg) scale(.94)}
  37%{transform:translate(-12%,18%) rotate(-2deg) scale(.98)}
  50%{transform:translate(8%,20%) rotate(2deg) scale(1.03)}
  62%{transform:translate(22%,8%) rotate(4deg) scale(1.06)}
  75%{transform:translate(18%,-10%) rotate(3deg) scale(1.02)}
  87%{transform:translate(5%,-12%) rotate(1deg) scale(.99)}
  100%{transform:translate(0) rotate(0deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.mesh>div{animation:none}}

/* ------------------------------------------------------------------
   Shell
------------------------------------------------------------------ */
.shell{position:relative;z-index:10;display:flex;height:100svh}

/* Sidebar --------------------------------------------------------- */
.sidebar{
  width:var(--sidebar-width);flex:0 0 var(--sidebar-width);height:100svh;
  display:flex;flex-direction:column;background:var(--surface-95);
}
.sb-head{display:flex;align-items:center;gap:8px;padding:32px 14px 8px 22px}
.sb-head .logo{height:20px;width:auto;color:var(--foreground)}
.sb-head .wordmark{height:16px;width:auto;color:var(--foreground)}
.sb-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:auto;padding-top:8px}
.sb-group{display:flex;flex-direction:column;padding:0 14px;width:100%}
.sb-label{display:flex;align-items:center;height:32px;padding:0 8px;font-size:var(--text-sm);color:var(--muted-foreground)}
.sb-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%}
.sb-btn{
  display:flex;width:100%;align-items:center;gap:12px;height:32px;padding:6px 12px;
  border-radius:8px;font-size:var(--text-sm);text-align:left;transition:background-color .15s;
  overflow:hidden;
}
.sb-btn svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted-foreground)}
.sb-btn:hover{background:rgba(245,245,245,.7)}
.sb-btn.active{background:var(--muted-active);font-weight:500}
.sb-btn .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbd{
  display:none;align-items:center;gap:2px;height:20px;padding:0 6px;border-radius:6px;
  background:var(--secondary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px;font-weight:500;color:var(--muted-foreground);
}
.sb-btn:hover .kbd{display:flex}
.badge-new{
  font-size:9px;font-weight:700;letter-spacing:.04em;color:#7c3aed;
  background:rgba(124,58,237,.1);border-radius:4px;padding:2px 4px;line-height:1;
}
.chev{margin-left:auto;color:var(--muted-foreground);width:14px;height:14px;flex:0 0 14px}

.sb-foot{display:flex;flex-direction:column;gap:8px;padding:14px}
.sb-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px 12px;font-size:var(--text-xs);color:var(--muted-foreground)}
.sb-legal a{white-space:nowrap;transition:color .15s}
.sb-legal a:hover{color:var(--foreground)}
.gh-badge{
  display:inline-flex;flex:0 0 auto;height:16px;margin-left:4px;border-radius:3px;overflow:hidden;line-height:1;
  font-family:Verdana,"DejaVu Sans",Geneva,Tahoma,sans-serif;font-size:11px;transition:opacity .15s;
}
.gh-badge:hover{opacity:.8}
.gh-badge .l{display:flex;align-items:center;background:#000;color:#fff;padding:0 4px}
.gh-badge .l svg{width:11px;height:11px}
.gh-badge .r{display:flex;align-items:center;background:#fbcb1a;color:#000;padding:0 6px;font-variant-numeric:tabular-nums}
.share-card{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;width:100%;margin-bottom:12px;padding:12px;border:1px solid var(--border);
  border-radius:12px;text-align:left;overflow:hidden;transition:background-color .2s;
}
.share-card:hover{background:rgba(236,236,236,.4)}
.share-card p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-card .t{font-size:var(--text-sm);font-weight:500;line-height:1}
.share-card .s{font-size:var(--text-xs);color:var(--muted-foreground);margin-top:6px!important}
.share-card .ic{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;
  border:1px solid var(--border);border-radius:999px;background:rgba(245,245,245,.7);
}
.share-card .ic svg{width:15px;height:15px}
.cta-row{display:flex;align-items:center;justify-content:space-between}
.btn-rainbow{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 32px;border-radius:8px;font-size:var(--text-sm);font-weight:500;
  color:#fff;white-space:nowrap;flex:0 0 auto;border:1.28px solid transparent;
  background-image:
    linear-gradient(#121213,#121213),
    linear-gradient(#121213 50%,rgba(18,18,19,.6) 80%,rgba(18,18,19,0)),
    linear-gradient(90deg,hsl(0,100%,63%),hsl(30,100%,63%),hsl(60,100%,63%),hsl(120,100%,63%),hsl(180,100%,63%),hsl(240,100%,63%),hsl(300,100%,63%),hsl(360,100%,63%));
  background-size:200%;background-clip:padding-box,border-box,border-box;background-origin:border-box;
  animation:rainbow 2s infinite linear;
}
.btn-rainbow::before{
  content:"";position:absolute;bottom:-20%;left:50%;z-index:0;height:20%;width:60%;
  transform:translateX(-50%);background-size:200%;opacity:.75;filter:blur(.5rem);
  background-image:linear-gradient(90deg,hsl(0,100%,63%),hsl(30,100%,63%),hsl(60,100%,63%),hsl(120,100%,63%),hsl(180,100%,63%),hsl(240,100%,63%),hsl(300,100%,63%),hsl(360,100%,63%));
  animation:rainbow 2s infinite linear;
}
@keyframes rainbow{0%{background-position:0%}100%{background-position:200%}}
.free-credits{min-width:0;text-align:right;font-size:11px;font-weight:500;line-height:1.25;color:var(--muted-foreground-subtle)}

/* Main panel ------------------------------------------------------ */
.main{display:flex;flex:1;min-width:0;overflow:hidden;padding:16px}
.panel{
  height:100%;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:24px;background:var(--surface-80);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 16px 8px;
}
.tabs{
  position:relative;display:flex;align-items:center;gap:2px;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;height:36px;padding:0 12px;border-radius:8px;white-space:nowrap;flex:0 0 auto;
  font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground);transition:color .15s,background-color .15s;
}
.tab svg{width:16px;height:16px}
.tab:hover{background:rgba(245,245,245,.6);color:var(--foreground)}
.tab[aria-selected="true"]{color:var(--foreground);background:var(--muted-active)}
.sorts{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.sort{
  display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 10px;
  border-radius:8px;font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground);
  white-space:nowrap;transition:color .15s,background-color .15s;
}
.sort:hover{background:rgba(245,245,245,.6);color:var(--foreground)}
.sort[aria-selected="true"]{color:var(--foreground);background:var(--muted-active)}

/* Masonry grid ---------------------------------------------------- */
.scroller{flex:1;min-height:0;overflow-y:auto;padding:0 16px 80px}
.masonry{column-count:3;column-gap:12px}
.card{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  position:relative;margin:0 0 12px;border-radius:12px;overflow:hidden;background:var(--card);
  cursor:pointer;
}
.card .frame{position:relative;width:100%;overflow:hidden;border-radius:12px;background:var(--muted)}
.card img.shot{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s ease-out,transform .5s ease-out;
}
.card:hover img.shot{transform:scale(1.02)}
.card .veil{
  position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 50%,transparent 100%);
}
.card:hover .veil{opacity:1}
.card .meta{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:20;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.card:hover .meta{opacity:1;pointer-events:auto}
.meta .who{display:flex;flex-direction:column;gap:10px;min-width:0}
.meta .row{display:flex;align-items:center;gap:8px;min-width:0}
.meta .av{width:32px;height:32px;flex:0 0 32px;border-radius:999px;object-fit:cover;background:var(--muted)}
.meta .av-fallback{
  width:32px;height:32px;flex:0 0 32px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.25);color:#fff;font-size:12px;font-weight:600;
  backdrop-filter:blur(6px);
}
.meta .nm{font-size:var(--text-sm);font-weight:600;color:#fff;text-shadow:0 3px 3px rgba(0,0,0,.2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.meta .hd{font-size:var(--text-xs);color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:150px}
.use-idea{
  display:flex;width:fit-content;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;
  background:#fff;color:#000;font-size:var(--text-xs);font-weight:500;transition:background-color .15s;
}
.use-idea:hover{background:rgba(255,255,255,.9)}
.use-idea svg{width:14px;height:14px}
.meta .acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.chip{
  display:flex;align-items:center;gap:6px;padding:8px;border-radius:8px;color:#fff;
  background:rgba(27,27,27,.1);backdrop-filter:blur(12px);transition:background-color .15s;
}
.chip:hover{background:rgba(27,27,27,.2)}
.chip svg{width:14px;height:14px}
.chip span{font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums}
.chip.on svg{fill:#f43f5e;color:#f43f5e}

/* Dock ------------------------------------------------------------ */
.dock{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50}
.dock-inner{
  display:flex;align-items:center;gap:16px;height:64px;padding:12px 16px;border-radius:16px;
  background:var(--surface-80);backdrop-filter:blur(12px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}
.dock-btn{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;
  background:rgba(245,245,245,.3);transition:background-color .15s;
}
.dock-btn:hover{background:rgba(245,245,245,.6)}
.dock-btn svg{width:20px;height:20px;color:var(--foreground)}
.tip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#1b1b1b;color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.dock-item{position:relative}
.dock-item:hover .tip{opacity:1}

/* App promo ------------------------------------------------------- */
.promo{
  position:fixed;right:24px;bottom:96px;z-index:60;width:176px;border-radius:14px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-panel);
}
.promo.hidden{display:none}
.promo img{width:100%;height:auto;display:block}
.promo .body{padding:10px 12px 12px}
.promo .t{font-size:var(--text-sm);font-weight:600;margin:0}
.promo .d{font-size:11px;color:var(--muted-foreground);margin:4px 0 10px;line-height:1.35}
.promo .go{
  display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 14px;
  border-radius:999px;background:#1b1b1b;color:#fff;font-size:var(--text-xs);font-weight:500;
}
.promo .x{
  position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;
  backdrop-filter:blur(4px);
}
.promo .x svg{width:12px;height:12px}

/* Mobile top bar -------------------------------------------------- */
.mobile-bar{display:none}
@media (max-width:767px){
  .sidebar{display:none}
  .main{padding:8px}
  .panel{border-radius:16px}
  .panel-head{display:none}
  .mobile-bar{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:14px 14px 6px;
  }
  .mobile-bar .brand{display:flex;align-items:center;gap:8px}
  .mobile-bar .logo{height:18px;width:auto}
  .mobile-bar .wordmark{height:14px;width:auto}
  .scroller{padding:0 8px 100px}
  .masonry{column-gap:8px}
  .card{margin-bottom:8px}
  .promo{right:12px;bottom:100px;width:150px}
  .dock-inner{gap:10px;height:58px;padding:9px 12px}
  .dock-btn{width:36px;height:36px}
}

/* ------------------------------------------------------------------
   Prompt detail (lightbox route) — mirrors meigen.ai/prompt/<id>
------------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:100;display:none}
.lb.open{display:block}
.lb-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(24px)}
.lb-grid{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr 480px;overflow:hidden;
}
/* ---- left: viewer ---- */
.lb-view{position:relative;display:flex;flex-direction:column;min-width:0}
.lb-tools{position:absolute;top:16px;right:16px;z-index:20;display:flex;align-items:center;gap:8px}
.pill{
  display:flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;
  background:var(--surface-80);backdrop-filter:blur(12px);border:1px solid var(--border);
  color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background-color .2s,color .2s;
}
button.pill:hover{background:var(--card);color:var(--foreground)}
.pill.sq{width:36px;padding:0;justify-content:center}
.pill svg{width:16px;height:16px}
.pill .count{font-size:var(--text-sm);font-weight:500;font-variant-numeric:tabular-nums}
.pill.esc{gap:8px;padding-left:12px;padding-right:8px}
.pill.esc .lbl{font-size:var(--text-xs);font-weight:500}
.pill.esc .sep{width:1px;height:16px;background:var(--border)}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;padding:64px}
.lb-shot{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* flex:0 1 auto, not flex:1 — the shot is sized by the image so the rail sits
   beside it and the stage centres the pair, instead of the rail being pushed
   out to the far edge of a wide viewer. */
.lb-shot .box{position:relative;overflow:hidden;border-radius:16px;max-height:100%}
.lb-shot img{display:block;max-width:100%;max-height:calc(100svh - 128px);width:auto;height:auto;object-fit:contain}
.lb-rail{display:flex;flex-direction:column;gap:8px}
.lb-rail.hide{display:none}
.thumb{
  width:80px;height:80px;border-radius:12px;overflow:hidden;background:var(--card);flex:0 0 auto;
  border:2px solid rgba(255,255,255,.3);opacity:.7;transition:opacity .2s,border-color .2s,box-shadow .2s;
}
.thumb:hover{opacity:.9}
.thumb.sel{opacity:1;border-color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.thumb img{width:100%;height:100%;object-fit:cover}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--surface-80);backdrop-filter:blur(12px);border:1px solid var(--border);
  color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background-color .2s;
}
.lb-nav:hover{background:var(--card)}
.lb-nav svg{width:18px;height:18px}
.lb-nav.prev{left:16px}
.lb-nav.next{right:16px}
/* ---- right: info panel ---- */
.lb-panel{
  position:relative;z-index:10;display:flex;flex-direction:column;background:var(--background);
  border-left:1px solid rgba(229,231,235,.5);overflow-y:auto;
}
.lb-top{padding:20px}
.lb-author{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lb-author .who{display:flex;align-items:center;gap:12px;min-width:0;transition:opacity .2s}
.lb-author .who:hover{opacity:.8}
.lb-author img.av{width:40px;height:40px;border-radius:999px;object-fit:cover;background:var(--muted);flex:0 0 40px}
.lb-author .av-fallback{width:40px;height:40px;flex:0 0 40px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;background:var(--muted);color:var(--muted-foreground);font-weight:600}
.lb-author .nm{display:flex;align-items:center;gap:4px;font-weight:600;font-size:var(--text-base)}
.lb-author .nm svg{width:14px;height:14px;color:var(--muted-foreground);flex:0 0 14px}
.lb-author .hd{font-size:var(--text-xs);color:var(--muted-foreground)}
.model-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted-foreground);flex:0 0 auto}
.model-chip svg{width:16px;height:16px}
.lb-acts{display:flex;align-items:center;gap:4px;margin:12px 0 0 -8px}
.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 12px;
  border-radius:999px;font-size:var(--text-sm);font-weight:500;transition:background-color .2s;
}
.ghost:hover{background:var(--muted)}
.ghost.icon{width:40px;padding:0}
.ghost svg{width:18px;height:18px}
.ghost .tabnum{font-variant-numeric:tabular-nums}
.ghost.on svg{fill:#f43f5e;color:#f43f5e}
.lb-body{flex:1;padding:0 20px 20px}
.lb-secl{margin-bottom:8px;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.025em;color:var(--muted-foreground-subtle)}
.lb-prompt{
  margin:0;font-size:var(--text-sm);line-height:1.625;color:var(--foreground);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;white-space:pre-wrap;
}
.lb-prompt.full{-webkit-line-clamp:unset;display:block}
.more-btn{margin-top:4px;font-size:var(--text-xs);font-weight:700;color:var(--foreground)}
.lb-more{padding:0 20px 20px}
.lb-more h3{margin:0 0 12px;font-size:1.125rem;font-weight:600}
.mlt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mlt-col{display:flex;flex-direction:column;gap:8px}
.mlt button{position:relative;width:100%;overflow:hidden;border-radius:12px;background:var(--muted)}
.mlt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lb-foot{padding:20px;border-top:1px solid rgba(229,231,235,.5);display:flex;gap:12px;position:sticky;bottom:0;background:var(--background)}
.btn-solid{
  display:inline-flex;flex:1;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;
  border-radius:12px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-base);font-weight:600;transition:background-color .2s;
}
.btn-solid:hover{background:rgba(27,27,27,.9)}
.btn-solid svg{width:16px;height:16px}
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:200;
  background:#1b1b1b;color:#fff;font-size:var(--text-sm);padding:10px 16px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.toast.show{opacity:1}
@media (max-width:1023px){.lb-grid{grid-template-columns:1fr 400px}.lb-stage{padding:56px 32px}}
@media (max-width:767px){
  .lb-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}
  .lb-view{min-height:56svh}
  /* On a phone the shot runs the full width and the tools float over it, the
     way meigen.ai does it; the rail becomes a strip underneath. */
  .lb-stage{flex-direction:column;padding:8px;gap:8px}
  .lb-shot{flex:0 1 auto;width:100%}
  .lb-shot .box{width:100%;display:flex;justify-content:center}
  .lb-shot img,.lb-shot video{max-height:72svh;max-width:100%}
  .lb-tools{top:12px}
  .lb-rail{flex-direction:row;overflow-x:auto;width:100%;justify-content:center;flex:0 0 auto;
    scroll-snap-type:x proximity;padding-bottom:2px}
  .lb-rail .thumb{scroll-snap-align:center}
  .thumb{width:56px;height:56px}
  .lb-panel{border-left:0;border-top:1px solid rgba(229,231,235,.5)}
  .lb-nav{display:none}
  .lb-foot{padding:16px}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty{padding:60px 0;text-align:center;color:var(--muted-foreground);font-size:var(--text-sm)}

/* video cards */
.card .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.card:hover .clip{opacity:1}
.play-badge{
  position:absolute;right:8px;top:8px;z-index:10;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  pointer-events:none;transition:opacity .2s;
}
.card:hover .play-badge{opacity:0}
.play-badge svg{width:8px;height:8px;color:#fff}
.lb-shot .box video{max-width:100%;max-height:calc(100svh - 128px);border-radius:16px;display:block}

/* ==================================================================
   Page chrome shared by the sub-pages
================================================================== */
.page-back{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;
  color:var(--muted-foreground);transition:background-color .15s,color .15s;flex:0 0 32px;
}
.page-back:hover{background:var(--muted);color:var(--foreground)}
.page-back svg{width:18px;height:18px}
.panel-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 24px 96px}

/* ---------------- Skills ---------------- */
.skills-head{text-align:center;padding:56px 24px 40px}
.skills-head h1{margin:0 0 10px;font-size:1.875rem;font-weight:700;letter-spacing:-.02em}
.skills-head p{margin:0;color:var(--muted-foreground);font-size:var(--text-base)}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto}
.skill-card{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;height:100%;
  overflow:hidden;border-radius:24px;padding:16px;text-align:left;
}
.skill-card .info{display:flex;min-width:0;flex:1;flex-direction:column;gap:10px}
.skill-card .ic{
  display:flex;width:36px;height:36px;align-items:center;justify-content:center;
  border-radius:12px;background:var(--background);box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.skill-card .ic img{width:24px;height:24px;object-fit:contain}
.skill-card h3{margin:0;font-size:1.125rem;font-weight:500;line-height:1.375;letter-spacing:-.01em}
.skill-card p{margin:6px 0 0;font-size:var(--text-xs);color:var(--muted-foreground);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skill-card .shots{position:relative;width:112px;height:96px;flex:0 0 112px}
.skill-card .shots span{
  position:absolute;border-radius:8px;background:var(--background);padding:4px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transition:transform .2s ease-out;
}
.skill-card .shots img{width:100%;height:100%;border-radius:5px;object-fit:cover;display:block}
.skill-card .shots .front{right:0;top:4px;z-index:10;width:72px;height:88px;transform:rotate(3deg)}
.skill-card .shots .back{right:34px;top:8px;width:64px;height:80px;transform:rotate(-8deg)}
.skill-card:hover .shots .front{transform:translateY(-4px) rotate(7deg)}
.skill-card:hover .shots .back{transform:translateY(-2px) rotate(-12deg)}
@media (max-width:1100px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.skills-grid{grid-template-columns:1fr}.skills-head{padding:32px 16px 24px}}

/* ---------------- Search ---------------- */
.search-bar{display:flex;align-items:center;gap:10px;padding:16px 16px 8px}
.search-field{
  display:flex;flex:1;min-width:0;align-items:center;gap:10px;height:44px;padding:0 16px;
  border-radius:999px;background:var(--background);box-shadow:var(--shadow-control);
}
.search-field svg{width:18px;height:18px;color:var(--muted-foreground);flex:0 0 18px}
.search-field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  font-size:var(--text-base);color:var(--foreground);
}
.search-field input::placeholder{color:var(--muted-foreground)}
.orb{width:22px;height:22px;border-radius:999px;flex:0 0 22px;
  background:conic-gradient(from 210deg,#ff9a3c,#ff5f8d,#8b5cf6,#3b82f6,#22d3ee,#ff9a3c)}
.round-btn{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
  background:var(--foreground);color:var(--background);flex:0 0 36px;
}
.round-btn svg{width:16px;height:16px}
.state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  text-align:center;padding:96px 24px;
}
.state .bubble{
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;
  background:var(--card);box-shadow:var(--shadow-float);margin-bottom:20px;
}
.state .bubble svg{width:22px;height:22px;color:var(--foreground)}
.state h2{margin:0 0 8px;font-size:1.125rem;font-weight:600}
.state p{margin:0;max-width:340px;font-size:var(--text-sm);color:var(--muted-foreground);line-height:1.6}
.state .cta{
  margin-top:20px;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;
  border-radius:8px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-sm);font-weight:500;
}
.state .cta:hover{background:rgba(27,27,27,.9)}
.result-note{padding:8px 24px 12px;font-size:var(--text-sm);color:var(--muted-foreground)}

/* ---------------- Favorites ---------------- */
.fav-head{padding:24px 24px 0}
.fav-head h1{margin:0 0 16px;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.board-tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:140px;height:105px;border-radius:16px;background:var(--muted-active);overflow:hidden;
}
.board-tile::before,.board-tile::after{content:"";position:absolute;background:var(--background)}
.board-tile::before{left:50%;top:0;bottom:0;width:2px}
.board-tile::after{top:50%;left:0;right:0;height:2px}
.board-tile .pill{
  position:relative;z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 14px;
  border-radius:999px;background:var(--card);font-size:var(--text-sm);font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.saves-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:32px 24px 12px;flex-wrap:wrap}
.saves-head .l{display:flex;align-items:baseline;gap:10px}
.saves-head h2{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
.saves-head .hint{font-size:var(--text-xs);color:var(--muted-foreground)}
.seg{display:inline-flex;align-items:center;gap:4px}
.seg button{
  height:32px;padding:0 12px;border-radius:8px;font-size:var(--text-sm);font-weight:500;
  color:var(--muted-foreground);transition:background-color .15s,color .15s;
}
.seg button:hover{background:rgba(245,245,245,.6);color:var(--foreground)}
.seg button[aria-selected="true"]{background:var(--muted-active);color:var(--foreground)}

/* ---------------- Standalone marketing pages ---------------- */
body.plain{overflow:auto;background:var(--background)}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 24px;
  background:var(--surface-70);backdrop-filter:blur(12px);
}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:600}
.topbar .brand svg{height:16px;width:auto}
.topbar .brand .slash{color:var(--muted-foreground);font-weight:400}
.btn-dark{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:8px;
  background:var(--foreground);color:var(--background);font-size:var(--text-sm);font-weight:500;
}
.btn-dark svg{width:14px;height:14px}
.hero{position:relative;overflow:hidden;background:var(--background);padding:160px 0 96px;text-align:center}
.rays{pointer-events:none;position:absolute;left:0;right:0;top:0;overflow:hidden}
.rays > div{position:absolute;top:-16%;width:150%;height:120%;transform-origin:top center}
.rays span{position:absolute;left:50%;top:0;width:10%;height:100%;transform-origin:top}
@keyframes lr-sway{0%,100%{transform:translateX(-50%) rotate(-9deg)}50%{transform:translateX(-50%) rotate(9deg)}}
@keyframes lr-shimmer{0%,100%{opacity:.45}50%{opacity:1}}
.wrap{position:relative;z-index:10;margin:0 auto;max-width:1024px;padding:0 24px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:6px 14px;border-radius:999px;
  background:rgba(20,125,255,.1);color:#147dff;font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;
}
.eyebrow svg{width:14px;height:14px}
.hero h1{margin:0 0 24px;font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.75rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:700}
.hero .lede{margin:0 auto 36px;max-width:42rem;font-size:1.125rem;line-height:1.625;color:var(--muted-foreground)}
.hero .lede strong{font-weight:500;color:var(--foreground)}
.stores{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px}
@media (min-width:640px){.stores{flex-direction:row;justify-content:center}}
.store{
  display:inline-flex;width:240px;align-items:center;gap:12px;border-radius:16px;
  background:var(--foreground);color:var(--background);padding:14px 24px;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s;
}
.store:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(0,0,0,.15)}
.store svg{width:26px;height:26px;flex:0 0 26px}
.store .t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.store .t .s{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;opacity:.8}
.store .t .b{font-size:1.125rem;font-weight:600}
.checks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:48px auto 0;max-width:48rem}
.checks span{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-70);padding:6px 14px;font-size:var(--text-xs);font-weight:500;
  color:var(--muted-foreground);backdrop-filter:blur(4px);
}
.checks svg{width:12px;height:12px;color:#147dff}
.phones{display:flex;gap:20px;justify-content:center;margin-top:56px;overflow-x:auto;padding-bottom:8px}
.phones figure{margin:0;flex:0 0 auto}
.phones .body{width:240px;border-radius:36px;background:var(--foreground);padding:8px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.phones .screen{height:480px;overflow:hidden;border-radius:28px;background:var(--background)}
.phones img{height:100%;width:100%;object-fit:cover;object-position:top}
.phones figcaption{margin-top:12px;text-align:center;font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground)}
.phones .raise{transform:translateY(-16px)}
.features{background:var(--background);padding:96px 0}
.features .intro{text-align:center;margin-bottom:56px}
.features h2{margin:0 0 16px;font-family:var(--font-display);font-size:clamp(1.75rem,3.5vw,2.25rem);
  font-weight:700;letter-spacing:-.02em}
.features .intro p{margin:0 auto;max-width:42rem;color:var(--muted-foreground)}
.fgrid{display:grid;gap:20px}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.fcard{border:1px solid var(--border);border-radius:16px;padding:28px;transition:transform .2s,box-shadow .2s}
.fcard:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.fcard .ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(20,125,255,.1);color:#147dff;margin-bottom:16px}
.fcard .ic svg{width:20px;height:20px}
.fcard h3{margin:0 0 8px;font-size:1.125rem;font-weight:600}
.fcard p{margin:0;font-size:var(--text-sm);line-height:1.625;color:var(--muted-foreground)}
.site-foot{background:var(--foreground);color:var(--background);padding:48px 0 32px}
.site-foot .grid{display:grid;gap:32px;margin-bottom:32px}
@media (min-width:1024px){.site-foot .grid{grid-template-columns:1fr 1fr}}
.site-foot .logo{height:22px;width:auto;margin-bottom:32px;color:var(--background)}
.site-foot .legal{font-size:var(--text-sm);color:rgba(255,255,255,.6)}
.site-foot .legal p{margin:0}
.site-foot .links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:var(--text-xs)}
.site-foot .links a:hover{color:#fff}
.site-foot .right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right}
.site-foot .right .tag{font-size:var(--text-sm);line-height:1.625;margin:0 0 32px}
.site-foot .social{display:flex;align-items:center;gap:12px}
.site-foot .social a{display:flex;width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:999px;background:rgba(255,255,255,.1);transition:background-color .15s}
.site-foot .social a:hover{background:#147dff}
.site-foot .social svg{width:16px;height:16px}
.site-foot .mail{margin-top:8px;font-size:var(--text-xs);color:rgba(255,255,255,.6)}

/* ---------------- Legal ---------------- */
.legal-top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--surface-95);
  backdrop-filter:blur(12px);
}
.legal-top h1{margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.prose{max-width:56rem;margin:0 auto;padding:32px 24px 96px}
.prose .meta-line{margin:0 0 10px;font-size:var(--text-sm);color:var(--muted-foreground)}
.prose .meta-line b{color:var(--foreground)}
.prose hr{border:0;border-top:1px solid var(--border);margin:28px 0}
.prose h2{margin:36px 0 12px;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.prose h3{margin:20px 0 8px;font-size:var(--text-base);font-weight:600}
.prose p, .prose li{font-size:var(--text-sm);line-height:1.75;color:var(--foreground)}
.prose ul{margin:8px 0;padding-left:20px}
.prose .placeholder{color:var(--muted-foreground)}
.notice{
  border:1px solid var(--border);border-left:3px solid #147dff;border-radius:10px;
  background:var(--muted);padding:14px 16px;margin:0 0 24px;
}
.notice p{margin:0;font-size:var(--text-sm);color:var(--muted-foreground)}

/* ==================================================================
   Card link + sidebar submenu + account chip
================================================================== */
.card-link{position:absolute;inset:0;z-index:10;border-radius:12px;display:block}
.card-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.card[hidden]{display:none}
a.chip{text-decoration:none}
html.nav-busy{cursor:progress}

.sb-submenu[hidden]{display:none}
.sb-submenu{list-style:none;margin:2px 0 2px;padding:0 0 0 26px;display:flex;flex-direction:column;gap:1px}
.sb-sub{
  display:block;padding:5px 10px;border-radius:8px;font-size:var(--text-sm);
  color:var(--muted-foreground);transition:background-color .15s,color .15s;
}
.sb-sub:hover{background:rgba(245,245,245,.7);color:var(--foreground)}
.sb-btn[aria-expanded="true"] .chev{transform:rotate(90deg)}
.chev{transition:transform .2s}

.account{display:flex;align-items:center;gap:8px;min-width:0}
.account-av{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;
  border-radius:999px;background:var(--foreground);color:var(--background);
  font-size:var(--text-sm);font-weight:600;
}
.account-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.account-t b{font-size:var(--text-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-t span{font-size:11px;color:var(--muted-foreground)}
.linkish{
  font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);
  text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer;
}
.linkish:hover{color:var(--foreground)}

/* ==================================================================
   Auth dialog
================================================================== */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(27,27,27,.45);backdrop-filter:blur(6px);
  animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-card{
  position:relative;z-index:1;width:100%;max-width:26rem;max-height:calc(100svh - 48px);overflow-y:auto;
  padding:20px;border-radius:24px;background:var(--background);box-shadow:var(--shadow-panel);
  animation:pop .2s ease-out;
}
.modal-x{
  position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;color:var(--muted-foreground);
  background:var(--surface-95);backdrop-filter:blur(8px);transition:background-color .15s,color .15s;z-index:2;
}
.modal-x:hover{background:var(--muted);color:var(--foreground)}
.modal-x svg{width:16px;height:16px}
@media (min-width:640px){.modal-x{right:-48px;top:0}}

.auth-hero{position:relative;overflow:hidden;border-radius:12px;padding:16px;margin-bottom:24px;background:var(--surface-soft)}
.auth-hero-glow,.auth-hero-pulse{position:absolute;inset:0}
.auth-hero-glow{background:
  radial-gradient(80% 120% at 95% 20%, rgba(184,112,255,.18) 0%, transparent 50%),
  radial-gradient(60% 80% at 75% 80%, rgba(255,166,77,.15) 0%, transparent 45%),
  radial-gradient(50% 100% at 85% 50%, rgba(41,130,255,.12) 0%, transparent 40%),
  radial-gradient(60% 80% at 5% 60%, rgba(41,130,255,.06) 0%, transparent 50%),
  linear-gradient(to right, rgba(71,139,235,.03) 0%, transparent 25%, transparent 35%, rgba(179,117,240,.05) 100%)}
.auth-hero-pulse{background:
  radial-gradient(70% 90% at 80% 30%, rgba(41,130,255,.08) 0%, transparent 50%),
  radial-gradient(50% 70% at 90% 70%, rgba(255,166,77,.06) 0%, transparent 40%);
  animation:authpulse 4s cubic-bezier(.4,0,.6,1) infinite}
@keyframes authpulse{0%,100%{opacity:1}50%{opacity:.4}}
.auth-hero-copy{position:relative;z-index:1}
.auth-hero h2{margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.auth-hero p{margin:4px 0 0;font-size:var(--text-sm);color:var(--muted-foreground)}

.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:20px;
  border-radius:12px;background:var(--muted)}
.auth-switch button{
  height:34px;border-radius:9px;font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground);
  transition:background-color .15s,color .15s,box-shadow .15s;
}
.auth-switch button[aria-selected="true"]{background:var(--background);color:var(--foreground);
  box-shadow:0 1px 2px rgba(0,0,0,.06)}

.auth-oauth{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.auth-provider{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;height:44px;
  border:1px solid var(--border);border-radius:12px;background:var(--background);
  font-size:var(--text-sm);font-weight:500;transition:background-color .15s;
}
.auth-provider:hover{background:rgba(245,245,245,.5)}
.auth-provider svg{width:16px;height:16px}
.auth-or{position:relative;margin-bottom:24px;height:1px;background:var(--border)}
.auth-or span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:0 12px;background:var(--background);font-size:var(--text-xs);color:var(--muted-foreground)}

.auth-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field[hidden]{display:none}
.field label{font-size:var(--text-sm);font-weight:500}
.field input[type="email"],.field input[type="text"],.field input[type="password"]{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--input);border-radius:12px;
  background:transparent;font:inherit;font-size:var(--text-sm);color:var(--foreground);
  box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--muted-foreground)}
.field input:focus{outline:0;border-color:var(--ring-focus);box-shadow:0 0 0 1.5px var(--ring-focus)}
.field.invalid input{border-color:var(--destructive)}
.field .pw{position:relative;display:block}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;
  align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--muted-foreground)}
.pw-toggle:hover{background:var(--muted);color:var(--foreground)}
.pw-toggle svg{width:16px;height:16px}
.err{margin:0;font-size:var(--text-xs);color:var(--destructive);min-height:0}
.err:empty{display:none}
.auth-terms{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-xs);color:var(--muted-foreground)}
.auth-terms[hidden]{display:none}
.auth-terms input{margin-top:1px;accent-color:var(--foreground)}
.auth-terms a{text-decoration:underline;text-underline-offset:2px}
.auth-submit{
  width:100%;height:44px;border-radius:12px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-sm);font-weight:600;transition:background-color .15s;
}
.auth-submit:hover{background:rgba(27,27,27,.9)}
.auth-note{margin:0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground)}
.auth-note[hidden]{display:none}
.auth-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 0 4px}
.auth-done .bubble{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:999px;background:color-mix(in srgb,#059669 12%,transparent);color:#059669;margin-bottom:12px}
.auth-done .bubble svg{width:20px;height:20px}
.auth-done h3{margin:0;font-size:1.125rem;font-weight:600}
.auth-done p{margin:4px 0 20px;font-size:var(--text-sm);color:var(--muted-foreground);max-width:20rem}

/* ==================================================================
   Blog
================================================================== */
.blog-head{max-width:44rem;padding:48px 24px 8px}
.blog-head h1{margin:0 0 10px;font-family:var(--font-display);font-size:2.25rem;font-weight:700;letter-spacing:-.03em}
.blog-head p{margin:0;font-size:1.0625rem;color:var(--muted-foreground)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;padding:20px 24px 24px}
.chip-filter{
  height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--border);
  font-size:var(--text-sm);font-weight:500;color:var(--muted-foreground);
  transition:background-color .15s,color .15s,border-color .15s;
}
.chip-filter:hover{background:var(--muted);color:var(--foreground)}
.chip-filter[aria-selected="true"]{background:var(--foreground);border-color:var(--foreground);color:var(--background)}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 24px 24px}
@media (max-width:1200px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.post-grid{grid-template-columns:1fr}}
.post-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--card);
  border:1px solid var(--border);transition:transform .2s,box-shadow .2s;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-float)}
.post-card[hidden]{display:none}
.post-cover{display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--muted)}
.post-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.post-card:hover .post-cover img{transform:scale(1.03)}
.post-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px}
.post-cat{
  align-self:flex-start;padding:3px 9px;border-radius:999px;background:var(--muted);
  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted-foreground);text-transform:uppercase;
}
.post-title{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.post-dek{font-size:var(--text-sm);line-height:1.55;color:var(--muted-foreground)}
.post-meta{margin-top:2px;font-size:var(--text-xs);color:var(--muted-foreground-subtle)}
.post-card.featured{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.post-card.featured .post-cover{flex:1 1 55%;aspect-ratio:auto;min-height:280px}
.post-card.featured .post-body{flex:1 1 45%;justify-content:center;padding:32px}
.post-card.featured .post-title{font-size:1.75rem;line-height:1.2}
.post-card.featured .post-dek{font-size:1rem}
@media (max-width:760px){
  .post-card.featured{flex-direction:column}
  .post-card.featured .post-cover{min-height:0;aspect-ratio:16 / 10}
  .post-card.featured .post-body{padding:18px}
  .post-card.featured .post-title{font-size:1.25rem}
}

.article{max-width:44rem;margin:0 auto;padding:40px 24px 8px}
.crumbs{display:flex;gap:8px;font-size:var(--text-xs);color:var(--muted-foreground);margin-bottom:16px}
.crumbs a:hover{color:var(--foreground)}
.article h1{margin:0 0 14px;font-family:var(--font-display);font-size:2.125rem;line-height:1.15;
  font-weight:700;letter-spacing:-.03em}
.article .dek{margin:0 0 20px;font-size:1.125rem;line-height:1.6;color:var(--muted-foreground)}
.byline{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--muted-foreground);
  padding-bottom:24px;border-bottom:1px solid var(--border)}
.byline .dot{width:28px;height:28px;border-radius:999px;flex:0 0 28px;
  background:conic-gradient(from 210deg,#ff9a3c,#ff5f8d,#8b5cf6,#3b82f6,#22d3ee,#ff9a3c)}
.byline b{color:var(--foreground);font-weight:600}
.hero-shot{margin:28px 0;border-radius:18px;overflow:hidden;background:var(--muted)}
.hero-shot img{width:100%;height:auto;display:block}
.prose-body p{font-size:1.0625rem;line-height:1.75;margin:0 0 20px}
.prose-body h2{margin:36px 0 14px;font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:-.015em}
.prose-body ul,.prose-body ol{margin:0 0 20px;padding-left:24px}
.prose-body li{font-size:1.0625rem;line-height:1.7;margin-bottom:10px}
.prose-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--muted);padding:2px 6px;border-radius:6px;
}
.prose-body blockquote{
  margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--foreground);
}
.prose-body blockquote p{margin:0;font-family:var(--font-display);font-size:1.125rem;
  line-height:1.5;font-weight:500;letter-spacing:-.01em}
.article-foot{margin:40px 0 8px;padding-top:24px;border-top:1px solid var(--border)}
.article-foot .btn-solid{flex:0 0 auto;width:auto;display:inline-flex}
.more-posts{max-width:72rem;margin:0 auto;padding:24px 0 8px}
.more-posts h2{margin:0 0 4px;padding:0 24px;font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.more-posts .post-grid{padding-top:16px}

/* standalone prompt page uses the lightbox layout inline */
.promptpage{padding:0}
.lb-grid.static{position:relative;display:grid;grid-template-columns:1fr 480px;height:100svh;overflow:hidden;flex:1 1 auto;width:100%;min-width:0}
.lb-grid.static .lb-panel{position:relative}
.mlt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mlt-item{display:block;position:relative;overflow:hidden;border-radius:12px;background:var(--muted)}
.mlt-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.lb-grid.static{grid-template-columns:1fr 400px}}
@media (max-width:767px){
  .lb-grid.static{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;overflow:visible}
  .promptpage{height:auto}

  /* On a phone the prompt page is one scrolling column, like meigen.ai: the
     shot scrolls away with everything else instead of the panel scrolling
     inside a pinned viewport. */
  body:has(.promptpage){overflow-y:auto}
  body:has(.promptpage) .shell{height:auto;display:block}
  body:has(.promptpage) .main{height:auto;overflow:visible}
  body:has(.promptpage) .lb-view{height:auto;min-height:0}
  body:has(.promptpage) .lb-panel{height:auto;overflow:visible}
  body:has(.promptpage) .lb-tools{position:sticky;top:12px;margin-bottom:-52px}

  /* plain white behind the shot — the mesh belongs to the gallery */
  body:has(.promptpage) .mesh{display:none}
  .promptpage .lb-view{background:var(--background)}

  /* one floating action pill, not a full-width bar */
  .promptpage .lb-foot{
    position:fixed;inset-inline:0;bottom:16px;z-index:60;
    padding:0;border-top:0;background:none;justify-content:center;pointer-events:none;
  }
  .promptpage .lb-foot .btn-solid{pointer-events:auto}
  .promptpage .lb-foot .ref{display:none}
  .promptpage .lb-foot .use{
    flex:0 0 auto;height:48px;padding:0 26px;border-radius:999px;
    box-shadow:0 10px 25px -5px rgba(0,0,0,.28),0 8px 10px -6px rgba(0,0,0,.2);
  }
  .promptpage .lb-panel{padding-bottom:80px}
}

/* the currency unit rides with the number instead of wrapping below it */
.pl-price b i,.pl-price s i{
  font-style:normal;font-size:.42em;font-weight:600;margin-inline-start:.35em;
  letter-spacing:0;white-space:nowrap;
}
.pl-price b{white-space:nowrap}
.pl-price s{white-space:nowrap}

/* ==================================================================
   Prompt page extras: stats line, translate/copy chips, negative
   prompt block, and the "more actions" menu.
================================================================== */
.lb-meta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:0 20px 4px;
  font-size:var(--text-xs);color:var(--muted-foreground);
}
.lb-meta-row span,.lb-meta-row a{display:inline-flex;align-items:center;gap:5px}
.lb-meta-row svg{width:13px;height:13px}
.lb-meta-row a:hover{color:var(--foreground)}

.lb-secl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lb-secl.neg{margin-top:18px}
.chip-btn{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--background);
  font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground);
  transition:background-color .15s,color .15s,border-color .15s;
}
.chip-btn:hover{background:var(--muted);color:var(--foreground)}
.chip-btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.chip-btn svg{width:13px;height:13px}

.lang-btn[aria-pressed="true"]{
  background:var(--foreground);border-color:var(--foreground);color:var(--background);
}
/* The English original is Latin script; keep it left-aligned inside the RTL page. */
.lb-prompt[dir="ltr"]{text-align:left}

.lb-prompt.translated{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.lb-prompt.neg{color:var(--muted-foreground)}

.menu-wrap{position:relative}
.menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:120;min-width:190px;
  display:flex;flex-direction:column;padding:6px;border-radius:14px;
  border:1px solid var(--border);background:var(--background);box-shadow:var(--shadow-panel);
}
.menu button{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  font-size:var(--text-sm);text-align:start;transition:background-color .15s;
}
.menu button:hover{background:var(--muted)}

/* the "new" dot beside a freshly updated category */
.sb-sub .dot,.sb-btn .dot{
  width:6px;height:6px;flex:0 0 6px;border-radius:999px;background:var(--brand,#5b5bd6);margin-inline-start:6px;
}
.sb-sub{display:flex;align-items:center}

/* ==================================================================
   Generation studio (right-hand drawer)
================================================================== */
.studio{
  position:fixed;top:16px;bottom:16px;inset-inline-end:16px;z-index:115;width:375px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;border-radius:20px;background:var(--background);
  border:1px solid var(--border);box-shadow:var(--shadow-panel);
  transform:translateX(calc(100% + 24px));transition:transform .24s ease-out;
}
[dir="rtl"] .studio{transform:translateX(calc(-100% - 24px))}
.studio.open,[dir="rtl"] .studio.open{transform:none}
.studio[hidden]{display:flex!important}
.studio:not(.open){pointer-events:none}

.st-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 10px;
}
.st-head h2{margin:0;font-size:1.0625rem;font-weight:600}

.st-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 16px 12px;display:flex;flex-direction:column;gap:12px}

.st-warn{
  margin:0;padding:10px 12px;border-radius:12px;background:var(--muted);
  font-size:var(--text-xs);line-height:1.6;color:var(--muted-foreground);
}

.st-card{border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden}
.st-sources{display:flex;flex-direction:column}
.st-source{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:start;
  transition:background-color .15s;
}
.st-source + .st-source{border-top:1px solid var(--border)}
.st-source:hover{background:var(--muted)}
.st-source .ic{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
  color:var(--muted-foreground);
}
.st-source .ic svg{width:16px;height:16px}
.st-source .t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.st-source .t b{font-size:var(--text-sm);font-weight:600}
.st-source .t span{font-size:var(--text-xs);color:var(--muted-foreground);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-source .shots{display:flex;flex:0 0 auto}
.st-source .shots img{
  width:30px;height:30px;border-radius:8px;object-fit:cover;border:2px solid var(--background);
  background:var(--muted);margin-inline-start:-8px;
}
.st-source.refs{cursor:default}
.st-source.refs:hover{background:none}
.st-refs{display:flex;gap:6px;flex-wrap:wrap}
.st-refs figure{position:relative;margin:0}
.st-refs img{width:30px;height:30px;border-radius:8px;object-fit:cover;background:var(--muted)}
.st-refs button{
  position:absolute;top:-5px;inset-inline-end:-5px;width:16px;height:16px;border-radius:999px;
  background:var(--foreground);color:var(--background);font-size:10px;line-height:1;
}
.st-add{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;
  border-radius:9px;background:var(--muted);font-size:16px;color:var(--muted-foreground);
  transition:background-color .15s,color .15s;
}
.st-add:hover{background:var(--muted-active);color:var(--foreground)}

.st-prompt-card{padding:12px}
.st-prompt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.st-prompt-head label{font-size:var(--text-xs);font-weight:600;color:var(--muted-foreground)}
.st-icon{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
  color:var(--muted-foreground);transition:background-color .15s,color .15s;
}
.st-icon:hover{background:var(--muted);color:var(--foreground)}
.st-icon svg{width:15px;height:15px}
.st-prompt-card textarea{
  width:100%;min-height:96px;resize:vertical;border:0;background:none;padding:0;
  font:inherit;font-size:var(--text-sm);line-height:1.6;color:var(--foreground);
}
.st-prompt-card textarea:focus{outline:none}
.st-prompt-card textarea::placeholder{color:var(--muted-foreground-subtle)}

.st-row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.st-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--background)}
.st-stepper button{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  color:var(--muted-foreground);transition:background-color .15s;
}
.st-stepper button:hover{background:var(--muted)}
.st-stepper button svg{width:14px;height:14px}
.st-stepper span{
  min-width:38px;text-align:center;font-size:var(--text-xs);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.st-pill{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:10px;
  border:1px solid var(--border);background:var(--background);
  font-size:var(--text-xs);font-weight:500;transition:background-color .15s;
}
.st-pill:hover{background:var(--muted)}
.st-pill svg{width:14px;height:14px;color:var(--muted-foreground)}

.st-block{display:flex;flex-direction:column;gap:6px}
.st-label{font-size:var(--text-xs);color:var(--muted-foreground)}

.st-results{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-results:empty{display:none}
.st-shot{position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--muted)}
.st-shot img{width:100%;display:block}
.st-shot .dl{
  position:absolute;bottom:6px;inset-inline-end:6px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;background:var(--surface-80);backdrop-filter:blur(8px);
}
.st-shot .dl svg{width:13px;height:13px}
.st-pending{
  grid-column:1 / -1;display:flex;align-items:center;gap:8px;padding:14px;border-radius:12px;
  background:var(--muted);font-size:var(--text-xs);color:var(--muted-foreground);
}
.st-pending i{
  width:14px;height:14px;border-radius:999px;border:2px solid var(--border);
  border-top-color:var(--foreground);animation:mg-spin .7s linear infinite;
}
@keyframes mg-spin{to{transform:rotate(360deg)}}

.st-foot{display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--border)}
.st-model-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-model{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--background);font-size:var(--text-sm);font-weight:500;
  transition:background-color .15s;
}
.st-model:hover{background:var(--muted)}
.st-model svg{width:15px;height:15px}
.st-model .chev{width:13px;height:13px;color:var(--muted-foreground)}
.st-model-row .menu{inset-inline-end:auto;inset-inline-start:0;bottom:calc(100% + 6px);top:auto}
.st-model-row .menu svg{width:15px;height:15px}
.st-go{width:100%;height:46px;border-radius:14px}
.st-go .n{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;
  border-radius:999px;background:rgba(255,255,255,.18);font-size:var(--text-xs);
}
.st-go[aria-busy="true"]{opacity:.6;pointer-events:none}

@media (max-width:767px){
  /* a phone gets a bottom sheet in both directions */
  .studio,[dir="rtl"] .studio{top:0;bottom:0;inset-inline:0;width:auto;max-width:none;
    border-radius:20px 20px 0 0;transform:translateY(100%);border-inline:0;border-bottom:0}
  .studio.open,[dir="rtl"] .studio.open{transform:none}
}

/* slide-in side panel (Recent updates) */
.side-panel{
  position:fixed;top:16px;bottom:16px;right:16px;z-index:110;width:340px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;border-radius:20px;background:var(--background);
  box-shadow:var(--shadow-panel);transform:translateX(calc(100% + 24px));
  transition:transform .22s ease-out;
}
.side-panel.open{transform:none}
.side-panel header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 18px 12px;border-bottom:1px solid var(--border);
}
.side-panel h2{margin:0;font-size:1.0625rem;font-weight:600}
.side-panel .body{flex:1;min-height:0;overflow-y:auto;padding:12px}
.upd{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;transition:background-color .15s}
.upd:hover{background:var(--muted)}
.upd img{width:52px;height:52px;flex:0 0 52px;border-radius:10px;object-fit:cover;background:var(--muted)}
.upd .t{display:flex;flex-direction:column;min-width:0;gap:2px}
.upd .t b{font-size:var(--text-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upd .t span{font-size:var(--text-xs);color:var(--muted-foreground)}

/* language switch in the sidebar footer */
.lang-switch{
  display:flex;align-items:center;gap:6px;margin:0 0 12px;
  font-size:var(--text-xs);color:var(--muted-foreground);
}
.lang-switch .on{
  padding:3px 9px;border-radius:999px;background:var(--muted-active);
  color:var(--foreground);font-weight:500;
}
.lang-switch a{
  padding:3px 9px;border-radius:999px;transition:background-color .15s,color .15s;
}
.lang-switch a:hover{background:var(--muted);color:var(--foreground)}

/* ==================================================================
   Credits card (sidebar footer, signed in)
================================================================== */
.credits-card{
  border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:12px;background:var(--card);
}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cc-plan{font-size:var(--text-base);font-weight:600}
.cc-upgrade{
  height:28px;padding:0 12px;border-radius:8px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-xs);font-weight:600;transition:background-color .15s;
}
.cc-upgrade:hover{background:rgba(27,27,27,.9)}
.cc-rows{display:flex;flex-direction:column;gap:8px}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cc-label{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--foreground)}
.cc-label svg{width:14px;height:14px;color:var(--muted-foreground);flex:0 0 14px}
.cc-value{font-size:var(--text-sm);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.cc-bar{height:4px;margin:12px 0 8px;border-radius:999px;background:var(--muted);overflow:hidden}
.cc-bar span{display:block;height:100%;border-radius:999px;background:var(--brand-ultimate)}
.cc-note{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--text-xs);color:var(--muted-foreground)}
.cc-note i{width:6px;height:6px;border-radius:999px;background:var(--brand-ultimate);flex:0 0 6px}

.account-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.add-credits{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;
  background:var(--primary);color:var(--primary-foreground);font-size:var(--text-xs);font-weight:600;
}
.add-credits svg{width:12px;height:12px}
.add-credits .n{font-variant-numeric:tabular-nums}

/* ==================================================================
   Pricing modal
================================================================== */
.modal.plans{padding:24px;align-items:flex-start;overflow-y:auto}
.plans-card{
  position:relative;z-index:1;width:100%;max-width:74rem;margin:auto;
  border-radius:24px;background:var(--background);box-shadow:var(--shadow-panel);
  padding:24px;
}
.plans-hero{
  position:relative;overflow:hidden;border-radius:16px;padding:32px 24px;margin-bottom:24px;
  background:var(--surface-soft);text-align:center;
}
.plans-hero h2{position:relative;z-index:1;margin:0 0 10px;font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;letter-spacing:-.02em}
.plans-hero p{position:relative;z-index:1;margin:0;color:var(--muted-foreground);font-size:var(--text-base)}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.plans-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.plans-grid{grid-template-columns:1fr}}
.plan{
  display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;padding:20px;
  background:var(--card);
}
.plan.hl-pro{border-color:#147dff;box-shadow:0 0 0 1px #147dff inset}
.plan.hl-ultimate{border-color:var(--brand-ultimate);box-shadow:0 0 0 1px var(--brand-ultimate) inset}
.pl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:16px}
.pl-name{margin:0;font-family:var(--font-display);font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
.pl-name.pro{color:#147dff}
.pl-name.ultimate{color:var(--brand-ultimate)}
.pl-tag{margin:2px 0 0;font-size:var(--text-sm);color:var(--muted-foreground)}
.pl-badge{
  flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:var(--text-xs);font-weight:600;
  background:var(--muted);color:var(--muted-foreground);
}
.pl-badge.pro{background:rgba(20,125,255,.12);color:#147dff}
.pl-badge.ultimate{background:rgba(96,93,243,.12);color:var(--brand-ultimate)}
.pl-price{margin:0;font-family:var(--font-display);font-size:1.25rem;color:var(--muted-foreground)}
.pl-price b{font-size:2.25rem;font-weight:700;color:var(--foreground);letter-spacing:-.02em}
.pl-price s{margin-inline-end:6px;font-size:1.5rem;font-weight:700;text-decoration-thickness:2px}
.pl-note{margin:6px 0 20px;font-size:var(--text-xs);color:var(--muted-foreground)}
.pl-credits{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:16px}
.pl-credits b{font-size:1.0625rem;font-weight:600}
.pl-credits span{font-size:var(--text-sm);color:var(--muted-foreground)}
.pl-details{margin-inline-start:auto;font-size:var(--text-sm);color:#147dff}
.pl-details:hover{text-decoration:underline}
.pl-cta{
  height:44px;border-radius:10px;font-size:var(--text-base);font-weight:600;margin-bottom:20px;
  background:var(--primary);color:var(--primary-foreground);transition:background-color .15s,opacity .15s;
}
.pl-cta:hover{background:rgba(27,27,27,.9)}
.pl-cta.pro{background:#147dff}
.pl-cta.pro:hover{background:#0f6ad9}
.pl-cta.ultimate{background:var(--brand-ultimate)}
.pl-cta.ultimate:hover{background:#4f4cd8}
.pl-cta.current{background:transparent;color:var(--muted-foreground);border:1px solid var(--border);cursor:default}
.pl-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pl-feats li{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-sm);line-height:1.5}
.pl-feats svg{width:13px;height:13px;margin-top:4px;flex:0 0 13px;color:#059669}


/* signed-in sidebar: the credits card takes the promo's place */
body.signed-in .share-card{display:none}
body.signed-in .sb-foot{padding:12px 14px}
body.signed-in .credits-card{padding:10px;margin-bottom:10px}
body.signed-in .cc-head{margin-bottom:8px}
body.signed-in .cc-rows{gap:6px}
body.signed-in .cc-bar{margin:10px 0 6px}
body.signed-in .sb-legal{margin-bottom:10px}


/* the standalone prompt page is a full-screen reader: the floating dock would
   sit on top of its action bar, exactly as the lightbox hides it elsewhere */
body:has(.promptpage) .dock{display:none}
.lb-foot{z-index:60}
.add-credits{white-space:nowrap}

/* ==================================================================
   Profile
================================================================== */
.pf-head{padding:16px 16px 8px}
.pf-head-l{display:flex;align-items:center;gap:12px}
.pf-head h1{margin:0;font-size:var(--text-sm);font-weight:700}
.pf-wrap{max-width:680px;margin:0 auto;padding:16px 0 8px;display:flex;flex-direction:column;gap:16px}
.pf-card{border:1px solid var(--border);border-radius:12px;background:var(--card)}
.pf-pad{padding:20px;display:flex;flex-direction:column}
.pf-sep{height:1px;background:var(--border)}

.pf-id{display:flex;align-items:center;gap:16px;padding:20px}
.pf-avatar{position:relative;border-radius:999px;flex:0 0 auto}
.pf-av{
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:999px;
  background:var(--foreground);color:var(--background);font-size:1.375rem;font-weight:600;
  overflow:hidden;background-size:cover;background-position:center;
}
.pf-av.has-img{color:transparent}
.pf-av-edit{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s;
}
.pf-avatar:hover .pf-av-edit{opacity:1}
.pf-av-edit svg{width:18px;height:18px}
.pf-id-t{flex:1;min-width:0}
.pf-name{display:block;font-size:1.125rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-outline{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;flex:0 0 auto;
  border:1px solid var(--border);border-radius:8px;font-size:var(--text-sm);font-weight:500;
  transition:background-color .15s;
}
.pf-outline:hover{background:var(--muted)}
.pf-outline svg{width:13px;height:13px}

.pf-rows{display:flex;flex-direction:column;gap:14px;padding:16px 20px}
.pf-label{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--muted-foreground)}
.pf-hint{display:inline-flex;color:var(--muted-foreground);cursor:help}
.pf-hint svg{width:12px;height:12px}
.pf-value{margin-top:3px;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-value.link{color:var(--muted-foreground)}
.pf-value.link[href]{color:#147dff}
.pf-value.link[href]:hover{text-decoration:underline}
.pf-value-row{display:flex;align-items:center;gap:8px;min-width:0}
.pf-icon{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
  border-radius:7px;color:var(--muted-foreground);transition:background-color .15s,color .15s;
}
.pf-icon:hover{background:var(--muted);color:var(--foreground)}
.pf-icon svg{width:13px;height:13px}
.pf-edit{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.pf-edit input{
  flex:1;min-width:180px;height:36px;padding:0 10px;border:1px solid var(--input);border-radius:9px;
  background:transparent;font:inherit;font-size:var(--text-sm);
}
.pf-edit input:focus{outline:0;border-color:var(--ring-focus);box-shadow:0 0 0 1.5px var(--ring-focus)}
.pf-save{height:36px;padding:0 14px;border-radius:9px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-sm);font-weight:600}
.pf-cancel{height:36px;padding:0 12px;border-radius:9px;font-size:var(--text-sm);color:var(--muted-foreground)}
.pf-cancel:hover{background:var(--muted);color:var(--foreground)}

.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}}
.pf-card-h{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--muted-foreground)}
.pf-card-h svg{width:15px;height:15px}
.pf-card-h.pf-pad-h{padding:16px 20px;font-weight:500;color:var(--foreground)}
.pf-big{margin-top:12px;font-size:1.875rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.pf-sub{margin-top:4px;font-size:var(--text-xs);color:var(--muted-foreground)}
.pf-daily{margin:20px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.pf-daily-r{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs)}
.pf-daily-r span{display:flex;align-items:center;gap:6px;color:var(--muted-foreground)}
.pf-daily-r svg{width:12px;height:12px}
.pf-daily-r b{font-weight:500;font-variant-numeric:tabular-nums}
.pf-bar{height:6px;border-radius:999px;background:var(--muted);overflow:hidden}
.pf-bar span{display:block;height:100%;border-radius:999px;background:var(--brand-ultimate)}
.pf-cta{margin-top:20px;height:38px;border-radius:9px;background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-sm);font-weight:600;transition:background-color .15s}
.pf-cta:hover{background:rgba(27,27,27,.9)}
.pf-list{margin-top:12px;flex:1;display:flex;flex-direction:column;gap:8px}
.pf-empty{margin:0;padding:24px 0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground)}
.pf-empty.tall{padding:48px 0;font-size:var(--text-sm)}
.pf-topup{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-radius:9px;background:var(--muted);font-size:var(--text-sm)}
.pf-topup b{font-weight:600}
.pf-topup span{font-size:var(--text-xs);color:var(--muted-foreground)}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 20px}
.pf-num{margin-top:4px;font-size:1.375rem;font-weight:700;font-variant-numeric:tabular-nums}
.pf-range{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;margin-inline-start:auto;
  border:1px solid var(--border);border-radius:8px;font-size:var(--text-xs);font-weight:500;color:var(--foreground);
}
.pf-range svg{width:12px;height:12px;color:var(--muted-foreground)}
.pf-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px}
.pf-filters .pf-range{margin-inline-start:0}
.pf-danger{margin:8px 0 0;text-align:center}
.pf-danger button{font-size:var(--text-xs);color:var(--muted-foreground);text-decoration:underline;
  text-underline-offset:2px}
.pf-danger{display:flex;align-items:center;justify-content:center;gap:10px}
.pf-danger button:hover{color:var(--foreground)}
.pf-danger button.danger:hover{color:var(--destructive)}
.pf-danger span{color:var(--muted-foreground);font-size:var(--text-xs)}
.account-av.img{background-size:cover;background-position:center;color:transparent}
.account{cursor:pointer;border-radius:8px;padding:2px 4px;margin:-2px -4px;transition:background-color .15s}
.account:hover{background:var(--muted)}

/* ==================================================================
   Dark theme — token swap only; every surface above reads from these
================================================================== */
:root[data-theme="dark"]{
  --background:#0f0f11;
  --page:#0b0b0d;
  --card:#17171a;
  --popover:#17171a;
  --foreground:#f2f2f3;
  --card-foreground:#f2f2f3;
  --popover-foreground:#f2f2f3;
  --muted:#212125;
  --muted-hover:#2a2a2f;
  --muted-active:#2e2e34;
  --muted-foreground:#a8a8b2;
  --muted-foreground-subtle:#8b8b95;
  --border:#2b2b32;
  --input:#2b2b32;
  --secondary:#1e1e22;
  --secondary-foreground:#f2f2f3;
  --accent:#212125;
  --accent-foreground:#f2f2f3;
  --primary:#f2f2f3;
  --primary-foreground:#0f0f11;
  --ring:#f2f2f3;
  --sidebar:#17171a;
  --sidebar-border:#2b2b32;
  --skeleton:#1c1c20;
  --surface-95:rgba(23,23,26,.95);
  --surface-80:rgba(23,23,26,.82);
  --surface-70:rgba(23,23,26,.72);
  --surface-soft:rgba(255,255,255,.04);
  --scrim:rgba(8,8,10,.86);
  --mesh-opacity:.42;
  --shadow-float:0 10px 30px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);
  --shadow-panel:0 16px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --shadow-control:0 3px 14px rgba(0,0,0,.5);
}
:root[data-theme="dark"] body{background:var(--background);color:var(--foreground)}
:root[data-theme="dark"] .btn-rainbow{
  background-image:
    linear-gradient(#f2f2f3,#f2f2f3),
    linear-gradient(#f2f2f3 50%,rgba(242,242,243,.6) 80%,rgba(242,242,243,0)),
    linear-gradient(90deg,hsl(0,100%,63%),hsl(30,100%,63%),hsl(60,100%,63%),hsl(120,100%,63%),hsl(180,100%,63%),hsl(240,100%,63%),hsl(300,100%,63%),hsl(360,100%,63%));
  color:#0f0f11;
}
:root[data-theme="dark"] .skill-card{filter:brightness(.62) saturate(.8)}
:root[data-theme="dark"] .skill-card h2,
:root[data-theme="dark"] .skill-card p{color:#f2f2f3}
:root[data-theme="dark"] .gh-badge .l{background:#2b2b32}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3a42}
:root[data-theme="dark"] .pl-name.pro,:root[data-theme="dark"] .pl-details{color:#4f9dff}
:root[data-theme="dark"] .plan.hl-pro{border-color:#4f9dff;box-shadow:0 0 0 1px #4f9dff inset}
:root[data-theme="dark"] .pl-cta.pro{background:#2b7fe6}
:root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .fcard .ic{background:rgba(79,157,255,.14);color:#4f9dff}
:root[data-theme="dark"] .checks svg{color:#4f9dff}
:root[data-theme="dark"] .pf-value.link[href]{color:#4f9dff}
:root[data-theme="dark"] .hero-shot,:root[data-theme="dark"] .post-cover{background:var(--muted)}

/* motion + density preferences, applied from the settings page */
:root[data-motion="reduced"] .mesh > div{animation:none}
:root[data-motion="reduced"] .btn-rainbow,
:root[data-motion="reduced"] .btn-rainbow::before{animation:none}
:root[data-motion="reduced"] *{transition-duration:.01ms!important}
:root[data-motion="reduced"] .auth-hero-pulse{animation:none}
:root[data-promo="off"] .promo{display:none}

/* ==================================================================
   Settings
================================================================== */
.st-saved{
  margin-inline-start:auto;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,#059669 14%,transparent);color:#059669;
  font-size:var(--text-xs);font-weight:600;
}
.st-card{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}
.st-h{margin:0;padding:14px 20px;font-size:var(--text-sm);font-weight:700;border-bottom:1px solid var(--border)}
.st-body{display:flex;flex-direction:column}
.st-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--border);
}
.st-row:last-child{border-bottom:0}
.st-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-label{font-size:var(--text-sm);font-weight:500}
.st-hint{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.5}
.st-foot{margin:0;padding:12px 20px;font-size:var(--text-xs);color:var(--muted-foreground);
  border-top:1px solid var(--border)}

.switch{
  position:relative;width:42px;height:24px;flex:0 0 42px;border-radius:999px;
  background:var(--muted-active);transition:background-color .18s;
}
.switch span{
  position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:999px;
  background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s;
}
.switch[aria-checked="true"]{background:var(--brand-ultimate)}
.switch[aria-checked="true"] span{transform:translateX(18px)}
[dir="rtl"] .switch[aria-checked="true"] span{transform:translateX(-18px)}

.st-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--muted);flex:0 0 auto}
.st-seg button{
  height:28px;padding:0 12px;border-radius:8px;font-size:var(--text-xs);font-weight:500;
  color:var(--muted-foreground);transition:background-color .15s,color .15s;
}
.st-seg button[aria-checked="true"]{background:var(--card);color:var(--foreground);
  box-shadow:0 1px 2px rgba(0,0,0,.08)}

.st-form{display:flex;flex-direction:column;gap:14px;padding:16px 20px}
.st-form .field input{width:100%}
.st-btn{
  align-self:flex-start;height:38px;padding:0 16px;border-radius:9px;
  background:var(--primary);color:var(--primary-foreground);
  font-size:var(--text-sm);font-weight:600;transition:background-color .15s,color .15s;
}
.st-btn:hover{opacity:.9}
.st-btn.ghost{background:transparent;color:var(--foreground);border:1px solid var(--border)}
.st-btn.ghost:hover{background:var(--muted)}
.st-btn.danger{background:transparent;color:var(--destructive);border:1px solid var(--border)}
.st-btn.danger:hover{background:color-mix(in srgb,var(--destructive) 10%,transparent)}
@media (max-width:600px){
  .st-row{flex-direction:column;align-items:stretch;gap:10px}
  .st-seg,.switch{align-self:flex-start}
}