/* ===================== Design tokens ===================== */
:root{
  --bg:#f6f7fb;
  --bg-elev:#ffffff;
  --bg-soft:#f0f2f8;
  --bg-inset:#fafbfe;
  --line:#e5e8f0;
  --line-strong:#d5dae6;
  --text:#0f1729;
  --text-2:#4a5468;
  --text-3:#8792a8;
  --brand:#4f46e5;
  --brand-2:#7c6cf6;
  --brand-soft:#eef0ff;
  --ok:#0e9f6e;
  --ok-soft:#e6f7f0;
  --warn:#d98207;
  --warn-soft:#fdf3e2;
  --bad:#e02424;
  --bad-soft:#fdeaea;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.04);
  --shadow-lg:0 24px 48px -12px rgba(16,24,40,.18);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sidebar:264px;
}
html[data-theme="dark"]{
  --bg:#0b0f1a;
  --bg-elev:#131926;
  --bg-soft:#182031;
  --bg-inset:#0f1522;
  --line:#232c3e;
  --line-strong:#2f3a51;
  --text:#eaeefb;
  --text-2:#a6b0c6;
  --text-3:#6f7b93;
  --brand:#7c6cf6;
  --brand-2:#a78bfa;
  --brand-soft:#1e2140;
  --ok:#34d399; --ok-soft:#0e2a22;
  --warn:#fbbf24; --warn-soft:#2c2211;
  --bad:#f87171; --bad-soft:#2e1516;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 28px 60px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.hidden{display:none !important}
.mono{font-variant-numeric:tabular-nums}

/* ===================== Login ===================== */
#login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{
  position:relative;overflow:hidden;padding:56px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(145deg,#4f46e5 0%,#7c3aed 45%,#0ea5e9 100%);color:#fff;
}
.login-art::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(700px 420px at 82% 14%,rgba(255,255,255,.28),transparent 62%),
             radial-gradient(520px 400px at 8% 96%,rgba(0,0,0,.28),transparent 60%);
}
.login-art > *{position:relative;z-index:1}
.art-badge{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em}
.art-badge .dot{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  display:grid;place-items:center;font-size:17px;border:1px solid rgba(255,255,255,.28)}
.art-title{font-size:40px;line-height:1.14;font-weight:700;max-width:12ch;margin:0 0 16px}
.art-sub{font-size:15px;opacity:.9;max-width:38ch;line-height:1.65}
.art-points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.art-points li{display:flex;gap:11px;align-items:flex-start;font-size:14px;opacity:.94}
.art-points .tick{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto;font-size:11px}
.art-foot{font-size:12.5px;opacity:.72}

.login-form-wrap{display:grid;place-items:center;padding:40px 28px;background:var(--bg-elev)}
.login-card{width:100%;max-width:392px}
.login-card h2{font-size:27px;margin-bottom:8px}
.login-card .lead{color:var(--text-2);margin:0 0 30px}

/* ===================== Form controls ===================== */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px;letter-spacing:.01em}
.input,select.input,textarea.input{
  width:100%;padding:11px 13px;background:var(--bg-inset);border:1px solid var(--line);
  border-radius:var(--r-md);outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.input::placeholder{color:var(--text-3)}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 16%,transparent);background:var(--bg-elev)}
textarea.input{resize:vertical;min-height:76px}
select.input{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238792a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  color:var(--text-3);padding:7px 9px;border-radius:8px;font-size:12px;font-weight:600}
.pw-toggle:hover{background:var(--bg-soft);color:var(--text)}
.hint{font-size:12px;color:var(--text-3);margin-top:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:10px 16px;border-radius:var(--r-md);border:1px solid transparent;font-weight:600;font-size:13.5px;
  transition:transform .08s,filter .15s,background .15s,border-color .15s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover:not(:disabled){filter:brightness(1.07)}
.btn-ghost{background:var(--bg-soft);color:var(--text);border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--line);}
.btn-quiet{background:transparent;color:var(--text-2)}
.btn-quiet:hover{background:var(--bg-soft);color:var(--text)}
.btn-ok{background:var(--ok);color:#fff}
.btn-bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 26%,transparent)}
.btn-bad:hover{background:var(--bad);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn-icon{padding:8px;width:34px;height:34px;border-radius:9px}

/* ===================== App shell ===================== */
#app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{
  background:var(--bg-elev);border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;box-shadow:var(--shadow-sm);flex:0 0 auto}
