:root {
  --navy: #0a1730;
  --blue: #163f7a;
  --blue-2: #20549d;
  --ink: #172033;
  --muted: #6c768a;
  --line: #e4e9f1;
  --surface: #ffffff;
  --bg: #f5f7fb;
  --green-bg: #eaf7ef;
  --green: #15743b;
  --red-bg: #fff0f0;
  --red: #a92929;
  --shadow: 0 16px 45px rgba(18, 33, 62, 0.08);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
.site-header { min-height: 82px; padding: 16px clamp(20px,4vw,56px); display:flex; align-items:center; justify-content:space-between; background: linear-gradient(100deg, var(--navy), var(--blue)); color:#fff; position: sticky; top:0; z-index:20; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.brand-wrap { display:flex; align-items:center; gap:13px; }
.brand-logo { width:50px; height:50px; object-fit:contain; border-radius:10px; background:#fff; padding:5px; }
.company { font-weight:800; font-size:18px; letter-spacing:.01em; }
.page-title { opacity:.78; font-size:13px; margin-top:2px; }
.header-meta { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; }
.live-dot { width:9px; height:9px; border-radius:999px; background:#3ddc84; box-shadow:0 0 0 4px rgba(61,220,132,.18); }
.page-shell { width:min(1450px, calc(100% - 34px)); margin:0 auto; }
.hero { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; padding:46px 0 26px; }
.eyebrow { color:var(--blue-2); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.15em; margin:0 0 9px; }
h1 { font-size:clamp(28px,4vw,46px); letter-spacing:-.035em; margin:0 0 11px; line-height:1.05; }
.hero-copy { color:var(--muted); max-width:780px; line-height:1.65; margin:0; }
.updated-card { flex:0 0 auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 16px; min-width:170px; box-shadow:var(--shadow); }
.updated-card span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:700; letter-spacing:.07em; margin-bottom:4px; }
.updated-card strong { font-size:14px; }
.toolbar { display:grid; grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(145px,.7fr)) auto; gap:10px; background:#fff; border:1px solid var(--line); padding:12px; border-radius:16px; box-shadow:var(--shadow); }
.search-wrap { position:relative; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-52%); color:var(--muted); font-size:20px; }
input, select, button, a { font:inherit; }
input, select { width:100%; height:44px; border:1px solid #dfe5ee; border-radius:10px; background:#fff; color:var(--ink); outline:none; }
input { padding:0 14px 0 42px; }
select { padding:0 34px 0 12px; }
input:focus, select:focus { border-color:#6e93ca; box-shadow:0 0 0 3px rgba(31,83,156,.09); }
.secondary-btn, .primary-btn, .text-btn { border-radius:10px; text-decoration:none; cursor:pointer; transition:.15s ease; }
.secondary-btn { min-height:44px; padding:0 16px; border:1px solid #d7deea; background:#fff; color:var(--ink); font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.secondary-btn:hover { background:#f7f9fc; }
.primary-btn { min-height:44px; padding:0 18px; background:var(--blue); color:#fff; border:1px solid var(--blue); font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.primary-btn:hover { background:#113567; }
.summary-row { display:flex; align-items:center; gap:22px; padding:18px 4px 12px; color:var(--muted); font-size:13px; }
.summary-row strong { color:var(--ink); }
.text-btn { margin-left:auto; background:transparent; border:0; color:var(--blue); font-weight:800; padding:8px; }
.inventory-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); min-height:250px; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:1080px; }
th { text-align:left; padding:13px 15px; background:#f7f9fc; border-bottom:1px solid var(--line); color:#667184; font-size:11px; text-transform:uppercase; letter-spacing:.065em; white-space:nowrap; cursor:pointer; user-select:none; }
th:hover { color:var(--blue); }
td { padding:16px 15px; border-bottom:1px solid #edf0f5; font-size:14px; vertical-align:middle; }
tbody tr:hover { background:#fbfcfe; }
tbody tr:last-child td { border-bottom:0; }
.numeric { text-align:right; }
.model-cell { font-weight:800; color:#111a2a; }
.price-cell { font-weight:900; color:#102f5c; font-variant-numeric:tabular-nums; }
.stock-cell { font-weight:800; font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-weight:800; font-size:12px; white-space:nowrap; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.in { background:var(--green-bg); color:var(--green); }
.badge.out { background:var(--red-bg); color:var(--red); }
.empty-state { padding:64px 20px; text-align:center; color:var(--muted); }
.empty-state strong { display:block; color:var(--ink); font-size:18px; margin-bottom:5px; }
.mobile-cards { display:none; }
.contact-strip { margin:20px 0 36px; border-radius:16px; padding:20px 22px; background:linear-gradient(105deg,#0c1d3b,#183d74); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.contact-strip strong { display:block; font-size:17px; margin-bottom:3px; }
.contact-strip span { opacity:.75; font-size:13px; }
.contact-actions { display:flex; gap:10px; }
.contact-strip .secondary-btn { border-color:rgba(255,255,255,.35); background:transparent; color:#fff; }
.contact-strip .primary-btn { background:#fff; border-color:#fff; color:#143665; }
footer { padding:4px 20px 34px; text-align:center; color:#8992a3; font-size:12px; }
@media (max-width: 940px) {
  .toolbar { grid-template-columns:1fr 1fr; }
  .search-wrap { grid-column:1/-1; }
  .hero { align-items:flex-start; }
  .updated-card { display:none; }
  .contact-strip { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 720px) {
  .site-header { min-height:70px; padding:12px 16px; }
  .brand-logo { width:42px; height:42px; }
  .company { font-size:16px; }
  .page-title { font-size:11px; }
  .page-shell { width:min(100% - 20px, 1450px); }
  .hero { padding:30px 3px 20px; }
  .hero-copy { font-size:14px; }
  .toolbar { grid-template-columns:1fr 1fr; padding:9px; }
  .toolbar .secondary-btn { grid-column:1/-1; }
  .summary-row { flex-wrap:wrap; gap:10px 18px; }
  .text-btn { width:100%; margin-left:0; text-align:left; padding-left:0; }
  .table-scroll { display:none; }
  .mobile-cards { display:grid; gap:10px; padding:10px; background:#f7f9fc; }
  .stock-card { background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px; }
  .stock-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
  .stock-card-brand { color:var(--blue); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
  .stock-card-model { font-weight:900; font-size:18px; margin-top:2px; }
  .stock-card-price { font-size:19px; font-weight:900; color:#102f5c; white-space:nowrap; }
  .card-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  .card-item span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#8b94a4; margin-bottom:2px; }
  .card-item strong { font-size:13px; }
  .card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:12px; border-top:1px solid #edf0f5; }
  .contact-actions { width:100%; }
  .contact-actions a { flex:1; }
}
@media (max-width: 470px) {
  .toolbar { grid-template-columns:1fr; }
  .search-wrap, .toolbar .secondary-btn { grid-column:auto; }
  .header-meta { display:none; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .contact-actions { flex-direction:column; }
}