:root{--lime:#d4f53c;--lime-d:#b9d82a;--ink:#0d0d0e;--ink2:#1a1b1c;--bg:#eef0ec;--card:#fff;--text:#151616;--mut:#6b706b;--line:#e4e7e1;--red:#d93f3f;--amber:#c98a00;--green:#1f8a4c;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--ink);color:var(--text);font-size:15px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.app{display:grid;grid-template-columns:240px 1fr;gap:12px;padding:12px;min-height:100%}
.side{background:var(--ink2);color:#fff;border-radius:24px;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:12px;height:calc(100vh - 24px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;padding:0 10px 22px}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-style:normal;font-weight:800}
.nav{display:flex;flex-direction:column;gap:2px}
.nav small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7b807b;padding:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#c9cdc8;text-decoration:none;font-weight:500}
.nav a:hover{background:#26282a}
.nav a.on{background:#2b2d2f;color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
.nav .ic{width:20px;text-align:center}
.nav .badge{margin-left:auto;background:var(--lime);color:var(--ink);border-radius:20px;font-size:12px;font-weight:700;padding:1px 8px}
.who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#232526}
.who b{display:block;font-size:14px}.who span{font-size:12px;color:#9aa09a}
.who button{margin-left:auto;background:none;border:0;color:#9aa09a;font-size:13px}
.credit{font-size:11px;color:#6d726d;text-align:center;padding-top:10px}
.main{background:var(--bg);border-radius:24px;padding:22px 26px 40px;min-width:0}
.top{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.top h1{font-size:26px;letter-spacing:-.01em}
.top .sp{flex:1}
.btn{border:0;border-radius:14px;padding:11px 18px;font-weight:600;background:var(--ink);color:#fff}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.red{background:var(--red);color:#fff}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:default}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.tile{background:var(--card);border-radius:var(--r);padding:18px;border:1px solid var(--line)}
.tile.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile small{color:var(--mut);font-size:13px;display:block}
.tile.dark small{color:#a8ada8}
.tile b{display:block;font-size:26px;margin:6px 0 4px;letter-spacing:-.01em}
.tile em{font-style:normal;font-size:12px;border-radius:20px;padding:2px 8px;background:#e6f6ec;color:var(--green)}
.tile em.up{background:#fdeaea;color:var(--red)}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-bottom:14px}
.card{background:var(--card);border-radius:var(--r);padding:18px;border:1px solid var(--line)}
.card h3{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .sp{flex:1}
.seg{display:inline-flex;background:var(--bg);border-radius:12px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--ink);color:#fff}
.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:14px}
.bar i{display:block;height:12px;border-radius:8px;background:var(--lime);min-width:3px}
.bar span:last-child{text-align:right;font-variant-numeric:tabular-nums}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:600;color:var(--mut);text-align:left;font-size:12px;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.pill.approved{background:#e6f6ec;color:var(--green)}.pill.pending{background:#fff3d6;color:var(--amber)}.pill.rejected,.pill.void{background:#fdeaea;color:var(--red)}
.mut{color:var(--mut)}
.empty{padding:26px;text-align:center;color:var(--mut)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select,.filters input{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px}
/* form + sheet */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:#fff;width:min(560px,100%);max-height:94vh;overflow:auto;border-radius:24px 24px 0 0;padding:22px}
@media(min-width:769px){.veil{align-items:center}.sheet{border-radius:24px}}
.sheet h2{font-size:20px;margin-bottom:14px}
label{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:12px 0 5px}
.inp,.sheet select,.sheet textarea,.sheet input:not([type=file]):not([type=radio]){width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff}
.amount{font-size:30px!important;font-weight:700;letter-spacing:-.01em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay{display:flex;flex-wrap:wrap;gap:8px}
.pay label{margin:0;border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-weight:600;color:var(--text);cursor:pointer}
.pay input{display:none}
.pay input:checked+span{color:var(--ink)}
.pay label:has(input:checked){background:var(--lime);border-color:var(--lime-d);color:var(--ink)}
.hint{font-size:13px;color:var(--mut);margin-top:6px}
.warn{background:#fff3d6;color:#6b4a00;border-radius:12px;padding:10px 12px;font-size:14px;margin-top:10px}
.err{color:var(--red);font-size:14px;margin-top:10px;min-height:18px}
.actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.photo{display:flex;align-items:center;gap:12px}
.photo img{height:64px;border-radius:10px;border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:14px;padding:12px 18px;z-index:80}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .box{background:#fff;border-radius:28px;padding:30px;width:min(380px,100%);text-align:center}
.login h1{font-size:24px;margin:10px 0 4px}.login p{color:var(--mut);margin-bottom:16px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.pad button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:16px;font-size:22px;font-weight:600}
.dots{display:flex;gap:10px;justify-content:center;height:16px}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--ink)}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:14px}
.tabs{margin-bottom:14px}
.codebox{font-size:30px;font-weight:800;letter-spacing:.12em;background:var(--ink);color:var(--lime);border-radius:14px;padding:14px;text-align:center;margin-top:12px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media(max-width:768px){
  body{background:var(--bg)}
  .app{display:block;padding:0 0 76px}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;border-radius:20px 20px 0 0;padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:40;flex-direction:row}
  .brand,.nav small,.who,.credit{display:none}
  .nav{flex-direction:row;width:100%;justify-content:space-around}
  .nav a{flex-direction:column;gap:2px;padding:6px 8px;font-size:11px;border-radius:10px}
  .nav a.on{box-shadow:none;background:var(--lime);color:var(--ink)}
  .nav .badge{position:absolute;margin:-6px 0 0 18px;font-size:10px}
  .nav a{position:relative}
  .main{border-radius:0;padding:16px 16px 30px}
  .top h1{font-size:22px}
  .tiles{gap:10px}.tile{padding:14px}.tile b{font-size:20px}
  .bar{grid-template-columns:100px 1fr 74px}
  .hide-m{display:none}
  .toast{bottom:100px}
}

.nav{overflow-y:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipb{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:13px}
.lines .ln{display:grid;grid-template-columns:1.1fr 1fr 1.2fr 64px 84px 96px 28px;gap:6px;margin-bottom:6px;align-items:center}
.lines select,.lines input{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px}
.x{border:0;background:none;font-size:18px;color:var(--mut)}
.neg{color:var(--red)}.pos{color:var(--green)}
.tabsx{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tabsx button{border:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 14px;font-weight:600;color:var(--mut)}
.tabsx button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sheet.wide{width:min(820px,100%)}
@media(max-width:768px){
  .nav{overflow-x:auto;justify-content:flex-start;gap:2px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;min-width:64px}
  .lines .ln{grid-template-columns:1fr 1fr;}
}
.card{overflow-x:auto}
.main{min-width:0;max-width:100vw}
.sheet{max-width:100vw}
@media(max-width:768px){.app{overflow-x:hidden}.card table{min-width:520px}}
@media(max-width:768px){.nav{min-width:0;flex:1 1 auto}.side{overflow:hidden}}
@media(max-width:1000px){.tiles[style*="repeat(6"]{grid-template-columns:repeat(2,1fr)!important}}
/* Zoho-Books style master-detail (vendors) */
.zsplit{display:grid;grid-template-columns:330px 1fr;gap:14px;align-items:start}
.zlist{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:sticky;top:12px;max-height:calc(100vh - 40px);display:flex;flex-direction:column}
.zlist .zq{padding:10px;border-bottom:1px solid var(--line)}.zlist .zq input{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.zlist .zrows{overflow:auto}
.zrow{display:block;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.zrow:hover{background:#f6f8f2}.zrow.on{background:#eef6d3;box-shadow:inset 3px 0 0 var(--lime-d)}
.zrow b{display:block;font-size:14px;font-weight:600}.zrow span{font-size:13px;color:var(--mut)}.zrow span.due{color:var(--red)}
.zdetail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.zhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 18px 0}
.zhead h2{font-size:22px;flex:1;min-width:200px}
.ztabs{display:flex;gap:26px;border-bottom:1px solid var(--line);padding:6px 18px 0;overflow-x:auto}
.ztabs button{border:0;background:none;padding:12px 2px;font-weight:600;color:var(--mut);border-bottom:3px solid transparent;white-space:nowrap}
.ztabs button.on{color:var(--text);border-bottom-color:var(--lime-d)}
.zbody{padding:16px 18px 22px}
.zover{display:grid;grid-template-columns:300px 1fr;gap:18px}
.zprofile{background:#f6f8f2;border-radius:14px;padding:14px;align-self:start}
.zavatar{width:46px;height:46px;border-radius:12px;background:#e6ead9;display:grid;place-items:center;font-weight:700;font-size:18px}
.zsec{margin-top:14px}.zsec h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.zkv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:13.5px}.zkv span:nth-child(odd){color:var(--mut)}
.zh3{font-size:18px;margin:6px 0 10px}
.ztable{width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.zsection{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.zsection>header{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fafbf8;cursor:pointer;font-weight:700}
.zsection>header .sp{flex:1}.zsection .zin{padding:0 8px 8px}
.tline{position:relative;margin-top:6px}
.tline .ev{display:grid;grid-template-columns:96px 22px 1fr;gap:8px;margin-bottom:12px}
.tline .ev .when{font-size:12px;color:var(--mut);text-align:right;padding-top:12px}
.tline .ev .dot{position:relative}.tline .ev .dot:before{content:"";position:absolute;left:10px;top:0;bottom:-14px;width:2px;background:#cfe0a0}
.tline .ev .dot i{position:absolute;left:5px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--lime-d);border:2px solid #fff;box-shadow:0 0 0 2px #cfe0a0}
.tline .ev .cardx{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.tline .ev .cardx b{display:block;margin-bottom:2px}.tline .ev .cardx small{color:var(--mut)}
.pop{position:absolute;z-index:70;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);min-width:200px;padding:6px}
.pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font-size:14px}
.pop button:hover{background:#f1f5e4}.pop hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.sumstrip{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.sumstrip div{padding:14px 18px;border-left:1px solid var(--line)}.sumstrip div:first-child{border-left:0}.sumstrip small{display:block;color:var(--mut);font-size:13px}.sumstrip b{font-size:22px}
.over{color:var(--red);font-weight:600;font-size:12px;letter-spacing:.03em}.dueok{color:var(--amber);font-weight:600;font-size:12px}.paidok{color:var(--green);font-weight:600;font-size:12px}
@media(max-width:1000px){.zsplit{grid-template-columns:1fr}.zlist{position:static;max-height:none}.zover{grid-template-columns:1fr}.sumstrip{grid-template-columns:1fr 1fr}}
@media(min-width:1001px){.zsplit.hasd .zlist .zrows{max-height:calc(100vh - 130px)}}
@media(max-width:1000px){.zsplit.hasd .zlist{display:none}.zsplit:not(.hasd) .zdetail{display:none}}
.deptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:2px}
.deptcard{text-align:left;cursor:pointer;font:inherit;color:inherit}.deptcard.sel{outline:2px solid var(--lime-d);background:#f8fbe9}
.scanbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}.chk{outline:2px solid #e0a800;outline-offset:1px;border-radius:6px}
/* Phone width: nothing may push the page wider than the screen (long vendor names, wide selects). */
.filters select{max-width:100%}
.zover>*{min-width:0}
.zprofile{overflow-wrap:anywhere}
@media(max-width:768px){.tiles[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}.tile{min-width:0;overflow-wrap:anywhere}.ztable{display:block;overflow-x:auto}}
.seg.tabs{max-width:100%;overflow-x:auto}.seg.tabs button{white-space:nowrap;flex:none}