/* ==========================================================================
   ORBT — premium-dark link-in-bio. Shared design system.
   Solar-on-ink palette · Clash Display / General Sans / JetBrains Mono
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces */
  --bg:        #08080C;
  --bg-1:      #0E0E15;
  --bg-2:      #15151F;
  --bg-3:      #1D1D29;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* ink */
  --text:      #F4F2EC;   /* warm ivory */
  --muted:     #9A9AA8;
  --faint:     #63636F;

  /* brand */
  --accent:    #F6C453;   /* solar gold */
  --accent-ink:#1A1503;   /* text on gold */
  --orbit:     #7AA2FF;   /* cool orbital glow (used sparingly) */
  --plasma:    #C8A2FF;   /* tertiary, sparingly */

  /* effects */
  --glow:      0 0 60px rgba(246,196,83,.35);
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* type */
  --display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --body:    "General Sans", "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* layout */
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* (G) hide ALL scrollbars everywhere while keeping scroll functional —
   pages, dashboard, popovers, preview, public page. Repeated/important to the user. */
html{scrollbar-width:none;-ms-overflow-style:none}
*{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;            /* clip (not hidden) — prevents h-scroll WITHOUT breaking position:sticky */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.display{font-size:clamp(2.8rem,7vw,6rem);font-weight:600}
h2{font-size:clamp(2rem,4.5vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.lead,p{text-wrap:pretty}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.6}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:54ch}
.mono{font-family:var(--mono)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(52px,7.5vw,100px)}
/* anchors clear the fixed nav at every size (was 88px → clipped on scrolled-down nav) */
section[id],[id]{scroll-margin-top:clamp(96px,12vh,120px)}
.center{text-align:center}
.section-head{max-width:62ch}
.section-head.center{margin-inline:auto}
.section-head h2{margin:.5rem 0 1rem}

/* ---------- buttons ---------- */
.btn{
  --b:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:100px;font-weight:600;font-size:.98rem;
  background:var(--b);color:var(--accent-ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .25s;
  will-change:transform;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 40px -8px rgba(246,196,83,.5)}
.btn:active{transform:scale(.97)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--bg-2);box-shadow:none;filter:none;border-color:var(--line-2)}
.btn-lg{padding:1.05em 1.9em;font-size:1.05rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,12,.72);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);padding-block:12px;
}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.94rem;color:var(--muted);transition:color .25s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none}
/* dashboard: a tighter, lower-profile top bar than the marketing nav */
.dash-body .nav{padding-block:9px}
.dash-body .nav.scrolled{padding-block:8px}
.dash-body .nav .logo{font-size:1.2rem}

/* logo: orb•t with orbiting dot */
.logo{display:inline-flex;align-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.03em}
.logo .dot{
  display:inline-block;width:.34em;height:.34em;border-radius:50%;
  background:var(--accent);margin:0 .04em;vertical-align:middle;
  box-shadow:0 0 14px 2px rgba(246,196,83,.7);
  animation:logo-orbit 6s linear infinite;
}
@keyframes logo-orbit{
  0%{transform:translateY(-.18em)}
  25%{transform:translate(.1em,0)}
  50%{transform:translateY(.18em)}
  75%{transform:translate(-.1em,0)}
  100%{transform:translateY(-.18em)}
}
@media (prefers-reduced-motion:reduce){.logo .dot{animation:none}}

/* ==========================================================================
   HERO — the orbital field signature
   ========================================================================== */
.hero{padding-top:clamp(120px,18vh,200px);overflow:hidden;min-height:100svh;display:flex;align-items:center;position:relative}
.hero .hero-grid{position:relative;z-index:2}
.hero-copy{position:relative;z-index:3}
/* hero shape motif (Orbt style) — slow drifting aurora behind the copy */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 52% at 76% 34%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
  radial-gradient(40% 40% at 16% 86%,rgba(122,162,255,.07),transparent 70%)}
/* moving aurora wash on the left so the copy side isn't dead */
.hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:
    radial-gradient(38% 44% at 22% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
    radial-gradient(40% 46% at 8% 78%,rgba(122,162,255,.12),transparent 72%),
    radial-gradient(44% 50% at 38% 60%,rgba(200,162,255,.08),transparent 74%);
  background-size:180% 180%;animation:hero-aurora 26s ease-in-out infinite}
@keyframes hero-aurora{0%,100%{background-position:0% 40%}50%{background-position:100% 60%}}
.hero-rings{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-rings span{position:absolute;top:36%;left:74%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);
  transform-origin:center;animation:hero-ring-drift 40s linear infinite}
.hero-rings span:nth-child(1){width:360px;height:360px}
.hero-rings span:nth-child(2){width:600px;height:600px;border-color:rgba(255,255,255,.05);animation-duration:60s;animation-direction:reverse}
.hero-rings span:nth-child(3){width:860px;height:860px;border-color:rgba(255,255,255,.03);animation-duration:90s}
@keyframes hero-ring-drift{
  0%{transform:translate(-50%,-50%) rotate(0) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.06)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.hero-aurora,.hero-rings span{animation:none}}

/* ---------- looks teaser ---------- */
.looks-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,30px);margin-top:3rem;flex-wrap:wrap}
.phone-sm{position:relative;width:min(244px,74vw);border-radius:34px;padding:9px;background:linear-gradient(160deg,#26262F,#0C0C12);border:1px solid var(--line-2);box-shadow:0 30px 70px -28px rgba(0,0,0,.8);transition:transform .4s var(--ease)}
.phone-sm:hover{transform:translateY(-8px)}
.phone-sm.lift{margin-bottom:34px}
.phone-screen3{border-radius:26px;overflow:hidden;height:430px;overflow-y:auto;scrollbar-width:none}
.phone-screen3::-webkit-scrollbar{display:none}

/* ---------- import ---------- */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.import-visual{display:grid;place-items:center}
.import-box{width:min(380px,88vw);background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.import-box .pre{color:var(--faint);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.import-field{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:.85rem 1rem;color:var(--accent);min-height:2.7em}
.import-arrow{text-align:center;color:var(--muted);font-size:1.3rem}
.import-result{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:10px;padding:.85rem 1rem;color:var(--accent);font-size:.84rem;text-align:center}

/* ---------- footer bottom (no crest) ---------- */
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:.76rem}

@media (max-width:760px){
  .import-grid{grid-template-columns:1fr;text-align:center}
  .import-visual{order:-1}
  .phone-sm.lift{margin-bottom:0}
}

/* ---------- sub-page headers + gallery ---------- */
.nav-links a.active{color:var(--accent)}
.page-head{padding:clamp(118px,17vh,176px) 0 clamp(36px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:.6rem auto 1rem}
.page-head .lead{margin-inline:auto}

/* ----- per-page opening rhythm (shared tokens, distinct spine) -----
   Each sub-page hangs a different "rail" under its lead so the openings don't
   read as the same centered unit recycled. */
/* LOOKS — a live palette rail telegraphing infinite color */
.head-rail{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:1.8rem}
.head-swatch{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .3s var(--ease)}
.head-rail:hover .head-swatch{transform:translateY(0)}
.head-swatch:hover{transform:translateY(-5px) scale(1.06)}
/* PRICING — a mono fact rail under the lead, in the pricing voice */
.head-facts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(.6rem,2vw,1.4rem);margin-top:1.8rem;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
.head-facts b{color:var(--accent);font-weight:500}
.head-facts .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
@media (max-width:460px){.head-facts .sep{display:none}.head-facts{gap:.5rem 1rem}}
.looks-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(22px,3vw,40px);justify-items:center}
/* marketing preview phones are decorative — links inside must NOT be clickable/navigable
   (the dashboard #preview and public u.html keep their links fully interactive) */
.looks-gallery .orbt-profile,.looks-teaser .orbt-profile{pointer-events:none}
.looks-gallery .orbt-profile a,.looks-teaser .orbt-profile a,
.looks-gallery .op-link,.looks-teaser .op-link,
.looks-gallery .op-feat,.looks-teaser .op-feat,
.looks-gallery .op-video,.looks-teaser .op-video,
.looks-gallery .op-spotify,.looks-teaser .op-spotify,
.looks-gallery .op-social,.looks-teaser .op-social,
.looks-gallery .op-audio-btn,.looks-teaser .op-audio-btn{pointer-events:none;cursor:default}
.look-item{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:256px}
.look-item .phone-sm{width:100%;max-width:248px}
.look-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.feat-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:2.2rem;max-width:760px;margin-inline:auto}
.feat-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:.88rem}
.feat-chip b{color:var(--text);font-weight:600}

/* ---------- video link card ---------- */
.op-video{display:block;border-radius:var(--op-radius,15px);overflow:hidden;background:var(--ps);border:1px solid var(--pl);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-video:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-video-thumb{display:block;aspect-ratio:16/9;background:#0d0d12 center/cover no-repeat;position:relative}
.op-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--pa) 92%,#000);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.op-play::after{content:"";border-left:15px solid var(--op-onaccent,var(--pf));border-block:9px solid transparent;margin-left:4px}
.op-video-title{display:block;padding:12px 16px;font-weight:500;font-size:.95rem;color:var(--pt);text-align:left}
.op-video{cursor:pointer}
.op-video.played .op-play{display:none}
.op-embed{position:relative;line-height:0}

/* ---------- hover-motion variants ---------- */
.orbt-profile[data-hover="grow"] .op-link:hover{transform:scale(1.03)}
.orbt-profile[data-hover="slide"] .op-link:hover{transform:translateX(5px)}
.orbt-profile[data-hover="glow"] .op-link:hover{transform:none;box-shadow:0 0 26px -4px color-mix(in srgb,var(--pa) 70%,transparent)}
.orbt-profile[data-hover="none"] .op-link:hover{transform:none;box-shadow:none}

/* ---------- more intro animations ---------- */
.op-content.op-intro[data-intro="fade"] .op-link,.op-content.op-intro[data-intro="fade"] .op-video,.op-content.op-intro[data-intro="fade"] .op-spotify{animation:op-fade .6s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="zoom"] .op-link,.op-content.op-intro[data-intro="zoom"] .op-video,.op-content.op-intro[data-intro="zoom"] .op-spotify{animation:op-zoom .55s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="blur"] .op-link,.op-content.op-intro[data-intro="blur"] .op-video,.op-content.op-intro[data-intro="blur"] .op-spotify{animation:op-blurin .6s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="flip"] .op-link,.op-content.op-intro[data-intro="flip"] .op-video,.op-content.op-intro[data-intro="flip"] .op-spotify{animation:op-flip .6s both;animation-delay:calc(.22s + var(--i)*.08s);transform-origin:top}
.op-content.op-intro[data-intro="drop"] .op-link,.op-content.op-intro[data-intro="drop"] .op-video,.op-content.op-intro[data-intro="drop"] .op-spotify{animation:op-drop .6s cubic-bezier(.5,1.7,.6,1) both;animation-delay:calc(.2s + var(--i)*.07s)}
.op-content.op-intro[data-intro="swing"] .op-link,.op-content.op-intro[data-intro="swing"] .op-video,.op-content.op-intro[data-intro="swing"] .op-spotify{animation:op-swing .7s both;animation-delay:calc(.2s + var(--i)*.07s);transform-origin:top center}
@keyframes op-fade{from{opacity:0}to{opacity:1}}
@keyframes op-zoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes op-blurin{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes op-flip{from{opacity:0;transform:perspective(600px) rotateX(-85deg)}to{opacity:1;transform:none}}
@keyframes op-drop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes op-swing{0%{opacity:0;transform:rotate(-7deg) translateY(14px)}60%{transform:rotate(3deg)}100%{opacity:1;transform:none}}

/* ---------- premium / VIP crown ----------
   The crown is always a GOLD chip on a DARK backing so it stays visible even
   when its container is selected (gold-on-gold previously made it vanish). */
.crown{display:inline-grid;place-items:center;width:1.05em;height:1.05em;margin-left:.4em;
  color:var(--accent);background:#0b0b10;border:1px solid color-mix(in srgb,var(--accent) 55%,#0b0b10);
  border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 6px -2px color-mix(in srgb,var(--accent) 80%,transparent);
  vertical-align:-2px;flex:none}
.crown svg{width:11px;height:11px;fill:currentColor}
/* on a SELECTED (gold) seg button / chip, the crown keeps its dark backing → always readable */
.seg button.on .crown,.preset-chip.on .crown,.font-chip.on .crown{color:var(--accent);background:#0b0b10;border-color:color-mix(in srgb,var(--accent) 70%,#0b0b10)}

/* ---------- font pickers ---------- */
.font-block + .font-block{margin-top:1.1rem}
.font-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.font-grid{display:flex;flex-wrap:wrap;gap:8px}
.font-chip{padding:.5rem .9rem;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);font-size:1.02rem;line-height:1;transition:color .2s,border-color .2s;display:inline-flex;align-items:center}
.font-chip:hover{color:var(--text)}
.font-chip.on{border-color:var(--accent);color:var(--text)}
.icon-btn.vid.on{color:var(--accent)}
.slider{appearance:none;-webkit-appearance:none;flex:1;max-width:210px;height:5px;border-radius:100px;background:var(--bg-3);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}

/* ===== ambient background motion (marketing + dashboard) ===== */
.page-motion{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.page-motion::before,.page-motion::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);will-change:transform}
.page-motion::before{width:52vw;height:52vw;top:-16%;right:-12%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);animation:pm-a 28s ease-in-out infinite}
.page-motion::after{width:46vw;height:46vw;bottom:-22%;left:-12%;background:radial-gradient(circle,rgba(122,162,255,.13),transparent 68%);animation:pm-b 34s ease-in-out infinite}
@keyframes pm-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12%,16%) scale(1.12)}}
@keyframes pm-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14%,-12%) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.page-motion::before,.page-motion::after{animation:none}}

/* (V) dashboard background — premium depth without noise: a deep radial vignette,
   a faint solar glow up top, and a barely-there dot grid for structure. On-brand, subtle. */
.dash-body{background:var(--bg)}
.dash-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:clip;
  background:
    radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,color-mix(in srgb,var(--orbit) 7%,transparent),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%);
}
.dash-bg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 8%,transparent) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 70%);
          mask:radial-gradient(120% 80% at 50% 0%,#000,transparent 70%);
}
.dash-bg::after{content:"";position:absolute;inset:0;opacity:.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* status pill — live presence dot (guns.lol-style) */
.op-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pa);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent);animation:op-live 1.9s infinite}
@keyframes op-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media (prefers-reduced-motion:reduce){.op-status::before{animation:none}}

