/* Vega customer portal — mobile-first, light/dark, AA contrast. No inline styles anywhere (strict CSP). */
/* Redesign 2026-09-27: same tokens as the staff app (navy header, teal accent, soft cards). Red is kept only for danger/overdue. */
:root{--bg:#F3F6F8;--surface:#fff;--surface-2:#F7FAFB;--ink:#152D3D;--muted:#4A5F6D;--line:#D5E0E6;--accent:#0B6E69;--accent-hover:#085853;--accent-ink:#fff;--accent-soft:#E4F2F1;--link:#14607C;--focus:#0B6E69;--bright:#39AFAC;--ok:#0B6B3A;--ok-soft:#E3F5EA;--warn:#8A5300;--warn-soft:#FFF1D6;--bad:#A81818;--bad-soft:#FBEAEA;--hdr:#0F2735;--shadow:0 1px 2px rgba(16,42,59,.06),0 6px 20px rgba(16,42,59,.06);--radius:12px;--control-h:36px;--th-bg:#EAF3F6;--b-ok-bg:#DEF3E7;--b-ok:#185C39;--b-warn-bg:#FFF0BF;--b-warn:#795607;--b-bad-bg:#FFE4E1;--b-bad:#9E2921;--b-neu-bg:#E2E8F0;--b-neu:#475569;color-scheme:light}
:root[data-theme=dark]{--bg:#0B1720;--surface:#132430;--surface-2:#182D3B;--ink:#E8F1F6;--muted:#A3B8C4;--line:#27414F;--accent:#0F7A73;--accent-hover:#128F87;--accent-ink:#fff;--accent-soft:#12383A;--link:#6FD6CC;--focus:#6FD6CC;--bright:#39AFAC;--ok:#7BE0A6;--ok-soft:#173526;--warn:#FFCB6B;--warn-soft:#3B2E12;--bad:#FF9A9A;--bad-soft:#3A2028;--hdr:#09131B;--shadow:0 1px 2px rgba(0,0,0,.3);--th-bg:#182D3B;--b-ok-bg:#214639;--b-ok:#B7EFCF;--b-warn-bg:#58451C;--b-warn:#FFE393;--b-bad-bg:#5A2B2D;--b-bad:#FFD0C9;--b-neu-bg:#334155;--b-neu:#CBD5E1;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0B1720;--surface:#132430;--surface-2:#182D3B;--ink:#E8F1F6;--muted:#A3B8C4;--line:#27414F;--accent:#0F7A73;--accent-hover:#128F87;--accent-ink:#fff;--accent-soft:#12383A;--link:#6FD6CC;--focus:#6FD6CC;--bright:#39AFAC;--ok:#7BE0A6;--ok-soft:#173526;--warn:#FFCB6B;--warn-soft:#3B2E12;--bad:#FF9A9A;--bad-soft:#3A2028;--hdr:#09131B;--shadow:0 1px 2px rgba(0,0,0,.3);--th-bg:#182D3B;--b-ok-bg:#214639;--b-ok:#B7EFCF;--b-warn-bg:#58451C;--b-warn:#FFE393;--b-bad-bg:#5A2B2D;--b-bad:#FFD0C9;--b-neu-bg:#334155;--b-neu:#CBD5E1;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
.sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1{font-size:calc(30px + 1pt);line-height:1.2;font-weight:700;letter-spacing:-1px;margin:.1rem 0 16px}
@media (max-width:700px){h1{font-size:calc(27px + 1pt)}}
h2{font-size:1.2rem;margin:0 0 .6rem}
h3{font-size:1.02rem;margin:1.2rem 0 .4rem}
p{margin:.5rem 0}
.muted{color:var(--muted)}
.small{font-size:.875rem}
/* header */
.top{background:var(--hdr);color:#E8F1F6;border-top:3px solid var(--bright);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.12)}
.top-in{max-width:1200px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:20px}
.top a{color:inherit}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{height:30px;width:auto;display:block;filter:brightness(0) invert(1)}
.brand-sub{display:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#A9C2D0;border-left:1px solid rgba(255,255,255,.22);padding-left:12px;line-height:1.1}
.spacer{flex:1}
.nav{display:none;align-self:stretch;align-items:stretch;gap:2px}
.nav a{position:relative;display:inline-flex;align-items:center;padding:0 14px;color:#C9DAE4;text-decoration:none;font-weight:600;font-size:.94rem;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current=page]{color:#fff}
.nav a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:-3px;height:3px;border-radius:3px 3px 0 0;background:var(--bright)}
.tools{display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;align-items:center;padding:2px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.seg a,.seg span{min-width:34px;min-height:28px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;color:#C9DAE4}
.seg a:hover{color:#fff;background:rgba(255,255,255,.1)}
.seg .on{background:#fff;color:#0F2735}
.ibtn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:#DCE9F0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font:inherit}
.ibtn:hover{background:rgba(255,255,255,.1);color:#fff}
.ibtn .ico,.acct-btn .ico,.acct-menu .ico,.drawer .ico{width:20px;height:20px;flex:none}
#theme-btn .ico{display:none}
#theme-btn[data-state=auto] .t-auto,#theme-btn[data-state=light] .t-light,#theme-btn[data-state=dark] .t-dark{display:block}
.menu-btn{display:inline-flex}
.acct{position:relative;display:none}
.acct-btn{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:inherit}
.acct-btn:hover{background:rgba(255,255,255,.12)}
.acct-btn .chev{width:16px;height:16px;opacity:.8}
.acct-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--bright);color:#06222C;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;flex:none}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:6px;z-index:40}
.acct-menu[hidden]{display:none}
.acct-who{display:flex;flex-direction:column;padding:10px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;overflow-wrap:anywhere}
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font:inherit;font-weight:600;font-size:.94rem;border:0;background:transparent;cursor:pointer;text-align:left}
.acct-menu a:hover,.acct-menu button:hover{background:var(--accent-soft)}
.acct-menu a[aria-current=page]{background:var(--accent-soft);color:var(--link)}
.acct-menu form{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.acct-menu form button{color:var(--bad)}
.acct-menu .ico{color:var(--muted)}
.top :focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.acct-menu :focus-visible{outline-color:var(--focus)}
/* mobile drawer */
.scrim{position:fixed;inset:0;background:rgba(5,14,20,.55);z-index:60}
.scrim[hidden],.drawer[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);background:var(--surface);color:var(--ink);z-index:70;display:flex;flex-direction:column;padding:12px 14px 18px;overflow-y:auto;box-shadow:-12px 0 32px rgba(0,0,0,.3)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.drawer .ibtn{color:var(--ink)}
.drawer .ibtn:hover{background:var(--accent-soft)}
.drawer-who{display:flex;gap:12px;align-items:center;padding:10px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer .avatar{background:var(--accent);color:#fff}
.who-t{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.drawer nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.drawer nav a:hover{background:var(--accent-soft)}
.drawer nav a[aria-current=page]{background:var(--accent-soft);color:var(--link)}
.drawer .ico{color:var(--muted)}
.drawer nav a[aria-current=page] .ico{color:var(--link)}
.drawer hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.drawer-out{margin-top:auto;padding-top:14px}
.no-scroll{overflow:hidden}
.strong{font-weight:700}
@media (min-width:480px) and (max-width:1099px){.brand-sub{display:block}}
@media (max-width:379px){.top-in{padding:0 12px;gap:8px}.tools{gap:4px}.seg a,.seg span{min-width:30px;padding:0 6px}}
@media (min-width:1100px){.nav{display:flex}.acct{display:block}.menu-btn{display:none}}
@media (min-width:1100px) and (max-width:1359px){.nav a{padding:0 10px;font-size:.9rem}.top-in{gap:14px}}
/* layout */
main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:28px 20px 56px}
.narrow{max-width:460px;margin:32px auto}
.center-page main{display:flex;align-items:flex-start;justify-content:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:none;margin-bottom:16px}
@media (max-width:700px){.card{padding:17px}}
.card.tight{padding:14px}
.card>h2:first-child,.card-head h2{font-size:calc(17px + 1pt);font-weight:700;letter-spacing:-.3px;line-height:1.3;margin:0 0 8px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.card-head h2{margin:0}
.card-head a{font-weight:600;font-size:.92rem;text-decoration:none}
.card-head a:hover{text-decoration:underline}
.grid{display:grid;gap:20px}
.grid{margin-bottom:20px}
.grid>.card{margin-bottom:0}
@media (min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:.85rem;font-weight:600;color:var(--muted)}
.stat .v{font-size:1.7rem;font-weight:700;line-height:1.2}
.stat .v.owing{color:var(--bad)}
.stat .v.good{color:var(--ok)}
footer.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;padding:18px 0;background:var(--surface)}
.foot-in{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.foot-links{display:flex;gap:18px}
/* forms */
label{display:block;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],input[type=date],input[type=number],select,textarea{width:100%;height:var(--control-h);margin:0;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-weight:400}
textarea{height:auto;min-height:96px;padding:8px 12px;resize:vertical}
select[multiple],select[size]{height:auto;padding:6px 8px}
input[readonly]{background:var(--bg)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.hint{font-size:.85rem;color:var(--muted);margin:4px 0 0}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:14px 0}
.check input{width:18px;height:18px;margin-top:4px;flex:none;accent-color:var(--accent)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:84px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);height:28px;min-height:0;padding:0 10px;border-radius:6px;border:0;background:transparent;color:var(--link);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.meter{height:6px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--bad);transition:width .2s}
.meter i.s1{width:25%}.meter i.s2{width:50%;background:var(--warn)}.meter i.s3{width:75%;background:var(--ok)}.meter i.s4{width:100%;background:var(--ok)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h);padding:5px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
.btn .ico{width:18px;height:18px}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.btn.sm{min-height:var(--control-h);padding:4px 14px;font-size:.9rem}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.alert{border-radius:8px;padding:12px 14px;margin:12px 0;border:1px solid}
.alert.error{background:var(--bad-soft);border-color:var(--bad);color:var(--ink)}
.alert.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ink)}
.alert.warn,.alert.info{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.alert ul{margin:.3rem 0 0;padding-left:1.2rem}
.otp{font-size:1.25rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem;margin:12px 0}
.codes span{background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px;text-align:center}
.qr{display:block;margin:12px auto;width:200px;height:200px;background:#fff;border-radius:8px;padding:6px}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border-radius:8px;padding:8px 10px;word-break:break-all}
.choice{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;background:var(--surface)}
.choice:hover{border-color:var(--accent)}
.choice[aria-disabled=true]{opacity:.6}
.choice h3{margin:0 0 4px}
.tag{display:inline-block;font-size:calc(10px + 1pt);font-weight:600;line-height:1.35;border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--link);vertical-align:middle}
/* tables & lists */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:calc(14px + 1pt)}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:inherit;font-weight:600;text-transform:none;letter-spacing:.2px;color:var(--muted);white-space:nowrap}
thead th{padding:8px 10px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.list{list-style:none;margin:0;padding:0}
.list li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.list li:last-child{border-bottom:0}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:calc(10px + 1pt);font-weight:600;line-height:1.35;padding:2px 9px;border-radius:999px;border:0;white-space:nowrap;vertical-align:middle;background:var(--b-neu-bg);color:var(--b-neu)}
.badge.paid{background:var(--b-ok-bg);color:var(--b-ok)}
.badge.open,.badge.partial{background:var(--b-warn-bg);color:var(--b-warn)}
.badge.overdue{background:var(--b-bad-bg);color:var(--b-bad)}
.badge.credited{background:var(--b-neu-bg);color:var(--b-neu)}
.ico{width:16px;height:16px;flex:none}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:12px}
.toolbar>div{flex:1 1 160px}
.toolbar label{margin-top:0}
@media (max-width:640px){.stack-sm thead{display:none}.stack-sm tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:6px 10px;background:var(--surface)}.stack-sm td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 0}.stack-sm td::before{content:attr(data-label);font-weight:700;color:var(--muted)}.stack-sm td.num{text-align:right}}
@media print{.top,.foot,.actions,.toolbar{display:none}body{background:#fff}}
.inline{display:inline}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.badge .ico{width:12px;height:12px}
.pagination{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:1fr;gap:2px 16px;margin:0}
.kv dt:first-child{margin-top:0}
.kv dt{font-size:.85rem;text-transform:none;letter-spacing:.04em;color:var(--muted);margin-top:10px}
.kv dd{margin:0;font-weight:500}
@media (min-width:640px){.kv{grid-template-columns:200px 1fr}.kv dt{margin-top:0;padding:6px 0}.kv dd{padding:6px 0}}
.banner{display:flex;gap:12px;align-items:flex-start}
.banner .ico{width:22px;height:22px;flex:none;margin-top:2px}
.pre{white-space:pre-wrap}
.right{text-align:right}
.mt{margin-top:16px}
.linklist a{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
th a{color:inherit}

/* staff support mode */
body.support-mode{border:6px solid #b45309;min-height:100vh;box-sizing:border-box}
.support-banner{position:sticky;top:0;z-index:50;background:#b45309;color:#fff;padding:10px 16px;font-size:.95rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.support-banner .sb-exit{margin-left:auto;background:#fff;color:#7c2d12;border-radius:6px;padding:4px 12px;font-weight:600;text-decoration:none}

/* ========== Final UI consistency pass (2026-09-26) ==========
   Same table, badge and empty-state language as the staff app (portal tokens, portal brand):
   soft header bar, hairline column dividers, zebra rows. */
table thead th{background:var(--bg);background:var(--th-bg);color:var(--muted);text-transform:none;letter-spacing:.2px;
 font-size:inherit;font-weight:600}
table :is(th,td)+:is(th,td){border-left:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
table tbody tr:nth-child(even)>td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.tablewrap{border-radius:8px;overflow-x:auto}
.tablewrap+.tablewrap{margin-top:16px}
/* one empty state, centred and muted, like the staff app */
.empty-state{text-align:center;padding:28px 12px;color:var(--muted)}
.empty-state h3{margin:0 0 6px;color:var(--ink)}
@media (max-width:640px){
 .stack-sm tr>td+td{border-left:0}
 .stack-sm tbody tr:nth-child(even)>td{background:transparent}
}

/* ========== Redesign 2026-09-27 ========== */
body.center-page{background:radial-gradient(1200px 400px at 50% -80px,color-mix(in srgb,var(--bright) 14%,transparent),transparent 70%),var(--bg)}
.narrow .card{box-shadow:0 10px 34px rgba(16,42,59,.10)}
:root[data-theme=dark] .narrow .card{box-shadow:0 10px 34px rgba(0,0,0,.35)}
th,td{vertical-align:middle}
tbody tr:hover>td{background:var(--accent-soft)}
tbody tr:nth-child(even):hover>td{background:var(--accent-soft)}
.tablewrap{border:1px solid var(--line);border-radius:8px}
.tablewrap table{margin:0}
.tablewrap tr:last-child td{border-bottom:0}
.tablewrap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* dashboard hero */
.hero{position:relative;overflow:hidden;border-radius:16px;padding:28px 28px;margin-bottom:20px;color:#fff;background:radial-gradient(600px 240px at 88% -20%,rgba(57,175,172,.55),transparent 65%),linear-gradient(135deg,#0F2735 0%,#124A5C 100%);display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
:root[data-theme=dark] .hero{background:radial-gradient(600px 240px at 88% -20%,rgba(57,175,172,.35),transparent 65%),linear-gradient(135deg,#0F2735 0%,#0E3A48 100%);border:1px solid var(--line)}
.hero h1{color:#fff;font-size:calc(30px + 1pt);margin:0 0 6px}
.hero p{margin:0;color:#CFE3EC;max-width:56ch}
.hero-cta{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hero-cta small{color:#CFE3EC}
.btn.on-dark{background:#fff;color:#0F2735;border-color:#fff;font-size:1rem;min-height:40px;padding:6px 20px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn.on-dark:hover{background:#E8F5F4;border-color:#E8F5F4}
.btn.on-dark:focus-visible{outline-color:#fff}
/* KPI cards */
.kpis{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:20px}
@media (min-width:560px){.kpis{grid-template-columns:1fr 1fr}}
@media (min-width:1200px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:none;min-width:0}
.kpi-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--link);display:inline-flex;align-items:center;justify-content:center}
.kpi-ico .ico{width:22px;height:22px}
.kpi.bad .kpi-ico{background:var(--bad-soft);color:var(--bad)}
.kpi.ok .kpi-ico{background:var(--ok-soft);color:var(--ok)}
.kpi.warn .kpi-ico{background:var(--warn-soft);color:var(--warn)}
.kpi-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .k{font-size:.85rem;font-weight:600;color:var(--muted)}
.kpi .v{font-size:1.5rem;font-weight:750;line-height:1.2;letter-spacing:-.01em}
.kpi .v.date{font-size:1.3rem}
.kpi .v.owing{color:var(--bad)}
.kpi .v.good{color:var(--ok)}
.kpi .s{font-size:.85rem;color:var(--muted)}
/* dashboard columns */
.dash{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.dash{align-items:start}
.dash>.card{margin-bottom:0}
@media (min-width:1024px){.dash{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.dash-full{grid-column:1/-1}
/* activity list */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0;padding-bottom:0}
.feed li:first-child{padding-top:0}
.feed-ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--link);display:inline-flex;align-items:center;justify-content:center}
.feed-ico .ico{width:18px;height:18px}
.feed-ico.pay{background:var(--ok-soft);color:var(--ok)}
.feed-t{flex:1;min-width:0;display:flex;flex-direction:column}
.feed-t small{color:var(--muted);font-size:.82rem}
.feed-t span{overflow-wrap:anywhere}
.feed-amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.feed-amt.cr{color:var(--ok)}
/* empty state with icon */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 12px}
.empty-ico{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--link);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.empty-ico .ico{width:26px;height:26px}
.empty-state strong{color:var(--ink);font-size:1rem}
.empty-state p{margin:0;max-width:46ch}
.card>.empty-state:only-child{padding:24px 12px}
/* page-level nice-to-haves */
.list li{padding:12px 0}
.kv dt{text-transform:none;letter-spacing:0;font-weight:600;font-size:.85rem}
@media (max-width:640px){main{padding:20px 14px 40px}.hero{padding:22px 20px}.hero h1{font-size:calc(27px + 1pt)}.hero-cta,.hero-cta .btn{width:100%}.btn.on-dark{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.scrim,.drawer,.acct,.hero-cta{display:none!important}}
.toolbar{align-items:end}
.toolbar :is(input,select){height:var(--control-h)}
@media (max-width:559px){.kpis{grid-template-columns:1fr 1fr;gap:12px}.kpi{flex-direction:column;gap:10px;padding:14px}.kpi .v{font-size:1.35rem}.kpi .v.date{font-size:1.1rem}}
.form-card{max-width:680px}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
@media (max-width:640px){.tablewrap:has(.stack-sm){border:0;border-radius:0;overflow-x:auto}}

/* Payments polish 2026-09-27: segmented sub-navigation, tighter cards and empty states, uniform spacing */
main{padding-left:32px;padding-right:32px}
main>h1:first-child{margin:.1rem 0 16px}
main>h1+.muted{margin:-8px 0 16px}
.subnav{display:inline-flex;flex-wrap:wrap;gap:0;padding:0;margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:100%}
.subnav a{padding:0 13px;border-radius:0;font-weight:500;font-size:calc(12px + 1pt);text-decoration:none;color:var(--ink);line-height:1.2;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.subnav a+a{border-left:1px solid var(--line)}
.subnav a:hover{background:var(--accent-soft)}
.subnav a.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
main>.card,main>form.card,main>section.card{margin-bottom:16px}
.empty-state{padding:16px 12px;gap:4px}
.card>.empty-state:only-child{padding:12px 12px 8px}
.empty-ico{width:40px;height:40px;margin-bottom:4px}
.empty-ico .ico{width:20px;height:20px}
.empty-state strong{font-size:.98rem}
@media (max-width:640px){main{padding-left:14px;padding-right:14px}.subnav{display:flex}.subnav a{flex:1 1 auto;justify-content:center;padding:0 10px;min-height:36px}}

/* Legal documents (privacy notice): centred readable column, contents box, print-friendly */
.doc{width:100%;max-width:760px;margin:0 auto}
.doc-head{margin-bottom:18px}.doc-head h1{margin-bottom:6px}
.doc-toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:0 0 24px}
.doc-toc ol{margin:8px 0 0;padding-left:22px;columns:2;column-gap:28px}.doc-toc li{margin:3px 0;break-inside:avoid}
.doc-body h2{font-size:1.2rem;margin:28px 0 8px;scroll-margin-top:80px}
.doc-body p,.doc-body li{line-height:1.65}.doc-body ul{padding-left:22px}
.doc-foot{margin-top:32px;padding-top:14px;border-top:1px solid var(--line)}
.linkbtn{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;cursor:pointer;font:inherit}
@media (max-width:640px){.doc-toc ol{columns:1}}
@media print{.doc-toc{display:none}.doc{max-width:none}.doc-body h2{break-after:avoid}.doc-body p,.doc-body li{break-inside:avoid}.top,.foot,.doc-head .print-btn{display:none}body{background:#fff;color:#000}a{color:#000}}

/* ---- Shared auth layout (sign in, register, reset, 2FA, invite...): split brand panel + one form card ---- */
.auth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);width:100%;max-width:1000px;margin:12px auto 20px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 18px 50px rgba(16,42,59,.14)}
:root[data-theme=dark] .auth{box-shadow:0 18px 50px rgba(0,0,0,.45)}
.auth-brand{position:relative;color:#fff;background:radial-gradient(500px 260px at 100% 0%,rgba(57,175,172,.55),transparent 70%),radial-gradient(420px 300px at 0% 110%,rgba(57,175,172,.22),transparent 70%),linear-gradient(155deg,#0F2735 0%,#124A5C 70%);display:flex}
.auth-brand::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:18px 18px;pointer-events:none}
.auth-brand-in{position:relative;z-index:1;padding:40px 36px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.auth-logo img{display:block;height:36px;width:auto}
.auth-brand h2{margin:0;font-size:1.45rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;max-width:18ch}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.auth-points li{display:flex;align-items:center;gap:12px;color:#D9E9EF;font-size:.95rem}
.auth-points li span{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;color:#7fe3df}
.auth-points .ico{width:18px;height:18px}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:36px 32px 22px;min-width:0}
.auth-card{width:100%;max-width:400px;margin:0 auto}
.auth-card h1{font-size:calc(27px + 1pt);margin:0 0 6px;letter-spacing:-1px}
.auth-sub{margin:0 0 20px;color:var(--muted);font-size:.98rem}
.auth-card p,.auth-card li{font-size:.95rem}
.auth-card label:not(.check){display:block;font-weight:600;font-size:.88rem;margin:0 0 6px}
.auth-field{margin-bottom:14px}
.inp{position:relative}
.inp>.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.auth-card input:not([type=checkbox]):not([type=radio]){height:var(--control-h);width:100%;padding:0 12px;border-radius:7px;font-size:1rem;box-shadow:none}
.inp>input{padding-left:38px!important}
.auth-card input:not([type=checkbox]):focus{outline:0;border-color:var(--bright);box-shadow:0 0 0 2px color-mix(in srgb,var(--bright) 55%,transparent)}
.auth-card :is(a,button,summary):focus-visible{outline:2px solid var(--bright);outline-offset:2px;border-radius:6px}
.auth-card .pw-wrap input{padding-right:40px!important}
.auth-card .pw-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.auth-card .pw-toggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.pw-toggle svg{width:19px;height:19px}.pw-toggle .eye-off{display:none}.pw-toggle[aria-pressed=true] .eye-on{display:none}.pw-toggle[aria-pressed=true] .eye-off{display:block}
.auth-row{display:flex;justify-content:flex-end;margin-top:8px}
.auth-row a{font-size:.88rem;font-weight:600;color:var(--link);text-decoration:none}.auth-row a:hover{text-decoration:underline}
.auth-go,.auth-card .btn.block{min-height:var(--control-h);border-radius:8px;font-size:1rem;font-weight:600}
.auth-card .actions{margin-top:16px}
.auth-div{display:flex;align-items:center;gap:12px;margin:22px 0 10px;color:var(--muted);font-size:.8rem}
.auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-help summary{cursor:pointer;color:var(--link);font-weight:600;font-size:.9rem;list-style:none;padding:6px 0}
.auth-help summary::-webkit-details-marker{display:none}
.auth-help summary::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s}
.auth-help[open] summary::before{transform:rotate(90deg)}
.auth-help form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.auth-note{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:10px 12px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:.86rem}
.auth-note .ico{width:18px;height:18px;flex:none;color:var(--link);margin-top:1px}
.auth-foot{display:flex;gap:10px;justify-content:center;align-items:center;margin:22px 0 0;font-size:.82rem;color:var(--muted)}
.auth-foot a{color:var(--muted);text-decoration:none}.auth-foot a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:860px){.auth{grid-template-columns:1fr;border-radius:16px;margin:0 auto}.auth-brand-in{padding:20px 22px;gap:8px}.auth-brand h2{font-size:1.05rem;max-width:none}.auth-points{display:none}.auth-form{padding:26px 20px 18px}}
@media(max-width:480px){.auth{border-radius:0;border-left:0;border-right:0}}

/* Theme toggle (variant 3): one round button showing the CURRENT mode as a multicolour icon; morph/rotate/fade 250ms; icon animation off under prefers-reduced-motion */
#theme-btn.ibtn{position:relative;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid #3f6577;background:radial-gradient(circle at 35% 30%,#2b4a5c 0%,#12222d 72%);color:#fff;cursor:pointer;overflow:hidden;box-shadow:none;font-size:0!important}
#theme-btn.ibtn:hover{border-color:#39afac}
#theme-btn.ibtn:focus-visible{outline:2px solid #39afac;outline-offset:2px}
.theme-cycle .ti,.ibtn#theme-btn .ti{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;transform:rotate(-70deg) scale(.5);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.theme-cycle:not([data-mode]) .ti-auto,.theme-cycle[data-mode=auto] .ti-auto,.theme-cycle[data-mode=light] .ti-light,.theme-cycle[data-mode=dark] .ti-dark,#theme-btn[data-state=auto] .ti-auto,#theme-btn[data-state=light] .ti-light,#theme-btn[data-state=dark] .ti-dark{opacity:1;transform:none}
.ti .rays{transform-box:fill-box;transform-origin:center}
.theme-cycle[data-mode=light] .rays,#theme-btn[data-state=light] .rays{animation:ti-rot 14s linear infinite}
.ti .tw{animation:ti-tw 2.4s ease-in-out infinite}.ti .tw2{animation-delay:1.1s}
@keyframes ti-rot{to{transform:rotate(360deg)}}
@keyframes ti-tw{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.theme-cycle .ti,#theme-btn .ti{transition:none}.ti .rays,.ti .tw{animation:none!important}}
#theme-btn.ibtn{width:36px;height:36px;border-radius:50%;padding:0;position:relative}
#theme-btn .ico{display:none!important}

/* colour logo everywhere (no monochrome filter) */
.brand img{filter:none!important;height:30px;width:auto}
.auth-logo img{filter:none!important}

/* Portal summary cards, Variant A + animated icons (2026-09-27) */
.kpi{--tc:var(--link);--b1:var(--accent-soft);--b2:var(--accent-soft);align-items:center;gap:16px;min-height:96px;padding:16px 18px}
.kpi-ico{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,var(--b1),var(--b2));color:var(--tc)}
.kpi-ico .ki{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kpi .k{font-size:.82rem}
.kpi .v{font-size:28px;font-weight:800;line-height:1.1;color:var(--tc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v.date{font-size:22px}
.kpi .v.owing,.kpi .v.good{color:var(--tc)}
.kpi.t-green{--tc:#0B6B3A;--b1:#DDF3E6;--b2:#BFE6D0}
.kpi.t-blue{--tc:#14607C;--b1:#DCEEF8;--b2:#BCDDF0}
.kpi.t-purple{--tc:#5B3FB0;--b1:#E8E1F8;--b2:#D3C8F1}
.kpi.t-amber{--tc:#8A5A00;--b1:#FBEBCB;--b2:#F5D89B}
.kpi.t-red{--tc:#B42318;--b1:#FCE0DC;--b2:#F6C1BA}
:root[data-theme=dark] .kpi.t-green{--tc:#7EE2A0;--b1:#1F6B5A;--b2:#1A4C4A}
:root[data-theme=dark] .kpi.t-blue{--tc:#7CC4FF;--b1:#1F4F7A;--b2:#1A3B5C}
:root[data-theme=dark] .kpi.t-purple{--tc:#C7A6FF;--b1:#4B3A86;--b2:#372B66}
:root[data-theme=dark] .kpi.t-amber{--tc:#FFC266;--b1:#7A5316;--b2:#5A3D12}
:root[data-theme=dark] .kpi.t-red{--tc:#FF9A90;--b1:#7A2A24;--b2:#5A1F1B}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .kpi.t-green{--tc:#7EE2A0;--b1:#1F6B5A;--b2:#1A4C4A}
:root:not([data-theme=light]) .kpi.t-blue{--tc:#7CC4FF;--b1:#1F4F7A;--b2:#1A3B5C}
:root:not([data-theme=light]) .kpi.t-purple{--tc:#C7A6FF;--b1:#4B3A86;--b2:#372B66}
:root:not([data-theme=light]) .kpi.t-amber{--tc:#FFC266;--b1:#7A5316;--b2:#5A3D12}
:root:not([data-theme=light]) .kpi.t-red{--tc:#FF9A90;--b1:#7A2A24;--b2:#5A1F1B}}
@media (max-width:559px){.kpi{align-items:flex-start;min-height:0}.kpi-ico{width:48px;height:48px;border-radius:14px}.kpi-ico .ki{width:26px;height:26px}.kpi .v{font-size:22px}.kpi .v.date{font-size:18px}}
/* animated icons: transform/opacity/dashoffset only */
.ki .coin,.ki .wbody,.ki .rings,.ki .mer{transform-box:fill-box;transform-origin:center}
.ki .coin{fill:currentColor;stroke:none;animation:ki-coin 3s ease-in infinite}
.ki .wbody{animation:ki-bob 3s ease-in-out infinite}
.ki .tick{stroke-dasharray:10;animation:ki-tick 3s ease-in-out infinite}
.ki .rings{animation:ki-ring 3s ease-in-out infinite}
.ki .ecg0{opacity:.28}
.ki .ecg{stroke-dasharray:100;animation:ki-ecg 2.8s linear infinite}
.ki .mer{animation:ki-mer 4s ease-in-out infinite}.ki .m2{animation-delay:-2s}
@keyframes ki-coin{0%{transform:translateY(-7px);opacity:0}15%{opacity:1}55%{transform:translateY(5px);opacity:1}65%,100%{transform:translateY(5px);opacity:0}}
@keyframes ki-bob{0%,45%,100%{transform:translateY(0)}58%{transform:translateY(1.2px)}72%{transform:translateY(-.6px)}}
@keyframes ki-tick{0%,15%{stroke-dashoffset:10;opacity:1}45%,80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ki-ring{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes ki-ecg{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes ki-mer{0%,100%{transform:scaleX(.12)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ki .coin{animation:none;opacity:0}.ki .wbody,.ki .tick,.ki .rings,.ki .ecg,.ki .mer{animation:none}.ki .tick{stroke-dashoffset:0}.ki .mer{transform:scaleX(.5)}}
/* hero clock chip */
.hero-clock{display:flex;align-items:center;gap:10px;background:rgba(6,20,27,.45);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:8px 14px;color:#fff;margin-left:auto}
.hero-clock .hc-ico{width:22px;height:22px;fill:none;stroke:#6FE0D6;stroke-width:1.9;stroke-linecap:round;flex:none}
.hero-clock .hc-d{font-weight:700;font-size:.95rem;white-space:nowrap}
.hero-clock .hc-t{color:#B9D3DD;font-size:.78rem}
@media (max-width:760px){.hero-clock{margin-left:0;width:100%}.hero-clock .hc-d{white-space:normal}}

.kpi .v.date{font-size:19px;white-space:normal;line-height:1.2}
@media (max-width:559px){.kpi .v.date{font-size:17px}}
/* Portal illustrated icons (multicolour, animated). Tones via custom properties; animation: transform / opacity / stroke-dashoffset only. */
.pi{width:24px;height:24px;flex:none;overflow:visible;--pc:#ffd83d;display:inline-block;vertical-align:middle}
.h-green{--gf:url(#pg-green);--pd:#15803d;--po:#0b3d24}.h-blue{--gf:url(#pg-blue);--pd:#1d4ed8;--po:#0c2a5c}.h-purple{--gf:url(#pg-purple);--pd:#6d28d9;--po:#2e1065}
.h-amber{--gf:url(#pg-amber);--pd:#b45309;--po:#451a03}.h-teal{--gf:url(#pg-teal);--pd:#0f766e;--po:#042f2e}.h-red{--gf:url(#pg-red);--pd:#b91c1c;--po:#450a0a}
.h-pink{--gf:url(#pg-pink);--pd:#be185d;--po:#500724}.h-slate{--gf:url(#pg-slate);--pd:#334155;--po:#0f172a}.h-sky{--gf:url(#pg-sky);--pd:#0369a1;--po:#082f49}.h-indigo{--gf:url(#pg-indigo);--pd:#4338ca;--po:#1e1b4b}
.pi *{stroke:var(--po);stroke-width:.95;stroke-linejoin:round;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center}
.pi .g{fill:var(--gf)}.pi .d{fill:var(--pd)}.pi .y{fill:var(--pc)}.pi .dk{fill:var(--po);stroke:none}
.pi .w{fill:#fff;fill-opacity:.72;stroke:none}.pi .wl{stroke:#fff;stroke-opacity:.8;stroke-width:1.5}.pi .wl2{stroke:var(--po);stroke-width:1.1;stroke-opacity:.55}
.pi .ln{stroke:#fff;stroke-width:1.7}.pi .ecg0{stroke-opacity:.35}
.pi .tk{stroke:var(--pc);stroke-width:2.1}.pi .tk2{stroke:#fff;stroke-width:2.3}.pi .ln2{stroke:var(--pd);stroke-width:2.6}.pi .ln2y{stroke:var(--pc);stroke-width:2.2}
/* animations */
.pi .an-coin{animation:pi-coin 2.8s ease-in infinite}.pi .an-bob,.pi .an-lid{animation:pi-bob 2.4s ease-in-out infinite}.pi .an-bob2{animation:pi-bob 2.4s ease-in-out -1.2s infinite}
.pi .an-ring{animation:pi-ring 2.6s ease-in-out infinite}.pi .an-tick{stroke-dasharray:10;animation:pi-tick 2.8s ease-in-out infinite}
.pi .an-beat{animation:pi-beat 1.6s ease-in-out infinite}.pi .an-ecg{stroke-dasharray:100;animation:pi-ecg 2.4s linear infinite}
.pi .an-mer{animation:pi-mer 3.6s ease-in-out infinite}.pi .an-orbit{transform-box:view-box;transform-origin:12px 12px;animation:pi-spin 5s linear infinite}
.pi .an-tilt{animation:pi-tilt 2.6s ease-in-out infinite}.pi .an-l1{stroke-dasharray:10;animation:pi-tick 2.6s ease-in-out infinite}.pi .an-l2{stroke-dasharray:10;animation:pi-tick 2.6s ease-in-out .3s infinite}
.pi .an-pop{animation:pi-pop 2.2s ease-in-out infinite}.pi .an-shine{animation:pi-shine 3s ease-in-out infinite}.pi .an-door{animation:pi-door 3s ease-in-out infinite}
.pi .an-blink{animation:pi-blink 3.2s ease-in-out infinite}.pi .an-spark{animation:pi-spark 2.4s ease-in-out infinite}
.pi .an-k1{animation:pi-k1 3s ease-in-out infinite}.pi .an-k2{animation:pi-k1 3s ease-in-out -1s infinite reverse}.pi .an-k3{animation:pi-k1 3s ease-in-out -2s infinite}
.pi .an-win{animation:pi-win 2.6s steps(1) infinite}.pi .an-mail{animation:pi-mail 2.6s ease-in-out infinite}.pi .an-shackle{animation:pi-shackle 3s ease-in-out infinite}.pi .an-arrow{animation:pi-arrow 1.8s ease-in-out infinite}.pi .an-q{animation:pi-bob 2s ease-in-out infinite}
@keyframes pi-coin{0%{transform:translateY(-5px);opacity:0}15%{opacity:1}55%{transform:translateY(3px);opacity:1}65%,100%{transform:translateY(3px);opacity:0}}
@keyframes pi-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes pi-ring{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes pi-tick{0%,15%{stroke-dashoffset:10;opacity:1}45%,80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes pi-beat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.09)}28%{transform:scale(.97)}}
@keyframes pi-ecg{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes pi-mer{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}
@keyframes pi-spin{to{transform:rotate(360deg)}}
@keyframes pi-tilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pi-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes pi-shine{0%,20%{transform:translateX(-6px);opacity:0}45%{opacity:.9}80%,100%{transform:translateX(13px);opacity:0}}
@keyframes pi-door{0%,70%,100%{transform:scaleY(1)}80%{transform:scaleY(.86)}}
@keyframes pi-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes pi-spark{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
@keyframes pi-k1{0%,100%{transform:translateX(-2px)}50%{transform:translateX(4px)}}
@keyframes pi-win{0%{opacity:1}50%{opacity:.35}}
@keyframes pi-mail{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pi-shackle{0%,60%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-1.4px) rotate(-6deg)}80%{transform:translateY(-1.4px) rotate(5deg)}}
@keyframes pi-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.pi *{animation:none!important}.pi .an-coin{opacity:0}.pi .an-tick,.pi .an-l1,.pi .an-l2{stroke-dashoffset:0}.pi .an-ecg{stroke-dashoffset:0}.pi .an-mer{transform:scaleX(.5)}}

/* placement */
.nav a{display:inline-flex;align-items:center;gap:8px}.nav .pi{width:20px;height:20px}
.acct-menu .pi,.drawer .pi{width:20px;height:20px}.auth-points .pi{width:22px;height:22px}
.nav .pi *,.drawer .pi *,.acct-menu .pi *,.feed-ico .pi *{animation-play-state:paused;animation-delay:-1.4s}
.nav a:hover .pi *,.nav a[aria-current=page] .pi *,.drawer a:hover .pi *,.drawer a[aria-current=page] .pi *,.acct-menu a:hover .pi *,.acct-menu button:hover .pi *,.feed li:hover .pi *{animation-play-state:running}
h1.pt{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pt-ico{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;background:var(--accent-soft);flex:none}.pt-ico .pi{width:28px;height:28px}
@media (max-width:700px){.pt-ico{width:32px;height:32px}.pt-ico .pi{width:24px;height:24px}}
.kpi-ico .pi{width:36px;height:36px}
.empty-ico{background:none!important;width:64px!important;height:64px!important}.empty-ico .pi{width:56px;height:56px}
.feed-ico .pi{width:22px;height:22px}
.btn:hover .ico{animation:pi-tilt .9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.btn:hover .ico{animation:none}}

/* QA fixes 2026-11-01 (P-15): payments tab bar on one row at 390 px, Generate-invoice helper wraps as a whole, search placeholder not clipped */
.gen-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.gen-cta .muted{white-space:nowrap}
input#q{min-width:min(17rem,100%)}
@media (max-width:640px){.subnav{flex-wrap:nowrap}.subnav a{padding:0 6px;white-space:nowrap}}

/* P1 fix 2026-11-07: a page title and its status badge never make the page wider than a phone.
   Under 700 px the title is a 2-column grid (icon | text); the badge drops under the text. Long numbers / site names wrap. */
h1.pt{min-width:0;overflow-wrap:anywhere}
@media (max-width:700px){h1.pt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:6px}h1.pt>.badge{grid-column:2;justify-self:start}}
@media (max-width:379px){.subnav a{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.2;padding:6px 6px}}

/* info chips (Default, This session, Recommended, Expires soon...) are the site .badge in the portal accent / staff amber */
.badge.tag{background:var(--accent-soft);color:var(--link)}
.badge.tag.warn{background:var(--b-warn-bg);color:var(--b-warn)}
/* phone stacked rows: a status chip next to text keeps its pill shape instead of stretching to the row height */
@media (max-width:640px){.stack-sm td>:is(.tag,.badge){align-self:center}}
/* Touch devices: controls keep the compact staff look (36 px), but the tappable area reaches ~44 px through an invisible
   ::after that extends 4 px beyond the border above and below (gaps between stacked controls are >= 10 px, so the areas never overlap). */
@media (pointer:coarse){
 .btn::after{content:"";position:absolute;left:-1px;right:-1px;top:-5px;bottom:-5px}
 .pw-toggle::after,.auth-card .pw-toggle::after{content:"";position:absolute;inset:-7px -6px}
 .check input{width:20px;height:20px;margin-top:2px}
 main input[type=checkbox],main input[type=radio]{width:20px;height:20px}
}