:root{--ink:#18201d;--muted:#6b756f;--line:#e6e9e7;--paper:#f5f7f5;--white:#fff;--forest:#123d31;--green:#1b6b52;--mint:#dceee7;--gold:#c79748;--danger:#bd3e4a;--shadow:0 16px 40px rgba(20,42,34,.08);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#102a23;color:#eaf4f0;padding:28px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#d5b16c,#a97932);color:#fff;font:700 23px 'Playfair Display',serif;box-shadow:0 8px 20px rgba(0,0,0,.18)}.brand span:last-child{display:flex;flex-direction:column}.brand small{font-size:10px;color:#9eb5ac;margin-top:2px}.nav-list{display:flex;flex-direction:column;gap:6px}.nav-label{text-transform:uppercase;font-size:10px;letter-spacing:1.6px;color:#6f9184;margin:20px 12px 8px}.nav-list a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;color:#afc3bb;font-size:14px;font-weight:600}.nav-list a span{width:21px;font-size:18px;text-align:center}.nav-list a:hover,.nav-list a.active{background:rgba(255,255,255,.09);color:#fff}.sidebar-foot{margin-top:auto;padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:14px;display:flex;flex-direction:column;color:#fff}.sidebar-foot small{color:#8fa99f}.main-content{margin-left:260px;width:calc(100% - 260px)}.topbar{min-height:96px;padding:20px 34px;background:rgba(255,255,255,.91);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.topbar h1{font:700 25px 'Playfair Display',serif;margin:2px 0}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;font-size:10px;font-weight:700;color:var(--gold);margin:0}.user-chip{margin-left:auto;display:flex;gap:10px;align-items:center}.user-chip>span:last-child{display:flex;flex-direction:column;font-size:13px}.user-chip small{color:var(--muted)}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-weight:700}.content-area{padding:30px 34px;max-width:1600px;margin:auto}.menu-toggle{display:none;border:0;background:none;font-size:24px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.stat-card,.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.stat-card{padding:22px}.stat-card .stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}.stat-card .icon{width:38px;height:38px;border-radius:11px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-size:18px}.stat-card strong{display:block;font:700 29px 'Playfair Display',serif;margin:13px 0 3px}.stat-card small{color:var(--muted)}.grid-2{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}.panel{padding:23px;margin-bottom:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-head h2{font:700 19px 'Playfair Display',serif;margin:0}.panel-head p{color:var(--muted);font-size:13px;margin:4px 0 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:12px;border-bottom:1px solid var(--line)}td{padding:14px 12px;border-bottom:1px solid #edf0ee}tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:700;text-transform:capitalize}.badge-success{background:#def3e7;color:#236a48}.badge-warning{background:#fff0cf;color:#956717}.badge-danger{background:#fde4e7;color:#a52f3d}.badge-neutral{background:#edf0ef;color:#59635f}.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:var(--forest);color:#fff}.btn-primary:hover{background:var(--green)}.btn-light{background:#edf2f0;color:var(--forest)}.btn-block{width:100%;padding:13px}.alert{padding:13px 15px;border-radius:11px;margin-bottom:18px;font-size:13px}.alert-success{background:#def3e7;color:#236a48}.alert-error{background:#fde4e7;color:#a52f3d}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.form-grid .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}input,select,textarea{width:100%;border:1px solid #dfe4e1;background:#fff;border-radius:10px;padding:11px 12px;outline:none;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:#70a390;box-shadow:0 0 0 3px rgba(27,107,82,.1)}.muted{color:var(--muted)}.empty{text-align:center;padding:32px;color:var(--muted)}.level-distributor{color:#845c1d}.level-agen{color:#1a674f}.level-reseller{color:#365d91}.login-page{background:#eef2ef}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr}.login-visual{background:linear-gradient(145deg,rgba(13,54,42,.93),rgba(7,36,28,.97)),radial-gradient(circle at 30% 20%,#52927b,#0b3025);color:#fff;padding:50px 7vw;display:flex;flex-direction:column;justify-content:space-between}.login-brand{display:flex;align-items:center;gap:12px;font-size:18px}.visual-copy{max-width:610px}.visual-copy h1{font:700 clamp(42px,5vw,72px)/1.05 'Playfair Display',serif;margin:16px 0}.visual-copy>p:last-child{max-width:520px;color:#b9cdc5;font-size:17px;line-height:1.7}.visual-stats{display:flex;gap:45px}.visual-stats span{display:flex;flex-direction:column;color:#a8c0b7;font-size:12px;text-transform:uppercase;letter-spacing:1px}.visual-stats strong{font:700 29px 'Playfair Display',serif;color:#fff}.login-panel{display:grid;place-items:center;padding:35px}.login-card{width:min(430px,100%);background:#fff;padding:40px;border-radius:22px;box-shadow:var(--shadow)}.login-card h2{font:700 30px 'Playfair Display',serif;margin:7px 0}.login-card>.muted{font-size:13px;margin:0 0 25px}.login-card label{margin-bottom:16px}.demo-note{display:flex;flex-direction:column;align-items:center;margin-top:20px;font-size:11px;color:var(--muted)}.demo-note span{font-family:monospace;margin-top:4px}.progress{height:8px;background:#edf1ef;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#72ac8e);border-radius:99px}.quick-list{display:flex;flex-direction:column}.quick-item{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.quick-item:last-child{border:0}.quick-item .icon{width:38px;height:38px;border-radius:10px;background:var(--mint);display:grid;place-items:center}.quick-item div{display:flex;flex-direction:column}.quick-item small{color:var(--muted)}.sidebar-overlay{display:none}
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.dropzone{border:2px dashed #b9c8c1;border-radius:15px;padding:24px;text-align:center;background:#f8faf9;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.dragover{border-color:var(--green);background:var(--mint)}.dropzone input{display:none}.dropzone-preview{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}.dropzone-preview img{width:88px;height:88px;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.loyalty-hero{background:linear-gradient(135deg,#123d31,#1b6b52);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.loyalty-hero h2{font:700 26px 'Playfair Display',serif;margin:7px 0}.loyalty-hero p:last-child{color:#c8ddd5;margin-bottom:0}.loyalty-toggle{flex-direction:row;align-items:center;background:rgba(255,255,255,.1);padding:12px 16px;border-radius:12px}.loyalty-toggle input{width:auto}.loyalty-mode{flex-direction:row;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px;cursor:pointer}.loyalty-mode input{width:auto;margin-top:3px}.loyalty-mode span{display:flex;flex-direction:column}.loyalty-mode small{color:var(--muted);font-weight:400}.pos-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.55fr);gap:20px;align-items:start}.pos-catalog,.pos-cart{margin:0}.pos-cart{position:sticky;top:116px;max-height:calc(100vh - 145px);overflow:auto}.pos-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.pos-toolbar h2{font:700 21px 'Playfair Display',serif;margin:0}.pos-toolbar p{margin:4px 0}.pos-toolbar input{max-width:330px}.pos-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:13px}.pos-product-card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:10px;display:flex;flex-direction:column;gap:5px;text-align:left;transition:.2s}.pos-product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#b9cec5}.pos-product-image{height:105px;border-radius:11px;background:linear-gradient(145deg,#e9f1ed,#d9e6e0);display:grid;place-items:center;overflow:hidden;margin-bottom:5px}.pos-product-image img{width:100%;height:100%;object-fit:cover}.pos-product-image span{font-size:30px;color:var(--green)}.pos-product-card>small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-product-card>div:last-child{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.pos-product-card .btn{width:32px;height:32px;padding:0}.pos-cart-lines{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pos-cart-line{display:grid;grid-template-columns:1fr 60px auto;gap:9px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.pos-cart-line:last-child{border:0}.pos-cart-line>div{display:flex;flex-direction:column}.pos-cart-line small{color:var(--muted)}.pos-cart-line input{padding:7px;text-align:center}.pos-checkout{display:grid;gap:13px;padding-top:17px}.pos-point-option{flex-direction:row;background:#fff6dc;border:1px solid #ecd48b;padding:12px;border-radius:11px}.pos-point-option input{width:auto}.pos-totals{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px dashed #b9c1bd;border-bottom:1px dashed #b9c1bd}.pos-totals span{display:flex;justify-content:space-between;color:var(--muted)}.pos-totals .grand{font-size:17px;color:var(--ink)}.pos-pay-button{font-size:15px;padding:15px;background:linear-gradient(135deg,var(--forest),var(--green))}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.pos-workspace{grid-template-columns:1fr}.pos-cart{position:static;max-height:none}.login-wrap{grid-template-columns:1fr}.login-visual{display:none}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.sidebar-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19}.main-content{margin:0;width:100%}.topbar{padding:15px 18px;min-height:80px}.menu-toggle{display:block}.user-chip>span:last-child{display:none}.content-area{padding:20px 16px}.stats-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.login-card{padding:28px 22px}}
.app-dialog{border:0;padding:0;background:transparent;width:min(520px,calc(100% - 28px));max-width:none}.app-dialog::backdrop{background:rgba(7,24,18,.62);backdrop-filter:blur(3px)}.app-dialog .panel{margin:0}
.pos-page,.pos-workspace{display:grid;grid-template-columns:1fr;gap:22px}.pos-page .pos-cart,.pos-workspace .pos-cart{position:static;max-height:none;overflow:visible}.pos-cart-table{border:1px solid var(--line);border-radius:14px;padding:0 16px}.pos-checkout-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.65fr);gap:22px;margin-top:20px}.pos-customer-card,.pos-payment-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fafcfb}.pos-customer-card>div:first-child{display:flex;flex-direction:column;margin-bottom:15px}.pos-customer-card small{color:var(--muted)}.pos-payment-card{display:grid;gap:14px}.pos-page .pos-product-grid,.pos-workspace .pos-product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}@media(max-width:760px){.pos-checkout-wide{grid-template-columns:1fr}.pos-toolbar{align-items:stretch;flex-direction:column}.pos-toolbar input{max-width:none}}