/* emoji quick-picks */
.emoji-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.emoji-picks button{width:34px;height:34px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);font-size:1.05rem;line-height:1;transition:transform .15s,border-color .15s}
.emoji-picks button:hover{transform:scale(1.12);border-color:var(--accent)}
.char-count{float:right;font-family:var(--mono);font-size:.68rem;color:var(--faint);font-weight:400;letter-spacing:.04em}
.import-bar{display:flex;gap:10px;margin-bottom:.6rem;flex-wrap:wrap}
.import-bar .input{flex:1;min-width:160px}
.import-status{font-size:.84rem;color:var(--muted);min-height:1.2em;margin-bottom:1rem}
.status-row{display:flex;gap:10px}
.status-row .status-emoji{max-width:66px;text-align:center;font-size:1.1rem}
.music-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ===== guns.lol-style: status pill, video bg, audio, entry gate ===== */
.op-status{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.35rem .85rem;border-radius:100px;background:color-mix(in srgb,var(--pa) 14%,transparent);border:1px solid color-mix(in srgb,var(--pa) 32%,transparent);font-size:.82rem;color:var(--pt)}
.op-status-emoji{font-size:1rem}
.op-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-bg-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,9,.3),rgba(5,5,9,.62))}
.op-audio{position:absolute;top:16px;right:16px;z-index:6;display:flex;align-items:center;gap:.5rem}
.op-audio-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 92%,#000);box-shadow:0 6px 18px rgba(0,0,0,.45);position:relative;cursor:pointer}
.op-audio-btn svg{width:18px;height:18px;fill:var(--op-onaccent,var(--pf));position:absolute}
.op-audio .op-ico-pause{display:none}
.op-audio.playing .op-ico-play{display:none}
.op-audio.playing .op-ico-pause{display:block}
.op-audio-title{max-width:150px;font-size:.74rem;color:var(--pt);background:color-mix(in srgb,var(--pt) 9%,transparent);padding:.4rem .75rem;border-radius:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px)}
.op-audio.playing .op-audio-btn::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid color-mix(in srgb,var(--pa) 55%,transparent);animation:op-ping 1.6s ease-out infinite}
@keyframes op-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.op-enter{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(8,8,12,.94);backdrop-filter:blur(10px);cursor:pointer;text-align:center;transition:opacity .6s var(--ease)}
.op-enter.gone{opacity:0;pointer-events:none}
.op-enter .logo{font-size:2.2rem;margin-bottom:1.1rem}
.op-enter .ec{font-family:var(--mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.op-enter .ec{animation:none}}

/* public-page top bar — small menu (left) + share (right), Linktree-style.
   Adapts ink to the profile theme via the data-theme on .op-topbar. */
.op-topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(14px,4vw,26px);pointer-events:none}
.op-topbar .op-tb-btn{pointer-events:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,#08080C 42%,transparent);color:#F4F2EC;border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;
  transition:transform .2s var(--ease),background .2s,border-color .2s}
.op-topbar[data-theme="light"] .op-tb-btn{background:color-mix(in srgb,#fff 55%,transparent);color:#16151A;border-color:rgba(0,0,0,.12)}
.op-tb-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--accent,#F6C453) 88%,#08080C);color:#08080C;border-color:transparent}
.op-tb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.op-tb-btn.copied{background:#62D08A;color:#08080C;border-color:transparent}
/* keep content clear of the bar */
.op-stage .orbt-profile .op-content{padding-top:64px}

/* import typewriter caret */
.import-typed{color:var(--accent)}
.import-typed::after{content:"";display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* compare table */
.table-wrap{margin-top:3rem;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:.95rem}
.cmp th{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--text)}
.cmp td:first-child{color:var(--muted)}
.cmp .hl{color:var(--accent);font-weight:600}
.cmp thead th.hl{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:10px 10px 0 0}
.cmp tbody td.hl{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cmp-note{margin-top:1rem;font-size:.78rem;color:var(--faint)}
/* SVG cells (no glyph icons) */
.cmp .ck,.cmp .dash{display:inline-block;width:20px;height:20px;vertical-align:middle}
.cmp .ck{stroke:currentColor;stroke-width:2.4;fill:none;color:var(--muted)}
/* "No" cell — a clearly visible muted token (circled dash) so the contrast with
   Orbt's gold checks is honest & readable, not a near-invisible hairline. */
.cmp .dash{width:22px;height:22px;padding:0;box-sizing:border-box;
  border-radius:50%;background:color-mix(in srgb,var(--muted) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--muted) 26%,transparent);
  stroke:var(--muted);stroke-width:2.6;fill:none;opacity:.78}
.cmp td.hl .ck{color:var(--accent)}
.cmp .star{font-family:var(--mono);font-size:.7rem;color:var(--accent);vertical-align:super;margin-left:1px}

.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%;
}
.hero-copy{position:relative;z-index:3}
.hero h1{margin:1.2rem 0}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero .lead{margin-bottom:2rem}

/* claim-handle input */
.claim{
  display:flex;align-items:center;gap:.4rem;max-width:440px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:100px;
  padding:.4rem .4rem .4rem 1.1rem;transition:border-color .3s,box-shadow .3s;
}
.claim:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,196,83,.12)}
.claim .pre{color:var(--faint);font-family:var(--mono);font-size:.95rem;white-space:nowrap}
.claim input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
  font-size:1rem;font-family:var(--mono);padding:.55rem .2rem;
}
.claim input::placeholder{color:var(--faint)}
.claim .btn{padding:.7em 1.2em}
.hero-trust{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;color:var(--muted);font-size:.88rem}
.hero-trust .avatars{display:flex}
.hero-trust .avatars span{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;
  background:linear-gradient(135deg,var(--accent),var(--orbit));
}
.hero-trust .avatars span:first-child{margin-left:0}

/* orbital stage */
.orbital{
  position:relative;aspect-ratio:1;width:100%;max-width:560px;margin-inline:auto;
  display:grid;place-items:center;
}
@media (min-width:1500px){.orbital{max-width:640px}}
.orbital .ring{
  position:absolute;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--accent) 8%,transparent);
}
.orbital .ring-halo{border-color:color-mix(in srgb,var(--accent) 12%,transparent);border-style:dashed;box-shadow:none}
.orbital .core{
  position:relative;z-index:5;width:clamp(96px,22%,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 45%,#9A6B12 100%);
  box-shadow:0 0 70px 6px rgba(246,196,83,.45),inset 0 0 30px rgba(255,255,255,.35);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:1.5rem;
}
.orbital .core::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(246,196,83,.3);animation:pulse 3.5s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.sat{
  position:absolute;top:50%;left:50%;z-index:4;
  width:clamp(40px,9%,54px);aspect-ratio:1;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(21,21,31,.85);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 30px -8px rgba(0,0,0,.6);
  transition:transform .2s var(--ease);
  will-change:transform;
}
.sat svg{width:54%;height:54%;fill:var(--text)}
.sat:hover{transform:scale(1.18) translate(var(--sx,0),var(--sy,0))!important;border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.orbital .core::after{animation:none}}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:0;overflow:hidden;background:var(--bg-1)}
.marquee-track{display:flex;padding:26px 0;width:max-content;animation:scroll-x 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{to{transform:translateX(-50%)}}
.marquee-track span{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.95rem;white-space:nowrap;margin-right:4rem}
.marquee-track svg{width:20px;height:20px;fill:var(--muted)}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- bento features ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:3rem}
.card{
  background:linear-gradient(180deg,var(--bg-1),var(--bg));
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  position:relative;overflow:hidden;transition:border-color .4s,transform .4s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:rgba(246,196,83,.1);border:1px solid rgba(246,196,83,.2);
}
.card .ico svg{width:22px;height:22px;stroke:var(--accent);fill:none}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.96rem}
.card.span-3{grid-column:span 3}
.card.span-2{grid-column:span 2}
.card.span-4{grid-column:span 4}
/* spotlight follows cursor */
.card.spot::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(246,196,83,.1),transparent 60%);
}
.card.spot:hover::before{opacity:1}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:3rem;counter-reset:step}
.step{position:relative;padding-top:2.4rem;border-top:1px solid var(--line)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--mono);font-size:.8rem;color:var(--accent);
  position:absolute;top:-.9rem;left:0;background:var(--bg);padding-right:.6rem;
}
.step h3{font-size:1.3rem;margin-bottom:.5rem}
.step p{color:var(--muted)}

/* orbit-path scrub: a rail the "you" planet traces across the three steps on scroll */
.steps-stage{position:relative}
.steps-orbit{position:absolute;top:1.2rem;left:0;width:100%;height:clamp(140px,18vw,300px);z-index:0;pointer-events:none;overflow:visible}
.steps-orbit #stepsPathTrail{stroke-dasharray:1 1;will-change:stroke-dasharray} /* JS overrides for the trail draw */
.steps-planet{
  position:absolute;top:0;left:0;z-index:1;width:clamp(18px,2.4vw,26px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 48%,#9A6B12 100%);
  box-shadow:0 0 22px 3px rgba(246,196,83,.45),inset 0 0 8px rgba(255,255,255,.4);
  pointer-events:none;opacity:0;will-change:transform;
}
.steps-planet.lit{opacity:1}
.steps-stage .steps{position:relative;z-index:2}
/* the rail is designed for the 3-across desktop layout; on the stacked layout it
   would cross the step text, so hide it (steps go single-column at 760px) */
@media (max-width:760px){.steps-orbit,.steps-planet{display:none}}
/* reduced-motion / no-JS: hide the moving rail+planet, keep the clean static steps */
@media (prefers-reduced-motion:reduce){.steps-orbit,.steps-planet{display:none}}
html:not(.js) .steps-orbit,html:not(.js) .steps-planet{display:none}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:3rem;max-width:820px;margin-inline:auto}
.price{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;
  position:relative;
}
.price.feat{border-color:transparent;
  background:
    radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),
    var(--bg-1);
  box-shadow:0 30px 80px -30px color-mix(in srgb,var(--accent) 30%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent);
  transform:translateY(-8px)}
@media (max-width:760px){.price.feat{transform:none}}
/* "Best value" ribbon — the plan we steer people toward */
.price-badge{position:absolute;top:0;right:24px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:100px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--accent-ink,#08080C);background:linear-gradient(135deg,var(--accent),var(--orbit));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);z-index:2;white-space:nowrap}
.price.feat::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),var(--accent),var(--orbit),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-border 6s linear infinite;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin-border{to{--a:360deg}}
.price .tag{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.price .amt{font-family:var(--display);font-size:3rem;margin:.4rem 0 .2rem}
.price .amt small{font-size:1rem;color:var(--muted);font-family:var(--body)}
.price ul{list-style:none;margin:1.5rem 0;display:grid;gap:.7rem}
.price li{display:flex;gap:.6rem;color:var(--muted);font-size:.95rem}
.price li svg{width:18px;height:18px;stroke:var(--accent);fill:none;flex:none;margin-top:2px}
.price .btn{width:100%}
@media (prefers-reduced-motion:reduce){.price.feat::before{animation:none}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:3rem auto 0}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:24px 0;text-align:left;font-size:1.1rem;font-family:var(--display);font-weight:500}
.q .plus{flex:none;width:22px;height:22px;position:relative;transition:transform .35s var(--ease)}
.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--accent);inset:50% 0;height:2px;transform:translateY(-50%)}
.q .plus::after{transform:translateY(-50%) rotate(90deg);transition:transform .35s var(--ease)}
.q.open .plus::after{transform:translateY(-50%) rotate(0)}
.q .ans{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.q.open .ans{grid-template-rows:1fr}
.q .ans > *{min-height:0;overflow:hidden}
.q .ans-in{min-height:0}
.q .ans p{padding-bottom:24px;color:var(--muted);max-width:62ch;margin:0}
@media (prefers-reduced-motion:reduce){.q .ans{transition:none}}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;background:
  radial-gradient(70% 120% at 50% 0%,rgba(246,196,83,.14),transparent 60%);}
.cta-band h2{margin-bottom:1.2rem}
.cta-band .claim{margin:2rem auto 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:64px 40px;background:var(--bg-1)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-grid h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.foot-grid a{display:block;color:var(--muted);font-size:.92rem;padding:.3rem 0;transition:color .2s}
.foot-grid a:hover{color:var(--text)}
.foot-blurb{color:var(--muted);font-size:.92rem;max-width:30ch;margin-top:1rem}

/* ---------- legal / about body ---------- */
.legal-body{color:var(--muted);font-size:1.02rem}
.legal-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--text);margin:2.2rem 0 .7rem}
.legal-body h2:first-child{margin-top:0}
.legal-body p{margin-bottom:1rem;max-width:64ch}
.legal-body ul{margin:0 0 1rem 1.1rem;display:grid;gap:.5rem}
.legal-body a{color:var(--accent)}
.legal-body .updated{font-family:var(--mono);font-size:.78rem;color:var(--faint);letter-spacing:.06em;margin-bottom:1.6rem}

/* ---------- reveal ----------
   Only hide reveal blocks when JS is present (html.js, set by app.js as its
   first act). If app.js fails to load/parse, the hidden state never applies and
   every block stays visible — no blank homepage. */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead,.hero .section-head{margin-inline:auto}
  .claim,.hero-trust{margin-inline:auto}
  .hero-trust{justify-content:center}
  .orbital{order:-1;max-width:420px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .card.span-3,.card.span-4,.card.span-2{grid-column:span 1}
  .steps{grid-template-columns:1fr}
  .demo{grid-template-columns:1fr;text-align:center}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:grid}
  .bento{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .claim{flex-wrap:wrap;border-radius:18px;padding:.6rem}
  .claim .btn{width:100%}
}

/* mobile menu */
.nav-toggle{width:42px;height:42px;border-radius:10px;border:1px solid var(--line-2);place-items:center}
.nav-toggle span{width:18px;height:2px;background:var(--text);position:relative;transition:.3s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;width:18px;height:2px;background:var(--text);left:0;transition:.3s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.menu-open .nav-toggle span{background:transparent}
.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:90;background:rgba(8,8,12,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.menu-open .mobile-menu{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--display);font-size:1.8rem;color:var(--text)}
.mobile-menu .btn{margin-top:1rem}

/* ==========================================================================
   AUTH PAGES (signup / login)
   ========================================================================== */
.auth{
  min-height:100svh;display:grid;place-items:center;padding:90px var(--pad) 40px;position:relative;overflow:hidden;
}
.auth::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 40% at 80% 10%,rgba(246,196,83,.14),transparent 60%),
    radial-gradient(46% 40% at 12% 88%,rgba(122,162,255,.12),transparent 60%);
}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:430px;
  background:linear-gradient(180deg,var(--bg-1),var(--bg));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);box-shadow:0 40px 100px -40px rgba(0,0,0,.8);
}
.auth-card .logo{font-size:1.6rem;margin-bottom:1.6rem}
.auth-card h1{font-size:clamp(1.7rem,3vw,2.1rem);margin-bottom:.4rem}
.auth-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.input{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;
  color:var(--text);font-size:1rem;padding:.85rem 1rem;transition:border-color .25s,box-shadow .25s;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,196,83,.12)}
