/* =========================================================
   THEME AURORA v7.7 — advanced LIGHT SaaS look
   Loaded on EVERY page via includes/config.php
   Overrides style.css / theme-sunset.css / theme-pro.css / inline styles
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap');

:root, body, body.dark-mode, html[data-theme="dark"]{
  --au-bg:#f5f7fc;
  --au-surface:#ffffff;
  --au-surface2:#f8fafd;
  --au-line:#e6ebf3;
  --au-line2:#d8e0ec;
  --au-ink:#0f1b33;
  --au-ink2:#475069;
  --au-dim:#8792ab;
  --au-brand:#4a5cf5;
  --au-brand2:#7b5cf5;
  --au-brand-soft:#eef0ff;
  --au-cyan:#0ea5b7;
  --au-green:#12a06a;
  --au-amber:#e08a00;
  --au-red:#e2413f;
  --au-pink:#e0338c;
  --au-grad:linear-gradient(135deg,#4a5cf5,#7b5cf5 55%,#38bdf8);
  --au-grad-soft:linear-gradient(135deg,#eef0ff,#f3ecff 60%,#e8f7ff);
  --au-sh-xs:0 1px 2px rgba(16,26,54,.06);
  --au-sh-sm:0 2px 8px rgba(16,26,54,.06);
  --au-sh:0 10px 30px -12px rgba(16,26,54,.18), 0 2px 6px rgba(16,26,54,.05);
  --au-sh-lg:0 26px 60px -22px rgba(37,48,110,.35);

  --primary:#4a5cf5 !important;
  --primary-dark:#3a49d6 !important;
  --primary-light:#7b8bff !important;
  --bg:var(--au-bg) !important;
  --card:var(--au-surface) !important;
  --text:var(--au-ink) !important;
  --text-secondary:var(--au-ink2) !important;
  --text-muted:var(--au-dim) !important;
  --border:var(--au-line) !important;
  --success:var(--au-green) !important;
  --danger:var(--au-red) !important;
  --warning:var(--au-amber) !important;
  --info:var(--au-cyan) !important;
  --gradient:var(--au-grad) !important;
  --gradient-hero:linear-gradient(135deg,#eef1ff,#f6efff 55%,#e9f8ff) !important;
  --gradient-success:linear-gradient(135deg,#12a06a,#48d597) !important;
  --gradient-danger:linear-gradient(135deg,#e2413f,#f97362) !important;
  --radius:18px !important;
  --radius-sm:12px !important;
  --radius-xs:9px !important;
  --shadow:var(--au-sh) !important;
  --shadow-sm:var(--au-sh-sm) !important;
  --shadow-lg:var(--au-sh-lg) !important;
  --shadow-primary:0 14px 30px -12px rgba(74,92,245,.55) !important;
}

html{color-scheme:light !important}
.dark-toggle{display:none !important}

body{
  font-family:'Baloo 2','Tiro Devanagari Marathi','Mukta','Noto Sans Devanagari',system-ui,sans-serif !important;
  background:var(--au-bg) !important;
  color:var(--au-ink) !important;
  background-image:
    radial-gradient(900px 480px at 100% -8%, rgba(123,92,245,.10), transparent 62%),
    radial-gradient(760px 420px at -10% 2%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(600px 400px at 50% 120%, rgba(74,92,245,.07), transparent 60%) !important;
  background-attachment:fixed !important;
  font-weight:700 !important;
}
.container{max-width:1240px !important}
h1,h2,h3,h4{letter-spacing:-.4px;color:var(--au-ink) !important;font-family:'Titan One','Baloo 2','Tiro Devanagari Marathi',system-ui,sans-serif !important;font-weight:400 !important}

/* ================= HEADER ================= */
.header{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(230,235,243,.9) !important;
  box-shadow:0 8px 30px -22px rgba(16,26,54,.5) !important;
  padding:12px 0 !important;
}
.header h1{
  font-weight:800 !important;font-size:17px !important;text-transform:none !important;
  background:var(--au-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.header h1::before{content:'' !important;display:none !important}
.header .user-info{font-size:11px !important;color:var(--au-dim) !important;text-transform:none !important;font-family:inherit !important;font-weight:600}
.header-logo,.auth-logo{
  border-radius:14px !important;background:var(--au-grad) !important;color:#fff !important;
  box-shadow:0 10px 22px -10px rgba(74,92,245,.8) !important;
}

/* Wallet chip */
.wallet-badge{
  border-radius:999px !important;background:#fff !important;border:1px solid var(--au-line) !important;
  color:var(--au-ink) !important;font-weight:800 !important;padding:8px 14px !important;
  box-shadow:var(--au-sh-sm) !important;font-family:'Inter',sans-serif !important;
}
.wallet-badge:hover{transform:translateY(-1px) !important;box-shadow:var(--au-sh) !important;border-color:var(--au-brand) !important}

.notification-bell,.dark-toggle{
  border-radius:12px !important;background:#fff !important;border:1px solid var(--au-line) !important;
  color:var(--au-ink2) !important;box-shadow:var(--au-sh-xs) !important;
}
.notification-bell:hover{border-color:var(--au-brand) !important;color:var(--au-brand) !important;background:var(--au-brand-soft) !important;box-shadow:none !important}
.notification-bell .badge-count,.nav-item .nav-badge{background:var(--au-pink) !important;border-color:#fff !important;font-weight:700}
.btn-logout{
  border-radius:12px !important;background:#fff !important;border:1px solid #f6d6d6 !important;color:var(--au-red) !important;
  text-transform:none !important;font-size:12px !important;font-weight:700 !important;letter-spacing:0 !important;
}
.btn-logout:hover{background:var(--au-red) !important;color:#fff !important;border-color:var(--au-red) !important}

/* ================= CARDS ================= */
.card,.glass-card,.chart-container,.stat-card,.panel,.box{
  background:var(--au-surface) !important;
  border:1px solid var(--au-line) !important;
  border-radius:20px !important;
  box-shadow:var(--au-sh) !important;
  position:relative;overflow:hidden;
}
.card::before,.glass-card::before{content:'' !important;position:absolute;inset:0 0 auto 0;height:0 !important}
.card:hover{transform:translateY(-3px);box-shadow:var(--au-sh-lg) !important;border-color:var(--au-line2) !important}
.card-header{
  font-family:inherit !important;text-transform:none !important;letter-spacing:-.2px !important;
  font-size:15px !important;font-weight:800 !important;color:var(--au-ink) !important;padding:20px 22px 4px !important;
}
.card-footer{background:var(--au-surface2) !important;border-top:1px solid var(--au-line) !important}

/* stat cards get a soft aurora corner */
.stat-card::after{
  content:'';position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:var(--au-grad);opacity:.10;filter:blur(6px);pointer-events:none;
}

/* ================= BUTTONS ================= */
.btn{
  border-radius:14px !important;text-transform:none !important;letter-spacing:0 !important;
  font-size:13.5px !important;font-weight:700 !important;border:1px solid transparent !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s !important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--au-grad) !important;color:#fff !important;box-shadow:0 14px 26px -14px rgba(74,92,245,.9) !important}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 18px 32px -14px rgba(74,92,245,1) !important}
.btn-success{background:linear-gradient(135deg,#12a06a,#3fd39a) !important;color:#fff !important;box-shadow:0 14px 26px -14px rgba(18,160,106,.85) !important}
.btn-danger{background:linear-gradient(135deg,#e2413f,#f97362) !important;color:#fff !important;box-shadow:0 14px 26px -14px rgba(226,65,63,.8) !important}
.btn-warning{background:linear-gradient(135deg,#e08a00,#ffc244) !important;color:#fff !important}
.btn-info{background:linear-gradient(135deg,#0ea5b7,#38bdf8) !important;color:#fff !important}
.btn-secondary,.btn-outline,.btn-light{
  background:#fff !important;color:var(--au-ink) !important;border:1px solid var(--au-line2) !important;box-shadow:var(--au-sh-xs) !important;
}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--au-brand) !important;color:var(--au-brand) !important;background:var(--au-brand-soft) !important}

/* ================= FORMS ================= */
.form-control,input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],input[type=search],select,textarea{
  background:var(--au-surface2) !important;border:1.5px solid var(--au-line) !important;color:var(--au-ink) !important;
  border-radius:14px !important;font-family:'Plus Jakarta Sans',sans-serif !important;padding:12px 14px !important;
  transition:border-color .18s, box-shadow .18s, background .18s !important;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  outline:none !important;background:#fff !important;border-color:var(--au-brand) !important;
  box-shadow:0 0 0 4px rgba(74,92,245,.14) !important;
}
label,.form-label{font-family:inherit !important;font-size:12.5px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:700 !important;color:var(--au-ink2) !important}
::placeholder{color:#a9b2c6 !important}

/* ================= BADGES ================= */
.badge,.badge-success,.badge-danger,.badge-warning,.badge-info,.badge-pending,.status,.chip,.pill,.tag{
  border-radius:999px !important;font-family:'Inter',sans-serif !important;font-size:11px !important;
  text-transform:uppercase;letter-spacing:.4px;font-weight:700 !important;padding:5px 11px !important;
  border:1px solid transparent !important;
}
.badge-success,.status-success,.status-approved{color:#0b7a51 !important;background:#e4f8ef !important;border-color:#c3ecda !important}
.badge-danger,.status-failed,.status-rejected{color:#b52a28 !important;background:#fdeceb !important;border-color:#f6d2d0 !important}
.badge-warning,.status-pending{color:#96620a !important;background:#fdf3e0 !important;border-color:#f4e2bf !important}
.badge-info{color:#0a7c8c !important;background:#e2f7fa !important;border-color:#c3ecf2 !important}
.new-badge,.badge-new{background:var(--au-pink) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 8px 16px -8px rgba(224,51,140,.9)}

/* ================= TABS (segmented pills) ================= */
.tabs{
  background:rgba(255,255,255,.7) !important;backdrop-filter:blur(10px);
  border:1px solid var(--au-line) !important;border-radius:999px !important;
  padding:6px !important;box-shadow:var(--au-sh-sm) !important;gap:6px !important;
}
.tab{
  border-radius:999px !important;font-family:inherit !important;text-transform:none !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:0 !important;color:var(--au-ink2) !important;
}
.tab:hover{background:var(--au-brand-soft) !important;color:var(--au-brand) !important;transform:none !important}
.tab.active{background:var(--au-grad) !important;color:#fff !important;box-shadow:0 12px 22px -14px rgba(74,92,245,1) !important}

/* ================= TABLES ================= */
table.data-table,table{border-radius:16px;overflow:hidden}
table.data-table thead{background:var(--au-surface2) !important}
table.data-table th{
  color:var(--au-dim) !important;font-family:'Inter',sans-serif !important;font-size:11px !important;
  text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--au-line) !important;
}
table.data-table td{border-bottom:1px solid var(--au-line) !important;color:var(--au-ink) !important}
table.data-table tbody tr:hover{background:#f7f9ff !important}

/* ================= BANNERS / HERO ================= */
.banner,.wallet-hero{
  background:var(--au-grad) !important;border:none !important;border-radius:22px !important;
  box-shadow:0 26px 50px -26px rgba(74,92,245,.9) !important;color:#fff !important;
  position:relative;overflow:hidden;
}
.banner *,.wallet-hero *{color:#fff !important}
.banner::after,.wallet-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(320px 220px at 90% -20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(260px 200px at 8% 130%, rgba(255,255,255,.18), transparent 60%);
}
.wallet-hero .balance{font-family:'Inter',sans-serif !important;font-weight:800 !important}
.wallet-stats .ws-icon{border-radius:14px !important;background:rgba(255,255,255,.18) !important}

/* ================= MISC BLOCKS ================= */
.request-item,.field-item,.notif-item,.quick-amt,.upload-area{
  background:#fff !important;border:1px solid var(--au-line) !important;border-radius:16px !important;color:var(--au-ink) !important;
}
.quick-amt:hover,.quick-amt.selected{border-color:var(--au-brand) !important;color:var(--au-brand) !important;background:var(--au-brand-soft) !important}
.upload-area{border:1.5px dashed var(--au-line2) !important;background:var(--au-surface2) !important}
.upload-area:hover{border-color:var(--au-brand) !important;background:var(--au-brand-soft) !important}
.notif-panel{background:#fff !important;border:1px solid var(--au-line) !important;border-radius:20px !important;box-shadow:var(--au-sh-lg) !important}
.notif-item.unread{border-left:3px solid var(--au-brand) !important;background:var(--au-brand-soft) !important}
.toggle{border-radius:999px !important;background:#dfe5f0 !important}
.toggle::after{border-radius:50% !important}
.toggle.on{background:var(--au-grad) !important}

.alert{border-radius:16px !important;font-family:inherit !important;font-size:13.5px !important;font-weight:600;border:1px solid transparent !important;border-left:4px solid currentColor !important}
.alert-success{background:#e9f9f1 !important;color:#0b7a51 !important}
.alert-danger{background:#fdeceb !important;color:#b52a28 !important}
.alert-warning{background:#fdf4e3 !important;color:#96620a !important}
.alert-info{background:#e6f6fb !important;color:#0a7c8c !important}

.page-link{border-radius:12px !important;background:#fff !important;border:1px solid var(--au-line) !important;color:var(--au-ink2) !important}
.page-link:hover,.page-link.active{background:var(--au-grad) !important;color:#fff !important;border-color:transparent !important}

/* ================= BOTTOM NAV ================= */
.bottom-nav{
  background:rgba(255,255,255,.9) !important;border-top:1px solid var(--au-line) !important;
  box-shadow:0 -14px 40px -26px rgba(16,26,54,.7) !important;backdrop-filter:blur(16px);
}
.nav-item{border-radius:14px !important;font-family:inherit !important;font-size:10.5px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:700 !important;color:var(--au-dim) !important}
.nav-item.active,.nav-item:hover{color:var(--au-brand) !important;background:var(--au-brand-soft) !important}

/* ================= AUTH PAGES ================= */
.auth-page{
  background:#f5f7fc !important;
  background-image:
    radial-gradient(760px 460px at 18% 8%, rgba(74,92,245,.16), transparent 62%),
    radial-gradient(760px 460px at 86% 92%, rgba(123,92,245,.18), transparent 62%),
    radial-gradient(500px 340px at 60% 20%, rgba(56,189,248,.14), transparent 60%) !important;
}
.auth-card{
  background:rgba(255,255,255,.86) !important;backdrop-filter:blur(18px) saturate(150%) !important;
  border:1px solid rgba(255,255,255,.9) !important;border-radius:26px !important;
  box-shadow:0 40px 90px -40px rgba(37,48,110,.55) !important;
}
.auth-card h1{
  background:var(--au-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;font-family:inherit !important;text-transform:none !important;font-weight:800 !important;
}
.auth-card .subtitle{color:var(--au-dim) !important}
.demo-box{background:var(--au-brand-soft) !important;border:1px solid #dfe3ff !important;border-radius:14px !important;color:var(--au-ink2) !important}

/* Admin sidebar */
.sidebar,.admin-sidebar,.side-nav{background:#fff !important;border-right:1px solid var(--au-line) !important}
.sidebar a,.admin-sidebar a{border-radius:12px !important;color:var(--au-ink2) !important;font-weight:600}
.sidebar a:hover,.sidebar a.active,.admin-sidebar a.active{background:var(--au-brand-soft) !important;color:var(--au-brand) !important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#eef1f7}
::-webkit-scrollbar-thumb{background:#cbd4e4;border-radius:999px;border:2px solid #eef1f7}
::-webkit-scrollbar-thumb:hover{background:var(--au-brand)}

/* =========================================================
   SERVICE VIEW — advanced tile cards with gradient icon slabs
   ========================================================= */
.dashboard-service-grid,.service-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr)) !important;
  gap:16px !important;padding:4px 2px !important;
}
@media(max-width:640px){.dashboard-service-grid,.service-grid{grid-template-columns:1fr !important;gap:12px !important}}

.dashboard-service-card,.service-card{
  box-sizing:border-box !important;
  position:relative !important;
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:14px !important;row-gap:6px !important;
  align-items:start !important;text-align:left !important;
  background:#fff !important;
  border:1px solid var(--au-line) !important;
  border-radius:20px !important;
  padding:18px !important;
  box-shadow:var(--au-sh-sm) !important;
  overflow:hidden !important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s !important;
}
.dashboard-service-card::before,.service-card::before{
  content:'' !important;position:absolute !important;inset:auto auto 0 0 !important;
  width:100% !important;height:3px !important;padding:0 !important;
  background:var(--au-grad) !important;-webkit-mask:none !important;mask:none !important;
  opacity:0 !important;transition:opacity .25s !important;border-radius:0 !important;
}
.dashboard-service-card::after,.service-card::after{
  content:'' !important;position:absolute;right:-56px;top:-56px;width:150px;height:150px;border-radius:50%;
  background:var(--au-grad);opacity:.08;pointer-events:none;transition:opacity .25s;
}
.dashboard-service-card:hover,.service-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 28px 55px -26px rgba(37,48,110,.45) !important;
  border-color:#d7dcff !important;
}
.dashboard-service-card:hover::before,.service-card:hover::before{opacity:1 !important}
.dashboard-service-card:hover::after,.service-card:hover::after{opacity:.16}

/* icon slab */
.dashboard-service-card>div:first-of-type,.svc-icon{
  grid-column:1 !important;grid-row:1 / span 2 !important;
  width:64px !important;height:64px !important;margin:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:30px !important;
  background:var(--au-grad-soft) !important;
  border:1px solid #e7e9ff !important;border-radius:18px !important;
  box-shadow:inset 0 1px 0 #fff, 0 10px 20px -14px rgba(74,92,245,.7) !important;
  animation:none !important;filter:none !important;
}
.dashboard-service-card>div:first-of-type img,.svc-img{max-width:38px !important;max-height:38px !important;border-radius:10px !important}
.dashboard-service-card>div:first-of-type i{color:var(--au-brand) !important;font-size:26px}

/* title */
.dashboard-service-card h3,.service-card h3{
  grid-column:2 !important;grid-row:1 !important;margin:0 !important;
  font-size:15px !important;font-weight:800 !important;line-height:1.35 !important;
  color:var(--au-ink) !important;letter-spacing:-.2px !important;padding-right:64px !important;
}

/* price chip */
.dashboard-service-card p,.service-card .price,.svc-price{
  grid-column:2 !important;grid-row:2 !important;
  justify-self:start !important;display:inline-flex !important;align-items:center !important;
  width:auto !important;margin:2px 0 0 !important;
  background:#eef7f2 !important;color:#0b7a51 !important;
  border:1px solid #ccebdc !important;border-radius:999px !important;
  padding:4px 12px !important;font-family:'Inter',sans-serif !important;
  font-size:12px !important;font-weight:800 !important;box-shadow:none !important;letter-spacing:.2px !important;
}

/* action button full width bottom */
.dashboard-service-card .btn,.dashboard-service-card a.btn,.service-card .btn{
  grid-column:1 / -1 !important;grid-row:3 !important;
  box-sizing:border-box !important;width:auto !important;justify-self:stretch !important;
  display:block !important;text-align:center !important;margin:12px 0 0 !important;
  padding:11px 14px !important;border-radius:14px !important;
  font-size:13px !important;font-weight:800 !important;text-transform:none !important;letter-spacing:0 !important;
}
.dashboard-service-card .btn::after{display:none !important}
.dashboard-service-card .btn:hover{transform:translateY(-2px) !important;filter:brightness(1.06) !important}

/* corner status pills (OFFLINE / OTP / NEW) */
.dashboard-service-card>span[style*="position:absolute"]{
  position:absolute !important;top:12px !important;right:12px !important;left:auto !important;
  background:#fff !important;color:var(--au-amber) !important;
  border:1px solid #f2e2c2 !important;border-radius:999px !important;
  font-family:'Inter',sans-serif !important;font-size:10px !important;font-weight:800 !important;
  padding:3px 9px !important;letter-spacing:.5px;animation:none !important;
  box-shadow:var(--au-sh-xs) !important;
}

/* ---- section heroes / headers ---- */
.cat-hero,.mb-4[style*="border-radius:18px"]{
  background:var(--au-grad) !important;border:none !important;border-radius:22px !important;
  padding:20px 22px !important;color:#fff !important;position:relative;overflow:hidden;
  box-shadow:0 26px 50px -28px rgba(74,92,245,.95) !important;
}
.cat-hero::after,.mb-4[style*="border-radius:18px"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 200px at 88% -30%, rgba(255,255,255,.4), transparent 60%);
}
.cat-hero h2,.cat-hero p,.cat-hero span,.mb-4[style*="border-radius:18px"] h2,.mb-4[style*="border-radius:18px"] p{
  color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important;
}
.cat-hero h2{font-size:20px !important;font-weight:800 !important;text-transform:none !important;letter-spacing:-.3px}
.cat-hero p{font-size:12.5px !important;opacity:.92;font-weight:600}

/* sidebar category menu — square box tiles */
.side-cat-menu{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:10px !important;
  padding:2px !important;
}
.side-cat-item{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  text-decoration:none !important;
  aspect-ratio:1 / 1 !important;
  min-height:96px !important;
  padding:10px 8px !important;
  border-radius:16px !important;
  background:#ffffff !important;
  border:2px solid var(--cat-color, #6366f1) !important;
  box-shadow:0 6px 16px rgba(15,23,42,.06) !important;
  transition:transform .2s, box-shadow .2s, border-color .2s !important;
  overflow:hidden !important;
}
.side-cat-item::before{
  content:'' !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(135deg, var(--cat-color, #6366f1) 0%, transparent 60%) !important;
  opacity:.08 !important;transition:opacity .2s !important;pointer-events:none !important;
}
.side-cat-item:hover,.side-cat-item.active{
  transform:translateY(-4px) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.12) !important;
  border-color:var(--cat-color, #6366f1) !important;
}
.side-cat-item:hover::before,.side-cat-item.active::before{opacity:.18 !important}
.side-cat-item .sc-icon{
  font-size:30px !important;line-height:1 !important;margin-bottom:5px !important;
  z-index:1 !important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08));
}
.side-cat-item .sc-label{
  font-size:11px !important;font-weight:800 !important;line-height:1.2 !important;
  color:var(--au-ink) !important;z-index:1 !important;
}
.side-cat-item .sc-count{
  position:absolute !important;top:6px !important;right:6px !important;
  font-size:10px !important;font-weight:900 !important;padding:3px 7px !important;
  border-radius:999px !important;background:var(--cat-color, #6366f1) !important;
  color:#fff !important;box-shadow:0 3px 8px rgba(0,0,0,.15) !important;z-index:2 !important;
}
.side-cat-item.all-cat{--cat-color:#6366f1}
.cat-side{padding:14px !important}
@media(max-width:640px){
  .side-cat-menu{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
  .side-cat-item{min-height:86px !important;padding:8px !important;border-radius:14px !important}
  .side-cat-item .sc-icon{font-size:26px !important}
  .side-cat-item .sc-label{font-size:10px !important}
  .side-cat-item .sc-count{font-size:9px !important;padding:2px 6px !important}
}

/* =========================================================
   CATEGORY GRID — square tile menu
   ========================================================= */
#catGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
  gap:20px !important;
  padding:18px 4px 4px !important;
}
#catGrid .cat-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  text-decoration:none !important;
  aspect-ratio:1 / 1 !important;
  min-height:200px !important;
  padding:26px 14px 16px !important;
  border-radius:18px !important;
  background:#ffffff !important;
  border:2.5px solid var(--cat-color, #6366f1) !important;
  box-shadow:0 12px 26px rgba(15,23,42,.10) !important;
  transition:transform .25s, box-shadow .25s, border-color .25s !important;
  transform:rotate(-2deg) !important;
  transform-origin:top center !important;
  overflow:visible !important;
}
#catGrid .cat-card:nth-child(even){
  transform:rotate(2deg) !important;
}
#catGrid .cat-card::before{
  content:'' !important;position:absolute !important;inset:0 !important;
  background:linear-gradient(135deg, var(--cat-color, #6366f1) 0%, transparent 60%) !important;
  opacity:.08 !important;transition:opacity .2s !important;pointer-events:none !important;
  border-radius:18px !important;
}
#catGrid .cat-card::after{
  content:'' !important;
  position:absolute !important;
  top:-12px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:2px !important;
  height:29px !important;
  background:linear-gradient(to bottom, #94a3b8, #cbd5e1) !important;
  z-index:2 !important;
}
#catGrid .cat-card:hover,#catGrid .cat-card.active{
  transform:translateY(-8px) rotate(0deg) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.15) !important;
  border-color:var(--cat-color, #6366f1) !important;
}
#catGrid .cat-card:hover::before,#catGrid .cat-card.active::before{opacity:.18 !important}
#catGrid .cat-card .cc-hole{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 30% 30%, #ffffff, #cbd5e1 55%, #64748b 100%) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25) !important;
  z-index:3 !important;
}
#catGrid .cat-card .cc-icon{
  width:72px !important;height:72px !important;
  margin:0 auto 12px !important;
  border-radius:18px !important;
  background:var(--cat-bg, #e0e7ff) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:34px !important;box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
}
#catGrid .cat-card .cc-label{
  font-size:15px !important;font-weight:900 !important;line-height:1.2 !important;
  color:var(--au-ink) !important;
}
#catGrid .cat-card .cc-count{
  position:absolute !important;top:10px !important;right:12px !important;
  font-size:13px !important;font-weight:900 !important;padding:4px 12px !important;
  border-radius:999px !important;background:var(--cat-color, #6366f1) !important;
  color:#fff !important;box-shadow:0 3px 8px rgba(0,0,0,.15) !important;
}
@media(max-width:640px){
  #catGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;gap:14px !important}
  #catGrid .cat-card{min-height:150px !important;padding:20px 10px 12px !important;border-radius:16px !important}
  #catGrid .cat-card .cc-icon{width:56px !important;height:56px !important;font-size:28px !important;border-radius:14px !important}
  #catGrid .cat-card .cc-label{font-size:13px !important}
  #catGrid .cat-card .cc-count{font-size:11px !important;padding:3px 8px !important}
  #catGrid .cat-card .cc-hole{width:12px !important;height:12px !important}
}

/* history / request rows */
.request-item{border-left:3px solid var(--au-brand) !important;border-radius:16px !important;box-shadow:var(--au-sh-xs) !important}
.request-item:hover{background:#f8faff !important;box-shadow:var(--au-sh-sm) !important}

/* ================= FORCE LIGHT (dark mode disabled) ================= */
html,body,body.dark-mode,body.dark,html[data-theme="dark"] body{
  color-scheme:light !important;background-color:var(--au-bg) !important;color:var(--au-ink) !important;
}
body.dark-mode .card,body.dark-mode .service-card,body.dark-mode .dashboard-service-card,
html[data-theme="dark"] .dashboard-service-card,html[data-theme="dark"] .card,
body.dark-mode .auth-card,body.dark-mode .cat-card,body.dark-mode .notif-panel,
body.dark-mode .form-control,body.dark-mode input,body.dark-mode select,body.dark-mode textarea{
  background:#fff !important;color:var(--au-ink) !important;border-color:var(--au-line) !important;
}
html[data-theme="dark"] .dashboard-service-card h3{color:var(--au-ink) !important}
body.dark-mode .header,body.dark-mode .bottom-nav{background:rgba(255,255,255,.9) !important;color:var(--au-ink) !important}

@media (max-width:640px){
  .container{padding:0 12px !important}
  .dashboard-service-card{padding:14px !important}
  .dashboard-service-card>div:first-of-type{width:54px !important;height:54px !important;font-size:26px !important}
}

/* ==========================================================
   V7.8 — SERVICE FORM (srv page) COMPLETE NEW LOOK
   ========================================================== */
.svcx-back{
  display:inline-flex!important;align-items:center;gap:8px;
  background:#fff!important;color:#0f172a!important;
  border:1px solid #e2e8f0!important;border-radius:999px!important;
  padding:9px 18px!important;font-weight:800!important;
  box-shadow:0 6px 18px rgba(15,23,42,.06)!important;
}
.svcx-back:hover{transform:translateX(-3px);box-shadow:0 10px 24px rgba(15,23,42,.12)!important}

.svcx-card{
  max-width:760px!important;
  border:1px solid #e6ecf5!important;border-top:0!important;
  border-radius:26px!important;overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 26px 60px -28px rgba(30,64,175,.35)!important;
}
.svcx-card::before{
  content:"";display:block;height:6px;
  background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e);
}

/* --- Header slab --- */
.svcx-head{
  position:relative!important;text-align:left!important;
  padding:26px 28px 22px 28px!important;
  color:#0f172a!important;font-size:20px!important;font-weight:900!important;
  background:
    radial-gradient(900px 240px at 0% 0%,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(700px 240px at 100% 0%,rgba(6,182,212,.14),transparent 60%),
    #f8fbff!important;
  border-bottom:1px solid #eef2f9!important;
  display:flex;flex-direction:column;gap:14px;
}
.svcx-head > i.fas{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-right:12px;
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff!important;font-size:20px;vertical-align:middle;
  box-shadow:0 10px 22px -8px rgba(37,99,235,.65);
}
.svcx-head > div{
  justify-content:flex-start!important;gap:10px!important;margin-top:2px!important;
}
.svcx-head > div span{
  border-radius:999px!important;padding:8px 14px!important;
  font-weight:900!important;font-size:13px!important;letter-spacing:.2px;
  border:1px solid rgba(15,23,42,.06);
  background:#fff!important;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
  display:inline-flex;align-items:center;gap:6px;
}
.svcx-head > div span:first-child::before{content:"⚡"}
.svcx-head > div span:last-child::before{content:"👛"}

/* --- Body --- */
.svcx-body{padding:28px!important;background:
  linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;}

.svcx-body .form-group{
  background:#fff;border:1px solid #e9eef6;border-radius:18px;
  padding:14px 16px 16px;margin-bottom:16px!important;
  box-shadow:0 8px 20px -16px rgba(15,23,42,.5);
  transition:.18s ease;
}
.svcx-body .form-group:focus-within{
  border-color:#93c5fd;box-shadow:0 14px 30px -18px rgba(37,99,235,.7);
  transform:translateY(-1px);
}
.svcx-body .form-group label{
  display:block;color:#64748b!important;font-weight:900!important;
  font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:6px!important;
}
.svcx-body .form-control{
  width:100%;border:0!important;border-bottom:2px solid #eef2f7!important;
  border-radius:0!important;background:transparent!important;
  padding:8px 2px 10px!important;font-size:17px!important;font-weight:700!important;
  color:#0f172a!important;box-shadow:none!important;
}
.svcx-body .form-control:focus{border-bottom-color:#2563eb!important}
.svcx-body select.form-control{background:transparent!important}

.svcx-body .alert{border-radius:16px!important;font-weight:700}

/* note strip */
.svcx-body .form-group + div[style*="dashed"],
.svcx-body div[style*="dashed"]{
  border:0!important;border-radius:14px!important;
  background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(249,115,22,.08))!important;
  padding:14px 16px!important;
}

/* --- Submit button --- */
.svcx-body .btn-full,
.svcx-body button[type="submit"]{
  width:100%!important;border:0!important;border-radius:16px!important;
  padding:17px!important;font-size:17px!important;font-weight:900!important;
  letter-spacing:.3px;color:#fff!important;
  background:linear-gradient(135deg,#2563eb,#06b6d4)!important;
  box-shadow:0 18px 34px -16px rgba(37,99,235,.85)!important;
  transition:.18s ease;
}
.svcx-body button[type="submit"]:hover{transform:translateY(-2px);filter:brightness(1.05)}
.svcx-body button[type="submit"]:active{transform:translateY(0)}

@media(max-width:640px){
  .svcx-card{border-radius:20px!important}
  .svcx-head{padding:20px 18px!important}
  .svcx-body{padding:18px!important}
}

/* ==========================================================
   V7.9 — COLORFUL ANIMATED BORDER + BOLD READABLE FONT
   ========================================================== */
:root{
  --fx1:#2563eb; --fx2:#06b6d4; --fx3:#22c55e; --fx4:#f59e0b; --fx5:#ec4899; --fx6:#8b5cf6;
}
html,body,button,input,select,textarea,
.card,.btn,h1,h2,h3,h4,h5,label,p,span,a,td,th,li{
  font-family:'Baloo 2','Tiro Devanagari Marathi','Mukta','Hind','Poppins',system-ui,sans-serif!important;
}
body{font-weight:700!important;letter-spacing:.1px;color:#0f172a!important}
h1,h2,h3,h4,h5,.card-header,.btn,label,th{font-family:'Titan One','Baloo 2','Tiro Devanagari Marathi',sans-serif!important;font-weight:400!important}

@keyframes svcxSpin{to{transform:rotate(1turn)}}
@keyframes svcxHue{to{filter:hue-rotate(360deg)}}

/* rotating rainbow border on service form card */
.svcx-card{
  position:relative!important;background:#fff!important;
  border:0!important;padding:3px!important;border-radius:28px!important;
  overflow:visible!important;
  box-shadow:0 24px 60px -30px rgba(37,99,235,.5)!important;
}
.svcx-card::before{
  content:""!important;position:absolute;inset:-3px;z-index:0;
  border-radius:31px;height:auto!important;
  background:conic-gradient(from 0deg,var(--fx1),var(--fx2),var(--fx3),var(--fx4),var(--fx5),var(--fx6),var(--fx1));
  animation:svcxSpin 6s linear infinite;
  filter:blur(.3px);
}
.svcx-card::after{
  content:"";position:absolute;inset:3px;background:#fff;border-radius:25px;z-index:0;
}
.svcx-card > *{position:relative;z-index:1}
.svcx-head{border-radius:25px 25px 0 0!important}

/* colorful chips */
.svcx-head > div span:first-child{
  background:linear-gradient(135deg,#fff1f2,#ffe4e6)!important;color:#e11d48!important;
  border:1.5px solid #fecdd3!important;
}
.svcx-head > div span:last-child{
  background:linear-gradient(135deg,#ecfdf5,#d1fae5)!important;color:#059669!important;
  border:1.5px solid #a7f3d0!important;
}
.svcx-head > i.fas{
  background:conic-gradient(from 0deg,var(--fx1),var(--fx5),var(--fx3),var(--fx1))!important;
  animation:svcxHue 8s linear infinite;
}

/* colorful field cards */
.svcx-body .form-group{border:2px solid transparent!important;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,#dbeafe,#cffafe,#dcfce7) border-box!important;}
.svcx-body .form-group:focus-within{
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,var(--fx1),var(--fx5),var(--fx3)) border-box!important;}
.svcx-body .form-group label{color:#2563eb!important;font-weight:900!important}
.svcx-body .form-control{font-weight:800!important}

/* rainbow submit button */
.svcx-body .btn-full,.svcx-body button[type="submit"]{
  background:linear-gradient(90deg,var(--fx1),var(--fx6),var(--fx5),var(--fx4),var(--fx3),var(--fx1))!important;
  background-size:300% 100%!important;
  animation:svcxFlow 6s linear infinite;
}
@keyframes svcxFlow{to{background-position:300% 0}}

.svcx-back{border:2px solid transparent!important;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,var(--fx1),var(--fx5),var(--fx3)) border-box!important;}

/* ==========================================================
   V8.0 — COLORFUL BORDERS FOR ALL SERVICES / CATEGORIES
   ========================================================== */
@keyframes svcFlow{to{background-position:300% 0}}

.dashboard-service-card,.service-card{
  border:0!important;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(120deg,var(--c1),var(--c2),var(--c3),var(--c1)) border-box!important;
  border:2.5px solid transparent!important;
  background-size:auto, 300% 100%!important;
  transition:transform .18s ease, box-shadow .22s ease, background-position .6s ease!important;
}
.dashboard-service-card:hover,.service-card:hover{
  background-position:0 0, 300% 0!important;
  animation:svcFlow 3s linear infinite;
  box-shadow:0 22px 45px -22px color-mix(in oklab,var(--c2) 60%,transparent)!important;
}

/* per-card color sets (rotating palette) */
.dashboard-service-card,.service-card{--c1:#2563eb;--c2:#06b6d4;--c3:#22c55e}
.dashboard-service-card:nth-child(6n+2),.service-card:nth-child(6n+2){--c1:#ec4899;--c2:#f43f5e;--c3:#f59e0b}
.dashboard-service-card:nth-child(6n+3),.service-card:nth-child(6n+3){--c1:#8b5cf6;--c2:#6366f1;--c3:#06b6d4}
.dashboard-service-card:nth-child(6n+4),.service-card:nth-child(6n+4){--c1:#f59e0b;--c2:#22c55e;--c3:#14b8a6}
.dashboard-service-card:nth-child(6n+5),.service-card:nth-child(6n+5){--c1:#14b8a6;--c2:#3b82f6;--c3:#8b5cf6}
.dashboard-service-card:nth-child(6n),.service-card:nth-child(6n){--c1:#f43f5e;--c2:#8b5cf6;--c3:#2563eb}

/* icon slab + count badge follow the card colors */
.dashboard-service-card>div:first-of-type,.svc-icon{
  background:linear-gradient(135deg,var(--c1),var(--c2))!important;
  color:#fff!important;border:0!important;
  box-shadow:0 10px 22px -12px var(--c2)!important;
}
.dashboard-service-card>div:first-of-type i{color:#fff!important}
.dashboard-service-card .btn,.service-card .btn{
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3))!important;
  background-size:250% 100%!important;color:#fff!important;border:0!important;
}
.dashboard-service-card:hover .btn,.service-card:hover .btn{animation:svcFlow 3s linear infinite}

/* sidebar category list — colorful left bar */
.cat-list a,.sidebar a,.side-cat a{border-left:4px solid transparent!important;border-radius:12px!important}
.cat-list a:nth-child(6n+1){border-left-color:#2563eb!important}
.cat-list a:nth-child(6n+2){border-left-color:#ec4899!important}
.cat-list a:nth-child(6n+3){border-left-color:#8b5cf6!important}
.cat-list a:nth-child(6n+4){border-left-color:#f59e0b!important}
.cat-list a:nth-child(6n+5){border-left-color:#14b8a6!important}
.cat-list a:nth-child(6n){border-left-color:#f43f5e!important}

/* ==========================================================
   V8.1 — RESULT ACTIONS + DOWNLOAD BUTTONS
   ========================================================== */
.svcx-dlnow{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#22c55e,#0d9488)!important;color:#fff!important;
  padding:12px 22px!important;border-radius:14px!important;
  font-weight:900!important;font-size:16px!important;text-decoration:none!important;
  border:0!important;box-shadow:0 14px 26px -14px rgba(13,148,136,.95);transition:.18s;
}
.svcx-dlnow i{font-size:21px}
.svcx-dlnow:hover{transform:translateY(-2px);filter:brightness(1.07)}

.svcx-after{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
  margin-top:22px;padding:18px;border-radius:20px;
  background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(6,182,212,.07));
  border:1px solid #e2e8f0;
}
.svcx-after a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 18px;border-radius:14px;font-size:16px;font-weight:900;
  text-decoration:none;color:#fff;transition:.18s;
  box-shadow:0 14px 26px -16px rgba(15,23,42,.9);
}
.svcx-after a i{font-size:19px}
.svcx-after a:hover{transform:translateY(-3px);filter:brightness(1.07)}
.svcx-again{background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899)}
.svcx-exit{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.svcx-hist{background:linear-gradient(135deg,#f59e0b,#ef4444)}

/* ============================================================
   v8.2 — SERVICE CONSOLE PANELS (Request / Response cards)
   Applies to every instant service form page
   ============================================================ */
.svcx-card{
  max-width:1120px!important;
  width:100%;
  margin:0 auto!important;
}
.svcx-body{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:22px;
  align-items:stretch;
  padding:26px!important;
}
.svcx-body > .alert,
.svcx-body > .no-print.alert{grid-column:1/-1}

/* the two panels */
.svcx-body > form,
.svcx-body > #printable-result{
  position:relative;
  background:#ffffff;
  border:1.5px solid #e6ebf5;
  border-radius:22px;
  padding:56px 20px 22px;
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  text-align:left!important;
  min-width:0;
}
.svcx-body > form::before,
.svcx-body > #printable-result::before{
  content:"Request";
  position:absolute;top:16px;left:20px;
  font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#2563eb;
  padding:5px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(139,92,246,.12));
  border:1px solid rgba(37,99,235,.18);
}
.svcx-body > #printable-result::before{
  content:"Response";
  color:#059669;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(14,165,233,.12));
  border-color:rgba(16,185,129,.22);
}
/* accent rail on top of each panel */
.svcx-body > form::after,
.svcx-body > #printable-result::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,#2563eb,#8b5cf6,#ec4899);
}
.svcx-body > #printable-result::after{
  background:linear-gradient(90deg,#10b981,#0ea5e9,#22d3ee);
}
.svcx-body > #printable-result > *{text-align:left}
.svcx-body > #printable-result img,
.svcx-body > #printable-result iframe,
.svcx-body > #printable-result embed{max-width:100%}
.svcx-body > #printable-result table{width:100%!important}

/* header of the whole card becomes a left-aligned console head */
.svcx-head{
  text-align:left!important;
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  padding:22px 26px!important;
  line-height:1.3;
  font-weight:900!important;
}
.svcx-head > div{margin-left:auto!important;margin-top:0!important;justify-content:flex-end!important;flex:0 0 auto;white-space:nowrap}
.svcx-body .alert{padding:14px 18px!important;line-height:1.5}

@media (max-width:860px){
  .svcx-body{grid-template-columns:1fr!important}
  .svcx-head{padding:18px!important}
  .svcx-head > div{margin-left:0!important;width:100%}
}
@media print{
  .svcx-body{display:block!important}
  .svcx-body > #printable-result{border:none;box-shadow:none;padding:0}
  .svcx-body > #printable-result::before,.svcx-body > #printable-result::after{display:none}
}

/* ===== v8.5 : service / category names — colorful & clearly readable ===== */
.dashboard-service-card h3,.service-card h3{
  color:var(--c1) !important;
  font-size:17px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9) !important;
}
.dashboard-service-card h3{font-size:16.5px !important}
.dashboard-service-card .svc-sub,.service-card .svc-sub{
  color:#3f4a67 !important;font-weight:700 !important;font-size:13px !important;
}
/* service title inside the form page */
.svcx-head h1,.svcx-head h2,.svcx-title{
  background:linear-gradient(90deg,#2563eb,#8b5cf6,#0ea5e9) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  font-weight:900 !important;
}
/* sidebar category names */
.cat-list a,.side-cat a{color:#1e2a4a !important;font-weight:800 !important}
.cat-list a:hover,.cat-list a.active,.side-cat a.active{color:#1d4ed8 !important}

/* ============================================================
   v8.6 — SMART CONSOLE LAYOUT (like reference portal, light mode)
   Title outside, Request / Response side-by-side panels
   ============================================================ */
.svcx-card{
  max-width:1280px!important;
  background:transparent!important;
  border:0!important;box-shadow:none!important;
  padding:0!important;
}
.svcx-card::before,.svcx-card::after{display:none!important}

/* header : left aligned title, chips on the right */
.svcx-head{
  background:transparent!important;
  border:0!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:14px;flex-wrap:wrap;
  text-align:left!important;
  padding:4px 6px 14px!important;
  font-size:30px!important;line-height:1.15!important;font-weight:900!important;
}
.svcx-head > i.fas{
  font-size:30px!important;margin-right:6px;
  background:none!important;-webkit-text-fill-color:initial!important;color:#6366f1!important;
  animation:none!important;
}
.svcx-head > div{margin-top:0!important;justify-content:flex-end!important}
.svcx-head > div span{
  font-size:14px!important;padding:8px 16px!important;border-radius:999px!important;font-weight:800!important;
}

/* two panels */
.svcx-body{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:24px!important;align-items:start!important;
  padding:0!important;background:transparent!important;
}
.svcx-body > form,
.svcx-body > #printable-result,
.svcx-body::after{
  background:#fff!important;
  border:1.5px solid #e5eaf5!important;
  border-radius:20px!important;
  padding:58px 24px 26px!important;
  box-shadow:0 18px 40px -26px rgba(20,30,80,.35)!important;
}
.svcx-body > form::before,
.svcx-body > #printable-result::before{
  content:"Request";
  top:20px!important;left:24px!important;
  font-size:16px!important;letter-spacing:0!important;text-transform:none!important;
  background:none!important;border:0!important;padding:0!important;
  color:#0f1b3d!important;font-weight:900!important;
}
.svcx-body > #printable-result::before{content:"Response";color:#0f1b3d!important}
.svcx-body > form::after,
.svcx-body > #printable-result::after{
  height:4px!important;border-radius:20px 20px 0 0!important;
  background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)!important;
}
.svcx-body > #printable-result::after{background:linear-gradient(90deg,#10b981,#0ea5e9)!important}

/* Response placeholder panel while no result yet */
.svcx-body:not(:has(#printable-result))::after{
  content:"Response — Submit the form to see the API response.";
  display:block;color:#5b6684;font-weight:700;font-size:15px;
  min-height:150px;position:relative;
}

/* inputs like the reference: boxed fields */
.svcx-body .form-group{
  background:#f8faff!important;border:1.5px solid #e3e9f7!important;
  border-radius:14px!important;padding:12px 14px!important;box-shadow:none!important;
  animation:none!important;
}
.svcx-body .form-group:focus-within{border-color:#6366f1!important;background:#fff!important}
.svcx-body .form-group label{color:#38415c!important;font-size:13.5px!important}
.svcx-body .form-control{border:0!important;background:transparent!important;font-size:16px!important}
.svcx-body .btn-full,.svcx-body button[type="submit"]{
  border-radius:14px!important;font-size:17px!important;padding:15px!important;
}
@media (max-width:640px){
  .svcx-head{font-size:22px!important}
  .svcx-body > form,.svcx-body > #printable-result{padding:52px 16px 20px!important}
}

/* ============================================================
   v8.7 — readable typography + fixed Response column
   ============================================================ */
html,body,button,input,select,textarea,
.card,.btn,h1,h2,h3,h4,h5,label,p,span,a,td,th,li{
  font-family:'Mukta','Noto Sans Devanagari','Segoe UI',Arial,sans-serif!important;
  letter-spacing:0!important;
}
body{font-size:16px!important;font-weight:600!important;line-height:1.55!important;color:#17213a!important}
h1,h2,h3,h4,h5,.card-header,.btn,label,th{
  font-family:'Mukta','Noto Sans Devanagari','Segoe UI',Arial,sans-serif!important;
  font-weight:800!important;letter-spacing:0!important;
}
.dashboard-service-card h3,.service-card h3{
  font-size:18px!important;line-height:1.45!important;font-weight:800!important;
}
.dashboard-service-card .svc-sub,.service-card .svc-sub{
  font-size:14px!important;line-height:1.5!important;font-weight:600!important;
}
.svcx-head{font-size:28px!important;font-weight:800!important}
.svcx-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.svcx-body > form{grid-column:1!important}
.svcx-body > #printable-result{grid-column:2!important}
.svcx-body:not(:has(#printable-result))::after{grid-column:2!important}
.svcx-body > .alert,.svcx-body > .no-print.alert{grid-column:1/-1!important}
.svcx-body label,.svcx-body p,.svcx-body span,.svcx-body td,.svcx-body th{
  font-size:15px!important;line-height:1.55!important;
}
@media(max-width:860px){
  .svcx-body{grid-template-columns:1fr!important}
  .svcx-body > form,.svcx-body > #printable-result,
  .svcx-body:not(:has(#printable-result))::after{grid-column:1!important}
}