:root{
  --cream:#F2E9D8;
  --paper:#FFFDF8;
  --ink:#2E2620;
  --ink-soft:#6B5F4F;
  --line:#DCCEAC;
  --line-strong:#C7B48A;
  --red:#B0392D;
  --red-bg:#F4E1DD;
  --green:#3B6B4A;
  --green-bg:#E3EDE3;
  --mustard:#B8860F;
  --mustard-bg:#F6EBCF;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:var(--ink);padding-bottom:60px;}
.tabular{font-variant-numeric:tabular-nums;}
a{color:inherit;}
header.app{background:var(--ink);color:var(--cream);padding:18px 18px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
header.app h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:22px;}
header.app p{margin:4px 0 0;font-size:12.5px;color:#C9BEA8;}
.who{text-align:right;font-size:12.5px;color:#D8CDB6;}
.who .role{display:inline-block;margin-top:3px;background:#463C31;color:var(--mustard-bg);padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.logout-link{display:inline-block;margin-top:6px;font-size:12px;color:#E7B9AE;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}
nav.tabs{display:flex;background:var(--paper);border-bottom:2px solid var(--ink);overflow-x:auto;}
nav.tabs button{flex:1;min-width:84px;background:none;border:none;padding:12px 6px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;}
nav.tabs button.active{color:var(--ink);border-bottom:3px solid var(--red);}
main{max-width:640px;margin:0 auto;padding:18px 16px 40px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:14px;}
.card h2{font-family:Georgia,'Times New Roman',serif;font-size:17px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px dashed var(--line-strong);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:12px;}
.stat .label{font-size:12px;color:var(--ink-soft);margin:0 0 4px;}
.stat .value{font-family:Georgia,serif;font-size:19px;font-weight:700;margin:0;}
.stat.pos .value{color:var(--green);}
.stat.neg .value{color:var(--red);}
label{display:block;font-size:12.5px;color:var(--ink-soft);margin:10px 0 4px;}
input,select{width:100%;padding:9px 10px;border:1px solid var(--line-strong);border-radius:5px;font-size:14.5px;background:#fff;color:var(--ink);font-family:inherit;}
input:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;}
button.btn{border:none;border-radius:5px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;}
button.btn-main{background:var(--ink);color:var(--cream);width:100%;margin-top:14px;}
button.btn-del{background:none;border:1px solid var(--red);color:var(--red);padding:5px 9px;font-size:12px;}
button.btn-add{background:none;border:1px solid var(--green);color:var(--green);padding:5px 9px;font-size:12px;}
button.btn-edit{background:none;border:1px solid var(--ink-soft);color:var(--ink-soft);padding:5px 9px;font-size:12px;}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);gap:8px;}
.row:last-child{border-bottom:none;}
.row .name{font-weight:600;font-size:14px;}
.row .sub{font-size:12px;color:var(--ink-soft);}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:6px;}
.badge.low{background:var(--red-bg);color:var(--red);}
.badge.aktif{background:var(--green-bg);color:var(--green);}
.badge.nonaktif{background:var(--red-bg);color:var(--red);}
.badge.admin{background:var(--mustard-bg);color:var(--mustard);}
.badge.kasir{background:#E6E0D2;color:var(--ink-soft);}
.badge.cash{background:var(--green-bg);color:var(--green);}
.badge.hutang{background:var(--red-bg);color:var(--red);}
.badge.transfer{background:#DCE6F0;color:#2D5A8C;}
.empty{text-align:center;color:var(--ink-soft);font-size:13.5px;padding:24px 10px;}
.err{color:var(--red);font-size:12.5px;margin-top:4px;}
.msg-ok{color:var(--green);font-size:12.5px;margin-top:4px;}
.period-picker{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.period-picker button{flex:1;min-width:70px;background:var(--paper);border:1px solid var(--line-strong);border-radius:20px;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.period-picker button.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.hint{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.banner{background:var(--red-bg);color:var(--red);padding:10px 14px;font-size:13px;border-radius:6px;margin-bottom:14px;}
.banner.info{background:var(--mustard-bg);color:var(--mustard);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;}
table.rtable{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;border:1px solid var(--line-strong);}
table.rtable th, table.rtable td{padding:8px 10px;border:1px solid var(--line);text-align:left;}
table.rtable th{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.3px;border-bottom:2px solid var(--line-strong);}
table.rtable td.num, table.rtable th.num{text-align:right;font-variant-numeric:tabular-nums;}
table.rtable tfoot td{font-weight:700;border-top:2px solid var(--line-strong);}
table.rtable tbody tr:last-child td{border-bottom:1px solid var(--line);}

table.rtable.accent-green thead th{background:var(--green-bg);color:var(--green);border-bottom:2px solid var(--green);}
table.rtable.accent-green tfoot td{background:var(--green-bg);color:var(--green);}
table.rtable.accent-red thead th{background:var(--red-bg);color:var(--red);border-bottom:2px solid var(--red);}
table.rtable.accent-red tfoot td{background:var(--red-bg);color:var(--red);}
table.rtable.accent-gold thead th{background:var(--mustard-bg);color:var(--mustard);border-bottom:2px solid var(--mustard);}
table.rtable.accent-gold tfoot td{background:var(--mustard-bg);color:var(--mustard);}
table.rtable.accent-ink thead th{background:var(--ink);color:var(--cream);border-bottom:2px solid var(--ink);}
table.rtable.accent-ink tfoot td{background:#3D332A;color:var(--cream);}
table.rtable.accent-purple thead th{background:#EAE0F0;color:#6A3D8C;border-bottom:2px solid #6A3D8C;}
table.rtable.accent-purple tfoot td{background:#EAE0F0;color:#6A3D8C;}
table.rtable.accent-blue thead th{background:#DCE6F0;color:#2D5A8C;border-bottom:2px solid #2D5A8C;}
table.rtable.accent-blue tfoot td{background:#DCE6F0;color:#2D5A8C;}

/* landing & auth pages */
.centerpage{max-width:420px;margin:0 auto;padding:40px 18px;}
.hero{background:var(--ink);color:var(--cream);padding:60px 24px 50px;text-align:center;}
.hero h1{font-family:Georgia,serif;font-size:32px;margin:0 0 8px;}
.hero p{color:#C9BEA8;font-size:15px;max-width:420px;margin:0 auto 26px;}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.hero .cta a{padding:12px 22px;border-radius:5px;font-weight:700;font-size:14px;text-decoration:none;}
.hero .cta .primary{background:var(--mustard);color:var(--ink);}
.hero .cta .secondary{background:none;border:1px solid #C9BEA8;color:var(--cream);}
.features{max-width:640px;margin:0 auto;padding:36px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.feature{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;}
.feature .icon{font-size:22px;}
.feature h3{font-size:14.5px;margin:8px 0 4px;}
.feature p{font-size:12.5px;color:var(--ink-soft);margin:0;}
.authcard{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:24px;}
.authcard h1{font-family:Georgia,serif;font-size:22px;margin:0 0 4px;text-align:center;}
.authcard p.sub{text-align:center;color:var(--ink-soft);font-size:13px;margin:0 0 18px;}
.authcard .switch{text-align:center;font-size:13px;margin-top:16px;color:var(--ink-soft);}
.authcard .switch a{color:var(--red);font-weight:600;text-decoration:none;}

/* transaksi penjualan (banyak item) */
.txcard{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:10px;background:#fff;}
.txhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.txitems{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);}
.txline{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:2px 0;}
.txactions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;}
.subhead{font-family:Georgia,'Times New Roman',serif;font-size:14px;font-weight:700;margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line-strong);}
.cartbox{border:1px solid var(--line);border-radius:5px;padding:2px 10px;margin:10px 0 4px;background:#fff;}

/* baris total belanja di Ringkasan */
.sumrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:5px;font-weight:700;font-size:13.5px;margin:8px 0;}