[hidden]{display:none!important}
html,body{margin:0}
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.authcard{width:min(420px,100%);gap:14px}
.authcard h2{font:700 26px var(--display);margin:0}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:rgba(255,255,255,.7);border-radius:18px;padding:10px 12px}
.prow .pmain{flex:1 1 180px;min-width:0}.prow .pn{width:100%}
.pact{display:flex;gap:6px;align-items:center}.pact input{width:auto}

/* One neutral light look by choice, the same in light and dark viewers. Layout: a soft header band with the greeting, four lifted figure tiles overlapping it, then three sections with one job each: Files, Client payments, Appraiser payouts. */
:root{ color-scheme:light;
  --bg:#e4e4de; --surface:#ffffff; --ink:#1d1d1b; --muted:#6a6a64; --line:#e2e2dc; --accent:#3f566e; --accent-ink:#ffffff; --soft:#ebebe6;
  --hero1:#eceae4; --hero2:#e3e6e8; --hero-ink:#1d1d1b; --hero-muted:#6a6a64; --blob1:#d9d2c3; --blob2:#c9d3da;
  --sun:#c9952b; --sun-bg:#f6ecd3; --sun-fg:#6f5310; --sky:#5f7fa8; --sky-bg:#e3eaf3; --sky-fg:#2f4c73; --leaf:#5c9474; --leaf-bg:#e0eee5; --leaf-fg:#2c5e41; --bad:#a8423a; --bad-bg:#f6e3e0;
  --shadow:0 1px 2px rgba(29,29,27,.05),0 10px 28px rgba(29,29,27,.07); --lift:0 2px 4px rgba(29,29,27,.05),0 20px 44px rgba(29,29,27,.13);
  --display:"Outfit","Plus Jakarta Sans",system-ui,sans-serif; --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
*{box-sizing:border-box}
body{background:var(--bg) radial-gradient(rgba(29,29,27,.055) 1px,transparent 1.2px) 0 0/22px 22px;color:var(--ink);font:15.5px/1.5 var(--sans)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13.5px;color:var(--muted)}

.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--hero1),var(--hero2));color:var(--hero-ink);padding-block:30px 86px;border-bottom:1px solid var(--line)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(55px);opacity:.8;animation:drift 16s ease-in-out infinite alternate}
.hero::before{width:420px;height:420px;left:-90px;top:-230px;background:var(--blob1)}
.hero::after{width:540px;height:540px;right:-130px;top:-280px;background:var(--blob2);animation-duration:23s;animation-direction:alternate-reverse}
.hero .wrap{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hero-muted)}
h1{font:700 34px/1.1 var(--display);margin:2px 0 0;letter-spacing:-.01em;text-wrap:balance}
.who{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(29,29,27,.08);color:var(--hero-ink)}
.hero button.link{color:var(--hero-ink);text-decoration:underline;text-underline-offset:3px}
.hero select{background:rgba(255,255,255,.7)}


