:root{--button-gap:12px;color-scheme:dark;--bg:#09080e;--panel:#14111e;--line:#2b243c;--muted:#aaa0bb;--purple:#a878ff;--text:#f7f3ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#30164d66,transparent 42%),var(--bg);color:var(--text);font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;min-height:46px;border-radius:12px;padding:10px 17px;background:#292033;color:var(--text);font-weight:600}button.primary{background:linear-gradient(120deg,#9857f7,#6f38de);box-shadow:0 5px 24px #833cf32b}button:disabled{opacity:.4;cursor:not-allowed}button.ghost{border:1px solid var(--line);background:transparent}a{color:#c4a0ff}input,select,textarea{width:100%;min-height:48px;background:#0c0a12;border:1px solid var(--line);color:var(--text);padding:12px;border-radius:12px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #a878ff18}input[type=checkbox]{width:19px;min-height:19px;accent-color:#a878ff;flex-shrink:0}input[type=file]{font-size:12px;padding:10px}label{display:block;color:var(--muted);font-size:13px;margin:15px 0 7px}header{padding:22px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:750;font-size:19px;letter-spacing:-.5px;display:flex;gap:10px;align-items:center}.logo{background:linear-gradient(140deg,#b88aff,#6826ce);width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:13px;box-shadow:0 0 28px #9c55ff38}.wrap{width:min(100% - 36px,960px);margin:auto;padding-bottom:105px}.tag{font-size:11px;letter-spacing:1px;color:#c8a6ff;border:1px solid #6b429d;border-radius:30px;padding:4px 10px;background:#8b4bd415}.eyebrow{color:var(--purple);font-size:11px;letter-spacing:2px;margin-top:28px}.hero h1{font-size:32px;line-height:1.3;margin:10px 0 12px;letter-spacing:-1px}.hero p,.muted{color:var(--muted)}.hero p{font-size:14px;margin-bottom:26px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{background:linear-gradient(140deg,#191323,#110f18);border:1px solid var(--line);border-radius:20px;padding:20px;margin:16px 0}.card h2{font-size:17px;margin:0 0 12px}.card h3{font-size:15px;margin:0}.balance{background:radial-gradient(at top right,#8b44df35,transparent 65%),#181120}.number{font-size:34px;font-weight:700;line-height:1.4}.number small{font-size:12px;color:var(--muted);font-weight:400;margin-left:7px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:flex;gap:var(--button-gap);flex-wrap:wrap}.small{font-size:12px}.warn{color:#d7bbff;background:#8a50c915;border:1px solid #65418c;border-radius:12px;padding:12px;font-size:12px;margin:14px 0}.step{width:27px;height:27px;background:#a878ff1c;color:#cba6ff;border-radius:8px;display:inline-grid;place-items:center;margin-right:9px}.upload{border:1px dashed #61457f;background:#a878ff08;padding:16px;border-radius:15px;margin-top:12px}.upload p{font-size:12px;color:var(--muted);margin:6px 0}.preview{max-height:210px;width:100%;object-fit:contain;border-radius:10px;margin-top:12px;background:#09080e}.full{width:100%;margin-top:16px}.consent{display:flex;align-items:flex-start;gap:9px;font-size:12px}.nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:center;background:#100c18ed;border-top:1px solid var(--line);padding:8px 12px max(10px,env(safe-area-inset-bottom));backdrop-filter:blur(20px)}.nav button{flex:1;max-width:170px;background:none;border-radius:12px;color:#8e819e;font-size:12px;padding:6px}.nav button.active{color:#c8a0ff;background:#a878ff14}.nav span{display:block;font-size:19px;line-height:1.4}.empty{text-align:center;color:var(--muted);padding:38px 15px}.empty b{display:block;color:#e8d9ff;font-size:17px;margin:10px}.entry{border-top:1px solid var(--line);padding:15px 0;overflow-wrap:anywhere}.entry:first-of-type{border-top:0}.entry p{margin:5px 0}.pill{color:#c5a0ff;background:#a878ff15;border-radius:8px;padding:4px 8px;font-size:11px;white-space:nowrap}.positive{color:#c8a1ff}.negative{color:#b2a8bf}#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;max-width:90%;background:#e8daff;color:#251137;padding:12px 20px;border-radius:12px;box-shadow:0 10px 60px #0009;display:none}.login{max-width:430px;margin:8vh auto 0}.login .hero h1{font-size:38px}.login .card{padding:26px}.login footer{color:#82738e;text-align:center;font-size:11px;margin-top:24px}.orbit{height:95px;width:95px;border:1px solid #8952c6;border-radius:28px;transform:rotate(-12deg);display:grid;place-items:center;margin:32px auto;background:linear-gradient(130deg,#7f3acb44,#1b112b);box-shadow:0 0 70px #8c3ce42b,inset 0 0 28px #a477ff18;font-size:34px;color:#cfaaff}.divider{height:1px;background:var(--line);margin:20px 0}.section-title{margin-top:27px}.error{color:#ffb6d1}.checkrow{display:flex;align-items:center;gap:10px}dialog{width:min(92vw,460px);border:1px solid #60417f;border-radius:20px;background:#17111f;color:var(--text);padding:24px;max-height:90vh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.close{float:right;min-height:32px;padding:3px 12px}.hint{font-size:11px;color:#8e809e}h1,h2,h3,p{overflow-wrap:anywhere}@media(min-width:700px){.hero h1{font-size:42px}.create-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start}.hero{padding-top:12px}.login .hero{padding:0}.nav{left:50%;transform:translateX(-50%);max-width:600px;border:1px solid var(--line);border-radius:20px 20px 0 0}.wrap{padding-bottom:120px}}@media(max-width:390px){.wrap{width:calc(100% - 28px)}.card{padding:16px}.hero h1{font-size:29px}.brand{font-size:17px}.tag{padding:3px 7px;font-size:10px}}
.mode-switch{display:flex;gap:var(--button-gap);background:#15101e;border:1px solid var(--line);padding:5px;border-radius:15px;margin-top:23px}.mode-switch button{flex:1;background:transparent;color:#9d8caf;font-size:14px;position:relative}.mode-switch button.active{color:#fff;background:linear-gradient(120deg,#7740b9,#46266e);box-shadow:0 4px 15px #0004}.new{font-size:8px;letter-spacing:.5px;color:#d2b1ff;vertical-align:super;margin-left:3px}details{margin:12px 0}summary{cursor:pointer;min-height:35px}textarea{resize:vertical}.mode-switch+.hero .eyebrow{margin-top:24px}

.customer-footer{flex-wrap:wrap}.customer-footer>.hint{flex-shrink:0}.customer-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--button-gap);margin-left:auto}.customer-actions button{flex:0 0 auto}