.input::placeholder{color:var(--faint)}
/* handle field with prefix */
.field-handle{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.field-handle:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,196,83,.12)}
.field-handle .pre{padding:.85rem .2rem .85rem 1rem;color:var(--faint);font-family:var(--mono);font-size:.95rem;white-space:nowrap}
.field-handle input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.95rem;padding:.85rem .4rem}
.field-hint{font-size:.78rem;margin-top:.4rem;min-height:1.1em;font-family:var(--mono)}
.field-hint.ok{color:#62D08A}
.field-hint.bad{color:#FF6B6B}
.field-hint.muted{color:var(--faint)}
.auth-card .btn{width:100%;margin-top:.6rem}
.auth-alt{margin-top:1.4rem;text-align:center;color:var(--muted);font-size:.92rem}
.auth-alt a{color:var(--accent);font-weight:600}
.auth-back{position:absolute;top:26px;left:var(--pad);z-index:2;color:var(--muted);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}
.auth-back:hover{color:var(--text)}
.alert{border-radius:12px;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1.2rem;display:none}
.alert.show{display:block}
.alert.err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);color:#FF9D9D}
.alert.ok{background:rgba(98,208,138,.1);border:1px solid rgba(98,208,138,.3);color:#8AE0A8}
.btn[disabled]{opacity:.55;pointer-events:none}
.spin{width:16px;height:16px;border:2px solid rgba(26,21,3,.35);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   ORBIT-BUILD TRANSITION — full-screen system assemble on successful signup
   ========================================================================== */
.orbit-build{
  position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:radial-gradient(60% 60% at 50% 46%,#0C0C13,var(--bg) 72%);
  opacity:0;
}
.orbit-build.run{display:grid}
.orbit-build::before{ /* faint vignette + grain-free deep field */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 42% at 50% 50%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);
}
.ob-stage{width:min(78vmin,560px);height:min(78vmin,560px);overflow:visible}
.ob-ring{stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:1.4}
.ob-ring-dash{stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-dasharray:2 9;stroke-width:1.4}
.ob-sat{transform-box:fill-box;transform-origin:center}
.ob-sat-dot{fill:var(--accent)}
.ob-status{
  position:absolute;left:0;right:0;bottom:clamp(48px,12vh,120px);text-align:center;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.ob-status b{color:var(--accent);font-weight:500}

/* ==========================================================================
   PROFILE VIEW (.orbt-profile) — shared by dashboard preview + public page
   --pa = accent ; data-theme = dark|light
   ========================================================================== */
.orbt-profile{
  --pa:#F6C453;--pa2:#F6C453;
  --pf:#08080C;--ps:#15151F;--pt:#F4F2EC;--pm:#9A9AA8;--pl:rgba(255,255,255,.10);
  --op-d:"Clash Display";--op-b:"General Sans";
  position:relative;isolation:isolate;overflow:hidden;border-radius:inherit;
  min-height:100%;width:100%;background:var(--pf);color:var(--pt);
  font-family:var(--op-b),var(--body);
}
.orbt-profile[data-theme="light"]{--pf:#F6F4EE;--ps:#FFFFFF;--pt:#16151A;--pm:#6B6B76;--pl:rgba(0,0,0,.09)}
/* font pairs */
.orbt-profile[data-font="clash"]{--op-d:"Clash Display";--op-b:"General Sans"}
.orbt-profile[data-font="editorial"]{--op-d:"Fraunces";--op-b:"General Sans"}
.orbt-profile[data-font="grotesk"]{--op-d:"Space Grotesk";--op-b:"Inter"}
.orbt-profile[data-font="mono"]{--op-d:"Space Mono";--op-b:"Space Mono"}
/* button shapes */
.orbt-profile[data-btnshape="rounded"]{--op-radius:15px}
.orbt-profile[data-btnshape="pill"]{--op-radius:100px}
.orbt-profile[data-btnshape="soft"]{--op-radius:9px}
.orbt-profile[data-btnshape="sharp"]{--op-radius:3px}
/* notched / asymmetric shapes use clip-path on the link/video/spotify cards */
.orbt-profile[data-btnshape="cut"]{--op-radius:4px}
.orbt-profile[data-btnshape="cut"] .op-link,.orbt-profile[data-btnshape="cut"] .op-spotify,.orbt-profile[data-btnshape="cut"] .op-video,.orbt-profile[data-btnshape="cut"] .op-feat{
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.orbt-profile[data-btnshape="tab"]{--op-radius:14px}
.orbt-profile[data-btnshape="tab"] .op-link,.orbt-profile[data-btnshape="tab"] .op-spotify,.orbt-profile[data-btnshape="tab"] .op-video,.orbt-profile[data-btnshape="tab"] .op-feat{
  border-radius:3px var(--op-radius) var(--op-radius) 3px}

/* ---------- BACKGROUND LAYER ---------- */
.op-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.op-bg canvas,.op-bg .op-bgvideo,.op-bg .op-spot{border-radius:inherit}
.op-bg canvas{position:absolute;inset:0}
.op-bg-solid::after,.op-bg-stars::before,.op-bg-grain::after{content:"";position:absolute;inset:0 0 auto;height:340px;
  background:radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--pa) 22%,transparent),transparent 60%)}
/* mesh */
.op-bg-mesh::before,.op-bg-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.5}
.op-bg-mesh::before{width:62%;aspect-ratio:1;top:-12%;left:-6%;background:var(--pa);animation:op-float calc(15s / var(--op-bgspeed,1)) ease-in-out infinite}
.op-bg-mesh::after{width:56%;aspect-ratio:1;bottom:-12%;right:-6%;background:var(--pa2);animation:op-float calc(19s / var(--op-bgspeed,1)) ease-in-out infinite reverse}
@keyframes op-float{0%,100%{transform:translate(0,0)}50%{transform:translate(14%,12%)}}
/* aurora */
.op-bg-aurora{background:
  radial-gradient(55% 50% at 18% 12%,color-mix(in srgb,var(--pa) 42%,transparent),transparent 70%),
  radial-gradient(55% 50% at 82% 28%,color-mix(in srgb,var(--pa2) 40%,transparent),transparent 70%),
  radial-gradient(70% 60% at 50% 102%,color-mix(in srgb,var(--pa) 30%,transparent),transparent 70%);
  background-size:200% 200%;animation:op-aurora calc(20s / var(--op-bgspeed,1)) ease infinite}
@keyframes op-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* grain */
.op-bg-grain::before{content:"";position:absolute;inset:-50%;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* waves — animated gradient bands that drift diagonally */
.op-bg-waves{background:
  linear-gradient(120deg,
    color-mix(in srgb,var(--pa) 26%,transparent) 0%,
    transparent 28%,
    color-mix(in srgb,var(--pa2) 24%,transparent) 50%,
    transparent 72%,
    color-mix(in srgb,var(--pa) 22%,transparent) 100%);
  background-size:300% 300%;animation:op-waves calc(18s / var(--op-bgspeed,1)) ease-in-out infinite}
@keyframes op-waves{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
/* noise — animated film grain (shifting noise tile) */
.op-bg-noise::before{content:"";position:absolute;inset:-50%;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:op-noise calc(.6s / var(--op-bgspeed,1)) steps(4) infinite}
.op-bg-noise::after{content:"";position:absolute;inset:0 0 auto;height:340px;
  background:radial-gradient(120% 80% at 50% -20%,color-mix(in srgb,var(--pa) 22%,transparent),transparent 60%)}
@keyframes op-noise{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(4%,-6%)}75%{transform:translate(-4%,-4%)}100%{transform:translate(0,0)}}
/* spotlight */
.op-bg-spotlight .op-spot{position:absolute;left:0;top:0;width:420px;height:420px;margin:-210px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--pa) 30%,transparent),transparent 70%);will-change:transform}
/* image */
.op-bg-image{background-size:cover;background-position:center}
.op-bg-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pf) 50%,transparent),color-mix(in srgb,var(--pf) 90%,transparent))}

/* ---------- CONTENT LAYER ---------- */
.op-content{position:relative;z-index:1;padding:54px 22px 40px;text-align:center}
/* legibility scrim — sits behind the content over busy media backgrounds */
.orbt-profile[data-card="on"] .op-content::before{
  content:"";position:absolute;z-index:-1;inset:16px 12px;border-radius:24px;
  background:color-mix(in srgb,var(--pf) calc(var(--op-card-op,.55)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--op-card-blur,10px));backdrop-filter:blur(var(--op-card-blur,10px));
  border:1px solid color-mix(in srgb,var(--pt) 8%,transparent);
}
@media (max-width:480px){.orbt-profile[data-card="on"] .op-content::before{inset:10px 6px}}

/* ==========================================================================
   (F/W) FULL-BLEED LAYOUT — public page + desktop preview (guns.lol-style)
   The chosen background fills the ENTIRE profile element (which itself fills
   the viewport via .op-stage), and the content sits in a centered glass card.
   data-layout="framed" (default) keeps the existing phone-style stack.
   ========================================================================== */
.orbt-profile[data-layout="full"]{min-height:100%;display:flex;align-items:safe center;justify-content:center}
/* (FLAGSHIP) ambient stage — a centered accent spotlight + edge vignette so the
   card never floats in dead space on big screens. Reads on top of any background,
   below the content. Strength scales with the accent the creator picked. */
.orbt-profile[data-layout="full"]::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 42%,color-mix(in srgb,var(--pa) 16%,transparent),transparent 70%),
    radial-gradient(140% 120% at 50% 50%,transparent 52%,color-mix(in srgb,var(--pf) 72%,#000 0) 100%);
}
/* (FLANKS) edge-to-edge ambient — two drifting accent glows bleeding in from the
   left & right so a wide screen feels alive beyond the card. The chosen bg's
   accents (--pa/--pa2) push color into the side gutters; drift speed follows
   the per-profile bg_speed. Subtle by default, richer on wide screens (below).
   Rendered as a sibling layer below the card so it never sits over the content. */
.orbt-profile[data-layout="full"] > .op-flank{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
  /* keep it tasteful at small sizes — the flank glows fade toward the centered card */
  opacity:.5;transition:opacity .4s ease;
}
.orbt-profile[data-layout="full"] > .op-flank::before,
.orbt-profile[data-layout="full"] > .op-flank::after{
  content:"";position:absolute;top:50%;width:46vw;max-width:760px;aspect-ratio:1;
  border-radius:50%;filter:blur(90px);opacity:.42;
  will-change:transform;
}
.orbt-profile[data-layout="full"] > .op-flank::before{
  left:-12vw;transform:translateY(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--pa) 70%,transparent),transparent 68%);
  animation:op-flankL calc(26s / var(--op-bgspeed,1)) ease-in-out infinite}
.orbt-profile[data-layout="full"] > .op-flank::after{
  right:-12vw;transform:translateY(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--pa2) 70%,transparent),transparent 68%);
  animation:op-flankR calc(31s / var(--op-bgspeed,1)) ease-in-out infinite}
@keyframes op-flankL{0%,100%{transform:translate(0,-50%) scale(1)}50%{transform:translate(8%,-42%) scale(1.12)}}
@keyframes op-flankR{0%,100%{transform:translate(0,-50%) scale(1)}50%{transform:translate(-8%,-58%) scale(1.12)}}
/* wide screens: let the flanks read maximal & edge-to-edge (guns.lol energy) */
@media (min-width:1280px){
  .orbt-profile[data-layout="full"] > .op-flank{opacity:.9}
  .orbt-profile[data-layout="full"] > .op-flank::before,
  .orbt-profile[data-layout="full"] > .op-flank::after{opacity:.5;filter:blur(110px)}
}
@media (min-width:1700px){
  .orbt-profile[data-layout="full"] > .op-flank::before{left:-6vw}
  .orbt-profile[data-layout="full"] > .op-flank::after{right:-6vw}
}
/* small screens: the card hugs the viewport, so dial the flanks down further
   (they're already behind the card, but keep the gutters quiet on phones) */
@media (max-width:760px){
  .orbt-profile[data-layout="full"] > .op-flank{opacity:.32}
}
@media (prefers-reduced-motion:reduce){
  .orbt-profile[data-layout="full"] > .op-flank::before,
  .orbt-profile[data-layout="full"] > .op-flank::after{animation:none!important}
}
.orbt-profile[data-layout="full"] .op-content{
  margin-inline:auto;width:100%;max-width:480px;
  padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  display:flex;flex-direction:column;align-items:center;
}
/* the centered card: a tasteful glass panel so content reads on any background.
   It's always present in full mode (not just media bgs) for that intentional, framed look. */
.orbt-profile[data-layout="full"] .op-content::before{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;
  background:color-mix(in srgb,var(--pf) calc(max(var(--op-card-op,.55),.62)*100%),transparent);
  -webkit-backdrop-filter:blur(calc(max(var(--op-card-blur,10px),18px))) saturate(1.15);
          backdrop-filter:blur(calc(max(var(--op-card-blur,10px),18px))) saturate(1.15);
  border:1px solid color-mix(in srgb,var(--pt) 20%,transparent);
  box-shadow:
    0 48px 140px -44px rgba(0,0,0,.78),
    0 0 0 1px color-mix(in srgb,var(--pa) 16%,transparent),
    0 0 80px -10px color-mix(in srgb,var(--pa) 24%,transparent),
    inset 0 1px 0 color-mix(in srgb,var(--pt) 26%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--pt) 5%,transparent);
}
/* hairline gradient top edge + faint inner accent rim for a defined glass-panel read */
.orbt-profile[data-layout="full"] .op-content::after{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:28px;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--pa) 10%,transparent),transparent 58%),
    linear-gradient(180deg,color-mix(in srgb,var(--pt) 11%,transparent),transparent 40%);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);
}
.orbt-profile[data-layout="full"] .op-links{width:100%}
/* desktop: a bit more presence — larger card, generous breathing room */
@media (min-width:900px){
  .orbt-profile[data-layout="full"] .op-content{max-width:540px;padding:60px 52px}
}
/* phone: card hugs the screen so it never looks like a tiny rectangle in a void */
@media (max-width:560px){
  .orbt-profile[data-layout="full"] .op-content{max-width:none;padding:44px 22px;min-height:100%}
  .orbt-profile[data-layout="full"] .op-content::before,
  .orbt-profile[data-layout="full"] .op-content::after{inset:10px;border-radius:24px}
}
@media (max-width:380px){
  .orbt-profile[data-layout="full"] .op-content::before,
  .orbt-profile[data-layout="full"] .op-content::after{inset:0;border-radius:0}
}

/* ---------- username effects (data-namefx) ---------- */
.orbt-profile[data-namefx="gradient"] .op-name{
  background:linear-gradient(100deg,var(--pa),var(--pa2),var(--pa));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:op-name-shimmer 6s linear infinite}