.brand-name{font-weight:700;font-size:15px;line-height:1.2}
.brand-sub{font-size:11.5px;color:var(--text-3)}
.nav{padding:6px 12px;overflow-y:auto;flex:1}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);padding:16px 10px 7px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;
  color:var(--text-2);font-weight:550;font-size:13.5px;transition:background .13s,color .13s;margin-bottom:2px;
}
.nav-item:hover{background:var(--bg-soft);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:650}
.nav-item .ico{width:18px;text-align:center;font-size:15px;flex:0 0 auto}
.nav-item .swatch{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.nav-item .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{background:var(--bad);color:#fff;border-radius:99px;padding:1px 7px;font-size:11px;font-weight:700;min-width:19px;text-align:center}
.pill.muted{background:var(--line);color:var(--text-2)}
.sidebar-foot{border-top:1px solid var(--line);padding:12px}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer}
.user-chip:hover{background:var(--bg-soft)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:0 0 auto}
.avatar.sm{width:26px;height:26px;font-size:11px}
.user-meta{flex:1;min-width:0}
.user-meta .n{font-weight:650;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-meta .e{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
  padding:14px 28px;display:flex;align-items:center;gap:14px;
}
.topbar h1{font-size:19px}
.topbar .sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.spacer{flex:1}
.menu-btn{display:none}
.content{padding:26px 28px 64px;max-width:1280px;width:100%}

/* ===================== Cards & stats ===================== */
.card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:15px}
.section-title{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:28px 0 12px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.stat{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .k{font-size:12px;color:var(--text-3);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.stat .v{font-size:25px;font-weight:700;letter-spacing:-.02em;margin-top:7px;font-variant-numeric:tabular-nums}
.stat .d{font-size:12px;color:var(--text-3);margin-top:4px}
.stat .accent{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px}

/* Project cards */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.proj-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;position:relative;overflow:hidden}
.proj-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.proj-card .stripe{position:absolute;left:0;right:0;top:0;height:3px}
.proj-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.proj-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:#fff;flex:0 0 auto}
.proj-name{font-weight:650;font-size:15px}
.proj-desc{font-size:12.5px;color:var(--text-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-amount{font-size:23px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proj-amount small{font-size:12px;font-weight:600;color:var(--text-3);margin-left:5px}
.bar{height:7px;border-radius:99px;background:var(--bg-soft);overflow:hidden;margin:12px 0 9px}
.bar > i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.proj-foot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3);flex-wrap:wrap}

/* ===================== Badges / chips ===================== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:650;letter-spacing:.01em}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.neutral{background:var(--bg-soft);color:var(--text-2)}
.badge.brand{background:var(--brand-soft);color:var(--brand)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* The three deposit states (Approved, Pending, Rejected) read as stamps: capitals, like the section labels. */
.badge:has(> .dot){text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}

/* ===================== Tables ===================== */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}
.table-wrap td.cell-bar{width:110px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg-inset);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-inset)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.person{display:flex;align-items:center;gap:9px}
.person .n{font-weight:600}
.person .e{font-size:11.5px;color:var(--text-3)}

/* Month grid */
.grid-scroll{overflow-x:auto}
.mgrid{border-collapse:separate;border-spacing:0}
.mgrid th.sticky,.mgrid td.sticky{position:sticky;left:0;background:var(--bg-elev);z-index:2;border-right:1px solid var(--line);min-width:180px}
.mgrid th.sticky{background:var(--bg-inset);z-index:3}
.cell{width:34px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;margin:auto}
.cell.paid{background:var(--ok-soft);color:var(--ok)}
.cell.part{background:var(--warn-soft);color:var(--warn)}
.cell.pend{background:var(--brand-soft);color:var(--brand)}
.cell.miss{background:var(--bg-soft);color:var(--text-3)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2);padding:12px 20px;border-top:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:13px;height:13px;border-radius:4px;display:inline-block}

/* ===================== Tabs ===================== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{padding:10px 14px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ===================== Deposit / approval rows ===================== */
.dep{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dep:last-child{border-bottom:0}
.dep:hover{background:var(--bg-inset)}
.dep-main{flex:1;min-width:0}
.dep-main[data-action]{cursor:pointer}
.dgrid{display:grid;grid-template-columns:110px 1fr;gap:9px 14px;font-size:13.5px;align-items:center}
.dgrid .k{color:var(--text-3);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.dep-title{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dep-meta{font-size:12px;color:var(--text-3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.dep-amt{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dep-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.thumb{width:46px;height:46px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;flex:0 0 auto;font-size:17px;color:var(--text-3)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--brand)}

/* ===================== Modal ===================== */
.overlay{position:fixed;inset:0;background:rgba(9,12,20,.55);backdrop-filter:blur(3px);z-index:100;
  display:grid;place-items:center;padding:20px;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal{background:var(--bg-elev);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:540px;
  max-height:90vh;display:flex;flex-direction:column;animation:pop .19s cubic-bezier(.2,.9,.3,1);border:1px solid var(--line)}
.modal.wide{max-width:820px}
.modal-head{padding:20px 22px 14px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:17px}
.modal-head .sub{font-size:12.5px;color:var(--text-3);margin-top:3px}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.x{margin-left:auto;background:none;border:0;font-size:20px;color:var(--text-3);cursor:pointer;line-height:1;padding:2px 6px;border-radius:8px}
.x:hover{background:var(--bg-soft);color:var(--text)}

/* Dropzone */
.drop{border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:22px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;background:var(--bg-inset)}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop .big{font-size:26px;margin-bottom:7px}
.drop .t{font-weight:600;font-size:13.5px}
.drop .s{font-size:12px;color:var(--text-3);margin-top:3px}
.preview{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-inset)}
.preview img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.preview .fn{font-weight:600;font-size:13px;word-break:break-all}
.preview .fs{font-size:11.5px;color:var(--text-3)}

/* Checkbox list */
.check-list{display:grid;gap:8px;max-height:210px;overflow-y:auto;padding:3px}
.check{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg-inset)}
.check:hover{border-color:var(--line-strong)}
.check.on{border-color:var(--brand);background:var(--brand-soft)}
.check input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}

/* ===================== Misc ===================== */
.empty{text-align:center;padding:52px 20px;color:var(--text-3)}
.empty .big{font-size:40px;margin-bottom:12px;opacity:.5}
.empty .t{font-weight:650;color:var(--text-2);font-size:15px;margin-bottom:5px}
.alert{padding:11px 13px;border-radius:var(--r-md);font-size:13px;margin-bottom:16px;display:flex;gap:9px;align-items:flex-start}
.alert.bad{background:var(--bad-soft);color:var(--bad)}
.alert.ok{background:var(--ok-soft);color:var(--ok)}
.alert.info{background:var(--brand-soft);color:var(--brand)}
.alert.warn{background:var(--warn-soft);color:var(--warn)}

#toasts{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:var(--bg-elev);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-md);
  padding:12px 15px;box-shadow:var(--shadow-lg);font-size:13.5px;animation:pop .2s ease;font-weight:550}
.toast.ok{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--bad)}

.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:400}
.loader-ring{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}

/* ===================== Responsive ===================== */
@media (max-width:1000px){
  #login{grid-template-columns:1fr}
  .login-art{display:none}
}
@media (max-width:860px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:60;transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.9,.3,1);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .menu-btn{display:inline-flex}
  .scrim{position:fixed;inset:0;background:rgba(9,12,20,.5);z-index:50}
  .content{padding:18px 16px 60px}
  .topbar{padding:12px 16px}
  .row{grid-template-columns:1fr}
  .dep{flex-wrap:wrap}
  .dep-actions{width:100%;justify-content:flex-start}
  /* Anything under 16px makes iOS zoom the whole page when a field is tapped. */
  .input,select.input,textarea.input{font-size:16px}
}

