/* ============================================================
   LOOP — screens.css
   Phone frame · 5 interactive app screens · design-system showcase
   ============================================================ */

/* ============================================================
   05 · DESIGN SYSTEM SHOWCASE
   ============================================================ */
.ds-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
}
.ds-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:30px 32px; box-shadow:var(--sh-sm);
}
.ds-card.span{grid-column:1 / -1;}
.ds-k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); margin-bottom:10px; font-weight:600;}
.ds-card h4{font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; margin-bottom:22px;}
.ds-card h4 .sub{display:block; font-family:var(--font-mono); font-size:11px; color:var(--slate); font-weight:400; letter-spacing:.04em; margin-top:6px; text-transform:none;}

/* color tokens */
.sw-label{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--slate); margin:0 0 14px;}
.sw-label + .sw-row{margin-bottom:24px;}
.sw-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.sw{}
.sw .chip{height:56px; border-radius:var(--radius-sm); border:1px solid var(--border); margin-bottom:10px;}
.sw .nm{font-size:13px; font-weight:600;}
.sw .hex{font-family:var(--font-mono); font-size:11px; color:var(--slate); margin-top:2px;}

/* typography scale */
.ty-list{display:flex; flex-direction:column;}
.ty-row{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--border-soft);}
.ty-row:last-child{border-bottom:none;}
.ty-d{font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1;}
.ty-h{font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:-.02em;}
.ty-b{font-family:var(--font-body); font-size:16px; color:var(--ink);}
.ty-m{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--ink);}
.ty-spec{font-family:var(--font-mono); font-size:11px; color:var(--slate-soft); white-space:nowrap; flex:none;}

/* spacing + radius */
.scale-row{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;}
.scale-item{display:flex; flex-direction:column; align-items:center; gap:8px;}
.scale-box{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%, var(--border)); border-radius:4px;}
.scale-item .sv{font-family:var(--font-mono); font-size:11px; color:var(--slate);}
.radius-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:6px;}
.radius-item{display:flex; flex-direction:column; align-items:center; gap:9px;}
.radius-box{width:72px; height:54px; background:var(--accent-soft); border:1.5px solid var(--accent);}
.radius-item .rv{font-family:var(--font-mono); font-size:11px; color:var(--slate);}

/* components */
.ds-comp{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 32px;}
.cg{display:flex; flex-direction:column; gap:13px;}
.cg-l{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--slate);}
.cg-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}

/* buttons */
.btn-primary,.btn-secondary,.btn-ghost{
  font-family:var(--font-body); font-weight:700; font-size:14px; border-radius:var(--pill);
  padding:12px 22px; border:1.5px solid transparent; cursor:pointer; transition:.2s var(--ease);
}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%, transparent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:var(--ink); color:#fff;}
.btn-secondary:hover{background:#2a2a2a;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--ink);}

/* input */
.ds-input{
  display:flex; align-items:center; gap:10px; background:var(--bg-soft);
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px;
  font-size:14px; color:var(--slate);
}
.ds-input svg{width:17px; height:17px; color:var(--slate-soft);}

/* points badge */
.pts-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:600;
  font-size:13px; background:var(--accent-soft); color:var(--accent-hover);
  padding:7px 14px; border-radius:var(--pill);
}
.pts-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--accent);}

