/* Quiet, light theme shared with the station's other apps: warm paper background, white cards with a thin border, dark
   ink text. The station's brand colour (Settings → Brand) is set by the layout as --brand and carries the header, the
   buttons and the active marks; every other colour keeps one meaning (green ok, blue info, violet on the way, amber new, red danger). */
:root { --brand:#2F6FB5; --brand-dark:#2659A0; --brand-soft:#EAF1F8; --brand-mid:#C4D6EC; --on-brand:#fff; --brand2:#1E4B82;
        --bg:#F3F1EB; --bg2:#ECE9E1; --card:#fff; --card2:#F7F5F0; --line:#E2DED4; --ink:#1C2421; --dim:#4A5550; --faint:#7A827D;
        --green:#1F8A4C; --blue:#2F6FB5; --violet:#6B5BA8; --amber:#B7791F; --danger:#C8322B; --cyan:#1E8A9A;
        --green2:var(--green); --orange:var(--amber); --gray:var(--faint); }
* { box-sizing: border-box; }
html, body { margin:0; font-family: Segoe UI, Roboto, system-ui, Arial, sans-serif; font-size:16px; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:var(--brand); text-decoration:none; }
h1 { font-size:1.5rem; margin:.2rem 0 .8rem; letter-spacing:-.02em; } h2 { font-size:1.1rem; margin:1rem 0 .4rem; letter-spacing:-.01em; }
small, .small { font-size:.85rem; } .muted { color:var(--dim); } .r { text-align:right; } .grow { flex:1; } .wide { width:100%; }
.shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:.8rem; padding:.55rem 1rem; background:var(--brand); color:var(--on-brand); flex-wrap:wrap; border-bottom:4px solid var(--brand2); }
.topbar .brand { color:var(--on-brand); font-weight:700; font-size:1.15rem; display:inline-flex; align-items:center; gap:.6rem; letter-spacing:-.01em; }
.topbar .logo { height:30px; max-width:120px; background:#fff; border-radius:7px; padding:3px 6px; object-fit:contain; }
.topbar .muted { color:var(--on-brand); opacity:.75; } .emp { font-weight:600; }
.nav { display:flex; gap:.2rem; flex-wrap:wrap; } .nav a { color:var(--on-brand); opacity:.9; padding:.3rem .6rem; border-radius:7px; font-weight:600; } .nav a:hover { background:rgba(255,255,255,.18); opacity:1; }
.content { padding:1rem; flex:1; max-width:1100px; width:100%; margin:0 auto; }
@media (max-width:700px) { .hide-sm { display:none; } .content { padding:.7rem; } }
.btn { display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:.6rem 1rem; border-radius:10px; font-size:1rem; font-weight:600; cursor:pointer; text-align:center; line-height:1.25; }
.btn:hover { background:var(--card2); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); } .btn.primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.blue { background:var(--blue); border-color:var(--blue); color:#fff; } .btn.orange { background:var(--amber); border-color:var(--amber); color:#fff; }
.btn.ghost { background:transparent; } .btn.ghost:hover { background:rgba(0,0,0,.04); }
.btn.light { color:var(--on-brand); border-color:rgba(255,255,255,.5); background:transparent; } .btn.light:hover { background:rgba(255,255,255,.15); }
.btn.small { padding:.3rem .6rem; font-size:.9rem; } .btn.big { padding:.9rem 1.4rem; font-size:1.1rem; }
.btn:disabled { opacity:.5; cursor:default; }
.inp { padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px; font-size:1rem; width:100%; background:var(--card); color:var(--ink); } .w8 { width:8rem; } .w12 { width:12rem; }
.inp:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
textarea.inp { min-height:4rem; }
.lbl { display:block; margin:.6rem 0 .2rem; color:var(--dim); font-size:.85rem; font-weight:600; }
.big-input { width:100%; font-size:2rem; padding:.5rem .8rem; border:2px solid var(--line); border-radius:12px; text-align:right; margin:.3rem 0; font-variant-numeric:tabular-nums; }
.alert { background:#FBEAE8; color:var(--danger); border:1px solid #F0C4C0; padding:.7rem 1rem; border-radius:10px; margin:.5rem 0; }
.ok-msg { background:#E6F4EC; color:var(--green); padding:.6rem 1rem; border-radius:10px; margin:.5rem 0; }
.login-box { max-width:440px; margin:2rem auto; background:var(--card); padding:0 1.5rem 1.5rem; border-radius:18px; border:1px solid var(--line); overflow:hidden; }
.login-box > .btn.wide { margin-top:1rem; }
.login-head { margin:0 -1.5rem 1.2rem; padding:1.6rem 1.2rem 1.4rem; background:var(--brand); color:var(--on-brand); text-align:center; border-bottom:4px solid var(--brand2); }
.login-head .logo { max-height:56px; max-width:200px; background:#fff; border-radius:10px; padding:6px 10px; margin-bottom:.6rem; object-fit:contain; }
.login-head h1 { margin:0; font-size:1.5rem; } .login-head p { margin:.2rem 0 0; opacity:.85; font-size:.95rem; }
.tabs { display:flex; gap:.5rem; margin:.5rem 0 1rem; } .tabs .btn { flex:1; }
.menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
.tile { display:flex; flex-direction:column; gap:.3rem; padding:1.2rem 1rem; border-radius:16px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-left:6px solid var(--faint); }
.tile .t-big { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tile.green { border-left-color:var(--green); } .tile.blue { border-left-color:var(--blue); } .tile.orange { border-left-color:var(--amber); } .tile.gray { border-left-color:var(--faint); } .tile.red { border-left-color:var(--danger); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:900px) { .two-col { grid-template-columns:1fr; } }
.card { background:var(--card); border-radius:16px; padding:1rem 1.2rem; border:1px solid var(--line); margin-bottom:1rem; }
.list { max-height:50vh; overflow:auto; margin-top:.5rem; } .row-btn { display:block; width:100%; text-align:left; padding:.7rem; border:0; border-bottom:1px solid var(--line); background:var(--card); font-size:1rem; cursor:pointer; color:var(--ink); } .row-btn:hover { background:var(--brand-soft); }
.mode-row { display:flex; gap:.5rem; margin:.3rem 0; flex-wrap:wrap; }
.actions { display:flex; gap:.8rem; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.grid { width:100%; border-collapse:collapse; background:var(--card); } .grid th, .grid td { padding:.55rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .grid th { background:var(--card2); font-weight:600; color:var(--dim); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.grid tr.link { cursor:pointer; } .grid tr.link:hover { background:var(--brand-soft); }
.table-wrap { overflow-x:auto; background:var(--card); border-radius:14px; border:1px solid var(--line); }
.badge { display:inline-block; padding:.15rem .6rem; border-radius:12px; font-size:.8rem; font-weight:600; background:var(--bg2); color:var(--dim); white-space:nowrap; }
.badge.new { background:#F6EBD6; color:var(--amber); } .badge.confirmed { background:#E4EDF8; color:var(--blue); } .badge.en_route { background:#ECE8F5; color:var(--violet); } .badge.delivered { background:#E6F4EC; color:var(--green); } .badge.cancelled { background:var(--bg2); color:var(--faint); text-decoration:line-through; }
.order-card { display:block; background:var(--card); border-radius:14px; padding:.8rem 1rem; margin-bottom:.6rem; border:1px solid var(--line); color:var(--ink); border-left:6px solid var(--faint); }
.order-card:hover { background:var(--card2); }
.order-card.new { border-left-color:var(--amber); } .order-card.confirmed { border-left-color:var(--blue); } .order-card.en_route { border-left-color:var(--violet); } .order-card.delivered { border-left-color:var(--green); }
.order-card .top { display:flex; justify-content:space-between; gap:.5rem; align-items:center; } .order-card .top b { font-size:1.05rem; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:.3rem 1rem; } .kv span:nth-child(odd) { color:var(--dim); }
.totals { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.8rem; } .totals div { background:var(--brand-soft); padding:.5rem .8rem; border-radius:10px; display:flex; flex-direction:column; min-width:8rem; } .totals span { color:var(--dim); font-size:.85rem; } .totals b { font-size:1.2rem; font-variant-numeric:tabular-nums; }
.photo { max-width:100%; border-radius:12px; border:1px solid var(--line); }
.timeline { list-style:none; padding:0; margin:0; } .timeline li { padding:.3rem 0; border-bottom:1px dashed var(--line); font-size:.9rem; } .timeline .muted { margin-right:.5rem; }
.stepper { display:flex; gap:.3rem; margin:.5rem 0 1rem; flex-wrap:wrap; } .stepper span { padding:.3rem .7rem; border-radius:14px; background:var(--bg2); font-size:.85rem; font-weight:600; color:var(--dim); } .stepper span.done { background:var(--brand); color:var(--on-brand); } .stepper span.cur { background:var(--brand2); color:#fff; }
.price-box { background:var(--brand-soft); border:1px solid var(--brand-mid); border-radius:16px; padding:1rem; text-align:center; } .price-box b { font-size:1.9rem; display:block; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.form-row { display:flex; gap:.8rem; flex-wrap:wrap; } .form-row > * { flex:1; min-width:9rem; }
.share-row { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--line); }
.wa { background:#25d366; border-color:#25d366; color:#fff; } .wa:hover { background:#1fb859; }
/* public receipt */
.print-page { background:var(--bg); min-height:100vh; }
.bar { padding:.6rem 1rem; background:var(--brand); color:var(--on-brand); display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; border-bottom:4px solid var(--brand2); }
.receipt-page { max-width:560px; margin:0 auto; padding:1rem; }
.receipt { border:1px solid #000; background:#fff; padding:1rem; font-family: Segoe UI, Arial, sans-serif; color:#000; }
.r-head { text-align:center; margin-bottom:.6rem; } .r-logo { max-height:56px; max-width:180px; margin-bottom:.3rem; } .r-name { font-weight:700; font-size:1.2rem; } .r-title { margin:.5rem 0; font-weight:700; border-top:1px solid #000; border-bottom:1px solid #000; padding:.2rem 0; }
.r-row { display:flex; justify-content:space-between; gap:.5rem; padding:.15rem 0; } .r-row.total { border-top:1px solid #000; margin-top:.3rem; padding-top:.3rem; font-size:1.1rem; font-weight:700; }
.r-foot { text-align:center; margin-top:.8rem; border-top:1px dashed #000; padding-top:.4rem; font-size:.85rem; }
@media print { .no-print { display:none !important; } body, .print-page { background:#fff; } .receipt { border:0; } @page { margin:8mm; } }
h1:focus, h1:focus-visible { outline: none; }
/* settings control panel */
.sp-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:.8rem; } .sp-head p { margin:.2rem 0 0; }
.sec { background:var(--card); border-radius:16px; border:1px solid var(--line); margin-bottom:1rem; overflow:hidden; }
.sec-h { padding:.9rem 1.2rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.8rem; background:var(--card2); } .sec-h h2 { margin:0; } .sec-h p { margin:.1rem 0 0; color:var(--dim); font-size:.9rem; }
.sec-n { width:2rem; height:2rem; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.sub-h { margin:1rem 0 .2rem; padding:0 1.2rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:700; }
.field { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(0,2fr); gap:.3rem 1.2rem; padding:.8rem 1.2rem; border-bottom:1px solid var(--bg2); align-items:start; } .field:last-child { border-bottom:0; }
.field .f-lbl { font-weight:600; padding-top:.5rem; } .field .f-key { color:var(--faint); font-size:.75rem; font-family:Consolas,monospace; display:block; font-weight:400; }
.field .f-help { color:var(--dim); font-size:.85rem; margin-top:.3rem; } .field .f-help code { background:var(--bg2); padding:0 .3rem; border-radius:4px; }
.field .f-err { color:var(--danger); font-size:.85rem; margin-top:.3rem; font-weight:600; } .field.err .inp { border-color:var(--danger); background:#FFF8F7; }
.field.dirty .f-lbl::after { content:" •"; color:var(--amber); }
.field .inp { max-width:30rem; }
@media (max-width:700px) { .field { grid-template-columns:1fr; } .field .f-lbl { padding-top:0; } }
.switch { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; padding:.4rem 0; } .switch input { display:none; }
.switch .sl { width:2.8rem; height:1.5rem; border-radius:1rem; background:#CFCBC2; position:relative; transition:.15s; flex:none; } .switch .sl::after { content:""; position:absolute; top:.15rem; left:.15rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .sl { background:var(--brand); } .switch input:checked + .sl::after { left:1.45rem; } .switch .sw-t { font-weight:600; }
.color-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; } .color-row input[type=color] { width:3rem; height:2.6rem; border:1px solid var(--line); border-radius:10px; padding:.15rem; background:var(--card); cursor:pointer; }
.logo-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .logo-prev { max-height:56px; max-width:180px; background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:4px 8px; object-fit:contain; } .logo-prev.empty { color:var(--faint); font-size:.85rem; padding:.9rem 1rem; }
.brand-prev { border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:30rem; } .bp-head { background:var(--brand); color:var(--on-brand); padding:.6rem .9rem; font-weight:700; border-bottom:4px solid var(--brand2); display:flex; justify-content:space-between; align-items:center; } .bp-head span { font-weight:400; opacity:.8; font-size:.85rem; } .bp-body { padding:.8rem .9rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; background:var(--bg); }
.savebar { position:sticky; bottom:0; background:var(--card); border:1px solid var(--line); border-bottom:0; padding:.7rem 1.2rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; box-shadow:0 -6px 16px rgba(0,0,0,.06); border-radius:14px 14px 0 0; margin-top:1rem; z-index:5; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:14px; font-size:.85rem; font-weight:600; background:var(--bg2); color:var(--dim); } .chip.ok { background:#E6F4EC; color:var(--green); } .chip.warn { background:#F6EBD6; color:var(--amber); } .chip.err { background:#FBEAE8; color:var(--danger); }
details.adv > summary { cursor:pointer; padding:.9rem 1.2rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; background:var(--card2); } details.adv > summary::-webkit-details-marker { display:none; }
details.adv > summary::after { content:"Show"; color:var(--brand); font-weight:600; } details.adv[open] > summary::after { content:"Hide"; } details.adv > summary small { display:block; color:var(--dim); font-weight:400; }
.staff-row { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr auto auto; gap:.6rem; align-items:center; padding:.5rem 1.2rem; border-bottom:1px solid var(--bg2); } .staff-row.head { color:var(--faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
@media (max-width:800px) { .staff-row { grid-template-columns:1fr 1fr; } .staff-row.head { display:none; } }

/* Users and access */
.mono { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric:tabular-nums; }
.seg { display:inline-flex; flex-wrap:wrap; gap:.3rem; padding:.3rem; background:var(--bg2); border-radius:12px; margin:.4rem 0 1rem; }
.seg button { border:0; background:transparent; padding:.5rem .9rem; border-radius:9px; font:inherit; font-weight:600; color:var(--dim); cursor:pointer; }
.seg button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.seg .n { display:inline-block; min-width:1.4rem; padding:0 .35rem; margin-left:.3rem; border-radius:8px; background:var(--brand-soft); color:var(--brand-dark); font-size:.8rem; text-align:center; }
.pin-show { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; background:var(--brand-soft); border:1px solid var(--brand-mid); border-radius:14px; padding:.9rem 1.2rem; margin:.5rem 0 1rem; }
.pin-show > div { display:grid; }
.pin-digits { font:700 1.9rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing:.25em; color:var(--brand-dark); }
.matrix th.c, .matrix td.c { text-align:center; width:6.5rem; font-weight:700; }
.matrix td.c { color:var(--green); }
.user-card { background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:.9rem; overflow:hidden; }
.user-card.off { opacity:.7; }
.user-card.add { border-style:dashed; }
.uc-head { display:flex; align-items:center; gap:.8rem; padding:.8rem 1.2rem; background:var(--card2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.uc-id { display:grid; }
.avatar { width:2.4rem; height:2.4rem; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.uc-body { padding:.4rem 1.2rem 1rem; }
.rights { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.right { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; font-size:.88rem; font-weight:600; color:var(--dim); cursor:pointer; background:var(--card); }
.right input { accent-color:var(--brand); margin:0; }
.right.on { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark); }
.right.fixed { cursor:default; }
.uc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.8rem; }

/* phones: one compact header row (brand + Log out), the page links in one sliding row under it, queue tiles two by two */
@media (max-width:700px) {
  .topbar { gap:.4rem .6rem; padding:.5rem .8rem .35rem; }
  .topbar .nav { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -.3rem; }
  .topbar .nav::-webkit-scrollbar { display:none; }
  .topbar .nav a { white-space:nowrap; flex:none; }
  .menu { grid-template-columns:1fr 1fr; gap:.6rem; }
  .tile { padding:.8rem .8rem; }
  .uc-head, .uc-body { padding-left:.9rem; padding-right:.9rem; }
}
.roles summary { cursor:pointer; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
@media (max-width:700px) { .matrix th.c, .matrix td.c { width:3.6rem; padding-left:.2rem; padding-right:.2rem; } .matrix th { font-size:.72rem; } }
.unit-row { padding:.5rem 0; border-bottom:1px dashed var(--line); }
@media (max-width:700px) { .unit-row > div:nth-child(3) { min-width:0; flex:1 1 8rem; } }
.list-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.8rem 1rem; margin-bottom:.6rem; }
.list-card.off { opacity:.7; }
.lc-top { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.lc-meta { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin-top:.4rem; color:var(--dim); font-size:.9rem; }
.hist-row { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; padding:.6rem 0; border-bottom:1px solid var(--bg2); }
.hist-row:last-child { border-bottom:0; }
.hist-row .h-who { flex:1 1 10rem; min-width:0; }

/* order tracking (building page, /t/<token>) */
.track { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem; margin-bottom:1rem; }
.track-now { display:flex; gap:.8rem; align-items:flex-start; padding-bottom:.9rem; margin-bottom:.4rem; border-bottom:1px solid var(--line); }
.track-now > div { display:grid; gap:.15rem; min-width:0; }
.track-now b { font-size:1.15rem; line-height:1.25; }
.track-now span { color:var(--dim); font-size:.92rem; }
.tn-dot { width:14px; height:14px; border-radius:50%; background:var(--amber); flex:none; margin-top:.35rem; box-shadow:0 0 0 5px #F6EBD6; }
.track-now.confirmed .tn-dot { background:var(--brand); box-shadow:0 0 0 5px var(--brand-soft); }
.track-now.en_route .tn-dot { background:var(--violet); box-shadow:0 0 0 5px #ECE8F5; animation:tn-pulse 1.6s ease-out infinite; }
.track-now.delivered .tn-dot { background:var(--green); box-shadow:0 0 0 5px #E6F4EC; }
.track-now.cancelled .tn-dot { background:var(--faint); box-shadow:0 0 0 5px var(--bg2); }
@keyframes tn-pulse { 0% { box-shadow:0 0 0 0 rgba(108,92,168,.45); } 100% { box-shadow:0 0 0 12px rgba(108,92,168,0); } }
@media (prefers-reduced-motion: reduce) { .track-now.en_route .tn-dot { animation:none; } }
.track-steps { list-style:none; margin:0; padding:0; }
.track-steps li { position:relative; display:flex; gap:.8rem; padding:.55rem 0 .55rem 0; }
.track-steps li:not(:last-child)::after { content:""; position:absolute; left:6px; top:1.55rem; bottom:-.55rem; width:2px; background:var(--line); }
.track-steps li.done:not(:last-child)::after { background:var(--brand); }
.ts-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--line); background:var(--card); flex:none; margin-top:.25rem; position:relative; z-index:1; }
.track-steps li.done .ts-dot { background:var(--brand); border-color:var(--brand); }
.track-steps li.now .ts-dot { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.track-steps li.stop .ts-dot { background:var(--faint); border-color:var(--faint); }
.track-steps li.next, .track-steps li.skip { opacity:.55; }
.track-steps li.skip .ts-body b { text-decoration:line-through; }
.ts-body { display:grid; gap:.1rem; min-width:0; flex:1; }
.ts-top { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.ts-time { color:var(--dim); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ts-time.now { color:var(--brand-dark); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.75rem; }
.ts-detail { color:var(--dim); font-size:.9rem; }
.track-live { margin:.6rem 0 0; font-size:.78rem; color:var(--faint); }
.track + .actions { margin-bottom:1rem; }

/* live truck map */
.track-map { height:240px; border-radius:12px; overflow:hidden; border:1px solid var(--line); margin:.6rem 0 .2rem; background:var(--bg2); }
.track-map-note { font-size:.82rem; color:var(--dim); }
.track-map-note.stale { color:var(--amber); font-weight:600; }
.mz-truck span { display:block; width:22px; height:22px; border-radius:50%; background:var(--violet); border:3px solid #fff; box-shadow:0 0 0 2px var(--violet), 0 2px 6px rgba(0,0,0,.35); }
.geo-card { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* design polish (2026-11-04): page heads, phone lists, price strip, calmer phone type */
.page-head { display:grid; gap:.35rem; margin-bottom:.9rem; }
.page-head .back { font-weight:600; font-size:.92rem; }
.ph-title { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ph-title h1 { margin:0; }
.ph-tools { display:flex; gap:.5rem; flex-wrap:wrap; }
.only-narrow { display:none; }
@media (max-width:700px) { .only-wide { display:none; } .only-narrow { display:block; } }
.price-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem; background:var(--brand-soft); border:1px solid var(--brand-mid); border-radius:14px; padding:.7rem 1rem; margin:1rem 0 .4rem; }
.price-strip b { font-size:1.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.card h2:first-child { margin-top:0; }
.order-card { transition:background .12s; }
.badge { letter-spacing:.01em; }
@media (max-width:700px) {
  h1 { font-size:1.35rem; }
  .card { padding:.9rem 1rem; border-radius:14px; }
  .actions { gap:.6rem; }
  .btn.big { width:100%; }
  .kv { grid-template-columns:minmax(6.5rem, max-content) 1fr; }
}
.tile.violet { border-left-color:var(--violet); }
.menu > .tile:last-child:nth-child(odd) { grid-column:1 / -1; }
@media (min-width:701px) { .menu > .tile:last-child:nth-child(odd) { grid-column:auto; } }