/* ==========================================================================
   VAULT
   --------------------------------------------------------------------------
   A dark, deliberate treatment for an app whose whole job is money.

   Three rules hold it together:
     1. The number is the loudest thing on any surface. Heavy weight, tight
        tracking, warm gold. Everything else recedes.
     2. Labels are small, uppercase and widely tracked, so they read as
        captions to the figure rather than competing with it.
     3. Colour carries meaning and nothing else. Gold = money in hand.
        Emerald = paid, safe, done. Amber = waiting. Red = owed, missing.
        Nothing is coloured for decoration.

   Dark is the default. The light theme is a warm ivory counterpart, not a
   plain inversion, so both feel deliberate rather than one being an
   afterthought.
   ========================================================================== */

/* ---------------- Tokens: dark (default) ---------------- */
:root,
html[data-theme="dark"]{
  --bg:#0E1116;
  --bg-elev:#161A21;
  --bg-soft:#1D222B;
  --bg-inset:#12151B;
  --line:#252B34;
  --line-strong:#343C48;

  --text:#E7E5E0;
  --text-2:#A6ACB6;
  --text-3:#6E7683;

  /* Emerald: the "this is settled" colour. */
  --brand:#10B981;
  --brand-2:#34D399;
  --brand-soft:#0A2A21;

  /* Gold: reserved for money itself. Used sparingly or it stops meaning anything. */
  --gold:#D9B36C;
  --gold-2:#F2DCA8;
  --gold-soft:#241D10;

  --ok:#10B981;      --ok-soft:#0A2A21;
  --warn:#D9A441;    --warn-soft:#241C0F;
  --bad:#EF5350;     --bad-soft:#2B1416;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 32px 64px -16px rgba(0,0,0,.55);

  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;

  --grad-gold:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 55%,#B8924E 100%);
  --grad-brand:linear-gradient(135deg,var(--brand-2) 0%,var(--brand) 100%);
  /* The hairline that separates a raised surface from the dark behind it. */
  --edge:inset 0 1px 0 rgba(255,255,255,.045);
}