/* mini expiry alert */
.ds-alert-card{
  background:var(--surface-dark); color:#fff; border-radius:var(--radius-sm); padding:15px 16px;
  display:flex; gap:12px; align-items:flex-start;
}
.ds-alert-card .a-ico{width:30px; height:30px; flex:none; border-radius:9px; background:var(--accent); display:grid; place-items:center;}
.ds-alert-card .a-ico svg{width:16px; height:16px;}
.ds-alert-card .a-t{font-size:13px; font-weight:700; line-height:1.3;}
.ds-alert-card .a-d{font-size:11px; color:#B5B5BA; margin-top:3px;}

/* mini redemption card */
.ds-redeem-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px;
}
.ds-redeem-card .rc-top{display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.ds-redeem-card .rc-logo{width:26px; height:26px; border-radius:7px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:12px;}
.ds-redeem-card .rc-brand{font-size:12px; font-weight:600;}
.ds-redeem-card .rc-t{font-size:13.5px; font-weight:600; margin-bottom:8px; line-height:1.3;}
.ds-redeem-card .rc-foot{display:flex; align-items:center; justify-content:space-between;}
.ds-redeem-card .rc-pts{font-family:var(--font-mono); font-size:11px; color:var(--slate);}
.ds-redeem-card .rc-btn{font-size:11px; font-weight:700; color:#fff; background:var(--accent); padding:6px 13px; border-radius:var(--pill);}

/* brand tile demo */
.ds-tile{
  display:flex; align-items:center; gap:13px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px;
}
.ds-tile .t-logo{width:38px; height:38px; border-radius:10px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; flex:none;}
.ds-tile .t-body{flex:1;}
.ds-tile .t-name{font-size:14px; font-weight:700;}
.ds-tile .t-pts{font-family:var(--font-mono); font-size:11px; color:var(--slate); margin-top:2px;}
.ds-tile .t-val{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--accent);}

/* bottom nav demo */
.ds-nav{
  display:flex; justify-content:space-around; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 6px;
}
.ds-nav .t{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--slate-soft);}
.ds-nav .t svg{width:21px; height:21px;}
.ds-nav .t span{font-size:9.5px; font-weight:600;}
.ds-nav .t.on{color:var(--accent);}

/* icon style note */
.ds-iconrow{display:flex; gap:16px; flex-wrap:wrap;}
.ds-iconchip{width:52px; height:52px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-soft); display:grid; place-items:center; color:var(--ink);}
.ds-iconchip svg{width:24px; height:24px;}
.ds-iconchip.acc{color:var(--accent);}

