/* ==========================================================================
   Homies — friend.tech-faithful light UI. White, iOS system stack, Robinhood green.
   Palette: bg #FFF · surface #F4F6F8 · accent(green) #068C3D · ink #0F1419
   · gray #6E767D · up #17BF63 · down #FF3B30 · hairline #E5E7EB. Light-only.
   NOTE: the accent var is still named --blue (green value) to keep churn low.
   ========================================================================== */
:root{
  --bg:#ffffff; --sur:#f4f6f8; --sur2:#eceff2;
  --blue:#068c3d; --blue-d:#05702f; --blue-t:rgba(6,140,61,.1);
  --ink:#0f1419; --ink2:#6e767d; --ink3:#69727a;
  --up:#17bf63; --down:#ff3b30; --hair:#e5e7eb; --neon:#39ff14;
  --f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --appw:480px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:radial-gradient(140% 110% at 50% -12%, #e3ff55 0%, #ccff00 46%, #b3e600 100%) fixed;
  color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.4;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
b{font-weight:600}
.num{font-variant-numeric:tabular-nums}
.c-up{color:var(--up)}.c-down{color:var(--down)}.c-blue{color:var(--blue)}

.app{position:relative;z-index:1;width:100%;max-width:var(--appw);margin:0 auto;min-height:100dvh;
  background:var(--bg);display:flex;flex-direction:column;box-shadow:0 0 60px rgba(15,20,25,.28)}
.views{flex:1;padding-bottom:96px}
.view{padding:0 16px}

/* ---------- side rails (desktop decoration on the neon field) ---------- */
.rail{position:fixed;top:0;bottom:0;z-index:0;width:calc((100vw - var(--appw)) / 2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px;pointer-events:none;user-select:none}
.rail-l{left:0}
.rail-r{right:0}
.rail img{max-width:min(380px,74%);height:auto}
.rail-l img{filter:drop-shadow(0 16px 32px rgba(15,20,25,.28))}
.rail-r img{max-width:min(250px,54%)}
.rail-word{font-weight:900;font-size:clamp(22px,2.8vw,44px);letter-spacing:.06em;
  color:var(--ink);white-space:nowrap}
.rail-word span{color:var(--blue)}
.rail-tag{font-size:clamp(11px,1vw,14px);font-weight:600;letter-spacing:.02em;
  color:rgba(15,20,25,.55);margin-top:-10px;white-space:nowrap}
.rail-how{pointer-events:auto;background:var(--ink);color:#ccff00;font-size:14px;font-weight:800;
  padding:11px 22px;border-radius:99px;box-shadow:0 10px 26px rgba(15,20,25,.28);
  transition:transform .12s,box-shadow .12s}
.rail-how:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,20,25,.34)}
@media (max-width:1040px){.rail{display:none}}
.strip-how{flex:none;font-size:11px;font-weight:700;color:var(--ink);background:var(--sur2);
  padding:3px 10px;border-radius:99px}
.strip-how:hover{background:var(--hair)}

/* ---------- avatars ---------- */
img.ava{border-radius:50%;object-fit:cover;background:var(--sur);display:block;flex:none}
.ava.a44{width:44px;height:44px}
.ava.a40{width:40px;height:40px}
.ava.a36{width:36px;height:36px}
.ava.a28{width:28px;height:28px}
.ava.a68{width:68px;height:68px}
.check{width:15px;height:15px;flex:none;vertical-align:-2px}
.tag33{flex:none;font-size:10.5px;font-weight:700;color:var(--blue);background:var(--blue-t);
  padding:1px 6px;border-radius:6px;letter-spacing:.02em}

/* ---------- top strip ---------- */
.demo-strip{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 12px;
  font-size:11.5px;font-weight:500;color:var(--ink2);background:var(--sur);border-bottom:1px solid var(--hair)}
.demo-strip .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.strip-btn{flex:none;font-size:11px;font-weight:700;color:#fff;background:var(--blue);
  padding:3px 11px;border-radius:99px;margin-left:4px}
.strip-btn:hover{background:var(--blue-d)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 16px;height:54px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair)}
.hdr-t{font-size:20px;font-weight:700;letter-spacing:-.02em;justify-self:center}
.me-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden}
.bal-pill{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  background:var(--sur);padding:7px 12px;border-radius:99px;justify-self:end}
.bal-pill .u{color:var(--blue);font-size:11.5px;font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;
  font-size:15.5px;padding:13px 20px;border-radius:12px;transition:opacity .15s,transform .1s,background .15s}