/* ---------------- Tokens: light (porcelain glass) ---------------- */
html[data-theme="light"]{
  --bg:#F3F6FA;
  --bg-elev:#FFFFFF;
  --bg-soft:#EDF1F7;
  --bg-inset:#F7FAFD;
  --line:rgba(13,27,52,.09);
  --line-strong:rgba(13,27,52,.18);

  --text:#0D1B34;
  --text-2:#44506B;
  --text-3:#8592A8;

  --brand:#059669;
  --brand-2:#10B981;
  --brand-soft:#E4F7EE;

  --gold:#A8741B;
  --gold-2:#D0A24B;
  --gold-soft:#FBF3E1;

  --ok:#059669;      --ok-soft:#E4F7EE;
  --warn:#B45309;    --warn-soft:#FDF1DD;
  --bad:#DC2626;     --bad-soft:#FDEAEA;

  --shadow-sm:0 1px 2px rgba(13,27,52,.05),0 4px 14px rgba(13,27,52,.04);
  --shadow-md:0 12px 32px rgba(13,27,52,.10);
  --shadow-lg:0 32px 72px -16px rgba(13,27,52,.25);

  --grad-gold:linear-gradient(135deg,#D0A24B 0%,#A8741B 100%);
  --edge:inset 0 1px 0 rgba(255,255,255,1);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body{
  font-feature-settings:"tnum" 1,"cv05" 1;
  letter-spacing:-.005em;
}

/* Money must line up column to column. Proportional digits make totals look
   ragged and hide a wrong figure in a list. */
.stat .v,.proj-amount,.num,td.num,.pub-total,table,.money,.mono{
  font-variant-numeric:tabular-nums;
}

/* Small caption above a figure. Never used for anything a person must read
   quickly at length, tracking this wide is slow to read in sentences. */
.stat .k,.nav-label,.section-title,.pub-total-label,.stat-label{
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10.5px;
  font-weight:650;
  color:var(--text-3);
}

h1,h2,h3,h4{letter-spacing:-.025em}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card,.stat,.proj-card,.login-card{
  box-shadow:var(--shadow-sm),var(--edge);
}

.card,.proj-card,.stat{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 42%),
    var(--bg-elev);
}
html[data-theme="light"] .card,
html[data-theme="light"] .proj-card,
html[data-theme="light"] .stat{background:var(--bg-elev)}

.sidebar{background:var(--bg-inset);border-right:1px solid var(--line)}
.topbar{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)}

