/* FastLoad — слой визуального апгрейда. Грузится ПОСЛЕ инлайн-стилей и переопределяет их.
   Тема: ночной диспетчерский пульт фрахта. Янтарь — сигнальный цвет (дорожные знаки). */

/* ── палитра (имена те же, что в страницах → меняется всё разом) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root{
  --bg:#0a0d12; --surface:#141a22; --surface2:#1c242e; --border:#28333f;
  --text:#e8edf3; --muted:#8694a4; --accent:#e08a2e; --ok:#35d39a; --danger:#f06a6a;
  --accent2:#c47216; --accent-ink:#1c1305; --green:#2f8d5b;
  --font-display:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ── фон с лёгким янтарным свечением сверху ── */
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(224,138,46,.07), transparent 62%),
    var(--bg) !important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono{font-family:var(--font-mono)}

/* ── логотип ── */
.brand{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.01em}
.brand .b{color:var(--accent)}                       /* старая разметка тоже остаётся читаемой */
.logo-mark{height:23px;width:auto;display:block}
.logo-word{font-family:'Outfit',var(--font-display);font-size:21px;line-height:1;color:var(--text);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.logo-word b{color:var(--accent);font-weight:700}
.brand{letter-spacing:0}

/* ── шапка + сигнальная линия ── */
.topbar{position:relative;background:linear-gradient(180deg,#161d26,#121821);
  border-bottom:1px solid var(--border);box-shadow:0 6px 22px rgba(0,0,0,.28)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,138,46,.55),transparent)}
.nav button{font-weight:600;transition:color .15s,background .15s}
.nav button.active{background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border)}

/* ── заголовки ── */
h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.eyebrow,.section-label{font-family:var(--font-display);color:var(--accent);font-weight:600}

/* ── кнопки ── */
.btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);
  border-radius:9px;font-weight:600;transition:transform .12s,border-color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:var(--muted);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-accent{font-family:var(--font-display);font-weight:700;color:var(--accent-ink);
  background:linear-gradient(180deg,#eda23f,#d2801b);border-color:#c4761a;
  box-shadow:0 5px 16px rgba(224,138,46,.30)}
.btn-accent:hover{background:linear-gradient(180deg,#ffc257,#ef9a1c);
  box-shadow:0 7px 20px rgba(247,167,36,.40);border-color:#efa128}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}
.btn-danger{background:transparent;border-color:transparent;color:var(--danger)}
.btn-danger:hover{background:rgba(240,106,106,.10);border-color:transparent}
.btn-send{font-family:var(--font-display);font-weight:700;color:#fff;
  background:linear-gradient(180deg,#37a06a,#27754c);border-color:#27754c;
  box-shadow:0 5px 16px rgba(47,141,91,.30)}
.btn-send:hover:not(:disabled){background:linear-gradient(180deg,#3eb478,#2c8456);
  box-shadow:0 7px 20px rgba(47,141,91,.40)}

/* ── поля ── */
input,textarea,select{background:#0b0f15;border-radius:9px;
  transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(247,167,36,.16)}

/* ── карточки / панели / таблица / модалки ── */
.card{border-radius:14px;box-shadow:var(--shadow);
  background:linear-gradient(180deg,#161d26,var(--surface))}
table{border-radius:13px;box-shadow:var(--shadow)}
th{font-family:var(--font-display)}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(255,255,255,.025)}
.modal,.sheet{border-radius:16px;box-shadow:var(--shadow);
  background:linear-gradient(180deg,#161d26,var(--surface))}
.overlay{background:rgba(5,7,10,.62);backdrop-filter:blur(3px)}
.badge{border-radius:999px;font-weight:600}
.badge.on{background:rgba(53,211,154,.10)}
.empty{border-radius:14px}

/* ── лента лоадов: «полосы» с янтарным краем ── */
.load{position:relative;overflow:hidden;border-radius:13px;
  background:linear-gradient(180deg,#161d26,var(--surface));
  transition:transform .12s,border-color .15s,box-shadow .15s}
.load::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:0;transition:opacity .15s}
.load:hover{transform:translateY(-1px);border-color:#3a4756;
  box-shadow:0 10px 26px rgba(0,0,0,.30)}
.load:hover::before{opacity:1}
.load .route{font-family:var(--font-display);font-weight:700}
.load .route .arrow{color:var(--accent)}
.load .rate{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em}
.chev{transition:transform .15s}
.load:hover .chev{transform:translateX(3px);color:var(--accent)}

/* ── чипсы доставки ── */
.chip{background:rgba(247,167,36,.10);border-color:rgba(247,167,36,.32);border-radius:8px}

/* ── bid-страница ── */
.head .title{font-family:var(--font-display)}

/* ── доступность / мягкая адаптация (полноценный мобильный проход — отдельно) ── */
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media (max-width:640px){
  /* шапка: лого слева, кнопки справа, табы — отдельной строкой во всю ширину */
  .topbar{flex-wrap:wrap;gap:10px 12px;padding:11px 14px !important}
  .brand{font-size:16px}
  .logo-word{font-size:19px}
  .right{gap:10px;font-size:12px;margin-left:auto}
  .nav{order:3;width:100%;gap:4px}
  .nav button{flex:1;text-align:center;padding:9px 6px}

  /* контент: меньше полей */
  main{padding:18px 13px !important}
  .head{flex-wrap:wrap;gap:10px}
  .head h1{font-size:17px}

  /* карточки/панели */
  .card{padding:16px !important;max-width:none}

  /* сетки форм в один столбец */
  .row2,.row3,.lt-grid{grid-template-columns:1fr !important}

  /* модалки и детали — во всю ширину, ниже отступы */
  .overlay{padding:10px !important}
  .modal,.sheet{max-width:none !important;width:100% !important;padding:18px !important}
  .modal{max-height:94vh}

  /* ряды кнопок — в столбик и во всю ширину (удобно пальцем) */
  .modal-actions,.bar{flex-direction:column-reverse !important;align-items:stretch !important}
  .modal-actions .btn,.bar .btn{width:100%;text-align:center;padding:12px}
  .card .actions{flex-direction:column !important}        /* bid: Copy/Send в столбик */
  .sheet-actions{flex-wrap:wrap}

  /* широкая таблица водителей → горизонтальная прокрутка */
  #drvList{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  #drvList table{min-width:720px}

  /* лента лоадов в кабинете */
  .load{padding:14px !important;gap:12px}
  .load .route{font-size:14px}
  .load .rate{font-size:17px}

  /* поля 16px — чтобы iOS не зумил при фокусе */
  input,textarea,select{font-size:16px !important}
}

@media (max-width:400px){
  .right .who{display:none}                                /* email прячем на узких */
  .brand{gap:10px}
  .logo-mark{height:21px}
}