/* From index.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

@media (max-width: 767px) {
  .sh-navbar .nav.d-none.d-lg-flex {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 85vw);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem 1.25rem;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: -16px 0 48px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .28s ease, opacity .28s ease, visibility .28s ease;
    z-index: 1101;
  }

  .sh-navbar .nav.d-none.d-lg-flex.open {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .sh-navbar .nav.d-none.d-lg-flex .mobile-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    padding: 6px 8px;
    border-radius: 8px;
    z-index: 1102;
  }

  .sh-navbar .nav.d-none.d-lg-flex .mobile-close:focus {
    outline: 2px solid var(--primary);
  }

  .sh-navbar .nav.d-none.d-lg-flex a.nav-link {
    display: block;
    padding: 1rem 0;
    border-radius: 12px;
    color: var(--text) !important;
  }

  .sh-navbar .nav.d-none.d-lg-flex a.nav-link:hover {
    background: rgba(37, 99, 235, .06);
  }

  body.mobile-menu-open {
    overflow: hidden;
    height: 100%;
  }
}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}
.pwa-install-btn{position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:1200; display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border:0; border-radius:999px; background:linear-gradient(135deg, var(--primary) 0%, #4f83ff 100%); color:#fff; font-weight:700; font-size:.95rem; box-shadow:0 18px 46px rgba(37, 99, 235, 0.3); transition:transform .22s ease, box-shadow .22s ease, opacity .2s ease; cursor:pointer;}
.pwa-install-btn:hover,.pwa-install-btn:focus-visible{transform:translateY(-50%) translateY(-4px); box-shadow:0 22px 54px rgba(37, 99, 235, 0.36); outline:none;}
.pwa-install-btn:active{transform:translateY(-50%) scale(.97);}
.pwa-install-btn__icon{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.16);}
.pwa-install-btn__icon svg{width:18px; height:18px;}
.pwa-install-btn.is-hidden{display:none !important;}
@media (max-width: 767px){.pwa-install-btn{right:16px; bottom:18px; top:auto; transform:none;}.pwa-install-btn:hover,.pwa-install-btn:focus-visible{transform:translateY(-4px);}}

/* PWA phone mockup */
.pwa-phone-mockup{width:220px;height:440px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.06));box-shadow:0 20px 50px rgba(2,6,23,0.45); border:1px solid rgba(255,255,255,.04); padding:18px; display:inline-block; transform-origin:center;}
.pwa-phone-screen{width:100%;height:100%;border-radius:18px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.pwa-install-section{position:relative; overflow:hidden; isolation:isolate; animation:fadeUp .6s ease both}
.pwa-install-section__backdrop{position:absolute; inset:0; background-image:linear-gradient(120deg, rgba(3,10,24,0.94) 0%, rgba(4,13,30,0.82) 50%, rgba(7,16,34,0.9) 100%), url('../images/pwa-shot.jpg'); background-size:cover; background-position:center; transform:translate3d(0,0,0) scale(1.03); transition:transform .45s ease-out; z-index:0; pointer-events:none}
.pwa-install-section .container-xl,
.pwa-install-section .position-relative.overflow-hidden{position:relative; z-index:1}
.pwa-phone-mockup{animation:floatY 6s ease-in-out infinite}
@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.pwa-install-section__backdrop{transition:none}.pwa-phone-mockup{animation:none}}

/* Premium glass card */
.bg-glass{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); box-shadow:0 10px 30px rgba(2,6,23,0.5);}

/* Install button styles (override) */
#pwa-install-btn{min-width:220px; border-radius:14px; padding:14px 20px; font-size:1rem; font-weight:700; transition:transform .18s ease, box-shadow .18s ease;}
#pwa-install-btn:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(37,99,235,0.28);} 
#pwa-install-btn[disabled], #pwa-install-btn.disabled{opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;}

