:root {
  --ink: #1b1e25;
  --muted: #737985;
  --line: #e6e5e1;
  --paper: #f6f5f1;
  --panel: #ffffff;
  --sidebar: #171a21;
  --sidebar-soft: #242832;
  --accent: #e75d34;
  --accent-dark: #cf4722;
  --green: #24856a;
  --amber: #d88b21;
  --red: #ca463f;
  --blue: #4276b8;
  --purple: #7964b5;
  --shadow: 0 12px 40px rgba(24, 27, 34, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

[hidden], .nav-item[hidden], [data-admin-only][hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(231, 93, 52, .22); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-boot-screen { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; color: #20242c; background: #f7f6f2; opacity: 1; visibility: visible; transition: opacity .22s ease, visibility .22s ease; }
body:not(.app-is-booting) .app-boot-screen { opacity: 0; visibility: hidden; pointer-events: none; }
.app-boot-card { display: grid; justify-items: center; width: min(360px, 100%); text-align: center; }
.app-boot-mark { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 20px; border-radius: 20px 20px 20px 6px; color: #fff; background: var(--accent); box-shadow: 0 16px 36px rgba(231, 93, 52, .3); font-family: Georgia, "Songti SC", serif; font-size: 28px; }
.app-boot-card strong { font-family: Georgia, "Songti SC", serif; font-size: 27px; letter-spacing: .08em; }
.app-boot-card p { margin: 10px 0 22px; color: #727984; font-size: 13px; }
.app-boot-progress { position: relative; width: 150px; height: 3px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.1); }
.app-boot-progress i { position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: inherit; background: var(--accent); animation: app-boot-slide 1.05s ease-in-out infinite; }
@keyframes app-boot-slide { 0% { transform: translateX(-105%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .app-boot-progress i { animation: none; width: 100%; opacity: .72; } }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 236px; display: flex; flex-direction: column; padding: 28px 18px 20px; color: #f7f5f0; background: var(--sidebar); }
.sidebar-scrim { display: none; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 8px 36px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px 14px 14px 4px; color: #fff; background: var(--accent); font-family: Georgia, serif; font-size: 21px; box-shadow: 0 8px 20px rgba(231, 93, 52, .28); }
.brand strong, .user-card strong { display: block; font-size: 15px; }
.brand strong { max-width: 150px; overflow: hidden; font-family: Georgia, "Songti SC", serif; font-size: 19px; letter-spacing: .04em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.brand small, .user-card small { display: block; margin-top: 3px; color: #8f95a1; font-size: 10px; }
.main-nav { display: grid; gap: 6px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 13px; border-radius: 10px; color: #aeb3bd; text-decoration: none; font-size: 14px; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.is-active { color: #fff; background: var(--sidebar-soft); }
.nav-item.is-active::before { content: ""; position: absolute; left: -18px; width: 3px; height: 24px; border-radius: 0 4px 4px 0; background: var(--accent); }
.nav-icon { width: 21px; text-align: center; font-size: 21px; font-family: Arial, sans-serif; }
.nav-badge { margin-left: auto; min-width: 21px; padding: 2px 6px; border-radius: 20px; color: #fff; background: var(--accent); font-size: 10px; text-align: center; }
.sidebar-bottom { display: grid; gap: 6px; margin-top: auto; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px 10px; }
.store-avatar, .user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #353945; color: #fff; font-size: 13px; }
.store-avatar { color: #ffb49d; background: #48291f; }
.user-card .chevron { margin-left: auto; color: #7e8490; }
.sidebar-account { position: relative; }
.user-card { width: 100%; min-height: 60px; border: 1px solid #30343d; border-radius: 12px; margin-top: 8px; padding: 12px 10px; color: #f7f5f0; background: #1d2028; text-align: left; cursor: pointer; }
.user-card:hover, .user-card[aria-expanded="true"] { border-color: #414754; background: #252a34; }
.user-card > span:nth-child(2) { min-width: 0; flex: 1; }
.user-card .chevron { margin-left: auto; color: #7e8490; transition: transform .18s ease; }
.user-card[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.sidebar-account-menu { position: absolute; z-index: 50; left: 0; right: 0; bottom: calc(100% + 8px); padding: 14px; border: 1px solid #deddd8; border-radius: 13px; color: #292e36; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.sidebar-account-menu > button { width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 8px; color: #4a5059; background: #f5f4f1; font-size: 10px; font-weight: 700; text-align: left; }
.sidebar-account-menu > button + button { margin-top: 6px; }
.sidebar-account-menu > button:hover { color: #fff; background: #353b45; }

.main-wrap { min-height: 100vh; margin-left: 236px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid rgba(214, 212, 207, .82); background: rgba(246, 245, 241, .9); backdrop-filter: blur(14px); }
.crumb { display: flex; align-items: center; gap: 10px; color: #8c919a; font-size: 13px; }
.crumb b { color: #c7c6c2; font-weight: 400; }.crumb strong { color: #343840; }
.top-actions, .heading-actions { display: flex; align-items: center; gap: 10px; }.top-actions { position: relative; }
.business-pill { display: flex; align-items: center; gap: 7px; margin-right: 8px; padding: 7px 11px; border: 1px solid #dfded9; border-radius: 30px; color: #4d525b; background: #fff; font-size: 11px; }
.business-pill i { width: 7px; height: 7px; border-radius: 50%; background: #39a179; box-shadow: 0 0 0 4px #e4f4ed; }
.icon-button, .avatar-button, .close-button { border: 0; background: transparent; color: #626872; }
.icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 20px; }
.icon-button:hover { background: #eae9e5; }.icon-button.has-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); }
.avatar-button { width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #30343d; font-size: 12px; }.mobile-menu { display: none; }
.top-popover { position: absolute; z-index: 40; top: calc(100% + 13px); right: 0; width: 270px; padding: 16px; border: 1px solid #deddd8; border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(27,31,38,.18); }.top-popover[hidden] { display: none; }.top-popover::before { content: ""; position: absolute; top: -6px; right: 13px; width: 10px; height: 10px; border-top: 1px solid #deddd8; border-left: 1px solid #deddd8; background: #fff; transform: rotate(45deg); }.notification-popover { right: 38px; }.popover-eyebrow { display: block; margin-bottom: 7px; color: #a4492e; font-size: 8px; font-weight: 800; letter-spacing: .14em; }.top-popover > strong { display: block; color: #292e36; font-size: 13px; }.top-popover > p { margin: 6px 0 13px; color: #777d86; font-size: 10px; line-height: 1.6; }.top-popover > button { width: 100%; min-height: 34px; padding: 7px 10px; border: 0; border-radius: 8px; color: #4a5059; background: #f5f4f1; font-size: 10px; font-weight: 700; text-align: left; }.top-popover > button:hover { color: #fff; background: #353b45; }.profile-popover-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eceae6; }.profile-popover-head > span:last-child { min-width: 0; }.profile-popover-head strong, .profile-popover-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-popover-head strong { font-size: 12px; }.profile-popover-head small { margin-top: 3px; color: #8b9098; font-size: 9px; }.mini-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; color: #fff; background: #30343d center/cover no-repeat; font-size: 12px; }.profile-popover > button + button { margin-top: 6px; }

main { padding: 34px 38px 60px; }
.page { display: none; max-width: 1440px; margin: 0 auto; }.page.is-active { display: block; animation: enter .22s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-heading h1 { margin: 4px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.02em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }.page-heading .eyebrow, .modal-header .eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.btn { min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; font-weight: 600; font-size: 13px; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); }.btn-primary { color: #fff; background: var(--accent); box-shadow: 0 7px 16px rgba(231,93,52,.18); }.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { border-color: #dcdbd6; color: #3d424a; background: #fff; }.btn-secondary:hover, .btn-ghost:hover { background: #f0efeb; }.btn-ghost { color: #636973; background: transparent; }.btn-danger { color: #fff; background: var(--red); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { position: relative; min-height: 130px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 5px 20px rgba(24,27,34,.025); }
.stat-card::after { content: ""; position: absolute; right: -20px; bottom: -30px; width: 100px; height: 100px; border: 18px solid var(--tint); border-radius: 50%; opacity: .45; }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }.stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--tone); background: var(--tint); font-size: 17px; }
.stat-value { position: relative; z-index: 1; margin-top: 14px; font-family: Georgia, serif; font-size: 31px; line-height: 1; }.stat-value small { margin-left: 5px; color: #92969e; font-family: inherit; font-size: 12px; }
.stat-card p { position: relative; z-index: 1; margin: 8px 0 0; color: #a0a3aa; font-size: 10px; }

.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 28px rgba(24,27,34,.035); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid #eeece8; }.panel-heading h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; }.panel-heading p { margin: 5px 0 0; color: #92969e; font-size: 11px; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; }.legend-item { display: flex; align-items: center; gap: 6px; color: #747982; font-size: 10px; }.legend-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.board-toolbar, .filter-bar { display: flex; align-items: center; gap: 10px; padding: 15px 24px; border-bottom: 1px solid #f0efec; }.board-toolbar { justify-content: space-between; }
.area-tabs { display: flex; flex-wrap: wrap; gap: 7px; }.area-tab { padding: 7px 13px; border: 0; border-radius: 20px; color: #747981; background: transparent; font-size: 11px; }.area-tab:hover { background: #f4f2ee; }.area-tab.is-active { color: #fff; background: #272b33; }
.search-box { display: flex; align-items: center; width: 280px; height: 39px; padding: 0 12px; border: 1px solid #dddcd7; border-radius: 9px; color: #a2a5ab; background: #fff; }.search-box:focus-within { border-color: #ca8a77; box-shadow: 0 0 0 3px rgba(231,93,52,.08); }.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 8px; background: transparent; color: var(--ink); font-size: 12px; }.search-box.compact { width: 190px; height: 34px; }
.area-groups { padding: 18px 24px 30px; }.area-section { overflow: hidden; margin-top: 18px; padding: 0 14px 16px; border: 1px solid var(--area-border); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(35,39,46,.055); }.area-section + .area-section { margin-top: 24px; }.area-title-row { display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0 -14px 15px; padding: 9px 14px; border-bottom: 1px solid var(--area-border); border-left: 6px solid var(--area-tone); background: linear-gradient(90deg, var(--area-soft), #fff 72%); }.area-title-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--area-border); border-radius: 9px; color: var(--area-tone); background: #fff; font-size: 15px; font-weight: 800; }.area-title-copy { display: grid; gap: 1px; }.area-title-copy small { color: var(--area-tone); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.area-title-row h3 { margin: 0; color: #242932; font-size: 16px; }.area-count { margin-left: auto; padding: 6px 10px; border: 1px solid var(--area-border); border-radius: 999px; color: var(--area-tone); background: #fff; font-size: 10px; font-weight: 750; }.area-title-line { display: none; }
.table-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.table-card { position: relative; min-height: 124px; padding: 16px; overflow: hidden; border: 1px solid #e6e4df; border-radius: 12px; background: #fff; text-align: left; transition: .18s ease; }.table-card:hover { transform: translateY(-2px); border-color: var(--card-tone); box-shadow: 0 9px 23px rgba(30,32,38,.08); }.table-card::after { content: ""; position: absolute; right: -18px; bottom: -23px; width: 62px; height: 62px; border-radius: 50%; background: var(--card-tint); }
.card-status { display: flex; align-items: center; gap: 6px; color: var(--card-tone); font-size: 10px; font-weight: 700; }.card-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.table-card h4 { margin: 16px 0 4px; font-family: Georgia, "Songti SC", serif; font-size: 20px; }.table-card p { margin: 0; color: #858a93; font-size: 10px; }.card-meta { position: absolute; right: 14px; top: 14px; color: #a0a4ab; font-size: 10px; }.card-time { position: relative; z-index: 1; margin-top: 11px; color: var(--card-tone); font-size: 10px; }.empty-board { padding: 60px 20px; color: #92969e; text-align: center; }

.summary-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-bottom: 15px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.summary-item { display: flex; align-items: center; gap: 8px; padding: 0 22px; border-right: 1px solid #e5e4df; color: #747983; font-size: 11px; }.summary-item:first-child { padding-left: 0; }.summary-item:last-child { border: 0; }.summary-item strong { color: #2a2e35; font-family: Georgia, serif; font-size: 19px; }.summary-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.filter-bar select { height: 39px; min-width: 130px; padding: 0 30px 0 12px; border: 1px solid #dddcd7; border-radius: 9px; color: #555b64; background: #fff; font-size: 12px; }.text-button { border: 0; color: var(--accent); background: transparent; font-size: 11px; }.result-count { margin-left: auto; color: #999da4; font-size: 11px; }
.table-scroll { overflow: auto; } table { width: 100%; min-width: 900px; border-collapse: collapse; } th { height: 42px; padding: 0 12px; color: #92969d; background: #faf9f7; font-size: 10px; font-weight: 600; text-align: left; } td { height: 67px; padding: 0 12px; border-top: 1px solid #efeeea; color: #545a63; font-size: 12px; } tbody tr { transition: .15s ease; } tbody tr:hover { background: #fdfbf8; } tbody tr.is-dragging { opacity: .4; }.drag-col { width: 32px; }.drag-handle { border: 0; color: #b6b8bc; background: transparent; cursor: grab; font-size: 18px; }.table-name-cell { display: flex; align-items: center; gap: 11px; }.table-symbol { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; color: #9b5b47; background: #f8e9e3; font-weight: 700; }.table-name-cell strong { display: block; color: #252930; font-size: 12px; }.table-name-cell small { display: block; margin-top: 4px; color: #9ca0a7; font-size: 10px; }.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: var(--status-color); background: var(--status-bg); font-size: 10px; font-weight: 700; }.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.sort-input { width: 66px; height: 30px; padding: 0 8px; border: 1px solid #dfddd8; border-radius: 7px; color: #626873; background: #fff; }.row-actions { display: flex; gap: 4px; }.row-action { width: 30px; height: 30px; border: 0; border-radius: 7px; color: #747a84; background: transparent; }.row-action:hover { color: var(--accent); background: #f7ebe6; }.row-action.danger:hover { color: var(--red); background: #fae9e7; }.disabled-row { opacity: .62; }.empty-state { padding: 70px 20px; text-align: center; }.empty-icon { color: #c4c0b9; font-size: 38px; }.empty-state h3 { margin: 10px 0 5px; }.empty-state p { margin: 0; color: #92969e; font-size: 12px; }

.placeholder-page { min-height: calc(100vh - 160px); place-items: center; }.placeholder-page.is-active { display: grid; }.placeholder-card { max-width: 480px; padding: 60px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; }.placeholder-card > span { color: var(--accent); font-size: 45px; }.placeholder-card h1 { font-family: Georgia, "Songti SC", serif; }.placeholder-card p { color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(20,22,28,.55); backdrop-filter: blur(4px); animation: fade .16s ease; }.modal { width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; border-radius: 17px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.22); animation: modal-in .2s ease; }.modal.wide { width: min(680px, 100%); }.compact-modal { width: min(490px, 100%); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 26px 18px; border-bottom: 1px solid #eeece8; }.modal-header h2 { margin: 4px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; }.close-button { width: 35px; height: 35px; border-radius: 50%; font-size: 24px; }.close-button:hover { background: #f1f0ed; }.modal form { padding: 22px 26px 0; }.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px 15px; }.form-grid label { display: grid; min-width: 0; gap: 7px; }.form-grid label > span { color: #545a63; font-size: 11px; font-weight: 600; }.form-grid b { color: var(--accent); }.form-grid input, .form-grid select, .form-grid textarea, .inline-form input { width: 100%; min-width: 0; border: 1px solid #dcdad5; border-radius: 9px; padding: 10px 11px; outline: 0; color: #2f343b; background: #fff; font-size: 12px; }.form-grid input, .form-grid select { height: 40px; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .inline-form input:focus { border-color: #ce8068; box-shadow: 0 0 0 3px rgba(231,93,52,.09); }.form-grid .full { grid-column: 1 / -1; }.form-grid textarea { resize: vertical; }.modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding: 17px 26px; border-top: 1px solid #efeeea; }.form-error { min-height: 16px; margin: 10px 0 0; color: var(--red); font-size: 11px; }.form-hint { margin: 12px 0 0; color: #9a9ea5; font-size: 10px; }.batch-preview { display: grid; gap: 7px; margin-top: 18px; padding: 13px 15px; border: 1px dashed #e2b3a4; border-radius: 10px; background: #fdf7f4; }.batch-preview span { color: #9d7062; font-size: 9px; letter-spacing: .12em; }.batch-preview strong { color: #914a34; font-size: 12px; }.inline-form { display: flex; gap: 8px; }.area-list { padding: 6px 26px 0; }.area-list-item { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid #efeeeb; }.area-grip { color: #afb2b7; }.area-list-item strong { flex: 1; font-size: 12px; }.area-list-item span { color: #969aa1; font-size: 10px; }.area-list-item button { border: 0; color: #a06b5b; background: transparent; font-size: 11px; }.area-list-item button:disabled { color: #c4c5c7; cursor: not-allowed; }.confirm-modal { width: min(420px, 100%); padding: 28px 28px 0; text-align: center; }.confirm-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 50%; color: var(--red); background: #fae7e5; font-size: 21px; font-weight: 700; }.confirm-modal h2 { margin: 0; font-family: Georgia, "Songti SC", serif; }.confirm-modal p { margin: 10px 0 0; color: #757b84; font-size: 12px; line-height: 1.7; }.modal-footer.centered { justify-content: center; margin-inline: -28px; }.toast-region { position: fixed; z-index: 100; right: 25px; bottom: 25px; display: grid; gap: 9px; }.toast { display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 13px 15px; border-radius: 10px; color: #fff; background: #252932; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease; }.toast i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #3a9b79; font-style: normal; font-size: 11px; }
@keyframes fade { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* High-contrast table status system */
.status-quickbar { display: grid; grid-template-columns: repeat(8, minmax(105px, 1fr)); gap: 8px; padding: 16px 20px; border-bottom: 1px solid #ebe9e4; background: #faf9f7; overflow-x: auto; }
.status-quick { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-width: 105px; min-height: 47px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--quick-color) 24%, white); border-radius: 10px; color: var(--quick-color); background: var(--quick-bg); text-align: left; transition: .15s ease; }
.status-quick:hover { transform: translateY(-1px); border-color: var(--quick-color); box-shadow: 0 6px 14px color-mix(in srgb, var(--quick-color) 13%, transparent); }
.status-quick.is-active { outline: 2px solid var(--quick-color); outline-offset: 1px; }
.status-quick i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--quick-color); font-style: normal; font-size: 11px; font-weight: 900; }
.status-quick span { color: inherit; font-size: 10px; font-weight: 800; white-space: nowrap; }.status-quick strong { font-family: Georgia, serif; font-size: 17px; }
.status-row { position: relative; background: var(--row-status-bg); }
.status-row > td { background: var(--row-status-bg); border-top-color: color-mix(in srgb, var(--row-status-color) 18%, #ffffff); transition: background .15s ease; }
.status-row td:first-child { box-shadow: inset 6px 0 0 var(--row-status-color); }
.status-row:hover > td { background: color-mix(in srgb, var(--row-status-color) 18%, #ffffff); }
.status-row .table-symbol { color: var(--row-status-color); background: var(--row-status-badge); border: 1px solid color-mix(in srgb, var(--row-status-color) 18%, transparent); }
.status-badge { min-width: 104px; justify-content: flex-start; gap: 7px; padding: 6px 9px 6px 6px; border: 1px solid color-mix(in srgb, var(--status-color) 24%, transparent); border-radius: 8px; font-size: 11px; box-shadow: 0 2px 5px color-mix(in srgb, var(--status-color) 8%, transparent); }
.status-badge .status-symbol { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; color: #fff; background: var(--status-color); font-style: normal; font-size: 9px; font-weight: 900; }
.table-card { border-top: 4px solid var(--card-tone); background: linear-gradient(145deg, #fff 50%, var(--card-tint)); }
.table-card::after { opacity: .65; }
.card-status { display: inline-flex; padding: 4px 8px 4px 5px; border: 1px solid color-mix(in srgb, var(--card-tone) 22%, transparent); border-radius: 7px; background: var(--card-badge); }
.card-status i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; background: var(--card-tone); font-style: normal; font-size: 8px; font-weight: 900; }

@media (max-width: 1120px) { .stat-grid { grid-template-columns: repeat(2, 1fr); }.page-heading { align-items: flex-start; }.heading-actions { flex-wrap: wrap; justify-content: flex-end; }.table-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 820px) { .sidebar { transform: translateX(-100%); transition: .22s ease; }.sidebar.is-open { transform: none; box-shadow: 15px 0 50px rgba(0,0,0,.22); }.main-wrap { margin-left: 0; }.topbar { height: 60px; padding: 0 18px; }.mobile-menu { display: grid; }.crumb span, .crumb b, .business-pill, .top-actions > .icon-button { display: none; } main { padding: 25px 18px 50px; }.page-heading { display: block; }.heading-actions { justify-content: flex-start; margin-top: 17px; }.legend { display: none; }.filter-bar { flex-wrap: wrap; }.search-box { width: 100%; }.result-count { margin-left: 0; }.summary-item { padding: 5px 13px; }.summary-item:first-child { padding-left: 13px; } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.stat-card { min-height: 116px; padding: 16px; }.stat-value { font-size: 27px; }.board-heading { padding: 18px; }.board-toolbar { align-items: stretch; flex-direction: column; padding: 13px 18px; }.search-box.compact { width: 100%; }.area-groups { padding: 4px 15px 20px; }.table-card-grid { grid-template-columns: 1fr 1fr; }.form-grid { grid-template-columns: 1fr; }.form-grid .full { grid-column: auto; }.modal-backdrop { padding: 8px; }.modal { max-height: calc(100vh - 16px); }.modal-header { padding: 20px; }.modal form { padding: 18px 20px 0; }.modal-footer { padding-inline: 20px; }.home-heading .btn-secondary { display: none; } }

/* Clarity-first layout */
.stat-card { border-top: 4px solid var(--tone); background: #fff; }
#statGrid > .stat-card { width: 100%; color: inherit; text-align: left; cursor: pointer; }
#statGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-card.is-active { border-color: var(--tone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 22%, transparent), 0 10px 24px color-mix(in srgb, var(--tone) 12%, transparent); transform: translateY(-2px); }
.stat-card::after { display: none; }
.stat-card-top { color: #555b64; font-size: 13px; font-weight: 700; }
.stat-card p { color: #737983; font-size: 11px; }
.home-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -4px 0 18px; padding: 13px 15px; border: 1px solid #e5d4ca; border-radius: 12px; background: #fffaf7; box-shadow: 0 5px 18px rgba(83,52,30,.05); }
.home-bulk-bar > div { display: grid; gap: 3px; }.home-bulk-bar strong { color: #4d3624; font-size: 12px; }.home-bulk-bar small { color: #8d7a6d; font-size: 9px; }.home-bulk-bar .btn { flex: 0 0 auto; }
#statGrid > .stat-card[data-home-status="attention"].has-alert { border-color: #b42318; color: #fff; background: linear-gradient(145deg, #c3291e, #9f1e17); box-shadow: 0 12px 26px rgba(180,35,24,.25); }
#statGrid > .stat-card[data-home-status="attention"].has-alert .stat-card-top,
#statGrid > .stat-card[data-home-status="attention"].has-alert .stat-value,
#statGrid > .stat-card[data-home-status="attention"].has-alert .stat-value small,
#statGrid > .stat-card[data-home-status="attention"].has-alert p { color: #fff; }
#statGrid > .stat-card[data-home-status="attention"].has-alert .stat-icon { color: #fff; background: rgba(255,255,255,.18); }
#statGrid > .stat-card[data-home-status="attention"].has-alert.is-active { box-shadow: 0 0 0 3px rgba(180,35,24,.22), 0 14px 30px rgba(180,35,24,.3); }
.legend { gap: 7px; }
.legend-item { gap: 5px; padding: 4px 7px 4px 4px; border: 1px solid #e5e4df; border-radius: 6px; color: var(--dot); background: #fff; font-size: 10px; font-weight: 700; }
.legend-item i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; color: #fff; background: var(--dot); font-style: normal; font-size: 7px; }
.attention-banner { display: flex; align-items: center; gap: 12px; width: calc(100% - 48px); margin: 14px 24px 0; padding: 12px 14px; border: 1px solid #efb5af; border-radius: 10px; color: #8e211a; background: #fff0ef; font: inherit; text-align: left; cursor: pointer; }
.attention-banner[hidden] { display: none; }
.attention-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; color: #fff; background: #b42318; font-weight: 900; }
.attention-banner > span:nth-child(2) { display: grid; gap: 3px; }.attention-banner strong { font-size: 12px; }.attention-banner small { color: #a44a44; font-size: 10px; }
.attention-banner:disabled { cursor: default; }.attention-banner:not(:disabled):hover { border-color: #d68079; background: #ffe8e6; }.attention-banner:not(:disabled):active { transform: translateY(1px); }.attention-cta { margin-left: auto; padding: 6px 9px; border: 1px solid #d68079; border-radius: 7px; color: #9d2c24; background: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.area-title-row h3 { font-size: 17px; }.area-title-row .area-count { font-size: 10px; }
.table-card-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; }
.board-filters { display: grid; gap: 8px; min-width: 0; }
.board-toolbar { align-items: flex-start; }.board-filters { flex: 1; }
.group-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.group-tab { min-height: 28px; padding: 0 10px; border: 1px solid #dfded9; border-radius: 7px; color: #6e747d; background: #fff; font-size: 10px; font-weight: 650; }
.group-tab:hover { border-color: #777e88; color: #333841; }.group-tab.is-active { border-color: #343a44; color: #fff; background: #343a44; }
.table-card { display: flex; flex-direction: column; min-height: 218px; padding: 15px 16px 14px; border: 1px solid color-mix(in srgb, var(--card-tone) 22%, #dededb); border-top: 7px solid var(--group-color); border-radius: 12px; background: color-mix(in srgb, var(--card-badge) 78%, #fff); box-shadow: none; }
.table-card::after { display: none; }.table-card:hover { border-color: var(--card-tone); border-top-color: var(--group-color); box-shadow: 0 9px 20px color-mix(in srgb, var(--card-tone) 14%, transparent); }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head-status { display: flex; align-items: center; gap: 5px; min-width: 0; }.status-pause { height: 29px; padding: 0 7px; border: 1px solid #cfbdea; border-radius: 7px; color: #6849a4; background: #f6f2fc; font-size: 9px; font-weight: 800; white-space: nowrap; }.status-pause:hover { color: #fff; background: #6849a4; }
.card-status { padding: 5px 9px 5px 5px; font-size: 11px; }.card-status i { width: 21px; height: 21px; }
.card-meta { position: static; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--group-color) 25%, transparent); border-radius: 7px; color: var(--group-color); background: var(--group-bg); font-size: 10px; font-weight: 750; }
.table-card h4 { width: 100%; margin: 20px 0 4px; overflow: hidden; color: #20242b; font-family: Inter, "PingFang SC", sans-serif; font-size: 29px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }.table-card h4 small { margin-left: 2px; font-size: 13px; font-weight: 700; }
.table-card p { width: 100%; margin: 0 0 10px; overflow: hidden; color: #646b75; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 5px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--card-tone) 20%, transparent); }
.card-clock { display: grid; gap: 3px; min-width: 0; text-align: left; }.card-clock span { color: #747b85; font-size: 9px; font-weight: 600; }.card-clock b { overflow: hidden; color: var(--card-tone); font-size: 15px; line-height: 1.15; letter-spacing: 0; text-overflow: clip; white-space: nowrap; }.card-clock em { overflow: hidden; color: #777e88; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.card-actions .card-action, .card-actions .card-extend { min-width: 56px; padding-inline: 4px; }
.card-actions { display: flex; flex-direction: column; gap: 5px; }
.card-action, .card-extend, .card-pause { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 66px; height: 30px; padding: 0 8px; border-radius: 7px; font-size: 10px; font-weight: 800; }
.card-action { border: 0; color: #fff; background: var(--card-tone); box-shadow: 0 4px 10px color-mix(in srgb, var(--card-tone) 18%, transparent); }.card-action:hover { filter: brightness(.92); transform: translateY(-1px); }.card-action i { font-style: normal; font-size: 10px; }
.card-action > span { display: grid; gap: 2px; line-height: 1.05; text-align: left; }
.card-action small { color: rgba(255,255,255,.82); font-size: 8px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.card-extend { border: 1px solid color-mix(in srgb, var(--card-tone) 48%, transparent); color: var(--card-tone); background: rgba(255,255,255,.66); }.card-extend:hover { background: #fff; }
.card-pause { border: 1px solid #c9bae5; color: #6849a4; background: #f6f2fc; }.card-pause:hover { color: #fff; background: #6849a4; }
.timer-table-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 13px 14px; border: 1px solid #e2e0db; border-radius: 11px; background: #faf9f7; }.timer-table-summary > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; background: #272b33; font-size: 15px; font-weight: 800; }.timer-table-summary strong, .timer-table-summary small { display: block; }.timer-table-summary strong { font-size: 13px; }.timer-table-summary small { margin-top: 4px; color: #858a92; font-size: 10px; }
.duration-input { position: relative; }.duration-input input { padding-right: 52px; }.duration-input b { position: absolute; top: 50%; right: 13px; color: #8b9098; font-size: 10px; transform: translateY(-50%); }
.duration-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }.duration-presets button { height: 34px; border: 1px solid #dedcd7; border-radius: 8px; color: #666c75; background: #fff; font-size: 10px; }.duration-presets button:hover { border-color: #ce8068; }.duration-presets button.is-active { border-color: var(--accent); color: #fff; background: var(--accent); }
.timer-preview { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; margin-top: 16px; padding: 14px 15px; border: 1px solid #d7e2ec; border-radius: 10px; background: #f3f7fb; }.timer-preview span { color: #6f7780; font-size: 10px; }.timer-preview strong { grid-row: span 2; color: #285b92; font-family: Georgia, serif; font-size: 25px; }.timer-preview small { color: #8a9097; font-size: 9px; }
.status-quickbar { display: flex; gap: 6px; padding: 12px 18px; overflow-x: auto; background: #fff; }
.status-quick { display: flex; grid-template-columns: none; gap: 6px; min-width: auto; min-height: 34px; padding: 0 10px; border-color: #e1e0dc; border-radius: 18px; color: #5e646d; background: #f8f7f4; box-shadow: none; }
.status-quick:hover { border-color: var(--quick-color); color: var(--quick-color); background: var(--quick-bg); box-shadow: none; }.status-quick.is-active { color: #fff; background: var(--quick-color); outline: none; border-color: var(--quick-color); }
.status-quick i { width: 7px; height: 7px; border-radius: 50%; background: var(--quick-color); }.status-quick.is-active i { background: #fff; }.status-quick span { font-size: 10px; }.status-quick strong { font-family: inherit; font-size: 11px; }
.filter-bar { background: #faf9f7; }
table { min-width: 760px; }.table-scroll th { height: 45px; padding: 0 18px; font-size: 11px; }.table-scroll td { height: 72px; padding: 0 18px; font-size: 12px; }
.status-row > td { background: #fff; }.status-row:hover > td { background: #faf9f7; }.status-row.disabled-row { opacity: 1; }
.status-row td:first-child { box-shadow: inset 5px 0 0 var(--group-color); }
.status-row .table-symbol { color: var(--group-color); background: var(--group-bg); border-color: color-mix(in srgb, var(--group-color) 25%, #dedfdf); }
.table-name-cell { gap: 10px; }.table-name-cell .drag-handle { width: 20px; padding: 0; }.table-symbol { width: 42px; height: 42px; border-radius: 9px; }
.table-name-cell strong { font-size: 13px; }.table-name-cell small { font-size: 10px; }.area-capacity { display: grid; gap: 4px; }.area-capacity strong { color: #363b43; font-size: 12px; }.area-capacity small, .update-time { color: #747a84; font-size: 10px; }.area-capacity .group-chip { width: max-content; padding: 3px 7px; border-radius: 5px; color: var(--group-color); background: var(--group-bg); font-weight: 700; }
.status-badge { min-width: 116px; padding: 7px 10px 7px 7px; border-radius: 9px; font-size: 11px; }.status-badge .status-symbol { width: 25px; height: 25px; flex-basis: 25px; }
.row-actions { justify-content: flex-end; }.actions-col { text-align: right; }
.settings-panel { overflow: hidden; }
#storeSettingsForm { margin-bottom: 18px; }
.settings-saved { color: #158064; font-size: 11px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; padding: 24px; }
.settings-grid > label { display: grid; gap: 8px; color: #343941; font-size: 12px; font-weight: 700; }
.settings-grid > label.full { grid-column: 1 / -1; }
.settings-grid > label > small { color: #858b94; font-size: 10px; font-weight: 500; }
.settings-grid input, .settings-grid select, .setting-unit input { width: 100%; height: 42px; border: 1px solid #dcdedc; border-radius: 9px; color: #2d3239; background: #fff; font: inherit; outline: none; }
.settings-grid input, .settings-grid select { padding: 0 12px; }
.settings-grid input[type="time"], .account-schedule-fields input[type="time"] { text-align: left; font-variant-numeric: tabular-nums; }
.settings-grid input[type="time"]::-webkit-date-and-time-value, .account-schedule-fields input[type="time"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.settings-grid input:focus, .settings-grid select:focus, .setting-unit:focus-within { border-color: #bf6e54; box-shadow: 0 0 0 3px rgba(191,110,84,.1); }
.setting-unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: 42px; overflow: hidden; border: 1px solid #dcdedc; border-radius: 9px; background: #fff; }
.setting-unit b, .setting-unit em { color: #777e87; font-size: 11px; font-style: normal; font-weight: 600; }
.setting-unit b { padding-left: 12px; }.setting-unit em { padding-right: 12px; }
.setting-unit input { height: 40px; padding: 0 8px; border: 0; border-radius: 0; box-shadow: none !important; }
.area-price-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 24px 12px; border-top: 1px solid #ecebe7; }
.area-price-heading strong { display: block; font-size: 15px; }.area-price-heading small { display: block; margin-top: 4px; color: #858b94; font-size: 10px; font-weight: 500; }
.area-price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 0 24px 24px; }
.area-price-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(150px, 1.2fr); align-items: center; gap: 16px; min-height: 68px; padding: 12px 14px; border: 1px solid #e7e6e2; border-radius: 10px; background: #faf9f7; }
.area-price-row > span { display: grid; gap: 4px; }.area-price-row strong { font-size: 12px; }.area-price-row small { color: #8a9098; font-size: 9px; }
.area-price-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.area-price-fields > label { display: grid; gap: 5px; }.area-price-fields > label > small { padding-left: 2px; color: #777e87; font-size: 9px; font-weight: 700; }
.settings-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid #ecebe7; background: #faf9f7; }
.settings-footer p { flex: 1; margin: 0; color: #7c828b; font-size: 10px; line-height: 1.6; }
.voice-settings-panel { border-top: 4px solid #b46a00; }
.voice-settings-state { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: #8b5a13; background: #fff1d5; font-size: 10px; font-weight: 800; }
.voice-settings-state.is-enabled { color: #0d7456; background: #def3ea; }
.voice-volume-control { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 12px; min-height: 42px; }
.voice-volume-control input { height: 6px; padding: 0; border: 0; border-radius: 999px; accent-color: #bd6b1b; box-shadow: none !important; cursor: pointer; }
.voice-volume-control strong { display: grid; place-items: center; height: 32px; border-radius: 8px; color: #8b5317; background: #fff3df; font-size: 11px; }
.voice-example { display: flex; align-items: center; gap: 14px; margin: 0 24px 24px; padding: 14px 16px; border: 1px solid #f0d4a8; border-radius: 10px; color: #6d4a23; background: #fff9ef; }
.voice-example span { flex: 0 0 auto; color: #a16a24; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.voice-example strong { font-size: 11px; font-weight: 700; }
.data-backup-panel { border-top: 4px solid #355f91; }
.data-backup-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: #315f91; background: #e8f0fa; font-size: 10px; font-weight: 800; }
.data-backup-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; }
.data-backup-summary { display: flex; align-items: center; gap: 14px; min-width: 0; }
.data-backup-summary > div { min-width: 0; }.data-backup-summary strong { display: block; font-size: 13px; }.data-backup-summary p { margin: 5px 0 0; color: #7f858e; font-size: 10px; line-height: 1.6; }
.data-backup-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; color: #315f91; background: #e8f0fa; font-size: 21px; font-weight: 800; }
.data-backup-actions { display: flex; flex: 0 0 auto; gap: 9px; }.data-backup-actions .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.backup-import-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.backup-import-preview span { display: grid; gap: 4px; padding: 10px; border-radius: 8px; color: #4f5660; background: #f7f6f3; font-size: 10px; }.backup-import-preview b { color: #90959d; font-size: 9px; }
.area-edit-hint { margin: 10px 26px 0; color: #8b9098; font-size: 10px; }
.area-list-item .area-edit-input { min-width: 0; flex: 1; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; color: #292e36; background: transparent; font-size: 12px; font-weight: 700; outline: none; }
.area-list-item .area-edit-input:hover { border-color: #e0ded9; background: #faf9f7; }.area-list-item .area-edit-input:focus { border-color: #ce8068; background: #fff; box-shadow: 0 0 0 3px rgba(231,93,52,.08); }
.area-list-item .area-save-button { color: #26745f; }
.area-grip[draggable="true"] { padding: 8px 5px; cursor: grab; user-select: none; }.area-grip[draggable="true"]:active { cursor: grabbing; }.area-list-item.is-dragging { opacity: .42; background: #f4f1ec; }
.brand-mark.has-avatar, .store-avatar.has-avatar, .user-avatar.has-avatar, .avatar-button.has-avatar, .mini-avatar.has-avatar, .settings-avatar-preview.has-avatar { background-position: center; background-size: cover; background-repeat: no-repeat; }
.avatar-setting { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 15px; border: 1px solid #e5e4df; border-radius: 11px; background: #faf9f7; }
.settings-avatar-preview { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; color: #fff; background: #343944; font-size: 22px; font-weight: 800; }
.avatar-setting > div { display: grid; gap: 4px; }.avatar-setting strong { font-size: 12px; }.avatar-setting small { color: #858b94; font-size: 10px; font-weight: 500; }.avatar-setting-actions { display: flex; gap: 7px; margin-top: 7px; }.avatar-setting-actions .btn { display: inline-flex; align-items: center; min-height: 34px; }
.store-logo-preview { color: #ffb49d; background-color: #48291f; }
.account-create-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 150px auto; align-items: end; gap: 12px; padding: 22px 24px 12px; }.account-create-grid label { display: grid; gap: 7px; color: #454b54; font-size: 10px; font-weight: 700; }.account-create-grid input, .account-create-grid select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #dcdbd6; border-radius: 9px; background: #fff; }.account-create-grid .btn { height: 40px; }.account-form-error { padding: 0 24px; }.account-list { display: grid; padding: 0 24px 22px; }.account-row { display: grid; grid-template-columns: 38px minmax(130px, 1fr) 100px repeat(4, auto); align-items: center; gap: 10px; min-height: 68px; border-bottom: 1px solid #eceae6; }.account-row.is-current { margin-inline: -10px; padding-inline: 10px; border-radius: 9px; background: #f5f8f7; }.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #39414c; font-size: 11px; font-weight: 800; }.account-info { min-width: 0; }.account-info strong, .account-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-info strong { font-size: 11px; }.account-info small { margin-top: 4px; color: #8a9098; font-size: 9px; }.account-role { padding: 5px 7px; border-radius: 7px; font-size: 9px; font-weight: 750; text-align: center; }.account-role.role-admin { color: #7d452f; background: #f5e9e2; }.account-role.role-staff { color: #276450; background: #e8f4ef; }.account-row button { min-height: 30px; padding: 0 8px; border: 1px solid #dad8d3; border-radius: 7px; color: #555c65; background: #fff; font-size: 9px; }.account-row button:hover:not(:disabled) { border-color: #5f6670; }.account-row button.danger { color: #b42318; }.account-row button:disabled { opacity: .45; cursor: not-allowed; }
.account-schedule-fields { grid-column: 1 / -1; display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px 12px; padding: 13px; border: 1px solid #dbe7e2; border-radius: 10px; background: #f5faf8; }
.account-schedule-fields[hidden] { display: none; }.account-schedule-fields > strong { grid-column: 1 / -1; font-size: 11px; }.account-schedule-fields > small { grid-column: 1 / -1; color: #7f878d; font-size: 9px; }.account-schedule-fields > label { min-width: 0; }.account-schedule-fields > label input { width: 100%; min-width: 0; }.workday-options { display: grid; grid-column: 1 / -1; width: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }.account-create-grid .workday-options label, .workday-options label { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding-inline: 3px; border: 1px solid #d7e5df; border-radius: 8px; background: #fff; font-size: 10px; white-space: nowrap; }.account-create-grid .workday-options input, .workday-options input { width: 15px; height: 15px; flex: 0 0 15px; padding: 0; }.account-schedule-text { display: block; margin-top: 4px; color: #407361; font-size: 9px; font-weight: 700; }
@media (max-width: 1050px) { .account-create-grid { grid-template-columns: 1fr 1fr; }.account-create-grid .btn { width: 100%; }.account-row { grid-template-columns: 38px minmax(120px, 1fr) 100px auto; }.account-row button { grid-column: auto; } }
@media (max-width: 700px) { .account-schedule-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.account-schedule-fields .workday-options { grid-column: 1 / -1; } }
.top-account-switch { display: grid; gap: 5px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eceae6; }.top-account-switch button { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; color: #535a64; background: #f7f6f3; font-size: 10px; }.top-account-switch button small { color: #92969d; font-size: 8px; }.top-account-switch button.is-current { border-color: #bad8cd; color: #176b51; background: #eef8f4; }.top-account-switch button:not(.is-current):hover { color: #fff; background: #3a4049; }.top-account-switch button:not(.is-current):hover small { color: #dfe2e6; }
.order-stat-value { font-family: Inter, "PingFang SC", sans-serif; font-size: 26px; font-weight: 800; }
.order-table { min-width: 1120px; }.order-table td { height: 76px; }
.order-number { display: block; color: #28303a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 750; }
.order-snapshot-note, .order-location small, .order-billing small { display: block; margin-top: 5px; color: #8b9199; font-size: 9px; }
.order-location strong, .order-billing strong { color: #323840; font-size: 12px; }
.order-operator { display: grid; gap: 4px; min-width: 110px; }.order-operator strong { color: #343a43; font-size: 10px; }.order-operator small { color: #8b9199; font-size: 8px; white-space: nowrap; }
.order-amount { color: #b14c2d; font-size: 14px; }
.order-time { color: #676e78; font-size: 10px; }
.order-paid-status { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 7px; color: #14785b; background: #e2f3ec; font-size: 10px; font-weight: 750; }
.order-panel .filter-bar { flex-wrap: wrap; }.order-panel .filter-bar .search-box { flex: 1 1 250px; }.order-panel .filter-bar select { min-width: 112px; }
.order-date-range { display: flex; align-items: center; gap: 9px; padding: 11px 24px; border-bottom: 1px solid #efeeea; background: #fff; }
.order-date-title { color: #555c66; font-size: 11px; font-weight: 700; }
.order-date-fields, .order-date-fields label { display: contents; }
.order-date-fields b { display: none; }
.order-date-fields > i { color: #a0a4aa; font-size: 10px; font-style: normal; }
.order-date-fields input { height: 34px; padding: 0 10px; border: 1px solid #deddd8; border-radius: 8px; color: #4f5660; background: #fff; font-size: 11px; }
.order-date-range small { margin-left: auto; color: #8c929a; font-size: 9px; }.order-date-range small.is-error { color: #b42318; font-weight: 700; }
.report-actions select { height: 40px; min-width: 135px; padding: 0 32px 0 12px; border: 1px solid #dcdad5; border-radius: 9px; color: #4c535d; background: #fff; font-size: 11px; }
.report-custom-range { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; margin: -9px 0 18px; padding: 13px 15px; border: 1px solid #e2e0da; border-radius: 11px; background: #fff; }.report-custom-range label { display: grid; gap: 5px; color: #737983; font-size: 9px; }.report-custom-range input { height: 36px; padding: 0 9px; border: 1px solid #dedcd6; border-radius: 8px; }.report-custom-range i { padding-bottom: 11px; color: #9b9fa5; font-size: 10px; font-style: normal; }
.report-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }.report-kpi-value { font-family: Inter, "PingFang SC", sans-serif; font-size: 25px; font-weight: 800; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.report-wide { grid-column: 1 / -1; }.report-panel { overflow: hidden; }.report-panel-note { color: #9a6730; font-size: 10px; font-weight: 700; }
.hourly-chart { display: grid; grid-template-columns: repeat(24, minmax(18px, 1fr)); align-items: end; gap: 5px; height: 260px; padding: 24px 24px 18px; }.hourly-slot { display: grid; grid-template-rows: 18px 1fr 17px; align-items: end; height: 100%; text-align: center; }.hourly-slot > span { color: #646b75; font-size: 8px; }.hourly-slot > i { width: 72%; height: var(--bar-height); min-height: 2px; margin: 0 auto; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #487bb9, #285d9e); box-shadow: 0 5px 12px rgba(40,93,158,.13); }.hourly-slot > small { color: #989da5; font-size: 8px; }
.metric-bars { display: grid; gap: 16px; padding: 24px; }.metric-bar { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; }.metric-bar span { color: #555c65; font-size: 10px; }.metric-bar > div { height: 9px; overflow: hidden; border-radius: 10px; background: #edeeef; }.metric-bar i { display: block; height: 100%; min-width: 3px; border-radius: inherit; }.metric-bar strong { color: #555c65; font-size: 10px; text-align: right; }
.report-composition { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 24px; }.composition-item { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; padding: 13px; border: 1px solid #e8e6e1; border-radius: 10px; background: #faf9f7; }.composition-item > i { width: 9px; height: 28px; border-radius: 8px; background: var(--composition-color); }.composition-item span { display: grid; gap: 3px; }.composition-item strong { font-size: 10px; }.composition-item small { color: #969ba3; font-size: 8px; }.composition-item b { color: var(--composition-color); font-size: 12px; }
.daily-trend { display: flex; align-items: stretch; gap: 9px; min-height: 250px; padding: 24px; overflow-x: auto; }.trend-day { display: grid; grid-template-rows: 18px 1fr 18px 18px; align-items: end; min-width: 54px; flex: 1; text-align: center; }.trend-day > span { color: #6b727c; font-size: 8px; }.trend-day > div { height: 145px; display: flex; align-items: flex-end; justify-content: center; }.trend-day i { width: 26px; height: var(--trend-height); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #e27650, #c65331); }.trend-day strong { color: #4e5560; font-size: 9px; }.trend-day small { color: #979ba3; font-size: 8px; }
.report-table { min-width: 820px; }.report-table td { height: 62px; }.report-ranking { display: grid; gap: 8px; padding: 18px 24px 24px; }.ranking-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 80px; align-items: center; gap: 12px; min-height: 62px; padding: 8px 10px; border-bottom: 1px solid #eeece8; }.ranking-row > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #8c5e4e; background: #f4e6e0; font-size: 10px; font-weight: 800; }.ranking-row > div { display: grid; gap: 4px; min-width: 0; }.ranking-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.ranking-row small { color: #8c929a; font-size: 8px; }.ranking-row i { height: 5px; overflow: hidden; border-radius: 8px; background: #ecebe8; }.ranking-row i b { display: block; height: 100%; border-radius: inherit; background: #c45d3d; }.ranking-row em { color: #a5462b; font-size: 11px; font-style: normal; font-weight: 800; text-align: right; }.report-no-data { margin: auto; color: #9499a1; font-size: 11px; }.report-empty { padding: 70px 20px; border: 1px dashed #d9d7d1; border-radius: 14px; color: #8e949c; background: #fff; text-align: center; }.report-empty span { font-size: 38px; }.report-empty h3 { margin: 10px 0 4px; color: #444a53; }.report-empty p { margin: 0; font-size: 11px; }
.confirm-details { margin-top: 18px; text-align: left; }.settlement-confirm { width: min(540px, 100%); }.settlement-confirm .confirm-symbol { color: #fff; background: #d75a35; }.settlement-confirm > p { margin-inline: auto; max-width: 430px; }
.settlement-amount { display: grid; justify-items: center; gap: 5px; padding: 18px; border: 1px solid #f0b59f; border-radius: 13px; color: #a73b1c; background: linear-gradient(145deg, #fff4ef, #ffe7dd); }.settlement-amount > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }.settlement-amount > strong { font-family: Inter, "PingFang SC", sans-serif; font-size: 42px; line-height: 1.1; letter-spacing: -.04em; }.settlement-amount > small { color: #af715e; font-size: 9px; }.settlement-amount.is-free { border-color: #a8d9c9; color: #14785b; background: linear-gradient(145deg, #f1fbf7, #e3f5ed); }.settlement-amount.is-free > small { color: #518a78; }
.settlement-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }.settlement-breakdown > span { display: grid; gap: 5px; padding: 11px 8px; border: 1px solid #e8e6e1; border-radius: 9px; background: #faf9f7; text-align: center; }.settlement-breakdown small { color: #90959c; font-size: 8px; }.settlement-breakdown strong { color: #414750; font-size: 10px; }
@media (max-width: 1200px) { #statGrid, .report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }.report-grid { grid-template-columns: 1fr; }.report-wide { grid-column: auto; } }
@media (max-width: 820px) { #statGrid, .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hourly-chart { min-width: 720px; }.report-panel { overflow-x: auto; }.report-heading .heading-actions { align-items: stretch; }.report-actions select { flex: 1; }.avatar-setting { align-items: flex-start; }.data-backup-body { align-items: stretch; flex-direction: column; }.data-backup-actions { width: 100%; }.data-backup-actions .btn { flex: 1; } }
@media (max-width: 820px) { .settings-grid, .area-price-list { grid-template-columns: 1fr; }.area-price-heading { align-items: flex-start; flex-direction: column; gap: 6px; } }
@media (max-width: 620px) { .table-card-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.table-card { min-height: 205px; padding: 12px; }.table-card h4 { margin-top: 16px; font-size: 24px; }.card-action { min-width: 62px; padding: 0 8px; }.attention-banner { margin: 10px 15px 0; }.attention-banner button { display: none; }.settings-grid { gap: 17px; padding: 18px; }.area-price-heading { padding: 18px 18px 10px; }.area-price-list { padding: 0 18px 18px; }.area-price-row { grid-template-columns: 1fr; gap: 9px; }.area-price-fields { grid-template-columns: 1fr; }.settings-footer { align-items: stretch; flex-direction: column; padding: 14px 18px; }.settings-footer .btn { width: 100%; }.voice-example { align-items: flex-start; flex-direction: column; gap: 6px; margin: 0 18px 18px; }.data-backup-body { padding: 18px; }.data-backup-actions { flex-direction: column; }.backup-import-preview { grid-template-columns: 1fr; }.group-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }.group-tab { flex: 0 0 auto; }.order-date-range { flex-wrap: wrap; padding: 12px 18px; }.order-date-range input { flex: 1 1 130px; }.order-date-range small { width: 100%; margin-left: 0; }.settlement-breakdown { grid-template-columns: 1fr 1fr; }.settlement-amount > strong { font-size: 34px; } }

/* Table form presets */
.form-grid label { align-content: start; }
.form-grid label > small { min-height: 14px; color: #9297a0; font-size: 9px; line-height: 1.45; }
.group-preset-control { display: grid; gap: 7px; }
.group-preset-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.group-preset-footer small { flex: 1; color: #9297a0; font-size: 9px; line-height: 1.45; }
.group-preset-footer button { flex: 0 0 auto; padding: 0; border: 0; color: #b42318; background: transparent; font-size: 9px; font-weight: 700; }
.group-preset-footer button:hover { text-decoration: underline; }
.group-preset-footer button:disabled { color: #b8bbc0; cursor: not-allowed; text-decoration: none; }

/* Cloud status, secure login and phone-specific navigation */
.mobile-bottom-nav { display: none; }
.cloud-sync-status { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #cfe4dc; border-radius: 20px; color: #14785b; background: #eef8f4; font-size: 9px; font-weight: 700; white-space: nowrap; }
.cloud-sync-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cloud-sync-status[data-tone="offline"] { border-color: #ead7ab; color: #956000; background: #fff8e8; }
.cloud-sync-status[data-tone="syncing"] { border-color: #c8dbef; color: #245fa4; background: #eef5fd; }
.cloud-sync-status[data-tone="warn"] { border-color: #efc5bc; color: #b5472b; background: #fff2ee; }
.push-notify-button { display: none; align-items: center; gap: 5px; min-height: 32px; padding: 5px 9px; border: 1px solid #e0ded8; border-radius: 18px; color: #5a606a; background: #fff; font-size: 9px; white-space: nowrap; }
.push-notify-button span { font-size: 13px; }.push-notify-button b { font-weight: 800; }
.push-notify-button[data-state="enabled"] { border-color: #b9ded0; color: #087859; background: #edf8f4; }
.push-notify-button[data-state="denied"] { border-color: #efc5bc; color: #b42318; background: #fff1ef; }
.cloud-login-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #f7f6f2; }
.cloud-login-card { width: min(420px, 100%); padding: 36px; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.cloud-login-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px 14px 14px 4px; color: #fff; background: var(--accent); font-size: 20px; font-weight: 800; }
.cloud-login-card > p { margin: 16px 0 4px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.cloud-login-card h1 { margin: 0 0 25px; font-family: Georgia, "Songti SC", serif; font-size: 28px; }
.cloud-login-card label { display: grid; gap: 7px; margin-top: 15px; color: #555b64; font-size: 11px; font-weight: 700; }
.cloud-login-card input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #d9d7d2; border-radius: 10px; outline: 0; }
.cloud-login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231,93,52,.12); }
.cloud-login-card button { width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 10px; color: #fff; background: var(--accent); font-weight: 800; }
.cloud-login-card em { display: block; margin-top: 14px; color: #9297a0; font-size: 9px; font-style: normal; line-height: 1.6; text-align: center; }
.cloud-login-error { display: block; min-height: 16px; margin-top: 8px; color: #b42318; font-size: 10px; }
.cloud-fatal { display: grid; place-items: center; align-content: center; min-height: 100vh; padding: 30px; text-align: center; }
.cloud-fatal p { color: #777d86; }.cloud-fatal button { padding: 10px 18px; border: 0; border-radius: 9px; color: #fff; background: var(--accent); }

@media (max-width: 820px) {
  body { padding-bottom: 68px; }
  .topbar { height: 56px; }
  .crumb span, .crumb b { display: none; }
  .crumb strong { font-size: 14px; }
  .business-pill { margin-right: 0; padding: 6px 9px; }
  .cloud-sync-status { max-width: 94px; overflow: hidden; text-overflow: ellipsis; }
  .push-notify-button:not([hidden]) { display: inline-flex; }
  .push-notify-button b { max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
  main { padding: 20px 14px 34px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p:not(.eyebrow) { font-size: 11px; }
  .heading-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .heading-actions .btn { min-width: 0; padding: 0 9px; font-size: 10px; }
  .home-heading .heading-actions { display: none; }
  #statGrid { display: flex; gap: 9px; margin: 0 -14px 16px; padding: 2px 14px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
  #statGrid .stat-card { min-width: 152px; min-height: 116px; flex: 0 0 152px; scroll-snap-align: start; }
  .panel { border-radius: 14px; }
  .board-heading { padding: 16px; }
  .board-toolbar { padding: 12px 14px; }
  .area-groups { padding: 8px 12px 18px; }
  .area-section { border-radius: 12px; }
  .area-title-row { min-height: 56px; padding: 10px 12px; }
  .table-card-grid { padding: 10px; }
  .mobile-bottom-nav { position: fixed; z-index: 55; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 62px; padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-top: 1px solid #deddd8; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(31,35,42,.08); backdrop-filter: blur(14px); }
  .mobile-tab { display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; border-radius: 9px; color: #7d838c; text-decoration: none; font-size: 9px; }
  .mobile-tab i { font-size: 18px; font-style: normal; line-height: 1; }
  .mobile-tab.is-active { color: var(--accent); background: #fff1ec; font-weight: 800; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
  .modal.wide, .compact-modal { width: 100%; }
  .cloud-login-overlay { align-items: end; padding: 0; }
  .cloud-login-card { width: 100%; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
}

@media (max-width: 560px) {
  .table-card-grid { grid-template-columns: 1fr; }
  .table-card { min-height: 190px; }
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .filter-bar .search-box, .filter-bar .result-count { grid-column: 1 / -1; width: 100%; }
  .filter-bar select { width: 100%; min-width: 0; }
  #tablesPage .table-scroll { padding: 10px; overflow: visible; }
  #tablesPage .table-scroll table, #tablesPage .table-scroll tbody { display: block; width: 100%; min-width: 0; }
  #tablesPage .table-scroll thead { display: none; }
  #tablesPage #tableBody { display: grid; gap: 10px; }
  #tablesPage #tableBody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "status actions" "area actions" "time actions"; gap: 8px 12px; min-width: 0; padding: 13px 13px 12px; border: 1px solid color-mix(in srgb, var(--row-status-color) 55%, #d9d7d1); border-left: 5px solid var(--row-status-color); border-radius: 14px; background: var(--row-status-bg); box-shadow: 0 4px 14px rgba(39,43,50,.05); }
  #tablesPage #tableBody td { display: block; min-width: 0; height: auto; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; }
  #tablesPage #tableBody td:nth-child(1) { grid-area: name; }
  #tablesPage #tableBody td:nth-child(2) { grid-area: status; align-self: center; }
  #tablesPage #tableBody td:nth-child(3) { grid-area: area; align-self: center; }
  #tablesPage #tableBody td:nth-child(4) { grid-area: time; align-self: center; }
  #tablesPage #tableBody td:nth-child(5) { grid-area: actions; align-self: center; }
  #tablesPage #tableBody .table-name-cell { display: grid; grid-template-columns: 20px 46px minmax(0, 1fr); gap: 9px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--row-status-color) 16%, transparent); }
  #tablesPage #tableBody .table-name-cell .drag-handle { width: 20px; padding: 0; }
  #tablesPage #tableBody .table-symbol { width: 46px; height: 46px; border-radius: 11px; }
  #tablesPage #tableBody .table-name-cell > span:last-child { min-width: 0; }
  #tablesPage #tableBody .table-name-cell strong, #tablesPage #tableBody .table-name-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #tablesPage #tableBody .table-name-cell strong { font-size: 16px; }
  #tablesPage #tableBody .table-name-cell small { margin-top: 3px; font-size: 10px; }
  #tablesPage #tableBody .status-badge { width: max-content; max-width: 100%; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--status-color) 20%, transparent); border-radius: 9px; }
  #tablesPage #tableBody .area-capacity { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
  #tablesPage #tableBody .area-capacity strong { font-size: 11px; }
  #tablesPage #tableBody .area-capacity strong::after { content: "·"; margin-left: 5px; color: #9aa0a8; }
  #tablesPage #tableBody .area-capacity .group-chip { padding: 2px 6px; font-size: 9px; }
  #tablesPage #tableBody .update-time { color: #858b94; font-size: 9px; }
  #tablesPage #tableBody .update-time::before { content: "更新 "; }
  #tablesPage #tableBody .row-actions { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; justify-content: end; }
  #tablesPage #tableBody .row-action { width: 34px; height: 34px; border: 1px solid rgba(102,108,117,.16); border-radius: 9px; background: rgba(255,255,255,.78); }
  .status-quickbar { padding: 10px; }
  .summary-strip { overflow-x: auto; }
  .report-actions, .order-date-range { align-items: stretch; flex-direction: column; }
  .report-actions > *, .order-date-range > * { width: 100%; }
}

/* Portrait phones: show every dashboard total without horizontal clipping.
   Landscape tablets/phones keep the existing horizontal card row. */
@media (max-width: 560px) and (orientation: portrait) {
  #statGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 16px;
    padding: 2px 0 8px;
    overflow: visible;
    scroll-snap-type: none;
  }
  #statGrid .stat-card {
    min-width: 0;
    min-height: 104px;
    width: 100%;
    flex: none;
    padding: 11px 10px;
    border-top-width: 3px;
  }
  #statGrid .stat-card-top { gap: 4px; font-size: 10px; }
  #statGrid .stat-icon { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; font-size: 12px; }
  #statGrid .stat-value { margin-top: 10px; font-size: 25px; }
  #statGrid .stat-value small { font-size: 9px; }
  #statGrid .stat-card p { margin-top: 5px; font-size: 8px; }
}
 
@media (max-width: 560px) {
  body[data-role="staff"] .mobile-bottom-nav { display: none; }
  body[data-role="staff"] { padding-bottom: 0; }
  .attention-banner { width: calc(100% - 30px); margin: 10px 15px 0; padding: 12px; touch-action: manipulation; }
  .attention-banner > span:nth-child(2) { min-width: 0; }
  .attention-banner strong, .attention-banner small { overflow-wrap: anywhere; }
  .attention-cta { padding: 0; border: 0; background: transparent; font-size: 17px; }
  .table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .account-create-grid { grid-template-columns: 1fr; padding: 18px 14px 12px; }
  .account-schedule-fields { grid-template-columns: 1fr; align-items: stretch; gap: 12px; padding: 14px; }
  .account-schedule-fields > strong, .account-schedule-fields > small, .account-schedule-fields > label, .account-schedule-fields .workday-options { grid-column: 1; }
  .account-schedule-fields > label { display: grid; gap: 7px; }
  .account-schedule-fields > label input[type="time"] { height: 48px; padding-inline: 14px; }
  .settings-grid > label { align-content: start; gap: 7px; }
  .settings-grid > label > span { line-height: 1.35; }
  .settings-grid > label > small { line-height: 1.5; }
  .settings-grid input[type="time"] { height: 48px; padding-inline: 14px; }
  .account-form-error { padding: 0 14px; }
  .account-list { padding: 0 14px 18px; }
  .account-row { grid-template-columns: 38px minmax(0, 1fr) auto auto; grid-template-areas: "avatar info info role" "edit switch toggle delete"; gap: 8px 6px; min-height: 96px; padding: 10px 0; }
  .account-row.is-current { margin-inline: -6px; padding-inline: 6px; }
  .account-row .account-avatar { grid-area: avatar; }
  .account-row .account-info { grid-area: info; }
  .account-row .account-role { grid-area: role; }
  .account-row button { min-width: 0; padding: 0 5px; white-space: nowrap; }
  .account-row button:nth-of-type(1) { grid-area: edit; }
  .account-row button:nth-of-type(2) { grid-area: switch; }
  .account-row button:nth-of-type(3) { grid-area: toggle; }
  .account-row button:nth-of-type(4) { grid-area: delete; }
  .area-list { padding: 6px 16px 0; }
  .area-list-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; grid-template-areas: "grip name save delete" ". count save delete"; gap: 3px 7px; padding: 8px 0; }
  .area-list-item .area-grip { grid-area: grip; }
  .area-list-item .area-edit-input { grid-area: name; width: 100%; }
  .area-list-item > span:not(.area-grip) { grid-area: count; }
  .area-list-item .area-save-button { grid-area: save; }
  .area-list-item > button:last-child { grid-area: delete; }
  .inline-form { flex-direction: column; }
  .avatar-setting { flex-direction: column; }
  .avatar-setting-actions { flex-wrap: wrap; }
  .report-custom-range { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .report-custom-range label, .report-custom-range input { width: 100%; min-width: 0; }
  .report-custom-range > i { display: none; }
  .report-custom-range > button { grid-column: 1 / -1; width: 100%; }
  .summary-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .summary-item { flex: 0 0 auto; }
  .modal-footer { position: sticky; z-index: 2; bottom: 0; padding-bottom: calc(17px + env(safe-area-inset-bottom)); background: #fff; }
  .toast-region { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); left: 14px; }
  .toast { width: 100%; min-width: 0; }
  input, select, textarea { font-size: 16px !important; }
  .mobile-menu, .close-button { width: 44px; height: 44px; min-width: 44px; }
  .mobile-tab, .btn, .icon-button, .close-button, .card-action, .card-extend, .status-pause, .row-action, .area-tab, .group-tab, .status-pill, .attention-banner { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn { min-height: 44px; }
  #tablesPage #tableBody .table-name-cell { grid-template-columns: 46px minmax(0, 1fr); }
  #tablesPage #tableBody .drag-handle { display: none; }
  #tablesPage #tableBody .row-actions { grid-template-columns: repeat(3, 42px); gap: 7px; }
  #tablesPage #tableBody .row-action { width: 42px; height: 42px; font-size: 16px; }
  .area-list-item { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name save delete" "count save delete"; }
  .area-list-item .area-grip { display: none; }
  .area-list-item button { min-height: 40px; padding-inline: 7px; }
  .account-row button { min-height: 40px; }
  .duration-presets button { min-height: 44px; }
  .modal-footer .btn { min-width: 104px; }
  .modal { max-height: 94dvh; }
  .order-date-range { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 8px; padding: 14px; }
  .order-date-range > span { width: auto; }
  .order-date-range > i { width: auto; padding: 0 2px; }
  .order-date-range input { width: 100%; height: 48px; min-height: 48px; flex: none; padding: 0 12px; }
  .order-date-range small { width: auto; margin-left: 0; }
}

/* iPhone/iPad can report a wider CSS viewport; coarse pointer keeps the phone layout deterministic. */
@media (hover: none) and (pointer: coarse) {
  .account-schedule-fields { grid-template-columns: 1fr !important; align-items: stretch; gap: 12px; padding: 14px; }
  .account-schedule-fields > strong, .account-schedule-fields > small, .account-schedule-fields > label, .account-schedule-fields .workday-options { grid-column: 1 / -1 !important; }
  .account-schedule-fields > label { display: grid; gap: 7px; }
  .account-schedule-fields input[type="time"], .settings-grid input[type="time"] { width: 100%; min-width: 0; height: 48px; padding-inline: 14px; text-align: left !important; -webkit-appearance: none; appearance: none; }
  .account-schedule-fields input[type="time"]::-webkit-date-and-time-value, .settings-grid input[type="time"]::-webkit-date-and-time-value { display: block; width: 100%; text-align: left !important; }
}

@media (max-width: 820px) {
  :root { --mobile-bottom-nav-height: calc(62px + env(safe-area-inset-bottom)); }
  body.mobile-menu-open { overflow: hidden; }
  .sidebar { inset: 0 auto var(--mobile-bottom-nav-height) 0; z-index: 70; height: auto; max-height: none; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 28px; -webkit-overflow-scrolling: touch; }
  .sidebar-scrim { position: fixed; inset: 0 0 var(--mobile-bottom-nav-height) 0; z-index: 65; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: rgba(23, 26, 33, .34); opacity: 0; pointer-events: none; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent; }
  .sidebar.is-open + .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .sidebar-bottom { margin-top: auto; flex: 0 0 auto; padding-top: 28px; }
}

@media (max-width: 560px) {
  body[data-role="staff"] .sidebar, body[data-role="staff"] .sidebar-scrim { bottom: 0; }
}

/* Order center: phone portrait and landscape layout. Desktop keeps the original table. */
@media (max-width: 900px) {
  #ordersPage .order-panel { overflow: hidden; }
  #ordersPage .panel-heading { padding: 18px 16px 14px; }
  #ordersPage .order-panel .filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 14px;
  }
  #ordersPage .order-panel .filter-bar .search-box {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 46px;
  }
  #ordersPage .order-panel .filter-bar select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding-inline: 12px 32px;
  }
  #ordersPage #clearOrderFilters {
    justify-self: start;
    min-height: 38px;
    padding: 0 8px;
    font-weight: 700;
  }
  #ordersPage #orderResultCount {
    align-self: center;
    justify-self: end;
    width: auto;
    margin: 0;
  }
  #ordersPage .order-date-range {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid #efeeea;
    background: #faf9f7;
  }
  #ordersPage .order-date-title {
    width: auto;
    align-self: center;
    color: #343a43;
    font-size: 12px;
    font-weight: 800;
  }
  #ordersPage .order-date-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    width: 100%;
  }
  #ordersPage .order-date-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  #ordersPage .order-date-fields b {
    color: #7a8089;
    font-size: 10px;
  }
  #ordersPage .order-date-fields > i { display: none; }
  #ordersPage .order-date-fields input {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 9px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
  }
  #ordersPage .order-date-fields input::-webkit-date-and-time-value {
    display: block;
    width: 100%;
    min-height: 1.2em;
    text-align: left;
  }
  #ordersPage .order-date-range small {
    grid-column: 2;
    width: auto;
    margin: 0;
    color: #8a9098;
    line-height: 1.5;
  }
  #ordersPage .table-scroll {
    overflow: visible;
    padding: 12px;
    background: #f7f6f3;
  }
  #ordersPage .order-table,
  #ordersPage .order-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #ordersPage .order-table thead { display: none; }
  #ordersPage #orderBody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  #ordersPage #orderBody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number status"
      "location location"
      "billing amount"
      "operator operator"
      "time time";
    gap: 11px 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e0da;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(38, 42, 49, .045);
  }
  #ordersPage #orderBody td {
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
  }
  #ordersPage #orderBody td:nth-child(1) { grid-area: number; }
  #ordersPage #orderBody td:nth-child(2) { grid-area: location; padding-top: 10px; border-top: 1px solid #eeece7; }
  #ordersPage #orderBody td:nth-child(3) { grid-area: billing; }
  #ordersPage #orderBody td:nth-child(4) { grid-area: amount; align-self: center; text-align: right; }
  #ordersPage #orderBody td:nth-child(5) { grid-area: operator; padding-top: 9px; border-top: 1px dashed #ebe9e4; }
  #ordersPage #orderBody td:nth-child(6) { grid-area: time; display: flex; align-items: center; justify-content: space-between; }
  #ordersPage #orderBody td:nth-child(7) { grid-area: status; align-self: start; }
  #ordersPage #orderBody td:nth-child(6)::before {
    content: attr(data-label);
    color: #92979f;
    font-size: 9px;
    font-weight: 700;
  }
  #ordersPage .order-number { overflow-wrap: anywhere; font-size: 12px; }
  #ordersPage .order-snapshot-note { margin-top: 3px; }
  #ordersPage .order-location strong,
  #ordersPage .order-billing strong { font-size: 13px; }
  #ordersPage .order-location small,
  #ordersPage .order-billing small { line-height: 1.45; }
  #ordersPage .order-operator { min-width: 0; }
  #ordersPage .order-operator small { overflow: hidden; text-overflow: ellipsis; }
  #ordersPage .order-amount { font-size: 18px; }
  #ordersPage .order-paid-status { white-space: nowrap; }
}

@media (max-width: 620px) {
  #ordersPage .order-panel .filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #ordersPage .order-date-range {
    grid-template-columns: 1fr;
  }
  #ordersPage .order-date-range small { grid-column: auto; }
  #ordersPage #orderBody { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  #ordersPage .order-date-fields { grid-template-columns: 1fr; }
}

/* Compact business board for portrait phones only.
   Desktop and landscape layouts intentionally keep their existing rules. */
@media (max-width: 560px) and (orientation: portrait) {
  #homePage .home-heading {
    display: none;
  }

  #homePage {
    margin: 0;
  }

  #homePage .home-bulk-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin: -4px 0 12px;
    padding: 11px 12px;
  }

  #homePage .home-bulk-bar .btn {
    width: 100%;
  }

  #homePage .board-panel {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #homePage .board-heading {
    display: block;
    padding: 13px 14px 6px;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #fff;
  }

  #homePage .board-heading h2 {
    font-family: Inter, "PingFang SC", sans-serif;
    font-size: 16px;
    font-weight: 800;
  }

  #homePage .board-heading p {
    margin-top: 2px;
    font-size: 9px;
  }

  #homePage .board-heading .legend {
    display: none;
  }

  #homePage .board-toolbar {
    display: grid;
    gap: 8px;
    padding: 5px 14px 12px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: #fff;
  }

  #homePage .board-filters {
    gap: 7px;
  }

  #homePage .area-tabs,
  #homePage .group-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 1px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #homePage .area-tabs::-webkit-scrollbar,
  #homePage .group-tabs::-webkit-scrollbar {
    display: none;
  }

  #homePage .area-tab,
  #homePage .group-tab {
    min-height: 28px;
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 10px;
  }

  #homePage .board-toolbar .search-box {
    width: 100%;
    height: 34px;
    min-height: 34px;
  }

  #homePage .board-toolbar .search-box input {
    font-size: 12px !important;
  }

  #homePage .area-groups {
    padding: 4px 0 18px;
  }

  #homePage .area-section {
    overflow: visible;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #homePage .area-section + .area-section {
    margin-top: 16px;
  }

  #homePage .area-title-row {
    min-height: 62px;
    margin: 0 0 10px;
    padding: 8px 11px;
    border: 1px solid var(--area-border);
    border-left: 5px solid var(--area-tone);
    border-radius: 11px;
  }

  #homePage .area-title-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 8px;
    font-size: 14px;
  }

  #homePage .area-title-copy {
    gap: 0;
    min-width: 0;
  }

  #homePage .area-title-copy small {
    font-size: 7px;
    line-height: 1.2;
  }

  #homePage .area-title-row h3 {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #homePage .area-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 30px;
    margin-left: auto;
    padding: 0 10px;
    line-height: 1;
    text-align: center;
  }

  #homePage .table-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
  }

  #homePage .table-card {
    min-width: 0;
    min-height: 194px;
    padding: 10px 11px 10px;
    border-top-width: 5px;
    border-radius: 11px;
  }

  #homePage .card-head {
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
  }

  #homePage .card-head-status {
    flex: 0 1 auto;
    gap: 6px;
    min-width: 0;
  }

  #homePage .card-status,
  #homePage .status-pause,
  #homePage .card-meta {
    box-sizing: border-box;
    min-height: 26px;
    height: 26px;
    line-height: 1;
  }

  #homePage .card-status {
    gap: 4px;
    padding: 3px 7px 3px 3px;
    font-size: 9px;
  }

  #homePage .card-status i {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    font-size: 7px;
  }

  #homePage .status-pause {
    padding: 0 6px;
    font-size: 8px;
  }

  #homePage .card-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    margin-left: auto;
    padding: 0 7px;
    font-size: 9px;
    text-align: center;
  }

  #homePage .card-head:has(.status-pause) .card-meta {
    margin-left: 0;
  }

  #homePage .table-card h4 {
    margin: 13px 0 3px;
    font-size: 25px;
    line-height: 1.1;
  }

  #homePage .table-card h4 small {
    font-size: 11px;
  }

  #homePage .table-card p {
    margin-bottom: 7px;
    font-size: 10px;
  }

  #homePage .card-footer {
    gap: 6px;
    padding-top: 8px;
  }

  #homePage .card-clock {
    gap: 2px;
  }

  #homePage .card-clock span {
    font-size: 8px;
  }

  #homePage .card-clock b {
    font-size: 13px;
  }

  #homePage .card-clock em {
    max-width: 92px;
    font-size: 7px;
  }

  #homePage .card-actions {
    gap: 4px;
  }

  #homePage .card-action,
  #homePage .card-extend {
    min-width: 56px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 9px;
  }

  #homePage .card-action small {
    font-size: 7px;
  }

  #homePage .attention-banner {
    width: 100%;
    margin: 10px 0 0;
  }
}