@media (max-width:820px){
  .ds-grid{grid-template-columns:1fr;}
  .ds-comp{grid-template-columns:1fr;}
  .sw-row{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   06 · INTERACTIVE APP SCREENS
   ============================================================ */
.proto-stage{
  display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:start;
}
.phone-wrap{display:flex; justify-content:center;}

/* phone frame — 375px wide screen interior */
.phone{
  width:399px; flex:none; background:#0A0A0A; border-radius:52px; padding:12px;
  box-shadow:var(--sh-lg); position:relative;
  position:sticky; top:96px;
}
.phone .scr{
  background:var(--bg-soft); border-radius:42px; overflow:hidden; position:relative;
  width:375px; height:780px; display:flex; flex-direction:column;
}
.notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:118px; height:30px; background:#0A0A0A; border-radius:0 0 18px 18px; z-index:30;
}
.status{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 28px 8px; font-size:13px; font-weight:700; color:var(--ink); z-index:5; flex:none;
}
.status.on-dark{color:#fff;}
.status .sig{display:flex; align-items:center; gap:5px;}
.status .sig i{width:16px; height:11px; border-radius:2px; background:currentColor; opacity:.85; display:block;}

/* view stack */
.views{flex:1; position:relative; overflow:hidden;}
.view{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}
.view.on{opacity:1; visibility:visible; transform:none;}
.vbody{flex:1; overflow:hidden; padding:6px 20px 14px;}
.vbody.flush{padding:0;}
.vbody.scroll{overflow-y:auto;}

/* tab bar */
.tabbar{
  display:flex; justify-content:space-around; align-items:center;
  padding:12px 10px 26px; background:var(--bg-card); border-top:1px solid var(--border); flex:none;
}
.tabbar .t{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--slate-soft); cursor:pointer; transition:color .2s var(--ease);}
.tabbar .t svg{width:23px; height:23px;}
.tabbar .t span{font-size:10px; font-weight:600;}
.tabbar .t.on{color:var(--accent);}

/* ---- ONBOARDING (dark) ---- */
.ob{
  height:100%; background:var(--surface-dark); color:#fff;
  display:flex; flex-direction:column; padding:0 30px 38px;
  position:relative; overflow:hidden;
}
.ob::after{
  content:""; position:absolute; top:-120px; right:-120px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle, rgba(199,125,255,.30), transparent 68%);
}
.ob-logo{display:flex; align-items:center; gap:11px; margin-top:78px; position:relative;}
.ob-logo svg{width:40px; height:40px;}
.ob-logo .name{font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-.02em;}
.ob-spacer{flex:1;}
.ob-tagline{
  font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.05;
  letter-spacing:-.03em; margin-bottom:18px; position:relative; text-wrap:balance;
}
.ob-tagline .accent{color:var(--accent-bright);}
.ob-sub{font-size:15px; line-height:1.55; color:#A8A8AE; margin-bottom:30px; position:relative; max-width:30ch;}
.ob-feats{display:flex; flex-direction:column; gap:14px; margin-bottom:34px; position:relative;}
.ob-feat{display:flex; align-items:center; gap:13px; font-size:14px; color:#D8D8DC;}
.ob-feat .of-ico{width:34px; height:34px; flex:none; border-radius:10px; background:rgba(199,125,255,.16); color:var(--accent-bright); display:grid; place-items:center;}
.ob-feat .of-ico svg{width:18px; height:18px;}
.ob-cta{
  width:100%; background:var(--accent); color:#fff; font-family:var(--font-body); font-weight:700;
  font-size:16px; border:none; border-radius:var(--pill); padding:17px; cursor:pointer;
  box-shadow:0 10px 28px rgba(123,5,147,.45); position:relative; transition:background .2s var(--ease);
}
.ob-cta:hover{background:var(--accent-hover);}
.ob-foot{text-align:center; font-size:12px; color:#7A7A80; margin-top:16px; position:relative;}

/* ---- common app bits ---- */
.app-head{display:flex; align-items:center; justify-content:space-between; padding:4px 0 16px;}
.app-greet .g-k{font-family:var(--font-mono); font-size:11px; color:var(--slate); letter-spacing:.06em; text-transform:uppercase;}
.app-greet .g-n{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em; margin-top:3px;}
.app-av{width:42px; height:42px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:16px;}

.sect-h{display:flex; align-items:center; justify-content:space-between; margin:18px 0 12px;}
.sect-h .sh-t{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em;}
.sect-h .sh-more{font-size:12px; font-weight:700; color:var(--accent); cursor:pointer;}

/* total value hero */
.total-card{
  background:var(--surface-dark); color:#fff; border-radius:var(--radius); padding:24px 22px;
  position:relative; overflow:hidden;
}
.total-card::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, rgba(199,125,255,.26), transparent 68%);}
.total-card .tc-k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-bright); position:relative;}
.total-card .tc-v{font-family:var(--font-display); font-weight:800; font-size:48px; letter-spacing:-.03em; line-height:1; margin:10px 0 6px; position:relative;}
.total-card .tc-s{font-size:12.5px; color:#A8A8AE; position:relative;}
.total-card .tc-s b{color:var(--accent-bright); font-weight:600;}

/* brand tiles */
.tiles{display:flex; flex-direction:column; gap:10px;}
.tile{
  display:flex; align-items:center; gap:14px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 15px;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tile:hover{transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:color-mix(in srgb,var(--accent) 30%, var(--border));}
.tile .t-logo{width:42px; height:42px; flex:none; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:17px;}
.tile .t-body{flex:1; min-width:0;}
.tile .t-name{font-size:14.5px; font-weight:700; letter-spacing:-.01em;}
.tile .t-pts{font-family:var(--font-mono); font-size:11px; color:var(--slate); margin-top:3px;}
.tile .t-right{text-align:right; flex:none;}
.tile .t-val{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--accent); letter-spacing:-.01em;}
.tile .t-exp{font-family:var(--font-mono); font-size:9.5px; font-weight:600; color:var(--accent-hover); background:var(--accent-soft); padding:3px 7px; border-radius:var(--pill); margin-top:5px; display:inline-block;}
.tile .t-exp.safe{color:var(--slate); background:var(--border-soft);}
.tile .t-go{color:var(--slate-soft); flex:none;}
.tile .t-go svg{width:18px; height:18px;}

/* expiry banner on home */
.exp-banner{
  display:flex; align-items:center; gap:12px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 24%, var(--border)); border-radius:var(--radius-sm);
  padding:13px 15px; margin-bottom:16px; cursor:pointer;
}
.exp-banner .eb-ico{width:32px; height:32px; flex:none; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center;}
.exp-banner .eb-ico svg{width:17px; height:17px;}
.exp-banner .eb-t{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.exp-banner .eb-d{font-size:11px; color:var(--accent-hover); margin-top:2px; font-weight:600;}
.exp-banner .eb-go{margin-left:auto; color:var(--accent);}
.exp-banner .eb-go svg{width:16px; height:16px;}

/* ---- EXPIRY ALERT (full screen) ---- */
.alert-screen{height:100%; display:flex; flex-direction:column; padding:0 22px 26px; position:relative;}
.alert-top{display:flex; align-items:center; gap:10px; padding:6px 0 4px;}
.alert-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--slate); cursor:pointer;}
.alert-back svg{width:16px; height:16px;}
.alert-body{flex:1; display:flex; flex-direction:column; justify-content:center;}
.alert-icon{
  width:72px; height:72px; border-radius:20px; background:var(--accent); color:#fff;
  display:grid; place-items:center; margin-bottom:24px; box-shadow:0 12px 30px rgba(123,5,147,.32);
}
.alert-icon svg{width:36px; height:36px;}
.alert-h{font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1.1; letter-spacing:-.025em; margin-bottom:14px; text-wrap:balance;}
.alert-h .days{color:var(--accent);}
.alert-sub{font-size:14.5px; line-height:1.55; color:var(--slate); margin-bottom:26px;}
.alert-balance{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px;
  margin-bottom:14px; display:flex; align-items:center; justify-content:space-between;
}
.alert-balance .ab-l .ab-k{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--slate); margin-bottom:6px;}
.alert-balance .ab-l .ab-pts{font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.02em;}
.alert-balance .ab-r{text-align:right;}
.alert-balance .ab-r .ab-val{font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--accent);}
.alert-balance .ab-r .ab-sub{font-family:var(--font-mono); font-size:10px; color:var(--slate); margin-top:4px;}
.alert-rec{
  display:flex; gap:13px; align-items:flex-start; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%, var(--border)); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:24px;
}
.alert-rec .ar-ico{width:32px; height:32px; flex:none; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center;}
.alert-rec .ar-ico svg{width:17px; height:17px;}
.alert-rec .ar-k{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-hover); font-weight:600; margin-bottom:4px;}
.alert-rec .ar-t{font-size:13.5px; font-weight:600; line-height:1.4; color:var(--ink);}
.alert-cta{
  width:100%; background:var(--accent); color:#fff; font-family:var(--font-body); font-weight:700;
  font-size:16px; border:none; border-radius:var(--pill); padding:16px; cursor:pointer;
  box-shadow:0 10px 26px rgba(123,5,147,.32); display:flex; align-items:center; justify-content:center; gap:9px;
  transition:background .2s var(--ease);
}
.alert-cta:hover{background:var(--accent-hover);}

