:root {
  --ink: #17211b;
  --muted: #68736b;
  --paper: #fffdf8;
  --canvas: #f4f6ef;
  --line: #dce3d7;
  --accent: #1f7a54;
  --accent-strong: #126142;
  --accent-soft: #e5f3ea;
  --warn: #a35f06;
  --warn-soft: #fff2d7;
  --danger: #b43730;
  --danger-soft: #ffebe9;
  --success: #176a47;
  --shadow: 0 18px 45px rgba(31, 55, 40, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-width: 320px; margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #e4f1df 0, transparent 32rem), var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .64; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 50; padding: .5rem .75rem; transform: translateY(-200%); background: var(--ink); color: white; border-radius: .5rem; }
.skip-link:focus { transform: none; }
.app-shell { width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(1rem, 2vw, 2.25rem); }
.boot-card, .auth-card { width: min(600px, 100%); margin: max(7vh, 2rem) auto; padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 .4rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 5vw, 2.55rem); line-height: 1.07; letter-spacing: -.04em; }
h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.65rem); letter-spacing: -.025em; }
h3 { margin: 0; font-size: 1rem; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .75rem 0 1.1rem; }
.brand { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.brand-mark { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; border-radius: .85rem; background: var(--accent); color: white; font-weight: 900; box-shadow: 0 8px 20px rgba(31, 122, 84, .25); }
.brand p { margin: .1rem 0 0; color: var(--muted); font-size: .83rem; }
.layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.nav, .panel, .subpanel { background: color-mix(in srgb, var(--paper) 92%, white); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 10px 28px rgba(31, 55, 40, .045); }
.nav { display: grid; gap: .25rem; position: sticky; top: 1rem; padding: .5rem; }
.nav button { width: 100%; min-height: 2.7rem; padding: .6rem .75rem; border: 0; border-radius: .7rem; color: var(--ink); background: transparent; text-align: left; font-weight: 650; }
.nav button[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
.panel { min-width: 0; padding: clamp(1rem, 2.5vw, 1.5rem); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.panel-head p { margin: .35rem 0 0; color: var(--muted); }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subpanel { padding: 1rem; }
.subpanel > h3 { margin-bottom: .4rem; }
.section-spaced { margin-top: 1rem; }
.section-spaced-large { margin-top: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: .35rem; color: #344037; font-size: .86rem; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 2.7rem; padding: .62rem .7rem; color: var(--ink); background: white; border: 1px solid #cbd6ca; border-radius: .65rem; outline-offset: 2px; }
textarea { min-height: 5.4rem; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, white); }
input[type="checkbox"] { width: 1.15rem; min-height: 1.15rem; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: .55rem; min-height: 2.7rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: .65rem; font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-top: .9rem; }
.input-action, .copy-field { display: flex; min-width: 0; gap: .5rem; align-items: center; }
.input-action input, .copy-field input { min-width: 0; }
.input-action .button, .copy-field .button { flex: 0 0 auto; }
.copy-field .code { min-width: 0; flex: 1 1 auto; }
.telegram-steps { display: grid; gap: .45rem; margin: 1rem 0; padding-left: 1.3rem; color: var(--muted); line-height: 1.45; }
.telegram-status { margin-top: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: .75rem; background: #f9fbf6; }
.telegram-status.ready { border-color: #a5d5b8; background: var(--accent-soft); }
.telegram-status.needs-attention { border-color: #ead29a; background: var(--warn-soft); }
.telegram-status p { margin: .55rem 0 0; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.telegram-status-error { color: #774600; }
.inline-checks { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.inline-checks .check { min-height: 2.15rem; padding: .32rem .5rem; font-size: .78rem; }
.compact-check input[type="checkbox"] { flex: none; }
.button { min-height: 2.65rem; padding: .6rem .85rem; border: 1px solid transparent; border-radius: .68rem; background: var(--accent); color: white; font-weight: 800; }
.button:hover:not(:disabled) { background: var(--accent-strong); }
.button.secondary { color: var(--ink); border-color: var(--line); background: white; }
.button.warning { background: var(--warn); }
.button.danger { background: var(--danger); }
.button.compact { min-height: 2.15rem; padding: .4rem .6rem; font-size: .82rem; }
.notice { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #f9fbf6; line-height: 1.45; }
.notice.success { border-color: #a5d5b8; background: var(--accent-soft); color: var(--success); }
.notice.warning { border-color: #ead29a; background: var(--warn-soft); color: #744300; }
.notice.error { border-color: #efb2ad; background: var(--danger-soft); color: #812b27; }
.notice button { flex: none; border: 0; background: transparent; color: inherit; font-weight: 800; }
.stat { min-height: 7rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; }
.stat strong { display: block; margin-top: .4rem; font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: -.04em; }
.stat span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; }
table { width: 100%; min-width: 660px; border-collapse: collapse; background: white; }
th, td { padding: .7rem .75rem; border-bottom: 1px solid #edf0eb; vertical-align: top; text-align: left; font-size: .88rem; }
th { color: var(--muted); background: #f8faf6; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.tag { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .15rem .48rem; border-radius: 100rem; background: #eef1ee; color: #445046; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.tag.success { background: var(--accent-soft); color: var(--success); }
.tag.warning { background: var(--warn-soft); color: #774600; }
.tag.danger { background: var(--danger-soft); color: #8a2e29; }
.empty { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.steps { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0; }
.step { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: 100rem; background: #edf1eb; color: var(--muted); font-size: .8rem; font-weight: 750; }
.step.active { color: var(--accent-strong); background: var(--accent-soft); }
.code { padding: .5rem .65rem; border-radius: .5rem; background: #eef2ec; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.route-builder { display: grid; gap: .7rem; padding: .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #f9fbf6; }
.address-field { position: relative; min-width: 0; }
.address-suggestions { display: grid; gap: .35rem; max-height: 15rem; margin-top: .35rem; padding: .4rem; overflow-y: auto; border: 1px solid #cbd6ca; border-radius: .65rem; background: white; box-shadow: 0 .5rem 1.2rem rgba(31, 55, 40, .1); }
.address-suggestions[hidden] { display: none; }
.address-suggestion { display: grid; gap: .15rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--ink); text-align: left; }
.address-suggestion:hover, .address-suggestion:focus-visible { background: var(--accent-soft); }
.address-suggestion strong, .address-suggestion small { overflow-wrap: anywhere; }
.address-suggestion small, .address-suggestion-empty { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.address-suggestion-empty { margin: .15rem .25rem; }
.route-builder-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.route-builder-head p { margin: .25rem 0 0; }
.route-point-controls, .address-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.address-actions > .muted { flex: 1 1 14rem; min-width: 0; }
.route-point-controls .button.active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.route-map { width: 100%; height: clamp(16rem, 42vw, 25rem); overflow: hidden; border: 1px solid #bfd0c2; border-radius: .7rem; background: #e8eee7; }
.route-map[hidden] { display: none; }
.map-status { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.map-status.error { color: var(--danger); }
.route-marker { display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; transform: translate(-50%, -100%); border: 2px solid white; border-radius: 100%; box-shadow: 0 .2rem .7rem rgba(18, 35, 24, .26); color: white; font-size: .82rem; font-weight: 900; }
.route-marker.pickup { background: #147a54; }
.route-marker.dropoff { background: #b43730; }
.delivery-list { display: grid; gap: .75rem; }
.delivery-card { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: white; box-shadow: 0 .5rem 1.4rem rgba(31, 55, 40, .04); }
.delivery-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.delivery-card-head .eyebrow { margin-bottom: .2rem; }
.delivery-card-head h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
.delivery-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .85rem; margin: 0; }
.delivery-facts div { min-width: 0; }
.delivery-facts dt { margin: 0 0 .15rem; color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.delivery-facts dd { margin: 0; overflow-wrap: anywhere; line-height: 1.38; }
.delivery-comment { margin: .85rem 0 0; padding-top: .75rem; border-top: 1px solid #edf0eb; overflow-wrap: anywhere; }
.delivery-route-warning { margin: .85rem 0 0; padding: .65rem .75rem; border: 1px solid #ead29a; border-radius: .65rem; background: var(--warn-soft); color: #774600; font-size: .86rem; line-height: 1.4; }
.delivery-actions { margin-top: .8rem; }

@media (max-width: 820px) {
  .app-shell { padding: .85rem; }
  .app-header { align-items: flex-start; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nav { position: static; display: flex; overflow-x: auto; padding: .4rem; }
  .nav button { width: auto; flex: 0 0 auto; text-align: center; white-space: nowrap; }
}

@media (max-width: 600px) {
  .app-header { flex-wrap: wrap; }
  .grid.two, .grid.three, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-head { display: grid; }
  .panel, .subpanel { border-radius: .85rem; }
  .actions .button { flex: 1 1 10rem; }
  .input-action, .copy-field { align-items: stretch; flex-wrap: wrap; }
  .input-action input, .copy-field input, .copy-field .code { flex: 1 1 100%; }
  .input-action .button, .copy-field .button { flex: 1 1 10rem; }
  .inline-checks .button { flex: 1 1 100%; }
  .form-grid .wide { grid-column: auto; }
  .route-builder { padding: .75rem; }
  .route-map { height: 18rem; }
  .route-point-controls .button, .address-actions .button { flex: 1 1 8rem; }
  .delivery-facts { grid-template-columns: minmax(0, 1fr); }
  .delivery-card-head { align-items: flex-start; }
}