@keyframes op-name-shimmer{to{background-position:200% center}}
.orbt-profile[data-namefx="glow"] .op-name{text-shadow:0 0 18px color-mix(in srgb,var(--pa) 65%,transparent),0 0 4px color-mix(in srgb,var(--pa) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.orbt-profile[data-namefx="gradient"] .op-name{animation:none}}

/* ---------- spotify facade (click-to-load) ---------- */
.op-spotify{display:flex;align-items:center;gap:.8rem;padding:calc(13px*var(--op-lscale,1)) calc(16px*var(--op-lscale,1));
  border-radius:var(--op-radius,15px);background:var(--ps);border:1px solid var(--pl);color:var(--pt);
  text-align:left;font-weight:500;font-size:calc(.95rem*var(--op-lscale,1));cursor:pointer;position:relative;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-spotify:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#1DB954 60%,transparent);box-shadow:0 10px 30px -12px rgba(29,185,84,.4)}
.op-spotify .op-link-ico{flex:none;width:calc(34px*var(--op-iscale,1));height:calc(34px*var(--op-iscale,1));border-radius:clamp(4px,calc(var(--op-radius,15px) - 6px),14px);display:grid;place-items:center;background:color-mix(in srgb,#1DB954 18%,transparent);color:#1DB954}
.op-spotify .op-link-ico svg{width:calc(18px*var(--op-iscale,1));height:calc(18px*var(--op-iscale,1));fill:currentColor}
.op-spotify .op-link-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-play-sm{position:static;width:30px;height:30px;flex:none;margin:0;border-radius:50%;background:#1DB954;display:grid;place-items:center}
.op-play-sm::after{content:"";border-left:11px solid #fff;border-block:7px solid transparent;margin-left:3px}
.op-spotify.played{padding:0;background:none;border:none;box-shadow:none;display:block}
.op-spotify.played:hover{transform:none}

/* avatar */
.op-avatar-wrap{position:relative;width:calc(104px*var(--op-ascale,1));height:calc(104px*var(--op-ascale,1));margin:0 auto 16px;display:grid;place-items:center}
.op-avatar-wrap.has-ring::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--pa),var(--pa2),var(--pa));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:spin 8s linear infinite}
.op-avatar{width:calc(88px*var(--op-ascale,1));height:calc(88px*var(--op-ascale,1));overflow:hidden;border:2px solid var(--pl);box-shadow:0 14px 40px -12px rgba(0,0,0,.5)}
.op-avatar img{width:100%;height:100%;object-fit:cover}
.op-avatar-fallback{width:100%;height:100%;display:grid;place-items:center;font-family:var(--op-d);font-weight:700;font-size:1.9rem;
  color:var(--pf);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pa) 80%,#fff),var(--pa) 55%,color-mix(in srgb,var(--pa) 55%,#000))}
.orbt-profile[data-avatar="circle"] .op-avatar-wrap,.orbt-profile[data-avatar="circle"] .op-avatar{border-radius:50%}
.orbt-profile[data-avatar="squircle"] .op-avatar-wrap,.orbt-profile[data-avatar="squircle"] .op-avatar{border-radius:30%}
.orbt-profile[data-avatar="hex"] .op-avatar{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border:none}
.orbt-profile[data-avatar="hex"] .op-avatar-wrap.has-ring::before{display:none}
/* rounded — soft square */
.orbt-profile[data-avatar="rounded"] .op-avatar-wrap,.orbt-profile[data-avatar="rounded"] .op-avatar{border-radius:20px}
/* diamond — rotated square (counter-rotate the image so it stays upright) */
.orbt-profile[data-avatar="diamond"] .op-avatar{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:none}
.orbt-profile[data-avatar="diamond"] .op-avatar-wrap.has-ring::before{-webkit-mask:none;mask:none;clip-path:polygon(50% -2%,102% 50%,50% 102%,-2% 50%,50% -2%,50% 6%,8% 50%,50% 94%,92% 50%,50% 6%);background:var(--pa)}
/* flower — scalloped petals via clip-path */
.orbt-profile[data-avatar="flower"] .op-avatar{border:none;
  clip-path:polygon(50% 0,61% 12%,76% 8%,80% 24%,95% 32%,88% 47%,100% 60%,86% 68%,88% 85%,71% 84%,61% 98%,50% 88%,39% 98%,29% 84%,12% 85%,14% 68%,0 60%,12% 47%,5% 32%,20% 24%,24% 8%,39% 12%)}
.orbt-profile[data-avatar="flower"] .op-avatar-wrap.has-ring::before{display:none}

.op-name{font-family:var(--op-d);font-weight:600;font-size:calc(1.55rem*var(--op-nscale,1));letter-spacing:-.02em;line-height:1.12;text-wrap:balance;color:var(--op-heading,inherit)}
.op-handle{font-family:var(--mono);font-size:.78rem;color:var(--pa);margin-top:.3rem;opacity:.9}
/* subtle viral-loop badge — public profile only (free pages); VIP hide_branding removes it.
   small centered pill, low-opacity, sits at the very bottom; no layout shift, reduced-motion safe. */
.op-brand{display:inline-flex;align-items:center;gap:.5em;margin:30px auto 0;padding:.42rem .8rem;
  border-radius:100px;background:color-mix(in srgb,var(--pt) 6%,transparent);border:1px solid var(--pl);
  font-size:.7rem;line-height:1;letter-spacing:.01em;color:var(--pm);opacity:.62;
  text-decoration:none;backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.op-brand:hover{opacity:1;transform:translateY(-1px);border-color:color-mix(in srgb,var(--pa) 45%,var(--pl));
  background:color-mix(in srgb,var(--pa) 8%,transparent)}
.op-brand-mark{display:inline-flex;align-items:center;font-family:var(--op-d);font-weight:600;
  letter-spacing:-.02em;color:var(--op-heading,var(--pt))}
.op-brand-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;margin:0 .07em;
  vertical-align:middle;background:var(--pa);box-shadow:0 0 8px 1px color-mix(in srgb,var(--pa) 55%,transparent);
  animation:logo-orbit 6s linear infinite}
.op-brand-label{color:var(--pm)}
@media (prefers-reduced-motion:reduce){.op-brand-dot{animation:none}}
.op-bio{color:var(--op-text,var(--pm));font-size:calc(.93rem*var(--op-bscale,1));max-width:32ch;margin:.85rem auto 0;line-height:1.55;text-wrap:pretty}
/* (L) granular text colors — only override when the creator sets one (else inherit theme) */
.op-status span:last-child{color:var(--op-text,var(--pt))}
.op-link-title,.op-link-main .op-link-title{color:var(--op-linktext,inherit)}
.op-link-sub,.op-feat-sub{color:var(--op-text,var(--pm))}
.op-links{margin-top:26px;display:flex;flex-direction:column;gap:12px}

/* ==========================================================================
   BENTO EDITOR CONTROLS — the dashboard-side layout toggle + per-block tile
   size picker. The tile-size group inside the Advanced panel only shows when
   the profile is in bento mode (body.bento-mode), since it's irrelevant in list.
   ========================================================================== */
.adv-tile-group{display:none}
body.bento-mode .adv-tile-group{display:block}
/* keep the tile chips compact + on one row so the panel stays dense */
.adv-tile-seg{flex-wrap:wrap}
.adv-tile-seg button{flex:1 1 0;min-width:54px}

/* ==========================================================================
   BENTO LAYOUT — order-based + size-based tile grid (profile.layout_mode='bento')
   2 columns on desktop, grid-auto-flow:dense so tiles pack with no gaps. Each tile
   is an .op-wrap.op-tile carrying --tw (1|2 cols) / --th (1|2 rows). Collapses to a
   single column on phones. Tiles fill their cell so the grid stays flush.
   ========================================================================== */
.op-links.is-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(76px,auto);grid-auto-flow:dense;gap:12px;align-items:stretch}
.op-links.is-bento > .op-tile{margin:0;display:flex;
  grid-column:span var(--tw,2);grid-row:span var(--th,1);min-width:0}
/* the wrap stretches; its single rendered block fills the whole tile */
.op-links.is-bento > .op-tile > :not(.op-sched-tag){flex:1;min-width:0;width:100%}
/* tall tiles (h=2) let media/link blocks grow to fill the doubled row height */
.op-links.is-bento > .op-tile.op-tile-tall > .op-link,
.op-links.is-bento > .op-tile.op-tile-tall > .op-feat,
.op-links.is-bento > .op-tile.op-tile-tall > .op-spotify,
.op-links.is-bento > .op-tile.op-tile-tall > .op-block{height:100%}
/* a small (1x1) link tile stacks icon over a compact, clamped title */
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link{flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:.5rem;text-align:left}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-main,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-main{width:100%}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-title,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-title{white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.op-links.is-bento > .op-tile[data-tile="1x1"] > .op-link .op-link-arrow,
.op-links.is-bento > .op-tile[data-tile="1x2"] > .op-link .op-link-arrow{position:absolute;top:14px;right:14px}
/* featured/gallery/video/embeds clip tastefully and fill the tile */
.op-links.is-bento > .op-tile .op-feat{min-height:100%}
.op-links.is-bento > .op-tile .op-gallery,
.op-links.is-bento > .op-tile .op-faq,
.op-links.is-bento > .op-tile .op-countdown,
.op-links.is-bento > .op-tile .op-text,
.op-links.is-bento > .op-tile .op-embed{height:100%;overflow:hidden}
.op-links.is-bento > .op-tile .op-gallery{display:flex;flex-direction:column}
.op-links.is-bento > .op-tile .op-gallery .op-gal-track{flex:1;min-height:0}
.op-links.is-bento > .op-tile .op-gallery .op-gal-cell{height:100%}
/* a long text/faq tile scrolls inside itself rather than overflowing the grid */
.op-links.is-bento > .op-tile.op-tile-tall .op-text,
.op-links.is-bento > .op-tile.op-tile-tall .op-faq{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}
.op-links.is-bento > .op-tile.op-tile-tall .op-text::-webkit-scrollbar,
.op-links.is-bento > .op-tile.op-tile-tall .op-faq::-webkit-scrollbar{display:none}
/* section dividers always span the full row, no min-height */
.op-links.is-bento > .op-tile[data-tile="2x1"]:has(.op-section){grid-row:auto}
.op-links.is-bento > .op-tile .op-section{margin:6px 2px}
/* phone — collapse to a single column; every tile becomes full width / natural height */
@media (max-width:560px){
  .op-links.is-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .op-links.is-bento > .op-tile{grid-column:1/-1!important;grid-row:auto!important}
  .op-links.is-bento > .op-tile.op-tile-tall > .op-link,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-feat,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-spotify,
  .op-links.is-bento > .op-tile.op-tile-tall > .op-block{height:auto}
  .op-links.is-bento > .op-tile.op-tile-tall .op-text,
  .op-links.is-bento > .op-tile.op-tile-tall .op-faq{overflow:visible}
}

/* link base */
.op-link{display:flex;align-items:center;gap:.8rem;padding:calc(15px*var(--op-lscale,1)) calc(16px*var(--op-lscale,1));border-radius:var(--op-radius,15px);
  background:var(--ps);border:1px solid var(--pl);color:var(--pt);text-align:left;
  font-weight:500;font-size:calc(.95rem*var(--op-lscale,1));position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s,color .25s}
.op-link::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;background:color-mix(in srgb,var(--pa) 12%,transparent)}
.op-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-link:hover::before{opacity:1}
.op-link-ico{flex:none;width:calc(34px*var(--op-iscale,1));height:calc(34px*var(--op-iscale,1));border-radius:clamp(4px,calc(var(--op-radius,15px) - 6px),14px);display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 14%,transparent);position:relative;z-index:1;overflow:hidden;transition:background .25s}
.op-link-ico svg{width:calc(18px*var(--op-iscale,1));height:calc(18px*var(--op-iscale,1));fill:currentColor}
.op-link-ico img.ic-img{width:calc(24px*var(--op-iscale,1));height:calc(24px*var(--op-iscale,1));object-fit:cover;border-radius:6px}
.op-social img.ic-img{width:22px;height:22px;object-fit:cover;border-radius:6px}
.op-link-title{flex:1;min-width:0;position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-link-arrow{flex:none;opacity:.4;position:relative;z-index:1;transition:opacity .25s,transform .25s}
.op-link-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.op-link:hover .op-link-arrow{opacity:1;transform:translate(2px,-2px)}
/* link-style variants */
.orbt-profile[data-linkstyle="glass"] .op-link{background:color-mix(in srgb,var(--pt) 7%,transparent);backdrop-filter:blur(8px);border-color:color-mix(in srgb,var(--pt) 14%,transparent)}
.orbt-profile[data-linkstyle="outline"] .op-link{background:transparent;border-color:color-mix(in srgb,var(--pt) 26%,transparent)}
.orbt-profile[data-linkstyle="outline"] .op-link:hover{background:color-mix(in srgb,var(--pa) 8%,transparent)}
.orbt-profile[data-linkstyle="ignite"] .op-link{background:transparent;border-color:color-mix(in srgb,var(--pt) 16%,transparent);color:var(--pm)}
.orbt-profile[data-linkstyle="ignite"] .op-link-ico{background:transparent}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover{background:var(--pa);color:var(--op-onaccent,var(--pf));border-color:var(--pa);transform:translateY(-2px)}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover .op-link-ico{background:color-mix(in srgb,#000 16%,transparent)}
.orbt-profile[data-linkstyle="ignite"] .op-link:hover::before{opacity:0}
/* NEW link styles */
/* neon — glowing accent border */
.orbt-profile[data-linkstyle="neon"] .op-link{background:color-mix(in srgb,var(--pf) 55%,transparent);border-color:var(--pa);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 50%,transparent),0 0 16px -4px color-mix(in srgb,var(--pa) 60%,transparent),inset 0 0 12px -8px var(--pa)}
.orbt-profile[data-linkstyle="neon"] .op-link:hover{box-shadow:0 0 0 1px var(--pa),0 0 28px -2px color-mix(in srgb,var(--pa) 80%,transparent),inset 0 0 18px -8px var(--pa)}
.orbt-profile[data-linkstyle="neon"] .op-link-ico{background:transparent;color:var(--pa)}
/* gradient — accent→accent2 fill, ink auto-contrasts */
.orbt-profile[data-linkstyle="gradient"] .op-link{background:linear-gradient(100deg,var(--pa),var(--pa2));border-color:transparent;color:var(--op-onaccent,var(--pf))}
.orbt-profile[data-linkstyle="gradient"] .op-link .op-link-sub{color:color-mix(in srgb,var(--op-onaccent,var(--pf)) 72%,transparent)}
.orbt-profile[data-linkstyle="gradient"] .op-link-ico{background:color-mix(in srgb,#000 14%,transparent);color:var(--op-onaccent,var(--pf))}
.orbt-profile[data-linkstyle="gradient"] .op-link::before{display:none}
.orbt-profile[data-linkstyle="gradient"] .op-link:hover{filter:brightness(1.05);box-shadow:0 12px 30px -10px color-mix(in srgb,var(--pa) 60%,transparent)}
/* 3d — raised with a hard bottom edge that compresses on hover */
.orbt-profile[data-linkstyle="3d"] .op-link{background:var(--ps);border-color:transparent;
  box-shadow:0 5px 0 0 color-mix(in srgb,var(--pa) 75%,#000),0 8px 18px -8px rgba(0,0,0,.5)}
.orbt-profile[data-linkstyle="3d"] .op-link:hover{transform:translateY(2px);box-shadow:0 3px 0 0 color-mix(in srgb,var(--pa) 75%,#000),0 5px 12px -8px rgba(0,0,0,.5)}
.orbt-profile[data-linkstyle="3d"] .op-link:active{transform:translateY(5px);box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 75%,#000)}
/* underline — minimal, no card; an accent rule grows under the row on hover */
.orbt-profile[data-linkstyle="underline"] .op-link{background:transparent;border:none;border-bottom:1px solid color-mix(in srgb,var(--pt) 14%,transparent);border-radius:10px 10px 0 0;padding-inline:10px;
  transition:transform .25s var(--ease),background .25s,border-color .25s}
.orbt-profile[data-linkstyle="underline"] .op-link-ico{background:transparent;color:var(--pa)}
.orbt-profile[data-linkstyle="underline"] .op-link::before{top:auto;bottom:-1px;height:2px;background:var(--pa);opacity:1;width:0;transition:width .3s var(--ease)}
/* designed hover: faint accent wash + the underline still wipes in — reads interactive, not a bare list */
.orbt-profile[data-linkstyle="underline"] .op-link:hover{transform:none;box-shadow:none;border-bottom-color:transparent;
  background:color-mix(in srgb,var(--pa) 7%,transparent)}
.orbt-profile[data-linkstyle="underline"] .op-link:hover::before{width:100%}

/* ---------- prominent hover effects (data-hover) ---------- */
/* pop — clear scale + lift */
.orbt-profile[data-hover="pop"] .op-link:hover{transform:translateY(-3px) scale(1.035);box-shadow:0 16px 36px -14px color-mix(in srgb,var(--pa) 60%,transparent)}
/* tilt — slight 3d rotate toward the viewer */
.orbt-profile[data-hover="tilt"] .op-link{transform-style:preserve-3d}
.orbt-profile[data-hover="tilt"] .op-link:hover{transform:perspective(700px) rotateX(7deg) translateY(-2px);box-shadow:0 18px 34px -16px rgba(0,0,0,.6)}
/* glow — strong accent halo */
.orbt-profile[data-hover="glow"] .op-link:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 55%,transparent),0 0 34px -6px color-mix(in srgb,var(--pa) 75%,transparent)}
/* shine — diagonal sweep across the card */
.orbt-profile[data-hover="shine"] .op-link::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,#fff 38%,transparent) 48%,transparent 66%);
  transform:translateX(-120%);transition:none}
.orbt-profile[data-hover="shine"] .op-link:hover{transform:translateY(-2px)}
.orbt-profile[data-hover="shine"] .op-link:hover::after{animation:op-shine .8s var(--ease)}
@keyframes op-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
/* slide-fill — accent wipes in from the left, ink flips to read on it */
.orbt-profile[data-hover="slide-fill"] .op-link{z-index:0}
.orbt-profile[data-hover="slide-fill"] .op-link::before{opacity:1;background:var(--pa);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover{transform:translateY(-2px);color:var(--op-onaccent,var(--pf));border-color:var(--pa)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover::before{transform:scaleX(1)}
.orbt-profile[data-hover="slide-fill"] .op-link:hover .op-link-ico{background:color-mix(in srgb,#000 16%,transparent);color:var(--op-onaccent,var(--pf))}
@media (prefers-reduced-motion:reduce){.orbt-profile[data-hover="shine"] .op-link:hover::after{animation:none}}

/* ---------- link subtitle (small muted line under the title) ---------- */
.op-link-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;position:relative;z-index:1;text-align:left;justify-content:center}
.op-link-main .op-link-title{flex:none;width:100%}
.op-link-sub{font-size:calc(.74rem*var(--op-lscale,1));color:var(--pm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;opacity:.85}
.op-link.has-sub{align-items:center}

/* ---------- section header (titled divider grouping the links beneath it) ---------- */
.op-section{display:flex;align-items:center;gap:.85rem;margin:18px 2px 2px;text-align:left}
.op-section:first-child{margin-top:0}
.op-section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--pt) 18%,transparent),transparent)}
.op-section-label{flex:none;font-family:var(--op-d);font-weight:600;font-size:calc(.74rem*var(--op-lscale,1));
  letter-spacing:.16em;text-transform:uppercase;color:var(--pa);opacity:.92;white-space:nowrap}

/* ---------- featured image card (large branded image link) ---------- */
.op-feat{display:flex;align-items:flex-end;position:relative;overflow:hidden;min-height:148px;
  border-radius:var(--op-radius,15px);background:var(--ps) center/cover no-repeat;border:1px solid var(--pl);
  color:#fff;text-decoration:none;isolation:isolate;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.op-feat-scrim{position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.12) 100%)}
.op-feat-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;
  padding:calc(15px*var(--op-lscale,1)) calc(17px*var(--op-lscale,1));max-width:calc(100% - 44px)}
.op-feat-title{font-family:var(--op-d);font-weight:600;font-size:calc(1.05rem*var(--op-lscale,1));line-height:1.18;
  letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.op-feat-sub{font-size:calc(.8rem*var(--op-lscale,1));color:rgba(255,255,255,.82);font-weight:400;
  text-shadow:0 1px 10px rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-feat-arrow{position:absolute;z-index:1;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--pa) 92%,#000);color:var(--op-onaccent,#000);
  opacity:0;transform:translateY(-4px) scale(.9);transition:opacity .25s,transform .25s;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.op-feat-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4}
.op-feat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 60%,transparent);
  box-shadow:0 14px 38px -14px color-mix(in srgb,var(--pa) 55%,transparent)}
.op-feat:hover .op-feat-arrow{opacity:1;transform:translateY(0) scale(1)}
/* featured cards + section headers ride the same intro stagger as link cards */
.op-content.op-intro[data-intro="fade"] .op-feat,.op-content.op-intro[data-intro="fade"] .op-section{animation:op-fade .6s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="zoom"] .op-feat,.op-content.op-intro[data-intro="zoom"] .op-section{animation:op-zoom .55s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="blur"] .op-feat,.op-content.op-intro[data-intro="blur"] .op-section{animation:op-blurin .6s both;animation-delay:calc(.22s + var(--i)*.07s)}
.op-content.op-intro[data-intro="flip"] .op-feat,.op-content.op-intro[data-intro="flip"] .op-section{animation:op-flip .6s both;animation-delay:calc(.22s + var(--i)*.08s);transform-origin:top}
.op-content.op-intro[data-intro="drop"] .op-feat,.op-content.op-intro[data-intro="drop"] .op-section{animation:op-drop .6s cubic-bezier(.5,1.7,.6,1) both;animation-delay:calc(.2s + var(--i)*.07s)}
.op-content.op-intro[data-intro="swing"] .op-feat,.op-content.op-intro[data-intro="swing"] .op-section{animation:op-swing .7s both;animation-delay:calc(.2s + var(--i)*.07s);transform-origin:top center}
.op-content.op-intro[data-intro="stagger"] .op-feat,.op-content.op-intro[data-intro="stagger"] .op-section{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}
.op-content.op-intro[data-intro="orbital"] .op-feat,.op-content.op-intro[data-intro="orbital"] .op-section{animation:op-orbit-in .7s both;animation-delay:calc(.26s + var(--i)*.08s)}
.op-content.op-intro[data-intro="decode"] .op-feat,.op-content.op-intro[data-intro="decode"] .op-section{animation:op-rise .55s both;animation-delay:calc(.2s + var(--i)*.06s)}

/* ---------- social-icon row (Linktree-style) ---------- */
.op-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:1rem}
.op-social{width:34px;height:34px;display:grid;place-items:center;color:var(--pm);border-radius:50%;transition:color .2s,transform .2s,background .2s}
.op-social svg{width:21px;height:21px;fill:currentColor}
.op-social:hover{color:var(--pa);transform:translateY(-2px);background:color-mix(in srgb,var(--pa) 12%,transparent)}

/* ---------- profile glow (data-glow) — avatar / name / card ---------- */
.orbt-profile[data-glow="gold"] .op-avatar,.orbt-profile[data-glow="aura"] .op-avatar{box-shadow:0 0 32px -4px color-mix(in srgb,#F6C453 70%,transparent),0 14px 40px -12px rgba(0,0,0,.5)}
.orbt-profile[data-glow="accent"] .op-avatar,.orbt-profile[data-glow="neon"] .op-avatar{box-shadow:0 0 32px -4px color-mix(in srgb,var(--pa) 75%,transparent),0 14px 40px -12px rgba(0,0,0,.5)}
.orbt-profile[data-glow="gold"] .op-name{text-shadow:0 0 22px color-mix(in srgb,#F6C453 55%,transparent)}
.orbt-profile[data-glow="accent"] .op-name{text-shadow:0 0 22px color-mix(in srgb,var(--pa) 55%,transparent)}
.orbt-profile[data-glow="neon"] .op-name{text-shadow:0 0 8px color-mix(in srgb,var(--pa) 90%,transparent),0 0 22px color-mix(in srgb,var(--pa) 60%,transparent)}
.orbt-profile[data-glow="aura"]::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 18%,color-mix(in srgb,var(--pa) 22%,transparent),transparent 70%)}
.orbt-profile[data-glow="neon"] .op-link,.orbt-profile[data-glow="aura"] .op-link{box-shadow:0 0 24px -10px color-mix(in srgb,var(--pa) 60%,transparent)}

.op-empty{color:var(--pm);font-size:.9rem;padding:24px;border:1px dashed var(--pl);border-radius:14px}
.op-brand{display:inline-flex;margin-top:30px;font-family:var(--op-d);font-weight:600;font-size:.85rem;color:var(--pm);opacity:.7;transition:opacity .25s}
.op-brand:hover{opacity:1}
.op-dot{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--pa);margin:0 .04em;vertical-align:middle}

/* ---------- INTRO ANIMATIONS ---------- */
.op-content.op-intro .op-avatar-wrap,.op-content.op-intro .op-name,.op-content.op-intro .op-handle,.op-content.op-intro .op-socials,.op-content.op-intro .op-status,.op-content.op-intro .op-bio,.op-content.op-intro .op-brand{animation:op-rise .7s both}
.op-content.op-intro .op-name{animation-delay:.08s}
.op-content.op-intro .op-handle{animation-delay:.12s}
.op-content.op-intro .op-socials{animation-delay:.16s}
.op-content.op-intro .op-status{animation-delay:.18s}
.op-content.op-intro .op-bio{animation-delay:.22s}
/* video + spotify cards share the per-link reveal (they carry --i too) */
.op-content.op-intro[data-intro="stagger"] .op-link,.op-content.op-intro[data-intro="stagger"] .op-video,.op-content.op-intro[data-intro="stagger"] .op-spotify{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}
.op-content.op-intro[data-intro="orbital"] .op-link,.op-content.op-intro[data-intro="orbital"] .op-video,.op-content.op-intro[data-intro="orbital"] .op-spotify{animation:op-orbit-in .7s both;animation-delay:calc(.26s + var(--i)*.08s)}
.op-content.op-intro[data-intro="decode"] .op-link,.op-content.op-intro[data-intro="decode"] .op-video,.op-content.op-intro[data-intro="decode"] .op-spotify{animation:op-rise .55s both;animation-delay:calc(.2s + var(--i)*.06s)}
.op-content.op-intro[data-intro="iris"]{animation:op-iris .85s both}
@keyframes op-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes op-orbit-in{from{opacity:0;transform:translate(38px,28px) rotate(7deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes op-iris{from{clip-path:circle(0% at 50% 28%)}to{clip-path:circle(150% at 50% 28%)}}
/* ==========================================================================
   WAVE 1A BLOCKS — text / gallery / faq / countdown / embed / platform embeds,
   plus scheduled-link tags + highlight emphasis + gallery lightbox.
   All on-brand (accent vars), --op-radius-aware, responsive, reduced-motion-safe.
   ========================================================================== */
/* shared block scaffolding (carry --i so they ride the intro stagger like links) */
.op-block{position:relative;text-align:left}
.op-block-head,.op-text-head{font-family:var(--op-d);font-weight:600;font-size:calc(.95rem*var(--op-lscale,1));
  letter-spacing:-.01em;color:var(--op-heading,var(--pt));margin:0 2px .6rem}
.op-block .op-empty,.op-empty{color:var(--pm);font-size:.88rem;padding:18px;border:1px dashed var(--pl);border-radius:var(--op-radius,14px);text-align:center}

/* block cards ride the same per-link intro reveal (they carry --i) */
.op-content.op-intro[data-intro="fade"] .op-block,.op-content.op-intro[data-intro="zoom"] .op-block,.op-content.op-intro[data-intro="blur"] .op-block,.op-content.op-intro[data-intro="flip"] .op-block,.op-content.op-intro[data-intro="drop"] .op-block,.op-content.op-intro[data-intro="swing"] .op-block,.op-content.op-intro[data-intro="stagger"] .op-block,.op-content.op-intro[data-intro="orbital"] .op-block,.op-content.op-intro[data-intro="decode"] .op-block{animation:op-rise .6s both;animation-delay:calc(.26s + var(--i)*.07s)}

/* ---------- text block (safe markdown) ---------- */
.op-text-body{color:var(--op-text,var(--pm));font-size:calc(.92rem*var(--op-bscale,1));line-height:1.6;text-wrap:pretty}
.op-text-body > :first-child{margin-top:0}
.op-text-body > :last-child{margin-bottom:0}
.op-text-body p{margin:.55em 0}
.op-text-body h2{font-family:var(--op-d);font-weight:600;font-size:calc(1.12rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.7em 0 .35em;letter-spacing:-.01em}
.op-text-body h3{font-family:var(--op-d);font-weight:600;font-size:calc(1rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.65em 0 .3em}
.op-text-body h4{font-weight:600;font-size:calc(.92rem*var(--op-bscale,1));color:var(--op-heading,var(--pt));margin:.6em 0 .3em}
.op-text-body strong{color:var(--op-heading,var(--pt));font-weight:700}
.op-text-body a{color:var(--pa);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--pa) 55%,transparent);transition:text-decoration-color .2s}
.op-text-body a:hover{text-decoration-color:var(--pa)}
.op-text-body code{font-family:var(--mono,monospace);font-size:.86em;background:color-mix(in srgb,var(--pt) 8%,transparent);border-radius:6px;padding:.08em .38em}
.op-text-body ul,.op-text-body ol{margin:.5em 0;padding-left:1.4em}
.op-text-body li{margin:.22em 0}
.op-text-body ul li::marker{color:var(--pa)}

/* ---------- gallery (grid / carousel) ---------- */
.op-gallery .op-gal-track{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.op-gallery[data-count="1"] .op-gal-track{grid-template-columns:1fr}
.op-gallery[data-count="2"] .op-gal-track{grid-template-columns:repeat(2,1fr)}
.op-gallery[data-count="4"] .op-gal-track{grid-template-columns:repeat(2,1fr)}
.op-gal-cell{display:block;padding:0;border:0;cursor:zoom-in;border-radius:clamp(8px,calc(var(--op-radius,15px) - 2px),16px);
  overflow:hidden;background:var(--ps);aspect-ratio:1;position:relative;outline-offset:2px}
.op-gal-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.op-gal-cell::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--pa) 0%,transparent);transition:background .25s}
.op-gal-cell:hover img{transform:scale(1.06)}
.op-gal-cell:hover::after{background:color-mix(in srgb,var(--pa) 10%,transparent)}
.op-gal-cell:focus-visible{outline:2px solid var(--pa)}
/* carousel — horizontal snap scroller, no visible scrollbar */
.op-gallery-carousel .op-gal-track{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.op-gallery-carousel .op-gal-track::-webkit-scrollbar{display:none}
.op-gallery-carousel .op-gal-cell{flex:0 0 78%;aspect-ratio:4/3;scroll-snap-align:center;cursor:grab}

/* ---------- faq accordion ---------- */
.op-faq{display:flex;flex-direction:column;gap:8px}
.op-faq-item{border:1px solid var(--pl);border-radius:var(--op-radius,15px);background:var(--ps);overflow:hidden;transition:border-color .25s,background .25s}
.op-faq-item.open{border-color:color-mix(in srgb,var(--pa) 45%,transparent)}
.op-faq-q{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  padding:calc(13px*var(--op-lscale,1)) calc(15px*var(--op-lscale,1));background:none;border:0;cursor:pointer;
  text-align:left;font-family:var(--op-b);font-weight:500;font-size:calc(.93rem*var(--op-lscale,1));color:var(--op-linktext,var(--pt));
  transition:color .2s}
.op-faq-q:hover{color:var(--pa)}
.op-faq-chev{flex:none;width:18px;height:18px;color:var(--pa);transition:transform .3s var(--ease)}
.op-faq-item.open .op-faq-chev{transform:rotate(180deg)}
.op-faq-a{height:0;overflow:hidden;transition:height .32s var(--ease)}
.op-faq-a-inner{padding:0 calc(15px*var(--op-lscale,1)) calc(13px*var(--op-lscale,1));color:var(--op-text,var(--pm));
  font-size:calc(.87rem*var(--op-bscale,1));line-height:1.55}
.op-faq-a-inner > :first-child{margin-top:0}.op-faq-a-inner > :last-child{margin-bottom:0}
.op-faq-a-inner a{color:var(--pa);text-decoration:underline;text-underline-offset:2px}

/* ---------- countdown ---------- */
.op-countdown{border:1px solid var(--pl);border-radius:var(--op-radius,15px);background:var(--ps);
  padding:calc(16px*var(--op-lscale,1)) calc(14px*var(--op-lscale,1));text-align:center;
  background-image:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--pa) 10%,transparent),transparent 70%)}
.op-cd-label{font-family:var(--op-d);font-weight:600;font-size:calc(.92rem*var(--op-lscale,1));color:var(--op-heading,var(--pt));margin-bottom:.7rem;letter-spacing:-.01em}
.op-cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.op-cd-unit{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .2rem;
  border-radius:clamp(8px,calc(var(--op-radius,15px) - 4px),14px);background:color-mix(in srgb,var(--pt) 5%,transparent)}
.op-cd-num{font-family:var(--op-d);font-weight:600;font-size:calc(1.5rem*var(--op-lscale,1));line-height:1;color:var(--pa);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.op-cd-cap{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pm);font-weight:500}
.op-cd-done{font-family:var(--op-d);font-weight:600;font-size:calc(1.15rem*var(--op-lscale,1));color:var(--pa);padding:.4rem 0}
.op-countdown.elapsed{border-color:color-mix(in srgb,var(--pa) 45%,transparent)}

/* ---------- platform embeds (facade + iframes) ---------- */
.op-embed{position:relative;line-height:0;border-radius:var(--op-radius,15px);overflow:hidden}
.op-embed .op-block-head{line-height:1.2}
.op-embed-frame-el{width:100%;border:0;display:block;border-radius:var(--op-radius,15px);background:var(--ps);
  aspect-ratio:var(--em-ratio,16/9)}
.op-embed-frame-el[style*="--em-h"],.op-embed.op-embed-applemusic .op-embed-frame-el,.op-embed.op-embed-soundcloud .op-embed-frame-el{aspect-ratio:auto;height:var(--em-h,166px)}
.op-embed.is-tall .op-embed-frame-el{height:var(--em-h,450px)}
/* click-to-load facade for heavy embeds */
.op-embed[data-src]{cursor:pointer;background:var(--ps);border:1px solid var(--pl);transition:border-color .25s,box-shadow .25s,transform .25s}
.op-embed[data-src]:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pa) 55%,transparent);box-shadow:0 12px 32px -14px color-mix(in srgb,var(--pa) 50%,transparent)}
.op-embed[data-src]:focus-visible{outline:2px solid var(--pa);outline-offset:2px}
.op-embed-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  min-height:148px;padding:24px;line-height:1.3;text-align:center;position:relative;
  background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--pa) 12%,transparent),transparent 70%)}
