:root{--navy:#111c31;--navy-2:#17243d;--blue:#1769f6;--blue-2:#0d58dd;--ink:#17233e;--text:#263654;--muted:#7786a1;--line:#e5ebf4;--paper:#fff;--canvas:#f3f6fb;--green:#18b77a;--green-bg:#e7f8f0;--red:#f0445c;--red-bg:#fff0f2;--orange:#f49a27;--orange-bg:#fff6df;--purple:#8d54e9;--shadow:0 8px 24px rgba(20,44,83,.055);font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);font-size:14px;line-height:1.45}
.app-startup-fallback{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:12px;padding:24px;background:#f3f7fc;color:#17233e;font-family:"Segoe UI",Arial,sans-serif;text-align:center}
.app-startup-fallback strong{color:#1769f6;font-size:22px}
.app-startup-fallback a{margin-top:8px;padding:10px 18px;border-radius:9px;background:#1769f6;color:#fff;font-weight:700;text-decoration:none}
.runtime-error-screen{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f4f8ff,#edf3fc);color:#17233e}
.runtime-error-card{width:min(100%,460px);padding:36px;border:1px solid #dfe8f5;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(21,48,91,.13);text-align:center}
.runtime-error-mark{display:grid;width:48px;height:48px;margin:0 auto 16px;place-items:center;border-radius:16px;background:#fff0f2;color:#d82f4e;font-size:27px;font-weight:800}
.runtime-error-eyebrow{margin:0;color:#1769f6;font-size:12px;font-weight:800;letter-spacing:.12em}
.runtime-error-card h1{margin:8px 0;color:#17233e;font-size:24px}
.runtime-error-card>p:not(.runtime-error-eyebrow){margin:0 0 22px;color:#667895}
.runtime-error-card .button{min-height:42px;padding:0 18px;border:0;border-radius:10px;background:#1769f6;color:#fff;font-weight:700}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(23,105,246,.24);outline-offset:1px}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:210px;min-width:210px;background:linear-gradient(180deg,#101b30,#121e34);color:#d9e2f1;min-height:100vh;display:flex;flex-direction:column;padding:12px 10px 14px;position:sticky;top:0;height:100vh;z-index:20}
.brand{height:54px;display:flex;align-items:center;gap:11px;color:white;text-decoration:none;padding:0 4px 11px;margin-bottom:8px}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;border-radius:13px;background:linear-gradient(135deg,#765cff,#205cf4);box-shadow:0 8px 18px rgba(55,95,242,.35)}
.brand-mark svg{width:24px;height:24px}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{font-size:14px;letter-spacing:.06em}
.brand-copy small{color:#9baac0;font-size:11px;margin-top:4px}
.side-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto;scrollbar-width:thin}
.nav-group-label{font-size:9px;letter-spacing:.13em;color:#70809a;padding:16px 12px 5px}
.nav-item,.nav-subitem{border:0;background:transparent;color:#b8c5d9;text-align:left;display:flex;align-items:center;gap:12px;height:41px;padding:0 12px;border-radius:8px;white-space:nowrap;transition:.16s}
.nav-item svg{width:17px;height:17px;opacity:.9}
.nav-item:hover,.nav-subitem:hover{background:#1c2b45;color:white}
.nav-item.active{background:linear-gradient(100deg,#1769f6,#2366e8);color:white;box-shadow:0 6px 14px rgba(13,88,221,.22);font-weight:650}
.nav-item span:nth-child(2){flex:1}
.nav-caret{font-size:18px;line-height:1;color:#99a9c1}
.nav-subitem{height:34px;margin-left:30px;padding-left:12px;font-size:12px;color:#96a7c0}
.nav-spacer{flex:1;min-height:12px}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.09);padding:12px 5px 0;display:flex;align-items:flex-start;gap:9px;font-size:11px}
.sidebar-footer strong,.sidebar-footer small{display:block}
.sidebar-footer strong{font-size:10px;color:#d8e3f2;font-weight:600}
.sidebar-footer small{font-size:10px;color:#8392a9;margin-top:3px}
.online-dot{width:8px;height:8px;border-radius:50%;background:#20ca8b;margin:4px 0 0 3px;box-shadow:0 0 0 3px rgba(32,202,139,.12)}
.workspace{min-width:0;flex:1}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:0 22px;position:sticky;top:0;z-index:15}
.icon-button{border:0;background:transparent;color:#596b88;width:33px;height:34px;display:grid;place-items:center;border-radius:8px;position:relative}
.icon-button:hover{background:#f2f5fb;color:var(--blue)}
.icon-button svg{width:19px;height:19px}
.branch-select{height:36px;min-width:205px;background:#fff;border:1px solid #dce4ef;border-radius:7px;color:var(--ink);display:flex;align-items:center;gap:10px;padding:0 11px;box-shadow:0 1px 2px rgba(20,44,83,.03)}
.branch-select svg{width:16px;color:var(--blue)}
.branch-select strong{font-size:12px;font-weight:650;flex:1;text-align:left}
.muted{color:#8d9bb0}
.topbar-spacer{flex:1}
.top-date{height:36px;border:1px solid #dce4ef;border-radius:7px;background:#fff;display:flex;gap:8px;align-items:center;padding:0 11px;color:#40516e;font-size:12px}
.top-date svg{width:16px;color:#61738f}
.notification-button i{position:absolute;right:0;top:0;background:#f03746;color:white;font-style:normal;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:bold;display:grid;place-items:center}
.user-menu{border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:2px 0 2px 5px;color:var(--ink);text-align:left}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f9bf93,#516caa);color:white;display:grid;place-items:center;font-size:11px;font-weight:750;border:2px solid white;box-shadow:0 0 0 1px #d9e2ef}
.user-copy{display:flex;flex-direction:column;line-height:1.15}
.user-copy strong{font-size:12px}
.user-copy small{font-size:10px;color:var(--muted);margin-top:4px}
.public-switch{height:34px;border:1px solid #dce6f4;background:#f6f9ff;color:#2768d9;border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px;font-size:11px;font-weight:650}
.public-switch svg{width:15px}
.main-content{padding:21px 22px 30px;max-width:1800px;margin:auto}
.loading-state{height:50vh;display:grid;place-content:center;gap:12px;text-align:center;color:var(--muted)}
.spinner{width:28px;height:28px;border:3px solid #dfe8f5;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:auto}
@keyframes spin{to{transform:rotate(360deg)}}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 18px}
.page-heading h1{font-size:25px;line-height:1.2;color:var(--ink);margin:0;font-weight:750;letter-spacing:-.025em}
.page-heading p{margin:5px 0 0;color:#8190a9;font-size:13px}
.heading-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.button{border:1px solid #dce5f1;background:#fff;border-radius:8px;padding:9px 13px;color:#344866;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-weight:650;font-size:12px;transition:.16s;white-space:nowrap}
.button:hover{border-color:#aac5f4;background:#f8fbff;color:var(--blue)}
.button svg{width:15px;height:15px}
.button.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 12px rgba(23,105,246,.19)}
.button.primary:hover{background:var(--blue-2)}
.button.soft{background:#edf4ff;border-color:#e0ebff;color:#2768d9}
.button.danger{background:#fff4f5;border-color:#ffd8de;color:#dd3951}
.button.success{background:#e8f9f1;border-color:#c6f0dc;color:#0c9f66}
.button.small{padding:6px 9px;font-size:11px}
.button.block{width:100%}
.select-control,.input-control,.textarea-control{min-height:37px;border:1px solid #dce4ef;background:#fff;border-radius:7px;padding:8px 10px;color:#324563}
.input-control::placeholder,.textarea-control::placeholder{color:#a1aec1}
.textarea-control{width:100%;min-height:80px;resize:vertical}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search-box{position:relative;min-width:210px;flex:1;max-width:360px}
.search-box svg{position:absolute;width:16px;height:16px;left:11px;top:10px;color:#92a0b5}
.search-box input{width:100%;padding-left:34px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.metric-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;min-height:104px;display:flex;align-items:center;gap:13px;box-shadow:0 2px 5px rgba(20,44,83,.018)}
.metric-icon{width:54px;height:54px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.metric-icon svg{width:24px;height:24px}
.metric-icon.green{background:linear-gradient(135deg,#31c991,#1bab78)}
.metric-icon.blue{background:linear-gradient(135deg,#4ca0fb,#2774ed)}
.metric-icon.purple{background:linear-gradient(135deg,#b25cf4,#8244e7)}
.metric-icon.orange{background:linear-gradient(135deg,#ffae48,#f18a29)}
.metric-icon.red{background:linear-gradient(135deg,#fb7886,#e34d65)}
.metric-label{font-size:11px;color:#7887a0}
.metric-value{font-size:21px;line-height:1.25;font-weight:780;color:#14223e;margin-top:3px;letter-spacing:-.025em}
.metric-note{font-size:10px;color:#7d8ba3;margin-top:5px}
.metric-note.positive{color:#12a770}
.metric-note.negative{color:#df5264}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 7px rgba(20,44,83,.025);overflow:hidden}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px 10px}
.panel-header h2,.panel-title{margin:0;color:var(--ink);font-size:15px;font-weight:750}
.panel-header .link-button{background:none;border:0;color:var(--blue);font-size:11px;font-weight:650;display:flex;align-items:center;gap:4px}
.panel-body{padding:0 13px 13px}
.dashboard-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(270px,1fr);gap:13px}
.room-board{padding:0 12px 12px}
.room-legend{display:flex;align-items:center;gap:11px;flex-wrap:wrap;color:#667894;font-size:10px}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.floor-block{margin-top:10px}
.floor-heading{height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#f5f8fc;border:1px solid #edf1f7;border-radius:7px;margin-bottom:7px}
.floor-heading strong{color:var(--ink);font-size:12px}
.floor-heading small{color:#8190a8;font-size:10px}
.floor-caret{font-size:13px;color:#71829c}
.room-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.room-card{min-width:0;min-height:172px;border:1px solid;border-radius:8px;padding:9px 9px 8px;display:flex;flex-direction:column;position:relative;transition:transform .15s,box-shadow .15s}
.room-card:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(31,67,119,.09)}
.room-card.available{background:linear-gradient(150deg,#fff,#f3fff9);border-color:#b9eed8}
.room-card.occupied{background:linear-gradient(150deg,#fff6f7,#fff);border-color:#ffbdc7}
.room-card.reserved{background:linear-gradient(150deg,#f5f9ff,#fff);border-color:#c8ddff}
.room-card.cleaning{background:linear-gradient(150deg,#fffaf0,#fff);border-color:#ffe6a7}
.room-card.maintenance,.room-card.blocked{background:linear-gradient(150deg,#f4f6f9,#fff);border-color:#dfe5ed}
.room-top{display:flex;align-items:center;justify-content:space-between;gap:5px}
.room-code{font-weight:780;color:#1b2b49;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card.vip .room-code{color:#215ec7}
.room-state-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}
.room-state-icon svg{width:13px;height:13px}
.available .room-state-icon{background:#d7f8e7;color:#08a66a}
.occupied .room-state-icon{background:#ffe0e4;color:#ed4a62}
.reserved .room-state-icon{background:#dfedff;color:#2875ee}
.cleaning .room-state-icon{background:#fff0bf;color:#e3a400}
.maintenance .room-state-icon,.blocked .room-state-icon{background:#e6ebf2;color:#78889f}
.room-meta{font-size:10px;color:#75849c;display:flex;align-items:center;gap:5px;margin-top:5px}
.room-meta svg{width:12px;height:12px;color:#667b98;flex:none}
.room-price{font-size:10px;color:#71819a;margin-top:2px}
.room-status-pill{border-radius:999px;text-align:center;font-size:10px;font-weight:700;margin-top:auto;padding:6px 5px;white-space:nowrap}
.available .room-status-pill{background:#d8f8e7;color:#138b5c}
.occupied .room-status-pill{background:#ffe8eb;color:#ed3d57}
.reserved .room-status-pill{background:#e4efff;color:#1769e9}
.cleaning .room-status-pill{background:#fff1c8;color:#ab7900}
.maintenance .room-status-pill,.blocked .room-status-pill{background:#e8edf3;color:#526783}
.room-timer{color:#df334a;font-weight:780;font-size:13px;text-align:center;margin:5px 0 0}
.room-estimate{color:#8a6170;font-size:10px;text-align:center;margin:1px 0 5px}
.room-estimate strong{color:#dd4359}
.room-booking-name{font-size:10px;color:#70819d;margin:3px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-action{height:27px;border:1px solid #d5dfec;background:#fff;border-radius:6px;color:#385070;font-size:10px;font-weight:700;margin-top:6px}
.room-action:hover{border-color:#9abcf3;color:var(--blue)}
.room-action.primary-text{color:var(--blue)}
.side-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.upcoming-row{display:grid;grid-template-columns:40px 1fr auto;gap:7px;align-items:start;padding:9px 0;border-top:1px solid #eef2f7}
.upcoming-row:first-child{border-top:0}
.upcoming-time{color:#253653;font-weight:750;font-size:11px}
.upcoming-main strong{display:block;color:#263752;font-size:11px}
.upcoming-main small{display:block;color:#8b99ae;font-size:10px;margin-top:2px}
.upcoming-badge{border-radius:99px;padding:3px 7px;background:#eaf2ff;color:#2169df;font-size:9px;font-weight:700}
.wait-row{display:grid;grid-template-columns:25px 1fr auto;gap:7px;padding:8px 0;border-top:1px solid #eef2f7;align-items:center}
.rank{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#fff0d1;color:#d89406;font-weight:800;font-size:11px}
.wait-row:nth-child(3) .rank{background:#e6efff;color:#3474dd}
.wait-row:nth-child(4) .rank{background:#fff0f1;color:#d94d5e}
.wait-name{font-size:10px;font-weight:700;color:#283856}
.wait-sub{font-size:9px;color:#8998ae;margin-top:2px}
.wait-time{font-size:9px;color:#a0adbd;white-space:nowrap}
.activity-row{display:flex;gap:8px;padding:7px 0;border-top:1px solid #eef2f7}
.activity-row:first-child{border-top:0}
.activity-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;background:#e8f1ff;color:#4281e9}
.activity-icon svg{width:12px;height:12px}
.activity-content{min-width:0}
.activity-content strong{display:block;font-size:10px;color:#33445f;font-weight:650}
.activity-content small{display:block;color:#93a0b3;font-size:9px;margin-top:2px}
.activity-time{font-size:9px;color:#96a4b7;white-space:nowrap;margin-left:auto}
.status-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700}
.status-chip.green{color:#118a5b;background:#e4f8ed}
.status-chip.blue{color:#286cdd;background:#e9f2ff}
.status-chip.orange{color:#a37204;background:#fff3d4}
.status-chip.red{color:#d54458;background:#ffeaed}
.status-chip.gray{color:#66778f;background:#eef2f6}
.toolbar-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:collapse;min-width:700px}
.data-table th{text-align:left;background:#f6f8fc;color:#8290a6;font-size:10px;font-weight:700;padding:10px 11px;white-space:nowrap}
.data-table td{padding:10px 11px;border-bottom:1px solid #edf1f6;font-size:11px;color:#41536f;vertical-align:middle}
.data-table tr:hover td{background:#fafcff}
.data-table td strong{color:#1d2d49}
.cell-secondary{display:block;color:#94a2b6;font-size:10px;margin-top:3px}
.badge{display:inline-flex;align-items:center;border-radius:99px;padding:4px 8px;font-size:9px;font-weight:700}
.badge.success{background:#e4f8ed;color:#0e915e}
.badge.info{background:#e9f2ff;color:#2369db}
.badge.warning{background:#fff3d7;color:#a97500}
.badge.danger{background:#ffeaed;color:#d74559}
.badge.muted{background:#eef2f6;color:#667891}
.timeline-wrap{overflow:auto}
.timeline{min-width:850px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:white}
.timeline-head{display:grid;grid-template-columns:105px repeat(17,minmax(38px,1fr));background:#f7f9fc;border-bottom:1px solid var(--line);height:38px;align-items:center}
.timeline-head span{text-align:center;font-size:9px;color:#8290a6;border-left:1px solid #edf1f6}
.timeline-head span:first-child{border:0}
.timeline-row{display:grid;grid-template-columns:105px 1fr;min-height:48px;border-bottom:1px solid #edf1f6}
.timeline-room{padding:9px 10px;font-size:10px;font-weight:750;color:#334561;border-right:1px solid #edf1f6}
.timeline-track{position:relative;background-image:linear-gradient(to right,transparent calc(100% - 1px),#edf1f6 1px);background-size:calc(100% / 17) 100%}
.timeline-booking{position:absolute;top:7px;height:33px;border-radius:6px;padding:4px 7px;overflow:hidden;white-space:nowrap;color:#2463c9;background:#e4efff;border:1px solid #cadeff;font-size:9px}
.timeline-booking.occupied{background:#fff0f2;border-color:#ffd0d7;color:#c4475c}
.timeline-booking.confirmed{background:#e3f8ed;border-color:#c4efd9;color:#167a54}
.timeline-booking.pending{background:#fff5db;border-color:#f9e4a8;color:#956a08}
.screen-columns{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:13px}
.two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.product-card{border:1px solid #e5ebf4;border-radius:9px;overflow:hidden;background:#fff;position:relative;transition:.15s}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c6d8f4}
.product-visual{height:102px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#e9f5ff,#f7fbff)}
.product-visual:before,.room-photo:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,rgba(255,255,255,.7),transparent 35%),linear-gradient(145deg,transparent 35%,rgba(18,40,84,.13))}
.product-visual .product-emoji{font-size:42px;filter:drop-shadow(0 7px 6px rgba(20,44,83,.15));position:relative}
.product-visual.amber{background:linear-gradient(135deg,#fff1cb,#e3f4fe)}
.product-visual.green{background:linear-gradient(135deg,#d7f8e7,#f4fbff)}
.product-visual.red{background:linear-gradient(135deg,#ffe2e4,#f8f2ff)}
.product-visual.blue{background:linear-gradient(135deg,#dbeaff,#eff7ff)}
.product-visual.purple{background:linear-gradient(135deg,#eee1ff,#f9f3ff)}
.product-visual.orange{background:linear-gradient(135deg,#ffe3ca,#fff7e9)}
.product-visual.pink{background:linear-gradient(135deg,#ffe0ef,#fff3f8)}
.product-visual.cyan{background:linear-gradient(135deg,#d7f7fb,#f2fcff)}
.product-visual.gold{background:linear-gradient(135deg,#fff0bd,#fff9e7)}
.product-visual.lime{background:linear-gradient(135deg,#eaf8c8,#f9ffec)}
.product-info{padding:8px 9px 9px}
.product-info strong{display:block;font-size:10px;color:#31415d;min-height:28px}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.product-price{color:#1769ea;font-weight:780;font-size:12px}
.add-product{border:0;border-radius:50%;width:26px;height:26px;background:#2874f5;color:#fff;font-size:18px;line-height:1}
.pos-room-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pos-room-select{max-width:200px}
.bill-line{display:grid;grid-template-columns:minmax(0,1fr) 64px 90px 28px;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f6;font-size:10px}
.bill-line strong{font-size:10px;color:#33435e}
.bill-line small{display:block;color:#93a0b3;font-size:9px;margin-top:2px}
.qty-control{display:flex;align-items:center;justify-content:center;gap:4px}
.qty-control button{width:21px;height:21px;border:1px solid #dce5f0;background:#fff;border-radius:5px;color:#536783}
.bill-total{border-top:1px dashed #d8e1ee;margin-top:10px;padding-top:9px}
.bill-total-row{display:flex;justify-content:space-between;color:#73819a;font-size:11px;padding:4px 0}
.bill-total-row strong{color:#293b59}
.bill-grand{font-size:18px;font-weight:800;color:#1769ec}
.kds-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kds-lane{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.kds-lane-head{padding:12px;background:#e5fbf1;color:#167d59;display:flex;align-items:center;justify-content:space-between;font-weight:750}
.kds-lane.preparing .kds-lane-head{background:#fff5dc;color:#a67500}
.kds-lane.ready .kds-lane-head{background:#eaf2ff;color:#276bd8}
.kds-order{margin:9px;border:1px solid #e6ebf3;border-radius:9px;padding:10px}
.kds-order-top{display:flex;justify-content:space-between;align-items:center;color:#293b59;font-weight:750}
.kds-order-time{color:#e34d60;font-size:10px}
.kds-items{padding:7px 0;color:#60718d;font-size:10px;line-height:1.8}
.kds-note{background:#f4f7fb;border-radius:6px;color:#71819a;padding:6px;font-size:9px;margin-bottom:8px}
.kds-actions{display:flex;gap:6px}
.kds-actions .button{flex:1}
.promo-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:13px}
.promo-row{display:grid;grid-template-columns:36px 1.5fr .8fr .9fr .7fr 24px;gap:9px;align-items:center;padding:12px 10px;border-top:1px solid #edf1f6;font-size:10px}
.promo-row:first-child{border-top:0}
.promo-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#edf3ff;color:#4c79e6}
.promo-row strong{font-size:10px;color:#263754}
.customer-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr);gap:13px}
.customer-summary{padding:14px}
.customer-hero{display:flex;align-items:center;gap:12px}
.customer-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f7bb90,#567cbe);color:white;font-weight:800;font-size:18px}
.customer-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px;border-top:1px solid #edf1f6;padding-top:12px;text-align:center}
.customer-stats strong{display:block;color:#213653;font-size:13px}
.customer-stats small{font-size:9px;color:#8796ab}
.voucher-card{border:1px solid #e8edf4;border-radius:8px;padding:9px;margin-top:8px;display:flex;gap:9px;align-items:center}
.voucher-icon{width:34px;height:34px;border-radius:9px;background:#fff0f1;color:#dd5770;display:grid;place-items:center}
.voucher-card strong{font-size:10px;color:#33445f;display:block}
.voucher-card small{font-size:9px;color:#94a1b3;display:block;margin-top:3px}
.report-chart{height:210px;padding:12px 14px}
.chart-grid{height:100%;display:flex;align-items:end;gap:8px;border-bottom:1px solid #e7edf5;padding:10px 4px 22px;position:relative}
.chart-grid:before,.chart-grid:after{content:"";position:absolute;left:0;right:0;border-top:1px dashed #eef1f6}
.chart-grid:before{top:33%}.chart-grid:after{top:66%}
.chart-bar{flex:1;min-width:6px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#5ba1fb,#2673ec);position:relative;z-index:1}
.chart-bar.secondary{background:linear-gradient(180deg,#6de0b4,#22b780)}
.chart-labels{display:flex;justify-content:space-between;color:#8a98ad;font-size:9px;margin-top:6px}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px}
.donut{width:145px;height:145px;border-radius:50%;background:conic-gradient(#2874f2 0 62%,#ff9c42 62% 80%,#36c997 80% 92%,#8958e7 92%);display:grid;place-items:center}
.donut:after{content:"124,58tr";width:94px;height:94px;border-radius:50%;background:white;display:grid;place-items:center;font-size:14px;color:#223752;font-weight:800}
.inventory-summary{display:flex;gap:12px;flex-wrap:wrap}
.stock-low{color:#dd3f52;font-weight:750}
.expense-head{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.public-booking{max-width:1400px;margin:0 auto}
.public-steps{display:flex;align-items:center;justify-content:center;gap:0;margin:4px 0 18px}
.step{display:flex;align-items:center;gap:8px;color:#8897ad;font-size:10px;font-weight:650}
.step-number{width:30px;height:30px;border:2px solid #c8d2e0;background:#fff;border-radius:50%;display:grid;place-items:center;color:#677891;font-weight:800}
.step.active{color:#1769ec}
.step.active .step-number,.step.done .step-number{background:#1769ec;color:white;border-color:#1769ec}
.step-line{width:72px;height:1px;background:#dce4ef;margin:0 9px}
.public-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px}
.public-search{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.field label{display:block;font-size:10px;color:#596a85;font-weight:700;margin:0 0 5px}
.field .input-control,.field select,.field textarea{width:100%}
.room-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.public-room-card{border:1px solid #e4eaf3;border-radius:10px;background:white;overflow:hidden}
.room-photo{height:120px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 80%,#7044c5,#171b42 58%,#101629);overflow:hidden}
.room-photo.vip{background:radial-gradient(ellipse at 50% 80%,#a448b8,#251339 58%,#111126)}
.room-photo.standard{background:radial-gradient(ellipse at 50% 80%,#287e9c,#182841 58%,#111827)}
.room-photo:after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:26px;border-radius:50% 50% 0 0;background:rgba(225,174,255,.18);box-shadow:0 -18px 35px rgba(117,91,255,.34)}
.room-photo span{font-size:42px;filter:drop-shadow(0 5px 8px #000);position:relative;z-index:1}
.room-photo .photo-count{position:absolute;right:8px;bottom:7px;color:white;font-size:9px;z-index:2;background:#0008;padding:3px 6px;border-radius:9px}
.public-room-body{padding:10px}
.public-room-body h3{font-size:13px;color:#1e2c47;margin:0}
.public-room-meta{display:flex;gap:9px;color:#7b8ba2;font-size:9px;margin-top:5px;flex-wrap:wrap}
.amenity-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.amenity-tag{font-size:8px;border-radius:10px;background:#f1f4f8;padding:3px 6px;color:#667893}
.room-rate{font-size:13px;font-weight:800;color:#1266ea;margin:8px 0}
.public-room-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.public-summary{position:sticky;top:72px;height:max-content}
.summary-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #edf1f6;font-size:10px}
.summary-row span{color:#7d8ba2}
.summary-row strong{color:#2c3f5e;text-align:right}
.summary-total{font-size:17px!important;color:#1769ec!important}
.promo-banner{display:flex;align-items:center;gap:12px;padding:12px 15px;background:linear-gradient(95deg,#f0e4ff,#fff0f7);border:1px solid #eadbff;border-radius:10px;margin:12px 0 15px;color:#6735ad}
.promo-banner .gift-big{font-size:28px}
.promo-banner strong{display:block;color:#502693;font-size:14px}
.promo-banner small{color:#7f6a9b;font-size:10px}
.public-confirm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.public-confirm-grid .panel{padding:13px}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,23,42,.48);z-index:80;display:grid;place-items:center;padding:18px}
.modal{width:min(600px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:13px;box-shadow:0 22px 60px rgba(10,28,59,.25)}
.modal.wide{width:min(850px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #e9eef5}
.modal-head h2{margin:0;color:#1c2b48;font-size:16px}
.modal-close{border:0;background:#f2f5f9;border-radius:7px;width:29px;height:29px;color:#677791;font-size:18px}
.modal-body{padding:17px 18px}
.modal-foot{padding:13px 18px;border-top:1px solid #e9eef5;display:flex;justify-content:flex-end;gap:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .span-2{grid-column:span 2}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{background:#172743;color:#fff;box-shadow:0 8px 25px rgba(14,29,53,.2);border-radius:9px;padding:11px 14px;min-width:230px;display:flex;gap:9px;align-items:center;font-size:12px;animation:toast-in .2s ease}
.toast.success:before{content:"✓";background:#1fc184;border-radius:50%;width:19px;height:19px;display:grid;place-items:center}
.toast.error:before{content:"!";background:#ed5769;border-radius:50%;width:19px;height:19px;display:grid;place-items:center}
@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.empty-state{padding:28px;text-align:center;color:#8c9ab0;font-size:12px}
.pill-tabs{display:flex;gap:5px;background:#f1f4f9;border-radius:8px;padding:4px}
.pill-tabs button{border:0;background:transparent;border-radius:6px;color:#7888a1;padding:6px 9px;font-size:10px}
.pill-tabs button.active{background:white;color:#2169e6;box-shadow:0 1px 4px #182e4a14;font-weight:700}
.mobile-overlay{display:none}
.category-list{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.category-chip{border:1px solid transparent;background:#f2f5fa;color:#71819b;border-radius:7px;padding:7px 10px;font-size:10px;font-weight:650;white-space:nowrap}
.category-chip:hover{color:#1769ec;background:#edf4ff}
.category-chip.active{background:#1769f6;color:white;box-shadow:0 3px 8px #1769f633}
.pos-bottom-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;margin-top:13px}
.three-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:13px}
.report-legend{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;font-size:9px;color:#71819a;margin:9px 0;min-width:190px}
.report-legend i{width:8px;height:8px;border-radius:50%}
.report-legend strong{color:#31435f;font-size:9px}
.report-list-row{display:grid;grid-template-columns:minmax(90px,1.2fr) 1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid #edf1f6;font-size:10px}
.report-list-row:first-child{border-top:0}
.report-list-row strong{color:#31435f;font-size:10px}
.report-list-row span{font-weight:700;color:#243858;text-align:right}
.report-list-row small{color:#8b99ad;font-size:9px}
.promo-feature{border-top:1px solid #edf1f6;padding-top:13px;margin-top:8px}
.promo-feature h3{font-size:11px;color:#344761;margin:0 0 8px}
.deposit-box{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff0f1;border-radius:8px;padding:11px;margin-top:11px;color:#c63f55;font-size:10px}
.deposit-box b{font-size:16px}
.room-detail-head{display:flex;align-items:center;gap:10px}
.room-detail-head h2{margin:0 0 2px;color:#1b2a46;font-size:18px}
.room-detail-head .status-chip{margin-left:auto}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px 0;border-bottom:1px solid #edf1f6;margin-top:10px}
.detail-grid div{display:flex;flex-direction:column;gap:3px}
.detail-grid small{font-size:9px;color:#8c9aaf}
.detail-grid strong{font-size:10px;color:#354863}
.product-table-emoji{font-size:18px}
.promo-usage{position:relative;display:grid;place-items:center;height:180px}
.small-donut{width:135px;height:135px}
.small-donut:after{width:88px;height:88px}
.promo-usage>div:last-child{position:absolute;display:flex;flex-direction:column;align-items:center}
.promo-usage>div:last-child strong{font-size:22px;color:#213653}
.promo-usage>div:last-child small{font-size:9px;color:#8998ac}
.settings-list{display:flex;flex-direction:column;gap:12px}
.settings-list label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#5b6d88;font-size:11px;border-bottom:1px solid #edf1f6;padding-bottom:10px}
.settings-list label .select-control{min-width:185px}
.link-button{border:0;background:transparent;color:#1769ec;font-size:11px;font-weight:650}
@media(max-width:1200px){.three-report-grid{grid-template-columns:1fr 1fr}.promo-layout{grid-template-columns:1fr}.room-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.three-report-grid{grid-template-columns:1fr}.report-list-row{grid-template-columns:1fr 1fr}.report-list-row small{display:none}.pos-bottom-actions{grid-template-columns:1fr}.category-list{flex-basis:100%;overflow:auto;flex-wrap:nowrap}}

@media(max-width:1400px){.room-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-card{padding:11px}.metric-icon{width:47px;height:47px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.main-content{padding-left:17px;padding-right:17px}}
@media(max-width:1120px){.sidebar{width:68px;min-width:68px;padding:10px 7px}.brand{justify-content:center}.brand-copy,.nav-item span:nth-child(2),.nav-group-label,.nav-caret,.nav-subitem,.sidebar-footer span:not(.online-dot){display:none}.nav-item{justify-content:center;padding:0}.sidebar-footer{justify-content:center}.dashboard-layout{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.screen-columns,.customer-layout{grid-template-columns:1fr}.public-layout{grid-template-columns:1fr}.public-summary{position:static}.room-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:800px){.topbar{padding:0 12px;gap:7px}.top-date,.user-copy,.public-switch span:not(svg){display:none}.branch-select{min-width:0;padding:0 8px}.user-menu{margin-left:auto}.main-content{padding:15px 12px}.kpi-grid,.kpi-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.side-stack{grid-template-columns:1fr}.room-list{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-columns,.promo-layout{grid-template-columns:1fr}.kds-columns{grid-template-columns:1fr}.public-search{grid-template-columns:repeat(2,minmax(0,1fr))}.public-confirm-grid{grid-template-columns:1fr}.page-heading{display:block}.heading-actions{margin-top:10px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.sidebar{position:fixed;left:-220px;width:210px;min-width:210px;transition:left .2s;box-shadow:10px 0 30px #13274833}.sidebar.open{left:0}.sidebar.open .brand{justify-content:flex-start}.sidebar.open .brand-copy,.sidebar.open .nav-item span:nth-child(2),.sidebar.open .nav-group-label,.sidebar.open .nav-caret,.sidebar.open .nav-subitem,.sidebar.open .sidebar-footer span:not(.online-dot){display:flex}.sidebar.open .nav-item{justify-content:flex-start;padding:0 12px}.mobile-overlay.show{display:block;position:fixed;inset:0;background:#101b3055;z-index:18}.branch-select strong{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.room-card{min-height:160px}.room-list{grid-template-columns:1fr}.kpi-grid{gap:7px}.metric-card{min-height:85px;gap:8px;padding:8px}.metric-icon{width:39px;height:39px}.metric-icon svg{width:20px}.metric-value{font-size:17px}.metric-label{font-size:9px}.metric-note{font-size:8px}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.public-search{grid-template-columns:1fr 1fr}.page-heading h1{font-size:22px}.topbar{height:54px}.main-content{padding:12px 9px}.toolbar-card>.search-box{max-width:none;flex-basis:100%}}