@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fraunces:opsz,wght@9..144,500&display=swap");
:root {--bg:#f4f8f2; --ink:#1b2e22; --muted:#5f7a68; --olive:#2f8f5b; --olive-2:#237048; --moss:#e3f0e6; --fern:#1e6b44; --danger:#b8432a; --row:rgba(31,74,50,0.06); --panel:#ffffff; font-family:Inter, system-ui, sans-serif;}
* {box-sizing:border-box;}
html, body {margin:0; min-height:100%; background:radial-gradient(1200px 600px at 80% -10%,#dcefe2 0%,transparent 60%), var(--bg); color:var(--ink); font-size:13px; background:var(--bg);}
body {display:flex; flex-direction:column; min-height:100vh;}
body > * {width:100%; position:relative; z-index:1;}
body > #app-fab {position:static; z-index:auto;}
body::before {content:""; position:fixed; inset:0; background:url("../assets/logo_.png") center / min(60vmin,520px) no-repeat; opacity:0.05; pointer-events:none; z-index:0; opacity:0.18; animation:watermark-in 1.2s ease 0.2s both;}
body::after {content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(1200px 600px at 80% -10%, #dcefe2 0%, transparent 60%); animation:glow-in 1.2s ease 0.1s both;}
@keyframes watermark-in {from {opacity:0} to {opacity:0.18}}
@keyframes glow-in {from {opacity:0} to {opacity:1}}
a {color:inherit; text-decoration:none;}
button, input, select {font:inherit; color:inherit;}
h1 {font-family:Fraunces, serif; font-weight:500; font-size:28px; margin:2px 0 0;}
h2 {font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px;}
.eyebrow {margin:0; color:var(--fern); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;}
.muted {color:var(--muted);}
.num {text-align:right;}
.empty {text-align:center; color:var(--muted); padding:40px 0;}
.proof-list {list-style:none; margin:0; padding:0;}
.proof-item {display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--row);}
.proof-item a {flex:1; font-weight:600; color:var(--fern); text-decoration:underline;}
.loading {color:var(--muted); padding:40px 0;}
.page {max-width:1180px; margin:0 auto; padding:28px 24px 110px;}
.page-head {display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.section {margin-bottom:40px;}
.split {display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.table-wrap {overflow-x:auto; margin-top:8px;}
#page {flex:1 0 auto;}
#app-footer {position:sticky; bottom:0; z-index:5; text-align:center; color:var(--muted); font-size:12px; padding:10px 0; background:var(--bg); border-top:1px solid var(--row); animation-delay:0.90s;}
.topnav {display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:16px 24px; animation-delay:0s;}
.topnav ul {display:flex; gap:4px; list-style:none; margin:0 0 0 auto; padding:0;}
.topnav a {padding:7px 12px; border-radius:999px; color:var(--muted); transition:0.2s;}
.topnav a:hover {color:var(--ink);}
.topnav a.active {background:var(--moss); color:var(--ink);}
.topnav .nav-icon {display:none; width:20px; height:20px;}
.topnav a.has-dot {position:relative;}
.topnav a .nav-bell {position:relative; display:inline-flex; align-items:center; margin-left:6px; color:var(--muted); vertical-align:middle;}
.topnav a.has-dot .nav-bell {color:var(--olive);}
.topnav a .nav-bell::after {content:""; display:none; position:absolute; top:-2px; right:-3px; width:6px; height:6px; border-radius:50% !important; background:var(--olive); box-shadow:0 0 0 2px var(--bg);}
.topnav a.has-dot .nav-bell::after {display:block;}
.brand {font-family:Fraunces, serif; font-size:16px; letter-spacing:0.02em;}
.brand .leaf {color:var(--fern);}
.toolbar {display:flex; gap:6px; align-items:center; align-items:center;}
.icon-btn {background:none; border:0; color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px;}
.icon-btn:hover {background:var(--row); color:var(--ink);}
.date {background:var(--row); border:0; border-radius:8px; padding:7px 10px; color-scheme:dark; height:32px; box-sizing:border-box;}
.day-num {width:56px; height:32px; box-sizing:border-box; background:var(--row); border:0; border-radius:8px; padding:0 8px; color:var(--ink); text-align:center; font:inherit;}
.day-pos {display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; opacity:.7; white-space:nowrap; align-self:center; padding:0 4px;}
.btn {border:0; border-radius:999px; padding:8px 16px; cursor:pointer; background:var(--row); color:var(--ink); transition:0.2s;}
.btn.primary {background:var(--olive); color:#f3f6e8;}
.btn.primary:hover {background:var(--olive-2);}
.btn.ghost {background:transparent; color:var(--muted);}
.btn.danger {background:var(--danger); color:#fff;}
.btn:disabled {opacity:0.5; cursor:default;}
.seg {display:flex; background:var(--row); border-radius:999px; padding:3px;}
.seg button {background:none; border:0; padding:6px 12px; border-radius:999px; color:var(--muted); cursor:pointer;}
.seg button.on {background:var(--moss); color:var(--ink);}
.pill {font-size:11px; padding:3px 9px; border-radius:999px; border:0; background:var(--row); color:var(--muted); cursor:pointer;}
.pill.on {background:rgba(47,143,91,0.16); color:var(--fern);}
.row-act {background:none; border:0; color:var(--muted); cursor:pointer; padding:3px 6px; border-radius:6px; font-size:12px;}
.row-act:hover {color:var(--ink); background:var(--row);}
.row-act.del:hover {color:var(--danger);}
.actions {text-align:right; white-space:nowrap;}
.kpis {display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:28px 24px; margin-bottom:36px;}
.kpi .label {font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
.kpi .value {font-family:Fraunces, serif; font-size:24px; margin:6px 0 2px; font-variant-numeric:tabular-nums;}
.kpi .sub {color:var(--muted); font-size:12px;}
.kpi.hero .value {color:var(--fern);}
.stats-inline {color:var(--muted); margin:-8px 0 16px; font-size:12.5px;}
.stats-inline b {color:var(--ink); font-weight:500;}
.chart {display:flex; align-items:flex-end; gap:8px; height:200px;}
.col {flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px;}
.col i {width:100%; max-width:26px; min-height:2px; border-radius:6px 6px 2px 2px; background:linear-gradient(var(--olive-2), var(--moss));}
.col span {font-size:11px; color:var(--muted);}
.bar-list {list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px;}
.bar-meta {display:flex; justify-content:space-between; margin-bottom:5px; font-size:12.5px;}
.bar {height:4px; background:var(--row); border-radius:4px; overflow:hidden;}
.bar i {display:block; height:100%; background:var(--olive-2); border-radius:4px;}
.tbl {width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums;}
.tbl th {text-align:left; font-weight:500; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:6px 10px;}
.tbl td {padding:7px 10px; transition:background 0.15s;}
.tbl tbody tr:nth-child(even) td {background:rgba(123,47,3,0.035);}
.tbl tbody tr:hover td {background:var(--olive); color:var(--bg);}
.tbl tbody tr:hover td .muted, .tbl tbody tr:hover td .m-account, .tbl tbody tr:hover td .row-act {color:var(--bg);}
.tbl td:first-child {border-radius:0 !important;}
.tbl td:last-child {border-radius:0 !important;}
.tbl td, .tbl th {border-radius:0 !important;}
.form {display:grid; gap:12px;}
.form label {display:grid; gap:5px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.form input, .form select {background:var(--row); border:1px solid transparent; border-radius:10px; padding:9px 11px; font-size:13px; color:var(--ink); color-scheme:dark; background-color:var(--row); text-transform:none; letter-spacing:0;}
.form select option {background:var(--panel); color:var(--ink);}
.form select option:checked, .form select option:hover {background:var(--moss); color:var(--ink);}
.form input:focus, .form select:focus {outline:none; border-color:var(--olive-2);}
.dd {position:relative; text-transform:none; letter-spacing:0;}
.dd-btn {width:100%; text-align:left; background:var(--row); border:1px solid transparent; border-radius:10px; padding:9px 11px; font-size:13px; color:var(--ink); cursor:pointer;}
.dd-btn:focus-visible {outline:none; border-color:var(--olive-2);}
.dd-list {position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; margin:0; padding:6px; list-style:none; background:var(--panel); border-radius:10px; box-shadow:0 14px 34px rgba(31,74,50,0.2); max-height:240px; overflow-y:auto; overscroll-behavior:contain;}
.dd-list[hidden] {display:none;}
.dd-item {padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--ink); font-size:13px;}
.dd-item:hover {background:var(--moss);}
.dd-item.is-active {color:var(--fern); font-weight:600;}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-foot {display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
.form label.check {display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--ink);}
.modal-backdrop, .dlg-backdrop {position:fixed; inset:0; z-index:50; padding:16px; display:grid; place-items:center; background:rgba(8,11,6,0.6); backdrop-filter:blur(6px); opacity:0; transition:opacity 0.2s;}
.is-in {opacity:1;}
.modal {width:min(440px,100%); background:var(--panel); border-radius:18px; padding:20px 22px; transform:translateY(8px); transition:transform 0.2s;}
.is-in .modal, .is-in .dlg {transform:none;}
.modal-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.modal-head h3 {margin:0; font-family:Fraunces, serif; font-weight:500; font-size:20px;}
.dlg {width:min(420px,100%); background:var(--panel); border-radius:18px; padding:26px; transform:translateY(8px); transition:transform 0.2s;}
.dlg h3 {margin:0 0 8px; font-family:Fraunces, serif; font-weight:500; font-size:22px;}
.dlg p {margin:0 0 22px; color:var(--ink); font-size:15px; line-height:1.5;}
.dlg-actions {display:flex; justify-content:flex-end; gap:8px;}
.dlg-backdrop {z-index:70;}
.toast-host {position:fixed; left:50%; bottom:96px; transform:translateX(-50%); display:grid; gap:8px; z-index:60; pointer-events:none; justify-items:center;}
.toast {background:#1b2e22; padding:10px 16px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,0.2); opacity:0; transform:translateY(10px); transition:0.3s; white-space:nowrap; width:max-content; display:flex; align-items:center; gap:14px; pointer-events:auto; color:#f4f8f2;}
.toast.is-in {opacity:1; transform:none;}
.toast--ok {color:var(--fern);}
.toast--error {color:#f0b9a6;}
.fab-wrap {position:fixed; right:24px; bottom:24px; z-index:40; display:grid; justify-items:end; gap:10px;}
.fab {width:54px; height:54px; border-radius:50%; border:0; cursor:pointer; background:var(--olive); color:#f3f6e8; font-size:28px; box-shadow:0 10px 24px rgba(0,0,0,0.4); transition:transform 0.2s;}
.fab:hover {transform:rotate(45deg) scale(1.05);}
.fab-menu {display:grid; gap:4px; padding:6px; border-radius:14px; background:var(--panel); box-shadow:0 10px 30px rgba(0,0,0,0.4);}
.fab-menu[hidden] {display:none;}
.fab-menu button {background:none; border:0; color:var(--ink); padding:8px 14px; border-radius:10px; text-align:left; cursor:pointer; white-space:nowrap;}
.fab-menu button:hover {background:var(--row);}
.stats-row {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; justify-content:flex-start; height:32px; gap:12px; margin-bottom:20px;}
.switch {display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; user-select:none;}
.switch input {display:none;}
.switch .slider {position:relative; width:36px; height:20px; background:#d4d4d4; border-radius:999px; transition:background .2s; background:var(--moss); box-shadow:inset 0 0 0 1px rgba(31,74,50,.15); background:#cfe3d6;}
.switch .slider::after {content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; background:var(--muted);}
.switch input:checked + .slider {background:#2f7d5b; background:var(--olive);}
.switch input:checked + .slider::after {transform:translateX(16px); background:var(--ink);}
html {scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
html.is-scrolling, html:hover {scrollbar-color:rgba(47,143,91,.6) transparent;}
html::-webkit-scrollbar {width:6px;}
html::-webkit-scrollbar-track {background:transparent;}
html::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
html.is-scrolling::-webkit-scrollbar-thumb, html:hover::-webkit-scrollbar-thumb {background:rgba(47,143,91,.6);}
*, *::before, *::after {border-radius:3px !important;}
.bar, .bar i {border-radius:2px !important;}
.card, .panel, .modal, .tbl {border-radius:6px !important;}
.date::-webkit-calendar-picker-indicator {width:16px; height:16px; margin:0; padding:0; opacity:.7; cursor:pointer;}
#jump {width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center;}
#jump svg {display:block; width:16px; height:16px;}
.search {width:240px; height:32px; box-sizing:border-box; background:var(--row); border:0; padding:0 12px; color:var(--ink); outline:none;}
.search::placeholder {color:var(--muted);}
.suggest {list-style:none; margin:6px 0 12px; padding:0; background:var(--panel); border-radius:8px; width:320px; max-width:100%; box-shadow:0 8px 24px rgba(58,26,8,0.12);}
#trace-search {width:320px !important; max-width:100%; flex:0 0 auto;}
#trace-stats:empty {display:none;}
#trace-stats {order:2; flex:0 0 100%; margin:8px 0 0; height:auto; line-height:1.5; white-space:normal;}
body[data-page="trace"] .stats-row {height:auto;}
body[data-page="trace"] {height:100vh; overflow:hidden;}
body[data-page="trace"] #trace-app {flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding-bottom:16px;}
body[data-page="trace"] .table-wrap {flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
body[data-page="trace"] .table-wrap:hover, html.is-scrolling body[data-page="trace"] .table-wrap {scrollbar-color:rgba(250,115,25,.6) transparent;}
body[data-page="trace"] .table-wrap::-webkit-scrollbar {width:6px;}
body[data-page="trace"] .table-wrap::-webkit-scrollbar-track {background:transparent;}
body[data-page="trace"] .table-wrap::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="trace"] .table-wrap:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="trace"] .table-wrap::-webkit-scrollbar-thumb {background:rgba(250,115,25,.6);}
body[data-page="trace"] .tbl thead th {position:sticky; top:0; z-index:2; background:var(--bg);}
body[data-page="payments"] {height:100vh; overflow:hidden;}
body[data-page="payments"] #page {flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding-bottom:16px;}
body[data-page="payments"] .table-wrap {flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
body[data-page="payments"] .table-wrap:hover, html.is-scrolling body[data-page="payments"] .table-wrap {scrollbar-color:rgba(250,115,25,.6) transparent;}
body[data-page="payments"] .table-wrap::-webkit-scrollbar {width:6px;}
body[data-page="payments"] .table-wrap::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="payments"] .table-wrap:hover::-webkit-scrollbar-thumb {background:rgba(250,115,25,.6);}
body[data-page="payments"] .tbl thead th {position:sticky; top:0; z-index:2; background:var(--bg);}
body[data-page="payments"] .pay-status {white-space:nowrap; display:flex; align-items:center; gap:6px;}
body[data-page="payments"] .page-head {align-items:center;}
.pay-bell {position:relative; margin-left:auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border-radius:8px; cursor:default;}
.pay-bell.has-dot::after {content:""; position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 2px var(--bg);}
body[data-page="payments"] .pay-trash {opacity:0; pointer-events:none; transition:opacity .2s; margin-left:6px; vertical-align:middle;}
body[data-page="payments"] tr:hover .pay-trash {opacity:1; pointer-events:auto; background:var(--bg); color:var(--olive-2);}
body[data-page="payments"] .pay-trash:hover {background:rgba(255,250,245,0.85);}
.suggest li {padding:7px 12px; border-radius:6px; cursor:pointer;}
.suggest li:hover {background:var(--row);}
#trace-tbl .sel {width:36px; text-align:center;}
#trace-tbl.selecting .sel-box, #trace-tbl tr:hover .sel-box {opacity:1; pointer-events:auto;}
#trace-tbl.selecting #sel-all {opacity:1; pointer-events:auto;}
.search:focus {box-shadow:0 0 0 1px var(--moss);}
#stats {margin:0 auto 0 0;}
.stats-row #search {margin-left:0;}
.stats-row .switch {height:32px; margin-left:0;}
.stats-row .stats-inline {margin:0; height:32px; display:flex; align-items:center; display:block; margin:0; height:32px; line-height:32px; white-space:nowrap;}
body[data-page="orders"] {height:100vh; overflow:hidden;}
body[data-page="orders"] #page {flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding-bottom:16px;}
body[data-page="orders"] .table-wrap {flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s;}
body[data-page="orders"] .table-wrap:hover, html.is-scrolling body[data-page="orders"] .table-wrap {scrollbar-color:rgba(47,143,91,.6) transparent;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar {width:6px;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar-track {background:transparent;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="orders"] .table-wrap::-webkit-scrollbar-button {display:none;}
body[data-page="orders"] .table-wrap:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="orders"] .table-wrap::-webkit-scrollbar-thumb {background:rgba(47,143,91,.6);}
body[data-page="orders"] .tbl thead th {position:sticky; top:0; z-index:2; background:#11160e; background:var(--bg);}
.foot-actions {display:flex; gap:8px; align-items:center;}
.btn.icon-danger {width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:rgba(196,106,78,.12); color:var(--danger);}
.btn.icon-danger:hover {background:var(--danger); color:#fff;}
.btn.icon-danger svg {width:16px; height:16px;}
.tbl tbody tr.row {cursor:pointer;}
body[data-page="dashboard"] {height:100vh; overflow:hidden;}
body[data-page="dashboard"] #page {flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; transition:scrollbar-color .3s; padding-bottom:32px; padding-bottom:22px;}
body[data-page="dashboard"] #page:hover, html.is-scrolling body[data-page="dashboard"] #page {scrollbar-color:rgba(151,168,90,.45) transparent; scrollbar-color:rgba(250, 115, 25, .6) transparent;}
body[data-page="dashboard"] #page::-webkit-scrollbar {width:6px;}
body[data-page="dashboard"] #page::-webkit-scrollbar-track {background:transparent;}
body[data-page="dashboard"] #page::-webkit-scrollbar-thumb {background:transparent; border-radius:999px;}
body[data-page="dashboard"] #page:hover::-webkit-scrollbar-thumb, html.is-scrolling body[data-page="dashboard"] #page::-webkit-scrollbar-thumb {background:rgba(151,168,90,.45); background:rgba(250, 115, 25, .6);}
.tbl th.num {text-align:right;}
.brand-logo {display:block; width:30px; height:30px; object-fit:cover; border-radius:50% !important;}
.toast-action {background:none; border:0; padding:0; cursor:pointer; color:var(--fern); font-weight:600;}
.toast-action:hover {color:var(--ink);}
#orders-tbl th:last-child, #orders-tbl td:last-child {text-align:right;}
.suggest {font-size:0.85em; margin:-4px 0 8px;}
.link-btn {background:none; border:0; padding:0; color:inherit; text-decoration:underline; cursor:pointer;}
.name-field {position:relative;}
.name-suggest {position:absolute; top:100%; left:0; right:0; z-index:5; list-style:none; margin:4px 0 0; padding:4px; background:#1f2a17; border:1px solid #5c7a2e; border-radius:8px; max-height:240px; overflow-y:auto; background:#fff; border-color:#fa7319;}
.name-suggest li {padding:8px 10px; border-radius:6px; cursor:pointer;}
.name-suggest li:hover, .name-suggest li.is-active {background:#2e3d20; background:#fde8d6;}
.name-suggest b {color:#c6e26a; font-weight:600; color:#c2540a;}
.m-account {display:block; font-size:12px; margin-top:2px;}
body[data-page="orders"] .day-pos {display:inline-block; text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums;}
body[data-page="orders"] .page-head .toolbar {margin-left:auto;}
.topnav, #page > *, #trace-app > *, .kpis > *, #app-footer {animation:slide-in 0.6s cubic-bezier(0.2,0.8,0.2,1) both;}
#page >:nth-child(1) {animation-delay:0.10s;}
#page >:nth-child(2) {animation-delay:0.18s;}
#page >:nth-child(3) {animation-delay:0.26s;}
#page >:nth-child(4) {animation-delay:0.34s;}
#page >:nth-child(5) {animation-delay:0.42s;}
#page >:nth-child(6) {animation-delay:0.50s;}
#page >:nth-child(7) {animation-delay:0.58s;}
#page >:nth-child(8) {animation-delay:0.66s;}
#page >:nth-child(n+9) {animation-delay:0.74s;}
.kpis >:nth-child(1) {animation-delay:0.26s;}
.kpis >:nth-child(2) {animation-delay:0.32s;}
.kpis >:nth-child(3) {animation-delay:0.38s;}
.kpis >:nth-child(4) {animation-delay:0.44s;}
.kpis >:nth-child(n+5) {animation-delay:0.50s;}
#trace-app >:nth-child(1) {animation-delay:0.10s;}
#trace-app >:nth-child(2) {animation-delay:0.18s;}
#trace-app >:nth-child(3) {animation-delay:0.26s;}
#trace-app >:nth-child(4) {animation-delay:0.34s;}
#trace-app >:nth-child(n+5) {animation-delay:0.42s;}
body[data-page="trace"] #trace-app > .table-wrap {animation:fade-in 0.5s ease both; animation-delay:0.3s;}
.badge-free {display:inline-block; margin-left:6px; padding:1px 6px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; vertical-align:middle; background:rgba(151,168,90,0.2); color:var(--fern); background:rgba(250, 115, 25, 0.16); color:#c2540a;}
.badge-pay {display:inline-block; margin-left:6px; padding:1px 6px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; border-radius:999px; color:var(--muted); background:rgba(151,168,90,0.14); vertical-align:baseline;}
.flav {display:inline-block; min-width:16em; white-space:nowrap;}
.bulk {display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 12px; margin-bottom:8px; background:var(--row); border-radius:8px;}
.bulk[hidden] {display:none;}
#bulk-count {order:99; margin-left:auto;}
.bulk [data-bulk="Pay Now"]:hover {color:#c2540a; background:rgba(250,115,25,0.14); box-shadow:inset 0 0 0 1px rgba(250, 115, 25, 0.4);}
.bulk [data-bulk="Payday"]:hover {color:#7b2f03; background:rgba(123,47,3,0.1); box-shadow:inset 0 0 0 1px rgba(123, 47, 3, 0.3);}
#bulk-clear, #bulk-del, #bulk-invoice {display:inline-flex; align-items:center; justify-content:center; padding:0;}
#bulk-invoice[hidden] {display:none !important;}
#orders-tbl .sel {width:36px; text-align:center;}
#orders-tbl th:nth-child(2), #orders-tbl td:nth-child(2), #orders-tbl th:nth-child(8), #orders-tbl td:nth-child(8) {display:none;}
#sel-all {opacity:0; pointer-events:none; transition:opacity 0.2s;}
#sel-all.show, th.sel:hover #sel-all {opacity:1; pointer-events:auto;}
.sel-box {opacity:0; pointer-events:none; transition:opacity 0.2s;}
tr.row:hover .sel-box, #orders-tbl.selecting .sel-box {opacity:1; pointer-events:auto;}
#orders-tbl.selecting #sel-all {opacity:1; pointer-events:auto;}
#orders-tbl th:nth-child(4), #orders-tbl td:nth-child(4) {display:none;}
.badge-pay.is-now {color:#c2540a; background:rgba(250,115,25,0.14); box-shadow:inset 0 0 0 1px rgba(250, 115, 25, 0.4);}
.badge-pay.is-day {color:#7b2f03; background:rgba(123,47,3,0.1); box-shadow:inset 0 0 0 1px rgba(123, 47, 3, 0.3);}
.date, .form input, .form select {color-scheme:light;}
.modal-backdrop, .dlg-backdrop, .drawer-backdrop {background:rgba(5,14,9,0.45);}
.nav-logo {display:flex; align-items:center; padding:0; background:none;}
.nav-logo img {height:30px; width:auto; display:block;}
.drawer-backdrop {position:fixed; inset:0; z-index:55; background:rgba(8,11,6,0.6); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s;}
.drawer-backdrop.is-in {opacity:1;}
.drawer {position:absolute; top:0; right:0; height:100vh; height:100dvh; width:min(520px,100%); background:var(--panel); padding:20px 22px; display:flex; flex-direction:column; gap:14px; overflow:hidden; transform:translateX(100%); transition:transform .28s cubic-bezier(.2, .8, .2, 1);}
.drawer-backdrop.is-in .drawer {transform:none;}
.menu-list {list-style:none; margin:0; padding:0 6px 0 0; display:grid; gap:8px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start;}
.menu-item {display:grid; grid-template-columns:1fr 72px auto 130px auto auto; gap:8px; align-items:center; background:var(--row); padding:8px 10px; border-radius:8px;}
.menu-item.is-hidden {opacity:.55;}
.menu-item input {background:transparent; border:0; border-bottom:1px solid var(--row); padding:4px 2px; color:var(--ink); font:inherit; min-width:0;}
.menu-item input:focus {outline:none; border-bottom-color:var(--olive-2);}
.menu-item .m-name {width:100%;}
.menu-item .m-price {width:100%; text-align:right;}
.menu-add {display:grid; grid-template-columns:1fr 72px auto; gap:8px; padding-top:14px; border-top:1px solid var(--row);}
.menu-add input {background:var(--row); border:0; border-radius:8px; padding:8px 10px; color:var(--ink); font:inherit; min-width:0;}
.actions, .order-actions, td.actions, [data-actions] {display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; vertical-align:middle;}
.btn-icon, .action-btn, button.icon-btn, a.icon-btn {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:8px; line-height:1; vertical-align:middle; box-sizing:border-box;}
.btn-icon svg, .action-btn svg, button.icon-btn svg, a.icon-btn svg {display:block; margin:auto; flex-shrink:0;}
.gate {position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:radial-gradient(1200px 600px at 80% -10%,#dcefe2 0%,transparent 60%), var(--bg);}
.gate-inner {width:min(240px,100%); display:grid; justify-items:center; gap:22px; text-align:center;}
.gate-logo {width:110px; height:auto; display:block;}
.gate .btn {padding:9px 32px;}
.line-input, .form input.line-input {width:100%; background:none; border:0 !important; border-bottom:1px solid rgba(31,74,50,0.2) !important; border-radius:0 !important; padding:10px 2px; color:var(--ink); outline:none; transition:border-color .2s;}
.line-input:focus, .form input.line-input:focus {border-bottom-color:rgba(47,143,91,0.8) !important;}
.gate .line-input {text-align:center; letter-spacing:0.2em;}
.gate .line-input::placeholder {letter-spacing:0.16em; text-transform:uppercase; font-size:11px; color:var(--muted);}
.set-form {max-width:360px; gap:20px;}
.topnav li {display:flex; align-items:center;}
.nav-logout {margin-left:4px;}
.nav-logout svg {width:16px; height:16px; display:block;}
.nav-logout:hover {color:var(--fern);}
.toolbar.is-searching #day, .toolbar.is-searching #jump, .toolbar.is-searching [data-step] {display:none !important;}
body[data-page="orders"] .page-head .toolbar.is-searching {justify-content:center;}
body[data-page="dashboard"] #page >:last-child {margin-bottom:0;}
.menu-add h2 {grid-column:1 / -1; margin:0;}
.drawer > .modal-head, .drawer > .menu-add {flex:none;}
@media (max-width:720px) {
.topnav {padding:12px 8px; gap:4px; box-sizing:border-box; width:100%; max-width:100%; overflow:hidden;}
.topnav ul {gap:2px; flex-shrink:0;}
.topnav a {padding:8px; display:flex; align-items:center; justify-content:center;}
.topnav .nav-label {display:none;}
.topnav .nav-icon {display:block;}
.topnav .nav-logo img {width:28px; height:28px;}
}
@media (max-width: 640px) {
body[data-page="orders"] .page-head {flex-wrap:wrap; align-items:center; gap:10px; flex-wrap:wrap; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;}
body[data-page="orders"] .page-head > div:first-child {flex:1 1 auto; grid-column:1; grid-row:1;}
body[data-page="orders"] .head-actions {display:flex; gap:8px; margin-left:auto; flex:none;}
body[data-page="orders"] .head-actions .btn {width:auto; flex:none;}
body[data-page="orders"] .page-head .toolbar {width:100%; justify-content:center; margin-left:0; order:9; grid-column:1 / -1; grid-row:2; margin-left:0; justify-content:center; display:flex; width:100%; justify-content:space-between; align-items:center; gap:6px;}
.modal-backdrop, .dlg-backdrop {place-items:end center; padding:0;}
.modal, .dlg {width:100%; max-width:100%; max-height:90vh; overflow-y:auto; padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px)); border-radius:18px 18px 0 0 !important; transform:translateY(100%); transition:transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);}
.is-in .modal, .is-in .dlg {transform:none;}
.modal::before, .dlg::before {content:""; display:block; width:40px; height:4px; margin:6px auto 12px; background:var(--row); border-radius:2px !important;}
.stats-row {height:auto; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px;}
.stats-row .stats-inline {height:auto; margin:0; line-height:1.5; white-space:normal;}
.stats-row .search {width:100%; height:40px;}
.stats-row .switch {height:auto; align-self:flex-start;}
.tbl th, .tbl td {padding:6px 8px; white-space:nowrap;}
body[data-page="orders"] .table-wrap {overflow-x:hidden; overflow-y:auto;}
body[data-page="orders"] .tbl {width:100%; table-layout:fixed; table-layout:auto;}
body[data-page="orders"] .tbl th:not(.sel):not(:nth-child(3)):not(:nth-child(5)), body[data-page="orders"] .tbl td:not(.sel):not(:nth-child(3)):not(:nth-child(5)):not(.empty) {display:none;}
body[data-page="orders"] .tbl td {white-space:normal;}
body[data-page="orders"] .tbl th:nth-child(3), body[data-page="orders"] .tbl td:nth-child(3) {width:auto; max-width:50%;}
body[data-page="orders"] .tbl td:nth-child(5), body[data-page="orders"] .tbl th:nth-child(5) {text-align:left;}
body[data-page="orders"] .tbl td:nth-child(5) {white-space:normal; word-break:break-word;}
body[data-page="orders"] .sel-box {opacity:1; pointer-events:auto;}
body[data-page="orders"] #sel-all {opacity:1; pointer-events:auto;}
#bulk-invoice[hidden] {display:none !important;}
body[data-page="orders"] .badge-pay {display:inline-block; margin:4px 0 0 0; text-align:left;}
body[data-page="orders"] .m-account {display:block; font-size:12px; margin-top:2px;}
body[data-page="orders"] .stats-row {flex-direction:row; flex-wrap:wrap; align-items:center; height:auto; gap:10px;}
body[data-page="orders"] .stats-row .stats-inline {width:100%; height:auto; white-space:normal;}
body[data-page="orders"] .stats-row .search {flex:1 1 0; min-width:0; width:auto; height:32px;}
body[data-page="orders"] .stats-row .switch {flex:0 0 auto; height:32px; align-self:auto;}
body[data-page="orders"] .page-head {grid-template-columns:1fr auto auto;}
body[data-page="orders"] #menu-btn {grid-column:2; grid-row:1; justify-self:end;}
body[data-page="orders"] #import {grid-column:3; grid-row:1; justify-self:end;}
body[data-page="orders"] .toolbar .date {flex:1 1 auto; min-width:0; width:auto;}
body[data-page="orders"] .toolbar .icon-btn {flex:0 0 auto;}
body[data-page="orders"] .toolbar .day-pos {flex:0 0 auto;}
body[data-page="orders"] #stats {display:flex; justify-content:space-between; align-items:center; gap:8px;}
body[data-page="orders"] .flav {min-width:0;}
body[data-page="orders"] .flav-line {flex-wrap:wrap; row-gap:2px;}
body[data-page="orders"] .stat-pills {display:flex; gap:6px;}
body[data-page="orders"] .stat-pills .pill {cursor:default;}
body[data-page="orders"] .stat-total b {color:var(--ink); font-weight:500;}
}
@media (max-width: 860px) {
.split {grid-template-columns:1fr;}
}
@media (min-width: 641px) {
body[data-page="orders"] .day-pos {min-width:6.5em;}
}
@keyframes slide-in {
from {opacity:0; transform:translateX(-28px);}
to {opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce) {
.topnav, #page > *, .kpis > *, #app-footer {animation:none;}
}
@keyframes fade-in {
from {opacity:0;}
to {opacity:1;}
}
.tbl tr.grp-start td, .tbl tr.grp-mid td, .tbl tr.grp-end td { background: rgba(250,115,25,.06); }
.tbl tr.grp-start td:first-child, .tbl tr.grp-mid td:first-child, .tbl tr.grp-end td:first-child { box-shadow: inset 3px 0 0 #fa7319; }
.tbl tr.grp-start td, .tbl tr.grp-start td:first-child { border-top: 1px solid rgba(250,115,25,.35); }
.tbl tr.grp-end td, .tbl tr.grp-end td:first-child { border-bottom: 1px solid rgba(250,115,25,.35); }
.trace-pager {display:inline-flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap;}
.trace-pager[hidden] {display:none;}
.tbl tr[data-inv] {cursor:pointer;}
.tbl tr.grp-start td, .tbl tr.grp-mid td, .tbl tr.grp-end td { background: rgba(250,115,25,.06); }
.tbl tr.grp-start td:first-child, .tbl tr.grp-mid td:first-child, .tbl tr.grp-end td:first-child { box-shadow: inset 3px 0 0 #fa7319; }
.tbl tr.grp-start td, .tbl tr.grp-start td:first-child { border-top: 1px solid rgba(250,115,25,.35); }
.tbl tr.grp-end td, .tbl tr.grp-end td:first-child { border-bottom: 1px solid rgba(250,115,25,.35); }
.tbl tr[data-inv] {cursor:pointer;}
.trace-pager {display:inline-flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap;}
.trace-pager[hidden] {display:none;}
.flav-line {display:flex; align-items:center;}
.badge-inv {display:inline-block; margin-left:6px; padding:1px 6px; font-size:10px; letter-spacing:0.08em; border-radius:4px; border:1px solid var(--olive-2); color:var(--fern); background:rgba(250,115,25,0.08); vertical-align:baseline; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tbl tbody tr:hover td .badge-inv {color:var(--bg); border-color:var(--bg); background:transparent;}
a.badge-inv {cursor:pointer;}
a.badge-inv:hover {background:rgba(250,115,25,0.16);}
.btn.icon-share {width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:var(--row); color:var(--muted);}
.btn.icon-share:hover {background:var(--moss); color:var(--ink);}
.btn.icon-share svg {width:16px; height:16px;}
body[data-page="payments"] #pay-tbl {table-layout:fixed;}
body[data-page="payments"] #pay-tbl th:nth-child(1) {width:auto;}
body[data-page="payments"] #pay-tbl th:nth-child(2) {width:130px;}
body[data-page="payments"] #pay-tbl th:nth-child(3) {width:130px;}
body[data-page="payments"] #pay-tbl th:nth-child(4) {width:90px;}
body[data-page="payments"] #pay-tbl th:nth-child(5) {width:130px;}
body[data-page="payments"] #pay-tbl td {overflow-wrap:anywhere;}
body[data-page="payments"] #pay-tbl td a.badge-inv {display:inline-flex; align-items:center; vertical-align:middle; margin:0; line-height:1; font-size:10px; letter-spacing:0.08em; padding:4px 8px;}
body[data-page="payments"] #pay-tbl th:nth-child(2), body[data-page="payments"] #pay-tbl td:nth-child(2) {text-align:center;}
body[data-page="payments"] #pay-tbl tbody tr:hover td a.badge-inv {background:var(--bg); color:var(--olive-2); border-color:var(--bg);}