/* ---- REDEMPTION DISCOVERY (feed) ---- */
.disc-head{padding:4px 0 8px;}
.disc-head .dh-t{font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.02em;}
.disc-head .dh-s{font-size:13px; color:var(--slate); margin-top:4px;}
.disc-filter{display:flex; gap:8px; margin:14px 0 16px; overflow-x:auto;}
.disc-filter .df{
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  padding:8px 14px; border-radius:var(--pill); border:1px solid var(--border); background:var(--bg-card);
  color:var(--slate); cursor:pointer;
}
.disc-filter .df.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.feed{display:flex; flex-direction:column; gap:12px;}
.redeem{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.redeem:hover{transform:translateY(-2px); box-shadow:var(--sh-sm);}
.redeem .r-top{display:flex; align-items:center; gap:11px; margin-bottom:13px;}
.redeem .r-logo{width:34px; height:34px; flex:none; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:14px;}
.redeem .r-brand{font-size:13px; font-weight:700;}
.redeem .r-afford{margin-left:auto; font-family:var(--font-mono); font-size:9.5px; font-weight:600; color:var(--accent-hover); background:var(--accent-soft); padding:4px 9px; border-radius:var(--pill); text-transform:uppercase; letter-spacing:.06em;}
.redeem .r-title{font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1.2; margin-bottom:14px; text-wrap:balance;}
.redeem .r-foot{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.redeem .r-meta .rm-pts{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink);}
.redeem .r-meta .rm-val{font-family:var(--font-mono); font-size:10.5px; color:var(--slate); margin-top:3px;}
.redeem .r-cta{
  font-family:var(--font-body); font-weight:700; font-size:13px; color:#fff; background:var(--accent);
  border:none; padding:10px 20px; border-radius:var(--pill); cursor:pointer; transition:background .2s var(--ease);
}
.redeem .r-cta:hover{background:var(--accent-hover);}

/* ---- BRAND DETAIL ---- */
.bd-top{display:flex; align-items:center; gap:10px; padding:6px 0 16px;}
.bd-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--slate); cursor:pointer;}
.bd-back svg{width:16px; height:16px;}
.bd-hero{display:flex; align-items:center; gap:15px; margin-bottom:20px;}
.bd-logo{width:56px; height:56px; flex:none; border-radius:15px; background:var(--ink); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:24px;}
.bd-hero .bh-name{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em;}
.bd-hero .bh-mem{font-family:var(--font-mono); font-size:11px; color:var(--slate); margin-top:3px;}
.bd-balance{
  background:var(--surface-dark); color:#fff; border-radius:var(--radius); padding:20px 22px;
  display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; position:relative; overflow:hidden;
}
.bd-balance::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(199,125,255,.24),transparent 68%);}
.bd-balance .bb-l .bb-k{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-bright); margin-bottom:8px; position:relative;}
.bd-balance .bb-l .bb-pts{font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.02em; position:relative;}
.bd-balance .bb-r{text-align:right; position:relative;}
.bd-balance .bb-r .bb-val{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--accent-bright);}
.bd-balance .bb-r .bb-vk{font-family:var(--font-mono); font-size:9.5px; color:#A8A8AE; margin-top:4px; text-transform:uppercase; letter-spacing:.1em;}

/* bar chart */
.bd-chart{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px 14px; margin-bottom:18px;}
.bd-chart .bc-k{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--slate); margin-bottom:16px;}
.bars{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; height:104px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%;}
.bar-track{flex:1; width:100%; display:flex; align-items:flex-end;}
.bar-fill{width:100%; background:var(--accent-soft); border-radius:5px 5px 0 0; transition:height .8s var(--ease);}
.bar-fill.hi{background:var(--accent);}
.bar-col .bar-m{font-family:var(--font-mono); font-size:9.5px; color:var(--slate-soft);}