/* Shared spacing for every group of actions, including wrapped rows. */
.button-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--button-gap)}
.button-group>button,.customer-actions>button{margin:0;max-width:100%}
.nav{gap:var(--button-gap)}
button.full+button.full{margin-top:var(--button-gap)}
/* Keep standalone form actions clear of fields and following content. */
form>button:not(.close){margin-block:var(--button-gap)}
form>button.full{margin-block:var(--button-gap)}
form>button+button{margin-top:0}
form>button+label,form>button+p{margin-top:0}
/* Keep every dialog dismissible while its contents scroll. */
dialog>.close{position:sticky;top:0;z-index:5;float:none;display:block;margin-left:auto;margin-bottom:12px;background:#292033;box-shadow:0 0 0 6px #17111f}

/* Fixed dialog chrome: only the fields scroll. */
dialog.form-dialog{padding:0;overflow:hidden;max-height:90vh;max-height:90dvh}
dialog.form-dialog[open]{display:flex;flex-direction:column}
.form-dialog .dialog-header{flex:none;padding:20px 24px 16px;border-bottom:1px solid var(--line);background:#17111f}
.form-dialog .dialog-header .close{float:right;position:static;margin:0 0 8px 12px;box-shadow:none}
.form-dialog .dialog-header h2{margin:8px 0;font-size:20px}
.form-dialog .dialog-description{clear:both}
.form-dialog .dialog-description p{margin:8px 0 0}
.form-dialog .dialog-form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.form-dialog .dialog-body{padding:4px 24px 20px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.form-dialog .dialog-footer{flex:none;padding:16px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#17111f}
.form-dialog .dialog-footer .full{margin:0}
.form-dialog .dialog-footer [role=status]{margin:10px 0 0}
@media(max-width:390px){.form-dialog .dialog-header{padding:14px 16px 12px}.form-dialog .dialog-header h2{font-size:18px}.form-dialog .dialog-body{padding:4px 16px 16px}.form-dialog .dialog-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom))}}

/* Quiet balance styling keeps the amount prominent without a second card. */
.customer-balance{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:3px;padding:0 0 0 16px;color:#d7b8ff}
.customer-balance-label{font-size:11px;line-height:1.5;color:var(--muted);font-weight:400}
.customer-balance-value{font-size:26px;font-weight:650;line-height:1.3;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.customer-balance-value small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:5px}
#user-list>.entry>.row:first-child{align-items:flex-start}
#user-list .customer-footer{margin-top:16px}
@media(max-width:390px){.customer-balance{padding-left:10px}.customer-balance-value{font-size:24px}}


/* Mobile webview sizing: avoid a wide layout and focus-triggered zoom. */
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;overflow-x:clip}
main,section,.card,.row>div{min-width:0}
img,video,canvas{max-width:100%}
button,a{touch-action:manipulation}
@media(max-width:699px){input,select,textarea{font-size:16px}.row{min-width:0}.customer-actions{gap:12px}}
.profile-heading{display:flex;align-items:center;gap:16px;margin-bottom:16px}.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}.profile-heading h2{margin-bottom:4px}.profile-heading p{margin:0}.share-qr{display:block;width:220px;height:220px;margin:20px auto;background:white;padding:8px;border-radius:12px}.share-link{font-size:14px;overflow-wrap:anywhere}