:root {
  --primary-blue: #0056CC;
  --deep-blue: #003399;
  --primary-pink: #FD5204;
  --deep-pink: #D94400;
  --light-blue: #E8F2FF;
  --light-pink: #FFF0E5;
  --bg-main: #FBF9F6;
  --text-primary: #0B1B3A;
  --text-secondary: #64748B;
  --success: #16A34A;
  --warning: #F59E0B;
  --error: #DC2626;
  --brand-gradient: linear-gradient(135deg, #0056CC, #007BF1);
  --brand-gold: linear-gradient(135deg, #FEBB1D, #FE9A14);
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', 'Noto Sans Kannada', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.brand-gradient { background: var(--brand-gradient); }
.brand-gradient-text {
  background: linear-gradient(100deg, #0056CC 10%, #007BF1 55%, #FE9A14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-primary-blue { color: var(--primary-blue); }
.text-primary-pink { color: var(--primary-pink); }
.bg-light-blue { background: var(--light-blue); }
.bg-light-pink { background: var(--light-pink); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-gray  { background: #F1F5F9; color: #475569; }
.badge-blue  { background: var(--light-blue); color: var(--primary-blue); }
.badge-pink  { background: var(--light-pink); color: var(--primary-pink); }
.badge-green { background: #DCFCE7; color: var(--success); }
.badge-amber { background: #FEF3C7; color: #B45309; }
.badge-red   { background: #FEE2E2; color: var(--error); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,86,204,0.12);
  border-color: #DBEAFE;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease, background .2s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 20px rgba(0,86,204,0.25); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(217,68,0,0.3); }
.btn-outline { border: 1.5px solid #E2E8F0; color: var(--text-primary); background: #fff; }
.btn-outline:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { color: var(--primary-blue); }

/* ---------- Inputs ---------- */
.input, select.input, textarea.input {
  width: 100%; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 12px 14px;
  font-size: 16px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(0,86,204,0.12);
}
label.form-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; display: block; }
.help-text { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ---------- Animations ---------- */
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes glow { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes popIn { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes countUpFade { from { opacity: 0; } to { opacity: 1; } }

.animate-fade-up { animation: fadeSlideUp .7s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-in { animation: fadeIn .6s ease both; }
.animate-float { animation: floatY 5s ease-in-out infinite; }
.animate-float-slow { animation: floatY2 7s ease-in-out infinite; }
.animate-glow { animation: glow 3s ease-in-out infinite; }
.animate-pop { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }

.stagger > * { opacity: 0; animation: fadeSlideUp .6s cubic-bezier(.16,1,.3,1) forwards; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .19s; }
.stagger > *:nth-child(4) { animation-delay: .26s; }
.stagger > *:nth-child(5) { animation-delay: .33s; }
.stagger > *:nth-child(6) { animation-delay: .4s; }
.stagger > *:nth-child(n+7) { animation-delay: .46s; }

.skeleton { background: linear-gradient(90deg, #EEF2F7 25%, #F8FAFC 37%, #EEF2F7 63%); background-size: 400px 100%; animation: shimmer 1.4s ease infinite; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Progress Stepper ---------- */
.stepper { display: flex; align-items: center; }
.stepper .step-dot {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: #F1F5F9; color: var(--text-secondary); border: 2px solid #F1F5F9;
  transition: all .3s ease; flex-shrink: 0;
}
.stepper .step-dot.active { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(0,86,204,.35); }
.stepper .step-dot.done { background: var(--success); color: #fff; border-color: transparent; }
.stepper .step-line { flex: 1; height: 3px; background: #F1F5F9; margin: 0 6px; border-radius: 2px; overflow: hidden; }
.stepper .step-line-fill { height: 100%; background: var(--brand-gradient); width: 0%; transition: width .4s ease; }

/* ---------- Timeline ---------- */
.timeline-item { position: relative; padding-left: 32px; padding-bottom: 26px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2px; background: #E2E8F0; }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 999px; background: #E2E8F0; }
.timeline-item.done .timeline-dot { background: var(--success); }
.timeline-item.current .timeline-dot { background: var(--primary-pink); box-shadow: 0 0 0 5px rgba(253,82,4,0.18); }

/* ---------- FAQ Accordion ---------- */
.faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item .faq-chevron { transition: transform .3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ---------- Toast ---------- */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast { background: #0056CC; color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: popIn .3s ease both; }

/* Scrollbar for admin tables */
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 8px; }

/* Bottom mobile nav */
.mobile-nav-item.active { color: var(--primary-blue); }


/* ================= YUVA SERVICES theme: light & premium — no black/dark surfaces ================= */
.bg-slate-900, .bg-slate-800 { background: linear-gradient(160deg, #0056CC 0%, #0069E0 100%) !important; }
.bg-slate-900 .text-slate-300, .bg-slate-900.text-slate-300 { color: rgba(255,255,255,.9) !important; }
.bg-slate-900 .text-slate-400, .bg-slate-900.text-slate-400, .bg-slate-800 .text-slate-400 { color: rgba(255,255,255,.78) !important; }
.bg-slate-900 .text-slate-500, .bg-slate-800 .text-slate-500 { color: rgba(255,255,255,.6) !important; }
.bg-slate-900 .border-slate-800, .bg-slate-900.border-slate-800, .border-slate-800 { border-color: rgba(255,255,255,.18) !important; }
.bg-black\/40, .bg-black\/60 { background-color: rgba(0,86,204,.28) !important; }
.bg-black\/40.rounded, .bg-black\/40.px-1\.5 { background-color: rgba(0,86,204,.7) !important; }
body { background-image: radial-gradient(900px 420px at 100% -5%, rgba(0,123,241,.10), transparent 60%), radial-gradient(700px 380px at -5% 0, rgba(254,154,20,.10), transparent 60%); background-attachment: fixed; }
.card { border-color: #E9EEF8; border-radius: 20px; }
.card-hover:hover { box-shadow: 0 18px 36px -20px rgba(0,86,204,.35); border-color: #D5E1FB; }
.btn { border-radius: 14px; }
.btn-primary { box-shadow: 0 12px 26px -10px rgba(0,86,204,.55); }
.btn-primary:hover { box-shadow: 0 16px 30px -10px rgba(0,86,204,.65); transform: translateY(-2px); }
.badge-pink { background: #FFF0E5; color: #BF3D00; }
h1, h2, h3 { letter-spacing: -.01em; }

/* Footer: always light */
.footer-light, footer.bg-slate-900 { background: #fff !important; color: #51607E !important; border-top: 1px solid #ECEFF7; }
footer.bg-slate-900 h4 { color: #0B1B3A !important; }
footer.bg-slate-900 .text-slate-400, footer.bg-slate-900 .text-slate-500 { color: #51607E !important; }
footer.bg-slate-900 a:hover { color: #0056CC !important; }
footer.bg-slate-900 .border-slate-800 { border-color: #ECEFF7 !important; }

/* Smooth scroll reveal for any page content */
html { scroll-behavior: smooth; }

/* logo on blue surfaces sits in a white pill */
.bg-slate-900 img[src*="logo-header"] { background:#fff; padding:6px 12px; border-radius:12px; box-sizing:content-box; }
.bg-slate-900 img[src*="logo-header"].h-8 { height:2rem; }

/* Scroll-driven entrance for cards on every page (browsers without support simply show them normally) */
@supports (animation-timeline: view()) {
  .card, .y-card { animation: fadeSlideUp linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  .stagger > * { animation: fadeSlideUp .6s cubic-bezier(.16,1,.3,1) forwards; animation-timeline: auto; }
}

/* Brand stripe from the logo colours */
header.sticky { position: sticky; }
header.sticky::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg,#003399,#007BF1 40%,#FEBB1D 72%,#FD5204); }
footer.bg-slate-900 { border-top: 3px solid transparent !important; border-image: linear-gradient(90deg,#003399,#007BF1 40%,#FEBB1D 72%,#FD5204) 1 !important; }

/* Logo watermark: faint brand mark behind every page */
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.075;
  background:url('../images/logo-icon.png') no-repeat right 3vw bottom 4vh / min(52vw, 560px) auto; }
@media (max-width:640px){ body::before { background-size:min(86vw,380px) auto; background-position:center bottom 8vh; opacity:.06; } }

/* ===== Animated logo ===== */
.yv-logo { position:relative; overflow:hidden; border-radius:8px; display:inline-flex; }
.yv-logo img { animation:logoIn .9s cubic-bezier(.16,1,.3,1) both; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.yv-logo:hover img { transform:scale(1.07) rotate(-1.5deg); }
.yv-logo::after { content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent); transform:skewX(-20deg); animation:logoShine 5s 1.8s ease-in-out infinite; pointer-events:none; }
@keyframes logoIn { from { opacity:0; transform:translateY(-10px) scale(.85); } to { opacity:1; transform:none; } }
@keyframes logoShine { 0%,55% { left:-70%; } 100% { left:135%; } }
body::before { animation:wmFloat 14s ease-in-out infinite alternate; }
@keyframes wmFloat { from { transform:translateY(0) rotate(0deg) scale(1); } to { transform:translateY(-20px) rotate(2.5deg) scale(1.04); } }
/* Intro splash (once per visit) */
#yvSplash { display:none; position:fixed; inset:0; z-index:100; background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:24px; }
html.splash #yvSplash { display:flex; animation:spOut .6s 1.7s forwards; }
#yvSplash img { width:min(320px,70vw); animation:spIn 1.1s cubic-bezier(.16,1,.3,1) both; }
#yvSplash .bar { width:170px; height:4px; border-radius:4px; background:#E6EEFB; overflow:hidden; }
#yvSplash .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#003399,#007BF1,#FEBB1D,#FD5204); animation:spBar 1.3s .25s ease-out forwards; }
@keyframes spIn { from { opacity:0; transform:scale(.65) translateY(16px); filter:blur(10px); } to { opacity:1; transform:none; filter:none; } }
@keyframes spBar { to { width:100%; } }
@keyframes spOut { to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce) { .yv-logo::after, body::before { animation:none; } #yvSplash { display:none !important; } }

/* ===== Mobile app mode for every logged-in customer page ===== */
@media (max-width:767px){
  body.yv-app { background:#F4F7FD; }
  body.yv-app > footer, body.yv-app footer { display:none !important; }
  body.yv-app header { background:#fff; box-shadow:0 8px 24px -18px rgba(0,51,153,.45); }
  body.yv-app main { padding-bottom:92px; }
  body.yv-app .card, body.yv-app .bg-white.rounded-2xl, body.yv-app .bg-white.rounded-xl { border-radius:22px; }
  body.yv-app .btn { border-radius:14px; }
  body.yv-app nav.fixed.bottom-0 { border:0; border-radius:24px 24px 0 0; box-shadow:0 -14px 34px -16px rgba(0,51,153,.35); padding-top:8px; }
  body.yv-app .mobile-nav-item { position:relative; border-radius:16px; transition:transform .2s, background .2s; }
  body.yv-app .mobile-nav-item.active { background:#E8F2FF; }
  body.yv-app .mobile-nav-item:active { transform:scale(.92); }
  body.yv-app input.input, body.yv-app select.input, body.yv-app textarea.input { border-radius:14px; font-size:16px; }
}
.yv-app header img[src*="logo-header"] { filter:none; opacity:1; }

/* ===== App design system (mobile) ===== */
.yv-bnav { border-radius:22px 22px 0 0; box-shadow:0 -12px 34px -14px rgba(0,51,153,.30); padding-top:8px; }
.yv-bn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px; color:#4A5876; font-size:11.5px; font-weight:600; text-align:center; line-height:1.15; transition:transform .2s; }
.yv-bn svg { stroke-width:1.8; }
.yv-bn.on { color:#4F20E0; font-weight:800; }
.yv-bn.on svg { fill:#4F20E0; stroke:#4F20E0; fill-opacity:.15; stroke-width:2.2; }
.yv-bn:active { transform:scale(.92); }
.ap-only { display:none; }
.ap-hide-m { display:block; }
@media (max-width:767px){
  .ap-only { display:block; }
  .ap-hide-m { display:none !important; }
  .yv-app header .max-w-7xl > div { height:68px; }
  .ap-wallet { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:22px; color:#fff; background:linear-gradient(110deg,#3A12C4,#4F20E0 60%,#7B4DF2); box-shadow:0 20px 34px -22px rgba(0,51,153,.8); }
  .ap-wallet .ico { width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0; }
  .ap-wallet .amt { font-size:28px; font-weight:800; line-height:1.1; }
  .ap-wallet .add { margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:#fff; color:#4F20E0; font-weight:800; font-size:15px; padding:12px 16px; border-radius:14px; white-space:nowrap; }
  .ap-stats { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid #E6E2F8; border-radius:20px; padding:14px 4px; }
  .ap-stats > div { text-align:center; border-left:1px solid #E5ECF8; } .ap-stats > div:first-child { border-left:0; }
  .ap-stats .c { width:42px; height:42px; border-radius:50%; margin:0 auto 6px; display:grid; place-items:center; color:#fff; }
  .ap-stats b { display:block; font-size:22px; font-weight:800; line-height:1.1; } .ap-stats span { font-size:12.5px; color:#51607E; }
  .ap-banner { display:flex; align-items:center; gap:12px; padding:14px; border-radius:20px; background:linear-gradient(110deg,#EEEAFE,#F3F8FF); border:1px solid #D6E6FB; }
  .ap-banner .pic { width:64px; height:64px; border-radius:18px; background:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 20px -14px rgba(0,86,204,.7); }
  .ap-banner h3 { font-size:14px; font-weight:800; color:#0B1B3A; line-height:1.25; } .ap-banner p { font-size:12px; color:#51607E; margin-top:3px; }
  .ap-banner a { white-space:normal; text-align:center; max-width:92px; line-height:1.15; background:linear-gradient(135deg,#4F20E0,#7B4DF2); color:#fff; font-weight:700; font-size:13px; padding:10px 12px; border-radius:12px; display:inline-flex; gap:6px; align-items:center; }
  .ap-h { display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px; }
  .ap-h h2 { font-size:21px; font-weight:800; color:#0B1B3A; } .ap-h a { font-size:14px; font-weight:700; color:#4F20E0; display:inline-flex; gap:4px; align-items:center; }
  .ap-qs { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
  .ap-qs a { border-radius:18px; padding:12px 4px 10px; text-align:center; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px; transition:transform .2s; }
  .ap-qs a:active { transform:scale(.95); }
  .ap-qs .i { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.75); overflow:hidden; } .ap-qs .i img { width:100%; height:100%; object-fit:contain; padding:3px; }
  .ap-qs b { font-size:12.5px; font-weight:800; line-height:1.15; color:#0B1B3A; } .ap-qs small { font-size:10.5px; color:#51607E; line-height:1.15; }
  .q0 { background:#FDE9E4; } .q1 { background:#E7EEFF; } .q2 { background:#E4F6EA; } .q3 { background:#FFF3DA; } .q4 { background:#E2F3FB; } .q5 { background:#FCE8F1; } .q6 { background:#F1E9FB; } .q7 { background:#E3EDFF; }
  .ap-card { background:#fff; border:1px solid #E6E2F8; border-radius:20px; overflow:hidden; }
  .ap-row { display:flex; align-items:center; gap:12px; padding:14px; border-top:1px solid #ECE9F8; } .ap-row:first-child { border-top:0; }
  .ap-row .t { width:52px; height:52px; border-radius:14px; background:#EEEAFE; color:#4F20E0; display:grid; place-items:center; flex-shrink:0; }
  .ap-help { display:flex; align-items:center; gap:12px; padding:14px; border-radius:20px; background:#EEEAFE; margin-top:16px; }
  .ap-help .i { width:52px; height:52px; border-radius:50%; background:#fff; color:#4F20E0; display:grid; place-items:center; flex-shrink:0; }
  .ap-help a { margin-left:auto; border:1.5px solid #4F20E0; color:#4F20E0; font-weight:700; font-size:13px; padding:9px 12px; border-radius:12px; white-space:nowrap; background:#fff; }
}

/* Apply flow + generic forms in app mode (phones) */
@media (max-width:767px){
  .step-labels { display:grid !important; grid-template-columns:repeat(5,1fr); margin:-22px 0 18px; text-align:center; font-size:11px; font-weight:600; color:#51607E; }
  .step-labels .on { color:#4F20E0; font-weight:800; } .step-labels .dn { color:#16A34A; }
  .yv-app .stepper .step-dot { width:40px; height:40px; font-size:15px; } .yv-app .stepper .step-dot.done { background:#4F20E0; }
  .yv-app .apply-app { padding-left:14px; padding-right:14px; }
  .yv-app .apply-app .card { border-radius:22px; padding:16px; border:1px solid #E6E2F8; box-shadow:none; }
  .yv-app .apply-app h2 { background:#F1EEFD; margin:-16px -16px 14px; padding:13px 16px; border-radius:22px 22px 0 0; color:#0B1B3A; display:flex; align-items:center; gap:10px; font-size:17px; }
  .yv-app .form-label { font-weight:700; color:#0B1B3A; font-size:14px; }
  .yv-app .input { border-radius:12px; background:#fff; }
  .yv-app .btn-primary { background:linear-gradient(135deg,#4F20E0,#7B4DF2); border-radius:14px; }
  .yv-app .btn-outline { border-radius:14px; border-color:#4F20E0; color:#4F20E0; }
}

@media (max-width:767px){
  .yv-app header { border-bottom:0 !important; } .yv-app header::after { display:none !important; }
  .yv-app header img[src*="logo-app"] { height:44px; width:auto; }
  .yv-app header a[href*="notifications"] svg { color:#4F20E0; width:26px; height:26px; }
  .yv-app header a[href*="notifications"] span { background:#EF4444 !important; width:18px !important; height:18px !important; font-size:11px !important; top:0 !important; right:0 !important; }
  .q0 { background:#FDECF2 !important; } .q1 { background:#ECEBFD !important; } .q2 { background:#ECFCEC !important; } .q3 { background:#FEF6E6 !important; }
  .q4 { background:#E8F9FE !important; } .q5 { background:#FDECF2 !important; } .q6 { background:#ECEBFD !important; } .q7 { background:#E8F9FE !important; }
  .ap-dots { display:flex; justify-content:center; gap:7px; margin-top:12px; } .ap-dots i { width:9px; height:9px; border-radius:50%; background:#D9D4F6; } .ap-dots i:first-child { background:#4F20E0; }
  body.yv-app { background:#fff; }
  .ap-stats { background:#F3F6FE; border-color:#E8EEFB; }
  .ap-banner { background:linear-gradient(110deg,#E1F0FD,#EEF5FE); border-color:#D6E8FB; }
}

@media (max-width:767px){
  .ap-wallet { gap:10px; padding:14px 12px; } .ap-wallet .ico { width:50px; height:50px; border-radius:16px; }
  .ap-wallet .amt { font-size:24px; } .ap-wallet span.text-sm { white-space:nowrap; font-size:13px; }
  .ap-wallet .add { font-size:13.5px; padding:11px 12px; }
}

@media (max-width:767px){
  .apply-app { padding-top:6px !important; }
  .ap-steps { display:grid !important; grid-template-columns:repeat(4,1fr); position:relative; margin:4px 0 16px; text-align:center; }
  .ap-step { position:relative; font-size:12px; font-weight:600; color:#51607E; }
  .ap-step::before { content:''; position:absolute; top:19px; left:-50%; right:50%; height:3px; background:#E3DEF8; }
  .ap-step:first-child::before { display:none; } .ap-step.on::before, .ap-step.dn::before { background:#4F20E0; }
  .ap-step .d { position:relative; z-index:1; width:40px; height:40px; border-radius:50%; background:#E8E6F1; color:#4A5876; display:grid; place-items:center; margin:0 auto 7px; font-weight:800; font-size:16px; }
  .ap-step.on .d, .ap-step.dn .d { background:#4F20E0; color:#fff; box-shadow:0 10px 18px -8px rgba(79,32,224,.7); } .ap-step.on small { color:#4F20E0; font-weight:800; } .ap-step small { display:block; font-size:12px; line-height:1.15; padding:0 2px; }
  .ap-svc { display:flex !important; align-items:center; gap:12px; background:#fff; border:1px solid #E6E2F8; border-radius:20px; padding:12px; margin-bottom:14px; }
  .ap-svc .pic { width:70px; height:62px; border-radius:14px; background:#EEEAFE; color:#4F20E0; display:grid; place-items:center; flex-shrink:0; }
  .ap-svc b { display:block; font-size:17px; font-weight:800; line-height:1.2; } .ap-svc small { display:block; color:#51607E; font-size:12.5px; margin-top:2px; }
  .ap-svc .fee { background:#EEEAFE; border-radius:14px; padding:9px 11px; text-align:center; flex-shrink:0; } .ap-svc .fee small { margin:0; } .ap-svc .fee strong { display:block; font-size:20px; font-weight:800; color:#4F20E0; line-height:1.2; } .ap-svc .fee a { font-size:11.5px; font-weight:700; color:#4F20E0; white-space:nowrap; }
  .h-ic { width:30px; height:30px; border-radius:10px; background:#E4DEFC; color:#4F20E0; display:inline-grid; place-items:center; flex-shrink:0; }
  .h-hint { margin-left:auto; font-size:11px; font-weight:500; color:#51607E; text-align:right; max-width:120px; line-height:1.2; }
  .apply-app form.space-y-5 { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; } .apply-app form.space-y-5 > * { grid-column:1 / -1; margin:0 !important; }
  .apply-app form.space-y-5 > div:has(input[type=date]), .apply-app form.space-y-5 > div:has(select), .apply-app form.space-y-5 > div:has(input[type=tel]), .apply-app form.space-y-5 > div:has(input[type=number]), .apply-app form.space-y-5 > div:has(input[type=email]) { grid-column:auto; min-width:0; }
  .apply-app form.space-y-5 > .flex.gap-3, .apply-app form.space-y-5 > .ap-info, .apply-app form.space-y-5 > .ap-bar { grid-column:1 / -1; }
  .ap-info { display:block !important; background:#E8F1FE; border-radius:16px; padding:14px; margin-top:16px; font-size:13px; color:#33425F; } .ap-info b { display:block; color:#1B63D8; margin-bottom:6px; font-size:15px; } .ap-info ul { margin:0; padding-left:18px; list-style:disc; } .ap-info li { margin:2px 0; }
  .ap-bar { display:flex !important; gap:10px; } .ap-bar .btn-outline { flex:0 0 38%; justify-content:center; font-weight:700; } .ap-bar .btn-primary { margin-top:0 !important; flex:1; font-size:14px; }
  .apply-app form.space-y-4 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .apply-app form.space-y-4 > * { grid-column:1 / -1; margin:0 !important; }
  .apply-app form.space-y-4 > .border.rounded-xl { grid-column:auto; min-width:0; padding:10px; border-radius:16px; border-color:#E6E2F8; }
  .apply-app form.space-y-4 > .border.rounded-xl label.font-semibold { font-size:12.5px; line-height:1.2; }
  .apply-app form.space-y-4 > .border.rounded-xl .btn-outline { padding:8px 10px; font-size:12.5px; background:#EEEAFE; border-color:#D7CFFA; }
  .ap-fee { display:block !important; margin-bottom:14px; } .ap-fee b { display:block; font-size:16px; margin-bottom:8px; } .ap-fee div { display:flex; justify-content:space-between; padding:9px 4px; border-bottom:1px solid #EEEAFE; font-size:14px; } .ap-fee .tot { background:#EEEAFE; border:0; border-radius:10px; padding:11px 10px; font-weight:800; color:#4F20E0; font-size:16px; }
  .ap-radio { margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid #4F20E0; display:grid; place-items:center; flex-shrink:0; } .ap-radio::after { content:''; width:12px; height:12px; border-radius:50%; background:#4F20E0; }
  .apply-app .border-primaryblue { border-color:#4F20E0 !important; background:#F4F1FE !important; }
  .ap-secure { display:flex !important; align-items:center; gap:12px; background:#E9F8EC; border-radius:14px; padding:12px 14px; color:#16A34A; font-size:12.5px; } .ap-secure b { display:block; font-size:14px; } .ap-secure span { color:#33425F; }
}
@media (max-width:767px){ .apply-app form.space-y-4 > .grid { grid-template-columns:1fr 1fr; gap:12px; } }

.ap-draft { display:none !important; }
@media (max-width:767px){ .ap-draft { display:inline-flex !important; align-items:center; justify-content:center; border-radius:14px; } .apply-app h2 { display:flex !important; align-items:center; gap:10px; } .h-hint { display:block !important; }
  .yv-app .btn-outline { padding:12px 14px; font-weight:700; } }