/* offers */
.bd-offers{display:flex; flex-direction:column; gap:9px;}
.bd-offer{display:flex; align-items:center; gap:13px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 14px;}
.bd-offer .bo-ico{width:34px; height:34px; flex:none; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center;}
.bd-offer .bo-ico svg{width:17px; height:17px;}
.bd-offer .bo-body{flex:1;}
.bd-offer .bo-t{font-size:13px; font-weight:600;}
.bd-offer .bo-s{font-family:var(--font-mono); font-size:10.5px; color:var(--slate); margin-top:2px;}
.bd-offer .bo-cta{font-size:11px; font-weight:700; color:var(--accent); cursor:pointer;}

/* tap hint */
.tap-hint{
  position:absolute; bottom:-44px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--slate); white-space:nowrap;
}
.tap-hint svg{width:15px; height:15px; color:var(--accent);}

/* ---- right column: screen switcher / guide ---- */
.proto-guide{position:sticky; top:96px;}
.pg-k{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:600; margin-bottom:14px;}
.pg-k .live-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); position:relative;}
.pg-k .live-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--accent); opacity:.5; animation:livepulse 1.8s var(--ease) infinite;}
@keyframes livepulse{0%{transform:scale(.7);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}
.pg-title{font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.02em; margin-bottom:12px;}
.pg-sub{font-size:15px; line-height:1.55; color:var(--slate); margin-bottom:26px; max-width:42ch;}
.switcher{display:flex; flex-direction:column; gap:10px;}
.swc{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;
  cursor:pointer; font:inherit; color:inherit; transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.swc:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 36%, var(--border));}
.swc.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent);}
.swc .swc-n{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--slate-soft); flex:none;}
.swc.on .swc-n{color:var(--accent);}
.swc .swc-body{flex:1;}
.swc .swc-t{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em;}
.swc .swc-d{font-size:13px; color:var(--slate); margin-top:4px; line-height:1.4;}
.swc .swc-go{color:var(--slate-soft); flex:none; transition:transform .25s var(--ease), color .25s var(--ease);}
.swc .swc-go svg{width:18px; height:18px;}
.swc.on .swc-go{color:var(--accent); transform:translateX(3px);}

@media (max-width:980px){
  .proto-stage{grid-template-columns:1fr; gap:48px;}
  .phone{position:relative; top:0;}
  .proto-guide{position:relative; top:0;}
  .tap-hint{position:relative; bottom:0; left:0; transform:none; margin-top:18px; justify-content:center; display:flex;}
}
@media (max-width:440px){
  .phone{width:100%; max-width:360px; border-radius:42px;}
  .phone .scr{width:100%; height:680px;}
}