/* ============================================================
   PSK Rapid Service — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #12161C;
  --bg-elevated: #1A2029;
  --bg-card: #1F2630;
  --bg-card-hover: #242C38;
  --border: #2A323D;
  --border-soft: #232B35;

  --amber: #FFB020;
  --amber-dim: rgba(255,176,32,0.14);
  --amber-glow: rgba(255,176,32,0.35);
  --red: #E5484D;
  --red-dim: rgba(229,72,77,0.14);
  --green: #34D399;
  --green-dim: rgba(52,211,153,0.14);

  --text: #F3F5F7;
  --text-muted: #8D97A5;
  --text-faint: #5C6572;

  --display: 'Barlow Condensed', sans-serif;
  --body: 'Inter', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-lift: 0 12px 32px rgba(0,0,0,0.35);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.2px;
}
h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 700; }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3{ font-size: 1.4rem; }

p{ margin: 0; color: var(--text-muted); max-width: 62ch; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: var(--body); cursor: pointer; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--amber); color: #1A1204; }
.btn-primary:hover{ background: #ffc04d; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--text-muted); }
.btn-danger{ background: var(--red); color: #fff; }
.btn-danger:hover{ background: #f0656a; }
.btn-block{ width: 100%; }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }
.btn[disabled]{ opacity: 0.45; pointer-events: none; }

/* ---------------- Nav ---------------- */
.nav{
  position: sticky; top:0; z-index: 40;
  background: rgba(18,22,28,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner{
  max-width: 1180px; margin:0 auto; padding: 18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--display); font-size: 1.4rem; font-weight:700; }
.brand-mark{ width: 34px; height:34px; border-radius: 8px; background: var(--amber); display:flex; align-items:center; justify-content:center; }
.brand-mark svg{ width:20px; height:20px; }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{ color: var(--text-muted); font-size: 0.95rem; font-weight:500; transition: color .15s; }
.nav-links a:hover{ color: var(--text); }
.nav-cta{ display:flex; gap:12px; }

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 100px 0 70px;
  border-bottom: 1px solid var(--border-soft);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--amber); font-weight:600; font-size:0.9rem;
  margin-bottom: 18px;
}
.hero-eyebrow .dot{ width:7px;height:7px;border-radius:50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-dim); }
.hero h1{ margin-bottom: 22px; }
.hero h1 .accent{ color: var(--amber); }
.hero p.lead{ font-size: 1.15rem; max-width: 46ch; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 40px; }
.hero-stats{ display:flex; gap: 38px; }
.hero-stat b{ display:block; font-family: var(--display); font-size: 2.1rem; font-weight:700; }
.hero-stat span{ color: var(--text-muted); font-size: 0.88rem; }

.hero-visual{
  position: relative;
  height: 460px;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 100% at 70% 30%, #1c2330 0%, #12161C 70%);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.hero-visual canvas{ position:absolute; inset:0; width:100%!important; height:100%!important; }
.hero-visual .road-line{
  position:absolute; bottom: 22%; left:0; right:0; height:2px;
  background: repeating-linear-gradient(90deg, var(--text-faint) 0 26px, transparent 26px 46px);
  opacity: 0.5;
}
.beacon-caption{
  position:absolute; left:22px; bottom:22px; z-index:5;
  font-family: var(--display); font-size: 0.95rem; color: var(--text-muted);
  display:flex; align-items:center; gap:8px;
}
.beacon-caption .pulse{ width:8px;height:8px;border-radius:50%; background: var(--red); animation: pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(229,72,77,0.6);} 50%{ box-shadow: 0 0 0 8px rgba(229,72,77,0);} }

/* ---------------- Sections ---------------- */
.section{ padding: 90px 0; }
.section-alt{ background: var(--bg-elevated); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.section-head{ max-width: 640px; margin-bottom: 54px; }
.section-head h2{ margin-bottom: 14px; }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
}