/* Phone mockup sizing and float */
.pwa-phone-mockup{width:240px;height:500px;border-radius:36px;background:linear-gradient(180deg, #0b1b33, #071224);box-shadow:0 30px 80px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03); padding:18px; display:inline-block; transform-origin:center; animation:floatSlow 6s ease-in-out infinite;}
.pwa-phone-screen{width:100%;height:100%;border-radius:20px;background-size:cover;background-position:center;background-repeat:no-repeat; overflow:hidden;}
@keyframes floatSlow{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* Android badge */
.badge-android{font-weight:700; transform:translateZ(24px);}

/* Fade-in on scroll helper (simple) */
.fade-up{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.visible{opacity:1; transform:none}

@media (max-width: 767px){
  .pwa-phone-mockup{width:180px;height:380px;}
  #pwa-install-btn{width:100%;}
}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:280px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 1200px){
  .sh-sidebar{width:240px;}
}

@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From about.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From services.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From service-areas.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From pricing.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From contact.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From faq.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From how-it-works.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From login.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From register.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From forgot-password.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From customer-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From profile.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From my-requests.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From new-request.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From notifications.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From support.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From technician-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-today.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-upcoming.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-completed.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From admin-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From customers.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From technicians.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From tickets.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From payments.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From reports.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From settings.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From cms.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From categories.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From assign-technician.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From index.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From about.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From services.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From service-areas.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From pricing.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From contact.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From faq.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From how-it-works.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From login.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From register.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From forgot-password.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From customer-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From profile.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From my-requests.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From new-request.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From notifications.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From support.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From technician-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-today.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-upcoming.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From jobs-completed.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From admin-dashboard.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From customers.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From technicians.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From tickets.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From payments.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From reports.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From settings.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From cms.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From categories.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}
/* From assign-technician.html */
/* =========================================================
   ServiceHub Pro — Design System
   Primary #2563EB · Secondary #0F172A · Success #22C55E
   Warning #F59E0B · Danger #EF4444 · Background #F8FAFC
   Display: Sora (used with restraint) · Body/UI: Inter
   Signature element: the glowing vertical "Live Timeline"
   ========================================================= */

:root{
  --primary:#2563EB;
  --primary-600:#1D4ED8;
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --secondary:#0F172A;
  --success:#22C55E;
  --success-50:#ECFDF3;
  --warning:#F59E0B;
  --warning-50:#FFFBEB;
  --danger:#EF4444;
  --danger-50:#FEF2F2;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E7EBF1;
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px -8px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.16), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 4px rgba(37,99,235,.10);
  --font-display:'Sora', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#121B2E;
  --border:#22304A;
  --text:#EEF2FA;
  --text-muted:#93A3BE;
  --text-faint:#5D6E8C;
  --secondary:#0B1220;
  --primary-50:#152238;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--text); letter-spacing:-0.02em;}
h1{font-weight:800;} h2{font-weight:700;} h3,h4{font-weight:600;}
p{color:var(--text-muted);}
a{text-decoration:none;}
::selection{background:var(--primary-100); color:var(--primary-600);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container-xl{max-width:1280px;}

/* =============== Utility gradients / textures =============== */
.text-gradient{
  background:linear-gradient(90deg,var(--primary) 0%, #6D8CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mesh-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.mesh-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35;
}
.mesh-bg .b1{width:420px;height:420px; background:#2563EB; top:-140px; left:-100px;}
.mesh-bg .b2{width:380px;height:380px; background:#6D8CFF; top:60px; right:-120px; opacity:.25;}
.mesh-bg .b3{width:320px;height:320px; background:#22C55E; bottom:-160px; left:35%; opacity:.15;}

.grid-overlay{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:36px 36px;
}

/* =============== Glass surfaces =============== */
.glass{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .glass{
  background:rgba(18,27,46,.65);
  border:1px solid rgba(255,255,255,.06);
}

/* =============== Navbar (site) =============== */
.sh-navbar{
  position:sticky; top:0; z-index:1000;
  padding:14px 0;
  transition:all .25s ease;
}
.sh-navbar .brand{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--secondary);
  display:flex; align-items:center; gap:10px;
}

.sh-navbar .nav-link{
  font-weight:600; font-size:.94rem; color:var(--secondary) !important; opacity:.75;
  padding:10px 16px !important; border-radius:100px; transition:.2s;
}
.sh-navbar .nav-link:hover{opacity:1; background:var(--primary-50);}
.sh-navbar .nav-link.active{opacity:1; background:var(--primary-50); color:var(--primary) !important;}

/* =============== Buttons =============== */
.btn{border-radius:100px; font-weight:600; padding:.65rem 1.3rem; font-size:.92rem; transition:.2s; border:1px solid transparent;}
.btn-sm{padding:.4rem .9rem; font-size:.82rem;}
.btn-lg{padding:.85rem 1.8rem; font-size:1rem;}
.btn-primary{background:var(--primary); border-color:var(--primary); box-shadow:0 8px 20px -6px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600); transform:translateY(-1px); box-shadow:0 12px 24px -6px rgba(37,99,235,.6);}
.btn-outline-primary{color:var(--primary); border-color:var(--primary-100); background:var(--primary-50);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-dark{background:var(--secondary); border-color:var(--secondary);}
.btn-light-glass{background:rgba(255,255,255,.9); color:var(--secondary); border-color:var(--border);}
.btn-success{background:var(--success); border-color:var(--success);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-icon{width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; padding:0;}

/* =============== Cards =============== */
.card-sh{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s ease;
}
.card-sh:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.card-flat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);}

/* category tile */
.cat-tile{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 18px; text-align:center; transition:.25s; cursor:pointer; height:100%;
}
.cat-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary-100);}
.cat-tile .cat-icon{
  width:58px;height:58px;border-radius:16px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-50); color:var(--primary); font-size:1.4rem; transition:.25s;
}
.cat-tile:hover .cat-icon{background:var(--primary); color:#fff; transform:scale(1.08) rotate(-4deg);}
.cat-tile h4{font-size:.98rem; margin-bottom:2px;}
.cat-tile small{color:var(--text-faint);}

/* =============== Badges / status pills =============== */
.pill{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.76rem;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-success{background:var(--success-50); color:#16A34A;}
.pill-warning{background:var(--warning-50); color:#B45309;}
.pill-danger{background:var(--danger-50); color:#DC2626;}
.pill-info{background:var(--primary-50); color:var(--primary-600);}
.pill-muted{background:#F1F5F9; color:var(--text-muted);}
[data-theme="dark"] .pill-muted{background:#1B2740;}

/* =============== Sidebar (dashboards) =============== */
.sh-shell{display:flex; min-height:100vh;}
.sh-sidebar{
  width:264px; flex-shrink:0; background:var(--secondary); color:#fff;
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 14px; z-index:100;
  transition:width .25s ease;
}
.sh-sidebar::-webkit-scrollbar{width:5px;}
.sh-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
.sh-sidebar .brand{color:#fff; padding:8px 10px 22px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;}

.sh-sidebar .nav-section-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.35);
  padding:16px 14px 6px; font-weight:700;
}
.sh-sidebar .nav-link{
  color:rgba(255,255,255,.68); font-weight:600; font-size:.88rem; padding:10px 14px; border-radius:12px;
  display:flex; align-items:center; gap:12px; margin-bottom:2px; transition:.18s;
}
.sh-sidebar .nav-link i{width:18px; text-align:center; font-size:.92rem;}
.sh-sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.sh-sidebar .nav-link.active{background:linear-gradient(90deg, var(--primary), rgba(37,99,235,.55)); color:#fff; box-shadow:0 8px 16px -4px rgba(37,99,235,.5);}
.sh-sidebar .nav-link .badge-count{margin-left:auto; background:rgba(255,255,255,.12); font-size:.68rem; padding:2px 8px; border-radius:100px;}

.sh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.sh-topbar{
  position:sticky; top:0; z-index:90; background:rgba(248,250,252,.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); padding:14px 28px; display:flex; align-items:center; gap:18px;
}
[data-theme="dark"] .sh-topbar{background:rgba(11,18,32,.75);}
.sh-content{padding:26px 28px 60px;}
.search-pill{
  background:var(--card); border:1px solid var(--border); border-radius:100px; padding:9px 16px;
  display:flex; align-items:center; gap:10px; min-width:280px; color:var(--text-faint);
}
.search-pill input{border:none; outline:none; background:transparent; font-size:.88rem; width:100%; color:var(--text);}
.icon-btn{
  width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center; color:var(--text-muted); position:relative; transition:.2s;
}
.icon-btn:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-100);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px;height:8px;border-radius:50%; background:var(--danger); border:2px solid var(--card);}
.user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.user-chip img{width:40px;height:40px;border-radius:12px; object-fit:cover;}
.avatar-fallback{
  width:40px;height:40px;border-radius:12px; background:var(--primary-50); color:var(--primary);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.85rem;
}

/* =============== Stat cards =============== */
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-sm); transition:.25s;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.stat-icon{width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; font-size:1.1rem;}
.stat-trend{font-size:.78rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.stat-value{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:-.02em;}

/* =============== Tables =============== */
.table-sh{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table-sh thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  font-weight:700; padding:0 16px 8px; border:none;
}
.table-sh tbody tr{background:var(--card); box-shadow:var(--shadow-sm);}
.table-sh tbody td{padding:14px 16px; border:none; vertical-align:middle; font-size:.88rem; color:var(--text);}
.table-sh tbody tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm);}
.table-sh tbody tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm);}
.row-hover:hover{outline:1px solid var(--primary-100);}

/* =============== Forms =============== */
.form-control, .form-select{
  border-radius:12px; border:1px solid var(--border); padding:.65rem .9rem; font-size:.9rem;
  background:var(--card); color:var(--text);
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50);}
.form-label{font-weight:600; font-size:.84rem; color:var(--text); margin-bottom:6px;}
.form-hint{font-size:.76rem; color:var(--text-faint);}
.upload-zone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:34px 20px; text-align:center;
  color:var(--text-faint); background:var(--primary-50); cursor:pointer; transition:.2s;
}
.upload-zone:hover{border-color:var(--primary); color:var(--primary);}
.step-pill{
  display:flex; align-items:center; justify-content:center; width:34px;height:34px;border-radius:50%;
  background:var(--primary-50); color:var(--primary); font-weight:700; font-size:.85rem; border:2px solid transparent;
}
.step-item.active .step-pill{background:var(--primary); color:#fff; box-shadow:var(--shadow-glow);}
.step-item.done .step-pill{background:var(--success); color:#fff;}
.step-item .step-label{font-size:.78rem; font-weight:600; color:var(--text-faint); margin-top:6px;}
.step-item.active .step-label, .step-item.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:var(--border); margin-top:17px;}

/* =============== Signature: Live Timeline =============== */
.timeline-live{position:relative; padding-left:6px;}
.timeline-live .t-item{position:relative; padding-left:38px; padding-bottom:30px;}
.timeline-live .t-item:last-child{padding-bottom:0;}
.timeline-live .t-item::before{ /* connector */
  content:''; position:absolute; left:13px; top:30px; bottom:-4px; width:2px; background:var(--border);
}
.timeline-live .t-item:last-child::before{display:none;}
.timeline-live .t-item.done::before{background:var(--success);}
.timeline-live .t-dot{
  position:absolute; left:0; top:0; width:28px;height:28px;border-radius:50%;
  background:var(--card); border:2px solid var(--border); display:flex;align-items:center;justify-content:center;
  color:var(--text-faint); font-size:.75rem; z-index:2;
}
.timeline-live .t-item.done .t-dot{background:var(--success); border-color:var(--success); color:#fff;}
.timeline-live .t-item.active .t-dot{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 0 0 0 rgba(37,99,235,.55); animation:pulse-ring 1.8s infinite;
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
.timeline-live .t-title{font-weight:700; font-size:.9rem; margin-bottom:2px;}
.timeline-live .t-item.active .t-title{color:var(--primary);}
.timeline-live .t-time{font-size:.76rem; color:var(--text-faint);}
.timeline-live .t-desc{font-size:.8rem; color:var(--text-muted); margin-top:2px;}

/* =============== Skeleton loading =============== */
.skeleton{background:linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 37%, #EEF2F7 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px;}
[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#182238 25%,#1e2a44 37%,#182238 63%); background-size:400% 100%;}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* =============== Empty states =============== */
.empty-state{text-align:center; padding:60px 20px; color:var(--text-faint);}
.empty-state .empty-icon{width:76px;height:76px;border-radius:50%;background:var(--primary-50); color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:1.8rem; margin:0 auto 18px;}

/* =============== Testimonials / process / footer =============== */
.process-step{position:relative; padding:28px 22px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); height:100%;}
.process-step .num{font-family:var(--font-display); font-weight:800; font-size:2.2rem; color:var(--primary-100);}
.quote-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px; height:100%;}
.stars{color:var(--warning); font-size:.85rem; letter-spacing:2px;}

.sh-footer{background:var(--secondary); color:rgba(255,255,255,.65); padding:64px 0 24px;}
.sh-footer h6{color:#fff; font-weight:700; margin-bottom:16px; font-family:var(--font-display);}
.sh-footer a{color:rgba(255,255,255,.55); font-size:.88rem; display:block; margin-bottom:10px; transition:.2s;}
.sh-footer a:hover{color:#fff; padding-left:4px;}
.sh-footer .brand{color:#fff;}

/* Accordion (FAQ) */
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.faq-q{padding:18px 22px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:.92rem;}
.faq-a{padding:0 22px 18px; font-size:.86rem; color:var(--text-muted); display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-q i{transition:.2s; color:var(--primary);}

/* Auth pages */
.auth-wrap{min-height:100vh; display:flex; align-items:stretch;}
.auth-visual{
  flex:1; background:linear-gradient(160deg, var(--secondary) 0%, #16233F 60%, var(--primary) 140%);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-form-side{width:520px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg);}
@media (max-width: 991px){ .auth-visual{display:none;} .auth-form-side{width:100%;} }

/* Mobile sidebar */
@media (max-width: 991px){
  .sh-sidebar{position:fixed; left:-280px; top:0; height:100vh; box-shadow:var(--shadow-lg);}
  .sh-sidebar.open{left:0;}
  .sh-content{padding:20px 16px 50px;}
  .sh-topbar{padding:12px 16px;}
  .search-pill{min-width:0;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99; display:none;}
.sidebar-backdrop.show{display:block;}

/* Theme toggle switch */
.theme-toggle{width:42px;height:42px;border-radius:13px; background:var(--card); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-muted); cursor:pointer;}
.theme-toggle:hover{color:var(--warning);}

/* scrollbar */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:10px;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2A3A57;}

/* fade-up animation */
.fade-up{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1; transform:translateY(0);}

/* Compact responsive customer table */
.table-responsive .table-sh{min-width:780px;}
.table-responsive .table-sh td, .table-responsive .table-sh th{white-space:nowrap;}
.table-responsive .table-sh td:nth-child(2), .table-responsive .table-sh th:nth-child(2){white-space:normal;}

/* Booking requests & invoices table */
.booking-requests-table-wrap,
.invoice-table-wrap{border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--card);}
.booking-requests-table,
.invoice-table{table-layout:fixed; width:100%; min-width:0; border-collapse:separate; border-spacing:0;}
.booking-requests-table thead th,
.invoice-table thead th{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:.8rem .8rem; background:linear-gradient(180deg, rgba(37,99,235,.045), rgba(37,99,235,.02)); border-bottom:1px solid var(--border);}
.booking-requests-table tbody td,
.invoice-table tbody td{padding:.9rem .8rem; vertical-align:top; border-bottom:1px solid var(--border); white-space:normal;}
.booking-requests-table .row-hover:hover,
.invoice-table .row-hover:hover{background:rgba(37,99,235,.035);}
.booking-stack{display:flex; flex-direction:column; gap:2px;}
.booking-stack-primary{font-weight:600; color:var(--text); line-height:1.35;}
.booking-stack-secondary{font-size:.82rem; color:var(--text-muted);}
.booking-request-card{border:1px solid var(--border); border-radius:16px; padding:1rem; margin-bottom:.8rem; background:var(--card); box-shadow:0 16px 34px -24px rgba(15,23,42,.28);}
.booking-request-card-header{display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.75rem;}
.booking-request-card-body{display:grid; gap:.6rem;}
.booking-request-row{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; font-size:.92rem;}
.booking-request-label{color:var(--text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0;}
.booking-request-value{color:var(--text); text-align:right; font-weight:600;}
.booking-request-card-actions{margin-top:.75rem;}
@media (max-width:767.98px){.booking-requests-table-wrap,.invoice-table-wrap{display:none !important;}.booking-request-card{display:block;}}
@media (min-width:768px){.booking-requests-mobile,.invoice-table-mobile{display:none !important;}}

/* Admin action modal */
.modal.admin-action-modal,
.modal.technician-actions-modal,
.modal.payout-details-modal{z-index:2090;}
.modal-backdrop{z-index:2080; opacity:.6; background-color:#000;}
.modal.payout-details-modal .modal-dialog{max-width:min(900px, calc(100% - 1.5rem)); margin:1rem auto;}
.modal.payout-details-modal .modal-content{max-height:90vh; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; border:1px solid rgba(37,99,235,.16); box-shadow:0 24px 60px -20px rgba(15,23,42,.24);}
.modal.payout-details-modal .modal-header{flex-shrink:0; padding:1.1rem 1.2rem .6rem;}
.modal.payout-details-modal .modal-body{flex:1 1 auto; overflow-y:auto; min-height:0; padding:.6rem 1.2rem 1rem;}
.modal.payout-details-modal .modal-footer{flex-shrink:0; position:sticky; bottom:0; background:#fff; border-top:1px solid rgba(15,23,42,.1); padding:1rem 1.2rem; z-index:10;}
.modal.payout-details-modal .btn{border-radius:12px; justify-content:flex-start; padding:.8rem 1rem; transition:transform .2s ease, box-shadow .2s ease;}
.modal.payout-details-modal .btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px -12px rgba(37,99,235,.45);}
.modal.payout-details-modal .modal.fade .modal-dialog{opacity:0; transform:translateY(-10px) scale(.98); transition:transform .25s ease, opacity .25s ease;}
.modal.payout-details-modal .modal.show .modal-dialog{opacity:1; transform:translateY(0) scale(1);}
.modal{overflow:hidden !important;}
body.modal-open{overflow:hidden !important;}
.modal-dialog{position:relative; z-index:2095;}
.modal.payout-details-modal .modal-content .form-control,
.modal.payout-details-modal .modal-content .form-select,
.modal.payout-details-modal .modal-content textarea{position:relative; z-index:1;}
@media (max-width:576px){.modal.payout-details-modal .modal-dialog{margin:.75rem;}.modal.payout-details-modal .modal-content .btn{font-size:.9rem; padding:.72rem .9rem;}.modal.payout-details-modal .modal-body{padding:.6rem 1rem 1rem;}.modal.payout-details-modal .modal-footer{padding:.9rem 1rem;}}

/* Shared logo sizing override */
.brand{display:inline-flex;align-items:center;gap:14px;line-height:1.1;color:inherit;}
.site-logo{display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;line-height:1;}
.site-logo img{display:block;height:60px;width:auto;max-width:240px;object-fit:contain;object-position:left center;border:none;background:none;box-shadow:none;}
.logo-text{font-size:2rem;font-weight:800;margin-left:14px;line-height:1.1;display:flex;align-items:center;}
.site-header{min-height:82px;}
.brand-logo-only{gap:0;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.sh-footer{position:relative; background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(2,10,30,.97) 100%); color:rgba(255,255,255,.72); padding:88px 0 32px; border-top:1px solid rgba(255,255,255,.08); overflow:hidden;}
.sh-footer::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 36%); pointer-events:none;}
.sh-footer .container-xl{position:relative; z-index:1;}
.sh-footer .footer-grid{display:grid; grid-template-columns:minmax(280px, 1.15fr) repeat(4, minmax(0, 1fr)); gap:60px; align-items:start; margin-bottom:44px;}
.sh-footer .footer-brand{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.sh-footer .footer-brand-link{display:inline-flex; align-items:center; justify-content:flex-start; margin-bottom:2px;}
.sh-footer .footer-description{max-width:320px; margin:0; font-size:.95rem; line-height:1.8; color:rgba(255,255,255,.66);}
.sh-footer .footer-social-links{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px;}
.sh-footer .footer-social-link{width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#fff; box-shadow:0 8px 22px -10px rgba(15,23,42,.55); transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease;}
.sh-footer .footer-social-link:hover{transform:translateY(-4px); background:var(--primary); border-color:rgba(37,99,235,.45); box-shadow:0 16px 28px -10px rgba(37,99,235,.45); color:#fff;}
.sh-footer .footer-social-link i{font-size:1rem;}
.sh-footer .footer-column{display:flex; flex-direction:column; gap:8px;}
.sh-footer .footer-column h6{margin:0 0 8px; color:#fff; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-family:var(--font-display);}
.sh-footer .footer-links{display:flex; flex-direction:column; gap:10px;}
.sh-footer .footer-links a{color:rgba(255,255,255,.6); font-size:.92rem; display:inline-flex; align-items:center; margin:0; transition:color .2s ease, transform .2s ease; padding:0;}
.sh-footer .footer-links a:hover{color:#fff; transform:translateX(2px); padding-left:0;}
.sh-footer .footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:rgba(255,255,255,.55);}
.sh-footer .footer-bottom .fa-heart{color:#ff5c8a; margin:0 .2rem;}
.sh-footer .site-logo{display:inline-flex; align-items:center; justify-content:flex-start;}
.sh-footer .site-logo img{display:block; height:90px; width:auto; max-width:100%; object-fit:contain; object-position:left center; border:none; background:none; box-shadow:none;}
@media (max-width:991.98px){.site-logo img{height:54px;max-width:180px;}.sh-footer .footer-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:38px;}.sh-footer .footer-brand{grid-column:1 / -1; align-items:flex-start;}}
@media (max-width:767.98px){.site-logo img{height:42px;max-width:140px;}.sh-footer{padding:72px 0 28px;}.sh-footer .footer-grid{grid-template-columns:1fr; gap:28px;}.sh-footer .footer-brand{align-items:center; text-align:center;}.sh-footer .footer-brand-link{justify-content:center;}.sh-footer .footer-description{max-width:none; text-align:center;}.sh-footer .footer-social-links{justify-content:center;}.sh-footer .footer-column{align-items:center; text-align:center;}.sh-footer .footer-links{align-items:center;}.sh-footer .footer-bottom{flex-direction:column; text-align:center;}}