/* 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; } }

/* ---- price per customer: the station sends a price per 1,000 L, the customer accepts or declines (cyan = waiting for the customer) ---- */
.badge.priced { background:#E2F2F4; color:var(--cyan); } .order-card.priced { border-left-color:var(--cyan); } .tile.cyan { border-left-color:var(--cyan); }
.track-now.priced .tn-dot { background:var(--cyan); box-shadow:0 0 0 5px #E2F2F4; }
.last-price { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; background:#E6F4EC; border:1px solid #BFE3CD; color:var(--green); border-radius:10px; padding:.55rem .75rem; font:inherit; font-size:.92rem; cursor:pointer; margin-bottom:.4rem; }
.last-price:hover { background:#DAEFE2; } .last-price b { color:var(--green); }
.inp.big-num { font-size:1.45rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.price-total { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:wrap; background:var(--brand-soft); border:1px solid var(--brand-mid); border-radius:12px; padding:.8rem 1rem; margin:.8rem 0 .2rem; }
.price-total b { font-size:1.5rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wait-card { border-left:6px solid var(--cyan); }
.answer-card { border:2px solid var(--cyan); }
.answer-card .price-rows > div { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--line); } .answer-card .price-rows > div:last-child { border-bottom:0; }
.answer-card .price-rows span { color:var(--dim); } .answer-card .price-rows b { font-variant-numeric:tabular-nums; }
.answer-note { background:#F6F1E3; border:1px solid #E9DCB8; border-radius:12px; padding:.6rem .8rem; color:#6A5420; font-size:.9rem; margin:.6rem 0; }
.btn.accept { background:var(--green); border-color:var(--green); color:#fff; } .btn.accept:hover { background:#18733F; }
.btn.decline { color:var(--danger); }
.answer-banner { display:flex; align-items:center; gap:.8rem; background:#E2F2F4; border:1px solid #B9DEE3; border-left:6px solid var(--cyan); border-radius:14px; padding:.8rem 1rem; color:var(--ink); margin-bottom:.8rem; }
.answer-banner b { display:block; } .answer-banner .grow { color:var(--dim); font-size:.92rem; }
.ask-box { background:var(--brand-soft); border:1px solid var(--brand-mid); border-radius:16px; padding:1rem; }
.ask-box p { margin:.2rem 0 .8rem; color:var(--dim); }

/* ======== customer app (signed-in customer): station header, cards, bottom tabs ======== */
.capp { min-height:100vh; background:#F4F6F9; color:#17202B; --c-dim:#5A6573; --c-faint:#8D96A2; --c-line:#E6EAF0; }
.capp-main { max-width:560px; margin:0 auto; padding-bottom:108px; }
.ahero { background:linear-gradient(150deg, var(--brand) 0%, var(--brand2) 62%, #14284A 100%); color:#fff; padding:14px 18px 22px; position:relative; }
.ahero.tall { padding-bottom:74px; }
.ah-bar { display:flex; align-items:center; gap:11px; min-height:44px; }
.ah-logo { width:42px; height:42px; border-radius:13px; background:#fff; display:grid; place-items:center; font-weight:800; color:var(--brand2); box-shadow:0 4px 12px rgba(0,0,0,.18); overflow:hidden; flex:0 0 42px; }
.ah-logo img { width:100%; height:100%; object-fit:contain; padding:4px; }
.ah-back { width:40px; height:40px; border-radius:13px; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; font-size:1.5rem; line-height:1; flex:0 0 40px; }
.ah-t { min-width:0; flex:1; } .ah-t b { display:block; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ah-t small { display:block; opacity:.78; font-size:.8rem; }
.ahero .bell-btn { width:42px; height:42px; border-radius:13px; border:0; background:rgba(255,255,255,.16); color:#fff; }
.ahero .bell-panel .bell-btn.small { width:auto; height:auto; background:#fff; color:#1C2421; border:1px solid #E2DED4; }
.ah-hello { font-size:1.6rem; font-weight:800; letter-spacing:-.025em; margin:18px 0 3px; } .ah-sub { opacity:.82; font-size:.94rem; }
.ah-pill { display:inline-flex; padding:4px 11px; border-radius:20px; background:rgba(255,255,255,.18); font-size:.76rem; font-weight:800; white-space:nowrap; }
.ah-steps { display:flex; align-items:center; margin:18px 4px 0; } .ah-steps i { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.3); flex:0 0 12px; }
.ah-steps i.d { background:#fff; } .ah-steps i.n { background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.28); }
.ah-steps em { flex:1; height:3px; background:rgba(255,255,255,.3); } .ah-steps em.d { background:#fff; }
.ah-slabels { display:flex; justify-content:space-between; font-size:.68rem; font-weight:700; opacity:.8; margin-top:7px; }
.abody { padding:16px 16px 0; display:flex; flex-direction:column; gap:14px; }
.abody.lift { margin-top:-54px; position:relative; z-index:2; padding-top:0; }
.acard { background:#fff; border-radius:22px; padding:16px; box-shadow:0 6px 20px rgba(20,40,74,.07); border:1px solid rgba(230,234,240,.8); color:#17202B; display:block; }
a.acard:hover { box-shadow:0 8px 24px rgba(20,40,74,.12); }
.acard.ready { background:linear-gradient(150deg,#E3F4F6,#F4FBFC); border:1.5px solid #9FD3DA; }
.albl { font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--c-faint); margin:4px 6px -6px; display:flex; justify-content:space-between; }
.albl a { color:var(--brand); letter-spacing:0; text-transform:none; font-size:.85rem; }
.apill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:.74rem; font-weight:800; white-space:nowrap; }
.apill.new { background:#F7EEDC; color:#B7791F; } .apill.priced { background:#D5EEF1; color:#1E8A9A; } .apill.confirmed { background:#E4EDF8; color:#2F6FB5; }
.apill.en_route { background:#ECE9F6; color:#6B5BA8; } .apill.paid { background:#E3F3EA; color:#1F8A4C; } .apill.topay { background:#F7EEDC; color:#B7791F; } .apill.cancelled { background:#EEF0F3; color:#8D96A2; }
.abig { font-size:1.8rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.ago-btn { margin-left:auto; width:38px; height:38px; border-radius:12px; background:#EEF3FA; display:grid; place-items:center; color:var(--brand); font-weight:800; font-size:1.2rem; flex:0 0 38px; }
.acta { display:flex; align-items:center; gap:14px; }
.acta .ico { width:56px; height:56px; border-radius:17px; background:linear-gradient(150deg,var(--brand),var(--brand2)); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px rgba(20,40,74,.25); flex:0 0 56px; }
.acta .ico svg { width:28px; height:28px; } .acta b { font-size:1.1rem; display:block; } .acta span { color:var(--c-dim); font-size:.86rem; }
.aprog { display:flex; gap:5px; margin-top:12px; } .aprog span { flex:1; height:6px; border-radius:3px; background:#E3E8EF; } .aprog span.d { background:var(--brand); } .aprog span.n { background:#1E8A9A; }
.alist .ao { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-line); color:#17202B; }
.alist .ao:first-child { padding-top:2px; } .alist .ao:last-child { border:0; padding-bottom:2px; }
.alist .dot { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-weight:800; flex:0 0 44px; }
.alist .dot svg { width:22px; height:22px; } .alist b { display:block; } .alist small { color:var(--c-dim); font-size:.84rem; }
.alist .ao .apill { margin-left:auto; }
.abtn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; border-radius:16px; font:inherit; font-weight:700; font-size:1.02rem; border:1px solid var(--c-line); background:#fff; color:#17202B; cursor:pointer; }
.abtn.pri { background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:0 8px 18px rgba(20,40,74,.2); }
.abtn.ok { background:#1F8A4C; border-color:#1F8A4C; color:#fff; box-shadow:0 8px 18px rgba(31,138,76,.28); }
.abtn.no { color:#C8322B; border-color:#F1D3D1; } .abtn.quiet { border:0; background:transparent; color:var(--c-dim); }
.abtn:disabled { opacity:.55; cursor:default; }
.aseg { display:flex; background:#EEF1F5; border-radius:14px; padding:4px; }
.aseg button { flex:1; border:0; background:transparent; padding:11px 6px; border-radius:11px; font:inherit; font-weight:700; color:var(--c-dim); cursor:pointer; }
.aseg button.on { background:#fff; color:#17202B; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.astep { display:flex; align-items:center; justify-content:space-between; background:#F7F9FC; border-radius:18px; padding:12px; margin-top:14px; }
.astep button { width:50px; height:50px; border-radius:15px; background:#fff; border:1px solid var(--c-line); font-size:1.6rem; font-weight:700; color:var(--brand); cursor:pointer; flex:0 0 50px; }
.astep .v { text-align:center; flex:1; min-width:0; } .astep input { width:100%; border:0; background:transparent; text-align:center; font:inherit; font-size:2.3rem; font-weight:800; letter-spacing:-.03em; color:#17202B; outline:none; -moz-appearance:textfield; }
.astep input::-webkit-outer-spin-button, .astep input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.astep small { display:block; color:var(--c-faint); font-weight:800; font-size:.74rem; letter-spacing:.08em; }
.achips { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.achips button { padding:12px 0; border-radius:13px; background:#F1F4F8; border:0; font:inherit; font-weight:700; color:var(--c-dim); cursor:pointer; } .achips button.on { background:var(--brand); color:var(--on-brand); }
.afield { display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--c-line); }
.afield:last-child { border:0; } .acard.fields { padding:4px 16px; }
.afield .fi { width:36px; height:36px; border-radius:11px; background:#EEF3FA; display:grid; place-items:center; color:var(--brand); flex:0 0 36px; } .afield .fi svg { width:19px; height:19px; }
.afield > span { color:var(--c-dim); font-size:.92rem; min-width:46px; }
.afield input, .afield select { margin-left:auto; border:0; background:transparent; font:inherit; font-weight:700; color:#17202B; text-align:right; min-width:0; flex:1; outline:none; padding:6px 0; }
.afield select { text-align-last:right; }
.afield input::placeholder { color:var(--c-faint); font-weight:500; }
.anote { background:#FBF6EA; border-radius:14px; padding:11px 13px; color:#6A5420; font-size:.88rem; line-height:1.45; }
.arows > div { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed var(--c-line); } .arows > div:last-child { border:0; }
.arows span { color:var(--c-dim); } .arows b { font-variant-numeric:tabular-nums; text-align:right; }
.atotal { display:flex; justify-content:space-between; align-items:baseline; background:linear-gradient(150deg,var(--brand),var(--brand2)); color:#fff; border-radius:18px; padding:16px 18px; }
.atotal span { opacity:.85; } .atotal b { font-size:1.75rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.aset { padding:2px 16px; }
.aset .s { display:flex; align-items:center; gap:12px; padding:13px 0; border:0; border-bottom:1px solid var(--c-line); color:#17202B; width:100%; background:none; font:inherit; text-align:left; cursor:pointer; }
.aset .s:last-child { border-bottom:0; }
.aset .si { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 38px; color:var(--brand); background:#EEF3FA; } .aset .si svg { width:20px; height:20px; }
.aset .s b { display:block; font-size:.96rem; } .aset .s small { color:var(--c-dim); font-size:.8rem; }
.aset .s .r { margin-left:auto; color:var(--c-faint); font-weight:800; font-size:1.2rem; }
.atg { margin-left:auto; width:48px; height:29px; border-radius:15px; background:#D3D9E2; position:relative; flex:0 0 48px; border:0; cursor:pointer; transition:background .15s; }
.atg::after { content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s; }
.atg.on { background:#1F8A4C; } .atg.on::after { left:22px; }
.apush { display:flex; align-items:center; gap:10px; border-radius:14px; padding:11px 12px; font-weight:600; font-size:.88rem; margin:12px 0 4px; background:#F1F4F8; color:var(--c-dim); }
.apush.ok { background:#E3F3EA; color:#1F8A4C; } .apush .abtn { width:auto; min-height:38px; padding:0 14px; margin-left:auto; font-size:.88rem; border-radius:12px; }
.ainp { width:100%; border:1.5px solid var(--c-line); border-radius:16px; height:56px; padding:0 14px; font:inherit; font-size:1.15rem; letter-spacing:.2em; background:#fff; color:#17202B; outline:none; }
.ainp:focus { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.aflbl { font-size:.76rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c-faint); margin:14px 2px 8px; display:block; }
.amsg { border-radius:14px; padding:11px 13px; font-size:.9rem; } .amsg.ok { background:#E3F3EA; color:#1F8A4C; } .amsg.err { background:#FBEAE8; color:#C8322B; }
.aempty { text-align:center; color:var(--c-dim); padding:22px 10px; }
.capp-tabs { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; width:calc(100% - 24px); max-width:536px; height:68px; background:#fff; border-radius:24px;
             box-shadow:0 10px 30px rgba(20,40,74,.16); display:flex; align-items:center; justify-content:space-around; z-index:30; }
.ctab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.74rem; font-weight:700; color:#8D96A2; padding:6px 14px; }
.ctab .ti { height:28px; width:28px; display:grid; place-items:center; border-radius:10px; } .ctab .ti svg { width:22px; height:22px; }
.ctab.active { color:var(--brand); } .ctab.active .ti { background:var(--brand-soft); width:48px; }
.capp .track { margin:0; border-radius:22px; } .capp .card { border-radius:22px; margin:0; }

/* ======== sign-in: the station's colours, the PIN in big boxes ======== */
.lg-frame { display:flex; flex-direction:column; }
.lgn { max-width:520px; width:100%; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.lg-hero { background:linear-gradient(150deg, var(--brand) 0%, var(--brand2) 62%, #14284A 100%); color:#fff; text-align:center; padding:48px 22px 84px; }
.lg-logo { width:88px; height:88px; border-radius:25px; background:#fff; margin:0 auto 14px; display:grid; place-items:center; font-weight:800; font-size:1.7rem; color:var(--brand2); box-shadow:0 14px 30px rgba(0,0,0,.25); overflow:hidden; }
.lg-logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
.lg-hero h1 { margin:0; font-size:1.55rem; letter-spacing:-.02em; color:#fff; } .lg-hero p { margin:6px 0 0; opacity:.85; }
.lg-card { margin:-56px 16px 0; background:#fff; border-radius:26px; padding:22px 18px; box-shadow:0 14px 34px rgba(20,40,74,.12); position:relative; }
.lg-text { color:var(--c-dim); margin:0 0 4px; font-size:.92rem; line-height:1.45; }
.lg-tel { display:flex; align-items:center; gap:10px; border:1.5px solid var(--c-line); border-radius:16px; height:58px; padding:0 14px; background:#fff; }
.lg-tel:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.lg-tel span { font-weight:700; color:var(--c-dim); padding-right:10px; border-right:1px solid var(--c-line); }
.lg-tel input { border:0; outline:none; font:inherit; font-size:1.2rem; font-weight:700; letter-spacing:.03em; flex:1; min-width:0; background:transparent; color:#17202B; }
.lg-who { display:flex; align-items:center; gap:12px; background:#F4F7FB; border-radius:16px; padding:12px 14px; }
.lg-who .av { width:42px; height:42px; border-radius:13px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 42px; } .lg-who .av svg { width:20px; height:20px; }
.lg-who small { display:block; color:var(--c-dim); font-size:.78rem; } .lg-who b { font-size:1.15rem; letter-spacing:.02em; }
.lg-who button, .lg-hint button, .lg-foot button { margin-left:auto; border:0; background:none; color:var(--brand); font:inherit; font-weight:700; cursor:pointer; padding:4px; white-space:nowrap; }
.lg-center { text-align:center; margin-top:20px; }
.lg-pins { position:relative; display:flex; gap:12px; justify-content:center; }
.lg-pins span { width:62px; height:66px; border-radius:16px; border:1.5px solid var(--c-line); display:grid; place-items:center; font-size:1.6rem; color:#17202B; background:#fff; }
.lg-pins span.f { border-color:var(--brand-mid); } .lg-pins span.c { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.lg-pins input { position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; border:0; cursor:pointer; }
.lg-hint { text-align:center; color:var(--c-dim); font-size:.86rem; margin:12px 0 0; } .lg-hint button { margin:0; padding:0 2px; }
.lg-safe { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--c-faint); font-size:.8rem; margin:14px 0 0; } .lg-safe svg { width:14px; height:14px; }
.lg-foot { margin-top:auto; padding:22px 16px 26px; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--c-faint); font-size:.86rem; text-align:center; }
.lg-foot a { color:var(--c-dim); font-weight:600; } .lg-foot button { margin:0; padding:0 2px; }
.lg-contact a { color:var(--c-dim); }
.lg-card .anote { margin-top:12px; }

/* the station's QR code card (Mazout Main brand tab, station page) */
.qr-card { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.qr-card img { width:168px; height:168px; border-radius:14px; border:1px solid var(--line, #E2DED4); background:#fff; padding:6px; flex:0 0 168px; }
.qr-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.qr-txt span { color:#4A5550; font-size:.9rem; line-height:1.45; }
.qr-txt code { font-size:.85rem; background:#F1F4F8; padding:4px 8px; border-radius:8px; align-self:flex-start; word-break:break-all; }
.qr-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.lg-tel input::placeholder { color:#B4BCC6; font-weight:600; }