.op-embed-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--pa);
  background:color-mix(in srgb,var(--pa) 14%,transparent)}
.op-embed-ico svg{width:24px;height:24px;fill:currentColor}
.op-embed-cta{font-weight:500;font-size:.92rem;color:var(--pt);max-width:90%}
.op-play-sm{position:static;margin:0;width:38px;height:38px}

/* ---------- raw embed (sandboxed) ---------- */
.op-embed-html{position:relative;line-height:1.4}
.op-embed-frame{line-height:0}
.op-embed-sandbox{width:100%;min-height:120px;border:0;display:block;border-radius:var(--op-radius,15px);
  background:var(--ps)}

/* ---------- highlight emphasis (data highlight: pulse | shimmer | hero) ---------- */
.op-wrap{position:relative}
.op-hl{border-radius:var(--op-radius,15px)}
/* pulse — subtle gold breathing glow */
.op-hl-pulse{animation:op-hl-pulse 2.4s ease-in-out infinite}
@keyframes op-hl-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 0%,transparent)}50%{box-shadow:0 0 22px -2px color-mix(in srgb,var(--pa) 55%,transparent)}}
/* shimmer — a diagonal light sweep across the block */
.op-hl-shimmer{overflow:hidden}
.op-hl-shimmer::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--pa) 42%,transparent) 50%,transparent 62%);
  transform:translateX(-130%);animation:op-hl-shimmer 3.4s var(--ease) infinite}
