:root{--bg:#f4f6f8;--surface:#ffffff;--text:#0f1720;--muted:#5d6874;--accent:#0a6e64;--error:#b42318;--success:#067647;--border:#d0d7de}*{box-sizing:border-box}body{margin:0;background:linear-gradient(140deg,#eef4ff,#f8fafc 45%,#ecfdf3);color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.page{padding:24px}.page-center{min-height:100vh;display:grid;place-items:center}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.topbar nav{display:flex;gap:16px;flex-wrap:wrap}.topbar a{color:var(--accent);text-decoration:none;font-weight:600}.stack{display:grid;grid-gap:16px;gap:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:0 8px 24px rgba(15,23,32,.08);grid-gap:12px;gap:12px;max-width:800px}.card,label{display:grid}label{grid-gap:6px;gap:6px;color:var(--muted);font-size:14px}button,input,select,textarea{font:inherit}input,select,textarea{border:1px solid var(--border);border-radius:8px;padding:10px}button{border:none;border-radius:8px;padding:10px 14px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}button:disabled{opacity:.7;cursor:not-allowed}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:10px;border-bottom:1px solid var(--border)}.action-row{display:flex;flex-wrap:wrap;gap:8px}.logout-btn{background:#b42318}.error{color:var(--error)}.success{color:var(--success)}@media (max-width:768px){.topbar{flex-direction:column;align-items:flex-start;gap:10px}.card{width:100%;padding:16px}}.brand-block{display:grid;grid-gap:4px;gap:4px}.kasir-shell{min-height:100dvh;height:100dvh;max-height:100dvh;padding:8px;display:flex;flex-direction:column;overflow:hidden}.kasir-shell>:not(.topbar){min-height:0}.kasir-topbar{margin-bottom:8px;gap:8px}.kasir-topbar .brand-block h1{margin:0;font-size:42px;line-height:1}.kasir-metro-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.metro-btn,.metro-link{height:36px;min-height:36px;border-radius:0;border:1px solid #5d6571;box-shadow:inset 0 0 0 1px #f3f5f7;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:700;color:#13202f;background:linear-gradient(180deg,#e8edf2,#d6dde5);cursor:pointer}.metro-btn:hover,.metro-link:hover{background:linear-gradient(180deg,#f1f5fa,#dee6ef)}.metro-btn-primary{border-color:#1f5a53;box-shadow:inset 0 0 0 1px #2ca193;background:linear-gradient(180deg,#178878,#0f6f62);color:#ffffff}.metro-btn-primary:hover{background:linear-gradient(180deg,#199685,#11786b)}.metro-btn-danger{border-color:#88241a;box-shadow:inset 0 0 0 1px #d14b3f;background:linear-gradient(180deg,#c73a2d,#a42c22);color:#ffffff}.kasir-topbar-popup-overlay{position:fixed;inset:0;background:rgba(30,30,30,.34);z-index:95;padding:10px;display:grid;place-items:center}.kasir-topbar-popup-modal{width:auto;max-width:min(1240px,calc(100vw - 20px));max-height:min(860px,calc(100dvh - 20px));background:#7a7a7a;border:2px solid #8f8f8f;display:flex;flex-direction:column;overflow:hidden}.kasir-topbar-popup-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px;border-bottom:1px solid #9c9c9c;background:#b0b0b0}.kasir-topbar-popup-iframe{flex:0 0 auto;min-height:300px;height:clamp(360px,64dvh,760px);width:100%;border:0;background:#9f9f9f}.kasir-context-menu-backdrop{position:fixed;inset:0;z-index:120}.kasir-context-menu{position:fixed;width:min(280px,calc(100vw - 16px));background:#e2e2e2;border:2px solid #676767;box-shadow:0 8px 18px rgba(0,0,0,.25);border-radius:0;overflow:hidden}.kasir-context-title{padding:8px 10px;font-size:12px;font-weight:800;letter-spacing:.25px;color:#151515;background:#b8b8b8;border-bottom:1px solid #8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kasir-context-list{display:grid}.kasir-context-item{border:0;border-top:1px solid #9d9d9d;border-radius:0;min-height:34px;padding:7px 10px;text-align:left;font-size:13px;font-weight:700;color:#131313;background:linear-gradient(180deg,#f0f0f0,#dadada)}.kasir-context-item:first-child{border-top:0}.kasir-context-item:hover:not(:disabled){background:linear-gradient(180deg,#f7f7f7,#e2e2e2)}.kasir-context-item.danger{color:#8f1616}.global-about-overlay{position:fixed;inset:0;z-index:130;background:rgba(24,24,24,.35);display:grid;place-items:center;padding:12px}.global-about-modal{width:min(420px,calc(100vw - 24px));background:#f1f1f1;border:2px solid #676767;box-shadow:0 10px 28px rgba(0,0,0,.28);padding:12px}.global-about-modal h3{margin:0 0 10px}.global-about-modal p{margin:4px 0}.global-about-actions{margin-top:12px;display:flex;justify-content:flex-end}.kasir-popup-topbar{margin-bottom:10px}.kasir-popup-stage{background:#9f9f9f;border:1px solid #7f7f7f;border-radius:8px;padding:14px;overflow:auto}.kasir-embed-stage{min-height:100%;height:100%;max-height:100dvh;overflow:auto;padding:8px;background:#9f9f9f}.kasir-embed-stage .stack{gap:8px}.kasir-embed-stage .card{max-width:none;width:100%;border-radius:2px;box-shadow:none;border:1px solid #8f8f8f;background:#cfcfcf;padding:10px;gap:8px}.kasir-embed-stage table{display:block;width:100%;overflow:auto;max-width:100%;white-space:nowrap}.kasir-embed-stage table tbody,.kasir-embed-stage table thead{display:table;width:100%}.kasir-embed-stage td,.kasir-embed-stage th{padding:8px;font-size:13px}.kasir-embed-stage button,.kasir-embed-stage input,.kasir-embed-stage select,.kasir-embed-stage textarea{min-height:34px;border-radius:2px}.kasir-popup-stage .card{background:#b8b8b8;border:1px solid #8a8a8a;box-shadow:none}.kasir-popup-stage table td,.kasir-popup-stage table th{background:#d2d2d2}.group-badge{display:inline-block;width:-moz-fit-content;width:fit-content;background:#0a6e64;color:#ffffff;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;letter-spacing:.4px}.kiosk-shell{display:grid;grid-gap:16px;gap:16px}.kiosk-header h2{margin:0;font-size:24px}.kiosk-header p{margin:4px 0 0;color:var(--muted)}.kiosk-groups{display:grid;grid-gap:14px;gap:14px}.kiosk-group{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 8px 24px rgba(15,23,32,.06)}.kiosk-group h3{margin:0 0 10px;font-size:15px;color:#0b4a45}.kiosk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-gap:10px;gap:10px}.kiosk-tile{display:block;border:1px solid #c7e0dc;background:linear-gradient(160deg,#f4fffd,#e6f7f4);border-radius:10px;padding:12px;text-decoration:none;color:#11413d;font-weight:700;text-align:center}.kiosk-tile:hover{border-color:#65b3aa;background:linear-gradient(160deg,#ecfff9,#daf3ee)}.pos-shell{flex:1 1 auto;min-height:0;height:100%;max-height:100%;background:#9f9f9f;border:1px solid #d7d7d7;padding:8px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}.pos-top-row{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.pos-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));grid-gap:8px;gap:8px;width:min(690px,100%)}.pos-action{display:grid;place-items:center;text-decoration:none;height:76px;min-height:76px;border:2px solid #575757;color:#0a0a0a;font-size:18px;font-weight:800;letter-spacing:.4px;box-shadow:inset 0 0 0 1px #a9a9a9;align-self:start;cursor:pointer}button.pos-action{padding:0 10px}.pos-action-green{background:linear-gradient(180deg,#78cb7d,#5eb76b)}.pos-action-yellow{background:linear-gradient(180deg,#ebde60,#d0c93f)}.pos-notif-wrap{min-width:430px;border:1px solid #5f5f5f;background:#aaaaaa;padding:6px}.pos-utility-row{display:flex;align-items:flex-start;gap:8px}.pos-icon-btn{border-radius:0;border:2px solid #5e5e5e;background:linear-gradient(180deg,#f6f6f6,#d4d4d4);color:#161616;min-width:54px;min-height:56px;padding:4px;font-size:18px;font-weight:700;display:grid;place-items:center}.pos-waiting-btn{display:flex;flex-direction:column;gap:1px}.pos-waiting-sign{color:#22b14c;line-height:1}.pos-waiting-bars{color:#4f4f4f;line-height:1}.pos-notif-title{font-size:12px;font-weight:700;margin-bottom:4px}.pos-notif-grid{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));grid-gap:8px;gap:8px}.pos-notif-btn{text-decoration:none;height:44px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;font-weight:800;color:#111111;background:linear-gradient(180deg,#d8d8d8,#bdbdbd);border:2px solid #5e5e5e;border-radius:0;cursor:pointer;align-self:start}.pos-notif-badge{min-width:22px;min-height:22px;border:1px solid #777777;background:#dcdcdc;border-radius:11px;display:grid;place-items:center;font-size:11px;font-weight:800}.pos-notif-badge.active{background:#d92121;border-color:#7f1010;color:#ffffff}.pos-filter-row{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px;border-top:2px solid #c9c9c9;align-items:flex-start}.pos-filter-btn{text-decoration:none;border:2px solid #636363;box-shadow:inset 0 0 0 1px #b7b7b7;height:50px;min-height:50px;min-width:94px;padding:10px 12px;display:grid;place-items:center;font-weight:800;color:#111111;background:linear-gradient(180deg,#dcdcdc,#c1c1c1);border-radius:0;align-self:start}.pos-filter-btn.active{box-shadow:inset 0 0 0 2px #0078d4;border-color:#2b2b2b}.pos-floor-btn{min-width:136px;background:linear-gradient(180deg,#8ed4e2,#5dc2d7)}.pos-room-btn{min-width:84px;background:linear-gradient(180deg,#f4d562,#efc740)}.pos-state-btn{min-width:124px}.pos-room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:10px;gap:10px;flex:1 1 auto;min-height:0;overflow:auto;align-content:start;padding:4px 2px 8px}.pos-room-card{text-decoration:none;color:#151515;background:#efefef;border:2px solid #bcbcbc;min-height:162px;display:grid;grid-template-rows:auto 1fr auto;cursor:pointer;border-radius:0;padding:0}button.pos-room-card{text-align:initial}.pos-room-head{text-align:center;font-weight:800;font-size:14px;line-height:1.2;padding:3px 4px;border-bottom:1px solid #9e9e9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-room-head.normal{background:#d8d8d8}.pos-room-head.danger{background:#ff3a3a;color:#1b0000}.pos-room-body{display:grid;align-content:center;justify-items:center;grid-gap:4px;gap:4px;padding:4px 6px}.pos-room-state{font-size:18px;font-weight:400;line-height:1.05;margin:0}.pos-room-guest{font-size:17px;font-weight:600;line-height:1.1;margin:0}.pos-room-time{font-size:40px;font-weight:800;line-height:1;margin:0}.pos-room-foot{text-align:center;font-weight:800;font-size:13px;padding:2px 4px;border-top:1px solid #9e9e9e;background:#c8c8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-modal-overlay{position:fixed;inset:0;background:rgba(30,30,30,.34);display:grid;place-items:center;z-index:95;padding:10px;overflow:auto}.pos-setting-modal{width:auto;max-width:min(1240px,calc(100vw - 20px));max-height:min(860px,calc(100dvh - 20px));background:#7a7a7a;border:2px solid #8f8f8f;box-shadow:0 10px 30px rgba(0,0,0,.32);padding:8px;overflow:auto}.pos-modal-head{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:38px;padding:2px 0;border-bottom:1px solid #9a9a9a;margin-bottom:6px}.pos-modal-head strong{font-size:15px;font-weight:800;color:#111111;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pos-modal-close-top{border-radius:0;border:2px solid #8f8f8f;min-width:92px;min-height:34px;background:#d2d2d2;color:#111111;font-weight:700}.pos-setting-modal .card{background:#b8b8b8;border:1px solid #8a8a8a;box-shadow:none}.pos-setting-modal table td,.pos-setting-modal table th{background:#d2d2d2}.pos-setting-tabs{display:flex;flex-wrap:wrap;gap:0}.pos-setting-tabs button{border-radius:0;border:2px solid #777777;background:#e0e0e0;color:#161616;font-size:14px;font-weight:700;min-height:40px;min-width:130px}.pos-setting-tabs button.active{border-top-color:#1e90ff;border-top-width:4px}.pos-setting-body{border:2px solid #a5a5a5;padding:8px;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:8px;gap:8px;margin-top:2px}.pos-setting-list{border:2px solid #a5a5a5;padding:6px}.pos-setting-list h4{margin:0 0 6px;font-size:18px;letter-spacing:.2px}.pos-setting-list ul{margin:0;padding:8px;list-style:none;background:#e9e9e9;min-height:220px;border:1px solid #aaaaaa}.pos-setting-list li{font-size:14px;line-height:1.35}.pos-printer-select{margin-top:2px;border-radius:0;border:1px solid #999999;min-height:220px;background:#e9e9e9}.pos-setting-grid-list{border:2px solid #a5a5a5;padding:8px;margin-top:2px}.pos-setting-grid-list h4{margin:0 0 8px;font-size:16px}.pos-setting-list button{margin-top:8px;width:100%;border-radius:0;border:2px solid #8f8f8f;background:#dfdfdf;color:#111111;font-weight:700}.pos-setting-transfer{display:grid;align-content:center;grid-gap:8px;gap:8px}.pos-setting-transfer button{border-radius:0;border:2px solid #8f8f8f;background:#8a8a8a;min-width:56px;color:#ffffff;font-size:20px;font-weight:700}.pos-setting-footer{display:flex;justify-content:flex-end;margin-top:8px}.pos-setting-footer button{border-radius:0;border:2px solid #8f8f8f;min-width:112px;background:#d2d2d2;color:#111111;font-weight:700}.pos-route-modal{width:min(1240px,calc(100vw - 20px))}.pos-route-body{margin-top:8px;min-height:0;max-height:calc(100dvh - 180px);overflow:hidden;border:1px solid #999999;background:#f0f0f0}.pos-route-iframe{width:100%;min-height:300px;height:clamp(360px,64dvh,760px);border:0;display:block;background:#f0f0f0}@media (min-width:1100px){.kasir-topbar-popup-modal,.pos-route-modal{min-width:920px}.kasir-topbar-popup-iframe,.pos-route-iframe{min-width:900px}}.pos-waiting-panel{width:100%;height:auto;max-height:calc(100dvh - 240px);background:#efefef;border:1px solid #a5a5a5;display:grid;grid-template-rows:minmax(0,1fr) auto auto;overflow:auto}.pos-waiting-panel h3{margin:0;text-align:center;background:#7e7e7e;color:#ffffff;padding:10px 8px;font-size:34px;letter-spacing:.3px}.pos-waiting-head{display:grid;grid-template-columns:1fr auto;align-items:center;background:transparent;padding:0}.pos-waiting-head h3{padding:4px 6px;background:transparent;color:#111111;text-align:left;font-size:18px}.pos-waiting-panel table td,.pos-waiting-panel table th{border-bottom:1px solid #cccccc;color:#111111}.pos-waiting-table-wrap{overflow:auto;min-height:0}.pos-waiting-table-wrap table{min-width:100%}.pos-selected-row{background:#d5e9ff}.pos-empty-row{text-align:center;color:#4f4f4f;height:220px}.pos-waiting-form{display:grid;grid-template-columns:1fr 1fr 90px 90px;grid-gap:6px;gap:6px;padding:8px 10px 0}.pos-waiting-form input,.pos-waiting-form select{border-radius:0;border:1px solid #8f8f8f;padding:6px 8px;height:32px}.pos-waiting-actions{background:#7b7b7b;padding:8px 10px;display:flex;gap:8px;flex-wrap:wrap}.pos-waiting-actions button{border-radius:0;border:2px solid #666666;min-width:42px;min-height:36px;padding:4px;background:#d8d8d8}.pos-status-bar{position:-webkit-sticky;position:sticky;bottom:0;margin-top:auto;min-height:36px;display:flex;align-items:center;gap:0;border-top:2px solid #d8d8d8;background:#b2b2b2;color:#0f0f0f;font-size:12px}.pos-status-bar span{border-right:1px solid #8f8f8f;padding:6px 9px;white-space:nowrap}.pos-status-bar span:last-child{margin-left:auto;border-right:none;font-weight:700}@media (max-width:1100px){.pos-top-row{flex-direction:column}.pos-notif-wrap{min-width:0}.pos-quick-grid{max-width:none}.pos-waiting-panel{max-height:calc(100dvh - 250px)}}@media (max-width:700px){.pos-quick-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}.pos-notif-grid{grid-template-columns:1fr}.pos-room-state{font-size:16px}.pos-room-time{font-size:30px}.pos-notif-wrap{min-width:0}.pos-setting-body{grid-template-columns:1fr}.pos-setting-transfer{grid-auto-flow:column;justify-content:flex-start}.pos-waiting-form{grid-template-columns:1fr 1fr}.pos-status-bar{overflow-x:auto}}.theme-toggle-btn{border:1px solid var(--border);border-radius:6px;min-width:36px;min-height:34px;padding:4px 8px;background:var(--surface);color:var(--text);font-size:16px;font-weight:700;line-height:1}:root[data-theme=dark] body{background:linear-gradient(140deg,#12161c,#171d26 55%,#122018);color:#e6edf6}:root[data-theme=dark] .topbar a{color:#77d8ce}:root[data-theme=dark] .card{background:#1a2028;border-color:#2f3a46;color:#e6edf6;box-shadow:none}:root[data-theme=dark] .kasir-popup-stage{background:#4b4f56;border-color:#6b7078}:root[data-theme=dark] .pos-shell{background:#585b61;border-color:#70757e}:root[data-theme=dark] .pos-notif-wrap{background:#6a6f78;border-color:#808892}:root[data-theme=dark] .pos-setting-modal{background:#535860;border-color:#717782}:root[data-theme=dark] .pos-room-card{background:#d4d8dd}:root[data-theme=dark] .pos-status-bar{background:#737983;border-top-color:#9199a3}