:root{
  --bg1:#eff6ff;
  --bg2:#f5faff;
  --card:rgba(255,255,255,.82);
  --card2:rgba(255,255,255,.68);
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --border:rgba(31,85,157,.16);

  --blue:#3b82f6;

  --greenSoft: rgba(16,185,129,.16);
  --greenBorder: rgba(16,185,129,.45);

  --yellowSoft: rgba(245,158,11,.18);
  --yellowBorder: rgba(245,158,11,.45);

  --tealSoft: rgba(6,182,212,.16);
  --tealBorder: rgba(6,182,212,.45);

  --dangerSoft: rgba(239,68,68,.12);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  padding:18px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(6,182,212,.12), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{ color:rgba(29,78,216,.95); text-decoration:none; font-weight:800; }
a:hover{ text-decoration:underline; }

h1,h2,h3{ margin:0 0 10px 0; letter-spacing:-.02em; }
p{ margin:8px 0; color:var(--muted); }

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:14px 0;
}

.page{
  max-width: 1200px;
  margin:0 auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 14px 34px rgba(22,67,130,.10);
  padding:14px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.65);
  font-weight:900;
}

button, .btn{
  padding: 10px 14px;
  border: 1px solid rgba(59,130,246,.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(96,165,250,.95), rgba(59,130,246,.95));
  color: rgb(136, 41, 41);
  font-weight: 900;
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 20px rgba(59,130,246,.18);
}
button:hover, .btn:hover{ filter: brightness(1.02); }
button:active, .btn:active{ transform: translateY(1px); }

.btn2{
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(22,67,130,.06);
}

.btnDanger{
  padding: 10px 14px;
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(248,113,113,.92), rgba(239,68,68,.92));
  color:#fff;
  font-weight: 900;
}

input, select, textarea{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.80);
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

table{
  border-collapse: collapse;
  width: 100%;
  background: var(--card2);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
th,td{
  border-bottom: 1px solid rgba(31,85,157,.12);
  padding: 10px 10px;
  vertical-align: top;
}
th{
  text-align: left;
  color: rgba(15,23,42,.72);
  font-weight: 900;
  background: rgba(59,130,246,.08);
}

.hint{ color:var(--muted); font-size:12px; }

/* trips элементы (если классы есть) */
.req{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 18px rgba(22, 67, 130, .08);
}
.req.toWork{ background: var(--greenSoft); border-color: var(--greenBorder); }
.req.fromWork{ background: var(--yellowSoft); border-color: var(--yellowBorder); }
.req.warned{ border-color: rgba(239,68,68,.65); background: var(--dangerSoft); }

.vehicle.roundtrip.mixed{ background: var(--tealSoft); border-color: var(--tealBorder); }

/* ===== Modern top navigation ===== */
.topNav{
  position: sticky;
  top: 10px;
  z-index: 50;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding: 10px 12px;
  margin: 0 auto 14px auto;
  max-width: 1200px;

  border-radius: 18px;
  border: 1px solid rgba(31,85,157,.14);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(22,67,130,.08);
}

.navItem{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,85,157,.14);
  background: rgba(255,255,255,.70);
  font-weight: 900;
}
.navItem span{ opacity:.95; }
.navItem:hover{
  text-decoration:none;
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 10px 24px rgba(59,130,246,.12);
}

/* ===== Login page ===== */
body[data-page="login"]{
  padding-top: 40px;
}
.card.loginCard{
  max-width: 720px;
  margin: 0 auto;
}
.loginShell h2{
  font-size: 28px;
  margin-bottom: 16px;
}
.loginShell form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.loginShell input{
  min-width: 220px;
  flex: 1 1 240px;
}
.loginShell button{
  flex: 0 0 auto;
  min-width: 140px;
}