/* FNFD Retail — прототип ЛК продавца (пилот Davidoff).
   Фирменная палитра Kitsune/FNFD: тёплый крем + коралл + ботанический зелёный. */
:root{
  --coral:#ea4e2b; --coral-d:#d23f1f; --coral-soft:#fdeee9;
  --cream:#f7f2ea; --cream-2:#fbf8f2; --paper:#ffffff;
  --ink:#1f1c19; --ink-2:#5c554c; --ink-3:#938b7e;
  --line:#ece5d8; --line-2:#e3dccd;
  --green:#1f8a6e; --green-soft:#e4f1ec;
  --amber:#bf842a; --amber-soft:#f6ecd6;
  --red:#c0392b; --red-soft:#f8e6e3;
  --gold:#b8924a;
  --shadow:0 1px 2px rgba(40,30,15,.05),0 8px 24px rgba(40,30,15,.06);
  --r:16px; --r-lg:20px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:#efe7da;
  background-image:radial-gradient(120% 60% at 50% -10%,#f6efe3 0%,#e9e0d0 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* ---- Телефонная рамка (десктоп) ---- */
.device{
  width:100%; max-width:412px; height:min(880px,100vh);
  background:var(--paper); border-radius:38px; overflow:hidden; position:relative;
  box-shadow:0 30px 80px rgba(30,20,10,.28),0 0 0 11px #15110d,0 0 0 12px #2c2620;
  margin:18px;
}
.screen{position:relative; height:100%; overflow:hidden; background:var(--cream-2)}

.proto-tag{
  position:fixed; top:16px; left:16px; z-index:50;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); background:#fff8; border:1px solid var(--line);
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(4px);
}

/* ---- Views ---- */
.view{position:absolute; inset:0 0 64px 0; display:none; flex-direction:column}
.view.active{display:flex}
.scroll{flex:1; overflow-y:auto; padding:0 16px 20px; -webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}

/* ---- Appbar ---- */
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; padding-top:max(14px,env(safe-area-inset-top));
  background:var(--cream-2); border-bottom:1px solid var(--line);
}
.appbar.plain h1{font-size:21px; margin:0; font-weight:800; letter-spacing:-.01em}
.brand .logo{font-weight:800; font-size:18px; letter-spacing:-.02em}
.brand .logo-accent{font-weight:800; font-size:18px; color:var(--coral); margin-left:4px; font-style:italic}
.brand .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.avatar{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--coral-soft); color:var(--coral); font-weight:700; font-size:16px;
}

/* ---- Cards generic ---- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow); margin-top:12px}
.section-title{display:flex; justify-content:space-between; align-items:baseline;
  font-weight:700; font-size:14px; margin:20px 2px 8px}
.section-title a{color:var(--coral); font-size:12.5px; cursor:pointer; font-weight:600}

/* ---- Balance card ---- */
.balance-card{
  margin-top:14px; border-radius:var(--r-lg); padding:18px 18px 16px; color:#fff;
  background:linear-gradient(135deg,#ef5a38 0%,#e0401f 100%);
  box-shadow:0 10px 26px rgba(214,63,31,.32);
}
.bc-label{font-size:12.5px; opacity:.92; letter-spacing:.02em}
.bc-row{display:flex; align-items:baseline; gap:10px; margin-top:4px}
.bc-amount{font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1}
.bc-rub{font-size:16px; font-weight:600; opacity:.95}
.bc-foot{font-size:11.5px; opacity:.88; margin-top:10px}

/* ---- Plan ---- */
.plan-head{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2)}
.plan-head b{color:var(--ink)}
.bar{height:8px; border-radius:99px; background:var(--cream); margin:10px 0 8px; overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--coral),#f08a2e); transition:width .5s ease}
.plan-note{font-size:11.5px; color:var(--coral-d); font-weight:600}

/* ---- Stats ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 6px; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font-size:24px; font-weight:800; line-height:1}
.stat b.g{color:var(--green)} .stat b.a{color:var(--amber)}
.stat span{font-size:11px; color:var(--ink-3); margin-top:4px; display:block}

/* ---- Scan button ---- */
.btn-scan{
  width:100%; margin-top:16px; border:none; cursor:pointer;
  background:var(--coral); color:#fff; font-weight:700; font-size:16px;
  padding:15px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 8px 20px rgba(234,78,43,.3);
}
.btn-scan:active{transform:translateY(1px)}
.ic-scan{width:20px; height:20px; border:2.4px solid #fff; border-radius:5px; position:relative}
.ic-scan::before{content:""; position:absolute; left:2px; right:2px; top:50%; height:2px; background:#fff; transform:translateY(-50%); border-radius:2px}

/* ---- Receipt list ---- */
.rcpt-list{display:flex; flex-direction:column; gap:8px}
.rcpt{display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow)}
.rcpt .ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--coral-soft);
  display:flex; align-items:center; justify-content:center}