main.wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;margin-top:-60px;padding-bottom:56px}
.banner{border-radius:12px;background:var(--sun-bg);color:var(--sun-fg);padding:11px 16px;font-weight:600;box-shadow:var(--shadow)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.fig{background:rgba(255,255,255,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;gap:14px;align-items:center;min-width:0;animation:rise .55s both;transition:transform .25s,box-shadow .25s}
.fig:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.fig:nth-child(2){animation-delay:.06s}.fig:nth-child(3){animation-delay:.12s}.fig:nth-child(4){animation-delay:.18s}
.fig .ico{--p:0;flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--line) 0);transition:--p 1.2s cubic-bezier(.2,.8,.2,1),transform .3s}
.fig:hover .ico{transform:rotate(-8deg) scale(1.07)}
.fig .ico svg{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--surface);color:var(--c);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fig.a .ico{--c:var(--ink);--p:100} .fig.b .ico{--c:var(--sun)}
.fig.c .ico{--c:var(--sky)} .fig.d .ico{--c:var(--leaf)}
.fig .txt{display:flex;flex-direction:column;min-width:0}
.fig .lab{font-size:13.5px;font-weight:600;color:var(--muted)}
.fig .val{font:700 27px/1.25 var(--display);font-variant-numeric:tabular-nums}
.fig .sub{font-size:13px;color:var(--muted)}
.flow{position:relative;display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line)}
.flow::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-110%);animation:sheen 3.6s ease-in-out infinite}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--muted);margin-top:-10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.legend b{color:var(--ink);font-variant-numeric:tabular-nums}
.legend .o i{background:var(--sun)}.legend .r i{background:var(--sky)}.legend .p i{background:var(--leaf)}
.flow span{display:block;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.flow .o{background:var(--sun)} .flow .r{background:var(--sky)} .flow .p{background:var(--leaf)}

.seg{position:relative;display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:var(--shadow);align-self:flex-start;max-width:100%}
.seg i{position:absolute;top:5px;bottom:5px;left:5px;width:0;border-radius:10px;background:var(--ink);transition:left .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),top .3s,height .3s}
.seg button{position:relative;z-index:1;background:none;border:0;border-radius:10px;padding:9px 18px;font:600 15px var(--sans);color:var(--muted);cursor:pointer;transition:color .2s}
.seg button[aria-selected="true"]{color:#fff}
.pane{display:flex;flex-direction:column;gap:16px}
.pane.enter>*{animation:rise .45s both}
.pane.enter>*:nth-child(2){animation-delay:.07s}.pane.enter>*:nth-child(3){animation-delay:.14s}.pane.enter>*:nth-child(4){animation-delay:.21s}.pane.enter>*:nth-child(n+5){animation-delay:.28s}
.sect{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.sect h2{font:700 22px var(--display);margin:0}
.sect p{margin:2px 0 0;color:var(--muted);max-width:62ch}
h3{font:600 16px var(--display);margin:0}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bar .grow{flex:1 1 220px;min-width:0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;max-width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button.btn{font:600 15px var(--sans);padding:10px 18px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .15s,border-color .15s,background .15s}
button.btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(18,38,58,.1)}
button.btn:active{transform:translateY(0) scale(.98)}
button.primary{position:relative;overflow:hidden;background:var(--ink);border-color:var(--ink);color:#fff}
button.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-120%);transition:transform .65s}
button.primary:hover::after{transform:translateX(120%)}
button.danger{color:var(--bad)}
button.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
button.link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
button.link:hover{text-decoration:underline}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:box-shadow .25s}
.card:hover{box-shadow:var(--lift)}
.scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.card .scroll{box-shadow:none;border:0;border-radius:0}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:14.5px}
.card table{min-width:600px}
th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:700;padding:13px 14px 9px;white-space:nowrap}
td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top;transition:background .15s}
tbody tr:hover td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
tbody.rise tr{animation:rise .34s both;animation-delay:calc(var(--i,0) * 24ms)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.fno{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent)}
tr.void td{color:var(--muted);text-decoration:line-through}
tr.void td:last-child,tr.void td.st{text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:3px 11px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.open{background:var(--sun-bg);color:var(--sun-fg)} .pill.ready{background:var(--sky-bg);color:var(--sky-fg)}
.pill.paid{background:var(--leaf-bg);color:var(--leaf-fg)} .pill.void{background:var(--soft);color:var(--muted)}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}
.tot{display:flex;flex-wrap:wrap;gap:6px 24px}
details.past{border-top:1px solid var(--line);padding-top:10px}
details.past summary{cursor:pointer;font-weight:600}
details.past ul{margin:8px 0 0;padding-left:20px;font-size:14px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600;color:var(--muted);min-width:0}
.fld input,.fld select,.fld textarea{width:100%;font-weight:400}
.fld.wide{grid-column:1/-1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
.acts .left{margin-right:auto}
.ctag{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:1px 8px;border-radius:999px;background:var(--sun-bg);color:var(--sun-fg);vertical-align:1px}
.ovrbox{background:var(--sun-bg);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ovrbox .bar{display:flex;flex-wrap:wrap;gap:12px}.ovrbox .fld{flex:1 1 160px}
dialog{border:0;border-radius:20px;background:var(--surface);color:var(--ink);padding:0;width:min(600px,calc(100vw - 32px));max-height:calc(100% - 32px);box-shadow:0 24px 70px rgba(0,0,0,.35)}
dialog[open]{animation:pop .18s ease-out;will-change:transform,opacity}
dialog::backdrop{background:rgba(29,29,27,.5);animation:fade .2s}
dialog form{padding:22px;display:flex;flex-direction:column;gap:14px}
dialog h2{margin:0;font:700 22px var(--display)}
.hist{font-size:13px;color:var(--muted);margin:0;padding-left:18px}
.err{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:10px 14px;font-weight:600;animation:rise .25s both}
.payinfo{background:var(--bg);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.results{display:flex;flex-direction:column;gap:6px;min-height:44px}
.res{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:var(--bg);border:1.5px solid transparent;border-radius:12px;padding:9px 12px;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .12s;animation:rise .22s both}
button.res:hover{border-color:var(--accent);transform:translateX(2px)}
.res.off{cursor:default;opacity:.65}
.res .mid{flex:1;min-width:0}
.res b.no{color:var(--accent);font-variant-numeric:tabular-nums}
.res .add{font-weight:700;color:var(--accent);white-space:nowrap}
.picked{display:flex;flex-direction:column;gap:6px}
.picked .res{background:var(--leaf-bg);color:var(--leaf-fg);cursor:default}
.picked .res b.no{color:inherit}
.x{background:none;border:0;font:700 18px var(--sans);color:inherit;cursor:pointer;padding:0 6px;border-radius:6px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-weight:600;max-width:calc(100vw - 32px);z-index:50;animation:toast .3s cubic-bezier(.2,.9,.3,1.2)}
tr[data-no]{cursor:pointer}
tr[data-no] td:first-child{transition:box-shadow .2s,background .15s}
tr[data-no]:hover td:first-child{box-shadow:inset 3px 0 0 var(--ink)}
.go::after{content:"\2192";display:inline-block;margin-left:5px;transition:transform .2s}
tr:hover .go::after{transform:translateX(5px)}
.pill.open::before{animation:pulse 1.9s ease-out infinite}
.go{color:var(--accent);font-weight:600;white-space:nowrap}
.view{display:flex;flex-direction:column}
.vhead{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--hero1),var(--hero2));color:var(--hero-ink);border-bottom:1px solid var(--line);padding:22px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.vno{font:700 34px/1.1 var(--display);font-variant-numeric:tabular-nums}
.vbody{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.step{position:relative;padding-top:20px;font-size:14px}
.step::before{content:"";position:absolute;top:6px;left:0;right:-8px;height:3px;border-radius:2px;background:var(--line)}
.step::after{content:"";position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--line)}
.step.done::before{background:var(--leaf)}.step.done::after{border-color:var(--leaf);background:var(--leaf)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 20px;margin:0}
.vgrid div{min-width:0}.vgrid .wide{grid-column:1/-1}
.vgrid dt{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.vgrid dd{margin:2px 0 0;font-size:16px;overflow-wrap:anywhere}
.vgrid dd.big{font:700 22px var(--display);font-variant-numeric:tabular-nums}
.aibox{border:1.5px dashed var(--line);border-radius:12px;padding:10px 14px}
.aibox summary{font-weight:600;color:var(--accent)}
.aiin{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.aiin textarea{width:100%}
/* ----- bubble skin: every block is its own glossy, rounded, raised shape ----- */
:root{--bub:linear-gradient(165deg,#ffffff 0%,#f7f7f4 50%,#e8e8e2 100%);
  --bubsh:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -12px 20px rgba(29,29,27,.06),0 16px 28px -12px rgba(29,29,27,.3),0 3px 6px rgba(29,29,27,.07);
  --rowsh:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(29,29,27,.16),0 8px 6px -6px rgba(29,29,27,.5);--rowbg:linear-gradient(180deg,#ffffff 0%,#ffffff 65%,#f3f3ef 100%)}
.fig{position:relative;border:0;border-radius:34px;background:var(--bub);box-shadow:var(--bubsh);padding:20px 22px;backdrop-filter:none;-webkit-backdrop-filter:none;transition:scale .25s;animation:rise .55s both,bob 6s ease-in-out .7s infinite}
.fig:nth-child(2){animation-delay:.06s,1.6s}.fig:nth-child(3){animation-delay:.12s,2.5s}.fig:nth-child(4){animation-delay:.18s,3.4s}
.fig::before{content:"";position:absolute;top:7px;left:9%;right:9%;height:36%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none}
.fig>*{position:relative}
.fig:hover{transform:none;scale:1.04;box-shadow:var(--bubsh)}
.fig .ico{box-shadow:0 4px 8px -3px rgba(29,29,27,.35),inset 0 1px 1px rgba(255,255,255,.8)}
.flow{height:14px;box-shadow:inset 0 2px 4px rgba(29,29,27,.25),0 1px 0 #fff}
.flow span{box-shadow:inset 0 3px 3px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.18)}
.seg{border:0;border-radius:999px;background:var(--bub);box-shadow:var(--bubsh);padding:6px}
.seg i{border-radius:999px;top:6px;bottom:6px;background:linear-gradient(180deg,#56564f,#1d1d1b);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 10px -4px rgba(0,0,0,.55)}
.seg button{border-radius:999px}
.card{border:0;border-radius:30px;background:linear-gradient(165deg,#eeeee9 0%,#e3e3dc 55%,#d5d5cd 100%);box-shadow:var(--bubsh);padding:22px 24px}
.card:hover{box-shadow:var(--bubsh)}
.banner{border-radius:999px;padding-inline:22px}
button.btn{border:0;border-radius:999px;background:var(--bub);box-shadow:inset 0 1px 0 #fff,inset 0 -4px 7px rgba(29,29,27,.07),0 6px 10px -5px rgba(29,29,27,.4),0 0 0 1px rgba(29,29,27,.06)}
button.btn:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -4px 7px rgba(29,29,27,.07),0 10px 16px -6px rgba(29,29,27,.45),0 0 0 1px rgba(29,29,27,.1)}
button.btn:active{box-shadow:inset 0 3px 6px rgba(29,29,27,.25)}
button.primary{background:linear-gradient(180deg,#5a5a53,#1d1d1b);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(0,0,0,.35),0 8px 14px -6px rgba(0,0,0,.6)}
button.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(0,0,0,.35),0 12px 18px -6px rgba(0,0,0,.6)}
input,select,textarea{border-radius:18px;border-color:transparent;box-shadow:inset 0 2px 5px rgba(29,29,27,.14),0 1px 0 #fff;background:#fbfbf9}
input[type=search],input[type=date],select{border-radius:999px;padding-inline:16px}
.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 4px rgba(29,29,27,.07),0 2px 3px rgba(29,29,27,.12)}
.chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(29,29,27,.12);background:rgba(255,255,255,.55)}
.scroll{background:none;border:0;box-shadow:none;border-radius:0;padding:0 8px 14px}
.card .scroll{padding:0 4px 10px}
table{border-collapse:separate;border-spacing:0 9px}
th{padding:6px 16px 0}
td{border-top:0;padding:13px 16px;background:var(--rowbg);box-shadow:var(--rowsh)}
.card td{background:var(--rowbg)}
td:first-child{border-radius:22px 0 0 22px;box-shadow:var(--rowsh),inset 1px 0 0 rgba(29,29,27,.1)}td:last-child{border-radius:0 22px 22px 0;box-shadow:var(--rowsh),inset -1px 0 0 rgba(29,29,27,.1)}td:only-child{border-radius:22px}
tbody tr{transition:translate .2s}
tbody tr[data-no]:hover{translate:0 -3px}
tbody tr:hover td{background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 65%,#e6ecf3 100%)}

dialog{border-radius:34px}
.res{border-radius:22px;background:linear-gradient(180deg,#f0f0eb,#e2e2db);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(29,29,27,.14),0 7px 8px -6px rgba(29,29,27,.35)}
.picked .res{background:linear-gradient(180deg,#eef7f1,#d6eadd)}
.aibox{border-radius:22px}
.payinfo,.err{border-radius:22px}
#toast{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -6px rgba(0,0,0,.5)}
.issues{font-weight:500;animation:none}.issues ul{margin:6px 0 0;padding-left:20px}
.filling{border-color:var(--sky)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 32%,transparent)!important}
.filled{animation:filled 3s ease-out}
.okmsg{color:var(--leaf-fg);font-weight:700;animation:rise .35s both}
@keyframes filled{0%,35%{background:var(--leaf-bg);box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 45%,transparent)}}
@keyframes glow{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--leaf) 55%,transparent),0 8px 12px -8px rgba(29,29,27,.32)}}
/* ----- colour: one blue for actions; amber, blue and green for the three payment states ----- */
:root{--bg:#e2e6f0;--accent:#2f4fd0;--soft:#e2e8fc;--line:#d3d9e8;--muted:#5b6377;
  --hero1:#dbe6ff;--hero2:#ece2ff;--blob1:#ffd3b8;--blob2:#b6ceff;
  --sun:#f0a31a;--sun-bg:#ffedc4;--sun-fg:#7a4f00;--sky:#3b7df0;--sky-bg:#dbe8ff;--sky-fg:#1c4aa8;--leaf:#1fa463;--leaf-bg:#d5f3e1;--leaf-fg:#156a3f;
  --act:linear-gradient(180deg,#5d7ef6,#2f4fd0);
  --rowsh:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,52,90,.16)}
body{background:var(--bg) radial-gradient(rgba(47,79,208,.08) 1px,transparent 1.2px) 0 0/22px 22px}
.hero{background:linear-gradient(115deg,#d9e5ff 0%,#eae1ff 55%,#ffe4d6 100%)}
.vhead{background:linear-gradient(115deg,#d9e5ff 0%,#eae1ff 60%,#ffe4d6 100%)}
.eyebrow{color:var(--accent)}
.chip{color:var(--accent)}
.fig.a{background:linear-gradient(165deg,#ffffff 0%,#e8edff 50%,#c9d5ff 100%)}
.fig.b{background:linear-gradient(165deg,#ffffff 0%,#fff3d6 50%,#ffdf9c 100%)}
.fig.c{background:linear-gradient(165deg,#ffffff 0%,#e6efff 50%,#bfd6ff 100%)}
.fig.d{background:linear-gradient(165deg,#ffffff 0%,#e3f7ec 50%,#b6e8ca 100%)}
.fig.a .ico{--c:var(--accent)}
.seg i{background:var(--act);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 10px -4px rgba(47,79,208,.7)}
button.primary{background:var(--act);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 8px rgba(20,40,140,.35),0 8px 14px -6px rgba(47,79,208,.75)}
button.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -5px 8px rgba(20,40,140,.35),0 12px 18px -6px rgba(47,79,208,.8)}
.card{background:linear-gradient(165deg,#eef1f9 0%,#e0e6f2 55%,#ced6e8 100%)}
th{color:#46527a}
.tot b{color:var(--accent)}
tbody tr:hover td{background:linear-gradient(180deg,#ffffff 0%,#f0f4ff 65%,#dde6ff 100%)}
/* the shadow belongs to the whole row, so it runs unbroken under every column */
tbody tr{box-shadow:0 11px 12px -9px rgba(40,52,90,.45);border-radius:22px}
/* a coloured cap on the left of each file shows its payment state */
tr.s-open td:first-child{box-shadow:var(--rowsh),inset 7px 0 0 var(--sun)}
tr.s-ready td:first-child{box-shadow:var(--rowsh),inset 7px 0 0 var(--sky)}
tr.s-paid td:first-child{box-shadow:var(--rowsh),inset 7px 0 0 var(--leaf)}
tr.s-void td:first-child{box-shadow:var(--rowsh),inset 7px 0 0 #b9bfcc}
tr[class^="s-"] td:first-child{padding-left:22px}
.res{background:linear-gradient(180deg,#eef1f9,#dde3f0);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,52,90,.16),0 8px 9px -7px rgba(40,52,90,.4)}
.aibox{border-color:#b9c4e6}
#toast{background:#1f2c63}
/* ----- refined palette: one steady blue, quieter tints, the three state colours a notch calmer ----- */
:root{--bg:#e7eaf0;--accent:#2c4fa8;--soft:#e4e9f5;--line:#d4d9e5;--muted:#59627a;
  --hero1:#e3e9f5;--hero2:#d5deef;--blob1:#c9d6ee;--blob2:#b8c8ea;
  --sun:#d99a22;--sun-bg:#fbeecd;--sun-fg:#6f4e08;--sky:#3f76d8;--sky-bg:#dfe9fb;--sky-fg:#1f4a9a;--leaf:#2f9b6a;--leaf-bg:#d9f0e4;--leaf-fg:#17633f;
  --act:linear-gradient(180deg,#4a6fd0,#2c4fa8)}
body{background:var(--bg) radial-gradient(rgba(44,79,168,.06) 1px,transparent 1.2px) 0 0/22px 22px}
.hero,.vhead{background:linear-gradient(120deg,#e6ebf6 0%,#d6dff0 100%)}
.fig.a{background:linear-gradient(165deg,#ffffff 0%,#f1f4fb 50%,#dce4f5 100%)}
.fig.b{background:linear-gradient(165deg,#ffffff 0%,#fdf7e8 50%,#f5e6bf 100%)}
.fig.c{background:linear-gradient(165deg,#ffffff 0%,#eff4fc 50%,#d7e4f8 100%)}
.fig.d{background:linear-gradient(165deg,#ffffff 0%,#eef8f2 50%,#d0eadc 100%)}
.seg i{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 10px -4px rgba(44,79,168,.6)}
button.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(18,36,96,.35),0 8px 14px -6px rgba(44,79,168,.65)}
button.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 8px rgba(18,36,96,.35),0 12px 18px -6px rgba(44,79,168,.7)}
.card{background:linear-gradient(165deg,#f2f4f9 0%,#e7eaf2 55%,#d9dee9 100%)}
th{color:#4a5674}
tbody tr:hover td{background:linear-gradient(180deg,#ffffff 0%,#f3f6fc 65%,#e4eaf6 100%)}
.res{background:linear-gradient(180deg,#f1f3f8,#e1e5ef)}
.aibox{border-color:#bcc6de}
#toast{background:#1c2a52}
.seg{position:sticky;top:8px;z-index:20}
.ufq{display:inline-block;margin-left:6px;width:18px;height:18px;border-radius:50%;background:var(--sun);color:#fff;font-weight:800;font-size:12px;text-align:center;line-height:18px;vertical-align:middle}
.fig.noico{align-items:flex-start}
.ovwarn{background:var(--bad-bg);color:var(--bad);border-radius:16px;padding:12px 18px;font-weight:600;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.reprow .pmain{flex:1 1 220px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drift{to{transform:translate(70px,46px) scale(1.18)}}
@keyframes sheen{0%{transform:translateX(-110%)}70%,100%{transform:translateX(235%)}}
@keyframes bob{50%{translate:0 -5px}}
@keyframes pulse{50%{opacity:.3}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}