.btn:active{transform:scale(.98)}
.btn.pri{color:#fff;background:var(--blue)}
.btn.pri:hover{background:var(--blue-d)}
.btn.pri:disabled{opacity:.4;cursor:not-allowed}
.btn.gray{color:var(--ink);background:var(--sur)}
.btn.gray:hover{background:var(--sur2)}
.btn.gray:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:#fff;background:var(--down)}
.btn.big{width:100%;padding:15px;font-size:16px}
.btn.dark{color:#fff;background:#0f1419}

/* ---------- list rows ---------- */
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 0;
  border-bottom:1px solid var(--hair);transition:background .1s}
.row:last-child{border-bottom:none}
.row:active{background:var(--sur)}
.rmain{flex:1;min-width:0}
.rname{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsub{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rside{flex:none;text-align:right}
.rprice{display:block;font-size:15px;font-weight:600;color:var(--blue)}
.rdelta{font-size:12px;font-weight:500}
.sec-t{font-size:13px;font-weight:700;color:var(--ink2);margin:20px 0 4px;letter-spacing:.02em}
.empty{padding:40px 20px;text-align:center;font-size:14px;color:var(--ink2);line-height:1.7}

/* ---------- feed ---------- */
.frow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--hair)}
.fmain{flex:1;min-width:0}
.ftext{display:block;font-size:14.5px;color:var(--ink2);line-height:1.35}
.ftext b{color:var(--ink);font-weight:600}
.ftime{font-size:12px;color:var(--ink3)}
.fprice{flex:none;font-size:14px;font-weight:600}

/* ---------- explore ---------- */
.search{display:flex;align-items:center;gap:9px;background:var(--sur);border-radius:11px;
  padding:11px 13px;color:var(--ink2);margin-top:12px}
.search svg{width:16px;height:16px;flex:none}
.search input{flex:1;background:none;border:none;outline:none;font-size:15px;color:var(--ink)}
.search input::placeholder{color:var(--ink3)}
.chips{display:flex;gap:7px;margin:12px 0 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--sur);
  padding:8px 15px;border-radius:99px;transition:all .12s}
.chip.active{color:#fff;background:var(--blue)}

/* ---------- cred (points) ---------- */
.cred-hero{text-align:center;padding:26px 0 8px}
.cred-hero .big{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.cred-hero .lbl{font-size:14px;color:var(--ink2);margin-top:4px}
.cred-hero .drop{font-size:13px;color:var(--ink2);margin-top:10px}
.cred-hero .drop b{color:var(--ink)}
.tier{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;
  color:var(--blue);background:var(--blue-t);padding:6px 14px;border-radius:99px}
.mult{font-size:11px;font-weight:700;color:#fff;background:var(--up);padding:2px 7px;border-radius:6px}
.bars{display:flex;align-items:flex-end;gap:8px;height:74px;margin:18px 6px 4px}
.bars>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bars .bar{width:100%;max-width:38px;background:var(--blue-t);border-radius:6px 6px 2px 2px;min-height:4px}
.bars .bar.cur{background:var(--blue)}
.bars .wk{font-size:10.5px;color:var(--ink3)}
.board-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px}
.board-row.me{background:var(--blue-t)}
.board-row .rank{width:22px;font-size:13px;font-weight:600;color:var(--ink3);text-align:center;flex:none}
.board-row .bname{flex:1;min-width:0;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-row .bpts{font-size:14px;font-weight:600;color:var(--blue)}
.invite-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair)}
.invite-row:last-child{border-bottom:none}
.invite-row code{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:14px;color:var(--ink)}
.invite-row .copy{font-size:12.5px;font-weight:600;color:var(--blue);padding:6px 12px;background:var(--blue-t);border-radius:8px}

/* ---------- you (portfolio) ---------- */
.you-card{display:flex;align-items:center;gap:13px;padding:18px 0 6px}
.you-id{flex:1;min-width:0}
.you-name{display:flex;align-items:center;gap:5px;font-size:19px;font-weight:700}
.you-handle{font-size:13.5px;color:var(--ink2)}
.you-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.you-stats>div{background:var(--sur);border-radius:12px;padding:11px 12px}
.you-stats b{display:block;font-size:16px;font-weight:700}
.you-stats span{font-size:11px;color:var(--ink2)}
.wallet-row{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--sur);
  border-radius:12px;padding:13px 14px;font-size:13.5px}