.feature-card .icon{
  width: 44px; height:44px; border-radius: 10px;
  background: var(--amber-dim); color: var(--amber);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.feature-card h3{ margin-bottom:10px; }
.feature-card p{ font-size: 0.95rem; }

/* How it works - genuine sequence, numbering earned */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: step; }
.step{ position: relative; padding-top: 6px; }
.step .num{
  font-family: var(--display); font-size: 2.6rem; font-weight:700;
  color: transparent; -webkit-text-stroke: 1.5px var(--border);
  display:block; margin-bottom: 6px;
}
.step h4{ font-family: var(--body); font-weight:600; font-size:1.05rem; margin-bottom:8px; color:var(--text); }
.step p{ font-size: 0.9rem; }
.step:not(:last-child)::after{
  content:''; position:absolute; top: 18px; right: -12px; width: 20px; height:1px;
  background: var(--border);
  display: none;
}
@media(min-width: 900px){ .step:not(:last-child)::after{ display:block; } }

/* Coverage map strip */
.coverage-strip{ display:flex; gap: 16px; flex-wrap: wrap; }
.coverage-pill{
  display:flex; align-items:center; gap:10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--bg-card); border:1px solid var(--border);
  font-size:0.92rem;
}
.coverage-pill .dot{ width:8px;height:8px;border-radius:50%; background: var(--green); }

/* Issue tags grid on landing */
.issue-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.issue-tag{ padding: 9px 16px; border:1px solid var(--border); border-radius: 999px; font-size:0.85rem; color:var(--text-muted); }

footer{ border-top:1px solid var(--border-soft); padding: 46px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footer-links{ display:flex; gap:26px; }
.footer-links a{ color: var(--text-muted); font-size:0.9rem; }
.footer-links a:hover{ color: var(--text); }
.footnote{ color: var(--text-faint); font-size: 0.82rem; }

/* ============================================================
   Auth pages
   ============================================================ */
.auth-shell{
  min-height: 100vh;
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.auth-visual{
  position: relative;
  background: radial-gradient(120% 100% at 20% 20%, #1c2330 0%, #12161C 70%);
  border-right: 1px solid var(--border-soft);
  display:flex; flex-direction: column; justify-content:flex-end;
  padding: 48px;
  overflow:hidden;
}
.auth-visual canvas{ position:absolute; inset:0; width:100%!important;height:100%!important; }
.auth-visual .auth-quote{ position:relative; z-index:2; }
.auth-visual .auth-quote p{ color: var(--text); font-size:1.3rem; font-family: var(--display); max-width: 30ch; line-height:1.25;}
.auth-visual .auth-quote span{ color: var(--text-muted); font-size:0.85rem; }

.auth-panel{ display:flex; align-items:center; justify-content:center; padding: 40px; }
.auth-box{ width: 100%; max-width: 400px; }
.auth-box .brand{ margin-bottom: 38px; }
.auth-box h2{ margin-bottom: 8px; }
.auth-box > p{ margin-bottom: 30px; font-size: 0.95rem; }

.role-toggle{
  display:flex; background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 26px;
}
.role-toggle button{
  flex:1; padding: 10px; border:none; background:transparent; color: var(--text-muted);
  border-radius: 5px; font-weight:600; font-size:0.9rem; transition: all .15s;
}
.role-toggle button.active{ background: var(--amber); color:#1A1204; }

.field{ margin-bottom: 18px; }
.field label{ display:block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 7px; font-weight:500; }
.field input, .field select, .field textarea{
  width: 100%; padding: 12px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--body); font-size: 0.95rem;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--amber);
}
.field-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 22px; }
.field-row a{ font-size: 0.85rem; color: var(--amber); }
.link-row{ margin-top: 22px; text-align:center; font-size:0.9rem; color: var(--text-muted); }
.link-row a{ color: var(--amber); font-weight:600; }
.auth-error{
  background: var(--red-dim); border:1px solid rgba(229,72,77,0.4); color:#ff9da0;
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 18px; display:none;
}
.auth-hint{
  margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg-card); border:1px dashed var(--border); font-size: 0.8rem; color: var(--text-faint);
}
.auth-hint b{ color: var(--text-muted); }

/* ============================================================
   App shell (customer / mechanic / admin dashboards)
   ============================================================ */
