/* Styles from the prototype (prototype/src/index.template.html), plus the additions at the end. */
:root{--bg:#f4f6fb;--bg2:#e6eaf4;--surface:#ffffff;--ink:#0e1a33;--muted:#55607a;--line:#e1e6f2;--blue:#10a0e0;--btn:#0c6aa6;--btn-ink:#ffffff;--link:#0c6aa6;--tint:#e6f5fc;--tint-ink:#075a8c;--field:#ffffff;--field-line:#c9d2e6;--ok-bg:#e8f6ee;--ok-ink:#146338;--warn-bg:#fff4e0;--warn-ink:#7a4a00;--dark:#0e1a33;--dark-ink:#ffffff;--dark-muted:#b8c6e6;--red:#e0101e;--off:#9aa7c4;--shadow:0 0 0 1px rgba(14,26,51,.06),0 20px 60px rgba(14,26,51,.12);color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--bg2:#060a14;--surface:#141d31;--ink:#eef2fb;--muted:#a3b0cc;--line:#26324f;--btn:#1479b8;--link:#5cc0f2;--tint:#0f2d44;--tint-ink:#a9ddf7;--field:#0f1830;--field-line:#3a4a74;--ok-bg:#12301f;--ok-ink:#86e0aa;--warn-bg:#3a2c0e;--warn-ink:#ffd48a;--dark:#050a14;--off:#5a6a90;--shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5);color-scheme:dark;}}
:root[data-theme="dark"]{--bg:#0b1220;--bg2:#060a14;--surface:#141d31;--ink:#eef2fb;--muted:#a3b0cc;--line:#26324f;--btn:#1479b8;--link:#5cc0f2;--tint:#0f2d44;--tint-ink:#a9ddf7;--field:#0f1830;--field-line:#3a4a74;--ok-bg:#12301f;--ok-ink:#86e0aa;--warn-bg:#3a2c0e;--warn-ink:#ffd48a;--dark:#050a14;--off:#5a6a90;--shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.5);color-scheme:dark;}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{background:var(--bg2);color:var(--ink);font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-text-size-adjust:100%}
#app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow);overflow-x:hidden;overflow-x:clip}
h1{margin:16px 0 0;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
h1:focus{outline:none}
h2{margin:0;font-size:17px;font-weight:800}
p{margin:0}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.screen{flex:1;display:flex;flex-direction:column;padding:12px 20px 24px}
.top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.back{width:44px;height:44px;margin-left:-10px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);cursor:pointer}
.step{font-size:14px;font-weight:700;color:var(--muted)}
.bars{display:flex;gap:6px;margin-top:6px}.bars i{flex:1;height:4px;border-radius:2px;background:var(--line)}.bars i.on{background:var(--blue)}
.sub{margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted)}
.hint{font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}
.sect{margin-top:22px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.brand{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.logo{position:relative;width:32px;height:32px;border-radius:10px;background:var(--blue);display:inline-block}
.logo i{position:absolute;right:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.grow{flex:1;min-height:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px}
.note{margin-top:18px;display:flex;gap:12px;align-items:flex-start;background:var(--tint);color:var(--tint-ink);border-radius:16px;padding:14px;font-size:14px;line-height:1.4}
.note svg{flex:none;margin-top:1px}
.note.warn{background:var(--warn-bg);color:var(--warn-ink)}
.btn{width:100%;height:56px;border:0;border-radius:16px;background:var(--btn);color:var(--btn-ink);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none}
.btn.sm{width:auto;height:44px;border-radius:12px;font-size:14px;padding:0 16px}
.btn.ghost{background:var(--surface);color:var(--link);border:1.5px solid var(--btn)}
.btn.danger{background:#c3202c;color:#ffffff;border:1.5px solid #c3202c}
.btn.dark{background:var(--dark);color:var(--dark-ink)}
.btn.light{background:#fff;color:#075a8c}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn+.btn,.btn+.linkbtn{margin-top:10px}
.linkbtn{min-height:44px;border:0;background:none;color:var(--link);font-weight:700;font-size:15px;cursor:pointer;width:100%}
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px}
label{font-size:13px;font-weight:700;color:var(--muted)}
input,select,textarea{width:100%;height:48px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--field);color:var(--ink);padding:0 14px;font-size:16px;font-weight:500}
textarea{height:88px;padding:12px 14px;resize:vertical}
input[readonly]{background:var(--bg);color:var(--muted)}
.lockrow{position:relative}.lockrow svg{position:absolute;right:14px;top:13px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:var(--tint);color:var(--tint-ink);padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.rowbtn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:12px 14px;min-height:64px;cursor:pointer;text-decoration:none}
.rowbtn+.rowbtn{margin-top:10px}
.rowbtn .t{flex:1;min-width:0}.rowbtn .t b{display:block;font-size:16px;font-weight:800}.rowbtn .t span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.3}
.rowbtn.pri{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}.rowbtn.pri .t span{color:#d9f0fb}.rowbtn.pri .tile{background:rgba(255,255,255,.18);color:#fff}
.rowbtn.danger .tile{background:var(--warn-bg);color:var(--warn-ink)}
.tile{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--link);display:flex;align-items:center;justify-content:center;flex:none}
.tile.sm{width:36px;height:36px;border-radius:10px}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--link);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none}
.avatar.lg{width:96px;height:96px;font-size:32px}
.chev{color:var(--muted);flex:none}
.opt{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:12px 14px;min-height:76px;cursor:pointer}
.opt+.opt{margin-top:8px}
.opt[aria-pressed="true"]{border-color:var(--btn);background:var(--tint)}
.opt[aria-pressed="true"] .tile{background:var(--btn);color:#fff}
.opt .t{flex:1;min-width:0}.opt .t b{display:block;font-size:16px;font-weight:800}.opt .t span{display:block;font-size:13px;line-height:1.3;color:var(--muted);margin-top:2px}
.radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--off);flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.opt[aria-pressed="true"] .radio{background:var(--btn);border-color:var(--btn)}
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 12px;margin-top:8px}
.item .m{flex:1;min-width:0}.il{font-size:12px;font-weight:700;color:var(--muted)}.iv{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.x{width:44px;height:44px;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.add{margin-top:12px;border:1.5px dashed var(--field-line);border-radius:16px;padding:4px 14px 14px}
.add .btn{margin-top:12px}
.uploads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.upl{height:92px;border:2px dashed var(--field-line);border-radius:16px;background:var(--surface);color:var(--link);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;cursor:pointer}
.arow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px 6px 8px 12px;margin-top:8px;min-height:60px}
.arow .m{flex:1;min-width:0}.arow b{display:block;font-size:15px;font-weight:700}.arow span{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.arow.dis .tile{opacity:.5}.arow.dis b{color:var(--muted)}.arow .warnt{color:var(--warn-ink)}
.sw{width:60px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.sw i{width:46px;height:28px;border-radius:14px;background:var(--off);display:flex;align-items:center;padding:0 3px}
.sw i b{width:22px;height:22px;border-radius:50%;background:#fff;display:block}
.sw[aria-checked="true"] i{background:var(--btn);justify-content:flex-end}
.sw[disabled]{cursor:not-allowed;opacity:.5}
.nav{position:sticky;bottom:0;display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));z-index:5}
.nav button{flex:1;min-height:52px;border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;cursor:pointer}
.nav button[aria-current]{color:var(--link);font-weight:800}
.bar{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--blue)}
.plan{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:18px;margin-top:12px}
.plan.cur{border:2px solid var(--btn)}
.plan.dk{background:var(--dark);color:var(--dark-ink);border-color:var(--dark)}
.plan ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}.plan li svg{flex:none;margin-top:2px;color:var(--link)}.plan.dk li svg{color:#5cc0f2}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.seg{display:inline-flex;border:1.5px solid var(--field-line);border-radius:12px;overflow:hidden}
.seg button{min-height:40px;padding:0 14px;border:0;background:var(--surface);color:var(--muted);font-weight:700;font-size:13px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--btn);color:#fff}
.pvbar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--dark);color:var(--dark-ink);padding:8px 12px 8px 6px}
.pvbar .back{color:#fff;width:auto;padding:0 8px;gap:4px;font-weight:700;font-size:14px;margin-left:0}
.pvbar .seg{border-color:#40507a}.pvbar .seg button{background:transparent;color:var(--dark-muted)}.pvbar .seg button[aria-pressed="true"]{background:#fff;color:#075a8c}
.stripe{height:6px;display:flex}.stripe i{flex:1;background:var(--blue)}.stripe b{width:56px;background:var(--red)}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:28px}
.hero h1{margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.chip{font-family:inherit;cursor:pointer}
.appbar{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.persona{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:14px;cursor:pointer}
.or{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;font-weight:600;color:var(--muted)}.or i{flex:1;height:1px;background:var(--line)}
.phonerow{display:flex;gap:8px}.phonerow select{width:116px;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard{display:block;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-top:10px;cursor:pointer}
.pcard .r1{display:flex;align-items:center;gap:12px}.pcard .t{flex:1;min-width:0}.pcard .t b{display:block;font-size:16px;font-weight:800}.pcard .t>span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.icons{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.aic{width:32px;height:32px;border-radius:9px;background:var(--tint);color:var(--link);display:flex;align-items:center;justify-content:center}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink);cursor:pointer}
.check input{width:24px;height:24px;padding:0;flex:none;margin:0;accent-color:var(--btn)}
details.how{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45}details.how summary{font-weight:700;cursor:pointer;min-height:24px}
.pass{width:100%;max-width:320px;margin:0 auto;border-radius:22px;padding:20px;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(14,26,51,.18)}
.pass .prow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pass .lg{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none}
.pass .nm{margin-top:16px;font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.pass .sb{margin-top:3px;font-size:14px;min-height:20px}
.pass .qr{margin:16px auto 0;width:164px;background:#fff;border-radius:16px;padding:10px;line-height:0;text-align:center}
.pass .fl{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-bottom:10px}
.pass .fl small{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pass .fl b{display:block;font-size:14px;margin-top:2px}
.pass .bar2{position:absolute;left:0;right:0;bottom:0;height:6px;display:flex}.pass .bar2 i{flex:1}.pass .bar2 b{width:44px}
.swatches{display:flex;justify-content:center;gap:10px;margin-top:14px}
.sw2{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:3px;background:none}
.sw2[aria-pressed="true"]{border-color:var(--link)}
.sw2 span{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(120,130,150,.5)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.soc{display:flex;gap:4px;align-items:center}.soc input{flex:1;min-width:0}
.avimg{object-fit:cover;display:block;flex:none}
.imgcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;position:relative}
.imgbox{width:72px;height:72px;border-radius:14px;background:var(--tint);color:var(--link);display:flex;align-items:center;justify-content:center;overflow:hidden}
.imgbox img{width:100%;height:100%;object-fit:cover}.imgbox.contain img{object-fit:contain;background:#fff}
.btnrow{display:flex;align-items:center;gap:4px;margin-top:8px}
.lbadge{position:absolute;right:-8px;bottom:-4px;width:38px;height:38px;border-radius:11px;background:#fff;border:3px solid var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center}.lbadge img{width:100%;height:100%;object-fit:contain}
.note.ok{background:var(--ok-bg);color:var(--ok-ink)}
.note.bad{background:#fdecee;color:#a50e19;border:1px solid #f3b8be}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .note.bad{background:#3a1216;color:#ffb3ba;border-color:#6b2027}}
:root[data-theme="dark"] .note.bad{background:#3a1216;color:#ffb3ba;border-color:#6b2027}
.rowbtn.off{background:var(--bg2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.rowbtn.off .tile{background:var(--surface);color:var(--off)}
.opt[disabled]{opacity:.65;cursor:not-allowed}
.legal{padding:12px 20px 18px;text-align:center;font-size:11px;line-height:1.4;color:var(--muted)}
.toplogo{flex:1;display:flex;justify-content:center;align-items:center}
.steplabel{text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin-top:28px}  /* below the diagonal lines (DJ, 28 Oct 2026) */
.pass .plogo{height:46px;max-width:170px;background:#fff;border-radius:10px;padding:5px 10px;display:flex;align-items:center}
.pass .plogo img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.pass .nmrow{display:flex;align-items:center;gap:12px;margin-top:16px}
.pass .pph{width:64px;height:64px;object-fit:cover;flex:none;display:block}
.pass .nm{margin-top:0}
.pass.mini{padding:14px 16px 22px;box-shadow:none;max-width:none;margin:12px 0 0}
.cswrap{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cs{position:relative;width:44px;height:44px;border-radius:50%;border:3px solid transparent;padding:3px;background:none;cursor:pointer;display:inline-block}
.cs[aria-pressed="true"],.cs.on{border-color:var(--link)}
.cs span{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(120,130,150,.5)}
.cs input[type=color]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.chip[aria-pressed="true"],.chip.on{border-color:var(--link);background:var(--tint);color:var(--tint-ink)}
.chip{position:relative;cursor:pointer}
.chip input[type=color]{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.lcard{width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;align-items:flex-start;justify-content:center;padding:18px 22px 70px;margin-top:16px}
.lcard img{max-width:100%;max-height:96px;object-fit:contain;display:block}
.avover{position:relative;margin-top:-62px;line-height:0}.avover.nologo{margin-top:20px}
.avbig{width:124px;height:124px;border-radius:50%;object-fit:cover;background:#fff;display:block;margin:0 auto;box-shadow:0 6px 18px rgba(14,26,51,.22)}   /* no white frame round the photo (DJ, 4 Nov 2026) */
.avbig.ini{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--link);font-weight:800;font-size:40px;line-height:1}
/* The picture is shown whole, never cropped (DJ, 31 Oct 2026: a club's square logo lost its top and bottom) */
.cover{display:block;width:auto;max-width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:20px;margin:16px auto 0}
.lover{width:100px;height:100px;border-radius:20px;background:#fff;border:4px solid var(--bg);padding:8px;margin:-50px auto 0;position:relative;display:flex;align-items:center;justify-content:center}
.lover img{max-width:100%;max-height:100%;object-fit:contain}
.hbar{display:flex;align-items:center;min-height:44px}
.hs{width:44px;flex:none;display:flex;align-items:center}.hs.hr{justify-content:flex-end}.hs .back{margin-left:0}
.hc{flex:1;display:flex;justify-content:center;align-items:center}
.hwrap{position:relative;padding-top:8px}
.menu{position:absolute;right:0;top:56px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:6px;z-index:30}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;border:0;background:none;color:var(--ink);font-weight:700;font-size:15px;padding:0 12px;border-radius:10px;cursor:pointer;text-align:left}
.mi:hover,.mi:focus-visible{background:var(--tint)}
.pvbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hband{margin:0 -20px;padding:20px 20px 74px;border-radius:0 0 28px 28px}
.lcard{width:100%;background:#fff;border:0;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:14px 22px;min-height:100px;margin-top:0;height:auto}
.lcard img{max-width:100%;max-height:92px;object-fit:contain;display:block}
.cover{margin-top:0}
.hero .hband{align-self:stretch;width:calc(100% + 40px);max-width:none}
.pvbar .back{white-space:nowrap}
.arow span.tile{display:flex;color:var(--link);font-size:inherit;line-height:normal}
.pvbar{display:flex;justify-content:center;align-items:center;position:relative;min-height:52px}
.pvbar .back{position:absolute;left:6px;top:50%;transform:translateY(-50%)}
.pcard{cursor:default}
.pmain{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.pmain .r1{display:flex;align-items:center;gap:12px}
.aic{position:relative;border:0;padding:0;cursor:pointer;font:inherit}
.aic::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--dark);color:var(--dark-ink);font-size:12px;font-weight:600;line-height:1.3;padding:6px 10px;border-radius:8px;width:max-content;max-width:200px;white-space:normal;text-align:left;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.aic.tl::after{left:0;transform:none}.aic.tr::after{left:auto;right:0;transform:none}
.aic:hover::after,.aic:focus-visible::after,.aic.tip::after{opacity:1}
.cl{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px}
.cl .cr{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.cl .cr svg{flex:none;margin-top:2px}.cl .cr span{overflow-wrap:anywhere}
.card .cl{margin-top:0;font-size:14px}.card .cl .cr svg{color:var(--link)}
.pass .cl{margin-top:2px;padding-bottom:12px}
.lw{display:block;line-height:0}.lw img{display:block;height:var(--lh,28px);width:auto}.lw .ld{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lw .ll{display:none}:root:not([data-theme="light"]) .lw .ld{display:block}}
:root[data-theme="dark"] .lw .ll{display:none}:root[data-theme="dark"] .lw .ld{display:block}
.cta{margin-top:22px;background:var(--dark);color:var(--dark-ink);border-radius:20px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.cta .t{flex:1}.cta b{display:block;font-size:16px}.cta span{display:block;font-size:13px;color:var(--dark-muted);margin-top:3px;line-height:1.35}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;flex:none;line-height:0}
.linkfield{flex:1;min-width:0;height:44px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--bg);padding:0 12px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.err{margin-top:10px;font-size:14px;font-weight:600;color:var(--warn-ink);background:var(--warn-bg);border-radius:12px;padding:10px 12px}
.empty{margin-top:18px;text-align:center;padding:28px 18px}
.empty .tile{margin:0 auto 12px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--dark);color:var(--dark-ink);padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;max-width:min(380px,90vw);z-index:20;box-shadow:0 8px 30px rgba(0,0,0,.3);text-align:center}
#toast[hidden]{display:none}

/* Additions to the prototype */
.pwrow{position:relative}.pwrow input{padding-right:72px}
.pwshow{position:absolute;right:4px;top:2px;height:44px;min-width:64px;border:0;background:none;color:var(--link);font-weight:700;font-size:14px;cursor:pointer;border-radius:10px}
.pwshow:hover{background:var(--tint)}
.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;font-weight:600}
.btn[aria-busy="true"]{opacity:.7;cursor:wait}

/* Computer screens: brand panel on the left, the app column on the right. Hidden on phones. */
.brand-panel{display:none}
@media (min-width:900px){
 body.has-panel{display:grid;grid-template-columns:minmax(320px,.84fr) minmax(470px,1.16fr);min-height:100vh}
 /* The app fills the space beside the panel; the content keeps a comfortable reading width in the middle */
 body.has-panel #app{width:100%;max-width:none;margin:0;box-shadow:none;min-width:0}
 body.has-panel #app .screen,body.has-panel #app .legal{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
 body.has-panel #app .nav button{max-width:220px}
 /* Digiprofiles: phone-sized cards, two side by side instead of one stretched across */
 body.has-panel .slide{flex:0 0 min(360px,86%)}
 /* Digidashboard: charts in two columns, so each stays the size it was designed for */
 body.has-panel .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;align-items:start}
 body.has-panel #toast{left:71%}
 .brand-panel{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:44px clamp(32px,6vw,88px) 30px;overflow:hidden;background:#0e1a33 url(/static/themes/network.jpg) center/cover no-repeat;box-shadow:inset 0 0 0 2000px rgba(14,26,51,.4);/* the Digiprofiles background, as on the website (DJ, 31 Oct 2026) */color:#fff}
 .brand-panel::after{position:absolute;right:-90px;bottom:15%;width:310px;height:8px;content:'';background:#e0101e;transform:rotate(-45deg);box-shadow:0 15px 0 rgba(16,160,224,.8)}
 .brand-logo{display:block;width:min(100%,300px);height:auto}
 .brand-copy{max-width:480px;margin:auto 0;padding:78px 0 96px}
 .brand-eyebrow{margin:0 0 14px;color:#5cc6ed;font-size:11px;font-weight:800;line-height:1.2}
 .brand-copy h1{margin:0;font-size:clamp(28px,2.9vw,48px);line-height:1.08;font-weight:700;letter-spacing:0}
 .brand-copy h1 span{display:block;white-space:nowrap}
 .brand-copy h1 .red{color:#e0101e}
 .brand-copy h1 .blue{color:#5cc6ed}
 .brand-description{max-width:400px;margin:22px 0 0;color:#d1dae8;font-size:17px;line-height:1.6}
 .brand-foot{display:flex;align-items:center;gap:12px;color:#abb8cb;font-size:12px}
 .brand-mark{display:block;width:34px;height:34px}
}

/* Privacy policy (app screen and /privacy) */
.policy{margin-top:8px;font-size:15px;line-height:1.55}
.policy h2{margin:24px 0 6px;font-size:18px}
.policy p{margin:8px 0}
.policy ul,.policy ol{margin:8px 0;padding-left:22px}.policy li{margin:4px 0}
.policy a,.legal a{color:var(--link)}
.legal .links{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:6px;font-size:13px}
.legal .links a{display:inline-block;padding:6px 4px;text-decoration:underline;text-underline-offset:2px}
.policy-draft{background:var(--warn-bg);color:var(--warn-ink);border-radius:12px;padding:10px 12px;font-size:14px}
.policy-table{overflow-x:auto;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.policy-table table{width:100%;border-collapse:collapse;font-size:14px}
.policy-table th,.policy-table td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
.policy-table th{font-size:12px;color:var(--muted)}
.policy-table tr:last-child td{border-bottom:0}
@media print{
 body{background:#fff}
 #app{max-width:none;box-shadow:none;background:#fff}
 @page{size:A4;margin:16mm 14mm}
 .policy-table tr{break-inside:avoid}
 .policy h2{break-after:avoid}
}

/* Organisation picker */
.orgpick{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 8px 10px 12px}
.orgpick .m{flex:1;min-width:0}.orgpick b{display:block;font-size:15px}.orgpick span{display:block;font-size:13px;color:var(--muted)}
.orgimg{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;flex:none}
#org-results .opt{min-height:60px;margin-top:8px}
/* Address suggestions (Google Places) */
.placelist .opt{min-height:52px;margin-top:6px}.placelist .powered{margin:4px 2px 0;text-align:right;font-size:11px}

/* Landing actions: all blue, green once a one-off action is done */
.acthead{margin-top:20px;text-align:center}.acthead h2{font-size:18px}.acthead .hint{margin-top:4px}
.actlist{margin-top:14px;display:flex;flex-direction:column;gap:10px}.actlist .rowbtn+.rowbtn{margin-top:0}
.rowbtn.done{background:#15803d;border-color:#15803d;color:#fff;cursor:default}
.rowbtn.done .tile{background:rgba(255,255,255,.2);color:#fff}.rowbtn.done .t span{color:#dcfce7}

/* My Digiprofiles: wallet cards side by side, one per swipe */
.deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:14px -20px 0;padding:6px 20px 12px;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.slide{flex:0 0 86%;scroll-snap-align:center;display:flex;flex-direction:column;gap:10px}
.cardbtn{display:block;width:100%;border:0;background:none;padding:0;cursor:pointer;text-align:left;border-radius:22px}
.cardbtn .pass{max-width:none;transition:transform .15s ease}.cardbtn:hover .pass{transform:translateY(-2px)}
.slide-meta{display:flex;align-items:center;gap:10px}.slide-meta .t{flex:1;min-width:0}
.slide-meta .t b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide-meta .t>span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.newcard{width:100%;min-height:420px;border:2px dashed var(--field-line);border-radius:22px;background:transparent;color:var(--link);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:16px;cursor:pointer}
.deckbar{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;color:var(--muted)}
.editbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (prefers-reduced-motion:reduce){.cardbtn .pass{transition:none}}

/* Cards in the scroll all the same height; New Digiprofile always visible below */
.deck{align-items:stretch}
.slide{align-self:stretch}
.cardbtn{flex:1;display:flex}
.cardbtn .pass{flex:1;display:flex;flex-direction:column;margin:0}
.cardbtn .pass .cl{margin-top:auto}
.newbtn{margin-top:6px;border:2px dashed var(--field-line);background:transparent;min-height:60px;justify-content:center}
.newbtn .t{flex:0 1 auto}
.persona{padding:0;overflow:hidden}.persona img{width:100%;height:100%;object-fit:cover;display:block}
.acctpic{display:flex;align-items:center;gap:16px;margin-top:16px}
.acctpic .avbig{width:84px;height:84px;margin:0;font-size:28px}
.qrimg{display:block;height:auto}.pass .qr .qrimg{width:100%}.qrbox .qrimg{width:104px;height:104px}

/* Digidashboard charts: validated two-series palette, light and dark */
:root{--series-1:#2a78d6;--series-2:#eb6834;--grid:#e3e7ef;--axis:#c9d0dc;--up:#146338;--down:#9a3412}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--series-1:#3987e5;--series-2:#d95926;--grid:#26324f;--axis:#3a4a74;--up:#86e0aa;--down:#fdba74}}
:root[data-theme="dark"]{--series-1:#3987e5;--series-2:#d95926;--grid:#26324f;--axis:#3a4a74;--up:#86e0aa;--down:#fdba74}
.dtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.dtile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dtile .tl{font-size:12px;font-weight:700;color:var(--muted)}.dtile b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.tnote{font-size:11px;color:var(--muted);line-height:1.3}.tnote.up{color:var(--up)}.tnote.down{color:var(--down)}
.dcard{margin-top:12px}.dcard h2{font-size:16px}
.dchart{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.dchart .grid{stroke:var(--grid);stroke-width:1}.dchart .axis{stroke:var(--axis);stroke-width:1}
.dchart text{font-family:inherit;font-size:10px;fill:var(--muted)}
.dchart .s1 path{fill:var(--series-1)}.dchart .s2 path{fill:var(--series-2)}
.dchart .hit{fill:transparent}.dchart g:hover .hit{fill:var(--tint);opacity:.5}
.dlegend{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:16px;font-size:13px;font-weight:600}.dlegend li{display:flex;align-items:center;gap:6px}
.k{display:inline-block;width:10px;height:10px;border-radius:3px}.k.s1{background:var(--series-1)}.k.s2{background:var(--series-2)}
.hbars{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.hbar-row{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;align-items:center;gap:8px;font-size:13px}
.hbar-row .hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbar-row .hb{height:12px;border-radius:0 4px 4px 0;background:transparent}
.hbar-row .hb i{display:block;height:100%;min-width:2px;background:var(--series-1);border-radius:0 4px 4px 0}.hbar-row b{font-variant-numeric:tabular-nums}
.dtable{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}.dtable th,.dtable td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}.dtable .num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:380px){.dtiles{grid-template-columns:1fr}}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:14px;font-weight:700;color:var(--muted)}
.inlink{display:inline;border:0;background:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.legal .build{display:inline-block;margin-top:2px;font-size:10.5px;opacity:.85}
.sect-help{display:flex;align-items:center;justify-content:space-between;gap:10px}
.helpbtn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--link);background:var(--surface);color:var(--link);font-weight:800;font-size:15px;cursor:pointer;flex:none}
.helpbtn[aria-expanded="true"]{background:var(--link);color:#fff}
.helpbox{margin:0 0 10px;font-size:13.5px}
.tablewrap{overflow-x:auto}
.subtable{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
.subtable th,.subtable td{padding:10px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.subtable tr:last-child th,.subtable tr:last-child td{border-bottom:0}
.subtable tbody th{font-weight:600;color:var(--muted);width:34%}
.subtable thead th{font-size:16px}
.subtable .sel{background:var(--tint)}
.subtable tr.tot td,.subtable tr.tot th{font-weight:800;color:var(--ink);font-size:15px}
.subtable select{width:100%;min-height:40px;border:1px solid var(--field-line);border-radius:10px;background:var(--field);color:var(--ink);padding:0 8px;font:inherit}
.rad{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:36px;color:var(--ink);font-weight:700}
.rad input{width:18px;height:18px;accent-color:var(--btn);margin:0}
.rad small{font-weight:600;color:var(--ok-ink)}
.cursub h2 .muted{font-weight:600;color:var(--muted);font-size:.8em}
.payopts{display:grid;gap:8px}
.meter{height:10px;border-radius:5px;background:var(--bg2);margin-top:10px;overflow:hidden}.meter i{display:block;height:100%;background:var(--btn);border-radius:5px}
.refer{border:1.5px solid var(--btn)}
.refer h2{font-size:17px}
.review{margin-top:14px;padding:14px;border:1.5px dashed var(--btn);border-radius:16px;background:var(--surface)}
.review .rhead{display:flex;gap:12px;align-items:flex-start}
.review .tile{flex:none}
.review .t b{display:block}.review .t span{display:block;color:var(--muted);font-size:13.5px}
.review .rrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.review .rrow label{font-weight:600;font-size:14px}
.review select{width:auto;flex:0 1 130px;min-height:44px;border:1px solid var(--field-line);border-radius:10px;background:var(--field);color:var(--ink);padding:0 10px;font:inherit}
.review .btn.sm{width:auto;margin:0}
.review.off{display:flex;gap:12px;align-items:center;border-style:solid;border-color:var(--line);color:var(--muted)}
/* A link-style button inside a sentence */
.textbtn{display:inline;border:0;background:none;padding:0;margin:0;color:var(--link);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
a.mi{text-decoration:none;box-sizing:border-box}
.qraddr{margin-top:6px;font-size:11px;line-height:1.3;font-weight:700;color:#0e1a33;text-align:center}.qraddr span{display:block;overflow-wrap:anywhere}
.qrbox .qraddr{max-width:112px;font-size:9.5px}
/* "Your invoice is ready": Save or share / Close (phones) */
.filesheet{position:fixed;inset:0;z-index:60;background:rgba(14,26,51,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.fs-card{width:min(420px,100%);background:var(--surface);color:var(--ink);border-radius:20px;padding:20px 18px 10px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);margin-bottom:env(safe-area-inset-bottom,0px)}
.fs-card b{font-size:18px}.fs-card span{color:var(--muted);font-size:14px;word-break:break-all;margin-bottom:6px}

/* Give us a review: star button beside the account picture, and the star rating */
.hbar.wide .hs{width:100px}.hs.hr{gap:8px}
.revbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:#f5a524;display:grid;place-items:center;cursor:pointer;flex:none}
.stars{display:flex;gap:6px;margin-top:4px}
.star{width:52px;height:52px;border:0;background:none;color:var(--field-line);cursor:pointer;display:grid;place-items:center;border-radius:12px}
.star.on{color:#f5a524}.star.on svg{fill:currentColor}
.star:focus-visible{outline:3px solid var(--link)}

/* Profiles table (DJ, 25 Oct 2026): a table on a computer, compact rows on a phone */
.plist-wrap{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.plist{width:100%;border-collapse:collapse;font-size:14px}
.plist th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line)}
.plist td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.plist tbody tr:last-child td{border-bottom:0}
.plist tbody tr{cursor:pointer}
.plist tbody tr:hover{background:var(--tint)}
.plist .c-col{width:28px;padding-right:0}
.plist .c-shares{text-align:right;font-variant-numeric:tabular-nums}
.plist .c-acts{white-space:nowrap}
.plist th:last-child{text-align:right}
.swatch{display:inline-block;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);vertical-align:middle;flex:none}
.swatch.lg{width:14px;height:14px;align-self:flex-start;margin-top:6px}
.pname{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.pname b{font-size:15px;color:var(--ink)}.pname span{font-size:13px;color:var(--muted)}
.pname:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px}
.aico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--tint);color:var(--tint-ink);margin:2px 3px 2px 0}
.aico.more{width:auto;padding:0 6px;font-size:12px;font-weight:700}
.m-only{display:none}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;font-size:14px;font-weight:600}
.pager .x[disabled]{opacity:.35;cursor:default}
@media (max-width:640px){
 .plist thead{display:none}
 .plist,.plist tbody{display:block}
 .plist tbody tr{display:grid;grid-template-columns:24px auto 1fr auto;grid-template-areas:"col name name shares" ". type status status" ". acts acts acts";column-gap:8px;row-gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
 .plist tbody tr:last-child{border-bottom:0}
 .plist td{display:block;padding:0;border:0}
 .plist .c-col{grid-area:col;padding-top:2px}.plist .c-name{grid-area:name;min-width:0}.plist .c-shares{grid-area:shares;font-size:13px;color:var(--muted)}
 .plist .c-type{grid-area:type}.plist .c-status{grid-area:status}
 .plist .c-acts{grid-area:acts;white-space:normal}
 .m-only{display:inline}
}
/* Manage Digiprofile header */
.hubhead{display:flex;align-items:center;gap:12px;margin-top:10px}
.hubhead .t{min-width:0}.hubhead h1{margin:0;font-size:26px}.hubhead .sub{margin:2px 0 0}
.walletbtn{display:flex;align-items:center;justify-content:center;gap:8px}

/* Apple Wallet pass preview (Apple's generic pass layout) */
.pkpass{border-radius:14px;padding:14px 16px 16px;box-shadow:0 8px 24px rgba(14,26,51,.18);max-width:360px;margin:0 auto}
.pktop{display:flex;align-items:center;gap:8px;font-size:15px}.pktop img{width:28px;height:28px}.pktop span{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;text-align:right}
.pkmain{display:flex;align-items:center;gap:12px;margin-top:16px}.pkname{flex:1;font-size:26px;font-weight:400;line-height:1.15;min-width:0}
.pkthumb{width:72px;height:72px;object-fit:contain;border-radius:6px;flex:none}
.pkrow{display:flex;gap:12px;margin-top:14px}.pkf{flex:1;min-width:0}.pkf small{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.pkf b{display:block;font-size:15px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkqr{margin:18px auto 0;background:#fff;border-radius:8px;padding:10px 10px 6px;width:190px;text-align:center;color:#000}.pkqr img{width:170px;height:170px;display:block}.pkqr small{display:block;font-size:10px;margin-top:4px;word-break:break-all}

.segrow{display:flex;gap:8px;flex-wrap:wrap}.segrow .chip.on{background:var(--link);color:#fff;border-color:var(--link)}
.pktop .pkword{height:26px;width:auto}
.pktop .pklogo{height:30px;max-width:80px;width:auto;object-fit:contain}.pkorg{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pktop span{white-space:nowrap}
.pkname small{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.85;margin-bottom:2px}
.lmeta{display:flex;gap:12px;margin-top:10px;padding:0 4px}.lmeta>div{flex:1;min-width:0}.lmeta small{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.lmeta b{display:block;font-size:15px;overflow-wrap:anywhere}

/* Coloured action icons on the Actions screen (Apple-style tiles; deep shades so the white glyph has 4.5:1 contrast) */
.arow .tile.acol,.tile.acol{color:#fff!important}.arow.dis .tile.acol{background:var(--off,#c9cfda)!important}
.ac-save_contact{background:#8e6e47}.ac-share_back{background:#8944ab}.ac-calendar{background:#d70015}.ac-directions{background:#0071a4}
.ac-call{background:#248a3d}.ac-message{background:#c93400}.ac-email{background:#0040dd}.ac-website{background:#3634a3}.ac-reminder{background:#d30f45}
/* Logo column in the Profiles table */
.plist .c-logo{width:52px}.plist .c-logo img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid var(--line);display:block}
.nologo{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--tint);color:var(--tint-ink)}
@media (max-width:640px){
 .plist tbody tr{grid-template-columns:24px auto 1fr auto;grid-template-areas:"col name name logo" ". type status logo" ". acts acts shares"}
 .plist .c-logo{grid-area:logo;width:auto;justify-self:end}.plist .c-shares{align-self:end}
}
/* Green "Saved" message, and the leave-without-saving dialog */
#toast.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid currentColor}
.modalbg{position:fixed;inset:0;background:rgba(14,26,51,.45);display:grid;place-items:center;z-index:30;padding:16px}
.modal{background:var(--surface);border-radius:18px;padding:20px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h2{margin:0 0 6px}.modal .btn{margin-top:10px}.btn.ghost.danger{background:#c3202c;border-color:#c3202c;color:#ffffff}/* white on red, easy to read (DJ, 30 Oct 2026) */
.walletbtn[disabled]{background:#c9cfda;border-color:#c9cfda;color:#4a5466;opacity:1}

/* Fast Share: the code (green frame, so it isn't confused with the normal QR) and the camera */
.fastqr{position:relative;margin:16px auto 0;width:min(300px,86vw);background:#fff;border:6px solid #1e8e3e;border-radius:22px;padding:14px}
.fastqr img{display:block;width:100%;height:auto}.fsbadge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#1e8e3e;color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.scanbox{position:relative;margin:16px auto 0;width:min(340px,90vw);aspect-ratio:1;border-radius:22px;overflow:hidden;background:#000}
.scanbox video{width:100%;height:100%;object-fit:cover;display:block}.scanframe{position:absolute;inset:14%;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.fastcard h2{display:flex;align-items:center;gap:8px}

/* Fast Share shortcut at the end of each Profiles row */
.plist .c-fast{width:48px;text-align:right}
.fastbtn{width:40px;height:40px;border-radius:12px;border:0;background:#1e8e3e;color:#fff;display:inline-grid;place-items:center;cursor:pointer}
.fastbtn[disabled]{background:var(--off,#c9cfda);cursor:not-allowed}.fastbtn:focus-visible{outline:3px solid var(--link);outline-offset:2px}
@media (max-width:640px){
 .plist tbody tr{grid-template-columns:24px auto 1fr auto auto;grid-template-areas:"col name name name logo" ". type status status logo" ". acts acts shares fast"}
 .plist .c-fast{grid-area:fast;width:auto;align-self:end}
}
.langflag{font-size:26px;line-height:1;flex:none;margin-right:2px}
/* Fast Share button: keep the whole table inside its box on a computer */
.plist-wrap{overflow-x:auto}.plist .c-acts{white-space:normal}.plist .c-acts .aico{margin-bottom:4px}

/* Coloured tiles on the Manage Digiprofile options (same deep shades as the action icons, white glyphs) */
.rowbtn .tile.acol{color:#fff!important}
.hub-edit-details{background:#0040dd}.hub-edit-actions{background:#8944ab}.hub-share-view{background:#248a3d}
.hub-wallet-view{background:#1c1c1e}.hub-preview{background:#0071a4}.hub-copy-profile{background:#248a3d}.hub-stack-appt{background:#e8590c}.hub-new-conference{background:#4b2e83}.hub-delete{background:#d70015}
.rowbtn.danger .tile.hub-delete{background:#d70015!important;color:#fff!important}

/* Placeholders look like hints, not entries */
input::placeholder,textarea::placeholder{color:#b9c0cc;font-style:italic;font-weight:400;opacity:1}
/* "Working…" spinner while the app waits on the server */
#spin{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;background:var(--dark);color:var(--dark-ink);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#spin[hidden]{display:none}
#spin i{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#spin i{animation-duration:2.4s}}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.avatar{overflow:hidden}
.nav button{position:relative}.navbadge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#d70015;color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center}

/* The brand's red and blue diagonal lines, small, under the account picture on every signed-in screen (DJ, 27 Oct 2026) */
.hs.hr{position:relative}
.accentlines{position:absolute;right:-4px;bottom:-16px;width:58px;height:5px;background:#e0101e;/* square ends, as on the website (DJ, 28 Oct 2026) */transform:rotate(-30deg);
 box-shadow:0 9px 0 #10a0e0;pointer-events:none}
.rorow{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}.rorow:last-child{border-bottom:0}.rorow .t{flex:1;min-width:0;display:flex;flex-direction:column}.rorow .t span{font-size:13px;color:var(--muted)}.rorow .x[disabled]{opacity:.3}
/* Required fields that are missing (DJ, 28 Oct 2026): red outline and label until they type */
.field.bad label{color:#c4101b}
/* 'I am 16 or over' tick at sign-up (DJ, 29 Oct 2026) */
.agefield{margin:0 0 10px}.agefield.bad label.check span{color:#e0101e;font-weight:700}
input.invalid,select.invalid,textarea.invalid{border-color:#e0101e!important;box-shadow:0 0 0 3px rgba(224,16,30,.18)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field.bad label{color:#ff6b74}}
:root[data-theme="dark"] .field.bad label{color:#ff6b74}
/* Date fields always show a calendar icon (DJ, 28 Oct 2026); tapping anywhere in the field opens the date picker */
input[type="date"]{position:relative;padding-right:44px;background-repeat:no-repeat;background-position:right 14px center;background-size:20px 20px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6aa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;right:8px;width:32px;height:32px;opacity:0;cursor:pointer}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) input[type="date"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cc0f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] input[type="date"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cc0f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
/* Camera and Library stack inside each picture box so two boxes fit side by side on a phone (DJ, 28 Oct 2026) */
.uploads{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.imgcard .btnrow{flex-wrap:wrap;gap:6px}
.imgcard .btnrow .btn{flex:1 1 100%;min-width:0;justify-content:center}
/* Conferences sit under their Contact profile in the list (DJ, 28 Oct 2026) */
.pname.subp{padding-left:14px}.subarrow{color:var(--muted);font-weight:700;margin-right:6px}
.revbtn svg{fill:currentColor}   /* gold review star (DJ, 5 Nov 2026) */
/* Subscription date pill next to the review star (DJ, 28 Oct 2026) */
.subpill{height:30px;padding:0 12px;border-radius:15px;border:0;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;flex:none}
.subpill.ok{background:#1e9e4f;color:#fff}
.subpill.trial{background:#f39a1e;color:#1f1400}
.subpill.bad{background:#d7101c;color:#fff}
.hs.hr{width:auto!important;min-width:44px}
@media (max-width:420px){.hs.hr{gap:5px}.subpill{height:28px;padding:0 9px;font-size:12px}.revbtn,.persona{width:38px;height:38px}}
@media (max-width:420px){.hbar.wide .hs:not(.hr){width:40px}.hbar.wide .hc .lw img{height:22px}}
/* 6-digit code boxes (DJ, 28 Oct 2026) */
.otp{position:relative;max-width:360px}
.otp-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.otp-boxes span{height:56px;border:1.5px solid var(--field-line,var(--line));border-radius:12px;background:var(--field);display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--ink)}
.otp-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;border:0;padding:0}
.otp-in:focus + .otp-boxes span.cur{border-color:var(--ink);border-width:2px;box-shadow:0 0 0 3px var(--tint)}
.otp-in:focus + .otp-boxes span.cur::after{content:"";width:2px;height:24px;background:var(--ink);animation:otpblink 1s steps(1) infinite}
@keyframes otpblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.otp-in:focus + .otp-boxes span.cur::after{animation:none}}
/* Contact link picker and app tiles (DJ, 28 Oct 2026) */
.btile{color:#fff}.btile svg{display:block}
.rowbtn.pri .tile.btile{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.flabel{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:6px}
.linktabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.linktabs button{background:none;border:0;padding:6px 2px 9px;font-size:16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.linktabs button[aria-selected="true"]{color:var(--link);border-bottom-color:var(--link)}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.linkopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;min-width:0}
.linkopt span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkopt[aria-pressed="true"]{border-color:var(--link);box-shadow:0 0 0 3px var(--tint)}
/* Qualifications on the landing page; tappable phone numbers in the contact box (DJ, 28 Oct 2026) */
.quals p{margin:4px 0 0;white-space:pre-line;color:var(--ink)}
.cr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Add contact / Add social fold open with the arrow (DJ, 28 Oct 2026) */
.addhead{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 2px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.addhead span{flex:1}.addhead svg:first-child{color:var(--link)}
.add .linkgrid{margin:10px 0 6px}
.add .addhead:last-of-type{border-bottom:0}
.imgcard .btnrow .btn{font-size:14px;padding:0 8px;gap:6px}
/* ---- Step 3 (DJ, 28 Oct 2026): Wallet-style stack, its bottom menu, and the menu on the left ---- */
.stack{margin-top:16px;outline:none;max-width:360px;margin-left:auto;margin-right:auto;}
.ststrip{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:58px;padding:0 18px 14px;border:0;border-radius:20px 20px 0 0;
 font-size:15px;font-weight:800;text-align:left;cursor:pointer;box-shadow:0 -2px 10px rgba(14,26,51,.12)}
.stbefore .ststrip{margin-bottom:-16px}.stbefore .ststrip+.ststrip{margin-top:-2px}
.stafter{position:relative;margin-top:-10px}.stafter .ststrip{margin-top:-16px;border-radius:20px 20px 0 0}.stafter .ststrip:first-child{margin-top:0}
.stname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sttype{font-size:12px;font-weight:700;flex:none}
.stfront{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;z-index:1;border-radius:22px;text-align:left}
.stfront .pass{max-width:none}
.stfront:focus-visible,.ststrip:focus-visible{outline:3px solid var(--link);outline-offset:3px}
/* Up and down arrows beside My Digiprofiles' stack, on the right, staying in view as the page scrolls (DJ, 29 Oct 2026).
   Beside it rather than over it, so they never cover a Digiprofile on a phone or a computer. */
.stackrow{display:flex;justify-content:center;align-items:flex-start;gap:8px;margin-top:16px}
.stackrow .stack{flex:1 1 auto;min-width:0;max-width:360px;margin:0}
.stctl{position:sticky;top:calc(50vh - 70px);flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;
 border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 20px rgba(14,26,51,.14);font-size:12px;font-weight:800;color:var(--muted)}
.stctl .x[disabled]{opacity:.3}
.stlinks{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:6px}.stlinks .linkbtn{width:auto;padding:0 4px}
.stacknav button.off{opacity:.4}
/* Header: the menu button on the left; on small phones with a back button the logo becomes the icon */
.burger{width:40px;height:44px;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.hbar.wide .hs:not(.hr){width:auto;min-width:96px;gap:0}
.minidp{display:none;width:30px;height:30px}
@media (max-width:420px){.hbar.wide .hs:not(.hr){min-width:40px}.hbar.hasback .hc .lw{display:none}.hbar.hasback .minidp{display:block}}
/* The menu itself */
.drawerbg{position:fixed;inset:0;background:rgba(5,10,20,.45);z-index:40}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);background:var(--surface);z-index:41;overflow-y:auto;padding:12px 10px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow)}
.drhead{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.drsect{margin:14px 10px 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dri{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.dri svg{color:var(--link);flex:none}.dri:hover,.dri:focus-visible{background:var(--tint)}
.dri[disabled]{color:var(--off);cursor:default}.dri[disabled] svg{color:var(--off)}.dri[disabled]:hover{background:none}
ol.steps{margin:10px 0 0 20px;padding:0;line-height:1.5}ol.steps li{margin-bottom:6px}
/* Appointments (DJ, 28 Oct 2026) */
.c-fast{white-space:nowrap}.fastbtn.apptbtn{background:#FF9500;margin-right:6px}
.note.ok{background:#e3f6ea;color:#0f5a2c}
.two>.field{min-width:0}.two input,.two select{min-width:0;max-width:100%}
.stack{width:100%}  /* the same width for every Digiprofile (DJ, 28 Oct 2026) */
.stbefore{position:relative}.stbefore .ststrip{margin-bottom:-14px}.stbefore .ststrip+.ststrip{margin-top:0}
.stfront{scroll-margin-bottom:96px;scroll-margin-top:80px}

/* Breadcrumbs on a Digiprofile's screens (DJ, 28 Oct 2026) */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-top:26px;font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs i{font-style:normal;opacity:.6}
.crumbs .crumb{background:none;border:0;padding:6px 2px;min-height:32px;font:inherit;color:var(--link,#0c6aa6);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{color:var(--ink,#0e1a33);padding:6px 2px}
.pvbar+.crumbs{margin:10px 16px 0}
.stacknav button.on{color:var(--blue,#0c6aa6)}.stacknav button.on span{font-weight:800}

/* Buttons side by side line up (Share options, DJ 29 Oct 2026) */
.btnrow>.btn+.btn,.two>.btn+.btn,.btnrow>.btn+.linkbtn{margin-top:0}
.lfoot{text-align:center;font-size:14px;color:var(--muted);margin:14px 0 4px}.lfoot a{color:var(--link);font-weight:700}
.durrow{display:flex;gap:8px}.durrow input{flex:1;min-width:0}.durrow select{width:auto;flex:none}
input.locked{background:var(--bg2,#e6eaf4);color:var(--muted);cursor:not-allowed}
.lwarn{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--muted);line-height:1.45}
.lwarn svg{flex:none;margin-top:1px;color:var(--link)}.lwarn b{color:var(--ink)}.lwarn a{color:var(--link);font-weight:700}
.stpay{min-height:120px}
/* Updates 30 Oct 2026: two-colour bottom menu, the live Digiprofile at the top of Edit and Share, email signature, task bubbles */
.nav.duo button.off{opacity:.35;cursor:default}
.nav.duo button[aria-current]{color:var(--ink)}
.nav.duo button[aria-current] svg{transform:scale(1.08)}
.burger{position:relative}.burger .navbadge{top:2px;left:auto;right:-2px}
.drbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:#d70015;color:#fff;font-style:normal;font-size:11.5px;font-weight:800;vertical-align:middle}
.livecard{margin-top:12px;padding:6px 0}
.sigbox{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow-x:auto}
a.dri{text-decoration:none}
/* About us (DJ, 30 Oct 2026): like the website footer */
.about .aboutpanel{background:#0e1a33;color:#b8c6e6;border-radius:16px;padding:18px 18px 20px}
.about .aboutpanel h2{color:#fff;margin:0 0 6px}.about .aboutpanel h3{color:#fff;font-size:15px;margin:18px 0 8px}.about .aboutpanel p{margin:0;line-height:1.45}
.about .madein{display:flex;align-items:center;gap:14px;margin-top:16px}.about .madein .aumap{width:110px;height:auto;flex:none;overflow:visible}
.about .madein span{line-height:1.35}.about .madein b{color:#fff;font-size:15.5px}
.about .madein .pin{animation:pindrop .9s cubic-bezier(.3,1.4,.6,1) both .3s}.about .madein .pulse{transform-box:fill-box;transform-origin:center;animation:pinpulse 2.4s ease-out infinite 1.2s;opacity:0}
@keyframes pindrop{from{transform:translate(var(--px),calc(var(--py) - 30px));opacity:0}to{transform:translate(var(--px),var(--py));opacity:1}}
@keyframes pinpulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){.about .madein .pin,.about .madein .pulse{animation:none}}
.about .social{display:flex;gap:10px}.about .social a,.about .social button{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;border:0;cursor:pointer;padding:0}
.about .social svg{width:20px;height:20px}
.pacts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 2px}.pacts span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid}
.themerow{display:flex;align-items:center;gap:6px;margin-top:10px}.themerow .x{flex:none}
.themes{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px}.themes::-webkit-scrollbar{display:none}
.themes .themetile{flex:0 0 92px;scroll-snap-align:start}
.themetile{position:relative;height:120px;border:2px solid transparent;border-radius:12px;background:#0e1a33 center/cover no-repeat;cursor:pointer;padding:0;overflow:hidden}
.themetile span{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:rgba(14,26,51,.7);color:#fff;font-size:12px;font-weight:700;text-align:left}
.themetile.on{border-color:var(--btn);box-shadow:0 0 0 3px var(--tint)}
.pvtabs{justify-content:center;margin:0 0 8px}
textarea.tall{min-height:150px}
.toupdate{width:auto;margin:6px 0 0;display:inline-flex;gap:6px;align-items:center}

/* My Digiprofiles (DJ, 2 Nov 2026): tabs on the right of the one in front, the back of the card for its details,
   and the buttons below. A thin white edge on top of each separates Digiprofiles of the same colour. */
.stack{position:relative;max-width:394px;padding-right:34px}
.ststrip,.stfront .pass,.stback{border-top:2px solid #ffffff}
.stfw{position:relative}
.sttabs{position:absolute;top:18px;right:-34px;width:34px;display:flex;flex-direction:column;gap:6px;z-index:2}
.sttab{writing-mode:vertical-rl;min-height:92px;padding:12px 0;border:0;border-radius:0 12px 12px 0;color:#ffffff;font:inherit;font-size:14px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:3px 3px 10px rgba(14,26,51,.18)}
.sttab.t-navy{background:#0e1a33}.sttab.t-red{background:#e0101e}.sttab.t-blue{background:#0c6aa6}
.sttab:focus-visible{outline:3px solid var(--link);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sttab.t-navy{box-shadow:0 0 0 1px rgba(255,255,255,.3)}}
:root[data-theme="dark"] .sttab.t-navy{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.stback{position:relative;z-index:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:2px solid #ffffff;border-radius:22px;
 height:min(70vh,640px);height:max(320px,min(640px,calc(100svh - 190px)));overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 20px;box-shadow:0 10px 30px rgba(14,26,51,.18)}
.stbhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.stback .uploads{grid-template-columns:1fr}
.flipin{animation:flipin .35s ease-out}
@keyframes flipin{from{transform:perspective(1200px) rotateY(-90deg)}to{transform:perspective(1200px) rotateY(0)}}
@media (prefers-reduced-motion:reduce){.flipin{animation:none}}
.stbtns{display:flex;justify-content:center;gap:12px;margin-top:16px;padding-right:34px}
.stbtns button{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(14,26,51,.1)}
.stbtns button.del{background:#e0101e;border-color:#e0101e;color:#ffffff}
.stbtns button[disabled]{opacity:.35;cursor:default}
.stpos{min-height:18px;text-align:center;font-size:13px;font-weight:600;color:var(--muted);margin-top:8px;padding-right:34px}
/* The menu's groups */
.drgroup span{flex:1}.drgroup>svg:last-child{color:var(--muted)}
.drsub{margin:0 0 6px 18px;padding-left:6px;border-left:2px solid var(--line)}
.drsub .dri{min-height:42px;font-size:15px}
.drnote{margin:4px 10px;font-size:13px;color:var(--muted)}
.nav.duo button span{white-space:nowrap;font-size:11.5px}
/* Preview: back to My Digiprofiles (DJ, 2 Nov 2026) */
.pvbar .back.pvhome{border:1.5px solid rgba(255,255,255,.7);border-radius:999px;min-height:34px;padding:0 12px 0 6px}
/* The Friends referred tile opens who joined (DJ, 3 Nov 2026) */
.dtile.dtlink{font:inherit;text-align:left;color:inherit;cursor:pointer}
.dtile.dtlink:hover{border-color:var(--link)}

/* Which Digiprofile Share and Wallet are for (DJ, 5 Nov 2026) */
.whichpf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;font-size:20px;line-height:1.25;color:var(--ink)}
.whichpf b{font-weight:800}.whichpf span{color:var(--muted);font-size:14px;font-weight:600}.whichpf svg{flex:none;color:var(--link)}
/* Preview on the back of the Digiprofile (DJ, 5 Nov 2026) */
.cardpv{margin:12px -14px -20px;border-top:1px solid var(--line);overflow:hidden;border-radius:0 0 21px 21px}
.cardpv .screen{min-height:0}
/* B and I above About and Description (DJ, 5 Nov 2026) */
.fmtbar{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.fmtbar button{width:40px;height:36px;border:1px solid var(--field-line);border-radius:8px;background:var(--field);color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.fmtbar button:focus-visible{outline:3px solid var(--link)}
.fmtbar .hint{margin:0 0 0 4px;font-size:13px}

/* Organisation Manager's template designer (DJ, 5 Nov 2026) */
body.tplmode .legal{display:none}
.tplscreen .stack{margin-top:10px}
.tplbar{margin-top:22px}
.tplgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.tplacts{margin-top:8px}
.tplact{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.tplact input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--link)}
.tplact b{display:block;font-size:15px}.tplact small{display:block;color:var(--muted);font-size:13px;line-height:1.3}