/* aiflo client portal – same tokens, font and buttons as the homepage (assets/base.css) */
[hidden]{display:none!important}
.muted{color:var(--t2)}.small{font-size:.82rem}
.btn-block{width:100%}
.btn-danger{background:transparent;color:var(--red);border-color:rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.08)}
.btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b8f99' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
input::placeholder,textarea::placeholder{color:var(--t3)}

/* ── boot ─────────────────────────────────────────────── */
.boot{min-height:100vh;display:grid;place-items:center}
.boot-logo{font-size:2rem;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

/* ── login ────────────────────────────────────────────── */
.auth-screen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2.5rem 1.25rem;position:relative;overflow:hidden}
.auth-glow{position:absolute;inset:-20% -10% auto;height:75%;background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(74,222,128,.16),transparent 70%);pointer-events:none}
.auth-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 65%);pointer-events:none}
.auth-wrap{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}
.auth-brand{display:block;margin-bottom:.4rem}
.auth-brand .hero-logo-combined{margin-bottom:1.6rem;gap:12px}
.auth-brand .hero-logo-text{font-size:64px}
.auth-brand .hero-logo-halo{width:130px;height:12px}
.auth-brand .hero-logo-particles span{animation-name:particleRiseSm}
@keyframes particleRiseSm{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}80%{opacity:.3}100%{opacity:0;transform:translateY(-55px)}}
.auth{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--bg-2);border:1px solid var(--border-2);border-radius:20px;padding:2rem 2rem 1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.auth h1{font-size:1.45rem;letter-spacing:-.03em;line-height:1.25}
.auth>section>p.muted{font-size:.92rem;margin-top:.25rem}
.auth form{margin:1.5rem 0 0}
.auth a{color:var(--green)}
.field{margin-bottom:1rem}
.pw{position:relative}
.pw input{padding-right:4.2rem}
.pw-toggle{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--t2);font:inherit;font-size:.78rem;font-weight:700;padding:.35rem .5rem;cursor:pointer;border-radius:6px}
.pw-toggle:hover{color:var(--t1)}
.err{display:flex;gap:.55rem;align-items:flex-start;background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.22);color:#fca5a5;border-radius:10px;padding:.65rem .8rem;font-size:.86rem;margin-bottom:1rem;line-height:1.45}
.err:before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:rgba(248,113,113,.18);color:var(--red);display:grid;place-items:center;font-weight:800;font-size:.72rem;margin-top:1px}
.forgot{margin-top:1rem;font-size:.86rem;color:var(--t2)}
.forgot summary{cursor:pointer;list-style:none;text-align:center;color:var(--t2)}
.forgot summary::-webkit-details-marker{display:none}
.forgot summary:hover{color:var(--t1)}
.forgot p{margin-top:.6rem;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:.7rem .85rem;line-height:1.5}
.linkbtn{display:block;margin:.9rem auto 0;background:none;border:0;color:var(--t2);font:inherit;font-size:.86rem;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--t1)}
.ok-note{display:flex;gap:.55rem;align-items:flex-start;background:var(--green-bg);border:1px solid var(--green-bd);color:#bbf7d0;border-radius:10px;padding:.65rem .8rem;font-size:.86rem;margin-bottom:1rem;line-height:1.45}
.ok-note:before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%;background:rgba(74,222,128,.18);color:var(--green);display:grid;place-items:center;font-weight:800;font-size:.7rem;margin-top:1px}
.forgot-manual p{margin-top:1.2rem;background:var(--bg-3);border:1px solid var(--border);border-radius:10px;padding:.8rem .95rem;line-height:1.55;font-size:.9rem;color:var(--t2)}
.pay-box{border:1px solid var(--green-bd);background:linear-gradient(135deg,rgba(74,222,128,.08),transparent 60%),var(--bg-2);border-radius:16px;padding:1.1rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.pay-box b{font-size:1.05rem}.pay-box p{color:var(--t2);font-size:.86rem}
.doc-pay{margin-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.doc-pay>div{border:1px solid #e6e8ec;border-radius:10px;padding:.9rem 1rem}
.doc-pay h4{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#16a34a;margin-bottom:.4rem}
.doc-pay dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;font-size:.86rem}.doc-pay dt{color:#6b7280}.doc-pay dd{font-weight:700;color:#111418}
.doc-pay a.paylink{display:inline-block;margin-top:.3rem;background:#16a34a;color:#fff;font-weight:700;padding:.45rem 1rem;border-radius:999px;font-size:.85rem}
.sent-log{color:var(--t3);font-size:.8rem;margin-top:.7rem;text-align:center}
.sent-log b{color:var(--t2);font-weight:600}
.email-frame{width:100%;height:480px;border:1px solid var(--border-2);border-radius:12px;background:#f4f5f7}
.modal-card.wide{max-width:680px}
.mail-meta{display:grid;grid-template-columns:70px 1fr;gap:.3rem .8rem;font-size:.86rem;margin:.9rem 0}.mail-meta dt{color:var(--t3)}.mail-meta dd{overflow-wrap:anywhere}
.doc-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:1rem}
.doc-actions .grp{display:flex;gap:.5rem;flex-wrap:wrap}
.demo-box{margin-top:1.3rem;border:1px dashed rgba(74,222,128,.28);background:rgba(74,222,128,.035);border-radius:14px;padding:1rem 1.05rem;font-size:.88rem}
.demo-box-h{display:flex;align-items:center;gap:.5rem}
.demo-box p{color:var(--t2);margin:.3rem 0 .85rem;line-height:1.5}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.auth-foot{margin-top:1.4rem;font-size:.84rem;color:var(--t3);text-align:center}
.auth-foot a{color:var(--t2)}.auth-foot a:hover{color:var(--t1)}
.meter{height:4px;border-radius:4px;background:var(--bg-3);margin-top:.5rem;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--red);transition:width .2s,background .2s}

/* ── shell ────────────────────────────────────────────── */
#app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:50;height:30px;display:flex;align-items:center;justify-content:center;gap:.6rem;background:#1a1606;border-bottom:1px solid rgba(251,191,36,.25);color:#fcd34d;font-size:.78rem;font-weight:600}
.demo-banner span{background:var(--amber);color:#1a1300;border-radius:999px;padding:1px 8px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.demo-banner a{color:#fde68a;text-decoration:underline;text-underline-offset:2px}
#app.demo{padding-top:30px}
.side{position:sticky;top:0;height:100vh;background:var(--bg-2);border-right:1px solid var(--border);padding:1.5rem 1rem 1.2rem;display:flex;flex-direction:column;gap:1.1rem;overflow-y:auto}
#app.demo .side{top:30px;height:calc(100vh - 30px)}
.side-logo{font-size:1.45rem;padding:0 .55rem;margin-bottom:.2rem}
.client{display:flex;align-items:center;gap:.65rem;background:var(--bg-3);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem}
.client .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.client-t{min-width:0;line-height:1.25}
.client-t small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.client-t b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-pick{margin:0}
.admin-scope #clientPickWrap,.admin-scope #clientBox{display:none!important}
.client-pick span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin:0 0 .3rem .2rem}
.client-pick select{padding:.5rem .8rem;font-size:.86rem}
.pnav{display:grid;gap:.15rem}
.pnav a{display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:10px;color:var(--t2);font-size:.9rem;font-weight:600;transition:background .15s,color .15s}
.pnav a i{font-style:normal}
.pnav a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pnav a:hover{color:var(--t1);background:rgba(255,255,255,.035)}
.pnav a.on{color:var(--t1);background:var(--green-bg);box-shadow:inset 0 0 0 1px var(--green-bd)}
.pnav a.on svg{color:var(--green)}
.side-foot{margin-top:auto;display:grid;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.who-am-i{display:flex;gap:.6rem;align-items:center;min-width:0;padding:0 .2rem}
.who-am-i>div{min-width:0;line-height:1.3}
.who-am-i b{display:block;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-am-i small{color:var(--t3);font-size:.72rem}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green);font-weight:800;font-size:.8rem;text-transform:uppercase}
.av.lg{width:52px;height:52px;font-size:1.05rem}
.main{padding:2.4rem 2.75rem 5rem;max-width:1140px;width:100%;outline:none}
.view-in{animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── page furniture ───────────────────────────────────── */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.ph .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.3rem}
.ph h1{font-size:1.7rem;letter-spacing:-.035em;line-height:1.2}
.ph p{color:var(--t2);font-size:.93rem;margin-top:.2rem}
.ph-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.5rem}
.stat{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:1rem 1.15rem;position:relative;overflow:hidden}
.stat b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.04em;line-height:1.15}
.stat span{color:var(--t2);font-size:.8rem;font-weight:500}
.stat.hl{background:linear-gradient(135deg,rgba(74,222,128,.1),transparent 60%),var(--bg-2);border-color:var(--green-bd)}
.stat.hl b{color:var(--green)}
.panel{background:var(--bg-2);border:1px solid var(--border);border-radius:16px}
.panel+.panel{margin-top:1rem}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 1.3rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-h h2{font-size:1rem;letter-spacing:-.01em}
.panel-h p{color:var(--t3);font-size:.8rem}
.panel-b{padding:1.3rem}
.stack{display:grid;gap:1rem;align-content:start}
.hint{color:var(--t3);font-size:.78rem;margin-top:.4rem;line-height:1.45}
.count{float:right;color:var(--t3);font-weight:500;font-size:.75rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.form-grid .full{grid-column:1/-1}
.bar{display:flex;gap:.6rem;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:1.2rem}
.bar .note{margin-right:auto;color:var(--t3);font-size:.82rem}
.sticky-bar{position:sticky;bottom:1rem;z-index:5;background:rgba(15,16,18,.92);backdrop-filter:blur(10px);border:1px solid var(--border-2);border-radius:14px;padding:.75rem .9rem;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.back{display:inline-flex;align-items:center;gap:.4rem;color:var(--t2);font-size:.86rem;font-weight:600;margin-bottom:1.1rem}
.back:hover{color:var(--t1)}
.search{position:relative;flex:1;max-width:300px}
.search input{padding:.55rem .85rem .55rem 2.2rem;font-size:.88rem;border-radius:999px}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--t3);fill:none;stroke-width:2}
.seg{display:inline-flex;background:var(--bg-3);border:1px solid var(--border);border-radius:999px;padding:3px}
.seg button{background:none;border:0;color:var(--t2);font:inherit;font-size:.8rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--bg-2);color:var(--t1);box-shadow:0 0 0 1px var(--border-2)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--border-2);color:var(--t2);background:rgba(255,255,255,.02);white-space:nowrap;line-height:1.5}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.g{color:var(--green);border-color:var(--green-bd);background:var(--green-bg)}
.chip.a{color:var(--amber);border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.07)}
.chip.r{color:var(--red);border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.07)}
.chip.b{color:#7dd3fc;border-color:rgba(125,211,252,.25);background:rgba(125,211,252,.07)}
.chip.plain:before{display:none}

/* empty / error / skeleton */
.empty{padding:3rem 1.5rem;text-align:center;color:var(--t2)}
.empty .em-ico{width:52px;height:52px;margin:0 auto 1rem;border-radius:16px;display:grid;place-items:center;background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)}
.empty .em-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.empty h3{color:var(--t1);font-size:1.02rem;margin-bottom:.3rem}
.empty p{font-size:.9rem;max-width:380px;margin:0 auto;line-height:1.55}
.empty .btn{margin-top:1.2rem}
.empty.error .em-ico{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);color:var(--red)}
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,var(--bg-3) 25%,#1d1e22 50%,var(--bg-3) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.sk-row{display:grid;grid-template-columns:90px 1fr 80px;gap:1rem;align-items:center;padding:1.05rem 1.3rem;border-bottom:1px solid var(--border)}