@keyframes op-hl-shimmer{0%,100%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
/* hero — larger, accent border + glow ring; scales its child up slightly */
.op-hl-hero{padding:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--pa) 70%,transparent),color-mix(in srgb,var(--pa2) 70%,transparent));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pa) 40%,transparent),0 16px 40px -16px color-mix(in srgb,var(--pa) 55%,transparent)}
.op-hl-hero > .op-link,.op-hl-hero > .op-feat,.op-hl-hero > .op-block,.op-hl-hero > .op-video,.op-hl-hero > .op-spotify,.op-hl-hero > .op-embed{margin:0}
.op-hl-hero > .op-link{font-size:calc(1.04rem*var(--op-lscale,1));padding:calc(18px*var(--op-lscale,1)) calc(18px*var(--op-lscale,1))}

/* ---------- scheduled-link tag (dashboard preview only) ---------- */
.op-sched{position:relative}
.op-sched > :not(.op-sched-tag){opacity:.5;filter:saturate(.6)}
.op-sched-tag{position:absolute;top:-9px;right:8px;z-index:5;font-size:.62rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .55rem;border-radius:100px;background:var(--pf);color:var(--pa);
  border:1px solid color-mix(in srgb,var(--pa) 50%,transparent);line-height:1.2;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.op-sched-expired .op-sched-tag{color:var(--pm);border-color:var(--pl)}

/* ---------- gallery lightbox (scoped to the profile element) ---------- */
.op-lightbox{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:24px;background:color-mix(in srgb,#000 82%,transparent);backdrop-filter:blur(8px)}
.op-lightbox.open{display:flex;animation:op-fade .25s both}
.op-lb-img{max-width:100%;max-height:100%;border-radius:var(--op-radius,15px);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);object-fit:contain}
.op-lb-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:color-mix(in srgb,#fff 12%,transparent);color:#fff;transition:background .2s}
.op-lb-close:hover{background:color-mix(in srgb,var(--pa) 80%,transparent);color:var(--op-onaccent,#000)}
.op-lb-close svg{width:20px;height:20px}
/* in framed (phone) layout the lightbox stays inside the phone frame */
.orbt-profile[data-layout="framed"] .op-lightbox{border-radius:inherit;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .op-bg-mesh::before,.op-bg-mesh::after,.op-bg-aurora,.op-bg-waves,.op-bg-noise::before,.op-avatar-wrap.has-ring::before,.op-content.op-intro *,.op-content.op-intro{animation:none!important}
  .op-content.op-intro,.op-content.op-intro *{clip-path:none!important}
  .op-hl-pulse,.op-hl-shimmer::after{animation:none!important}
  .op-gal-cell img{transition:none}
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
/* floating manual-save bar */
.save-bar[hidden]{display:none}
.save-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(0);z-index:40;
  display:flex;align-items:center;gap:16px;padding:.5rem .5rem .5rem 1.3rem;border-radius:100px;
  background:color-mix(in srgb,var(--bg-1) 92%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line-2));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 0 40px -16px color-mix(in srgb,var(--accent) 50%,transparent);
  backdrop-filter:blur(14px);animation:save-bar-in .35s var(--ease);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.save-bar[hidden]{display:none}
/* fade/slide OUT after a successful save (J) instead of vanishing instantly */
.save-bar.leaving{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}
@keyframes save-bar-in{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.save-hint{font-size:.88rem;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.save-hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);animation:op-live 1.9s infinite}
.save-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--accent-ink);font-weight:600;padding:.62rem 1.4rem;border-radius:100px;transition:filter .2s,transform .2s,box-shadow .2s}
.save-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.save-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.save-btn:active{transform:translateY(0)}
.save-btn:disabled{opacity:.45;cursor:default;filter:none;transform:none;box-shadow:none}
.save-bar.saved .save-hint{color:var(--muted)}
.save-bar.saved .save-hint::before{background:#62D08A;box-shadow:none;animation:none}
@media (prefers-reduced-motion:reduce){.save-bar,.save-hint::before{animation:none}}
@media (max-width:480px){.save-bar{left:12px;right:12px;transform:none;justify-content:space-between}.save-bar.leaving{transform:translateY(14px);opacity:0}@keyframes save-bar-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}}

/* account dropdown (T) */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .6rem .32rem .35rem;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);font-size:.85rem;transition:border-color .2s,background .2s}
.acct-btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2));background:color-mix(in srgb,var(--accent) 6%,var(--bg-2))}
.acct-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.acct-btn:hover .acct-caret{stroke:var(--text)}
.acct-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:.8rem;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent) 65%,color-mix(in srgb,var(--accent) 55%,#000));
  color:var(--accent-ink);background-size:cover;background-position:center}
.acct-av.lg{width:40px;height:40px;font-size:1.05rem}
.acct-av.img{color:transparent}
.acct-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.acct-caret{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acct-btn[aria-expanded="true"] .acct-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:248px;z-index:60;padding:8px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 24px 70px -18px rgba(0,0,0,.85);animation:cp-in .16s var(--ease)}
.acct-menu[hidden]{display:none}
.acct-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .75rem}
.acct-id{min-width:0}
.acct-id strong{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-id span{display:block;font-size:.74rem;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-sep{height:1px;background:var(--line);margin:6px 4px}
.acct-item{display:flex;align-items:center;gap:.65rem;width:100%;padding:.6rem .7rem;border-radius:10px;color:var(--text);font-size:.88rem;text-align:left;transition:background .15s,color .15s}
.acct-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.acct-item svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acct-item.danger{color:#FF8585}
.acct-item.danger:hover{background:color-mix(in srgb,#FF6B6B 14%,transparent)}
@media (max-width:560px){.acct-name{display:none}}

.dash{padding:32px var(--pad) 80px;max-width:1400px;margin:0 auto}
.dash-head{margin-bottom:28px}
.dash-head h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.dash-head .url-pill{display:inline-flex;align-items:center;margin-top:.6rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:.4rem .9rem;font-family:var(--mono);font-size:.82rem}
.dash-head .url-pill a{color:var(--accent)}
.dash-head .url-pill button{color:var(--muted);font-size:.74rem;border-left:1px solid var(--line);margin-left:.7rem;padding-left:.7rem}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,32vw,520px);gap:28px;align-items:start}
.panel{position:relative;background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* a barely-there solar glaze in the top-left corner that warms on hover —
   gives each panel an intentional light source instead of a flat fill */
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;
  transition:opacity .3s var(--ease);
  background:radial-gradient(80% 60% at 0% 0%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%)}
.panel:hover::before{opacity:1}
.panel:hover{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 1px 0 0 color-mix(in srgb,var(--accent) 8%,transparent) inset,0 18px 50px -34px rgba(0,0,0,.9)}
.panel > *{position:relative}
.panel > h2{font-size:1.15rem;margin-bottom:.3rem;display:flex;align-items:center;gap:.55rem}
.panel > h2::before{content:"";width:4px;height:1.05em;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 35%,transparent))}
.panel > .desc{color:var(--muted);font-size:.88rem;margin-bottom:1.2rem}

/* profile editor */
.avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.avatar-pick{position:relative;width:76px;height:76px;flex:none;border-radius:50%;overflow:hidden;cursor:pointer;border:1px solid var(--line-2)}
.avatar-pick img{width:100%;height:100%;object-fit:cover}
.avatar-pick .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--accent-ink);
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent) 60%,#9A6B12)}
.avatar-pick .cam{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.avatar-pick:hover .cam{opacity:1}
.avatar-pick .cam svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.avatar-row .meta{font-size:.85rem;color:var(--muted)}
.avatar-row .meta strong{color:var(--text);display:block;font-size:.95rem}
textarea.input{resize:vertical;min-height:72px;line-height:1.5;font-family:var(--body)}
.char-count{text-align:right;font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:.3rem}

/* theme + accent */
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.opt-row .opt-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seg{display:inline-flex;gap:4px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:100px;padding:4px}
.seg button{box-sizing:border-box;padding:.4rem 1rem;border-radius:100px;font-size:.85rem;color:var(--muted);transition:color .2s,background .2s,transform .12s}
.seg button:hover:not(.on){color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.seg button:active{transform:scale(.96)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 2px 10px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.swatches{display:flex;gap:8px;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}
.swatch:hover{transform:scale(1.12)}
.swatch.on{border-color:var(--text)}
.swatch.custom{display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden;position:relative}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.swatch.custom svg{width:14px;height:14px;stroke:var(--muted);fill:none}

/* links editor */
.link-add{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.link-add .input{flex:1;min-width:140px}
.links-list{display:flex;flex-direction:column;gap:10px}
.link-item{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;
  background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,opacity .2s;
}
.link-item:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.link-item.dragging{opacity:.4;border-style:dashed}
.link-item.drag-over{border-color:var(--accent);box-shadow:0 0 0 3px rgba(246,196,83,.15)}
.link-item.inactive{opacity:.55}
.drag-handle{flex:none;cursor:grab;color:var(--faint);padding:2px;touch-action:none}
.drag-handle svg{width:18px;height:18px;fill:currentColor}
.link-item .li-ico{flex:none;position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg-3);border:1px solid transparent;cursor:pointer;transition:border-color .18s,background .18s}
.link-item .li-ico:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}
.link-item .li-ico svg{width:18px;height:18px;fill:var(--text)}
.link-item .li-ico img.ic-img{width:22px;height:22px;object-fit:cover;border-radius:6px}
.li-ico-edit{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.li-ico-edit svg{width:9px!important;height:9px!important;fill:none!important;stroke:var(--accent-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.link-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.link-fields .li-sub{font-size:.78rem;color:var(--muted);font-family:var(--body)}
.link-fields .li-sub::placeholder{color:var(--faint)}

/* icon picker popover — scrollable but NO visible scrollbar (Q) */
.icon-pop{position:fixed;z-index:320;width:288px;max-height:min(460px,72vh);overflow-y:auto;padding:12px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 24px 70px -18px rgba(0,0,0,.85);
  animation:cp-in .16s var(--ease);scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.icon-pop::-webkit-scrollbar{display:none;width:0;height:0}
@keyframes cp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* custom-icon upload row (R) */
.ip-upload-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ip-upload{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .8rem;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-3));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-2));
  color:var(--text);font-size:.82rem;font-weight:500;transition:border-color .16s,background .16s}
.ip-upload:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-3))}
.ip-upload svg{width:15px;height:15px}
.ip-upload .spin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.ip-custom{width:38px;height:38px;aspect-ratio:auto;flex:none}
.ip-custom img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.ip-group-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:.7rem 0 .4rem;padding-left:2px}
.ip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ip-btn{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:var(--bg-3);border:1px solid transparent;color:var(--text);overflow:hidden;transition:transform .14s,border-color .14s,background .14s}
.ip-btn:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-3))}
.ip-btn svg{width:18px;height:18px;fill:currentColor}
.ip-btn img.ic-img{width:20px;height:20px;object-fit:cover;border-radius:5px}
.ip-btn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--bg-3));color:var(--accent)}

/* small inline hint under a control group */
.opt-hint{margin-top:.7rem;font-size:.78rem;color:var(--faint);line-height:1.5}
/* clearer "this is editable" affordance (S): inputs read as fields, light up on focus */
.link-fields input{background:none;border:none;border-bottom:1px solid transparent;outline:none;color:var(--text);font-family:inherit;width:100%;padding:2px 1px;border-radius:2px;transition:border-color .18s,background .18s}
.link-item:hover .link-fields input{border-bottom-color:color-mix(in srgb,var(--text) 12%,transparent)}
.link-fields input:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.link-fields input:focus{color:var(--text);border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.link-fields .li-title{font-weight:500;font-size:.95rem}
.link-fields .li-url{font-size:.8rem;color:var(--muted);font-family:var(--mono)}
/* a small "Edit" cue that appears on hover so the row clearly invites editing */
.link-item .li-ico::after{content:"Edit";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:.6rem;font-weight:600;letter-spacing:.04em;color:var(--accent);background:var(--bg-1);border:1px solid var(--line-2);padding:1px 6px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;z-index:5}
.link-item .li-ico:hover::after{opacity:1}
.li-actions{flex:none;display:flex;align-items:center;gap:4px}
.icon-btn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .2s,color .2s,transform .15s var(--ease),box-shadow .2s}
.icon-btn:hover{background:var(--bg-3);color:var(--text);transform:scale(1.08)}
.icon-btn:active{transform:scale(.96)}
.icon-btn:focus-visible{outline:none;color:var(--text);background:var(--bg-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.icon-btn.del:hover{color:#FF6B6B}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.switch{position:relative;width:38px;height:22px;flex:none;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;transition:.25s}
.switch .track::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--muted);top:2px;left:2px;transition:.25s}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track::after{background:var(--accent-ink);transform:translateX(16px)}
.links-empty{color:var(--muted);font-size:.9rem;padding:20px;text-align:center;border:1px dashed var(--line-2);border-radius:14px}

/* section-header row in the editor — visually distinct, simpler controls */
.link-item.is-section{background:color-mix(in srgb,var(--accent) 7%,var(--bg-2));border-style:dashed;
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.link-item.is-section:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.li-sectag{flex:none;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg-3));color:var(--accent);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.li-sectag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.li-sectitle{font-family:var(--display,var(--body))!important;font-weight:600!important;letter-spacing:.01em}
.li-sectitle::placeholder{color:var(--faint)}

/* featured-image (thumbnail) control */
.icon-btn.li-thumb{position:relative;overflow:visible}
.icon-btn.li-thumb .li-thumb-sw{position:absolute;inset:2px;border-radius:6px;background:center/cover no-repeat;opacity:0;transition:opacity .18s}
.icon-btn.li-thumb.on .li-thumb-sw{opacity:1}
.icon-btn.li-thumb.on .li-thumb-ic{opacity:0}
.icon-btn.li-thumb.on{color:var(--accent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent)}
.li-thumb-ic{transition:opacity .18s}
.li-thumb-x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:none;
  place-items:center;background:#FF6B6B;color:#fff;font-size:9px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.icon-btn.li-thumb.on .li-thumb-x{display:grid}
.li-thumb-x:hover{filter:brightness(1.1)}

/* ==========================================================================
   WAVE 1A — block editors, advanced controls, block picker
   ========================================================================== */
/* "Add block" button gets a tiny leading icon */
.block-add-btn{display:inline-flex;align-items:center;gap:.4rem}
.block-add-btn svg{width:15px;height:15px}

/* block picker popover — grouped menu, scrollable, no visible scrollbar */
.block-pop{position:fixed;z-index:330;width:min(340px,92vw);max-height:min(560px,76vh);overflow-y:auto;padding:12px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 24px 70px -18px rgba(0,0,0,.85);
  animation:cp-in .16s var(--ease);scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.block-pop::-webkit-scrollbar{display:none;width:0;height:0}
.bp-hint{font-size:.78rem;color:var(--muted);padding:2px 4px 6px;line-height:1.4}
.bp-group-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:.7rem 0 .4rem;padding-left:2px}
.bp-grid{display:flex;flex-direction:column;gap:4px}
.bp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:11px;
  background:var(--bg-3);border:1px solid transparent;color:var(--text);transition:transform .14s,border-color .14s,background .14s}