/* Sistem UI bersama: berlaku untuk halaman lama dan halaman autentikasi baru. */
:root{--ink:#302832;--muted:#756d76;--line:#ecdfe6;--paper:#f8fafc;--white:#fff;--forest:#e83dbc;--green:#d92ca9;--mint:#fff0f6;--gold:#c62b79;--danger:#c93558;--shadow:0 8px 24px rgba(85,54,72,.07);--radius:12px}
html{font-size:15px}body,button,input,select,textarea{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}body{color:var(--ink);background:#f8fafc}h1,h2,h3,.topbar h1,.panel-head h2,.stat-card strong,.pos-toolbar h2,.member-hero h2,.loyalty-summary h2{font-family:inherit!important;letter-spacing:-.015em}.topbar h1{font-size:22px}.panel-head h2{font-size:18px}.panel,.stat-card{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.panel{padding:20px}.stats-grid{gap:16px;margin-bottom:18px}.grid-2{gap:18px}.panel-head{margin-bottom:18px}.panel-head p{line-height:1.45}
.btn{min-height:40px;border-radius:8px;padding:9px 14px;line-height:1.2;transition:background-color .16s,box-shadow .16s,transform .16s}.btn:active{transform:translateY(1px)}.btn-primary{color:#fff;background:#e83dbc;box-shadow:none}.btn-primary:hover{background:#d92ca9}.btn-light{color:#a72c6c;background:#fff0f6}.btn-danger{color:#fff;background:#c93558}.btn-block+.btn-block{margin-top:8px}.badge{border-radius:6px;padding:5px 8px}
label{gap:7px;color:#4d454d;font-size:12px;font-weight:650}input,select,textarea{min-height:42px;border:1px solid #e6d9e0;border-radius:8px;padding:10px 12px;background:#fff}textarea{line-height:1.5;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#ff6fae;box-shadow:0 0 0 3px rgba(255,111,174,.14)}input:disabled,select:disabled,textarea:disabled{color:#817780;background:#f5f2f4;cursor:not-allowed}.form-grid{gap:15px}.alert{border:1px solid transparent;border-radius:9px;padding:12px 14px}.alert-success{border-color:#cce8d7}.alert-error{border-color:#f2cbd4}.alert-warning{color:#805d19;background:#fff6dc;border-color:#eed99e}
.table-wrap{border:1px solid var(--line);border-radius:9px;background:#fff}table{font-size:13px}th{padding:11px 12px;color:#8f687d;background:#fff9fb}td{padding:13px 12px}.empty{padding:30px 18px}.quick-item{min-width:0}.quick-item>div{min-width:0}.quick-item strong,.quick-item small{overflow-wrap:anywhere}
.login-page{min-height:100vh;background:#f8fafc}.login-wrap{grid-template-columns:minmax(380px,.9fr) minmax(440px,1.1fr)}.login-visual{padding:44px 6vw;color:var(--ink);background:radial-gradient(circle at 15% 15%,#ffdce9 0,transparent 35%),linear-gradient(145deg,#fff,#fff6f9)}.visual-copy h1{margin:14px 0;color:#ad286f;font-size:clamp(38px,4.5vw,64px);line-height:1.08}.visual-copy>p:last-child{color:#776773}.login-panel{min-width:0;min-height:100vh;padding:28px}.login-page>.login-panel{position:relative;align-content:center;padding-top:100px}.login-page>.login-panel:before{content:"";position:absolute;top:36px;left:50%;width:min(320px,70vw);height:42px;transform:translateX(-50%);background:url('../syimg/kbi_logo_w1600_h166.png') center/contain no-repeat}.login-card{width:100%;max-width:440px;min-width:0;padding:32px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.login-card h2{font-size:27px}.login-card>.muted{line-height:1.55}.auth-links{display:flex;justify-content:space-between;gap:14px;margin-top:16px;font-size:13px}.auth-links a{color:#b42a72;font-weight:700}
.dropzone{border-color:#dfccd6;border-radius:10px;background:#fffafd}.system-dialog,.app-dialog{border-radius:12px}.system-dialog-actions{gap:8px}.sidebar .nav-text{width:auto;min-width:0;font-size:13px}.sidebar .nav-list>a>span:first-child{flex:0 0 22px;width:22px;font-size:16px;text-align:center}
@media(max-width:1050px){.login-wrap{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh}}
@media(max-width:760px){html{font-size:14px}.content-area{padding:16px 12px 78px}.topbar{min-height:70px;padding:11px 13px}.topbar h1{font-size:18px}.panel,.stat-card{padding:15px;border-radius:10px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.panel-head{align-items:flex-start;flex-wrap:wrap;gap:10px}.panel-head>.btn,.panel-head>form{max-width:100%}.login-wrap{width:100%;min-width:0}.login-panel{width:100%;padding:14px}.login-page>.login-panel{padding-top:82px}.login-page>.login-panel:before{top:25px;height:35px}.login-card{width:100%;max-width:calc(100vw - 28px);padding:23px 18px}.login-card h2{font-size:23px}.auth-links{flex-wrap:wrap}.table-wrap{overflow-x:auto}.table-wrap table{min-width:680px}.btn{min-height:42px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
@media(max-width:390px){.stats-grid{grid-template-columns:1fr}.login-panel{padding:10px}.login-card{padding:20px 15px}}