/* ── calls list ───────────────────────────────────────── */
.day-h{padding:.55rem 1.3rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);background:rgba(255,255,255,.015);border-bottom:1px solid var(--border)}
.calls{list-style:none}
.calls li.row{display:grid;grid-template-columns:64px 40px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.95rem 1.3rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;position:relative}
.calls li.row:hover,.calls li.row:focus-visible{background:rgba(255,255,255,.025);outline:none}
.calls li.row.unseen:before{content:"";position:absolute;left:.5rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.6)}
.calls .t{font-size:.86rem;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.calls .t small{display:block;color:var(--t3);font-weight:500;font-size:.75rem}
.calls .who{min-width:0}
.calls .who-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.calls .who b{font-size:.95rem}
.calls .who .co{color:var(--t3);font-weight:500;font-size:.84rem}
.calls .msg{color:var(--t2);font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.calls .meta{display:flex;align-items:center;gap:.6rem;color:var(--t3);font-size:.8rem;font-variant-numeric:tabular-nums}
.calls .chev{width:16px;height:16px;stroke:var(--t3);fill:none;stroke-width:2}
.more{padding:1rem;text-align:center;border-top:1px solid var(--border)}

/* ── call detail ──────────────────────────────────────── */
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:start}
.msg-card{background:linear-gradient(180deg,rgba(74,222,128,.06),transparent 45%),var(--bg-2);border:1px solid var(--border-2);border-radius:18px;padding:1.5rem}
.msg-head{display:flex;gap:.9rem;align-items:center}
.msg-head h1{font-size:1.4rem;letter-spacing:-.03em;line-height:1.2}
.msg-head p{color:var(--t2);font-size:.86rem}
.msg-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 0}
.quote{margin:1.2rem 0;padding:1.1rem 1.2rem;border-radius:14px;background:var(--bg);border:1px solid var(--border);font-size:1.02rem;line-height:1.6;position:relative}
.quote small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:.35rem}
.kv{display:grid;grid-template-columns:120px 1fr;gap:.65rem 1rem;font-size:.9rem}
.kv dt{color:var(--t3)}
.kv dd{min-width:0;overflow-wrap:anywhere}
.kv dd a{color:var(--green);font-weight:600}
.msg-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.player{display:flex;align-items:center;gap:.9rem}
.player .pp{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--green);color:#0a0d0a;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 22px rgba(74,222,128,.28);transition:transform .15s}
.player .pp:hover{transform:scale(1.05)}
.player .pp svg{width:18px;height:18px;fill:currentColor}
.player .track{flex:1;min-width:0}
.player .bar-t{position:relative;height:6px;border-radius:6px;background:var(--bg-3);cursor:pointer}
.player .bar-t i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--green);width:0}
.player .bar-t b{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;left:0;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.player .times{display:flex;justify-content:space-between;color:var(--t3);font-size:.75rem;margin-top:.4rem;font-variant-numeric:tabular-nums}
.player .rate{flex:none;background:var(--bg-3);border:1px solid var(--border-2);color:var(--t2);border-radius:999px;font:inherit;font-size:.76rem;font-weight:700;padding:.3rem .6rem;cursor:pointer}
.tx{display:grid;gap:.6rem;max-height:520px;overflow:auto;padding-right:.2rem}
.tx div{font-size:.88rem;padding:.65rem .85rem;border-radius:12px;background:var(--bg-3);max-width:88%;line-height:1.5}
.tx .agent{border:1px solid var(--green-bd);background:var(--green-bg);border-bottom-left-radius:4px}
.tx .user{margin-left:auto;border-bottom-right-radius:4px}
.tx small{display:block;color:var(--t3);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.1rem}

/* ── script & voice ───────────────────────────────────── */
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
.voice{color:var(--t1);margin:0;position:relative;border:1px solid var(--border-2);border-radius:14px;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;cursor:pointer;transition:border-color .15s,background .15s}
.voice:hover{border-color:rgba(255,255,255,.2)}
.voice input{position:absolute;opacity:0;pointer-events:none}
.voice b{display:block;font-size:.95rem;color:var(--t1)}
.voice span{color:var(--t2);font-size:.78rem;font-weight:500}
.voice:has(input:checked){border-color:var(--green);background:var(--green-bg);box-shadow:0 0 0 1px var(--green) inset}
.voice:has(input:checked) b:after{content:" ✓";color:var(--green)}
.iconbtn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--green-bd);background:var(--green-bg);color:var(--green);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:13px;height:13px;fill:currentColor}
.preview-greet{display:flex;gap:.7rem;align-items:flex-start;margin-top:.9rem;padding:.8rem .95rem;border-radius:12px;background:var(--bg);border:1px dashed var(--border-2);font-size:.88rem;color:var(--t2)}
.preview-greet b{color:var(--t1);font-weight:600}