.app-shell{ display:flex; min-height: 100vh; }
.app-rail{
  width: 80px; background: var(--bg-elevated); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; align-items:center; padding: 22px 0; gap: 6px; flex-shrink:0;
}
.app-rail .brand-mark{ margin-bottom: 26px; }
.rail-link{
  width: 48px; height:48px; border-radius: 10px; display:flex; align-items:center; justify-content:center;
  color: var(--text-faint); transition: all .15s; position:relative;
}
.rail-link svg{ width:20px;height:20px; }
.rail-link:hover{ color: var(--text); background: var(--bg-card); }
.rail-link.active{ color: var(--amber); background: var(--amber-dim); }
.rail-link .rail-label{
  position:absolute; left: 62px; background: var(--bg-card); border:1px solid var(--border);
  padding: 5px 10px; border-radius: 6px; font-size:0.78rem; white-space:nowrap; opacity:0; pointer-events:none;
  transition: opacity .12s; z-index: 20;
}
.rail-link:hover .rail-label{ opacity:1; }
.rail-bottom{ margin-top:auto; }

.app-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.app-topbar{
  height: 74px; border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; padding: 0 32px; flex-shrink:0;
}
.app-topbar h1{ font-size: 1.5rem; }
.topbar-right{ display:flex; align-items:center; gap: 18px; }
.badge-role{
  padding:6px 14px; border-radius:999px; font-size:0.78rem; font-weight:600;
  background: var(--amber-dim); color: var(--amber);
}
.avatar{
  width: 40px;height:40px;border-radius:50%; background: var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center;justify-content:center; font-family: var(--display); font-weight:700; color: var(--text-muted);
}
.app-body{ flex:1; overflow-y:auto; padding: 32px; }
.view{ display:none; animation: fadeIn .25s ease; }
.view.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

/* Stat cards */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 30px; }
.stat-card{ background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; }
.stat-card .label{ color: var(--text-muted); font-size:0.82rem; margin-bottom:10px; }
.stat-card .value{ font-family: var(--display); font-size: 2.1rem; font-weight:700; }
.stat-card .value.amber{ color: var(--amber); }
.stat-card .value.green{ color: var(--green); }
.stat-card .value.red{ color: var(--red); }

/* Panels / tables */
.panel{ background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; }
.panel-head{ padding: 18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.panel-head h3{ font-size: 1.05rem; }
table{ width:100%; border-collapse: collapse; }
th{ text-align:left; font-size:0.78rem; color: var(--text-faint); font-weight:600; padding: 12px 22px; border-bottom:1px solid var(--border); }
td{ padding: 14px 22px; border-bottom:1px solid var(--border-soft); font-size:0.9rem; }
tr:last-child td{ border-bottom:none; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:0.76rem; font-weight:600; }
.pill-green{ background: var(--green-dim); color: var(--green); }
.pill-amber{ background: var(--amber-dim); color: var(--amber); }
.pill-red{ background: var(--red-dim); color: var(--red); }
.pill-muted{ background: var(--bg-elevated); color: var(--text-muted); }

.empty-state{ padding: 60px 20px; text-align:center; color: var(--text-faint); }
.empty-state svg{ margin-bottom:14px; opacity:0.5; }

/* Vehicle picker */
.vehicle-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vehicle-opt{
  border:1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md);
  padding: 22px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  transition: all .15s;
}
.vehicle-opt svg{ width:32px;height:32px; color: var(--text-muted); }
.vehicle-opt span{ font-weight:600; font-size:0.92rem; }
.vehicle-opt.selected{ border-color: var(--amber); background: var(--amber-dim); }
.vehicle-opt.selected svg{ color: var(--amber); }

/* Issue list */
.issue-list{ display:flex; flex-direction:column; gap:10px; }
.issue-row{
  display:flex; align-items:center; gap:14px; padding: 14px 16px; border:1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-card); transition: all .15s;
}
.issue-row svg{ width:22px;height:22px; color: var(--text-muted); flex-shrink:0; }
.issue-row .txt b{ display:block; font-size:0.92rem; }
.issue-row .txt span{ font-size:0.8rem; color: var(--text-faint); }
.issue-row.selected{ border-color: var(--amber); background: var(--amber-dim); }
.issue-row.selected svg{ color: var(--amber); }

