/* Persona look, layer 2: soft white surfaces, deep navy ink, one blue accent, rounded type
   (Fredoka for display, Nunito for text) and a floating top bar. Loaded after app.css. */
:root{
  --paper:#ffffff; --wash:#f5f7fb; --wash2:#eceff6; --line:#e8ebf2; --line2:#d5dae5;
  --ink:#1d2433; --ink2:#4a5263; --mute:#7b8394; --dim:#aab1bf;
  --spot:#3d5afe; --spot2:#2f4ae0; --spotsoft:#eef2ff;
  --up:#13834a; --down:#d42a3c; --ac:#3d5afe;
  --fd:"Fredoka","Nunito",system-ui,sans-serif;
  --fb:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side:0px;
}
/* ---- soft pass: rounder shapes, blue accent, gentle depth ---- */
body{font-size:15.5px;font-weight:500}
.btn{border-radius:999px;font-weight:700}
.btn.pink{background:var(--spot);color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px rgba(61,90,254,.7)}
.btn.pink:hover:not([disabled]){background:var(--spot2)}
.btn.ghost{border-color:var(--line2)}
.link{color:var(--spot2);text-decoration:none}
.link:hover{text-decoration:underline}
.brand{font-weight:600;font-size:23px;letter-spacing:0}
.nav{border-right-color:var(--line)}
.nav nav a{border-radius:12px;font-weight:600}
.nav nav a[aria-current="page"]{background:var(--spotsoft);color:var(--spot2)}
.nav nav a[aria-current="page"]::before{display:none}
.feed,.sideFoot{border-top-color:var(--line)}
.chipa{border-radius:12px;font-weight:600}
.chipa img,.chipa .dot{border-radius:50%}
.hero h1,.ph1 h1,.ag h1{font-weight:600;letter-spacing:-.015em;line-height:1.02}
.sh h2,.prose h2,.box h3,.fs h2,.roomcast h3,.sheet h2,.empty b,.steps4 b{font-weight:600;letter-spacing:-.005em}
.pc{border-radius:22px}
.pc .nm{font-weight:600;letter-spacing:0}
.pc .tag{border-radius:999px;padding:4px 10px}
.pc .ph .ini{font-weight:600}
.pc.ghost{outline-color:var(--line2)}
.wall,.roster{gap:16px}
.steps4{border-top:0;gap:14px}
.steps4 li,.steps4 li+li{padding:20px;border:0;border-radius:20px;background:var(--wash)}
.steps4 li::before{border-radius:50%;background:var(--spot);color:#fff;font-weight:700}
.pill{border-radius:999px;border-color:var(--line)}
.pill.onair{background:var(--spot);border-color:var(--spot);color:#fff}
.stats{border:0;padding:0;gap:10px}
.stats>div,.stats>div:first-child,.stats>div+div{padding:12px 16px;border:0;border-radius:16px;background:var(--wash)}
.stats dd{font-weight:600;letter-spacing:0}
.thumb{border-radius:12px}
.thumb[aria-pressed="true"]{border-color:var(--spot)}
.tabs{border-radius:999px;padding:4px}
.tabs button{border-radius:999px}
.tabs button[aria-selected="true"]{color:var(--spot2)}
.chat{border-radius:22px;border-color:var(--line)}
.msg .av{border-radius:50%}
.msg .bub{border-radius:6px 18px 18px 18px}
.msg.me .bub{background:var(--spot);border-radius:18px 6px 18px 18px}
.sugg button{border-radius:999px}
.compose{background:#fff}
.compose input{border-radius:999px;padding:0 18px;background:var(--wash);border-color:transparent}
.compose input:focus{border-color:var(--spot);background:#fff}
.box{border-radius:20px}
.xid{border-radius:14px}
.lookgrid .im,.vids div{border-radius:18px}
.fs:first-child{border-top:1px solid var(--line)}
.fs h2 i{border-radius:50%;background:var(--spot);color:#fff;font-weight:700}
.f input:not([type=range]),.f select,.f textarea{border-radius:14px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--spot);box-shadow:0 0 0 4px var(--spotsoft)}
.f input[type=range]{accent-color:var(--spot)}
.seg{border-radius:999px}
.seg button{border-radius:999px}
.seg button[aria-pressed="true"]{color:var(--spot2)}
.sw button{border-radius:50%}
.drop{border-radius:18px}
.drop:hover,.drop.over{border-color:var(--spot)}
.drop .th{border-radius:14px}
.models{border-radius:16px}
.mo[aria-checked="true"] i{border-color:var(--spot)}
.disclose{border-radius:16px}
.sheet{border-radius:24px}
.prog li i{border-radius:50%}
.prog li.run i{border-color:var(--spot);border-top-color:transparent}
.prog li.done i{background:var(--spot);border-color:var(--spot)}
.prog li.done i::after{border-color:#fff}
.roomcast{border-radius:22px}
.cast a{border-radius:14px}
.cast .pf,.cast .pf img,.cast .pf span{border-radius:50%}
.cast a.talking{background:var(--spotsoft)}
.toc{border-left:0;padding-left:0}
.toc a{border-radius:10px}
.toc a.on{color:var(--spot2)}
.prose code{border-radius:6px}
.prose pre,.prose .tbl{border-radius:16px}
.note{border-left:0;border-radius:16px}
.empty{border-radius:22px}
.toast{border-radius:999px}

/* ---- floating top bar (replaces the sidebar) ---- */
:root{--side:0px}
.nav{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:min(1140px,calc(100% - 28px));height:62px;flex-direction:row;align-items:center;gap:6px;padding:0 9px 0 18px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.84);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);box-shadow:0 12px 32px -20px rgba(29,36,51,.4)}
.brand{padding:0;font-size:21px}
.brand svg{width:24px;height:24px;color:#000}
.nav nav{display:flex;gap:2px;margin:0 auto}
.nav nav a{padding:8px 15px;border-radius:999px}
.nav .btn.sm{height:40px;padding:0 16px}
.sideCta{width:auto}
main{margin:0 auto;padding:100px 28px 56px;max-width:1196px}
.feed{display:flex;align-items:center;gap:14px;margin-top:18px;padding:10px 12px 10px 18px;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:999px;background:var(--wash);flex:none;min-height:0}
.feed h2{margin:0;white-space:nowrap;font-family:var(--fd);font-weight:600;font-size:14px;color:var(--ink)}
.feed .row{display:flex;gap:8px;overflow-x:auto;flex:1}
.feed .chipa{display:inline-flex;grid-template-columns:none;gap:8px;padding:4px 12px 4px 4px;background:#fff;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.feed .chipa:hover{border-color:var(--spot)}
.feed .chipa img,.feed .chipa .dot{width:26px;height:26px}
.stage,.preview,.roomcast{top:96px}
.toc{top:100px}
.prose section{scroll-margin-top:100px}
.toast{left:50%}
@media (max-width:900px){
  .nav{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));height:56px;width:calc(100% - 20px);padding:0 8px 0 14px;border-bottom:1px solid var(--line)}
  .nav nav{margin:0 0 0 auto}
  .nav nav a{padding:7px 11px;font-size:14px}
  .nav .wallet{display:none}
  .sideCta{display:none}
  main{padding:84px 16px 48px}
  .stage,.preview,.roomcast{top:auto}
}
@media (max-width:640px){
  .brand span{display:none}
  .nav nav a[data-nav="launch"]{display:inline-block}
  .feed{border-radius:18px;flex-direction:column;align-items:stretch;gap:8px;padding:12px}
}
@media (max-width:900px){.feed{display:flex}}
.feed{flex-direction:row}
.feed .row{display:flex;flex-direction:row}
.feed .chipa{flex:none}
@media (max-width:640px){.feed{flex-direction:column}}

/* platform token chip */
.pca{justify-self:start;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;width:fit-content;max-width:100%;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 6px 18px -14px rgba(29,36,51,.35)}
.pca-l{font-family:var(--fd);font-weight:600;color:var(--spot2)}
.pca code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ink2)}
.pca-b{height:30px;padding:0 12px;border-radius:999px;border:0;background:var(--spotsoft);color:var(--spot2);font-weight:700;font-size:13px;display:inline-flex;align-items:center;cursor:pointer;transition:background .15s}
.pca-b:hover{background:#dfe6ff}
.fca{flex-basis:100%;order:-1;color:var(--ink2)}
.fca code{font-family:ui-monospace,Menlo,monospace;font-size:12px;overflow-wrap:anywhere}
.vids.vreal div{background:#000}
.vids.vreal video{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.pca{gap:6px;padding:5px 5px 5px 12px}.pca code{display:none}}