/* cityworkshop V8.9 Safe Swiggy-style UI layer
   Additive only. No flow or JS changes.
*/
:root{
  --sw-orange:#FC8019;
  --sw-orange-2:#FF9F45;
  --sw-bg:#0b0f17;
  --sw-bg-2:#0f1624;
  --sw-card:#111827;
  --sw-card-2:#1b2432;
  --sw-line:rgba(255,255,255,.06);
  --sw-text:#f8fafc;
  --sw-muted:#a8b4c7;
  --sw-chip:#1f2937;
}

html,body{
  background:
    radial-gradient(circle at top right, rgba(252,128,25,.10), transparent 22%),
    radial-gradient(circle at left center, rgba(255,159,69,.05), transparent 28%),
    linear-gradient(180deg, var(--sw-bg) 0%, var(--sw-bg-2) 56%, #0a1019 100%);
}

body{
  color:var(--sw-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

.layout,.login-wrap{
  max-width: 1280px;
  padding: 18px;
}

.card,
.hero,
.item,
.service-card,
.history-item,
.compact-card,
.compact-ticket,
.status-video-wrap,
.status-video-card,
.service-icon-card,
.login-card,
.countdown-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--sw-card), var(--sw-card-2));
  border:1px solid var(--sw-line);
  box-shadow:0 14px 34px rgba(0,0,0,.32);
}

.card,
.hero,
.login-card{
  border-radius: 26px;
}

.brand{
  font-size: 30px;
  font-weight: 900;
  letter-spacing:-0.02em;
}

.brand span,
.money,
.wallet-balance,
.welcome-card h2,
.countdown-box strong,
.service-icon{
  color:var(--sw-orange);
}

.muted{
  color:var(--sw-muted);
}

.eyebrow{
  color:#ffcf9e;
  letter-spacing:.12em;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 4px;
  backdrop-filter: blur(8px);
}

.btn{
  background: linear-gradient(90deg, var(--sw-orange), var(--sw-orange-2));
  color: #111827;
  border-radius: 16px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(252,128,25,.22);
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.btn.secondary{
  background:#1f2937;
  color:#fff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.06);
}

.btn.green{
  background:linear-gradient(90deg,#22c55e,#6ee7b7);
  color:#052814;
}

.btn-book-urgent{
  min-height:60px;
  font-size:20px;
  border-radius:20px;
  box-shadow: 0 16px 28px rgba(252,128,25,.24);
}

input,select,textarea{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
  border-radius:16px;
}

input:focus,select:focus,textarea:focus{
  border-color: rgba(252,128,25,.82);
  box-shadow: 0 0 0 4px rgba(252,128,25,.08);
}

input::placeholder, textarea::placeholder{
  color:#8ea0ba;
}

.pill,.role-badge,.countdown-badge,.chip-action{
  border-radius:999px;
}

.role-badge,
.chip-action{
  background:#1f2937;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.countdown-badge{
  background:rgba(252,128,25,.12);
  color:#ffd7b0;
  border:1px solid rgba(252,128,25,.25);
}

.customer-welcome-card{
  background:
    radial-gradient(circle at 82% 18%, rgba(252,128,25,.14), transparent 18%),
    linear-gradient(135deg, #111827 0%, #172132 65%, #121b2a 100%);
  border-radius: 28px;
}

.welcome-card h2{
  font-size: 34px;
  letter-spacing:-0.03em;
}

.small-video,
.welcome-video{
  border-radius:22px;
  box-shadow:0 18px 36px rgba(0,0,0,.26);
}

.service-icon-grid{
  gap: 14px;
}

.service-icon-card{
  min-height: 112px;
  border-radius: 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.service-icon-card:hover{
  transform: translateY(-2px);
}

.service-icon-card.active{
  border:2px solid var(--sw-orange);
  box-shadow:0 0 0 2px rgba(252,128,25,.10), 0 16px 28px rgba(252,128,25,.10);
  background:
    radial-gradient(circle at top right, rgba(252,128,25,.18), transparent 36%),
    linear-gradient(180deg, #172030, #121b2a);
}

.service-icon-card strong{
  font-size:15px;
  font-weight:800;
}

.service-icon-card small{
  color:#bac8da;
}

.stats .card,
.stats .stat,
.stat{
  border-radius: 18px;
}

.item,
.history-item,
.compact-ticket,
.service-card{
  border-radius: 20px;
}

.history-item:hover,
.service-card:hover,
.item:hover{
  border-color: rgba(252,128,25,.18);
}

.booking-focus{
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(252,128,25,.12), transparent 18%),
    linear-gradient(180deg, #111827, #131d2a);
}

.live-stage{
  border-radius: 22px;
  background: linear-gradient(180deg, #101926, #0f1724);
}

.status-video-wrap,
.status-video-card{
  overflow:hidden;
  border-radius: 22px;
}

.login-card{
  background:
    radial-gradient(circle at 78% 24%, rgba(252,128,25,.12), transparent 18%),
    linear-gradient(135deg, #111827 0%, #172132 64%, #121b2a 100%);
}

.login-card input{
  min-height:56px;
}

.mono-strip{
  background:
    radial-gradient(circle at 15% 50%, rgba(252,128,25,.18), transparent 18%),
    linear-gradient(90deg, #111827, #172335);
  border-radius:20px;
}

.review-highlight{
  border-radius:22px;
  background:
    radial-gradient(circle at right center, rgba(252,128,25,.10), transparent 20%),
    linear-gradient(180deg, #131b29, #101825);
}

.admin-compact-grid .card,
.theme-pill,
.engineer-square{
  border-radius: 20px;
}

.pie-chart{
  box-shadow:0 16px 30px rgba(0,0,0,.25);
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#283548; border-radius:999px; }
::-webkit-scrollbar-track{ background:#0c121d; }

@media (max-width:980px){
  .welcome-card h2{ font-size:30px; }
  .small-video,.welcome-video{ width:160px; height:98px; }
}

@media (max-width:640px){
  .layout,.login-wrap{ padding:12px; }
  .card,.hero,.login-card{ border-radius:22px; }
  .btn-book-urgent{ min-height:56px; font-size:18px; }
  .service-icon-card{ min-height:98px; }
}