.wallet-row .addr{flex:1;font-family:ui-monospace,Consolas,monospace;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet-row .net{font-size:11px;font-weight:600;color:var(--blue)}
.link-row{width:100%;text-align:left;padding:13px 2px;font-size:15px;font-weight:500;
  border-bottom:1px solid var(--hair);color:var(--ink)}
.link-row.out{color:var(--down)}
.pl{font-size:12px;font-weight:600}

/* ---------- profile ---------- */
.pnav{display:flex;align-items:center;justify-content:space-between;padding:10px 0 2px}
.backbtn{display:flex;align-items:center;gap:2px;font-size:16px;font-weight:500;color:var(--blue);
  padding:6px 10px 6px 0}
.iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink2)}
.iconbtn:active{background:var(--sur)}
.iconbtn svg{width:22px;height:22px}
.iconbtn.on{color:var(--blue)}
.prof-head{display:flex;align-items:center;gap:13px;padding:6px 0 2px}
.prof-id{flex:1;min-width:0}
.prof-name{display:flex;align-items:center;gap:6px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.prof-sub{font-size:13.5px;color:var(--ink2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-price{padding:14px 0 4px}
.prof-price .lbl{font-size:12.5px;color:var(--ink2)}
.prof-price .val{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.prof-price .val .u{font-size:15px;font-weight:600;color:var(--blue)}
.prof-price .dlt{font-size:13.5px;font-weight:600;margin-top:2px}
.chart-wrap{margin-top:6px}
.chart-wrap svg{display:block;width:100%;height:150px}
.ranges{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}
.ranges button{font-size:12px;font-weight:600;color:var(--ink3);padding:5px 10px;border-radius:8px}
.ranges button.active{color:var(--blue);background:var(--blue-t)}
.prof-stats{display:flex;gap:18px;padding:12px 0;border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);margin-top:12px}
.prof-stats>div{font-size:13px;color:var(--ink2)}
.prof-stats b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.prof-stats b.c-up{color:var(--up)}
.chat-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--sur);
  border-radius:12px;padding:13px 14px;margin-top:14px;font-size:14.5px;font-weight:600}
.chat-row svg{width:20px;height:20px;color:var(--blue);flex:none}
.chat-row .sub{display:block;font-size:12px;color:var(--ink2);font-weight:400}
.chat-row .lock{margin-left:auto;color:var(--ink3);font-size:12.5px;font-weight:500}
.seg{display:flex;border-bottom:1px solid var(--hair);margin-top:16px}
.seg button{flex:1;padding:11px 0;font-size:14.5px;font-weight:600;color:var(--ink2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.seg button.active{color:var(--ink);border-color:var(--blue)}
.btn33{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-top:14px;
  border:1px solid var(--hair);border-radius:12px;padding:12px 14px;font-size:14px}
.btn33 b{color:var(--blue)}
.btn33 .st{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink2)}
.prof-spacer{height:72px}

/* ---------- tab bar / action bar ---------- */
.tabbar,.actionbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:45;
  width:100%;max-width:var(--appw);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom)}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;
  font-size:10px;font-weight:600;color:var(--ink3);transition:color .12s}
.tab svg{width:24px;height:24px}
.tab.active{color:var(--blue)}
.tab .dot{position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;
  background:var(--blue);border:2px solid #fff}
.actionbar{display:grid;grid-template-columns:1.7fr 1fr;gap:10px;padding:10px 16px;
  bottom:calc(51px + env(safe-area-inset-bottom))}

/* ---------- trade sheet ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(15,20,25,.4);
  display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:var(--appw);background:var(--bg);border-radius:18px 18px 0 0;
  padding:8px 20px calc(24px + env(safe-area-inset-bottom));animation:sheetup .28s cubic-bezier(.2,1,.4,1)}
@keyframes sheetup{from{transform:translateY(50px);opacity:0}to{transform:none;opacity:1}}
.grip{width:36px;height:5px;border-radius:99px;background:var(--sur2);margin:6px auto 16px}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sheet-title{font-size:18px;font-weight:700}
.sheet-sub{font-size:13px;color:var(--ink2)}
.srows{border-top:1px solid var(--hair);margin-bottom:6px}
.srow{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;
  border-bottom:1px solid var(--hair);font-size:14.5px;color:var(--ink2)}
.srow b{font-size:14.5px;font-weight:600;color:var(--ink)}
.srow.total b{font-size:16px}
.sheet-note{font-size:12.5px;color:var(--ink2);margin:10px 0 14px;line-height:1.5}
.spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- chats ---------- */
.crow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 0;
  border-bottom:1px solid var(--hair)}
.crow .cmeta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.crow .ctime{font-size:12px;color:var(--ink3)}
.crow .cdot{width:10px;height:10px;border-radius:50%;background:var(--blue)}
.crow.locked{opacity:.55}

