:root{
  --primary:#1677ff;--primary-hover:#4096ff;--primary-bg:#e6f4ff;--primary-border:#91caff;
  --success:#52c41a;--success-bg:#f6ffed;--success-border:#b7eb8f;
  --warning:#faad14;--warning-bg:#fffbe6;--warning-border:#ffe58f;
  --error:#ff4d4f;--error-bg:#fff2f0;--error-border:#ffccc7;
  --purple:#722ed1;--purple-bg:#f9f0ff;--purple-border:#d3adf7;
  --magenta:#eb2f96;--magenta-bg:#fff0f6;--magenta-border:#ffadd2;
  --cyan:#13c2c2;--cyan-bg:#e6fffb;--cyan-border:#87e8de;
  --text:rgba(0,0,0,.88);--text-2:rgba(0,0,0,.65);--text-3:rgba(0,0,0,.45);--text-4:rgba(0,0,0,.25);
  --border:#d9d9d9;--split:#f0f0f0;--bg-layout:#f5f5f5;--bg-card:#fff;--bg-head:#fafafa;--bg-hover:#f5f5f5;
  --sider:#001529;--sider-item:rgba(255,255,255,.65);--sider-active:#1677ff;
  --radius:6px;--radius-lg:8px;--shadow:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px 0 rgba(0,0,0,.02);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --text:rgba(255,255,255,.85);--text-2:rgba(255,255,255,.65);--text-3:rgba(255,255,255,.45);--text-4:rgba(255,255,255,.25);
  --border:#424242;--split:#303030;--bg-layout:#000;--bg-card:#141414;--bg-head:#1d1d1d;--bg-hover:#262626;
  --primary-bg:#111a2c;--primary-border:#15325b;--success-bg:#162312;--success-border:#274916;
  --warning-bg:#2b2111;--warning-border:#594214;--error-bg:#2c1618;--error-border:#5b2526;
  --purple-bg:#1a1325;--purple-border:#3e2069;--magenta-bg:#291321;--magenta-border:#551c3b;--cyan-bg:#112123;--cyan-border:#144848;
}}
:root[data-theme="dark"]{
  --text:rgba(255,255,255,.85);--text-2:rgba(255,255,255,.65);--text-3:rgba(255,255,255,.45);--text-4:rgba(255,255,255,.25);
  --border:#424242;--split:#303030;--bg-layout:#000;--bg-card:#141414;--bg-head:#1d1d1d;--bg-hover:#262626;
  --primary-bg:#111a2c;--primary-border:#15325b;--success-bg:#162312;--success-border:#274916;
  --warning-bg:#2b2111;--warning-border:#594214;--error-bg:#2c1618;--error-border:#5b2526;
  --purple-bg:#1a1325;--purple-border:#3e2069;--magenta-bg:#291321;--magenta-border:#551c3b;--cyan-bg:#112123;--cyan-border:#144848;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:14px;line-height:1.5715;color:var(--text);background:var(--bg-layout)}
button{font-family:inherit;cursor:pointer}
svg{width:1em;height:1em;fill:currentColor;vertical-align:-.125em;flex:none}

/* Layout */
.layout{display:flex;min-height:100vh}
.sider{width:220px;background:var(--sider);color:var(--sider-item);flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.logo{height:64px;display:flex;align-items:center;gap:10px;padding:0 20px;color:#fff;font-weight:600;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.logo-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#eb2f96,#722ed1);display:grid;place-items:center;color:#fff;font-size:16px}
.logo small{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.45)}
.menu{padding:8px 0;list-style:none;flex:1}
.menu-group{padding:16px 24px 6px;font-size:12px;color:rgba(255,255,255,.35)}
.menu li{margin:4px 8px}
.menu a{width:100%;display:flex;align-items:center;gap:10px;padding:0 16px;height:40px;border:0;border-radius:var(--radius);background:transparent;color:var(--sider-item);font-size:14px;text-align:left;transition:all .2s}
.menu a:hover{color:#fff}
.menu a.active{background:var(--sider-active);color:#fff}
.menu a svg{font-size:16px}
.sider-foot{padding:16px 20px;font-size:12px;color:rgba(255,255,255,.35);border-top:1px solid rgba(255,255,255,.08)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.header{height:64px;background:var(--bg-card);display:flex;align-items:center;padding:0 24px;gap:16px;box-shadow:0 1px 2px rgba(0,0,0,.03);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--split)}
.header .search{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;height:32px;border:1px solid var(--border);border-radius:var(--radius);padding:0 11px;color:var(--text-3);background:var(--bg-card)}
.header .search input{border:0;outline:0;background:transparent;flex:1;font:inherit;color:var(--text)}
.header .spacer{flex:1}
.hbtn{width:32px;height:32px;border:0;background:transparent;border-radius:var(--radius);display:grid;place-items:center;color:var(--text-2);position:relative;font-size:16px}
.hbtn:hover{background:var(--bg-hover)}
.hbtn .dot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:var(--error);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;padding:0 4px;line-height:1}
.user{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--radius);cursor:pointer}
.user:hover{background:var(--bg-hover)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.avatar.sm{width:24px;height:24px;font-size:11px}
.avatar.pink{background:var(--magenta)}.avatar.blue{background:var(--primary)}.avatar.cyan{background:var(--cyan)}.avatar.orange{background:var(--warning)}.avatar.green{background:var(--success)}
.user b{font-weight:500;display:block;line-height:1.2}
.user small{color:var(--text-3);font-size:12px}

.content{padding:24px;flex:1}
.page{display:none}.page.active{display:block}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.crumb{font-size:12px;color:var(--text-3);margin-bottom:4px}
.crumb span+span::before{content:"/";margin:0 8px;color:var(--text-4)}
h1{font-size:20px;font-weight:600;line-height:28px}
.page-head p{color:var(--text-2);margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Components */
.btn{height:32px;padding:0 15px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:14px;display:inline-flex;align-items:center;gap:6px;transition:all .2s;box-shadow:0 2px 0 rgba(0,0,0,.02)}
.btn:hover{color:var(--primary-hover);border-color:var(--primary-hover)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 0 rgba(5,145,255,.1)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.danger{color:var(--error);border-color:var(--error)}
.btn.text{border-color:transparent;box-shadow:none;background:transparent}
.btn.text:hover{background:var(--bg-hover);color:var(--text)}
.btn.link{border:0;background:none;color:var(--primary);padding:0;height:auto;box-shadow:none}
.btn.sm{height:24px;padding:0 7px;font-size:12px}
.btn.lg{height:40px;padding:0 20px;font-size:16px}
.btn.block{width:100%;justify-content:center}
.btn.success{background:var(--success);border-color:var(--success);color:#fff}
.card{background:var(--bg-card);border:1px solid var(--split);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-head{padding:0 24px;min-height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--split);gap:12px}
.card-head h3{font-size:16px;font-weight:600}
.card-body{padding:24px}
.card-body.tight{padding:0}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}.g-1-2{grid-template-columns:1fr 2fr}
.mt{margin-top:16px}

.stat{padding:20px 24px}
.stat .lbl{color:var(--text-2);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.stat .lbl .ic{width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;font-size:16px}
.stat .val{font-size:26px;font-weight:600;line-height:1.3;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;color:var(--text-3);margin-top:6px;display:flex;gap:6px;align-items:center}
.up{color:var(--success)}.down{color:var(--error)}
.ic.blue{background:var(--primary-bg);color:var(--primary)}.ic.green{background:var(--success-bg);color:var(--success)}
.ic.pink{background:var(--magenta-bg);color:var(--magenta)}.ic.orange{background:var(--warning-bg);color:var(--warning)}
.ic.purple{background:var(--purple-bg);color:var(--purple)}.ic.cyan{background:var(--cyan-bg);color:var(--cyan)}

.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;font-size:12px;border-radius:4px;border:1px solid var(--border);background:var(--bg-head);white-space:nowrap;line-height:20px}
.tag.blue{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary)}
.tag.green{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.tag.orange{background:var(--warning-bg);border-color:var(--warning-border);color:#d48806}
.tag.red{background:var(--error-bg);border-color:var(--error-border);color:var(--error)}
.tag.purple{background:var(--purple-bg);border-color:var(--purple-border);color:var(--purple)}
.tag.pink{background:var(--magenta-bg);border-color:var(--magenta-border);color:var(--magenta)}
.tag.cyan{background:var(--cyan-bg);border-color:var(--cyan-border);color:var(--cyan)}
.badge{display:inline-flex;align-items:center;gap:8px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-4)}
.badge.green::before{background:var(--success)}.badge.red::before{background:var(--error)}.badge.orange::before{background:var(--warning)}.badge.blue::before{background:var(--primary)}
.badge.processing::before{box-shadow:0 0 0 0 var(--primary);animation:pulse 1.2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 6px rgba(22,119,255,0)}}
@media (prefers-reduced-motion:reduce){.badge.processing::before{animation:none}}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--bg-head);text-align:left;padding:12px 16px;font-weight:600;border-bottom:1px solid var(--split);white-space:nowrap;color:var(--text)}
td{padding:12px 16px;border-bottom:1px solid var(--split);vertical-align:middle}
tr:hover td{background:var(--bg-hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tfoot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:var(--text-3);font-size:14px;flex-wrap:wrap;gap:8px}
.pager{display:flex;gap:6px}
.pager a,.pager button{min-width:32px;height:32px;border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius);color:var(--text)}
.pager a.on,.pager button.on{border-color:var(--primary);color:var(--primary)}
.cell{display:flex;align-items:center;gap:10px}
.cell b{font-weight:500;display:block}.cell small{color:var(--text-3);display:block;font-size:12px}
input.ipt,select.ipt{height:32px;border:1px solid var(--border);border-radius:var(--radius);padding:0 11px;font:inherit;color:var(--text);background:var(--bg-card);outline:0;min-width:0}
input.ipt:focus,select.ipt:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(5,145,255,.1)}
input.ipt.sm{height:24px;padding:0 7px;font-size:12px;width:80px;text-align:right}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:14px;color:var(--text)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:16px 24px;border-bottom:1px solid var(--split)}
.toolbar .search{display:flex;align-items:center;gap:8px;height:32px;border:1px solid var(--border);border-radius:var(--radius);padding:0 11px;color:var(--text-3);width:260px;background:var(--bg-card)}
.toolbar .search input{border:0;outline:0;flex:1;font:inherit;background:transparent;color:var(--text)}
.seg{display:inline-flex;background:var(--bg-layout);padding:2px;border-radius:var(--radius);border:1px solid var(--split)}
.seg button{border:0;background:transparent;padding:0 12px;height:26px;border-radius:4px;color:var(--text-2);font-size:14px}
.seg button.on{background:var(--bg-card);color:var(--text);box-shadow:var(--shadow)}
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--split);padding:0 24px}
.tabs button{border:0;background:none;padding:12px 0;font-size:14px;color:var(--text);position:relative}
.tabs button.on{color:var(--primary)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}
.progress{height:8px;background:var(--split);border-radius:4px;overflow:hidden;flex:1}
.progress i{display:block;height:100%;background:var(--primary);border-radius:4px}
.progress i.green{background:var(--success)}.progress i.orange{background:var(--warning)}.progress i.red{background:var(--error)}.progress i.pink{background:var(--magenta)}
.alert{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:var(--radius);font-size:14px;border:1px solid}
.alert.warn{background:var(--warning-bg);border-color:var(--warning-border)}
.alert.info{background:var(--primary-bg);border-color:var(--primary-border)}
.alert.ok{background:var(--success-bg);border-color:var(--success-border)}
.alert svg{margin-top:4px}
.list{list-style:none}
.list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--split)}
.list li:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list b{font-weight:500;display:block}.list small{color:var(--text-3);font-size:12px}
.steps{display:flex;gap:16px}
.step{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.step .n{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-3);flex:none;background:var(--bg-card)}
.step.done .n{background:var(--primary);border-color:var(--primary);color:#fff}
.step.cur .n{border-color:var(--primary);color:var(--primary)}
.step .t{font-size:14px}.step .t small{display:block;color:var(--text-3);font-size:12px}
.step::after{content:"";flex:1;height:1px;background:var(--split);margin:0 8px}
.step:last-child::after{display:none}
.step.done::after{background:var(--primary)}
.desc{display:grid;grid-template-columns:140px 1fr;font-size:14px}
.desc dt{color:var(--text-2);padding:8px 0;border-bottom:1px solid var(--split)}
.desc dd{padding:8px 0;border-bottom:1px solid var(--split)}
.mini{display:flex;flex-direction:column;gap:12px}
.mini .row{display:flex;align-items:center;gap:12px;font-size:13px}
.mini .row span:first-child{width:140px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .row span:last-child{width:80px;text-align:right;font-variant-numeric:tabular-nums}
.chart-box{position:relative;height:260px}
.chart-box.tall{height:320px}.chart-box.short{height:200px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* POS */
.pos{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
.pos-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px 24px 24px}
.pi{border:1px solid var(--split);border-radius:var(--radius-lg);padding:12px;cursor:pointer;transition:all .2s;background:var(--bg-card)}
.pi:hover{border-color:var(--primary);box-shadow:0 0 0 2px rgba(5,145,255,.1)}
.pi .thumb{height:96px;border-radius:var(--radius);margin-bottom:8px;display:grid;place-items:center;background:var(--bg-head)}
.pi .thumb svg{width:80px;height:80px}
.pi b{font-weight:500;font-size:13px;display:block;line-height:1.3;height:34px;overflow:hidden}
.pi .p{color:var(--primary);font-weight:600;margin-top:4px;font-size:13px}
.pi small{color:var(--text-3);font-size:11px}
.cart{position:sticky;top:88px}
.cart-list{max-height:300px;overflow:auto;padding:0 24px}
.ci{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--split)}
.ci .grow{flex:1;min-width:0}.ci b{font-weight:500;display:block;font-size:13px}.ci small{color:var(--text-3);font-size:12px}
.qty{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.qty button{width:26px;height:26px;border:0;background:var(--bg-card);color:var(--text)}
.qty span{width:30px;display:grid;place-items:center;font-size:13px;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.sum{padding:16px 24px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--split)}
.sum .r{display:flex;justify-content:space-between;font-size:14px;color:var(--text-2)}
.sum .r.tot{font-size:18px;font-weight:600;color:var(--text);padding-top:8px;border-top:1px dashed var(--border)}
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 24px 16px}
.pay button{height:56px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px}
.pay button svg{font-size:18px}
.pay button.on{border-color:var(--primary);background:var(--primary-bg);color:var(--primary)}
.empty{text-align:center;padding:40px 24px;color:var(--text-3)}
.empty svg{font-size:40px;color:var(--text-4);display:block;margin:0 auto 8px}

/* Master */
.master-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.mn{padding:16px 20px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:all .2s}
.mn:hover{border-color:var(--primary)}
.mn.on{border-color:var(--primary);background:var(--primary-bg)}
.mn b{display:block;font-weight:500}.mn small{color:var(--text-3);font-size:12px}
.shift{display:grid;grid-template-columns:120px repeat(7,1fr);gap:4px;font-size:12px}
.shift div{padding:8px 6px;border-radius:4px;text-align:center}
.shift .h{background:var(--bg-head);font-weight:600}
.shift .nm{text-align:left;font-weight:500;background:var(--bg-head)}
.shift .p{background:var(--primary-bg);color:var(--primary)}.shift .s{background:var(--purple-bg);color:var(--purple)}.shift .o{background:var(--split);color:var(--text-3)}.shift .c{background:var(--warning-bg);color:#d48806}

.demo-bar{position:fixed;bottom:16px;right:16px;background:var(--bg-card);border:1px solid var(--split);box-shadow:0 6px 16px rgba(0,0,0,.08);border-radius:var(--radius-lg);padding:8px 12px;font-size:12px;color:var(--text-2);z-index:20;display:flex;gap:8px;align-items:center}
.menu-toggle{display:none}

@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.master-nav{grid-template-columns:repeat(2,1fr)}.pos{grid-template-columns:1fr}.cart{position:static}}
@media (max-width:760px){
  .sider{position:fixed;left:-240px;z-index:30;transition:left .25s}.sider.open{left:0}
  .menu-toggle{display:grid}.header .search{display:none}.content{padding:16px}
  .g4,.g3,.g2,.g-2-1,.g-1-2{grid-template-columns:1fr}.master-nav{grid-template-columns:1fr}
  .steps{flex-direction:column}.step::after{display:none}.shift{font-size:10px}.tabs{gap:16px;overflow-x:auto}
}

.pager a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px}
.menu a{text-decoration:none}
a{color:var(--primary);text-decoration:none}
.flash{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}
.form-grid .full{grid-column:1/-1}
textarea.ipt{min-height:70px;padding:6px 11px;font:inherit;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);width:100%}
input.ipt,select.ipt{width:100%}
.ipt.auto{width:auto}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:60px 16px;overflow:auto}
.modal-bg.open{display:flex}
.modal{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:720px;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.modal .card-head{padding:0 24px}
.modal .card-body{max-height:70vh;overflow:auto}
.modal-foot{padding:12px 24px;border-top:1px solid var(--split);display:flex;justify-content:flex-end;gap:8px}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--sider)}
.login{width:100%;max-width:380px;padding:32px}
.login .logo{border:0;padding:0;margin-bottom:24px;color:var(--text)}
.login .logo small{color:var(--text-3)}
.struk{font-family:"Courier New",monospace;font-size:12px;width:280px;margin:0 auto;background:#fff;color:#000;padding:12px}
.struk table{font-size:12px}.struk td{padding:2px 0;border:0}
.dn{display:none}
@media print{.sider,.header,.demo-bar,.no-print{display:none!important}.content{padding:0}.card{box-shadow:none;border:0}}