/* =========================================================
   apps.css — the insides of every app
   ========================================================= */

.app-body.noscroll{overflow:hidden; display:flex; flex-direction:column; padding-bottom:0}
.app-body.flexcol{display:flex; flex-direction:column; padding-bottom:0}
.app-view.edge .app-body{overflow:hidden; display:flex; flex-direction:column}

/* ---------- shared bits ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 16px; border-radius:16px;
  background:var(--card); color:var(--tx);
  font-size:15px; font-weight:650; letter-spacing:.01em;
  border:1px solid var(--line); text-decoration:none;
  transition:transform .12s ease, filter .12s ease;
}
.btn svg{width:18px; height:18px}
.btn:active{transform:scale(.975)}
.btn.primary{background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206; border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{width:auto; padding:9px 14px; font-size:13px; border-radius:12px}
.mini{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--card2); border:1px solid var(--line); color:var(--tx2); flex:0 0 auto;
}
.mini svg{width:16px; height:16px}
.fineprint{
  margin:18px 18px 8px; font-size:11.5px; line-height:1.55;
  color:var(--tx2); opacity:.85;
}

.ca-card{
  display:block; width:calc(100% - 36px); margin:0 18px 18px;
  padding:14px 15px; border-radius:18px; text-align:left;
  background:var(--card); border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.ca-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(227,180,137,.14) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
body.no-motion .ca-card::after{display:none}
.ca-label{
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); font-weight:700;
}
.ca-label svg{width:12px; height:12px}
.ca-card code{
  display:block; margin:8px 0 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.5; word-break:break-all; color:var(--tx);
}
.ca-hint{font-size:11px; color:var(--tx2)}
.ca-card:active{transform:scale(.99)}

/* ---------- chart ---------- */
.chart-bar{
  display:flex; align-items:center; gap:11px; padding:12px 16px;
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.chart-bar img{width:38px; height:38px; border-radius:50%; object-fit:cover}
.chart-bar div{flex:1; min-width:0}
.chart-bar b{display:block; font-size:15px}
.chart-bar span{display:block; font-size:11.5px; color:var(--tx2); font-family:ui-monospace,Menlo,monospace}
.chart-wrap{position:relative; flex:1; min-height:0; background:#0b0b0d}
.chart-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; background:#0b0b0d}
/* keeps the pointer inside our document so the paw doesn't go blind
   the moment it crosses onto the dexscreener embed */
.chart-catch{position:absolute; inset:0; z-index:4}
.chart-wrap.live .chart-catch,
body.no-paw .chart-catch{pointer-events:none}

.chart-live{
  position:absolute; z-index:5; right:10px; bottom:10px;
  padding:7px 12px; border-radius:999px;
  font-size:11px; letter-spacing:.04em;
  color:#f1e6d7; background:rgba(18,16,14,.82);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.chart-live .off-label,
.chart-wrap.live .chart-live .on-label{display:none}
.chart-wrap.live .chart-live .off-label{display:inline}
.chart-wrap.live .chart-live{background:rgba(227,180,137,.9); color:#1a1206; border-color:transparent}
body.no-paw .chart-live{display:none}

.chart-fallback{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:24px; text-align:center; color:var(--tx2); font-size:13px;
  background:#0b0b0d;
  transition:opacity .45s ease;
}
.chart-fallback.gone{opacity:0; pointer-events:none}
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid rgba(227,180,137,.22);
  border-top-color:var(--acc);
  animation:spin .9s linear infinite;
}

/* ---------- buy ---------- */
.buy-hero{text-align:center; padding:22px 18px 18px}
.buy-hero img{
  width:88px; height:88px; border-radius:50%; margin:0 auto 12px; object-fit:cover;
  box-shadow:0 0 0 3px var(--acc), 0 12px 30px rgba(0,0,0,.45);
}
.buy-hero h2{margin:0; font-size:26px; letter-spacing:-.02em}
.buy-hero p{margin:5px 0 0; color:var(--tx2); font-size:13.5px}
.btn-col{display:flex; flex-direction:column; gap:9px; padding:0 18px}
.soc-row{display:flex; gap:9px; padding:14px 18px 4px}
.soc{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border-radius:16px; background:var(--card); border:1px solid var(--line);
  font-size:12px; color:var(--tx2);
}
.soc svg{width:20px; height:20px; color:var(--tx)}
.steps{margin:16px 18px 0; padding-left:20px; color:var(--tx2); font-size:13.5px; line-height:2}
.steps li::marker{color:var(--acc); font-weight:700}

/* ---------- messages ---------- */
.chat-row{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left;
  padding:11px 16px; border-bottom:1px solid var(--line);
}
.av{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:22px; color:#fff;
  background-size:cover; background-position:center;
}
.cr-t{flex:1; min-width:0}
.cr-t b{display:flex; align-items:center; gap:7px; font-size:15px; margin-bottom:2px}
.cr-t .dot{width:8px; height:8px; border-radius:50%; background:var(--acc)}
.cr-t span{display:block; font-size:13px; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.bubbles{flex:1; min-height:0; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:7px}
.bub{
  max-width:76%; align-self:flex-start;
  padding:9px 13px; border-radius:19px 19px 19px 5px;
  background:var(--card2); font-size:14.5px; line-height:1.35;
  animation:bubIn .32s cubic-bezier(.2,.9,.3,1) backwards;
  animation-delay:calc(var(--d,0) * 55ms);
  word-wrap:break-word;
}
.bub.me{
  align-self:flex-end; border-radius:19px 19px 5px 19px;
  background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206; font-weight:500;
}
.bub .who{display:block; font-size:10.5px; color:var(--acc); font-style:normal; margin-bottom:2px}
@keyframes bubIn{from{opacity:0; transform:translateY(10px) scale(.96)}}
body.no-motion .bub{animation:none}

.composer{
  flex:0 0 auto; display:flex; gap:8px; align-items:center;
  padding:10px 12px 30px; border-top:1px solid var(--line); background:var(--bg2);
}
.composer input{
  flex:1; min-width:0; padding:10px 15px; border-radius:20px;
  background:var(--card2); border:1px solid var(--line); color:var(--tx);
  font-size:14.5px; outline:none;
}
.composer input::placeholder{color:var(--tx2)}
.composer button{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206;
}
.composer button svg{width:17px; height:17px}

/* ---------- X ---------- */
.x-app .app-head{background:var(--bg)}
.x-tabs{
  display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2;
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px);
}
.x-tabs b,.x-tabs span{flex:1; text-align:center; padding:13px 0; font-size:14px}
.x-tabs b{position:relative}
.x-tabs b::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:52px; height:3px; border-radius:2px; background:var(--acc);
}
.x-tabs span{color:var(--tx2)}
.post{display:flex; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line)}
.post .av{width:40px; height:40px; font-size:16px; font-weight:700}
.pb{flex:1; min-width:0}
.ph{display:flex; align-items:center; gap:5px; font-size:14px; flex-wrap:wrap}
.ph b{font-weight:700}
.ph span{color:var(--tx2); font-size:13px}
.ver{display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#1d9bf0}
.ver svg{width:10px; height:10px; fill:#fff}
.pb p{margin:3px 0 9px; font-size:14.5px; line-height:1.42; white-space:pre-line}
.pa{display:flex; gap:26px}
.pa button{display:flex; align-items:center; gap:6px; color:var(--tx2); font-size:12.5px}
.pa svg{width:16px; height:16px}
.pa .like.on{color:#f4245e}
.pa .rt.on{color:#00ba7c}
.pa .like.on svg{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.x-end{padding:26px 20px 40px; text-align:center; color:var(--tx2); font-size:12.5px}
.tag-mine{
  font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acc); border:1px solid currentColor; border-radius:5px; padding:1px 5px;
}

/* ---------- post as @dogwifone ---------- */
.fab{
  position:absolute; z-index:8; right:16px; bottom:40px;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206;
  font-size:30px; font-weight:300; line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:transform .16s cubic-bezier(.3,1.4,.5,1);
}
.fab span{margin-top:-3px}
.fab:active{transform:scale(.9)}

.sheet{
  position:absolute; z-index:9; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column;
  transform:translateY(101%);
  transition:transform .34s cubic-bezier(.2,.86,.24,1);
  border-radius:26px 26px 0 0;
  box-shadow:0 -18px 40px rgba(0,0,0,.5);
}
.sheet.up{transform:none}
.sheet-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:56px 16px 12px; border-bottom:1px solid var(--line);
}
.sheet-head b{font-size:15px}
.sh-x{color:var(--tx2); font-size:14px; width:52px; text-align:left}
.sh-go{
  color:#1a1206; font-size:14px; font-weight:700;
  background:linear-gradient(160deg,var(--acc),var(--acc2));
  padding:7px 15px; border-radius:999px;
}
.sh-go:disabled{opacity:.35}
.sheet-body{flex:1; min-height:0; overflow-y:auto; padding:14px 0 30px}

.cmp{display:flex; gap:11px; padding:0 16px}
.cmp img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.cmp textarea{
  flex:1; min-width:0; border:0; outline:none; resize:none;
  background:transparent; color:var(--tx);
  font:inherit; font-size:17px; line-height:1.4; padding-top:8px;
}
.cmp textarea::placeholder{color:var(--tx2)}
.cmp-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 0; margin-top:8px; border-top:1px solid var(--line);
  font-size:12px; color:var(--tx2);
}
.cmp-foot em{font-style:normal}
.cmp-foot em b{color:var(--acc)}

.pay-amt{text-align:center; padding:14px 16px 18px}
.pay-amt b{display:block; font-size:32px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pay-amt span{display:block; font-size:13px; color:var(--tx2); margin-top:3px}
.pay-row{
  display:block; width:calc(100% - 32px); margin:0 16px 10px; text-align:left;
  padding:11px 13px; border-radius:15px;
  background:var(--card); border:1px solid var(--line);
}
.pay-row em{
  display:block; font-style:normal; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); font-weight:700;
}
.pay-row code{
  display:block; margin:6px 0 5px; word-break:break-all;
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; line-height:1.5;
}
.pay-row code.memo{font-family:inherit; font-size:14px; word-break:break-word}
.pay-row i{display:flex; align-items:center; gap:5px; font-style:normal; font-size:10.5px; color:var(--tx2)}
.pay-row i svg{width:11px; height:11px}
.pay-row:active{transform:scale(.99)}

/* ---------- notes ---------- */
.note-row{
  display:block; width:100%; text-align:left; padding:13px 18px;
  border-bottom:1px solid var(--line);
}
.note-row b{display:block; font-size:15px; margin-bottom:2px}
.note-row span{display:block; font-size:12.5px; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-body{padding:16px 4px}
.note-body pre{
  margin:0; padding:0 18px; white-space:pre-wrap; word-break:break-word;
  font-family:inherit; font-size:14.5px; line-height:1.62; color:var(--tx);
}

/* ---------- camera ---------- */
.cam{height:100%; display:flex; flex-direction:column; background:#000}
.cam-view{position:relative; flex:1; min-height:0; overflow:hidden; background:#111}
.cam-view video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.cam-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:34px; text-align:center; color:#cfc7bd;
  background:radial-gradient(80% 60% at 50% 40%,#2a2622,#0e0d0c);
}
.cam-fallback img{width:96px; height:96px; border-radius:50%; object-fit:cover; opacity:.55; margin-bottom:6px}
.cam-fallback p{margin:0; font-size:19px; color:#fff}
.cam-fallback small{font-size:12px; line-height:1.5; opacity:.65; max-width:230px}
.cam-face{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  width:76%; pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.cam-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.cam-flash.go{animation:flash .35s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.cam-cap{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  color:#fff; font-size:17px; font-weight:700; letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.7); pointer-events:none;
}
.cam-bar{
  flex:0 0 auto; height:132px; display:flex; align-items:center; justify-content:space-around;
  background:#000; padding-bottom:20px;
}
.cam-thumb{width:44px; height:44px; border-radius:9px; background-size:cover; background-position:center; border:1px solid #333}
.shutter{width:70px; height:70px; border-radius:50%; border:4px solid #fff; display:grid; place-items:center}
.shutter i{width:56px; height:56px; border-radius:50%; background:#fff; transition:transform .1s}
.shutter:active i{transform:scale(.86)}
.cam-mode{
  width:44px; height:44px; border-radius:50%; background:#1c1c1e; color:#e3b489;
  font-size:12px; font-weight:700;
}

/* ---------- photos ---------- */
.ph-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px}
.ph-cell{
  position:relative; aspect-ratio:1; background-size:cover; background-position:center;
  border-radius:2px;
}
.ph-cell .new{
  position:absolute; left:4px; top:4px; font-style:normal; font-size:9px; font-weight:700;
  background:var(--acc); color:#1a1206; padding:2px 5px; border-radius:5px;
}
.ph-one{padding:16px; display:flex; flex-direction:column; gap:14px; align-items:center}
.ph-one img{width:100%; border-radius:16px; box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ph-one .btn{width:auto; padding:11px 22px}

/* ---------- games ---------- */
.game-cv{display:block; background:#0b0d12; touch-action:none}
.g-menu{display:flex; flex-direction:column; gap:12px; padding:16px}
.g-card{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:12px; border-radius:20px;
  background:var(--card); border:1px solid var(--line);
  transition:transform .14s ease;
}
.g-card:active{transform:scale(.985)}
.g-art{
  width:66px; height:66px; border-radius:15px; flex:0 0 auto;
  position:relative; overflow:hidden;
}
.g-flap .g-art{background:linear-gradient(160deg,#1d2430,#0d1016)}
.g-flap .g-art::before,
.g-flap .g-art::after{
  content:""; position:absolute; width:11px; border-radius:3px;
}
.g-flap .g-art::before{left:12px; top:8px;  height:22px; background:#2fbf6b}
.g-flap .g-art::after {right:12px; bottom:8px; height:26px; background:#e64c4c}
.g-hunt .g-art{background:linear-gradient(180deg,#141a2e 40%,#3a2a35 70%,#3b3a3c 71%)}
.g-hunt .g-art::before{
  content:""; position:absolute; left:14px; bottom:14px;
  width:20px; height:13px; border-radius:7px 7px 4px 4px;
  background:var(--acc); box-shadow:22px 2px 0 -1px #6a7a92;
}
.g-hunt .g-art::after{
  content:""; position:absolute; right:15px; bottom:28px;
  width:10px; height:3px; border-radius:2px; background:#f6f2e8;
  box-shadow:0 0 6px 2px rgba(255,120,40,.55);
}
.g-t{flex:1; min-width:0}
.g-t b{display:block; font-size:16px}
.g-t em{display:block; font-style:normal; font-size:12.5px; color:var(--tx2); margin-top:2px}
.g-go{
  flex:0 0 auto; padding:7px 14px; border-radius:999px;
  background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206;
  font-size:13px; font-weight:700;
}

/* ---------- music ---------- */
.mu{
  height:100%; display:flex; flex-direction:column;
  padding:10px 18px 0; text-align:center;
}
.mu-art{
  position:relative; width:150px; height:150px; margin:4px auto 12px;
  border-radius:50%; overflow:hidden; flex:0 0 auto;
  box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 8px rgba(0,0,0,.35);
}
.mu-art img{width:100%; height:100%; object-fit:cover}
.mu-art.spin{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.no-motion .mu-art.spin{animation:none}
.mu-meta{flex:0 0 auto}
.mu-meta b{display:block; font-size:19px}
.mu-meta span{display:block; font-size:13px; color:var(--tx2); margin-top:2px}

.mu-scrub{position:relative; flex:0 0 auto; padding:14px 0 4px; cursor:none}
.mu-scrub i{
  display:block; height:4px; border-radius:2px;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.screen.light .mu-scrub i{background:rgba(0,0,0,.14)}
.mu-scrub b{display:block; height:100%; width:0; border-radius:2px; background:var(--acc)}
.mu-scrub span{
  position:absolute; top:20px; font-size:10.5px; color:var(--tx2);
  font-variant-numeric:tabular-nums;
}
.mu-scrub span:first-of-type{left:0}
.mu-scrub span:last-of-type{right:0}

.mu-ctl{display:flex; align-items:center; justify-content:center; gap:26px; margin:16px 0 4px; flex:0 0 auto}
.mu-ctl button{color:var(--tx)}
.mu-ctl svg{width:26px; height:26px}
.mu-ctl .big{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--acc),var(--acc2)); color:#1a1206;
}
.mu-ctl .big svg{width:24px; height:24px}
.mu-viz{width:100%; height:34px; margin:2px 0 6px; display:block; flex:0 0 auto}

.mu-seg{margin:2px auto 8px; flex:0 0 auto}
.mu-seg button{padding:6px 18px}

.mu-panel{
  /* positioned so lyric lines report offsetTop relative to THIS box —
     otherwise auto-scroll overshoots by the height of the player above */
  position:relative;
  flex:1; min-height:0; overflow-y:auto; text-align:left;
  border-top:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* lyrics */
.mu-panel.ly{padding:10px 0 40%; text-align:center}
.mu-panel.ly p{
  margin:0; padding:7px 6px; font-size:16px; line-height:1.3;
  color:var(--tx2); opacity:.5;
  transition:color .25s ease, opacity .25s ease, transform .25s ease;
}
.mu-panel.ly p.past{opacity:.28}
.mu-panel.ly p.on{
  color:var(--acc); opacity:1; font-weight:700; font-size:18px;
  transform:scale(1.02);
}
.mu-panel.ly p.gap{height:10px; padding:0}
.mu-panel.ly p.next{outline:1px dashed var(--acc); border-radius:8px; opacity:1}

/* the ?sync stamping bar */
.mu-sync{display:flex; gap:6px; align-items:center; margin:0 0 8px; flex:0 0 auto}
.mu-sync button{
  padding:8px 10px; border-radius:10px; font-size:11.5px;
  background:var(--card2); border:1px solid var(--line); color:var(--tx2);
}
.mu-sync .mk{flex:1; background:var(--acc); color:#1a1206; font-weight:700; font-size:13px}
.mu-sync .mk em{font-style:normal; opacity:.65}

.mu-row{display:flex; align-items:center; gap:12px; width:100%; padding:11px 2px; border-bottom:1px solid var(--line)}
.mu-row .n{width:18px; color:var(--tx2); font-size:12.5px; text-align:center}
.mu-row .t{flex:1; min-width:0; text-align:left}
.mu-row .t b{display:block; font-size:14.5px; font-weight:600}
.mu-row .t em{display:block; font-style:normal; font-size:12px; color:var(--tx2)}
.mu-row .l{font-size:12px; color:var(--tx2)}
.mu-row.on .t b,.mu-row.on .n{color:var(--acc)}

/* ---------- roadmap ---------- */
.road-top{padding:6px 18px 4px}
.road-top h2{font-size:23px; line-height:1.15; letter-spacing:-.02em}
.road-top p{margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--tx2)}

.road{
  position:relative; margin:16px 14px 0; padding:14px 16px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
}
/* the spine that threads the phases together */
.road::before{
  content:""; position:absolute; left:26px; top:-16px; height:16px; width:2px;
  background:var(--line);
}
.road:first-of-type::before{display:none}

.road-h{display:flex; align-items:center; gap:11px}
.road-h > div{flex:1; min-width:0}
.road-h em{
  display:block; font-style:normal; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx2);
}
.road-h b{display:block; margin-top:2px; font-size:16.5px; letter-spacing:-.01em}

.road-dot{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  background:var(--card2); box-shadow:0 0 0 2px var(--line) inset;
}
.road.done  .road-dot{background:#4f8b6a; box-shadow:none}
.road.now   .road-dot{background:var(--acc); box-shadow:0 0 0 5px rgba(227,180,137,.16)}
.road.next  .road-dot{background:transparent; box-shadow:0 0 0 2px var(--acc) inset}

.road-pill{
  flex:0 0 auto; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx2); background:var(--card2);
  border:1px solid var(--line); border-radius:999px; padding:4px 9px;
}
.road.done .road-pill{color:#7fc79c}
.road.now  .road-pill{color:var(--acc); border-color:currentColor}
.road.next .road-pill{color:var(--acc); background:rgba(227,180,137,.12); border-color:currentColor}

.road-list{margin:12px 0 0; padding:0; list-style:none}
.road-list li{
  position:relative; padding:5px 0 5px 22px;
  font-size:13.5px; line-height:1.55; color:var(--tx2);
}
.road-list li::before{
  content:"·"; position:absolute; left:8px; top:4px;
  font-size:17px; line-height:1.2; color:var(--tx2); opacity:.6;
}
.road.done .road-list li{opacity:.72}
.road.done .road-list li::before{content:"✓"; font-size:11px; top:6px; color:#7fc79c; opacity:1}
.road.tease .road-list li{color:var(--tx)}

.road-note{
  margin:12px 0 0; padding:11px 13px; border-radius:13px;
  background:var(--card2); border:1px solid var(--line);
  font-size:12px; line-height:1.6; color:var(--tx2);
}

/* the phase people actually came for */
.road.tease{
  border-color:rgba(227,180,137,.4);
  background:linear-gradient(170deg,rgba(227,180,137,.09),transparent 60%),var(--card);
}
.road.tease .road-h b{color:var(--acc)}

.road-cta{
  display:flex; align-items:center; gap:9px; width:100%;
  margin-top:12px; padding:12px 14px; border-radius:14px; text-align:left;
  background:var(--card2); border:1px dashed rgba(227,180,137,.45);
  color:var(--acc); font-size:12.5px; font-weight:600;
}
.road-cta svg{width:15px; height:15px; flex:0 0 auto}
.road-cta:active{transform:scale(.985)}

/* ---------- posting locked ---------- */
.fab.locked{
  background:var(--card2); color:var(--tx2);
  border:1px dashed rgba(227,180,137,.5); box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.fab.locked svg{width:21px; height:21px}

.lockd{padding:26px 22px 4px; text-align:center}
.lockd i{
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px;
  border-radius:50%; background:var(--card2); border:1px dashed rgba(227,180,137,.5);
  color:var(--acc);
}
.lockd i svg{width:24px; height:24px}
.lockd h3{font-size:21px; letter-spacing:-.02em}
.lockd p{margin-top:11px; font-size:13.5px; line-height:1.65; color:var(--tx2)}
.lockd-sig{
  margin-top:16px !important; color:var(--acc) !important;
  font-size:12px !important; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}

/* ---------- settings ---------- */
.set-group{margin:16px 14px 0; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.set-h{
  padding:11px 16px 6px; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx2); font-weight:700;
}
.set-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-top:1px solid var(--line); font-size:14.5px;
}
.set-row.col{flex-direction:column; align-items:flex-start; gap:10px}
.set-row em{font-style:normal; color:var(--tx2); font-size:13.5px}
.set-row > span{flex:0 0 auto}

.seg{display:flex; background:var(--card2); border-radius:10px; padding:2px; border:1px solid var(--line)}
.seg button{padding:6px 14px; border-radius:8px; font-size:13px; color:var(--tx2)}
.seg button.on{background:var(--acc); color:#1a1206; font-weight:650}

.walls{display:flex; gap:10px; width:100%}
.wall-sw{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px}
.wall-sw i{
  display:block; width:100%; aspect-ratio:9/16; border-radius:10px;
  border:2px solid transparent; background-size:cover; background-position:center;
  box-shadow:0 0 0 1px var(--line);
}
.wall-sw em{font-style:normal; font-size:10.5px; color:var(--tx2)}
.wall-sw.on i{border-color:var(--acc)}
.wall-sw.on em{color:var(--acc)}
.sw-black{background-image:linear-gradient(160deg,#141414,#000)}
.sw-dog{background-image:url("../PFP.jpg")}
.sw-banner{background-image:url("../Banner.jpg"); background-position:60% center}
.sw-noir{background-image:radial-gradient(120% 80% at 50% 12%,#3a332c,#0c0b0a 70%)}
.sw-tan{background-image:radial-gradient(110% 70% at 50% 8%,#e3b489,#7b573a 55%,#241a12 100%)}

input.sw{
  appearance:none; -webkit-appearance:none;
  width:48px; height:29px; border-radius:15px; background:var(--card2);
  border:1px solid var(--line); position:relative; transition:background .2s; flex:0 0 auto;
}
input.sw::after{
  content:""; position:absolute; left:2px; top:2px; width:23px; height:23px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.3,1.4,.5,1);
}
input.sw:checked{background:var(--acc); border-color:transparent}
input.sw:checked::after{transform:translateX(19px)}

.ca-mini{
  display:block; width:100%; padding:10px 12px; border-radius:12px;
  background:var(--card2); border:1px solid var(--line);
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; line-height:1.5;
  word-break:break-all; color:var(--acc);
}