/* chat room overlay */
.room{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:70;
  width:100%;max-width:var(--appw);background:var(--bg);display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(15,20,25,.1)}
.room-hdr{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--hair);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.room-idx{flex:1;min-width:0}
.room-idx b{display:flex;align-items:center;gap:5px;font-size:16px}
.room-idx span{font-size:12px;color:var(--ink2)}
.room-feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:14px 14px 8px}
.msg{display:flex;gap:8px;align-items:flex-end;margin-top:9px;max-width:86%}
.msg .bub{background:var(--sur);color:var(--ink);padding:9px 13px;border-radius:18px;
  border-bottom-left-radius:6px;font-size:15px;line-height:1.35}
.room-feed .who{font-size:11.5px;color:var(--ink3);margin:9px 0 0 40px}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bub{background:var(--blue);color:#fff;border-radius:18px;border-bottom-right-radius:6px}
.msg.host .bub{border:1.5px solid var(--blue-t);background:#ecf7ef}
.typing .bub{display:flex;gap:4px;padding:13px 15px}
.typing .bub i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:tp 1.2s infinite}
.typing .bub i:nth-child(2){animation-delay:.15s}.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.room-bar{display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair)}
.room-bar input{flex:1;background:var(--sur);border:none;outline:none;color:var(--ink);
  padding:11px 16px;border-radius:99px;font-size:15px}
.sendbtn{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--blue);color:#fff}
.sendbtn:disabled{opacity:.4}
.sendbtn svg{width:18px;height:18px}
/* locked room */
.room-lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:30px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(9px)}
.room-lock .ttl{font-size:17px;font-weight:700}
.room-lock .sub{font-size:13.5px;color:var(--ink2);max-width:260px;line-height:1.5}

/* ---------- onboarding gate ---------- */
.gate{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;background:rgba(15,20,25,.18)}
.gate-card{position:relative;width:100%;max-width:var(--appw);background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;padding:34px 30px;text-align:center}
.gate-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;
  background:var(--sur);color:var(--ink2);font-size:15px;display:grid;place-items:center}
.gate-close:hover{background:var(--sur2)}
.gate-logo{width:76px;height:76px;border-radius:22px;overflow:hidden;background:var(--neon);
  margin-bottom:18px;box-shadow:0 10px 34px rgba(57,255,20,.35)}
.gate-logo img{width:100%;height:100%;object-fit:cover;display:block}
.gate h1{font-size:28px;font-weight:800;letter-spacing:-.03em}
.gate .tag{font-size:15px;color:var(--ink2);margin:6px 0 26px}
.gate-input{width:100%;background:var(--sur);border:1.5px solid transparent;border-radius:12px;
  padding:14px 16px;font-size:16px;outline:none;text-align:center}
.gate-input:focus{border-color:var(--blue)}
.gate .hint{font-size:12.5px;color:var(--ink3);margin-top:10px}
.gate .hint code{font-family:ui-monospace,Consolas,monospace;color:var(--ink2)}
.gate .btn{margin-top:14px;width:100%}
.gate .step{width:100%;max-width:330px}
.gate .foot{font-size:12px;color:var(--ink3);margin-top:22px;line-height:1.5}
.xmark{font-size:20px;font-weight:800}
.gate .free{font-size:13px;font-weight:700;color:var(--up);background:rgba(23,191,99,.1);
  padding:4px 12px;border-radius:99px;display:inline-block;margin:10px 0 2px}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:95;
  width:min(92vw,420px);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:#0f1419;color:#fff;border-radius:13px;
  padding:12px 15px;font-size:13.5px;box-shadow:0 10px 34px rgba(15,20,25,.3);animation:drop .3s ease}
.toast b{color:#fff}
.toast .tava{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:#2a3138}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* ---------- guided tour ---------- */
.tour{position:fixed;inset:0;z-index:85}
.tour-hole{position:absolute;border-radius:14px;opacity:0;
  box-shadow:0 0 0 9999px rgba(15,20,25,.62);pointer-events:none;
  transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),
    width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1)}
.tour-card{position:absolute;width:min(88vw,320px);background:#fff;border-radius:16px;padding:18px;
  box-shadow:0 18px 60px rgba(15,20,25,.4)}
.tour-card h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.tour-card p{font-size:14px;color:var(--ink2);line-height:1.5}
.tour-dots{display:flex;gap:5px;margin:13px 0}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--sur2)}
.tour-dots i.on{background:var(--blue)}
.tour-btns{display:flex;gap:8px;justify-content:flex-end}
.tour-btns .btn{padding:9px 15px;font-size:13.5px}

[hidden]{display:none!important}