.rcpt .ic::before{content:""; width:15px; height:18px; background:var(--coral);
  -webkit-mask:var(--rcpt-mask); mask:var(--rcpt-mask)}
.rcpt .mid{flex:1; min-width:0}
.rcpt .t{font-weight:600; font-size:14px}
.rcpt .d{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.rcpt .pts{font-weight:700; font-size:14px; white-space:nowrap}
.rcpt .pts.zero{color:var(--ink-3)}
.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; white-space:nowrap}
.badge.g{background:var(--green-soft); color:var(--green)}
.badge.a{background:var(--amber-soft); color:var(--amber)}
.badge.r{background:var(--red-soft); color:var(--red)}
.rcpt .right{display:flex; flex-direction:column; align-items:flex-end; gap:5px}

/* ---- Filters ---- */
.filters{display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:var(--cream-2); border-bottom:1px solid var(--line)}
.filters::-webkit-scrollbar{height:0}
.chip{border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:99px; cursor:pointer; white-space:nowrap}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- Balance view ---- */
.avail{margin-top:14px}
.av-label{font-size:12.5px; color:var(--ink-3)}
.av-amount{font-size:34px; font-weight:800; letter-spacing:-.02em; margin-top:2px}
.av-amount small{font-size:15px; font-weight:600; color:var(--ink-3)}
.mygift{margin-top:12px; border-radius:var(--r); padding:18px 18px 22px; color:#fff;
  background:linear-gradient(135deg,#2b2622,#15110d); box-shadow:var(--shadow); position:relative; overflow:hidden}
.mygift::after{content:""; position:absolute; right:16px; top:16px; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff7a4d,#d23f1f); box-shadow:-16px 0 0 #f0b429aa}
.mg-top{display:flex; justify-content:space-between; align-items:center; font-weight:700}
.mg-kind{font-size:11px; opacity:.7; font-weight:500}
.mg-num{margin-top:26px; font-size:18px; letter-spacing:.14em; font-family:ui-monospace,Menlo,monospace}
.btn-primary{width:100%; margin-top:14px; border:none; cursor:pointer; background:var(--coral); color:#fff;
  font-weight:700; font-size:16px; padding:15px; border-radius:14px; box-shadow:0 8px 20px rgba(234,78,43,.28)}
.btn-primary:active{transform:translateY(1px)}
.btn-text{width:100%; margin-top:8px; border:none; background:none; color:var(--ink-3); font-size:14px; padding:10px; cursor:pointer}
.rules .rules-title{font-weight:700; font-size:14px; margin-bottom:6px}
.rule{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px}
.rule:first-of-type{border-top:none}
.rule span{color:var(--ink-2)} .rule b{font-weight:700}
.rule b.muted{color:var(--ink-3); font-weight:600}
.wd-list{display:flex; flex-direction:column; gap:8px}
.wd{display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow)}
.wd .t{font-weight:600; font-size:14px}
.wd .d{font-size:11.5px; color:var(--ink-3); margin-top:2px}

/* ---- Profile ---- */
.who{display:flex; align-items:center; gap:14px; margin-top:14px}
.who-av{width:54px; height:54px; border-radius:50%; background:var(--coral-soft); color:var(--coral);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; flex:0 0 54px}
.who-name{font-weight:800; font-size:17px}
.who-role{font-size:12.5px; color:var(--ink-2); margin-top:2px}
.who-phone{font-size:12.5px; color:var(--ink-3); margin-top:1px}
.pd-title{font-weight:700; font-size:14px; margin-bottom:4px}
.consent-row{display:flex; align-items:center; gap:12px}
.ok-dot{width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--green); position:relative}
.ok-dot::after{content:""; position:absolute; left:7px; top:5px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(42deg)}
.consent-title{font-weight:600; font-size:13.5px}
.consent-sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.consent-row .badge{margin-left:auto}
.menu{padding:4px 16px}
.menu-row{display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none;
  padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; cursor:pointer; color:var(--ink); text-align:left}
.menu-row:first-child{border-top:none}
.menu-row.danger{color:var(--coral)}
.menu-row .arr{color:var(--ink-3); font-size:18px}
.ver{text-align:center; font-size:11px; color:var(--ink-3); margin:18px 0 6px}

/* ---- Tabbar ---- */
.tabbar{position:absolute; bottom:0; left:0; right:0; height:64px; display:flex;
  background:var(--paper); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10.5px; color:var(--ink-3); font-weight:600}
.tab.on{color:var(--coral)}
.ti{width:22px; height:22px; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.ti.home{-webkit-mask:var(--m-home); mask:var(--m-home)}
.ti.rcpt{-webkit-mask:var(--m-rcpt); mask:var(--m-rcpt)}
.ti.bal{-webkit-mask:var(--m-bal); mask:var(--m-bal)}
.ti.prof{-webkit-mask:var(--m-prof); mask:var(--m-prof)}

/* ---- Scan overlay ---- */
.scan-overlay{position:absolute; inset:0; z-index:30; background:#0d0c0b; color:#fff; display:none; flex-direction:column}
.scan-overlay.active{display:flex}
.scan-top{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 8px; padding-top:max(18px,env(safe-area-inset-top))}
.scan-top h2{font-size:16px; margin:0; font-weight:600}
.scan-top span{width:34px}
.scan-close{width:34px; height:34px; border-radius:50%; border:none; background:#ffffff1a; color:#fff; font-size:16px; cursor:pointer}
.scan-area{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0 30px}
.scan-frame{width:230px; height:230px; position:relative; border-radius:18px; background:#ffffff08}
.scan-frame .c{position:absolute; width:30px; height:30px; border:3px solid var(--coral)}
.scan-frame .tl{top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:10px 0 0 0}
.scan-frame .tr{top:-2px; right:-2px; border-left:none; border-bottom:none; border-radius:0 10px 0 0}
.scan-frame .bl{bottom:-2px; left:-2px; border-right:none; border-top:none; border-radius:0 0 0 10px}
.scan-frame .br{bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 10px 0}
.scan-line{position:absolute; left:14px; right:14px; top:14px; height:2px; background:var(--coral); box-shadow:0 0 12px var(--coral); border-radius:2px; animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:14px} 50%{top:214px}}
.scan-hint{font-size:14px; color:#fffc; text-align:center}
.scan-pill{font-size:12.5px; color:#fff; background:#ffffff14; border:1px solid #ffffff22; padding:8px 16px; border-radius:99px}
.scan-foot{padding:24px 0 36px; display:flex; flex-direction:column; align-items:center; gap:10px}
.shutter{width:68px; height:68px; border-radius:50%; background:#fff; border:5px solid #ffffff44; cursor:pointer}
.shutter:active{transform:scale(.94)}
.shutter-hint{font-size:11.5px; color:#fff9}

/* ---- Toast ---- */
.toast{position:absolute; left:50%; bottom:84px; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; font-size:13px; font-weight:500; padding:11px 16px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:40; opacity:0; transition:.25s; max-width:88%; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast b{color:#ffd9a0}

/* ---- Sheet (вывод) ---- */
.sheet-wrap{position:absolute; inset:0; z-index:45; display:flex; align-items:flex-end}
.sheet-back{position:absolute; inset:0; background:#0008; animation:fade .2s}
.sheet{position:relative; width:100%; background:var(--paper); border-radius:22px 22px 0 0; padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-grip{width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:6px auto 12px}
.sheet h3{margin:0 0 14px; font-size:18px; font-weight:800}
.fld{display:block} .fld span{font-size:12.5px; color:var(--ink-3)}
.fld input{width:100%; margin-top:6px; padding:13px 14px; font-size:18px; font-weight:700; border:1px solid var(--line-2);
  border-radius:12px; background:var(--cream-2); color:var(--ink); outline:none}
.fld input:focus{border-color:var(--coral)}
.calc{margin:14px 0 4px; background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:4px 14px}

/* ---- Appbar actions (bell) ---- */
.appbar-actions{display:flex; align-items:center; gap:8px}
.bell{position:relative; width:38px; height:38px; border-radius:50%; border:none; background:var(--cream); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.bell-ic{width:20px; height:20px; background:var(--ink-2);
  -webkit-mask:var(--m-bell); mask:var(--m-bell); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.bell-dot{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--coral); border:2px solid var(--cream-2)}

/* ---- Detail / notifs overlay ---- */
.detail-overlay{position:absolute; inset:0 0 64px 0; z-index:25; background:var(--cream-2); display:flex; flex-direction:column}
.detail-bar{display:flex; align-items:center; justify-content:space-between}
.detail-bar h1{flex:1; text-align:center}
.back{width:34px; height:40px; border:none; background:none; font-size:30px; line-height:1; color:var(--ink); cursor:pointer; padding:0}
.detail-bar span{width:34px}
.mark-read{border:none; background:none; color:var(--coral); font-size:13px; font-weight:600; cursor:pointer; width:auto; white-space:nowrap}

/* receipt detail content */
.d-hero{margin-top:14px; text-align:center; padding:18px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.d-sku{font-weight:800; font-size:17px}
.d-store{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.d-pts{margin-top:12px; font-size:30px; font-weight:800; letter-spacing:-.02em}
.d-pts.g{color:var(--green)} .d-pts.a{color:var(--amber)} .d-pts.r{color:var(--red)}
.d-pts small{font-size:14px; font-weight:600; color:var(--ink-3); display:block; margin-top:2px}
.d-badge{display:inline-block; margin-top:10px}
.timeline{margin-top:6px; padding:6px 4px}
.tl-step{display:flex; gap:13px; position:relative; padding:0 0 18px 0}
.tl-step:last-child{padding-bottom:2px}
.tl-step::before{content:""; position:absolute; left:10px; top:22px; bottom:-2px; width:2px; background:var(--line-2)}
.tl-step:last-child::before{display:none}
.tl-dot{width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--cream); border:2px solid var(--line-2); z-index:1; position:relative}
.tl-step.done .tl-dot{background:var(--green); border-color:var(--green)}
.tl-step.done .tl-dot::after{content:""; position:absolute; left:6px; top:4px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(42deg)}
.tl-step.fail .tl-dot{background:var(--red); border-color:var(--red)}
.tl-step.fail .tl-dot::after{content:"✕"; position:absolute; inset:0; color:#fff; font-size:12px; line-height:18px; text-align:center}
.tl-step.now .tl-dot{border-color:var(--amber); background:var(--amber-soft)}
.tl-step.now .tl-dot::after{content:""; position:absolute; left:6px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--amber)}
.tl-txt b{font-size:14px; font-weight:600; display:block}
.tl-txt span{font-size:11.5px; color:var(--ink-3)}
.tl-step.pending .tl-txt b{color:var(--ink-3)}
.d-fiscal .rule b{font-family:ui-monospace,Menlo,monospace; font-size:12.5px}

/* notifications list */
.notif-list{display:flex; flex-direction:column; gap:8px; padding-top:12px}
.notif{display:flex; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow)}
.notif.unread{border-color:#f3c9bd; background:#fffaf8}
.notif-ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px}
.notif-ic.g{background:var(--green-soft)} .notif-ic.a{background:var(--amber-soft)} .notif-ic.c{background:var(--coral-soft)}
.notif .nt{font-weight:600; font-size:13.5px}
.notif .nd{font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.35}
.notif .ntime{font-size:11px; color:var(--ink-3); margin-top:4px}
.notif-empty{text-align:center; color:var(--ink-3); font-size:13px; padding:50px 0}
.menu-right{display:flex; align-items:center; gap:8px}
.m-badge{background:var(--coral); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-style:normal}

/* ---- Push banner ---- */
.push{position:absolute; top:0; left:0; right:0; z-index:60; margin:max(8px,env(safe-area-inset-top)) 8px 0;
  background:rgba(252,249,244,.92); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:16px; padding:11px 13px; display:flex; gap:11px; align-items:center;
  box-shadow:0 10px 30px rgba(30,20,10,.18); transform:translateY(-130%); transition:transform .42s cubic-bezier(.2,.85,.25,1)}
.push.show{transform:translateY(0)}
.push-ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:linear-gradient(135deg,#ef5a38,#d23f1f)}
.push-body{flex:1; min-width:0}
.push-row{display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-3)}
.push-row b{color:var(--ink); font-size:12.5px; font-weight:700}
.push-text{font-size:13px; margin-top:1px}

/* ---- Onboarding ---- */
.onb{position:absolute; inset:0; z-index:70; background:var(--cream-2); display:flex; flex-direction:column}
.onb-step{position:absolute; inset:0; display:flex; flex-direction:column; padding:26px 22px max(26px,env(safe-area-inset-bottom)); padding-top:max(30px,env(safe-area-inset-top))}
.onb-step[hidden]{display:none}
.onb-top{margin-bottom:8px}
.onb-logo .logo{font-weight:800; font-size:20px} .onb-logo .logo-accent{font-weight:800; font-size:20px; color:var(--coral); font-style:italic}
.onb-hero{flex:1; display:flex; flex-direction:column; justify-content:center}
.onb-badge{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--coral); background:var(--coral-soft); padding:5px 11px; border-radius:99px}
.onb-hero h2{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:14px 0 8px}
.onb-hero p{font-size:15px; color:var(--ink-2); line-height:1.5; margin:0}
.onb-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.onb-list li{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); font-size:13px; color:var(--ink-3)}
.onb-list li b{color:var(--coral); font-size:16px; margin-right:8px}
.onb-list li span{display:block; margin-top:2px}
.onb-head{display:flex; align-items:center; gap:6px; margin-bottom:18px; color:var(--ink-3); font-size:12.5px; font-weight:600}
.onb-head .back{width:30px; height:30px; font-size:26px}
.onb-h{font-size:24px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em}
.onb-sub{font-size:14px; color:var(--ink-2); margin:0 0 18px}
.onb .fld{margin-bottom:14px}
.onb .fld input,.onb .fld select{width:100%; margin-top:6px; padding:13px 14px; font-size:15px; font-weight:500;
  border:1px solid var(--line-2); border-radius:12px; background:var(--paper); color:var(--ink); outline:none}
.onb .fld input:focus,.onb .fld select:focus{border-color:var(--coral)}
.grow{flex:1}
.opd-card{display:flex; gap:13px; align-items:center; margin-top:4px}
.opd-logo{flex:0 0 48px; width:48px; height:48px; border-radius:12px; background:#eef4ff; color:#325AD3; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center}
.opd-txt{font-size:12.5px; color:var(--ink-2); line-height:1.4}
.check{display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--ink-2); line-height:1.4; cursor:pointer}
.check input{width:20px; height:20px; flex:0 0 20px; margin-top:1px; accent-color:var(--coral)}
.check a{color:var(--coral)}
.onb-done{align-items:center; justify-content:center; text-align:center}
.onb-done h2{font-size:26px; font-weight:800; margin:0 0 8px}
.onb-done p{font-size:15px; color:var(--ink-2); margin:0 0 26px; max-width:280px}
.done-mark{width:88px; height:88px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; animation:pop .4s cubic-bezier(.2,1.3,.4,1)}
.done-mark i{width:30px; height:54px; border:5px solid var(--green); border-top:none; border-left:none; transform:rotate(42deg) translateY(-6px); border-radius:0 0 4px 0}
.onb-done .btn-primary{max-width:300px}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- Desktop framing ---- */
@media(max-width:480px){
  body{background:var(--cream-2)}
  .device{max-width:none; width:100%; height:100vh; height:100dvh; margin:0; border-radius:0; box-shadow:none}
  .proto-tag{display:none}
}

/* ---- Иконочные маски (inline SVG data-uri) ---- */
:root{
  --rcpt-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2v20l2-1.5L9 22l2-1.5L13 22l2-1.5L17 22l2-1.5V2l-2 1.5L15 2l-2 1.5L11 2 9 3.5 7 2 5 3.5z M8 8h8 M8 12h8 M8 16h5' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-rcpt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v20l2-1.5L10 22l2-1.5L14 22l2-1.5L18 22V2l-2 1.5L14 2l-2 1.5L10 2 8 3.5z M9 8h6 M9 12h6' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-bal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-prof:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z M9.5 19a2.5 2.5 0 0 0 5 0' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- ЛК на реальном API: загрузка + прокрутка онбординга ---- */
.splash{position:absolute; inset:0; z-index:90; background:var(--cream-2); display:flex; align-items:center; justify-content:center}
.splash[hidden]{display:none}
.splash-logo .logo{font-weight:800; font-size:26px}
.splash-logo .logo-accent{font-weight:800; font-size:26px; color:var(--coral); font-style:italic; margin-left:5px}
.onb-scroll{flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px}
.onb .btn-text{margin-top:4px}
#widgetHost:empty{display:none}
#widgetHost{width:100%; max-width:300px}