:root {
	--brand: #1f3a5f;
	--brand-2: #2f6fb0;
	--nav-h: 64px;
}
body { background: #f2f4f7; -webkit-tap-highlight-color: transparent; }
body.has-nav { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
.container { max-width: 720px; }

.topbar { position: sticky; top: 0; z-index: 1020; background: var(--brand); color: #fff; padding: .6rem 0; padding-top: calc(.6rem + env(safe-area-inset-top)); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.topbar-title { font-size: 1.15rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-back { color: #fff; font-size: 1.4rem; line-height: 1; text-decoration: none; margin-left: -.25rem; }
.topbar .btn { --bs-btn-padding-y: .3rem; }

.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #fff; border-top: 1px solid #dde1e6; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--nav-h); color: #6c757d; text-decoration: none; font-size: .75rem; gap: 2px; }
.bottomnav a i { font-size: 1.4rem; }
.bottomnav a.active { color: var(--brand-2); font-weight: 600; }

.card-list { display: flex; flex-direction: column; gap: .5rem; }
.row-card { background: #fff; border-radius: .75rem; padding: .75rem .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); display: flex; align-items: center; gap: .75rem; }
.row-card.inactive { opacity: .55; }
.row-card .main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.row-card .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.row-card .meta { font-size: .85rem; color: #6c757d; }
.row-card .price { font-weight: 700; white-space: nowrap; }
.id-badge { font-size: .75rem; color: #6c757d; background: #eef1f4; border-radius: .4rem; padding: .05rem .4rem; font-variant-numeric: tabular-nums; }

.toggle-btn { min-width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }

.order-card { background: #fff; border-radius: .75rem; padding: .8rem .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.order-card .actions { display: flex; gap: .4rem; margin-top: .6rem; }
.order-card .actions .btn { flex: 1; }

.filter-box { background: #fff; border-radius: .75rem; padding: .75rem; margin-bottom: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.panel { background: #fff; border-radius: .75rem; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); width: 58px; height: 58px; border-radius: 50%; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 1025; }

.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: #f2f4f7; padding: .6rem 0; z-index: 10; }
.total-line { font-size: 1.25rem; font-weight: 700; }

.pick-list .row-card { cursor: pointer; }
.btn-lg, .form-control-lg, .form-select-lg { font-size: 1.05rem; }
.sticky-actions .btn { flex: 1 1 0; min-width: 0; white-space: normal; padding-left: .5rem; padding-right: .5rem; }
.row-category { border-left: solid 6px #000000; }