:root{
  --primary:#00AEEF;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.08);
}
[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --line:rgba(255,255,255,.12);
}
body{background:var(--bg);color:var(--text);}
a{text-decoration:none}

.topbar{
  background:var(--card); border:1px solid var(--line);
  padding:12px 14px; border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.04); overflow:hidden;
}
.logo img{width:100%;height:100%;object-fit:cover}
.brand-text{font-weight:900}
.brand-home{color:var(--text)}
.brand-service{color:var(--primary); margin-left:4px}

.card-pro{
  background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
}

.pill-mini{
  display:inline-flex; gap:6px; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.04); margin:4px 6px 0 0;
  font-weight:700; font-size:.82rem;
}

#slotWrap .btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}

.timeline-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.timeline-step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px}
.timeline-step .dot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;color:#6b7280}
.timeline-step .label{font-weight:800;font-size:.9rem;color:#6b7280}
.timeline-line{flex:1;height:6px;border-radius:999px;background:#e5e7eb}
.timeline-step.active .dot{background:var(--primary);color:#fff}
.timeline-step.active .label{color:var(--text)}
.timeline-line.active{background:var(--primary)}
.timeline-step.danger .dot{background:#ef4444;color:#fff}
.timeline-step.danger .label{color:#ef4444}

[data-theme="dark"] .timeline-step .dot,
[data-theme="dark"] .timeline-line{background:rgba(255,255,255,.12)}