/* ==========================================================================
   Brand
   ========================================================================== */

.brand-mark{
  background:var(--grad-gold);
  color:#1A1408;
  font-weight:800;
  box-shadow:0 6px 18px -8px var(--gold),var(--edge);
}
.art-badge .dot{background:var(--grad-gold);color:#1A1408}

/* ==========================================================================
   Stat tiles, the label is a caption, the figure is the point
   ========================================================================== */

.stat{
  padding:18px 20px;
  transition:transform .2s cubic-bezier(.2,.9,.3,1),box-shadow .2s ease,border-color .2s ease;
}
.stat .v{
  font-size:29px;
  font-weight:750;
  letter-spacing:-.035em;
  margin-top:9px;
  line-height:1.05;
}
.stat .d{font-size:12px;color:var(--text-3);margin-top:6px}
.stat .accent{width:2px;opacity:.85}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--edge);border-color:var(--line-strong)}

/* ==========================================================================
   Project cards
   ========================================================================== */

.proj-card{
  padding:20px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease,border-color .22s ease;
}
.proj-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg),var(--edge);
  border-color:var(--line-strong);
}

/* The collected figure is the reason the card exists. */
.proj-amount{
  font-size:30px;
  font-weight:780;
  letter-spacing:-.04em;
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--gold);   /* fallback if background-clip:text is unsupported */
  line-height:1.1;
}
.proj-amount small{
  display:block;
  -webkit-text-fill-color:initial;
  color:var(--text-3);
  font-size:10.5px;font-weight:650;
  text-transform:uppercase;letter-spacing:.13em;
  margin-top:5px;
}
.proj-icon{border-radius:12px;font-weight:800;box-shadow:0 8px 20px -10px currentColor}
.proj-name{font-weight:680;letter-spacing:-.015em}

/* ==========================================================================
   Progress
   ========================================================================== */

