/* Shared components for the account, owner, chat, shop, profile and admin pages (prototype groups 2-7). */
:root{--line2:#8A9BA5;--red:#B3261E;--go-soft:#E3F1E8}
.appbar{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 8px;min-height:56px;position:sticky;top:0;background:var(--paper);z-index:5}
.appbar h1{font-size:19px;font-weight:700;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .ib{width:44px;height:44px;border:0;background:none;border-radius:12px;display:grid;place-items:center;color:var(--ink);position:relative}
.appbar .ib svg{width:24px;height:24px}
.appbar .ib .dot{position:absolute;top:8px;right:8px;min-width:18px;height:18px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.tabs{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border-top:1.5px solid var(--salt);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));margin-top:auto;z-index:5}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;text-decoration:none;color:var(--sea);font-size:12px;font-weight:600;border-radius:10px;position:relative}
.tabs a svg{width:24px;height:24px}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a .dot{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.sec{padding:8px 16px}
.sec h2{font-size:17px;font-weight:700;margin:12px 0 8px}
.form{display:flex;flex-direction:column;gap:14px;padding:4px 16px 16px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld > label,.fld .lbl{font-weight:600;font-size:15px}
.in{min-height:52px;border:2px solid var(--line2);border-radius:var(--r-btn);padding:0 14px;font:500 17px var(--font);width:100%;background:var(--paper);color:var(--ink)}
.in:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(11,42,60,.15)}
.in[readonly]{background:var(--salt);border-color:var(--salt)}
textarea.in{padding:12px 14px;min-height:96px;resize:vertical;line-height:1.4}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A3C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:40px}
.fld.err .in{border-color:var(--red)}
.fld .hint{font-size:14px;color:var(--sea)}
.fld .hint.ok{color:var(--go);font-weight:600}
.fld .emsg{font-size:14px;color:var(--red);font-weight:600;display:flex;gap:6px;align-items:center}
.fld .emsg svg{width:16px;height:16px;flex:none}
.phone{display:flex;gap:8px}
.phone .pre{min-height:52px;border:2px solid var(--line2);border-radius:var(--r-btn);padding:0 12px;display:grid;place-items:center;font:600 17px var(--font);background:var(--salt);color:var(--ink);flex:none}
.phone .in{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;cursor:pointer}
.chk input{width:24px;height:24px;flex:none;accent-color:var(--ink);margin:2px 0 0}
.chk a{color:var(--ink);font-weight:600}
.chk.err{color:var(--red)}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{width:100%;min-width:0;height:60px;border:2px solid var(--line2);border-radius:var(--r-btn);text-align:center;font:700 26px var(--font);color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums}
.otp input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(11,42,60,.15)}
.otp.err input{border-color:var(--red)}
.alert{margin:0 16px;padding:12px 14px;border-radius:var(--r-btn);background:var(--salt);font-size:15px;font-weight:500;display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.alert svg{width:20px;height:20px;flex:none;margin-top:1px}
.alert.err{background:#FBEDEB;color:#7A1A12}
.alert.ok{background:var(--go-soft);color:#145C3A}
.alert.warn{background:#FFF3D1}
.linkrow{display:flex;flex-direction:column;gap:4px;padding:4px 16px 16px;align-items:flex-start}
.linkrow .btn.quiet{padding-left:0;padding-right:0;width:auto}
.muted{color:var(--sea);font-size:15px}
.pwrow{display:flex;gap:8px}
.pwrow .btn.quiet{width:auto;flex:none;min-height:52px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-btn);font-weight:600;font-size:15px;display:flex;gap:10px;align-items:center;z-index:20;animation:rise .2s ease-out;box-shadow:0 8px 24px rgba(11,42,60,.25)}
.toast svg{width:20px;height:20px;flex:none}
.toast.go{background:var(--go)}
.card{border:1.5px solid var(--line2);border-radius:var(--r-frame);padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.cards{display:flex;flex-direction:column;gap:12px;padding:4px 16px 16px}
.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--salt);color:var(--ink);white-space:nowrap}
.chip.go{background:var(--go-soft);color:#145C3A}
.chip.amber{background:#FFF3D1;color:#5C4300}
.chip.off{background:var(--salt);color:var(--sea)}
.chip.red{background:#FBEDEB;color:#7A1A12}
.code{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.empty{padding:40px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.empty .ill{width:120px;height:80px;border-radius:14px;background:var(--amber);display:grid;place-items:center;color:var(--ink);font-weight:800;letter-spacing:.05em;font-size:14px;box-shadow:0 8px 18px rgba(11,42,60,.15)}
.empty h2{margin:6px 0 0;font-size:20px}
.empty p{margin:0;color:var(--ink);font-weight:500;max-width:32ch}
.empty .btn{max-width:320px;margin-top:8px}
.meter{height:10px;border-radius:999px;background:var(--salt);overflow:hidden}
.meter i{display:block;height:100%;background:var(--go);border-radius:999px}
.meter.full i{background:var(--amber)}
.swrow{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:6px 0;border-bottom:1.5px solid var(--salt)}
.swrow:last-child{border-bottom:0}
.swrow .l{display:flex;flex-direction:column;gap:2px;min-width:0}
.swrow .l b{font-weight:600;font-size:16px}
.swrow .l span{font-size:14px;color:var(--sea)}
.radios{display:flex;flex-direction:column;gap:8px}
.radios label{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:2px solid var(--line2);border-radius:var(--r-btn);font-weight:600;font-size:16px;cursor:pointer}
.radios input{width:22px;height:22px;accent-color:var(--ink);margin:0}
.radios label:has(input:checked){border-color:var(--ink);background:var(--salt)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin:0;padding:0;border:0}
.fields dt{font-size:14px;color:var(--sea)}
.fields dd{margin:0;font-weight:700;font-size:18px}
.lockmark{width:56px;height:56px;border-radius:50%;background:#FBEDEB;color:#7A1A12;display:grid;place-items:center}
.lockmark svg{width:28px;height:28px}
/* ---------- logged-in shell ---------- */
.app.full{padding:0}
.app.full .page{max-width:none;border-radius:0;box-shadow:none;background:var(--paper)}
.sidenav{display:none}
.appbar h1.pad{padding-left:8px}
@media (min-width:600px){.app.full{background:var(--salt);align-items:stretch}.app.full .page{min-height:100vh}.app.full .shellapp{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:var(--paper)}.app.full .sidenav{display:flex;flex-direction:column;gap:4px;padding:20px 14px;border-right:1.5px solid var(--salt);background:var(--paper)}.app.full .sidenav .brand{padding:6px 10px 18px}.app.full .sidenav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}.app.full .sidenav a svg{width:22px;height:22px}.app.full .sidenav a[aria-current="page"]{background:var(--salt)}.app.full .sidenav a .dot{margin-left:auto;min-width:20px;height:20px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}.app.full .main{max-width:760px;width:100%;margin:0 auto;padding:12px 24px 40px;display:flex;flex-direction:column}.app.full .appbar{position:static}.app.full .tabs{display:none}.app.full .cards.stklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.app.full .form,.app.full .fldgrp{max-width:560px}.app.full .cards{max-width:760px}.app.full .sticky-save{position:static;background:none}}
.appbar .ib{text-decoration:none}
/* ---------- owner area (group 3) ---------- */
.stk{border:2px solid var(--ink);border-radius:var(--r-frame);overflow:hidden;background:var(--paper)}
.stk .band{min-height:44px;font-size:16px;padding:8px 14px}
.stk .band.off{background:var(--salt);color:var(--sea)}
.stk .body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.stk .body .row b{font-size:16px}
.stk .body .row span.sub{font-size:14px;color:var(--sea)}
.stk .body .row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stk .body .row2 .btn{width:auto;min-height:40px;font-size:15px;padding:0 10px;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;font-weight:600}
.stk .body .row2 .btn svg{width:18px;height:18px}
.stk .body .row a.title{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px;min-width:0}
.stk .body .row a.title b{overflow-wrap:anywhere}
.stk .body .row a.title svg{width:20px;height:20px;flex:none;color:var(--sea)}
.sticky-save{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--paper) 0,var(--paper) 86%,rgba(255,255,255,0));margin-top:auto}
.soc{display:flex;flex-direction:column;gap:8px}
.soc .item{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) 44px;gap:8px;align-items:center}
.soc .item select.in{padding-right:30px;background-position:right 8px center}
.soc .item .in{min-height:48px}
.soc .ib{width:44px;height:48px;border:2px solid var(--line2);border-radius:var(--r-btn);background:var(--paper);display:grid;place-items:center;color:var(--ink)}
.soc .ib svg{width:22px;height:22px}
.addrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;font-size:15px;text-decoration:underline;text-underline-offset:4px;font-family:inherit}
.addrow svg{width:20px;height:20px}
.swrow.tight{margin-top:-6px}
.swrow.bare{border:0;padding:0}
.counter{display:flex;flex-direction:column;gap:8px}
.counter .n{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.counter .n b{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.counter .n span{font-size:15px;color:var(--sea);font-weight:500}
.counter.off{opacity:.5}
.counter .left{font-weight:600;font-size:15px}
.counter .reset{color:var(--sea);font-size:14px}
.soon{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sea);background:var(--salt);border-radius:999px;padding:3px 8px}
.desc{margin:0;font-size:15px;color:var(--ink);font-weight:400;line-height:1.45}
.card b.h{font-size:17px}
.row.sep{margin-top:4px;padding-top:12px;border-top:1.5px solid var(--salt)}
.row .lbl14{font-size:14px;font-weight:500}
.avatar.lg{width:52px;height:52px}
.btn.secondary.md{min-height:46px;font-size:15px}
.btn.quiet.auto{width:auto}
.ib.plain{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--ink);border-radius:12px}
.ib.plain svg{width:24px;height:24px}
.card.dim{opacity:.55}
.optional{font-weight:500}
.muted.center{text-align:center;margin:0}
/* ---------- notifications and chat (group 4) ---------- */
.nlist{display:flex;flex-direction:column;padding:0 8px 8px}
.nitem{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 8px;border-radius:var(--r-btn);text-decoration:none;color:var(--ink);position:relative;border-bottom:1.5px solid var(--salt)}
.nitem:last-child{border-bottom:0}
.nitem.unread .tx b{font-weight:700}
.nitem.unread::before{content:"";position:absolute;left:-2px;top:26px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.nitem .ic{width:44px;height:44px;border-radius:14px;background:var(--salt);display:grid;place-items:center;color:var(--ink)}
.nitem .ic svg{width:24px;height:24px}
.nitem .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.nitem .tx b{font-size:16px;font-weight:600;line-height:1.3}
.nitem .tx span{font-size:14px;color:var(--sea);line-height:1.35}
.nitem .tx .q{font-size:15px;font-weight:500;color:var(--ink)}
.nitem time{font-size:13px;color:var(--sea);white-space:nowrap;padding-top:2px}
.nitem .acts{grid-column:2/4;display:flex;gap:8px;margin-top:4px}
.nitem .acts .btn{min-height:40px;font-size:15px;width:auto;padding:0 14px}
.nitem .acts form{display:contents}
.sechead{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 4px}
.sechead h2{margin:0;font-size:14px;font-weight:700;color:var(--sea);letter-spacing:.02em}
.sechead .btn.quiet{width:auto;min-height:36px;font-size:14px}
.sechead form{display:contents}
.clist{display:flex;flex-direction:column;padding:0 8px}
.citem{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-radius:var(--r-btn);color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--salt)}
.citem:last-child{border-bottom:0}
.citem .avatar{width:48px;height:48px}
.citem .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.citem .tx b{font-size:16px}
.citem .tx span{font-size:14px;color:var(--sea);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem.unread .tx span{color:var(--ink);font-weight:600}
.citem .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.citem time{font-size:13px;color:var(--sea)}
.citem .dot{min-width:22px;height:22px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.citem .btn.secondary.sm{min-height:40px;font-size:14px;width:auto;padding:0 12px}
.searchrow{padding:8px 16px;display:flex;gap:8px;align-items:center}
.searchrow form{display:contents}
.searchrow .in{flex:1;min-width:0;min-height:48px;padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4F5C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:20px}
.searchrow .abtn{display:inline-flex;align-items:center;gap:6px;min-height:48px;border-radius:14px;flex:none;border:2px solid var(--line2);background:var(--paper);padding:0 12px;font:600 14px var(--font);color:var(--ink)}
.searchrow .abtn svg{width:20px;height:20px}
.searchrow .abtn[disabled]{opacity:.6}
.thread{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px;flex:1}
.day{align-self:center;font-size:13px;font-weight:600;color:var(--sea);padding:4px 10px;background:var(--salt);border-radius:999px;margin:6px 0}
.bbl{max-width:82%;padding:10px 14px;border-radius:18px;font-size:16px;line-height:1.35;position:relative;overflow-wrap:anywhere;font-family:inherit;border:0;text-align:left;cursor:pointer;display:block;white-space:pre-wrap}
button.bbl.them{color:var(--ink)}
.bbl.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.bbl.them{align-self:flex-start;background:var(--salt);color:var(--ink);border-bottom-left-radius:6px}
.bbl .meta{display:flex;gap:4px;align-items:center;justify-content:flex-end;font-size:12px;opacity:.8;margin-top:4px}
.bbl .meta svg{width:16px;height:16px}
.bbl.me .meta .read{color:var(--amber);opacity:1}
.bbl img{display:block;width:100%;max-width:280px;border-radius:12px;margin-bottom:6px;background:var(--line2)}
.bbl.deleted{background:none;border:1.5px dashed var(--line2);color:var(--sea);font-style:italic;font-size:14px;cursor:default}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 16px;background:var(--salt);border-radius:18px;border-bottom-left-radius:6px}
.typing[hidden]{display:none}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--sea);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.composer{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1.5px solid var(--salt)}
.composer .in{min-height:48px;border-radius:24px;padding:12px 16px;line-height:1.3;resize:none;max-height:120px}
.composer .ib{width:48px;height:48px;border-radius:50%;border:0;background:var(--salt);display:grid;place-items:center;color:var(--ink);flex:none;cursor:pointer}
.composer .ib.send{background:var(--ink);color:#fff}
.composer .ib svg{width:24px;height:24px}
.composer .ib[disabled]{opacity:.5}
.blocked{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--salt);display:flex;flex-direction:column;gap:8px;align-items:flex-start;position:sticky;bottom:0}
.blocked p{margin:0;font-size:15px;font-weight:500}
.blocked .btn{width:auto;min-height:44px;font-size:15px}
.attach{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.attach button,.attach label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:0;background:var(--salt);border-radius:var(--r-btn);font:600 13px var(--font);color:var(--ink);cursor:pointer}
.attach svg{width:26px;height:26px}
.attach button[disabled]{opacity:.5}
.attach .soon{font-size:10px;padding:1px 6px}
.chatname{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.chatname .avatar{width:36px;height:36px}
.chatname .tx{display:flex;flex-direction:column;min-width:0}
.chatname b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatname span{font-size:12px;color:var(--go);font-weight:600}
.app.full .main.chatmain{min-height:calc(100vh - 24px);padding-bottom:0}
.sheet{position:fixed;inset:0;background:rgba(11,42,60,.45);display:flex;align-items:flex-end;z-index:30}
.sheet[hidden]{display:none}
.sheet .panel{background:var(--paper);width:100%;border-radius:var(--r-frame) var(--r-frame) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;animation:rise .2s ease-out}
.sheet .panel h2{margin:0 0 6px;font-size:18px}
.sheet .panel .btn{min-height:52px;font-size:17px}
.sheet .panel .btn.danger{border:2px solid var(--red);background:var(--paper);color:var(--red)}
.sheet .panel form{display:contents}
@media (min-width:600px){.sheet{align-items:center;justify-content:center}.sheet .panel{max-width:420px;border-radius:var(--r-frame)}}
.empty .ill.salt{background:var(--salt);color:var(--ink)}
.empty .ill.salt svg{width:36px;height:36px}
/* ---------- public profile (group 6) ---------- */
.phead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 16px 8px}
.phead .avatar{width:88px;height:88px;border:0;background:var(--salt)}
.phead .avatar svg{width:40px;height:40px}
.phead h2{margin:6px 0 0;font-size:22px;font-weight:800}
.phead .u{font-size:15px;color:var(--sea);font-weight:600}
.phead .bio{font-size:15px;line-height:1.45;max-width:36ch;margin:4px 0 0}
.phead .fc{font-size:14px;color:var(--sea);font-weight:600}
.pacts{display:flex;gap:8px;padding:8px 16px 4px;align-items:center}
.pacts form{display:contents}
.pacts .btn{min-height:48px;font-size:16px}
.pacts .ib{width:48px;height:48px;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--paper);display:grid;place-items:center;color:var(--ink);flex:none;cursor:pointer;text-decoration:none}
.pacts .ib svg{width:22px;height:22px}
.pacts .chip{align-self:center}
.pstk{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px}
.pstk .mini{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;border:1.5px solid var(--line2);border-radius:var(--r-btn);padding:10px 12px;text-decoration:none;color:var(--ink)}
.pstk .mini .band{min-height:36px;font-size:13px;padding:6px 10px;border-radius:10px;gap:6px}
.pstk .mini .band svg{width:18px;height:18px}
.pstk .mini span.sub{font-size:14px;color:var(--sea)}
.hidden-note{display:flex;gap:10px;align-items:center;padding:14px;border-radius:var(--r-btn);background:var(--salt);font-size:15px;font-weight:500}
.hidden-note svg{width:22px;height:22px;flex:none;color:var(--sea)}
.pform .avatarrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pform .avatarrow .avatar{width:72px;height:72px}
.pform .avatarrow .btn{width:auto;min-height:44px;font-size:15px}
.pform .avatarrow .acts{display:flex;gap:8px}
.sec .sub14{font-size:14px}
/* ---------- landing and order (group 5) ---------- */
.site{width:100%;max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px))}
.sitehead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.sitehead nav{display:none;gap:4px}
.sitehead nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.sitehead .acts{display:flex;gap:2px;align-items:center}
.sitehead .acts .btn{width:auto;min-height:44px;font-size:15px;padding:0 12px;margin-left:4px}
.sitehead .ib{width:44px;height:44px;border:0;background:none;border-radius:12px;display:grid;place-items:center;color:var(--ink);position:relative;text-decoration:none}
.sitehead .ib svg{width:24px;height:24px}
.sitehead .ib .dot{position:absolute;top:6px;right:6px;min-width:18px;height:18px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
@media (max-width:599px){.sitehead .brand span{display:none}.sitehead .seg a{min-width:36px;padding:0 4px;font-size:14px}}
@media (min-width:600px){.sitehead nav{display:flex}}
.hero{display:grid;gap:24px;padding:16px 0 32px}
.hero h1{font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance;max-width:14ch}
.hero .sub{font-size:18px;line-height:1.45;margin:14px 0 20px;max-width:34ch;font-weight:500}
.hero .cta{display:flex;flex-direction:column;gap:10px;max-width:360px}
.hero .cta .btn{min-height:60px}
.hero .cta form{display:contents}
.hero .price{font-size:15px;color:var(--sea);font-weight:500}
.hero .vis{display:flex;flex-direction:column;align-items:center;position:relative;padding:12px 0 0}
.hero .vis .sticker{--mm:4.6px;transform:rotate(-4deg);z-index:2}
.hero .vis .phone{width:300px;max-width:100%;margin-top:-20px;border:6px solid var(--ink);border-radius:32px;overflow:hidden;background:var(--paper);box-shadow:0 20px 40px rgba(11,42,60,.18);display:block}
@media (max-width:599px){.hero .vis .phone{max-height:330px;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}}
.hero .vis .phone .frame{margin:4px 12px 0}
.hero .vis .phone .band{min-height:40px;font-size:15px}
.hero .vis .phone .lead{padding:12px 12px 2px}
.hero .vis .phone h2.t{font-size:20px;margin:0 0 4px;font-weight:700;line-height:1.15}
.hero .vis .phone .lead p{font-size:13px;margin:0;font-weight:500}
.hero .vis .phone .msgs{padding:6px 12px 12px;gap:6px}
.hero .vis .phone .msg{min-height:48px;font-size:15px;padding:6px 10px 6px 12px;grid-template-columns:26px minmax(0,1fr) 18px;gap:8px}
.hero .vis .phone .msg svg.ic{width:24px;height:24px}
@media (min-width:600px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;padding:32px 0 48px}.hero h1{font-size:52px}.steps{grid-template-columns:repeat(3,1fr)}.priv{grid-template-columns:repeat(3,1fr)}.products{grid-template-columns:repeat(3,1fr)}.site .form{padding:0}.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}.checkout .sum{position:sticky;top:16px}}
.steps{display:grid;gap:14px;padding:8px 0 24px}
.step{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-frame);background:var(--salt)}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px}
.step b{font-size:18px}
.step p{margin:0;font-size:15px;line-height:1.45}
.h2s{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:24px 0 12px;text-wrap:balance}
.h2s.top{margin-top:8px}
.priv{display:grid;gap:12px;padding-bottom:24px}
.priv > div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.priv svg{width:26px;height:26px;flex:none;color:var(--ink)}
.priv b{display:block;font-size:16px;margin-bottom:2px}
.products{display:grid;gap:14px;padding-bottom:24px}
.prod{border:2px solid var(--ink);border-radius:var(--r-frame);overflow:hidden;display:flex;flex-direction:column}
.laterrow{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--salt);font-size:15px;font-weight:500;margin-top:-10px;margin-bottom:24px}
.laterrow .soon{flex:none}
.prod .img{height:150px;display:grid;place-items:center;background:var(--salt);position:relative}
.prod .img .sticker{--mm:3.4px}
.prod .img .tag{position:absolute;top:10px;left:10px}
.prod .pb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod .pb b{font-size:18px}
.prod .pb p{margin:0;font-size:15px;color:var(--ink);line-height:1.4;flex:1}
.prod .pr{display:flex;justify-content:space-between;align-items:center;gap:10px}
.prod .pr form{display:contents}
.prod .pr .amt{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.prod .pr .btn{width:auto;min-height:48px;font-size:16px;padding:0 16px}
.prod .pr .btn[disabled]{background:var(--salt);border-color:var(--salt);color:var(--sea)}
.faq{display:flex;flex-direction:column;padding-bottom:24px}
.faq details{border-bottom:1.5px solid var(--salt)}
.faq summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:16px;padding:8px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{margin:0 0 14px;font-size:15px;line-height:1.5;max-width:70ch}
.sitefoot{border-top:1.5px solid var(--salt);padding:20px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:14px;color:var(--sea);max-width:1120px;margin:0 auto;width:100%}
.sitefoot > div{display:flex;flex-wrap:wrap;gap:8px 16px}
.sitefoot a{color:var(--ink);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.sticker{--mm:6px;width:calc(60*var(--mm));height:calc(40*var(--mm));background:var(--amber);color:var(--ink);border-radius:calc(4*var(--mm));position:relative;display:grid;grid-template-columns:calc(24*var(--mm)) minmax(0,1fr);grid-template-rows:calc(24*var(--mm)) minmax(0,1fr);column-gap:calc(2.5*var(--mm));row-gap:calc(1.5*var(--mm));padding:calc(3*var(--mm));box-shadow:0 2px 0 rgba(0,0,0,.08),0 14px 30px rgba(11,42,60,.18);max-width:100%}
.sticker .qr{width:calc(24*var(--mm));height:calc(24*var(--mm));background:var(--paper);border-radius:calc(1.5*var(--mm));padding:calc(1.5*var(--mm));display:grid;place-items:center}
.sticker .qr svg{width:100%;height:100%;display:block}
.sticker .txt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sticker .lines{display:flex;flex-direction:column;gap:calc(.8*var(--mm));font-weight:600;line-height:1.1}
.sticker .lines span{font-size:calc(2.5*var(--mm));text-wrap:balance}
.sticker .lines span:not(:first-child){font-weight:500}
.sticker .strip{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:calc(2*var(--mm));min-width:0}
.sticker .coderow{display:flex;align-items:center;gap:calc(1*var(--mm));min-width:0}
.sticker .nfc{width:calc(3.6*var(--mm));height:calc(3.6*var(--mm));flex:none}
.sticker .nfc svg{width:100%;height:100%}
.sticker .code{font-weight:800;font-size:calc(3*var(--mm));letter-spacing:.03em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.sticker .wm{display:flex;align-items:center;gap:calc(.7*var(--mm));font-weight:800;font-size:calc(2.6*var(--mm));letter-spacing:-.01em;white-space:nowrap}
.sticker .wm svg{width:calc(3.2*var(--mm));height:calc(3.2*var(--mm))}
.cartlist{display:flex;flex-direction:column;gap:12px;padding:0 16px}
.citm{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;border:1.5px solid var(--line2);border-radius:var(--r-frame);padding:12px}
.citm.bare{border:0;padding:0}
.citm .img{width:72px;height:56px;border-radius:12px;background:var(--salt);display:grid;place-items:center;overflow:hidden}
.citm .img .sticker{--mm:1.1px;box-shadow:none}
.citm .tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.citm .tx b{font-size:16px}
.citm .ln{display:flex;justify-content:space-between;align-items:center;gap:8px}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.qty form{display:contents}
.qty button{width:40px;height:40px;border:0;background:none;font:700 20px var(--font);color:var(--ink);cursor:pointer}
.qty span{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.promo{display:flex;gap:8px;align-items:flex-start}
.promo .in{text-transform:uppercase;letter-spacing:.04em}
.promo .btn{width:auto;min-height:52px;font-size:16px;padding:0 16px;flex:none}
.sum{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-frame);background:var(--salt);font-size:15px}
.sum .ln{display:flex;justify-content:space-between;gap:10px}
.sum .ln.tot{font-size:19px;font-weight:800;border-top:1.5px solid #fff;padding-top:10px;margin-top:4px}
.sum .ln.disc{color:var(--go);font-weight:600}
.sum .btn{margin-top:8px}
.sum .note{font-size:14px}
.timeline{display:flex;flex-direction:column;padding:4px 0}
.tl{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;min-height:48px}
.tl .d{display:flex;flex-direction:column;align-items:center}
.tl .d i{width:14px;height:14px;border-radius:50%;border:3px solid var(--line2);background:#fff;flex:none;margin-top:4px}
.tl .d::after{content:"";flex:1;width:3px;background:var(--line2);margin:4px 0 0}
.tl:last-child .d::after{display:none}
.tl.done .d i{background:var(--go);border-color:var(--go)}
.tl.done .d::after{background:var(--go)}
.tl.cur .d i{background:#fff;border-color:var(--ink)}
.tl .tx{display:flex;flex-direction:column;padding-bottom:12px}
.tl .tx b{font-size:16px}
.tl .tx span{font-size:14px;color:var(--sea)}
.tl.cancel .d i{background:var(--red);border-color:var(--red)}
.ord{border:1.5px solid var(--line2);border-radius:var(--r-frame);padding:14px 16px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.ord .ln{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ord b{font-size:16px}
.card .ln.row{justify-content:space-between}
.card .ln.disc{color:var(--go);font-weight:600}
.btn.secondary.danger{border-color:var(--red);color:var(--red)}
.shopmain{display:flex;flex-direction:column;flex:1}
.result.site{padding-top:40px}
.form.narrow{max-width:420px;margin:0 auto}
.cartpad{padding:0 16px}