.bp-item:hover{transform:translateY(-1px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-3))}
.bp-ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--bg-2));color:var(--accent)}
.bp-ico svg{width:18px;height:18px;fill:currentColor}
.bp-ico svg[stroke]{fill:none;stroke:currentColor}
.bp-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.bp-name{font-weight:600;font-size:.9rem}
.bp-desc{font-size:.74rem;color:var(--muted);font-family:var(--body)}

/* block editor rows — wider body, stacked fields */
.link-item.is-block{align-items:flex-start;flex-wrap:wrap}
.link-item.is-block .li-actions{margin-left:auto}
.li-blktag{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-3));color:var(--accent);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.li-blktag svg{width:15px;height:15px;fill:currentColor}
.li-blktag svg[stroke]{fill:none;stroke:currentColor}
.li-blktag span{line-height:1}
.blk-fields{gap:7px;flex-basis:200px}
.blk-fields .blk-title{font-weight:600;font-size:.92rem}
.blk-textarea{width:100%;min-height:62px;resize:vertical;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-family:var(--body);font-size:.86rem;line-height:1.5;padding:8px 10px;outline:none;transition:border-color .18s}
.blk-textarea:focus{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-3))}
.blk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blk-hint,.blk-warn{font-size:.73rem;color:var(--faint);line-height:1.4;flex:1;min-width:140px}
.blk-warn{color:color-mix(in srgb,#FFB347 70%,var(--muted))}
.blk-fields .input{width:100%}

/* compact segmented controls inside block rows (reuses the global .seg pill look,
   just tightened for the dense editor context) */
.blk-align-seg,.blk-gal-layout,.adv-hl-seg{font-size:.82rem}
.blk-align-seg button,.blk-gal-layout button,.adv-hl-seg button{padding:.32rem .7rem;font-size:.78rem}

/* gallery editor thumbs */
.blk-gal-thumbs{display:flex;flex-wrap:wrap;gap:7px}
.blk-gal-empty{font-size:.78rem;color:var(--faint);padding:8px 2px}
.blk-gal-cell{position:relative;width:58px;height:58px;border-radius:9px;overflow:visible}
.blk-gal-cell img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;border:1px solid var(--line)}
.blk-gal-rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:#FF6B6B;color:#fff;font-size:10px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.blk-gal-rm:hover{filter:brightness(1.1)}
.blk-gal-add{display:inline-flex;align-items:center;gap:.35rem}
.blk-gal-add svg{width:14px;height:14px}
.blk-gal-add .spin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* faq editor items */
.blk-faq-items{display:flex;flex-direction:column;gap:8px}
.blk-faq-item{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line)}
.blk-faq-arow{display:flex;gap:6px;align-items:flex-start}
.blk-faq-a{flex:1}
.blk-faq-rm{flex:none}
.blk-faq-add{align-self:flex-start;font-size:.82rem}

/* countdown editor */
.blk-cd-field{display:flex;flex-direction:column;gap:4px}
.blk-cd-field>span,.adv-field>span{font-size:.72rem;color:var(--muted);font-weight:500}
input[type="datetime-local"].input{font-family:var(--body);color-scheme:dark}

/* platform url validity hint */
.blk-url-hint{font-size:.73rem;line-height:1.3;min-height:1em}
.blk-url-hint.ok{color:#62D08A}
.blk-url-hint.bad{color:#FF8DB0}

/* ---- advanced (schedule / highlight / QR) inline panel ---- */
.icon-btn.li-adv.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.link-item.adv-open{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.li-adv-panel{flex-basis:100%;width:100%;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:14px;animation:adv-in .18s var(--ease)}
@keyframes adv-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.adv-group{display:flex;flex-direction:column;gap:7px}
.adv-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.adv-sched-row{display:flex;gap:10px;flex-wrap:wrap}
.adv-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.adv-hint{font-size:.73rem;color:var(--faint);line-height:1.4}
.adv-qr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adv-qr-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem}
.adv-qr-btn svg{width:15px;height:15px}
.adv-qr-row .adv-hint{flex:1;min-width:140px}

@media (max-width:560px){
  .link-item.is-block{gap:8px}
  .blk-fields{flex-basis:100%}
  .adv-sched-row{flex-direction:column}
}
/* narrow widths: let the action cluster wrap below the fields so the (now denser)
   link row never forces horizontal scroll. The advanced gear added a 6th control. */
@media (max-width:560px){
  .link-item{flex-wrap:wrap}
  .link-item .link-fields{flex-basis:60%}
  .li-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .li-adv-panel{flex-basis:100%;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bp-item:hover,.li-adv-panel{transform:none;animation:none}
}

/* live preview — centered + sticky in its column, sized to fill the space */
.preview-col{position:sticky;top:72px;align-self:start;display:flex;flex-direction:column;align-items:center;isolation:isolate}
/* a soft accent spotlight behind the device so the live preview reads as a lit stage,
   not a mockup pasted on flat canvas — ties it to the brand without distraction */
.preview-col::before{content:"";position:absolute;z-index:-1;left:50%;top:18%;
  width:min(520px,118%);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%);
  filter:blur(8px)}

/* (W) device-size switcher */
.device-switch{display:inline-flex;gap:2px;padding:4px;margin-bottom:14px;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.device-switch button{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:100px;
  font-size:.78rem;color:var(--muted);transition:color .2s,background .2s}
.device-switch button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.device-switch button:hover{color:var(--text)}
.device-switch button.on{color:var(--accent-ink);background:var(--accent);font-weight:600;
  box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 65%,transparent)}
@media (max-width:420px){.device-switch button span{display:none}.device-switch button{padding:.42rem .6rem}}

.preview-frame{
  position:relative;
  width:100%;max-width:400px;margin:0 auto;border-radius:46px;padding:13px;
  background:linear-gradient(160deg,#26262F,#0C0C12);border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  transition:max-width .4s var(--ease),border-radius .4s var(--ease),padding .3s var(--ease);
}
/* hairline top rim-light on the bezel — reads as real glass catching the light */
.preview-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%)}
.preview-screen{border-radius:34px;overflow:hidden;height:clamp(560px,calc(100vh - 220px),780px);overflow-y:auto;scrollbar-width:none;
  transition:height .4s var(--ease),border-radius .4s var(--ease)}
.preview-screen::-webkit-scrollbar{display:none}
.preview-screen #preview{min-height:100%}
.preview-label{text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}

/* tablet (iPad) — wider frame, gentler corners */
.preview-col[data-device="tablet"] .preview-frame{max-width:560px;border-radius:30px;padding:16px}
.preview-col[data-device="tablet"] .preview-screen{border-radius:18px;height:clamp(600px,calc(100vh - 220px),760px)}

/* desktop (1920×1080) — render a fixed-size full-bleed canvas, scaled to fit the column.
   The inner #preview is sized 1920×1080 and transform-scaled; the frame becomes a monitor bezel.
   --dscale is computed in JS from BOTH the column width and the available column height so the
   canvas uses the vertical space too (no dead void below). */
.preview-col[data-device="desktop"]{justify-content:center;min-height:calc(100vh - 110px)}
.preview-col[data-device="desktop"] .preview-frame{
  width:max-content;max-width:none;border-radius:18px;padding:12px;
  margin-left:calc(-1 * var(--dshift,0px));
  background:linear-gradient(160deg,#2A2A33,#0C0C12);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85)}
/* the screen is sized to exactly the scaled canvas so the bezel hugs it (no empty frame) */
.preview-col[data-device="desktop"] .preview-screen{
  border-radius:9px;overflow:hidden;
  width:calc(1920px * var(--dscale,.2));height:calc(1080px * var(--dscale,.2))}
.preview-col[data-device="desktop"] .preview-screen #preview{
  width:1920px;height:1080px;transform:scale(var(--dscale,.2));transform-origin:top left}
/* subtle monitor stand so the area reads as an intentional desktop, not an empty rail */
.preview-col[data-device="desktop"] .preview-frame::after{
  content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  width:18%;height:22px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#22222B,#15151B);
  box-shadow:0 16px 26px -14px rgba(0,0,0,.7)}
.preview-col[data-device="desktop"] .preview-frame{position:relative;margin-bottom:30px}

/* toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,120%);z-index:200;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:100px;
  padding:.7rem 1.3rem;font-size:.9rem;display:flex;align-items:center;gap:.5rem;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);transition:transform .4s var(--ease),opacity .3s,visibility .3s;
  opacity:0;visibility:hidden;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}

/* analytics */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:1.2rem}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
.stat-n{font-family:var(--display);font-weight:600;font-size:1.8rem;line-height:1;color:var(--text)}
.stat-l{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.breakdown{display:flex;flex-direction:column;gap:12px}
.bd-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.bd-row .bd-title{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .bd-count{font-family:var(--mono);font-size:.85rem;color:var(--accent)}
.bd-bar{grid-column:1/-1;height:6px;border-radius:100px;background:var(--bg-3);overflow:hidden}
.bd-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--accent),var(--orbit));transition:width .6s var(--ease)}
.bd-empty{color:var(--muted);font-size:.88rem;text-align:center;padding:14px}

/* design controls */
.opt-block{margin-top:1.2rem}
.opt-block .opt-label{display:block;margin-bottom:.7rem}
.seg.wrap{flex-wrap:wrap}
.preset-row{display:flex;flex-wrap:wrap;gap:8px}
.preset-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:100px;background:var(--bg-2);border:1px solid var(--line-2);font-size:.85rem;color:var(--muted);transition:color .2s,border-color .2s}
.preset-chip:hover{color:var(--text)}
.preset-chip.on{border-color:var(--accent);color:var(--text)}
.preset-chip .dot2{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px -1px currentColor}
.avatar-opts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ring-toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}

/* ==========================================================================
   (O) DESIGN TAB — left section nav + scrolling sections + scrollspy
   (N/D) size controls under their sections · (L) color resets · (M) speed
   ========================================================================== */
.design-pane{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;align-items:start}
.design-pane[hidden]{display:none}
/* left vertical nav — sticky, no visible scrollbar */
.design-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;align-self:start;
  max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--bg-1),var(--bg))}
.design-nav::-webkit-scrollbar{display:none;width:0;height:0}
.design-nav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.6rem .7rem;border-radius:10px;font-size:.86rem;color:var(--muted);
  transition:color .2s,background .2s;position:relative}
.design-nav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.design-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.design-nav button.on{color:var(--accent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent) 6%,transparent))}
.design-nav button.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--accent) 70%,transparent)}
.design-sections{min-width:0;scroll-margin-top:90px}
.design-sec{scroll-margin-top:90px}
.design-sec[hidden]{display:none}

/* size controls grouped under their section */
.size-ctl{margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.size-ctl[hidden]{display:none}
.size-slide{display:flex;align-items:center;gap:.7rem;flex:1;max-width:260px}
.size-slide .slider{max-width:none}
.size-tick{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);flex:none}

/* (L) color trigger that can read "Auto" + reset */
.color-reset{cursor:pointer}
.color-reset .ct-sw{background:repeating-conic-gradient(var(--line-2) 0% 25%,var(--bg-3) 0% 50%) 50%/8px 8px}
.color-reset.set .ct-sw{background-image:none}

@media (max-width:880px){
  .design-pane{grid-template-columns:minmax(0,1fr)}
  /* horizontal scroll-strip nav on narrow screens */
  .design-nav{position:sticky;top:56px;flex-direction:row;max-height:none;overflow-x:auto;z-index:6;
    background:var(--bg);border-radius:12px}
  .design-nav button span{white-space:nowrap}
  .design-nav button.on::before{left:50%;top:auto;bottom:0;transform:translateX(-50%);width:18px;height:3px}
}

/* ---------- tabs ---------- */
.dash-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:24px;border-bottom:1px solid var(--line);
  min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.dash-tabs::-webkit-scrollbar{display:none;width:0;height:0}
.dash-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;font-size:.95rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
@media (max-width:440px){
  .dash-tabs{gap:2px}
  .dash-tabs button{padding:.7rem .6rem;font-size:.86rem;gap:.35rem}
  .dash-tabs button svg{width:15px;height:15px}
}
.dash-tabs button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dash-tabs button:hover{color:var(--text)}
.dash-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-pane[hidden]{display:none}
.link-btn{color:var(--accent);font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.preview-label{display:flex;align-items:center;justify-content:center;gap:.4rem}

/* ---------- analytics insights ---------- */
.insight-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.insight{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.ins-l{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin-bottom:.3rem}
.ins-ico{width:15px;height:15px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ins-v{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-row .bd-first{font-family:var(--mono);font-size:.7rem;color:var(--orbit);margin-left:.4rem}

/* ---------- share tab ---------- */
.share-url{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:.7rem .7rem .7rem 1.1rem;margin-bottom:1.4rem}
.share-url .mono{font-size:.92rem;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.share-btn{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-radius:12px;font-weight:500;font-size:.92rem;
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);transition:transform .2s var(--ease),border-color .2s,background .2s}
.share-btn:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--bg-3)}
.share-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.qr-wrap{display:inline-grid;place-items:center;padding:16px;background:#fff;border-radius:16px;margin-bottom:1rem}
.qr-wrap img{display:block;border-radius:6px}
.embed-code{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:pre-wrap;word-break:break-all;margin-bottom:1rem;line-height:1.5}

/* ---------- custom color picker ---------- */
.cp-pop{position:fixed;z-index:300;width:224px;padding:12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 20px 60px -16px rgba(0,0,0,.8)}
.cp-sv{position:relative;width:100%;height:140px;border-radius:10px;cursor:crosshair;touch-action:none;overflow:hidden}
.cp-sv-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:none}
.cp-hue{position:relative;width:100%;height:14px;border-radius:100px;margin:12px 0;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-hue-thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
.cp-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp-preview{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);flex:none}
.cp-hex{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:.85rem;padding:.5rem;text-transform:uppercase}
.cp-hex:focus{outline:none;border-color:var(--accent)}
.cp-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cp-sw{aspect-ratio:1;border-radius:6px;border:1px solid var(--line);cursor:pointer;transition:transform .15s}
.cp-sw:hover{transform:scale(1.12)}

/* color trigger + bg sub-controls */
.bg-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.bg-ctl[hidden]{display:none}
.color-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-2);font-size:.85rem;color:var(--text)}
.color-trigger:hover{border-color:var(--accent)}
.color-trigger .ct-sw{width:18px;height:18px;border-radius:5px;border:1px solid var(--line-2)}
.bg-ctl .angle{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted)}
.bg-ctl .angle input{accent-color:var(--accent)}

