/* Премиальное оформление экрана водителя (в одном стиле с пассажиром). Цвета — из темы. */
html body { font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
#panel { border-radius: 24px 24px 0 0; padding: 22px 16px 16px; box-shadow: 0 -8px 30px rgba(0,0,0,.14); }
#panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
  border-radius: 3px; background: var(--c-line, #d9d9de); }
#panel button { border-radius: 14px; font-weight: 700; transition: transform .08s, filter .15s; }
#panel button:active { transform: scale(.98); filter: brightness(.95); }
#panel button.secondary { background: var(--c-soft, #f2f2f5); color: var(--c-text, #18181b); }
#panel button.danger { background: transparent; color: #e5484d; border: 1.5px solid #e5484d; }
#panel .card { border: 0; border-radius: 20px; background: var(--c-soft, #f6f6f8); padding: 16px; }
#main .city-row { display: none; }

/* Шапка: на линии / не на линии и баланс */
#panel .bb-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
#panel .bb-state { font-size: 22px; font-weight: 800; color: var(--c-text, #18181b); display: flex; align-items: center; gap: 10px; }
#panel .bb-state i { width: 12px; height: 12px; border-radius: 50%; background: #a1a1aa; box-shadow: 0 0 0 4px rgba(161,161,170,.2); }
#panel .bb-state.on i { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.22); }
#panel .bb-chip { width: auto; margin: 0; padding: 8px 14px; border-radius: 14px; font-size: 16px; font-weight: 800;
  background: var(--c-soft, #f2f2f5); color: var(--c-text, #18181b); }
#panel .bb-chip.low { background: #fee2e2; color: #b91c1c; }

/* Главная кнопка «Выйти на линию / Уйти с линии» */
#panel #btn-online { height: 58px; font-size: 19px; font-weight: 800; border-radius: 18px; background: #FFD21F; color: #18181b;
  box-shadow: 0 6px 16px rgba(255,190,0,.35); }
#panel #btn-online.danger { background: transparent; color: #e5484d; border: 2px solid #e5484d; box-shadow: none; }

/* Текущий заказ */
#panel #ride-box { background: var(--c-sheet, #fff); border: 2px solid #FFD21F; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
#panel #ride-status { font-size: 22px; font-weight: 800; }
#panel #btn-next { height: 56px; font-size: 19px; font-weight: 800; background: #FFD21F; color: #18181b; box-shadow: 0 6px 16px rgba(255,190,0,.35); }
#panel #chain-card { border: 2px solid #FFD21F !important; background: var(--c-sheet, #fff); }

/* Заявки */
#panel #board-card { background: transparent; padding: 0; }
#panel #board-title { display: block; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
#panel .bb-req { background: var(--c-sheet, #fff); border: 1px solid var(--c-line, #e8e8ec); border-radius: 20px; padding: 14px;
  margin: 10px 0; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
#panel .bb-req-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#panel .bb-req-price { font-size: 26px; font-weight: 800; color: var(--c-text, #18181b); }
#panel .bb-req-dist { font-size: 13px; color: var(--c-muted, #6b6b70); text-align: right; }
#panel .bb-req-addr { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 16px; font-weight: 600; color: var(--c-text, #18181b); }
#panel .bb-ring { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 4px solid #FFD21F; box-shadow: 0 0 0 1.5px #1d1d1f; }
#panel .bb-flag { flex: none; width: 16px; height: 20px; background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2 1h1.6v18H2z' fill='%231d1d1f'/%3E%3Cpath d='M3.6 1.5H15l-2.6 3.2L15 8H3.6z' fill='%23FFD21F' stroke='%231d1d1f' stroke-width='.9'/%3E%3C/svg%3E"); }
#panel .bb-req button { margin: 12px 0 0; height: 52px; font-size: 18px; font-weight: 800; background: #FFD21F; color: #18181b; }

/* Карта: без «+/−», кнопки — круглые */
.leaflet-control-zoom { display: none !important; }
.leaflet-top.leaflet-left button[title="Где я"] { width: 48px !important; height: 48px !important; border-radius: 50% !important;
  border: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; font-size: 22px !important; }
#dr-btn { box-shadow: 0 4px 14px rgba(0,0,0,.2) !important; }


/* Ночью: древко флажка и полоски меню ☰ — белые */
html[data-dark] #dr-btn { color: #fff !important; }
html[data-dark] .bb-stick { background: #fff !important; }
html[data-dark] .leaflet-marker-icon svg[viewBox="0 0 30 40"] path:first-child { fill: #fff; }
html[data-dark] #panel .bb-flag { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M2 1h1.6v18H2z' fill='%23fff'/%3E%3Cpath d='M3.6 1.5H15l-2.6 3.2L15 8H3.6z' fill='%23FFD21F' stroke='%231d1d1f' stroke-width='.9'/%3E%3C/svg%3E"); }