/* Map mock */
.map-mock{
  position:relative; height: 320px; border-radius: var(--radius-md); overflow:hidden;
  background:
    linear-gradient(var(--border-soft) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg-elevated);
  border:1px solid var(--border);
}
.map-pin{ position:absolute; width:14px;height:14px; border-radius:50%; box-shadow: 0 0 0 6px; }
.map-pin.you{ background: var(--amber); box-shadow: 0 0 0 6px var(--amber-dim); }
.map-pin.mech{ background: var(--green); box-shadow: 0 0 0 6px var(--green-dim); transition: left 1s linear, top 1s linear; }
.map-route{ position:absolute; border-top: 2px dashed var(--text-faint); opacity:0.6; transform-origin: 0 0; }

/* Star rating */
.star-rate{ display:flex; gap:6px; }
.star-rate svg{ width:28px;height:28px; color: var(--border); cursor:pointer; transition: color .1s; }
.star-rate svg.filled{ color: var(--amber); }

/* Toast */
.toast-wrap{ position: fixed; top: 22px; right: 22px; z-index: 999; display:flex; flex-direction:column; gap:10px; }
.toast{
  background: var(--bg-card); border:1px solid var(--border); border-left: 3px solid var(--amber);
  padding: 14px 18px; border-radius: var(--radius-sm); font-size:0.9rem; box-shadow: var(--shadow-lift);
  min-width: 260px; animation: slideIn .2s ease;
}
.toast.success{ border-left-color: var(--green); }
.toast.error{ border-left-color: var(--red); }
@keyframes slideIn{ from{ transform: translateX(20px); opacity:0;} to{ transform:none; opacity:1;} }

/* SOS */
.sos-btn{
  width:100%; padding: 20px; border-radius: var(--radius-md); border:none;
  background: var(--red); color:#fff; font-family: var(--display); font-size:1.3rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:12px;
  box-shadow: 0 0 0 0 rgba(229,72,77,0.5);
  animation: sos-pulse 2s infinite;
}
@keyframes sos-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(229,72,77,0.45); }
  70%{ box-shadow: 0 0 0 16px rgba(229,72,77,0); }
  100%{ box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}

/* Modal */
.modal-overlay{
  position: fixed; inset:0; background: rgba(8,10,13,0.72); backdrop-filter: blur(3px);
  display:none; align-items:center; justify-content:center; z-index: 200;
}
.modal-overlay.open{ display:flex; }
.modal{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; width: 100%; max-width: 420px; animation: fadeIn .2s ease;
}
.modal h3{ margin-bottom: 10px; }
.modal p{ margin-bottom: 22px; font-size:0.92rem; }
.modal-actions{ display:flex; gap:12px; }
.modal-actions .btn{ flex:1; }

/* Toggle switch */
.switch{ position:relative; width:42px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background: var(--border); border-radius:999px; transition:.15s; cursor:pointer;
}
.switch .track::before{
  content:''; position:absolute; width:18px;height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;
}
.switch input:checked + .track{ background: var(--amber); }
.switch input:checked + .track::before{ transform: translateX(18px); }

.pref-row{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; border-bottom:1px solid var(--border-soft); }
.pref-row:last-child{ border-bottom:none; }
.pref-row .txt b{ display:block; font-size:0.92rem; margin-bottom:3px; }
.pref-row .txt span{ font-size:0.8rem; color: var(--text-faint); }

.two-col{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items:flex-start; }
.mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; } .mb-30{ margin-bottom:30px; }

.tab-strip{ display:flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab-strip button{
  background:none; border:none; color: var(--text-muted); padding: 12px 4px; margin-right: 22px;
  font-weight:600; font-size:0.92rem; border-bottom: 2px solid transparent; transition: all .15s;
}
.tab-strip button.active{ color: var(--text); border-bottom-color: var(--amber); }

@media (max-width: 900px){
  .hero-grid, .two-col{ grid-template-columns: 1fr; }
  .grid-3, .grid-2, .stat-row, .steps, .vehicle-grid{ grid-template-columns: repeat(2,1fr); }
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-visual{ display:none; }
  .app-rail{ width: 64px; }
}
@media (max-width: 600px){
  .grid-3, .grid-2, .stat-row, .steps, .vehicle-grid{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
  .app-body{ padding: 20px; }
}