@media (max-width:880px){
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .preview-col{position:static;order:-1;min-width:0}
  .preview-frame{max-width:100%}
  .preview-screen{height:560px}
}

/* ==========================================================================
   HOMEPAGE MOTION UPGRADE — gravity well, grain, scroll-orbit, counters,
   orbital divider, stat proof strip, constellation CTA, 3D phone tilt.
   All compositor-friendly + reduced-motion-safe.
   ========================================================================== */

/* --- film grain: kills banding on dark gradients, adds human texture --- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
@media (prefers-reduced-motion:no-preference){
  @keyframes grain-shift{to{background-position:160px 160px}}
  .grain{animation:grain-shift 5s steps(6) infinite}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* --- gravity well: gold glow that lags toward the cursor like mass --- */
.hero-gravity{position:absolute;inset:0;z-index:0;pointer-events:none;
  --gx:76%;--gy:34%;opacity:.9;
  background:radial-gradient(34% 40% at var(--gx) var(--gy),
    color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%)}

/* --- scroll-orbit progress ring on the logo --- */
.logo .scroll-orbit{width:18px;height:18px;border-radius:50%;margin-left:.5em;flex:none;
  background:conic-gradient(var(--accent) var(--p,0%),rgba(255,255,255,.1) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0)}
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-progress{to{--p:100%}}
  .logo .scroll-orbit{animation:orbt-progress linear both;animation-timeline:scroll(root block)}
}
@media (prefers-reduced-motion:reduce){.logo .scroll-orbit{--p:25%}}

/* --- scroll-driven section reveal (compositor thread) --- */
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-rise{
    from{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
  .reveal-sd{animation:orbt-rise both;animation-timeline:view();
    animation-range:entry 6% cover 40%;animation-timing-function:var(--ease)}
}
@supports not (animation-timeline:view()){.reveal-sd{opacity:1}}

/* --- stat proof strip + animated counters --- */
.proof{padding-block:clamp(40px,5vw,64px)}
.proof-grid{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,4vw,56px);flex-wrap:wrap}
.proof-cell{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;min-width:120px}
.proof-num{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFE7A8,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-num{font-variant-numeric:tabular-nums}
.proof-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.proof-sep{width:1px;align-self:center;height:38px;background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
@media (max-width:680px){.proof-sep{display:none}.proof-grid{gap:28px 18px}.proof-cell{min-width:42%}}

/* --- orbital section divider: a gold dot orbiting a hairline --- */
.orbt-divider{position:relative;height:1px;margin:clamp(2.5rem,6vw,5rem) auto;max-width:var(--maxw);
  width:calc(100% - var(--pad)*2);
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.orbt-divider span{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#FFE7A8,var(--accent));
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 60%,transparent)}
@media (prefers-reduced-motion:no-preference){
  @keyframes orbt-travel{from{left:6%}to{left:94%}}
  .orbt-divider span{animation:orbt-travel linear both;
    animation-timeline:view();animation-range:cover 12% cover 88%}
}

/* --- constellation field behind the final CTA --- */
.cta-band{position:relative;overflow:hidden}
.cta-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:auto;opacity:.85}
.cta-band .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .cta-field{display:none}
  .cta-band{background:
    radial-gradient(70% 120% at 50% 0%,rgba(246,196,83,.14),transparent 60%),
    radial-gradient(40% 70% at 50% 100%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
}

/* --- 3D gravity-tilt on the looks phones (glass-under-light) --- */
.tilt{transform-style:preserve-3d;transition:transform .55s var(--ease);will-change:transform}
.phone-sm.tilt::after{content:"";position:absolute;inset:9px;border-radius:26px;pointer-events:none;z-index:3;
  background:radial-gradient(180px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.16),transparent 60%);
  opacity:0;transition:opacity .35s;mix-blend-mode:screen}
.phone-sm.tilt:hover::after{opacity:1}
.phone-sm.tilt:hover{transform:translateY(-8px)}
@media (prefers-reduced-motion:reduce){.tilt{transition:none}.phone-sm.tilt::after{display:none}}

/* ==========================================================================
   (K) SETTINGS overlay — account / language / accessibility / data / danger
   ========================================================================== */
.settings-overlay{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.settings-overlay[hidden]{display:none}
.settings-scrim{position:absolute;inset:0;background:rgba(4,4,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:set-fade .25s var(--ease)}
.settings-panel{position:relative;width:min(860px,100%);max-height:min(86vh,820px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-1),var(--bg));border:1px solid var(--line-2);border-radius:22px;
  box-shadow:0 50px 130px -40px rgba(0,0,0,.85);overflow:hidden;animation:set-rise .3s var(--ease)}
@keyframes set-fade{from{opacity:0}to{opacity:1}}
@keyframes set-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.settings-scrim,.settings-panel{animation:none}}
.settings-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.settings-head h2{font-family:var(--display);font-size:1.3rem;font-weight:600}
.settings-close{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line-2);transition:color .2s,background .2s}
.settings-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.settings-close:hover{color:var(--text);background:var(--bg-2)}
.settings-body{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:0;flex:1}
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:14px;border-right:1px solid var(--line);overflow:auto}
.settings-nav button{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.62rem .7rem;border-radius:10px;
  font-size:.88rem;color:var(--muted);transition:color .2s,background .2s}
.settings-nav button svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.settings-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.settings-nav button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.settings-nav button.danger.on{color:#FF6B6B;background:color-mix(in srgb,#FF6B6B 11%,transparent)}
.settings-sections{padding:22px clamp(18px,3vw,28px);overflow:auto;min-height:0}
/* .settings-sec is a <section>, so the global section{padding-block:clamp(..,100px)} leaks in — reset it */
.settings-sec{padding-block:0}
.settings-sec h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin-bottom:.25rem}
.settings-sec .desc{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.settings-divider{height:1px;background:var(--line);margin:1.3rem 0}
.set-row-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.9rem}
.set-row-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.set-handle{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.set-handle:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(246,196,83,.12)}
.set-handle-pre{padding:.8rem .1rem .8rem 1rem;color:var(--faint);font-family:var(--mono);font-size:.92rem;white-space:nowrap}
.set-handle input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.92rem;padding:.8rem .5rem}
.set-field-msg{font-size:.78rem;margin-top:.4rem;min-height:1.05em;font-family:var(--mono)}
.set-field-msg.ok{color:#62D08A}.set-field-msg.bad{color:#FF6B6B}.set-field-msg.muted{color:var(--faint)}
/* handle change locked (server-enforced 90-day cooldown) */
.set-handle:has(input.locked){opacity:.6}
.set-handle input.locked{cursor:not-allowed}
#setHandleLock{line-height:1.4;white-space:normal}
/* language grid */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lang-chip{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-radius:12px;text-align:left;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);transition:border-color .2s,background .2s}
.lang-chip:hover{border-color:var(--line-2);background:var(--bg-3)}
.lang-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lang-code{flex:none;width:32px;height:24px;display:grid;place-items:center;border-radius:6px;
  font-family:var(--mono,monospace);font-size:.66rem;font-weight:600;letter-spacing:.04em;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.lang-name{font-size:.9rem;font-weight:500}
.lang-native{display:block;font-size:.72rem;color:var(--muted)}
/* accessibility + danger toggle rows */
.set-toggle-row,.set-danger-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1rem 0;border-bottom:1px solid var(--line)}
.set-toggle-row:last-child,.set-danger-row:last-child{border-bottom:none}
.set-toggle-row strong,.set-danger-row strong{display:block;font-size:.95rem;margin-bottom:.15rem}
.set-toggle-row span,.set-danger-row span{display:block;font-size:.82rem;color:var(--muted);max-width:44ch}
.set-danger-row.danger strong{color:#FF6B6B}
.set-del-btn{background:#FF6B6B;color:#1A0606;font-weight:600;padding:.6rem 1.2rem}
.set-del-btn:hover{filter:brightness(1.06);box-shadow:0 10px 30px -10px rgba(255,107,107,.5)}
@media (max-width:640px){
  .settings-body{grid-template-columns:1fr}
  .settings-nav{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto}
  .settings-nav button span{white-space:nowrap}
  .settings-nav button svg{display:none}
  .set-toggle-row,.set-danger-row{flex-direction:column;align-items:flex-start;gap:.7rem}
}

/* (K) accessibility prefs applied live to the dashboard body */
body.a11y-contrast{--text:#FFFFFF;--muted:#C9C9D4;--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.3)}
body.a11y-large{font-size:1.08rem}
body.a11y-reduce *,body.a11y-reduce *::before,body.a11y-reduce *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}

/* ==========================================================================
   ONBOARDING — first-run wizard (branded, responsive, reduced-motion-safe)
   ========================================================================== */
.onb-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.onb-scrim{position:absolute;inset:0;background:rgba(4,4,8,.72);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);opacity:0;transition:opacity .32s var(--ease)}
.onb-overlay.open .onb-scrim{opacity:1}
.onb-overlay.leaving .onb-scrim{opacity:0}
.onb-modal{position:relative;width:min(960px,100%);max-height:min(92vh,760px);
  background:linear-gradient(180deg,#101019,#0b0b12);border:1px solid var(--line-2);
  border-radius:26px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(246,196,83,.06) inset;
  overflow:hidden;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .34s var(--ease),transform .34s var(--ease)}
.onb-overlay.open .onb-modal{opacity:1;transform:none}
.onb-overlay.leaving .onb-modal{opacity:0;transform:translateY(8px) scale(.99)}
.onb-modal::before{content:"";position:absolute;top:-40%;left:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(246,196,83,.16),transparent 70%);pointer-events:none;filter:blur(8px)}

.onb-skip{position:absolute;top:14px;right:16px;z-index:3;background:transparent;border:0;
  color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;padding:.5em .7em;border-radius:10px;transition:color .2s,background .2s}
.onb-skip:hover{color:var(--text);background:rgba(255,255,255,.05)}

.onb-grid{display:grid;grid-template-columns:1.15fr .85fr;min-height:0;max-height:inherit}
.onb-main{display:flex;flex-direction:column;padding:clamp(22px,3vw,40px);min-width:0;overflow:hidden}
.onb-brand{margin-bottom:18px}
.onb-logo{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;color:var(--text)}
.onb-logo-dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--accent);margin:0 .04em;vertical-align:middle;box-shadow:0 0 14px rgba(246,196,83,.6)}

.onb-dots{display:flex;gap:7px;margin-bottom:22px}
.onb-dot{width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .3s var(--ease)}
.onb-dot.on{background:var(--accent)}
.onb-dot.done{background:color-mix(in srgb,var(--accent) 55%,transparent)}

.onb-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.onb-body::-webkit-scrollbar{display:none;width:0}
.onb-enter{animation:onbIn .42s var(--ease) both}
@keyframes onbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.onb-step-head h2{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5rem}
.onb-step-head p{color:var(--muted);font-size:.95rem;line-height:1.5;margin:0 0 1.4rem;max-width:42ch}

.onb-cards{display:flex;flex-direction:column;gap:10px}
.onb-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  color:var(--text);font:inherit;transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease)}
.onb-card:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateX(2px)}
.onb-card.on{border-color:var(--accent);background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,transparent),rgba(255,255,255,.03))}
.onb-card-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c,#F6C453) 26%,#15151f),#12121a);
  border:1px solid color-mix(in srgb,var(--c,#F6C453) 40%,transparent);color:var(--c,#F6C453)}
.onb-card-ic svg{width:23px;height:23px}
.onb-card-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.onb-card-name{font-weight:600;font-size:1rem}
.onb-card-desc{color:var(--muted);font-size:.84rem;line-height:1.35}
.onb-card-check{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:#0a0a0f;background:transparent;opacity:0;transform:scale(.6);transition:all .22s var(--ease)}
.onb-card-check svg{width:14px;height:14px}
.onb-card.on .onb-card-check{opacity:1;transform:none;background:var(--accent);border-color:var(--accent)}

.onb-fields{display:flex;flex-direction:column;gap:18px;max-width:420px}
.onb-field{display:flex;flex-direction:column;gap:7px}
.onb-field>span{font-size:.82rem;font-weight:600;color:var(--muted)}
.onb-field input{width:100%;padding:.82em 1em;border-radius:13px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--text);font:inherit;transition:border-color .2s,box-shadow .2s}
.onb-field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(246,196,83,.16)}
.onb-handle-wrap{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:13px;
  background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.onb-handle-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(246,196,83,.16)}
.onb-handle-pre{padding-left:1em;color:var(--muted);font-size:.95rem;white-space:nowrap}
.onb-handle-wrap input{border:0;box-shadow:none;background:transparent;padding-left:.15em}
.onb-handle-wrap input:focus{box-shadow:none}
.onb-field-msg{font-size:.8rem;min-height:1.1em}
.onb-field-msg.bad{color:#FF8484}.onb-field-msg.ok{color:#62D08A}.onb-field-msg.muted{color:var(--muted)}

.onb-done{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.onb-done-orb{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;
  background:radial-gradient(circle at 38% 34%,#FFE6A8,var(--accent) 55%,#a87a1e);position:relative;
  box-shadow:0 0 50px -6px rgba(246,196,83,.55)}
.onb-done-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;
  top:6px;left:50%;transform-origin:0 25px;animation:onbOrbit 3.6s linear infinite}
@keyframes onbOrbit{to{transform:rotate(360deg)}}
.onb-done h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .5rem;letter-spacing:-.02em}
.onb-done>p{color:var(--muted);margin:0 0 1.3rem;max-width:40ch;line-height:1.5}
.onb-done-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.onb-done-list li{display:flex;align-items:center;gap:10px;font-size:.92rem}
.onb-done-list svg{flex:none;width:18px;height:18px;color:var(--accent)}

.onb-foot{display:flex;align-items:center;gap:12px;padding-top:22px;margin-top:6px;border-top:1px solid var(--line)}
.onb-foot-sp{flex:1}
.onb-foot .btn{padding:.78em 1.5em}
.onb-foot .spin{width:16px;height:16px;border:2px solid rgba(26,21,3,.35);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

.onb-preview-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:clamp(20px,2.5vw,34px);background:radial-gradient(120% 90% at 50% 0%,rgba(246,196,83,.06),transparent 60%),rgba(0,0,0,.22);
  border-left:1px solid var(--line)}
.onb-preview-label{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.onb-phone{width:min(248px,72%);aspect-ratio:9/19;border-radius:30px;padding:8px;
  background:linear-gradient(160deg,#1c1c26,#0c0c12);border:1px solid var(--line-2);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.7);overflow:hidden}
.onb-phone .orbt-profile{height:100%;border-radius:23px}

@media (prefers-reduced-motion:reduce){
  .onb-scrim,.onb-modal,.onb-enter,.onb-done-dot{transition:none;animation:none}
  .onb-overlay.open .onb-modal{transform:none}
}

@media (max-width:760px){
  .onb-grid{grid-template-columns:1fr}
  .onb-preview-col{order:-1;border-left:0;border-bottom:1px solid var(--line);flex-direction:row;gap:16px;padding:18px}
  .onb-phone{width:104px}
  .onb-modal{max-height:94vh}
}
@media (max-width:440px){
  .onb-preview-col{display:none}
  .onb-card-desc{display:none}
  .onb-foot .btn{padding:.72em 1.1em;font-size:.92rem}
}