/* ── invoices list ────────────────────────────────────── */
.inv{width:100%;border-collapse:collapse;font-size:.9rem}
.inv th{text-align:left;color:var(--t3);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:.8rem 1.2rem;border-bottom:1px solid var(--border)}
.inv td{padding:.95rem 1.2rem;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.inv tr:last-child td{border-bottom:0}
.inv tbody tr{cursor:pointer;transition:background .15s}
.inv tbody tr:hover{background:rgba(255,255,255,.025)}
.inv .num{font-weight:700}
.inv .r{text-align:right}
.inv a{color:var(--green);font-weight:600}

/* ── admin ────────────────────────────────────────────── */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:1.3rem;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--t2);font:inherit;font-size:.9rem;font-weight:600;padding:.6rem .9rem;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tabs button.on{color:var(--t1);border-bottom-color:var(--green)}
.tabs button em{font-style:normal;color:var(--t3);font-weight:500;margin-left:.3rem}
.grid-2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:start}
.list{list-style:none}
.list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.3rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.list li:last-child{border-bottom:0}
.list .l-main{min-width:0;flex:1}
.list .l-main b{font-size:.93rem}
.list .l-main small{display:block;color:var(--t3);font-size:.78rem;overflow-wrap:anywhere}
.list .l-act{display:flex;gap:.4rem;flex-wrap:wrap}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em}
.lines{display:grid;gap:.5rem}
.line{display:grid;grid-template-columns:minmax(0,1fr) 80px 110px 90px 34px;gap:.5rem;align-items:center}
.line .amt{text-align:right;font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums}
.line-h{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.x{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-2);background:none;color:var(--t3);cursor:pointer;font-size:1rem}
.x:hover{color:var(--red);border-color:rgba(248,113,113,.3)}
.totals{margin-left:auto;max-width:280px;display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;font-size:.9rem;font-variant-numeric:tabular-nums;margin-top:1rem}
.totals .grand{font-size:1.1rem;font-weight:800;padding-top:.45rem;border-top:1px solid var(--border-2)}
.check{display:flex;align-items:center;gap:.55rem;color:var(--t1);font-size:.9rem;font-weight:600;margin:0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--green)}