.bar{
  background:var(--bg-inset);
  border:1px solid var(--line);
  border-radius:99px;
  overflow:hidden;
  height:9px;
}
.bar > i{
  display:block;height:100%;border-radius:99px;
  background:var(--grad-brand);
  box-shadow:0 0 14px -2px var(--brand);
  transition:width .7s cubic-bezier(.2,.9,.3,1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  border-radius:10px;
  font-weight:640;
  letter-spacing:.005em;
  transition:transform .12s ease,filter .16s ease,background .16s ease,border-color .16s ease;
}
.btn-primary{
  background:var(--grad-brand);
  color:#04231A;
  border-color:transparent;
  font-weight:700;
  box-shadow:0 6px 18px -8px var(--brand),var(--edge);
}
html[data-theme="light"] .btn-primary{color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{background:var(--bg-soft);border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--line);border-color:var(--line-strong)}
.btn:active:not(:disabled){transform:translateY(1px)}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav-item{border-radius:10px;font-weight:600;transition:background .15s ease,color .15s ease}
.nav-item:hover{background:var(--bg-soft)}
.nav-item.active{
  background:var(--brand-soft);
  color:var(--brand-2);
  box-shadow:inset 2px 0 0 var(--brand);
}
html[data-theme="light"] .nav-item.active{color:var(--brand)}

/* ==========================================================================
   Badges, inputs, tables
   ========================================================================== */

.badge{border:1px solid transparent;font-weight:650;letter-spacing:.01em}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.badge.brand{background:var(--gold-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}

.input,select.input,textarea.input{
  background:var(--bg-inset);
  border-radius:10px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
  background:var(--bg-elev);
  outline:none;
}

thead th{
  text-transform:uppercase;letter-spacing:.11em;font-size:10.5px;
  font-weight:650;color:var(--text-3);
}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:var(--bg-soft)}

.alert{border:1px solid transparent;border-radius:var(--r-md)}
.alert.bad{border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.alert.ok{border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.alert.warn{border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.alert.info{border-color:color-mix(in srgb,var(--brand) 28%,transparent)}

.tab{font-weight:640}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ==========================================================================
   Login
   ========================================================================== */

.login-art{
  background:var(--bg-inset);
  color:var(--text);
  position:relative;overflow:hidden;
}
/* Two soft pools of light, low opacity, so the panel has depth without
   turning into a gradient poster. */
.login-art::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 42% at 14% 10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 62%),
    radial-gradient(40% 36% at 86% 82%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 64%);
}
.login-art::after{opacity:.5}
.art-title{font-weight:750;letter-spacing:-.035em}
.tick{color:var(--brand-2)}
.login-form-wrap{background:var(--bg)}
.login-card{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:32px 30px;
  box-shadow:var(--shadow-lg),var(--edge);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes vaultRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.content > *{animation:vaultRise .34s cubic-bezier(.2,.9,.3,1) both}
.content > *:nth-child(2){animation-delay:.05s}
.content > *:nth-child(3){animation-delay:.1s}
.content > *:nth-child(4){animation-delay:.15s}
.content > *:nth-child(5){animation-delay:.2s}

/* Some people get motion sick, and cheap phones cannot afford the frames. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------- Phones ---------------- */
@media (max-width:560px){
  .content{padding:14px 12px calc(60px + env(safe-area-inset-bottom))}

  /* The title gives way rather than pushing the buttons off screen. */
  .topbar{padding:10px 12px;gap:8px}
  .topbar h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Two tiles per row: figures stay big enough to read at arm's length. */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:13px 14px}
  .stat .v{font-size:21px}
  .proj-amount{font-size:27px}
  .proj-grid{grid-template-columns:1fr}

  /* Tables restack as cards: one member per block, no sideways scroll.
     Each cell carries its column name in data-th and shows it as a label. */
  .table-wrap{overflow-x:visible}
  .table-wrap thead{display:none}
  .table-wrap table,.table-wrap tbody{display:block;min-width:0}
  .table-wrap tbody tr{display:flex;flex-wrap:wrap;gap:1px 14px;padding:13px 4px;border-bottom:1px solid var(--line)}
  .table-wrap tbody tr:last-child{border-bottom:0}
  .table-wrap tbody td{display:flex;align-items:center;justify-content:space-between;gap:10px;
    border:0;padding:3px 0;flex:1 1 44%;min-width:0;text-align:left}
  .table-wrap tbody td::before{content:attr(data-th);color:var(--text-3);
    font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex:0 0 auto}
  .table-wrap tbody td:not([data-th])::before{content:none}
  .table-wrap tbody td:first-child{flex:1 1 100%;justify-content:flex-start;padding-bottom:7px}
  .table-wrap tbody td[data-empty]{display:none}
  .table-wrap tbody td.cell-bar{flex:1 1 100%;display:block;width:auto;padding-top:7px}
  .table-wrap tbody td.cell-act{flex:1 1 100%;justify-content:flex-end;padding-top:8px}
  .grid-scroll{-webkit-overflow-scrolling:touch}

  .dgrid{grid-template-columns:96px 1fr;font-size:13px}

  /* Modals become bottom sheets: thumb-reachable, full width, safe-area aware. */
  .overlay{padding:0;place-items:end center}
  .modal,.modal.wide{max-width:100%;max-height:calc(100dvh - 28px);border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0}
  .modal-foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1;min-height:44px}

  /* Toasts span the bottom, clear of the home indicator. */
  #toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none}
}

/* A money figure in a stat tile gets the gold, so amounts read before counts. */
.stat .v.money{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--gold);   /* fallback if background-clip:text is unsupported */
}

/* Derived avatar colours are deliberately muted, so the initials stay readable. */
.avatar{font-weight:700;letter-spacing:.02em;color:#F4F5F7}

/* The per-member payment choice, shown under a ticked "member chooses" project. */
.plan-pick{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-4px 0 8px;padding:10px 12px;
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--bg-inset);
}
.plan-pick > span{
  font-size:10.5px;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);
}
.plan-pick .input{flex:1;min-width:180px;padding:7px 10px;font-size:12.5px}

