:root{
  --bg:#070911;--bg2:#0b0f1b;--panel:#111625;--panel2:#151b2d;--panel3:#0e1422;
  --line:#27314a;--line2:#333f5c;--text:#f4f7ff;--muted:#8c98b3;--soft:#b8c2d8;
  --purple:#815dff;--blue:#27b7ff;--pink:#ff4fc8;--green:#49df87;--amber:#ffca55;--red:#ff6171;
  --rgb:linear-gradient(90deg,#22d3ee 0%,#7c5cff 48%,#ff4dc4 100%);
  --shadow:0 28px 80px rgba(0,0,0,.42);--radius:16px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.rgb-frame{position:fixed;inset:0;pointer-events:none;z-index:9999;border-top:2px solid transparent;border-image:var(--rgb) 1;box-shadow:inset 0 1px 20px rgba(124,92,255,.08)}
.app-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0d111e,#090d18);border-right:1px solid #20283d;padding:20px 14px 16px;z-index:50;display:flex;flex-direction:column}.brand-lockup{display:flex;align-items:center;gap:12px;padding:8px 9px 24px}.brand-lockup.large{padding:0}.logo-mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:950;letter-spacing:-.05em;background:linear-gradient(#151d32,#0d1323) padding-box,var(--rgb) border-box;border:1px solid transparent;box-shadow:0 0 28px rgba(124,92,255,.22);position:relative}.logo-mark:after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.08);border-radius:9px}.brand-lockup b{font-size:15px;letter-spacing:.06em}.brand-lockup span{display:block;margin-top:3px;font-size:9px;color:#66728e;letter-spacing:.18em}.sidebar nav{display:grid;gap:5px}.sidebar nav button{position:relative;width:100%;display:flex;align-items:center;gap:12px;border:1px solid transparent;background:transparent;color:#9aa6bf;border-radius:11px;padding:10px 11px;text-align:left;font-weight:650;font-size:12px}.sidebar nav button i{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#111827;color:#8491aa;font-style:normal}.sidebar nav button:hover{background:#111726;color:#e7ebf6}.sidebar nav button.active{color:#fff;background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(34,211,238,.05));border-color:#34305f}.sidebar nav button.active:before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--rgb)}.sidebar nav button.active i{color:white;background:#26214d}.nav-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px rgba(255,79,200,.75)}.sidebar-foot{margin-top:auto;display:grid;gap:12px}.online-pill{font-size:9px;letter-spacing:.14em;color:#6fdaa0;padding:0 9px}.online-pill span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 10px rgba(73,223,135,.7)}.user-card{display:grid;grid-template-columns:36px 1fr 32px;align-items:center;gap:9px;border-top:1px solid #1b2335;padding:14px 8px 0}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:850;background:linear-gradient(145deg,#6e54ff,#2736a1);border:1px solid rgba(255,255,255,.12)}.avatar.small{width:34px;height:34px}.user-card b{display:block;font-size:11px}.user-card small{display:block;color:#786ee8;font-size:9px;margin-top:3px}.user-card button{border:0;background:transparent;color:#6f7891;font-size:18px}.main-shell{min-width:0;background:radial-gradient(circle at 70% 0%,rgba(124,92,255,.08),transparent 28%),var(--bg)}.topbar{height:76px;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid #1e273a;background:rgba(8,11,19,.91);backdrop-filter:blur(18px)}.page-heading h2{font-size:18px;margin:0}.page-heading small{display:block;color:#68748f;font-size:10px;margin-top:3px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:11px}.searchbox{height:38px;width:min(340px,26vw);display:flex;align-items:center;gap:7px;background:#0e1422;border:1px solid #202b42;border-radius:10px;padding:0 10px;color:#697590}.searchbox input{border:0;background:transparent;outline:0;color:white;width:100%;font-size:11px}.server-clock{display:flex;align-items:baseline;gap:6px;padding:0 4px}.server-clock small{font-size:8px;color:#6f7a94;letter-spacing:.13em}.server-clock time{font-variant-numeric:tabular-nums;font-size:12px;font-weight:750}.icon-btn,.mobile-menu{width:35px;height:35px;border:1px solid #2b3651;background:#111827;color:#b8c3dc;border-radius:10px;display:grid;place-items:center}.mobile-menu{display:none}.content{padding:22px 24px 44px;max-width:1700px;margin:0 auto}.eyebrow{font-size:9px;letter-spacing:.16em;color:#7768e7;font-weight:850}
.page-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.page-row h3,.panel h3,.panel h4{margin:0}.page-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid #32405f;background:#151d30;color:#edf2ff;border-radius:10px;padding:9px 14px;font-size:11px;font-weight:800;transition:.15s}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn.primary{border-color:transparent;background:linear-gradient(90deg,#6754ff,#805aff 52%,#4b8cff);box-shadow:0 8px 24px rgba(99,79,255,.18)}.btn.good{color:#8ff2b1;border-color:rgba(73,223,135,.35);background:rgba(73,223,135,.07)}.btn.warn{color:#ffd16d;border-color:rgba(255,202,85,.35);background:rgba(255,202,85,.07)}.btn.danger{color:#ff9aa4;border-color:rgba(255,97,113,.35);background:rgba(255,97,113,.07)}.btn.ghost{background:transparent}.btn.wide{width:100%;padding:12px}.btn.mini{padding:6px 9px;font-size:10px}.btn.rgb{border:1px solid transparent;background:linear-gradient(#111827,#111827) padding-box,var(--rgb) border-box}.chip-row{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid #2c3855;background:#101725;color:#96a2bb;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:750}.chip.active{color:#fff;border-color:#5946b6;background:#211c42}.chip .count{margin-left:5px;color:#d5dbeb}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}.stat-card{position:relative;overflow:hidden;min-height:112px;padding:17px 18px;background:linear-gradient(145deg,#121829,#0f1422);border:1px solid #28334c;border-radius:14px}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--purple))}.stat-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-40px;background:var(--accent,var(--purple));opacity:.05;filter:blur(2px)}.stat-card .label{font-size:10px;color:#9aa6bc}.stat-card strong{display:block;font-size:22px;margin-top:8px;color:var(--accent,var(--text));letter-spacing:-.02em}.stat-card small{display:block;color:#68748d;font-size:9px;margin-top:5px}.panel{background:linear-gradient(145deg,#111625,#0d1320);border:1px solid #27324a;border-radius:14px;padding:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.panel-head small{color:#6f7b94}.dashboard-lower{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:13px;margin-top:18px}.chart-box{height:220px;position:relative}.chart-box canvas{width:100%;height:100%}.unit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.unit-card{min-height:218px;border:1px solid #2d3956;border-radius:14px;background:linear-gradient(145deg,#141a2b,#101625);padding:14px;position:relative;overflow:hidden}.unit-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#303b55}.unit-card.rented:before{background:linear-gradient(90deg,#27b7ff,#815dff)}.unit-card.maintenance:before{background:#ff6171}.unit-card.booked:before{background:#ffca55}.unit-card:hover{border-color:#3b496c}.unit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.unit-title{font-size:16px;font-weight:900;letter-spacing:-.02em}.unit-meta{color:#78859f;font-size:9px;margin-top:3px}.badge{display:inline-flex;align-items:center;border-radius:6px;padding:4px 7px;font-size:9px;font-weight:850;background:#1a2238;color:#b9c3d8}.badge.available{color:#7dea9f;background:rgba(73,223,135,.1)}.badge.rented{color:#69c9ff;background:rgba(39,183,255,.1)}.badge.booked{color:#ffcf68;background:rgba(255,202,85,.1)}.badge.maintenance{color:#ff909b;background:rgba(255,97,113,.1)}.badge.offline{color:#9ca5b8;background:#1a2030}.status-dot{width:8px;height:8px;border-radius:50%;background:#7f899f}.status-dot.online{background:var(--green);box-shadow:0 0 9px rgba(73,223,135,.6)}.session-time{font-size:22px;font-weight:950;color:#8a72ff;margin:22px 0 5px;font-variant-numeric:tabular-nums}.session-customer{font-size:10px;color:#b5bfd4}.session-money{font-size:12px;color:#62e493;font-weight:850;margin-top:8px}.empty-unit{margin:35px 0 24px;color:#77849e;font-size:10px}.rate{font-size:10px;color:#63df8f;margin-top:15px}.unit-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.unit-actions .btn{flex:1;min-width:70px}.full-action{width:100%;margin-top:7px}.tv-line{display:flex;align-items:center;gap:6px;color:#707c96;font-size:9px;margin-top:9px}.tv-line .tv-on{color:#6be89b}.live-limit{display:inline-flex;gap:6px;align-items:center;margin-top:8px;font-size:9px;color:#ffce6d}.progress{height:4px;border-radius:999px;background:#252f45;overflow:hidden;margin-top:7px}.progress span{display:block;height:100%;background:var(--rgb);border-radius:inherit}.kpi-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mini-kpi{padding:12px;border:1px solid #29354f;background:#111827;border-radius:11px}.mini-kpi span{display:block;color:#7e8aa4;font-size:9px}.mini-kpi strong{display:block;margin-top:5px;font-size:14px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.queue-card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid #293651;border-radius:11px;background:#111827;margin-bottom:8px}.queue-card b{display:block;font-size:11px}.queue-card small{display:block;color:#7f8ba4;font-size:9px;margin-top:3px}.table-wrap{overflow:auto;border:1px solid #28344e;border-radius:12px}.data-table{width:100%;border-collapse:collapse;min-width:760px;background:#0f1523}.data-table th,.data-table td{padding:11px 12px;text-align:left;border-bottom:1px solid #212c41;font-size:10px;white-space:nowrap}.data-table th{position:sticky;top:0;background:#121827;color:#8490aa;font-weight:800;z-index:1}.data-table td{color:#dce2f1}.data-table tr:hover td{background:#131a2b}.muted{color:var(--muted)}.money{color:#64e494;font-weight:850}.danger-text{color:#ff8d99}.good-text{color:#75eaa1}.amber-text{color:#ffd16c}.blue-text{color:#62c8ff}.code-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#9b87ff;font-weight:800}.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:850;background:#192134;color:#abb5ca}.status-pill.paid,.status-pill.good,.status-pill.available{color:#7dea9f;background:rgba(73,223,135,.09)}.status-pill.pending,.status-pill.waiting_verification,.status-pill.booked{color:#ffd16c;background:rgba(255,202,85,.09)}.status-pill.failed,.status-pill.cancelled,.status-pill.maintenance{color:#ff909b;background:rgba(255,97,113,.09)}.status-pill.rented{color:#6bcaff;background:rgba(39,183,255,.09)}.cashier-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,.8fr);gap:13px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.product-card{border:1px solid #2b3855;border-radius:12px;background:#121827;padding:13px;min-height:132px}.product-card b{display:block;font-size:11px}.product-card small{display:block;color:#78859f;font-size:9px;margin-top:4px}.product-card .money{display:block;margin:15px 0 9px}.cart-line{display:grid;grid-template-columns:1fr 62px 88px 28px;gap:7px;align-items:center;padding:10px 0;border-bottom:1px solid #242f46}.cart-line b{font-size:10px}.cart-total{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:18px;margin:17px 0}.payment-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payment-method{border:1px solid #2a3753;background:#111827;color:#cdd5e7;border-radius:10px;padding:10px;text-align:left;min-height:58px}.payment-method strong{display:block;font-size:10px}.payment-method span{display:block;font-size:8px;color:#74809a;margin-top:3px}.payment-method.active{border-color:#6d55e9;box-shadow:inset 0 0 0 1px rgba(129,93,255,.18);background:#171532}.payment-card{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #2b3751;border-radius:12px;background:#111827;margin-bottom:8px}.payment-icon{width:48px;height:48px;border:1px solid #34415e;background:#0d1422;border-radius:11px;display:grid;place-items:center;font-weight:900;color:#c6cdeb}.payment-card b{display:block;font-size:11px}.payment-card small{display:block;color:#7e8aa3;font-size:9px;margin-top:3px}.payment-card .amount{font-size:12px;font-weight:900}.proof-thumb{max-width:210px;max-height:210px;border-radius:12px;border:1px solid #34415c;background:white;object-fit:contain}.qris-preview{max-width:260px;width:100%;aspect-ratio:1;object-fit:contain;background:white;border-radius:14px;padding:10px;border:1px solid #35415c}.help-box{padding:12px;border:1px dashed #3a4767;border-radius:11px;background:#0d1525;color:#8e9ab2;font-size:10px;line-height:1.65}.empty-state{padding:38px;text-align:center;color:#7b879f}.empty-state strong{display:block;color:#e7ecf8;margin-bottom:5px}.stack-form{display:grid;gap:12px}.stack-form label,.field{display:grid;gap:6px;color:#aab4c9;font-size:10px;font-weight:720}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.form-grid .full{grid-column:1/-1}input,select,textarea{width:100%;background:#0c1321;color:#f2f5ff;border:1px solid #2d3955;border-radius:10px;padding:10px 11px;outline:none}input:focus,select:focus,textarea:focus{border-color:#7258e8;box-shadow:0 0 0 3px rgba(114,88,232,.12)}textarea{min-height:82px;resize:vertical}.form-error{min-height:17px;color:#ff8490;font-size:10px}.date-field-wrap{display:grid;gap:6px}.date-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #2d3955;background:#0c1321;color:#eff3ff;border-radius:10px;padding:10px 11px;text-align:left}.date-trigger span:last-child{color:#7464e8}.switch-line{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #293651;background:#101726;border-radius:11px;padding:11px 12px}.switch-line b{display:block;font-size:10px}.switch-line small{display:block;color:#78849e;font-size:8px;margin-top:3px}.switch{position:relative;width:38px;height:22px}.switch input{display:none}.switch span{position:absolute;inset:0;border-radius:999px;background:#283149;transition:.2s}.switch span:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#8e99af;transition:.2s}.switch input:checked+span{background:#5544b6}.switch input:checked+span:after{left:19px;background:white}.section-title{display:flex;align-items:center;gap:10px;margin:4px 0 12px}.section-title:after{content:"";height:1px;background:#26324a;flex:1}.section-title span{font-size:9px;letter-spacing:.12em;color:#7d89a4;font-weight:850}.modal-backdrop,.date-backdrop{position:fixed;inset:0;z-index:200;background:rgba(2,5,12,.76);backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}.modal-card{width:min(650px,100%);max-height:90vh;overflow:auto;background:linear-gradient(145deg,#111827,#0d1321);border:1px solid #35415e;border-radius:17px;padding:18px;box-shadow:var(--shadow)}.modal-card.wide{width:min(900px,100%)}.modal-head,.date-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}.modal-head h3,.date-head h3{margin:0;font-size:16px}.modal-head p{margin:4px 0 0;color:#7e8ba4;font-size:9px}.modal-head button{border:1px solid #2d3853;background:#141b2c;color:#aeb9ce;border-radius:9px;width:32px;height:32px;font-size:18px}.date-dialog{width:min(420px,100%);background:linear-gradient(145deg,#111827,#0b1220);border:1px solid #37445f;border-radius:18px;padding:18px;box-shadow:0 35px 100px rgba(0,0,0,.5)}.date-head{margin-bottom:12px}.calendar-toolbar{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:9px;margin:8px 0 14px}.calendar-toolbar strong{text-align:center;font-size:12px}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar-weekdays span{text-align:center;color:#68748d;font-size:8px;padding-bottom:5px}.calendar-grid button{aspect-ratio:1;border:1px solid transparent;background:transparent;color:#dbe1ef;border-radius:9px;font-size:10px}.calendar-grid button:hover{background:#1a2235;border-color:#33405d}.calendar-grid button.outside{color:#3f4960}.calendar-grid button.today{border-color:#4b5b7d}.calendar-grid button.selected{background:linear-gradient(145deg,#6f53f0,#436bd9);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(83,78,219,.28)}.time-row{display:grid;grid-template-columns:1fr 14px 1fr;align-items:end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #26324a}.time-row label{display:grid;gap:5px;color:#8995ac;font-size:9px}.time-row>span{text-align:center;padding-bottom:10px}.date-actions{display:flex;justify-content:space-between;gap:9px;margin-top:15px}.toast-area{position:fixed;right:18px;bottom:18px;z-index:300;display:grid;gap:8px}.toast{min-width:260px;max-width:390px;padding:12px 14px;background:#121929;border:1px solid #34415e;color:#f4f7ff;border-radius:11px;box-shadow:var(--shadow);font-size:10px}.toast.ok{border-color:#2e6a4b}.toast.err{border-color:#7c3541}.toast.info{border-color:#4a4c83}.login-shell{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 20%,rgba(39,183,255,.12),transparent 30%),radial-gradient(circle at 80% 75%,rgba(255,79,200,.08),transparent 28%),radial-gradient(circle at 54% 48%,rgba(129,93,255,.1),transparent 28%),#060810}.login-card{width:min(450px,100%);border:1px solid transparent;background:linear-gradient(145deg,#101626,#0b101d) padding-box,var(--rgb) border-box;border-radius:21px;padding:32px;box-shadow:0 40px 120px rgba(0,0,0,.5)}.login-copy{margin:27px 0 22px}.login-copy h1{margin:6px 0 7px;font-size:27px;letter-spacing:-.03em}.login-copy p{margin:0;color:#8995ae;font-size:11px;line-height:1.7}.version-line{text-align:center;color:#59647c;font-size:9px;margin-top:17px}.version-line span{margin:0 5px}.qr-upload-box{display:grid;grid-template-columns:150px 1fr;gap:13px;align-items:center}.qr-upload-box img{width:150px;height:150px;object-fit:contain;background:white;border-radius:12px;padding:7px}.settings-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.settings-tab{border:1px solid #2c3854;background:#101725;color:#909cb5;border-radius:9px;padding:8px 11px;font-size:9px;font-weight:800}.settings-tab.active{color:white;border-color:#6150c4;background:#1d1a3b}.divider{height:1px;background:#243047;margin:15px 0}.copy-row{display:flex;gap:7px}.copy-row input{flex:1}.payment-result{display:grid;gap:12px}.result-amount{font-size:28px;font-weight:950;color:#69e39a;letter-spacing:-.03em}.result-code{font-family:ui-monospace,SFMono-Regular,monospace;color:#9c88ff;font-size:11px}.notice{padding:11px 12px;border-radius:10px;border:1px solid #35415d;background:#11192a;color:#9ca8bd;font-size:9px;line-height:1.6}.notice.warn{border-color:#5e5233;color:#e8c76e;background:#17170f}.notice.good{border-color:#2f5e47;color:#89e8a9;background:#0f1815}.receipt-preview{background:white;color:#111;border-radius:12px;padding:17px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.receipt-preview h3{margin:0 0 12px}.receipt-preview .line{display:flex;justify-content:space-between;border-bottom:1px dashed #bbb;padding:6px 0;font-size:11px}.receipt-preview .total{font-weight:900;font-size:15px}.bar-list{display:grid;gap:8px}.bar-line{display:grid;grid-template-columns:100px 1fr 90px;gap:9px;align-items:center;font-size:9px}.bar-line .bar{height:7px;border-radius:999px;background:#212b40;overflow:hidden}.bar-line .bar span{display:block;height:100%;border-radius:inherit;background:var(--rgb)}
@media(max-width:1220px){.unit-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.searchbox{width:230px}}
@media(max-width:920px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;width:248px;transition:.2s;box-shadow:25px 0 90px rgba(0,0,0,.45)}.sidebar.open{left:0}.mobile-menu{display:grid}.topbar{padding:0 14px}.content{padding:16px 14px 36px}.searchbox{display:none}.unit-grid{grid-template-columns:repeat(2,1fr)}.dashboard-lower,.cashier-layout,.grid-2,.grid-3{grid-template-columns:1fr}.top-actions{gap:7px}.server-clock small{display:none}}
@media(max-width:580px){.unit-grid,.stats-grid,.product-grid,.form-grid,.kpi-inline,.payment-method-grid{grid-template-columns:1fr}.topbar{height:68px}.page-heading small{display:none}.server-clock{display:none}.content{padding:13px 9px 30px}.page-row{align-items:flex-start;flex-direction:column}.unit-card{min-height:195px}.modal-backdrop,.date-backdrop{padding:7px}.modal-card,.date-dialog{border-radius:14px}.login-card{padding:23px}.qr-upload-box{grid-template-columns:1fr}.qr-upload-box img{width:100%;height:auto;max-height:260px}.cart-line{grid-template-columns:1fr 55px 77px 25px}.bar-line{grid-template-columns:75px 1fr 70px}.payment-card{grid-template-columns:42px 1fr}.payment-card .amount{grid-column:2}.payment-icon{width:42px;height:42px}}
.pay-shell{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 16% 18%,rgba(39,183,255,.1),transparent 27%),radial-gradient(circle at 84% 76%,rgba(255,79,200,.08),transparent 28%),#070911}.pay-box{width:min(520px,100%);border:1px solid transparent;background:linear-gradient(145deg,#111827,#0b111e) padding-box,var(--rgb) border-box;border-radius:20px;padding:25px;box-shadow:0 36px 110px rgba(0,0,0,.48)}.pay-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:25px 0 16px}.pay-header h1{font-size:21px;margin:5px 0}.pay-header p{margin:0;color:#7e8ba5;font-size:10px}.pay-amount{font-size:32px;font-weight:950;color:#69e39a;letter-spacing:-.04em;margin:7px 0}.pay-detail{display:grid;grid-template-columns:1fr auto;gap:9px;padding:9px 0;border-bottom:1px solid #253047;font-size:10px}.pay-detail span{color:#7e8aa3}.pay-detail b{text-align:right}.pay-actions{display:grid;gap:9px;margin-top:15px}.pay-qris{text-align:center;padding:12px;background:#0d1422;border:1px solid #293651;border-radius:14px}.pay-qris img{width:min(300px,100%);aspect-ratio:1;object-fit:contain;background:white;border-radius:13px;padding:10px}.proof-form{display:grid;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid #26324a}.proof-form label{display:grid;gap:6px;color:#aab4c9;font-size:10px}.pay-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:9px;font-weight:900}.pay-status.paid{background:rgba(73,223,135,.1);color:#7bea9f}.pay-status.waiting_verification,.pay-status.pending{background:rgba(255,202,85,.1);color:#ffd16c}.pay-status.failed,.pay-status.expired,.pay-status.cancelled{background:rgba(255,97,113,.1);color:#ff919c}@media(max-width:560px){.pay-shell{padding:8px}.pay-box{padding:19px;border-radius:15px}.pay-header{margin-top:20px}.pay-amount{font-size:28px}}
.tv-body{background:#04060b;overflow:hidden}.tv-receiver{min-height:100vh;display:grid;place-items:center;padding:4vw;background:radial-gradient(circle at 50% 40%,rgba(129,93,255,.12),transparent 30%),#04060b}.tv-receiver>.brand-lockup{position:fixed;top:4vh;left:4vw}.tv-pair-card{width:min(760px,86vw);text-align:center;border:1px solid #313b55;border-radius:24px;padding:48px;background:linear-gradient(145deg,#101626,#080d18);box-shadow:0 35px 120px rgba(0,0,0,.5)}.tv-pair-card h1{font-size:clamp(32px,5vw,68px);margin:12px 0 8px;letter-spacing:-.04em}.tv-pair-card p{font-size:clamp(15px,1.7vw,24px);color:#8290aa}.tv-code-big{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(28px,5vw,66px);font-weight:950;color:#917bff;letter-spacing:.18em;margin:34px 0}.tv-status{display:inline-flex;align-items:center;gap:10px;border:1px solid #2c3853;border-radius:999px;padding:11px 18px;color:#aab5ca;font-weight:800}.tv-status span{width:10px;height:10px;border-radius:50%;background:#ffca55}.tv-status.online span{background:#49df87;box-shadow:0 0 16px rgba(73,223,135,.7)}.tv-status.offline span{background:#ff6171}.tv-overlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:rgba(0,0,0,.42);backdrop-filter:blur(5px);padding:6vw}.tv-message-box{width:min(1100px,90vw);text-align:center;border:2px solid transparent;background:linear-gradient(145deg,rgba(11,16,28,.98),rgba(7,10,18,.98)) padding-box,var(--rgb) border-box;border-radius:32px;padding:clamp(38px,6vw,80px);box-shadow:0 40px 160px rgba(0,0,0,.75),0 0 90px rgba(129,93,255,.18)}.tv-message-box h2{font-size:clamp(34px,5.5vw,86px);line-height:1.16;margin:22px 0 30px;letter-spacing:-.04em}.tv-countdown{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#181f32;border:1px solid #39445f;color:#a89aff;font-size:22px;font-weight:900}@media(max-width:700px){.tv-pair-card{padding:30px}.tv-receiver>.brand-lockup{position:static;margin-bottom:20px}.tv-receiver{display:flex;flex-direction:column;justify-content:center}.tv-message-box{border-radius:20px}}


/* RentalPS v2.2.0 — compact modern date/time picker */
.date-backdrop{background:rgba(2,5,12,.42);backdrop-filter:blur(4px);padding:12px}
.date-dialog.compact-date-dialog{width:min(334px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;border-radius:15px;padding:12px 12px 11px;background:linear-gradient(155deg,#111827,#0a101d);box-shadow:0 22px 70px rgba(0,0,0,.46)}
.compact-date-head{margin-bottom:7px;align-items:center}.compact-date-head h3{font-size:13px}.compact-date-head .eyebrow{font-size:7px}.compact-date-head .icon-btn{width:28px;height:28px}
.compact-calendar-toolbar{display:grid;grid-template-columns:30px minmax(82px,1fr) 76px 30px;align-items:center;gap:6px;margin:5px 0 9px}.compact-calendar-toolbar .icon-btn{width:30px;height:30px}.compact-calendar-toolbar strong{text-align:center;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.year-select{height:30px;padding:4px 23px 4px 8px;border-radius:8px;background:#0d1422;color:#f3f6ff;border:1px solid #33405c;font-size:10px;font-weight:850;cursor:pointer;box-shadow:none}
.year-select:focus{border-color:#795fff;box-shadow:0 0 0 2px rgba(121,95,255,.12)}
.compact-date-dialog .calendar-weekdays,.compact-date-dialog .calendar-grid{gap:3px}.compact-date-dialog .calendar-weekdays span{font-size:7px;padding-bottom:2px}.compact-date-dialog .calendar-grid button{height:29px;aspect-ratio:auto;border-radius:7px;font-size:9px;padding:0}.compact-date-dialog .calendar-grid button.selected{box-shadow:0 4px 12px rgba(83,78,219,.26)}
.modern-time-section{margin-top:9px;padding-top:9px;border-top:1px solid #253149}.time-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.time-section-head span{font-size:8px;color:#8794ac;font-weight:800;letter-spacing:.08em}.time-section-head strong{font-size:11px;color:#f3f6ff;font-variant-numeric:tabular-nums}
.time-wheel-picker{position:relative;display:grid;grid-template-columns:1fr 16px 1fr;align-items:center;gap:5px;padding:5px 7px;border:1px solid #2b3854;border-radius:11px;background:linear-gradient(180deg,#0b1220,#111827);overflow:hidden}.time-wheel-picker:after{content:"";position:absolute;left:7px;right:7px;top:37px;height:32px;border-top:1px solid rgba(129,93,255,.35);border-bottom:1px solid rgba(129,93,255,.35);background:rgba(129,93,255,.07);pointer-events:none;border-radius:6px}
.time-wheel-column{display:grid;grid-template-rows:12px 96px;min-width:0}.time-wheel-column small{text-align:center;font-size:6px;letter-spacing:.14em;color:#68758e;font-weight:900}.time-wheel{height:96px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;padding:32px 0}.time-wheel::-webkit-scrollbar{display:none}.time-wheel button{display:block;width:100%;height:32px;scroll-snap-align:center;border:0;background:transparent;color:#66728a;font-size:11px;font-weight:760;font-variant-numeric:tabular-nums;transition:.12s;position:relative;z-index:1}.time-wheel button.selected{color:#fff;font-size:16px;font-weight:950;text-shadow:0 0 16px rgba(129,93,255,.55)}.time-wheel-colon{text-align:center;font-size:18px;font-weight:950;color:#8d78ff;padding-top:11px;z-index:2}
.time-quick-row{display:flex;gap:5px;margin-top:6px}.time-quick-row button{flex:1;border:1px solid #293650;background:#0e1625;color:#8f9bb3;border-radius:7px;padding:5px 6px;font-size:7px;font-weight:850}.time-quick-row button:hover{color:#fff;border-color:#5f4dc7;background:#181632}
.compact-date-actions{margin-top:9px;gap:7px}.compact-date-actions .btn{padding:7px 10px;font-size:9px;min-width:76px}
@media(max-width:580px){.date-backdrop{padding:8px}.date-dialog.compact-date-dialog{width:min(326px,calc(100vw - 16px));border-radius:14px;padding:11px}.compact-date-dialog .calendar-grid button{height:28px}.modern-time-section{margin-top:8px;padding-top:8px}}