:root {
  --red: #d84b37;
  --red-dark: #b93227;
  --ink: #282521;
  --muted: #8b867f;
  --line: #e9e5de;
  --paper: #fff;
  --canvas: #f5f3ee;
  --green: #2f9a69;
  --gold: #d69a3d;
  --shadow: 0 12px 35px rgba(73, 56, 34, .06);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: 238px; flex-direction: column; padding: 24px 17px 18px; background: #201f1c; color: #fff; }
.brand-block { display: flex; align-items: center; gap: 12px; padding: 0 7px 28px; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(236, 186, 93, .56); border-radius: 14px; background: linear-gradient(145deg, #d9553e, #a52e25); color: #f6d49a; font-family: STKaiti, KaiTi, serif; font-size: 23px; font-weight: 900; box-shadow: inset 0 0 0 3px rgba(255,255,255,.05); }
.brand-block > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.brand-block strong { font-size: 18px; letter-spacing: 2px; }
.brand-block span { margin-top: 4px; color: #918e87; font-size: 11px; white-space: nowrap; }
.main-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; width: 100%; height: 47px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: #9e9b95; font-size: 14px; text-align: left; transition: .18s ease; }
.nav-item > span { display: inline-flex; align-items: center; justify-content: center; width: 23px; margin-right: 11px; color: #85827d; font-size: 18px; font-weight: 700; }
.nav-item:hover { background: rgba(255,255,255,.045); color: #fff; }
.nav-item.active { background: linear-gradient(100deg, rgba(215,76,56,.19), rgba(215,76,56,.08)); color: #fff; font-weight: 650; }
.nav-item.active::before { content: ''; position: absolute; left: 0; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: var(--red); }
.nav-item.active > span { color: #f0715d; }
.nav-badge { margin-left: auto; padding: 2px 7px; border-radius: 10px; background: #d84b37; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.message-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #d84b37; box-shadow: 0 0 0 4px rgba(216,75,55,.12); }
.sidebar-bottom { margin-top: auto; }
.store-switch { display: flex; align-items: center; margin-bottom: 14px; padding: 13px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.025); }
.switch-dot { width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #3eb47e; box-shadow: 0 0 0 5px rgba(62,180,126,.1); }
.store-switch > div { display: flex; flex: 1; flex-direction: column; }
.store-switch strong { font-size: 12px; }.store-switch small { margin-top: 3px; color: #7f7c76; font-size: 9px; }
.toggle,.mini-toggle { position: relative; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: #56534d; }
.toggle i,.mini-toggle i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on,.mini-toggle.on { background: #319665; }.toggle.on i,.mini-toggle.on i { transform: translateX(16px); }
.account { display: flex; align-items: center; padding: 9px 5px 0; border-top: 1px solid rgba(255,255,255,.06); }
.account-avatar { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; margin-right: 10px; border-radius: 11px; background: #403b34; color: #e9c27d; font-size: 13px; font-weight: 700; }
.account > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }.account strong { font-size: 11px; }.account span { margin-top: 3px; color: #77736e; font-size: 9px; }.account button { border: 0; background: transparent; color: #77736e; }

.workspace { min-height: 100vh; margin-left: 238px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 32px; border-bottom: 1px solid rgba(79,64,43,.08); background: rgba(250,249,246,.91); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #a19b93; font-size: 12px; }.breadcrumb i { color: #d4cfc8; font-style: normal; }.breadcrumb strong { color: #514c46; font-weight: 650; }
.top-actions { display: flex; align-items: center; gap: 9px; }.peak-chip { display: flex; align-items: center; height: 31px; margin-right: 7px; padding: 0 12px; border: 1px solid #ecd3b6; border-radius: 16px; background: #fff7e9; color: #9a662c; font-size: 10px; font-weight: 650; }.peak-chip i { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #ef9b3c; box-shadow: 0 0 0 4px rgba(239,155,60,.12); }
.icon-button { position: relative; display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; border: 1px solid #e8e4dd; border-radius: 11px; background: #fff; color: #67615a; }
.icon-button > span { font-size: 16px; }.ok-dot { position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #31a06b; }.notification-button > i { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 2px solid #f8f7f4; border-radius: 50%; background: var(--red); color: #fff; font-size: 7px; font-style: normal; font-weight: 700; }
.top-date { display: flex; flex-direction: column; margin-left: 8px; padding-left: 16px; border-left: 1px solid #e4e0da; text-align: right; }.top-date strong { color: #514b44; font-size: 11px; }.top-date span { margin-top: 3px; color: #9d978f; font-size: 10px; }.mobile-brand { display: none; }

.page { display: none; max-width: 1580px; margin: 0 auto; padding: 30px 32px 55px; }.page.active { display: block; animation: fadeIn .23s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.page-heading.compact { align-items: center; }
.eyebrow { margin: 0 0 8px; color: #c37e38; font-size: 9px; font-weight: 800; letter-spacing: 2.2px; }
.page-heading h1 { margin: 0; font-size: 29px; font-weight: 800; letter-spacing: -.9px; }.page-heading p:last-child { margin: 7px 0 0; color: #918b83; font-size: 12px; }.page-heading p strong { color: var(--red); font-weight: 700; }
.heading-actions { display: flex; gap: 10px; }.button { height: 39px; padding: 0 17px; border-radius: 10px; font-size: 11px; font-weight: 700; }.button.secondary { border: 1px solid #ddd8d0; background: #fff; color: #59534c; }.button.primary { border: 0; background: linear-gradient(135deg,#df5942,#c33a2f); color: #fff; box-shadow: 0 8px 19px rgba(199,59,47,.18); }.button.primary span { margin-left: 6px; padding: 2px 6px; border-radius: 7px; background: rgba(255,255,255,.19); }
.panel { border: 1px solid rgba(85,66,42,.075); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; }.panel-head h2 { margin: 0; font-size: 15px; }.panel-head p { margin: 5px 0 0; color: #9c968e; font-size: 10px; }
.alert-bar { display: flex; align-items: center; min-height: 58px; margin-bottom: 18px; padding: 10px 15px; border: 1px solid #edd9bd; border-radius: 13px; background: linear-gradient(95deg,#fff9ed,#fffdf8); }
.alert-icon { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; margin-right: 11px; border-radius: 10px; background: #ef9c42; color: #fff; font-size: 14px; font-weight: 800; }.alert-bar > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; }.alert-bar strong { color: #734a22; font-size: 11px; }.alert-bar span { margin-top: 4px; color: #a47f55; font-size: 9px; }.alert-bar button { border: 0; background: transparent; color: #b06c2b; font-size: 10px; font-weight: 700; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 17px; }.kpi-card { position: relative; min-height: 139px; padding: 17px 18px; overflow: hidden; border: 1px solid rgba(85,66,42,.075); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }.kpi-card.revenue { background: linear-gradient(135deg,#292520,#3b2d24); color: #fff; }.kpi-head { display: flex; align-items: center; justify-content: space-between; }.kpi-head > span { color: #807a72; font-size: 10px; font-weight: 650; }.revenue .kpi-head > span { color: #bdb4ab; }.kpi-head i { padding: 3px 7px; border-radius: 7px; background: rgba(216,75,55,.13); color: var(--red); font-size: 8px; font-style: normal; }.kpi-head i.neutral { background: #f1efeb; color: #8a847c; }.kpi-head i.gold { background: #fff3d8; color: #b37a26; }.kpi-card > strong { position: relative; z-index: 2; display: block; margin-top: 16px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; letter-spacing: -.6px; }.kpi-card > strong small { color: inherit; font-family: inherit; font-size: 12px; font-weight: 500; }.kpi-foot { position: absolute; bottom: 17px; z-index: 2; color: #a29c94; font-size: 9px; }.kpi-foot.positive { color: #32a46e; font-weight: 700; }.kpi-foot span { margin-left: 4px; color: #9d978f; font-weight: 400; }.spark { position: absolute; right: 14px; bottom: 16px; display: flex; align-items: flex-end; gap: 3px; width: 88px; height: 55px; opacity: .8; }.spark i { flex: 1; border-radius: 3px 3px 1px 1px; background: linear-gradient(#e86953,#994238); }.progress { height: 5px; margin-top: 15px; overflow: hidden; border-radius: 3px; background: #eeeae4; }.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e05a43,#c93b30); }.member-orb { position: absolute; right: -20px; bottom: -29px; display: flex; align-items: flex-start; justify-content: center; width: 110px; height: 110px; padding-top: 27px; border: 1px solid #f0d59e; border-radius: 50%; background: #fff8e8; color: #d0a055; font-family: Georgia,serif; font-size: 10px; box-shadow: 0 0 0 14px #fffcf5; }.donut { position: absolute; right: 19px; bottom: 15px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#d94b35 0 73%,#eeeae4 73%); }.donut i { position: absolute; inset: 6px; border-radius: 50%; background: #fff; }.donut span { z-index: 1; font-family: Georgia,serif; font-size: 10px; font-weight: 700; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .75fr); gap: 16px; margin-bottom: 16px; }.sales-panel,.status-panel { min-height: 335px; padding: 18px; }.segmented { display: flex; padding: 3px; border-radius: 8px; background: #f2f0ec; }.segmented button { height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #918b83; font-size: 8px; }.segmented button.active { background: #fff; color: #4d4740; font-weight: 700; box-shadow: 0 3px 8px rgba(65,48,28,.07); }.chart-summary { display: flex; align-items: center; gap: 17px; margin: 18px 0 6px; color: #8e8880; font-size: 8px; }.chart-summary > div:first-child { display: flex; flex-direction: column; margin-right: auto; }.chart-summary span { color: #a19b93; font-size: 8px; }.chart-summary strong { margin-top: 3px; font-family: Georgia,serif; font-size: 18px; }.legend { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; }.revenue-legend { background: var(--red); }.order-legend { border: 2px solid #e5b268; background: #fff; }
.chart-area { position: relative; height: 220px; margin-top: 4px; padding: 8px 8px 23px 34px; }.y-axis { position: absolute; top: 3px; bottom: 22px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #b1aba3; font-size: 7px; }.grid-lines { position: absolute; top: 9px; right: 8px; bottom: 27px; left: 34px; display: flex; flex-direction: column; justify-content: space-between; }.grid-lines i { width: 100%; border-top: 1px dashed #efebe5; }.chart-area svg { position: relative; z-index: 2; width: 100%; height: 184px; overflow: visible; }.chart-area .area { fill: url(#area); }.chart-area .line { fill: none; stroke: #d94b35; stroke-linecap: round; stroke-width: 3; vector-effect: non-scaling-stroke; }.dots circle { fill: #fff; stroke: #d94b35; stroke-width: 2; vector-effect: non-scaling-stroke; }.x-axis { position: absolute; right: 0; bottom: 4px; left: 34px; display: flex; justify-content: space-between; color: #aaa49c; font-size: 7px; }.chart-tooltip { position: absolute; top: 39px; right: 19%; z-index: 4; display: flex; width: 87px; flex-direction: column; padding: 8px 9px; border-radius: 8px; background: #2c2824; color: #fff; box-shadow: 0 8px 20px rgba(40,34,29,.2); }.chart-tooltip::after { content: ''; position: absolute; bottom: -4px; left: 40px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); }.chart-tooltip span { color: #a9a198; font-size: 6px; }.chart-tooltip strong { margin-top: 3px; font-family: Georgia,serif; font-size: 11px; }.chart-tooltip small { margin-top: 2px; color: #f0b465; font-size: 6px; }
.text-button { border: 0; background: transparent; color: var(--red); font-size: 9px; }.status-donut { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 24px 0 20px; }.ring { position: relative; display: flex; align-items: center; justify-content: center; width: 125px; height: 125px; border-radius: 50%; background: conic-gradient(#d94b35 0 21%,#e99841 21% 50%,#3ba172 50% 93%,#bab5ae 93% 100%); }.ring::before { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }.ring span { z-index: 1; color: #8d877f; font-size: 8px; text-align: center; }.ring strong { display: block; color: #2f2a25; font-family: Georgia,serif; font-size: 24px; }.status-legend { width: 98px; }.status-legend > div { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; padding: 5px 0; color: #7e7870; font-size: 8px; }.status-legend i { width: 6px; height: 6px; border-radius: 2px; }.status-legend i.red { background: #d94b35; }.status-legend i.orange { background: #e99841; }.status-legend i.green { background: #3ba172; }.status-legend i.gray { background: #bab5ae; }.status-legend strong { color: #37322d; }.capacity { padding: 14px; border-radius: 11px; background: #f8f6f1; }.capacity > div:first-child { display: flex; justify-content: space-between; color: #6f6962; font-size: 9px; }.capacity strong { color: #d87731; }.capacity-bar { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: #e7e2da; }.capacity-bar i { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e8b558,#e36f3e); }.capacity p { margin: 7px 0 0; color: #a49e96; font-size: 7px; }

.live-orders { padding: 18px; }.pulse { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(216,75,55,.1); }.printer-state { display: flex; align-items: center; padding: 5px 8px; border-radius: 7px; background: #edf7f1; color: #2d8b60; font-size: 8px; }.printer-state i { width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #36a674; }.order-table { margin-top: 14px; }.table-row { display: grid; grid-template-columns: .72fr .95fr .9fr 1.55fr .85fr .65fr 1.05fr; align-items: center; min-height: 64px; padding: 6px 8px; border-top: 1px solid #eeeae4; gap: 10px; color: #716b64; font-size: 9px; }.table-row.table-head { min-height: 31px; border: 0; border-radius: 8px; background: #f7f5f1; color: #9b958d; font-size: 8px; }.table-row > div { display: flex; min-width: 0; flex-direction: column; }.table-row strong { color: #37322d; font-size: 9px; }.table-row small { margin-top: 4px; overflow: hidden; color: #a39d95; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }.table-row.urgent { margin: 0 -2px; padding-right: 10px; padding-left: 10px; border-left: 2px solid var(--red); background: #fffaf7; }.method { align-self: flex-start; padding: 3px 7px; border-radius: 5px; font-size: 7px; }.method.delivery { background: #edf6f0; color: #328b61; }.method.pickup { background: #fff3dd; color: #aa732d; }.remark { color: #d2543d !important; font-weight: 600; }.wait-time { color: var(--red) !important; }.row-actions { display: flex !important; flex-direction: row !important; gap: 6px; }.row-actions button { height: 29px; padding: 0 9px; border: 1px solid #ddd7cf; border-radius: 8px; background: #fff; color: #6b655e; font-size: 8px; }.row-actions button:first-child { border-color: var(--red); background: var(--red); color: #fff; }.mobile-order-list { display: none; }

/* Orders */
.order-filter { margin-bottom: 16px; padding: 14px 16px; }.status-tabs { display: flex; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.status-tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #746e67; font-size: 10px; }.status-tabs button.active { background: #2b2824; color: #fff; font-weight: 700; }.status-tabs span { margin-left: 5px; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.13); font-size: 8px; }.status-tabs .red-count { background: #fff0eb; color: var(--red); }.filter-row { display: flex; align-items: center; gap: 8px; padding-top: 13px; }.search-box { display: flex; align-items: center; height: 33px; min-width: 220px; padding: 0 11px; border: 1px solid #e2ded7; border-radius: 9px; background: #faf9f7; color: #928c84; font-size: 13px; }.search-box input { width: 100%; margin-left: 7px; border: 0; outline: 0; background: transparent; color: #4e4841; font-size: 9px; }.filter-row select,.filter-button { height: 33px; padding: 0 10px; border: 1px solid #e2ded7; border-radius: 9px; outline: 0; background: #fff; color: #716b63; font-size: 9px; }.filter-button { margin-left: auto; }.order-board { display: grid; grid-template-columns: repeat(4,minmax(225px,1fr)); gap: 12px; overflow-x: auto; }.board-column { min-width: 225px; padding: 12px; border-radius: 16px; background: #ece9e4; }.board-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 11px; }.board-head > div { display: flex; align-items: center; }.board-head i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--red); }.board-column.cooking .board-head i { background: #e99b41; }.board-column.delivering .board-head i { background: #36a16e; }.board-column.aftersale .board-head i { background: #958f87; }.board-head strong { font-size: 11px; }.board-head span { margin-left: 7px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.65); color: #6f6961; font-size: 8px; }.board-head small { color: #9b958e; font-size: 8px; }.board-card { position: relative; margin-bottom: 10px; padding: 13px; border: 1px solid rgba(67,50,29,.07); border-radius: 13px; background: #fff; box-shadow: 0 6px 16px rgba(62,48,31,.055); }.board-card.urgent { border-left: 3px solid var(--red); }.board-order-head,.board-user,.board-goods,.board-meta,.board-actions { display: flex; align-items: center; justify-content: space-between; }.board-order-head strong { font-size: 13px; }.board-order-head span { color: var(--red); font-size: 8px; font-weight: 700; }.board-order-head span.cooking-time { color: #c77a29; }.board-order-head span.delivery-time { color: #2f9465; }.board-user { margin-top: 9px; color: #777169; font-size: 8px; }.board-user i { padding: 2px 5px; border-radius: 4px; background: #fff4da; color: #a87028; font-size: 6px; font-style: normal; }.board-user i.new-user { background: #fff0eb; color: var(--red); }.board-goods { margin-top: 12px; padding: 10px 0; border-top: 1px solid #efebe5; border-bottom: 1px solid #efebe5; font-size: 8px; }.board-goods strong { overflow: hidden; max-width: 110px; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }.board-goods span { color: #989188; }.board-goods b { font-family: Georgia,serif; font-size: 11px; }.order-remark { margin-top: 9px; padding: 7px; border-radius: 7px; background: #fff5e7; color: #8b552b; font-size: 8px; font-weight: 600; }.order-remark i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 5px; background: var(--red); color: #fff; font-size: 7px; font-style: normal; }.board-meta { margin-top: 9px; color: #9b958d; font-size: 7px; }.board-actions { gap: 6px; margin-top: 12px; }.board-actions button { flex: 1; height: 30px; border: 1px solid #ddd8d0; border-radius: 8px; background: #fff; color: #706a62; font-size: 8px; }.board-actions button:last-child { border-color: var(--red); background: var(--red); color: #fff; font-weight: 700; }.board-actions button.stage-action { border-color: #e99b41; background: #e99b41; }.board-actions button.complete-action { border-color: #329a69; background: #329a69; }.rider-line { display: flex; align-items: center; margin-top: 10px; padding: 8px; border-radius: 8px; background: #f4f8f5; font-size: 8px; }.tiny-avatar { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 8px; background: #2d2925; color: #f2c578; font-size: 8px; font-weight: 700; }.rider-line span { flex: 1; }.rider-line button { border: 0; background: transparent; color: #2f9465; font-size: 7px; }.refund-amount { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 0 8px; border-top: 1px solid var(--line); }.refund-amount span { font-size: 8px; }.refund-amount strong { color: var(--red); font-family: Georgia,serif; font-size: 17px; }.refund-card > p { margin: 3px 0 10px; color: #756f67; font-size: 8px; }.refund-route { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 7px; background: #f7f5f1; color: #969087; font-size: 7px; }

/* Menu */
.menu-layout { display: grid; grid-template-columns: 190px 1fr; gap: 15px; }.category-panel { padding: 15px 10px; }.category-panel .panel-head { padding: 1px 6px 12px; }.category-panel .panel-head button { border: 0; background: transparent; color: var(--red); font-size: 18px; }.category-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #6d675f; font-size: 10px; text-align: left; }.category-row.active { background: #fff0ea; color: var(--red); font-weight: 700; }.category-row i { color: #a8a198; font-size: 8px; font-style: normal; }.category-row i.danger { color: var(--red); }.menu-panel { padding: 15px; }.menu-toolbar,.menu-toolbar > div { display: flex; align-items: center; justify-content: space-between; }.menu-toolbar button,.data-toolbar button { height: 32px; margin-left: 6px; padding: 0 10px; border: 1px solid #e0dbd3; border-radius: 8px; background: #fff; color: #756f67; font-size: 8px; }.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }.product-item { position: relative; display: flex; align-items: center; min-height: 113px; padding: 10px; border: 1px solid #ece8e2; border-radius: 13px; }.product-photo { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 91px; height: 91px; border-radius: 12px; font-size: 38px; }.product-photo.red { background: linear-gradient(145deg,#ffddc9,#f3a080); }.product-photo.green { background: linear-gradient(145deg,#e2efd4,#a7ca8c); }.product-photo.orange { background: linear-gradient(145deg,#ffe4b5,#efb064); }.product-photo.gold { background: linear-gradient(145deg,#fff0ca,#e8bd6c); }.product-photo.dark { background: linear-gradient(145deg,#ded4c9,#a89783); }.product-photo > span { position: absolute; top: 0; left: 0; padding: 3px 6px; border-radius: 12px 0 7px 0; background: var(--red); color: #fff; font-size: 6px; font-weight: 700; }.product-photo em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: rgba(37,33,29,.55); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }.product-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; margin-left: 12px; }.product-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; }.product-copy strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }.product-copy i { flex: none; padding: 2px 5px; border-radius: 5px; background: #f1efeb; color: #888178; font-size: 6px; font-style: normal; }.product-copy i.on-sale { background: #eaf6ef; color: #2f9465; }.product-copy i.required-status { background: #fff0eb; color: var(--red); }.product-copy p { margin: 8px 0 15px; color: #9b958d; font-size: 8px; }.product-copy b { color: var(--red); font-family: Georgia,serif; font-size: 13px; }.product-copy span { color: #9b958d; font-size: 7px; }.product-copy span.low-stock { color: #c4762c; }.product-item > button { align-self: flex-start; padding: 3px; border: 0; background: transparent; color: #9b958d; font-weight: 700; }.product-item.sold-out { opacity: .75; }

/* Members / data tables */
.member-kpis { margin-top: 7px; }.data-panel { padding: 15px; }.data-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.member-table { width: 100%; overflow-x: auto; }.member-row { display: grid; grid-template-columns: 1.35fr 1fr .9fr .9fr .65fr .9fr .8fr .5fr; align-items: center; min-width: 850px; min-height: 53px; padding: 6px 10px; border-top: 1px solid var(--line); color: #746e66; font-size: 8px; }.member-row.header { min-height: 34px; border: 0; border-radius: 8px; background: #f7f5f1; color: #9d978f; }.member-row > span:first-child { display: flex; align-items: center; color: #3c3732; font-weight: 650; }.member-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 29px; height: 29px; margin-right: 8px; border-radius: 9px; background: #df5b45; color: #fff; font-size: 9px; font-style: normal; }.member-avatar.gold { background: #d4a24d; }.member-avatar.gray { background: #777068; }.member-row strong { color: #453f39; }.status-normal,.status-risk,.status-pending { justify-self: start; padding: 3px 7px; border-radius: 6px; background: #eaf6ef; color: #2e9464; font-size: 7px; font-style: normal; }.status-risk { background: #fff0eb; color: var(--red); }.status-pending { background: #fff4de; color: #af732a; }.member-row button { border: 0; background: transparent; color: var(--red); font-size: 8px; }

/* Campaigns */
.campaign-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.campaign-card { position: relative; min-height: 250px; padding: 22px; overflow: hidden; border: 1px solid rgba(88,67,40,.08); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.campaign-card.dark { background: linear-gradient(135deg,#292621,#493529); color: #fff; }.campaign-card.peach { background: linear-gradient(135deg,#fff8f3,#ffebe2); }.campaign-card.yellow { background: linear-gradient(135deg,#fffaf0,#ffefd0); }.campaign-card.pale { background: #fff; }.campaign-icon { position: absolute; right: -15px; bottom: -27px; display: flex; align-items: flex-start; justify-content: center; width: 135px; height: 135px; padding-top: 32px; border: 1px solid rgba(209,130,61,.18); border-radius: 50%; color: rgba(194,117,42,.26); font-family: Georgia,serif; font-size: 32px; font-weight: 800; box-shadow: 0 0 0 18px rgba(219,151,83,.035); }.campaign-top { display: flex; align-items: center; justify-content: space-between; color: #9b948c; font-size: 9px; font-weight: 700; }.campaign-card.dark .campaign-top { color: #b5ada4; }.campaign-card h2 { margin: 24px 0 7px; font-size: 20px; }.campaign-card p { color: #928b83; font-size: 10px; }.campaign-card.dark p { color: #aaa097; }.campaign-data { display: flex; gap: 35px; margin-top: 25px; }.campaign-data > div { display: flex; flex-direction: column; }.campaign-data span { color: #9b958d; font-size: 8px; }.campaign-data strong { margin-top: 5px; font-family: Georgia,serif; font-size: 16px; }.campaign-action { position: absolute; bottom: 20px; left: 22px; border: 0; background: transparent; color: var(--red); font-size: 9px; font-weight: 700; }.campaign-card.dark .campaign-action { color: #e9bd6f; }

/* Generic pages */
.delivery-layout { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,.65fr); gap: 15px; }.map-panel { min-height: 550px; padding: 12px; }.fake-map { position: relative; height: 100%; min-height: 526px; overflow: hidden; border-radius: 13px; background: #e8e5dd; background-image: linear-gradient(35deg,transparent 47%,rgba(255,255,255,.8) 48%,rgba(255,255,255,.8) 52%,transparent 53%), linear-gradient(145deg,transparent 47%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.7) 52%,transparent 53%); background-size: 210px 180px,240px 200px; }.map-road { position: absolute; height: 16px; background: rgba(255,255,255,.9); transform-origin: left; }.road-a { top: 30%; left: -5%; width: 115%; transform: rotate(12deg); }.road-b { top: 80%; left: 8%; width: 100%; transform: rotate(-42deg); }.road-c { top: 5%; left: 52%; width: 90%; transform: rotate(83deg); }.delivery-zone { position: absolute; top: 50%; left: 48%; border: 2px solid rgba(216,75,55,.5); border-radius: 50%; background: rgba(216,75,55,.07); transform: translate(-50%,-50%); }.zone-a { width: 250px; height: 250px; }.zone-b { width: 440px; height: 440px; border-color: rgba(213,151,53,.42); background: rgba(226,176,82,.045); }.delivery-zone span { position: absolute; top: 11px; left: 50%; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.9); color: #9e6b2e; font-size: 8px; transform: translateX(-50%); }.store-pin-map { position: absolute; top: 50%; left: 48%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 5px solid #fff; border-radius: 17px; background: var(--red); color: #fff2ca; font-size: 17px; font-weight: 800; box-shadow: 0 8px 22px rgba(136,44,33,.28); transform: translate(-50%,-50%); }.rider-pin { position: absolute; z-index: 4; font-size: 25px; filter: drop-shadow(0 5px 7px rgba(62,48,30,.22)); }.rider-pin span { display: block; padding: 3px 6px; border-radius: 6px; background: #282521; color: #fff; font-size: 7px; text-align: center; }.rider-pin.r1 { top: 29%; left: 35%; }.rider-pin.r2 { right: 23%; bottom: 20%; }.map-tools { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; overflow: hidden; border-radius: 9px; box-shadow: 0 4px 14px rgba(55,45,31,.12); }.map-tools button { width: 32px; height: 32px; border: 0; border-bottom: 1px solid #eeeae4; background: #fff; color: #5c564e; font-size: 16px; }.map-legend { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 14px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.9); color: #716b64; font-size: 8px; box-shadow: 0 4px 14px rgba(55,45,31,.1); }.map-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; }.map-legend i.zone1 { background: var(--red); }.map-legend i.zone2 { background: #dda547; }.map-legend i.peak { background: #2d2824; }.delivery-settings { padding: 20px; }.delivery-settings h2 { margin: 0 0 15px; font-size: 17px; }.rule-item { display: flex; align-items: center; justify-content: space-between; min-height: 69px; border-bottom: 1px solid var(--line); }.rule-item > div { display: flex; flex-direction: column; }.rule-item strong { font-size: 10px; }.rule-item span { margin-top: 5px; color: #99928a; font-size: 8px; }.rule-item b { font-family: Georgia,serif; font-size: 13px; }.delivery-settings h3 { margin: 22px 0 8px; font-size: 12px; }.rider-status { display: flex; align-items: center; padding: 11px 0; }.rider-status > i,.staff-row > i { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; margin-right: 9px; border-radius: 11px; background: #2c2925; color: #efc67c; font-size: 10px; font-style: normal; }.rider-status > div { display: flex; flex: 1; flex-direction: column; }.rider-status strong { font-size: 9px; }.rider-status span { margin-top: 4px; color: #99938b; font-size: 7px; }.rider-status button { border: 0; background: transparent; color: var(--green); font-size: 8px; }

.chat-console { display: grid; grid-template-columns: 280px 1fr; min-height: 610px; overflow: hidden; }.conversation-list { padding: 13px; border-right: 1px solid var(--line); }.conversation-list .search-box { min-width: 0; margin-bottom: 10px; }.conversation { position: relative; display: flex; align-items: center; width: 100%; min-height: 67px; padding: 9px; border: 0; border-radius: 11px; background: transparent; text-align: left; }.conversation.active { background: #fff1eb; }.conversation > div { display: flex; flex: 1; min-width: 0; flex-direction: column; }.conversation strong { font-size: 9px; }.conversation span { margin-top: 5px; overflow: hidden; color: #979188; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }.conversation time { align-self: flex-start; color: #aaa49d; font-size: 6px; }.conversation em { position: absolute; right: 10px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--red); color: #fff; font-size: 6px; font-style: normal; }.conversation-main { position: relative; display: flex; flex-direction: column; background: #f7f5f1; }.chat-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 18px; border-bottom: 1px solid var(--line); background: #fff; }.chat-head > div { display: flex; flex-direction: column; }.chat-head strong { font-size: 11px; }.chat-head span { margin-top: 4px; color: #a07943; font-size: 8px; }.chat-head button { border: 0; background: transparent; color: var(--red); font-size: 8px; }.chat-messages { flex: 1; padding: 22px; overflow: auto; }.chat-time { margin-bottom: 17px; color: #aaa39b; font-size: 7px; text-align: center; }.chat-bubble { position: relative; clear: both; max-width: 55%; margin-bottom: 18px; padding: 11px 13px; border-radius: 12px 12px 12px 3px; background: #fff; color: #514b44; font-size: 9px; line-height: 1.5; box-shadow: 0 5px 15px rgba(60,47,30,.05); }.chat-bubble.merchant { float: right; border-radius: 12px 12px 3px 12px; background: var(--red); color: #fff; }.chat-bubble time { position: absolute; bottom: -12px; left: 2px; color: #aaa39b; font-size: 6px; }.chat-bubble.merchant time { right: 2px; left: auto; }.chat-compose { padding: 12px 15px; border-top: 1px solid var(--line); background: #fff; }.quick-tags { display: flex; gap: 6px; }.quick-tags button,.chat-compose > div:last-child button:first-child { height: 25px; padding: 0 8px; border: 1px solid #ded9d2; border-radius: 7px; background: #fff; color: #7b756d; font-size: 7px; }.chat-compose textarea { width: 100%; height: 67px; padding: 10px 0; resize: none; border: 0; outline: 0; color: #504a43; font-size: 9px; }.chat-compose > div:last-child { display: flex; justify-content: space-between; }.chat-compose .button.primary { height: 29px; }

.report-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 15px; }.report-cards article { min-height: 130px; padding: 20px; }.report-cards span { color: #8d877f; font-size: 10px; }.report-cards strong { display: block; margin-top: 16px; font-family: Georgia,serif; font-size: 23px; }.report-cards p { margin: 10px 0 0; color: #a29c94; font-size: 8px; }.report-total { background: linear-gradient(135deg,#2c2823,#49372c); color: #fff; }.report-total span,.report-total p { color: #b9afa5; }.report-net { border-color: #e6c793; background: #fff9ed; color: #6f4924; }.report-table { margin-top: 15px; }.member-row.report { grid-template-columns: 1.3fr .7fr .8fr 1fr .8fr .7fr .8fr .7fr; }.negative-money { color: var(--red) !important; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.settings-panel { padding: 20px; }.settings-panel h2 { margin: 0 0 7px; font-size: 15px; }.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 70px; border-bottom: 1px solid var(--line); }.setting-row > div { display: flex; flex-direction: column; }.setting-row strong,.printer-row strong,.staff-row strong { font-size: 10px; }.setting-row span,.printer-row span,.staff-row span { margin-top: 5px; color: #9c968e; font-size: 8px; }.setting-row b { color: #625b54; font-size: 10px; }.printer-row,.staff-row { display: flex; align-items: center; min-height: 65px; border-bottom: 1px solid var(--line); }.printer-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 11px; background: #edf7f1; color: #2f9565; font-style: normal; }.printer-icon.kitchen { background: #fff2dd; color: #b6782c; }.printer-row > div,.staff-row > div { display: flex; flex: 1; flex-direction: column; }.printer-row button,.staff-row button { border: 0; background: transparent; color: var(--red); font-size: 8px; }.add-device { width: 100%; height: 34px; margin-top: 14px; border: 1px dashed #d7d1c8; border-radius: 9px; background: #faf9f7; color: #89827a; font-size: 8px; }.staff-row > i.gold { background: #d5a04c; color: #fff; }

.mobile-nav,.toast,.new-order-pop { display: none; }
.api-state { display: flex; align-items: center; height: 31px; padding: 0 11px; border: 1px solid #e5e0d9; border-radius: 16px; background: #fff; color: #8a847c; font-size: 9px; }
.api-state i { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #d99a3d; }
.api-state.online i { background: #319665; }.api-state.error i { background: var(--red); }
.login-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(31,29,26,.86); backdrop-filter: blur(18px); }
.login-overlay.hidden { display: none; }.login-card { width: min(420px,100%); padding: 34px; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }.login-card .brand-mark { margin-bottom: 22px; }.login-card h1 { margin: 0; font-size: 26px; }.login-description { margin: 8px 0 24px; color: var(--muted); font-size: 12px; }.login-card label { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; color: #6c665f; font-size: 10px; font-weight: 700; }.login-card input { width: 100%; height: 43px; padding: 0 13px; border: 1px solid #ded9d1; border-radius: 10px; outline: 0; color: var(--ink); }.login-card input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(216,75,55,.1); }.login-card > .button { width: 100%; margin-top: 16px; }.login-card > small { display: block; margin-top: 12px; color: #aaa39b; font-size: 9px; text-align: center; }.login-error { min-height: 16px; margin: 10px 0 0; color: var(--red); font-size: 10px; }
.empty-api { padding: 30px 12px; color: #9c968e; font-size: 10px; text-align: center; }
.member-actions { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; }
.member-actions button { padding: 0; white-space: nowrap; }

@media (max-width: 1150px) {
  .sidebar { width: 210px; }.workspace { margin-left: 210px; }.dashboard-grid { grid-template-columns: 1fr; }.status-panel { min-height: auto; }.status-donut { justify-content: flex-start; padding-left: 12%; }.capacity { position: absolute; right: 20px; bottom: 20px; width: 43%; }.status-panel { position: relative; }.order-board { grid-template-columns: repeat(4,245px); }.product-grid { grid-template-columns: 1fr; }.kpi-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: 72px; }.sidebar { display: none; }.workspace { margin-left: 0; }.topbar { height: 61px; padding: 0 16px; }.mobile-brand { display: flex; align-items: center; gap: 9px; }.mobile-brand .brand-mark { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }.mobile-brand strong { font-size: 15px; }.breadcrumb,.peak-chip,.icon-button:first-of-type,.top-date { display: none; }.page { padding: 20px 14px 35px; }.page-heading { align-items: flex-start; margin-bottom: 18px; }.page-heading h1 { font-size: 24px; }.page-heading p:last-child { max-width: 230px; line-height: 1.5; }.page-heading .heading-actions .secondary { display: none; }.button { height: 36px; padding: 0 13px; }
  .alert-bar { align-items: flex-start; }.alert-bar button { display: none; }.kpi-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }.kpi-card { min-height: 126px; padding: 14px; }.kpi-card > strong { margin-top: 14px; font-size: 22px; }.spark,.donut { opacity: .55; }.dashboard-grid { display: block; }.sales-panel { min-height: 315px; margin-bottom: 10px; padding: 14px; }.chart-area { height: 195px; padding-left: 27px; }.chart-area svg { height: 160px; }.grid-lines { left: 27px; }.x-axis { left: 27px; }.chart-tooltip { display: none; }.status-panel { min-height: 320px; padding: 15px; }.status-donut { justify-content: center; padding: 19px 0; }.capacity { position: static; width: auto; }.live-orders { padding: 14px; }.desktop-table { display: none; }.mobile-order-list { display: block; margin-top: 12px; }.mobile-order-card { padding: 13px 0; border-top: 1px solid var(--line); }.mobile-order-card > div { display: flex; align-items: center; justify-content: space-between; }.mobile-order-card strong { font-size: 12px; }.mobile-order-card .wait { color: var(--red); font-size: 9px; }.mobile-order-card p { margin: 10px 0 7px; font-size: 10px; }.mobile-order-card small { color: #9a948c; font-size: 8px; }.mobile-order-card button { height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font-size: 8px; }
  .mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; height: calc(65px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom); border-top: 1px solid #e9e5de; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); }.mobile-nav button { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: #99938b; font-size: 9px; }.mobile-nav button > span { font-size: 19px; font-weight: 700; }.mobile-nav button.active { color: var(--red); font-weight: 700; }.mobile-nav button i { position: absolute; top: 1px; left: 55%; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--red); color: #fff; font-size: 6px; font-style: normal; }
  .order-filter { padding: 11px; overflow: hidden; }.status-tabs { overflow-x: auto; white-space: nowrap; }.status-tabs button { flex: none; }.filter-row { flex-wrap: wrap; }.search-box { min-width: 100%; }.filter-row select { flex: 1; min-width: 105px; }.filter-button { display: none; }.order-board { grid-template-columns: repeat(4,86vw); padding-bottom: 7px; scroll-snap-type: x mandatory; }.board-column { scroll-snap-align: start; }.board-card { padding: 14px; }.board-goods strong { max-width: 160px; }
  .menu-layout { display: block; }.category-panel { display: flex; margin-bottom: 10px; padding: 8px; overflow-x: auto; }.category-panel .panel-head { display: none; }.category-row { flex: none; width: auto; height: 34px; }.category-row i { margin-left: 7px; }.menu-panel { padding: 11px; }.menu-toolbar > div:last-child { display: none; }.product-grid { grid-template-columns: 1fr; }.product-photo { width: 83px; height: 83px; }.member-kpis { grid-template-columns: repeat(2,1fr); }.data-toolbar > div:last-child { display: none; }.member-row { min-width: 760px; }.campaign-grid { grid-template-columns: 1fr; }.campaign-card { min-height: 225px; }.delivery-layout { display: block; }.map-panel { min-height: 430px; margin-bottom: 11px; }.fake-map { min-height: 405px; }.zone-b { width: 360px; height: 360px; }.delivery-settings { padding: 16px; }.chat-console { grid-template-columns: 1fr; min-height: 640px; }.conversation-list { display: none; }.chat-bubble { max-width: 82%; }.report-cards { grid-template-columns: repeat(2,1fr); gap: 9px; }.report-cards article { min-height: 110px; padding: 14px; }.report-cards strong { font-size: 18px; }.settings-grid { grid-template-columns: 1fr; }
  .toast { position: fixed; top: 72px; left: 50%; z-index: 90; display: flex; align-items: center; min-width: 230px; padding: 12px 15px; border-radius: 11px; background: #2b2824; color: #fff; box-shadow: 0 14px 35px rgba(35,30,25,.25); opacity: 0; pointer-events: none; transform: translate(-50%,-12px); transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast span { color: #5fca92; font-size: 15px; }.toast p { margin: 0 0 0 9px; font-size: 10px; }
  .new-order-pop { position: fixed; top: 73px; right: 12px; left: 12px; z-index: 80; display: flex; align-items: center; padding: 13px; border: 1px solid rgba(229,182,99,.28); border-radius: 14px; background: #2b2723; color: #fff; box-shadow: 0 16px 35px rgba(37,31,26,.28); opacity: 0; pointer-events: none; transform: translateY(-20px); transition: .3s; }.new-order-pop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }.pop-close { position: absolute; top: 3px; right: 5px; border: 0; background: transparent; color: #847d75; }.pop-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 10px; border-radius: 12px; background: var(--red); color: #fff0ca; font-size: 12px; font-weight: 800; }.new-order-pop > div:nth-of-type(2) { display: flex; flex: 1; flex-direction: column; }.new-order-pop strong { font-size: 10px; }.new-order-pop span { margin-top: 5px; color: #aaa198; font-size: 8px; }.pop-accept { height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: #efc26f; color: #3d2d1b; font-size: 8px; font-weight: 800; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }.kpi-card { min-height: 118px; }.report-cards { grid-template-columns: 1fr; }
}