/* modal + toast */
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:grid;place-items:center;padding:1.2rem}
.modal-card{width:100%;max-width:440px;background:var(--bg-2);border:1px solid var(--border-2);border-radius:18px;padding:1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-card h2{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.4rem}
.modal-card p{color:var(--t2);font-size:.9rem}
.secret{display:flex;gap:.5rem;margin:1rem 0;align-items:center;background:var(--bg);border:1px solid var(--green-bd);border-radius:12px;padding:.7rem .8rem}
.secret code{flex:1;font-size:1rem;color:var(--green);letter-spacing:.03em;overflow-wrap:anywhere}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.55rem;background:var(--bg-3);border:1px solid var(--border-2);padding:.7rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:500;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100vw - 2rem);animation:fadeUp .2s ease}
.toast:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.toast.bad:before{background:var(--red)}

/* ── invoice document (screen = dark frame around a light page, print = light page only) ── */
.doc-wrap{display:flex;justify-content:center}
.doc{width:100%;max-width:820px;background:#fff;color:#111418;border-radius:14px;padding:3rem 3.2rem;box-shadow:0 30px 80px rgba(0,0,0,.5);font-size:.9rem;line-height:1.5;position:relative;overflow:hidden}
.doc:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#16a34a,#4ade80,#22d3ee)}
.doc-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
.doc .d-logo{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:#111418}
.doc .d-logo em{font-style:normal;color:#16a34a}
.doc .d-title{text-align:right}
.doc .d-title h2{font-size:1.7rem;letter-spacing:-.03em;line-height:1;color:#111418}
.doc .d-title p{color:#5b6270;margin-top:.35rem;font-weight:600}
.doc .stamp{display:inline-block;margin-top:.6rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .7rem;border-radius:999px;border:1.5px solid}
.doc .stamp.paid{color:#15803d;border-color:#15803d;background:#f0fdf4}
.doc .stamp.unpaid{color:#b45309;border-color:#d97706;background:#fffbeb}
.doc .stamp.overdue{color:#b91c1c;border-color:#dc2626;background:#fef2f2}
.doc .stamp.void{color:#6b7280;border-color:#9ca3af;background:#f9fafb}
.doc-parties{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin:2.4rem 0 2rem;padding:1.3rem 0;border-top:1px solid #e6e8ec;border-bottom:1px solid #e6e8ec}
.doc-parties h4{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#16a34a;margin-bottom:.4rem}
.doc-parties p{white-space:pre-line;color:#30353d}
.doc-parties b{color:#111418}
.doc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.doc th{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;text-align:left;padding:.55rem .6rem;border-bottom:2px solid #111418}
.doc td{padding:.75rem .6rem;border-bottom:1px solid #eceef1;vertical-align:top}
.doc .r{text-align:right}
.doc-totals{margin:1.2rem 0 0 auto;width:300px;display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;font-variant-numeric:tabular-nums}
.doc-totals span{color:#5b6270}
.doc-totals .grand{font-size:1.2rem;font-weight:800;color:#111418;padding:.7rem .8rem;margin:.4rem -.8rem 0;background:#f0fdf4;border-radius:10px;border:1px solid #bbf7d0}
.doc-totals .grand span{color:#111418}
.doc-notes{margin-top:2.2rem;padding:1rem 1.1rem;background:#f7f8fa;border-radius:10px;white-space:pre-line;color:#30353d}
.doc-notes h4{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;margin-bottom:.3rem}
.doc-foot{margin-top:2.4rem;padding-top:1rem;border-top:1px solid #e6e8ec;display:flex;justify-content:space-between;gap:1rem;color:#6b7280;font-size:.8rem;flex-wrap:wrap}
.doc-foot b{color:#16a34a}

/* ── mobile ───────────────────────────────────────────── */
@media (max-width:900px){
  #app{grid-template-columns:1fr;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .side{position:sticky;top:0;height:auto;z-index:30;flex-direction:row;align-items:center;gap:.6rem;padding:.75rem 1rem;border-right:0;border-bottom:1px solid var(--border);background:#0f1012;overflow:visible}
  #app.demo .side{top:30px;height:auto}
  .side-logo{font-size:1.25rem;padding:0;margin:0}
  .client{margin-left:auto;padding:.35rem .65rem;border-radius:999px;max-width:55%}
  .client-t small{display:none}
  .client-t b{font-size:.8rem}
  .client-pick{margin-left:auto;max-width:55%}
  .client-pick span{display:none}
  .pnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;gap:0;background:rgba(15,16,18,.96);backdrop-filter:blur(14px);border-top:1px solid var(--border-2);padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom))}
  .pnav a{flex:1;flex-direction:column;gap:.2rem;padding:.4rem .1rem;font-size:.66rem;border-radius:10px;text-align:center}
  .pnav a .xl{display:none}
  .pnav a.on{background:none;box-shadow:none;color:var(--green)}
  .side-foot{display:none}
  .main{padding:1.4rem 1rem 2.5rem}
  .ph h1{font-size:1.4rem}
  .stats{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat{padding:.85rem 1rem}.stat b{font-size:1.4rem}
  .detail,.form-grid,.grid-2{grid-template-columns:1fr}
  .panel-h{padding:.9rem 1rem}.panel-b{padding:1.1rem 1rem}
  .search{max-width:none;flex-basis:100%}
  .calls li.row{grid-template-columns:36px minmax(0,1fr) auto;gap:.75rem;padding:.9rem 1rem .9rem 1.1rem}
  .calls .t{display:none}
  .calls .msg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .calls .meta{flex-direction:column;align-items:flex-end;gap:.15rem}
  .calls .meta .tm{color:var(--t1);font-weight:700}
  .calls .chev{display:none}
  .day-h{padding:.5rem 1rem}
  .msg-card{padding:1.2rem}
  .msg-head h1{font-size:1.25rem}
  .kv{grid-template-columns:96px 1fr}
  .msg-actions .btn{flex:1}
  .inv .hide-m{display:none}
  .inv th,.inv td{padding:.8rem .9rem}
  .line{grid-template-columns:1fr 64px 88px 34px}
  .line .amt{display:none}
  .line-h .amt{display:none}
  .sticky-bar{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .doc{padding:2rem 1.3rem;border-radius:12px;font-size:.84rem}
  .doc .d-logo{font-size:1.8rem}
  .doc .d-title h2{font-size:1.3rem}
  .doc-parties{grid-template-columns:1fr 1fr;gap:1rem}
  .doc-parties>div:first-child{grid-column:1/-1}
  .doc-totals{width:100%}
  .doc-pay{grid-template-columns:1fr}
  .email-frame{height:380px}
  .doc-actions .grp{width:100%}.doc-actions .grp .btn{flex:1}
  .doc th:nth-child(2),.doc td:nth-child(2){display:none}
}
@media (max-width:420px){.auth{padding:1.6rem 1.3rem 1.3rem}.auth-brand .hero-logo-text{font-size:54px}}

/* ── print: invoice only, on white ────────────────────── */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff!important}
  body *{visibility:hidden}
  .doc,.doc *{visibility:visible}
  .doc{position:absolute;left:0;top:0;max-width:none;box-shadow:none;border-radius:0;padding:0;font-size:10.5pt}
  .doc:before{top:-14mm;height:4px}
  .doc-pay a.paylink{display:none}
  .no-print,.demo-banner,.pnav,.side,.toast{display:none!important}
  .doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){.sk,.boot-logo,.pulse,.view-in{animation:none}}

/* extras for the rebuilt portal.js */
.glink{color:var(--green);text-decoration:none}.glink:hover{text-decoration:underline}
.checkout{max-width:520px;margin:2.5rem auto}
.checkout .panel-b{text-align:center;padding:2.6rem 1.8rem}
.checkout .em-ico{margin:0 auto 1rem}
.checkout h2{font-size:1.25rem;margin-bottom:.4rem}
.checkout .muted{margin-bottom:1.4rem}
.bar.center{justify-content:center}
.vat-rate{max-width:170px;margin-top:.7rem}
.check{margin:1rem 0 .2rem}
.player.playing .pp{box-shadow:0 0 0 6px rgba(34,197,94,.15)}
.checkout .em-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)}
.checkout .em-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.doc-totals .grand{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.line-h .amt{font-size:inherit;font-weight:inherit}
.print-only{display:none}
@media print{.print-only{display:inline}}
.grid-2>.panel+.panel{margin-top:0}
.demo-banner em{font-style:normal}.demo-banner .db-short{display:none}
@media (max-width:640px){.demo-banner .db-long{display:none}.demo-banner .db-short{display:inline}.demo-banner{white-space:nowrap}}
.doc-actions .btn{white-space:nowrap}
@media (max-width:640px){
  .list li{flex-direction:column;align-items:stretch;gap:.7rem}
  .list .l-act{justify-content:flex-start}
  .doc-actions .grp{flex-wrap:wrap}
}
.nowrap{white-space:nowrap}

/* admin: enquiries */
.enq .enq-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.enq .enq-biz{color:var(--t2);font-size:.85rem}
.enq .enq-biz:before{content:"·";margin-right:.5rem;color:var(--t3)}
.enq small a{color:var(--t2)}
.enq small a:hover{color:var(--green)}
.enq .enq-msg{margin:.5rem 0 .2rem;font-size:.88rem;color:var(--t1);white-space:pre-wrap;overflow-wrap:anywhere;max-width:70ch}
.enq .enq-msg.muted{color:var(--t3)}
.enq li{align-items:flex-start}
.enq li.done .l-main{opacity:.65}

/* prepaid balance */
.ph-r{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;flex:1;justify-content:flex-end}
.bal-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--t2);border:1px solid var(--border-2);background:rgba(255,255,255,.02);white-space:nowrap;transition:border-color .15s}
.bal-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bal-pill b{font-variant-numeric:tabular-nums;font-weight:800}
.bal-pill.pos{border-color:var(--green-bd);background:var(--green-bg)}.bal-pill.pos b,.bal-pill.pos svg{color:var(--green)}
.bal-pill.neg{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}.bal-pill.neg b,.bal-pill.neg svg{color:var(--red)}
.bal-pill:hover{border-color:currentColor}
b.neg,td.neg{color:var(--red)}
b.pos{color:var(--green)}b.amb{color:var(--amber)}
.neg-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;margin:-.4rem 0 1.4rem;border:1px solid rgba(248,113,113,.3);background:rgba(248,113,113,.07);border-radius:14px}
.neg-banner>svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.neg-banner div{flex:1;min-width:0}.neg-banner b{color:var(--t1)}.neg-banner p{color:var(--t2);font-size:.88rem;margin-top:.15rem}
.note-ok{padding:.85rem 1.1rem;margin-bottom:1.2rem;border:1px solid var(--green-bd);background:var(--green-bg);color:var(--t1);border-radius:12px;font-size:.92rem}
.bal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1rem;margin-bottom:1rem;align-items:start}
.bal-card{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;border-radius:16px;border:1px solid var(--green-bd);background:linear-gradient(160deg,rgba(74,222,128,.10),rgba(74,222,128,.02) 60%)}
.bal-card.neg{border-color:rgba(248,113,113,.35);background:linear-gradient(160deg,rgba(248,113,113,.12),rgba(248,113,113,.02) 60%)}
.bal-l{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.bal-v{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--green);font-variant-numeric:tabular-nums}
.bal-card.neg .bal-v{color:var(--red)}
.bal-s{display:flex;align-items:center;gap:.4rem;font-weight:600;color:var(--t1);font-size:.92rem}
.bal-s svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bal-rates{color:var(--t2);font-size:.86rem;margin-top:.4rem}
.bal-card small{font-size:.78rem}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.amts .amt{padding:.8rem .4rem;border-radius:12px;border:1px solid var(--border-2);background:rgba(255,255,255,.02);color:var(--t1);font:inherit;font-weight:800;font-size:1rem;cursor:pointer;transition:border-color .15s,background .15s}
.amts .amt:hover{border-color:var(--green-bd)}
.amts .amt.on{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.topup .btn-primary{width:100%;justify-content:center}
.gbp-in{display:flex;align-items:center;border:1px solid var(--border-2);border-radius:10px;background:var(--bg-2,rgba(255,255,255,.02))}
.gbp-in span{padding:0 .2rem 0 .8rem;color:var(--t3);font-weight:700}
.gbp-in input{border:0;background:transparent}
.bankd{margin:.9rem 0}
.alt-pay{margin-top:1rem;font-size:.88rem;color:var(--t2)}
.alt-pay summary{cursor:pointer;font-weight:600}
.ledger td small{display:block;color:var(--t3);font-size:.75rem}
.ledger tbody tr{cursor:default}
.ledger .amt{font-weight:700;white-space:nowrap}.ledger .amt.in{color:var(--green)}
.ledger .nowrap{white-space:nowrap}
.lt{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-right:.35rem}
.lt.topup,.lt.adjustment{color:var(--green)}
.row.locked .who b{color:var(--t2)}
.row.locked .msg{color:var(--t3)}
.av.lock{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3);color:var(--red)}
.av.lock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lock-card{max-width:560px;margin:1rem auto;padding:2.2rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lock-card h1{font-size:1.6rem;letter-spacing:-.03em}
.lock-card p{color:var(--t2);max-width:46ch}
.lock-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3)}
.lock-ico svg{width:24px;height:24px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bal-admin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1rem;align-items:start}
.bal-list li{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.bal-list li.on{background:var(--green-bg);box-shadow:inset 3px 0 0 var(--green)}
.bal-list li small{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.bal-list li>b{font-variant-numeric:tabular-nums}
@media (max-width:860px){
  .bal-grid,.bal-admin{grid-template-columns:1fr}
  .ph-r{justify-content:flex-start}
  .neg-banner{flex-wrap:wrap}
  .neg-banner .btn{width:100%;justify-content:center}
  .amts{grid-template-columns:repeat(2,1fr)}
  .bal-v{font-size:2.2rem}
}

/* payment methods, bank transfer, Direct Debit */
.pm-list{display:grid;gap:.5rem;margin:1rem 0}
.pm{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;padding:.8rem .9rem;border-radius:12px;border:1px solid var(--border);background:transparent;color:inherit;cursor:pointer;font:inherit}
.pm:hover{border-color:rgba(255,255,255,.25)}
.pm.on{border-color:var(--green);background:var(--green-bg)}
.pm-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);flex:none}
.pm-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pm.on .pm-ic{color:var(--green)}
.pm-t{flex:1;min-width:0;display:grid;gap:.1rem}.pm-t small{color:var(--t3);font-size:.82rem}
.pm-tag{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#04140a;background:var(--green);border-radius:999px;padding:.1rem .45rem;margin-left:.35rem;vertical-align:middle}
.pm-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex:none}
.pm.on .pm-dot{border-color:var(--green);box-shadow:inset 0 0 0 4px var(--bg-2);background:var(--green)}
.pay-more{margin-bottom:1.25rem;align-items:start}
.bal-pend{display:block;margin-top:.4rem;font-size:.85rem;color:var(--amber)}
.dd-pend{border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);border-radius:10px;padding:.65rem .8rem;margin:.75rem 0;display:grid;gap:.15rem}
.dd-pend small{color:var(--t3)}
.lbl{display:block;font-size:.85rem;color:var(--t3);margin:.9rem 0 .4rem}
.neg-banner.warn{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
/* new client flow */
.script-prev{white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;font:inherit;font-size:.84rem;line-height:1.55;color:var(--t2);max-height:420px;overflow:auto}
.np-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem;margin:.6rem 0 1rem}
.np-item{display:flex;align-items:center;gap:.6rem;border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;cursor:pointer;margin:0}
.np-item:has(input:checked){border-color:var(--green-bd);background:rgba(34,197,94,.06)}
.np-item input{accent-color:var(--green);width:16px;height:16px}
.np-item span{flex:1;min-width:0}.np-item b{display:block;font-size:.92rem;color:var(--t1)}.np-item small{display:block;color:var(--t3);font-size:.76rem}
.np-item em{font-style:normal;color:var(--t3);font-size:.76rem}
.np-confirm{border:1px solid var(--green-bd);border-radius:12px;padding:.8rem .9rem;background:rgba(34,197,94,.05)}
.np-item b,.np-item em,#npGo{white-space:nowrap}

/* Your receptionist number card */
.rx-num{display:flex;align-items:center;gap:1rem;background:var(--green-bg);border:1px solid var(--green-bd);border-radius:16px;padding:1rem 1.3rem;margin-bottom:1.25rem}
.rx-num-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--green-bd);color:var(--green)}
.rx-num-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-num-t{min-width:0;flex:1}
.rx-num-t small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.rx-num-n{display:block;font-size:1.6rem;font-weight:700;letter-spacing:.01em;color:var(--t1);text-decoration:none;margin:.15rem 0 .2rem;font-variant-numeric:tabular-nums}
.rx-num-t p{margin:0;color:var(--t2);font-size:.86rem;line-height:1.45}
.rx-num-copy{flex:none}
.rx-num-pending{background:var(--bg-2);border-color:var(--border)}
.rx-num-pending .rx-num-ic{color:var(--amber);border-color:var(--border)}
.rx-num-pending small{color:var(--amber)}
.rx-num-pending .rx-num-n{font-size:1.15rem}
@media (max-width:640px){.rx-num{flex-wrap:wrap}.rx-num-copy{width:100%}.rx-num-n{font-size:1.35rem}}
/* Balance statement: summary + detail */
.stmt{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.2rem}
.stmt .panel-h{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.stmt-per{display:inline-flex;gap:.35rem}
.stmt-per .amt{padding:.4rem .8rem;border-radius:999px;border:1px solid var(--border-2);background:rgba(255,255,255,.02);color:var(--t2);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer}
.stmt-per .amt.on{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.stmt-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.stmt-t td,.stmt-t th{font-variant-numeric:tabular-nums}
.stmt-t tfoot th{border-top:1px solid var(--border-2);padding-top:.7rem;font-weight:800}
.stmt-t small.inl{display:inline;color:var(--t3);font-size:.75rem}
.stmt-h{margin:.6rem 1.2rem 1rem}
.bal-line{color:var(--t2);font-size:.92rem}
.bal-line b{color:var(--t1)}
.tick{color:var(--green);font-weight:800}

/* fixed subscription plan */
.plan-card .bal-v .per{font-size:1rem;font-weight:600;letter-spacing:0;color:var(--t2)}
.plan-kv{margin:.4rem 0 .2rem}
.plan-kv dd b{color:var(--t1)}
.plan-adm{margin:1rem 0 .4rem}
#planF .bar input[type=date]{max-width:11rem}