/* These checkbox rows are labels sitting inside a .field, and `.field label`
   sets display:block, which outranks `.check` and collapses the row into a
   run-on line. Two classes beat one class plus an element, so this wins. */
.check-list .check{display:flex;align-items:center;gap:10px}

/* ---------------- Member photographs ---------------- */

/* The avatar holds initials, with a photo laid over them when there is one. If
   the image fails to load it removes itself and the initials show through. */
.avatar{position:relative;overflow:hidden;display:inline-grid;place-items:center}
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}

.photo-pick{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.photo-preview{
  width:76px;height:76px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);
  color:var(--text-3);font-weight:700;font-size:22px;
}
.photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.photo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:200px}
.photo-actions .hint{width:100%;margin-top:2px}

/* An NID card is a wide rectangle, not a face, so it gets its own shape. */
.photo-preview.wide{
  width:150px;height:94px;border-radius:var(--r-md);
  font-size:13px;letter-spacing:.12em;
}

/* One editable package row on the project form. */
.pkg-row{
  display:grid;
  grid-template-columns:1.4fr .9fr .9fr .8fr .7fr auto;
  gap:6px;align-items:center;margin-bottom:6px;
}
.pkg-row .input{padding:8px 10px;font-size:12.5px}
.pkg-row .pkg-remove{padding:6px 10px;line-height:1}
@media (max-width:640px){
  .pkg-row{grid-template-columns:1fr 1fr;}
  .pkg-row .pkg-name{grid-column:1 / -1}
  .pkg-row .pkg-remove{grid-column:1 / -1;justify-self:end}
}

/* The typed amounts that replace a package for one member. */
.custom-amounts{border-left-color:var(--brand)}
.custom-fields{display:flex;gap:6px;flex:1;min-width:200px}
.custom-fields .input{padding:7px 10px;font-size:12.5px;min-width:0}

/* ---------------- Invite page ---------------- */
.join-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.join-card{
  width:100%;max-width:400px;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:32px 30px;
  box-shadow:var(--shadow-lg),var(--edge);
}
.join-card h2{font-size:25px;margin-bottom:8px}
.join-card .lead{color:var(--text-2);margin:0 0 26px;line-height:1.6}
.join-note{margin-top:20px;text-align:center;color:var(--text-3);font-size:12px}

/* ==========================================================================
   Light theme: porcelain glass
   --------------------------------------------------------------------------
   Pure white surfaces floating as frosted glass over a faint wash of the
   app's own colours — emerald, indigo, gold. Dark mode is untouched.
   ========================================================================== */
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 520px at 88% -120px,rgba(16,185,129,.14),transparent 60%),
    radial-gradient(900px 480px at -120px 30%,rgba(99,102,241,.11),transparent 55%),
    radial-gradient(760px 420px at 55% 115%,rgba(208,162,75,.13),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
html[data-theme="light"] .card,
html[data-theme="light"] .proj-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .login-card{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(13,27,52,.05),0 16px 40px -12px rgba(13,27,52,.12),inset 0 1px 0 rgba(255,255,255,1);
}
html[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.7);
}
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.5);
  border-bottom:1px solid rgba(13,27,52,.06);
}
html[data-theme="light"] .modal{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
}
html[data-theme="light"] .overlay{
  background:rgba(13,27,52,.28);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
html[data-theme="light"] .input,
html[data-theme="light"] select.input,
html[data-theme="light"] textarea.input{
  background:rgba(255,255,255,.85);
  border-color:rgba(13,27,52,.10);
}
html[data-theme="light"] .input:focus{background:#fff}
html[data-theme="light"] .btn-ghost{
  background:rgba(255,255,255,.72);
  border-color:rgba(13,27,52,.10);
}
html[data-theme="light"] .btn-ghost:hover:not(:disabled){background:#fff;border-color:rgba(13,27,52,.2)}
html[data-theme="light"] .nav-item:hover{background:rgba(13,27,52,.05)}
html[data-theme="light"] tbody tr:hover{background:rgba(13,27,52,.025)}
html[data-theme="light"] .login-form-wrap{background:transparent}