:root{
  --bg:#081018;
  --bg2:#0f1726;
  --card:#111a2b;
  --card2:#152238;
  --text:#eaf2ff;
  --muted:#a9b8d4;
  --accent:#7c5cff;
  --accent2:#2dd4bf;
  --danger:#ff6b7a;
  --ok:#45d483;
  --warning:#ffbf69;
  --border:rgba(255,255,255,.08);
}
html,body{height:100%}
body{
  background:
    radial-gradient(circle at top left, rgba(124,92,255,.18), transparent 30%),
    radial-gradient(circle at top right, rgba(45,212,191,.12), transparent 25%),
    linear-gradient(180deg, var(--bg) 0%, #060b12 100%);
  color:var(--text);
}
.navbar, .footer-bar, .glass {
  backdrop-filter: blur(12px);
  background: rgba(10,16,28,.72) !important;
  border: 1px solid var(--border);
}
.navbar-brand, .nav-link { color: var(--text) !important; }
.text-muted { color: var(--muted) !important; }
.nav-link.active, .brand-accent { color: #fff !important; }
.hero{
  padding: 72px 0 32px;
}
.hero h1{
  font-weight: 800;
  letter-spacing: -.03em;
}
.lead{ color: var(--muted); }
.card, .panel {
  background: linear-gradient(180deg, rgba(21,34,56,.95), rgba(14,22,36,.95));
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.card { border-radius: 20px; }
.panel{ border-radius: 18px; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), #4aa3ff);
  border: 0;
}
.btn-outline-light{
  border-color: rgba(255,255,255,.18);
}
.badge-soft{
  display:inline-flex;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.status-new{ color: #c7d2fe; }
.status-reserved{ color: #fcd34d; }
.status-in_workshop{ color: #67e8f9; }
.status-completed{ color: #86efac; }
.status-rejected,.status-cancelled,.status-expired{ color: #fda4af; }
.table{ color: var(--text); }
.table thead th{
  color: var(--muted);
  border-bottom-color: var(--border);
}
.table td, .table th{
  border-top-color: var(--border);
}
.form-control, .form-select, textarea{
  background-color: rgba(8,16,24,.7) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--text) !important;
}
.form-control::placeholder, textarea::placeholder{ color: #8ea0bc; }
.form-label{ color: var(--muted); }
a{ color: #8cd4ff; text-decoration: none; }
a:hover{ text-decoration: underline; }
.footer-bar{
  margin-top: 48px;
  padding: 18px 0;
  color: var(--muted);
}
.hr-soft{ border-top:1px solid var(--border); }
.kpi{
  font-size: 2rem;
  font-weight: 800;
}


.card-inner{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.table-dark{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  color: var(--text);
}

.table > :not(caption) > * > *{
  background-color: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.requests-table thead th{
  color: var(--muted) !important;
  font-weight: 600;
}

.requests-table tbody tr:hover > *{
  background: rgba(255,255,255,.03) !important;
}

.rating-pill{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(45,212,191,.95));
  color: #fff;
  font-weight: 800;
  flex: 0 0 56px;
}

.status-pill{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size: .92rem;
}

.info-tile{
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.status-rail{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 6px 0 2px;
}

.status-step{
  min-width: 104px;
  flex: 0 0 auto;
  text-align: center;
  opacity: .55;
}

.status-step.active{
  opacity: 1;
}

.status-dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 auto;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.12);
}

.status-step.active .status-dot{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
}

.status-line{
  height: 4px;
  width: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  flex: 0 0 auto;
  align-self: center;
  margin-top: -18px;
}

.status-line.active{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.reserve-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.reserve-big{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reserve-circle{
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  background: radial-gradient(circle at 35% 30%, rgba(124,92,255,.35), rgba(45,212,191,.18)), rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.03);
}

.timeline-stack{
  display: grid;
  gap: 12px;
}

.timeline-item{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
}

.timeline-bullet{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-top: 6px;
}

.timeline-content{
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}

.note-card{
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 16px;
}