:root{
  --c-primary:#1a6ef7;--c-primary-dk:#0d54d4;--c-primary-lt:#e6f1fb;
  --c-purple:#6b3ff7;--c-green:#1baf7a;--c-green-dk:#3B6D11;--c-amber:#b45309;--c-red:#a32d2d;
  --c-ink:#102a43;--c-text-2:#3d5068;--c-text-3:#56697f;
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Sora','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --c-border:rgba(15,40,80,.08);--c-border-soft:rgba(0,0,0,.1);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
  --shadow-card:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.055);
  --shadow-card-hover:0 2px 4px rgba(16,24,40,.06),0 14px 34px rgba(16,24,40,.08);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.state-panel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:24px;color:#52606d;font-size:13px;text-align:center;border:1px dashed #cbd8e8;border-radius:12px;background:#f8fbff}
.state-error{color:#9f2d2d;background:#fff7f7;border-color:#efb4b4}.state-empty{color:#52606d;background:#fafbfc}
.state-panel-icon{font-size:20px;color:#1a6ef7}.state-error .state-panel-icon{color:#b43d3d}.state-spinner{animation:driveone-spin 1s linear infinite}@keyframes driveone-spin{to{transform:rotate(360deg)}}
body{font-family:var(--font-ui);color:#1a1a18;min-height:100vh;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 550px at 88% -8%, rgba(107,63,247,.15), transparent 65%),
    radial-gradient(780px 500px at -8% 18%, rgba(26,110,247,.16), transparent 65%),
    radial-gradient(650px 430px at 108% 88%, rgba(27,175,122,.12), transparent 65%),
    radial-gradient(520px 380px at 30% 110%, rgba(216,90,48,.08), transparent 65%),
    #f7f8fb;
  background-attachment:fixed}
.hidden{display:none!important}
/* Typography: clear display hierarchy without sacrificing dashboard readability. */
h1,h2,h3,h4,h5,h6,.login-title,.sec-title,.saas-heading,.saas-mobile-heading,.modal-title{font-family:var(--font-display)}
button,input,select,textarea{font-family:inherit}
/* Explicit dashboard coverage: authenticated pages, navigation, tables and modal flows. */
#mainApp,.topbar,.page,.card,.modal,#mobileNav,.mm-sheet,table{font-family:var(--font-ui)}
#mainApp .logo,#mainApp .sec-title,#mainApp .card-title,#mainApp .kpi-val,#mainApp .modal-title{font-family:var(--font-display)}
/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:stretch;background:#ffffff;position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(26,110,247,.06) 0%,transparent 70%);top:-100px;left:-100px;pointer-events:none}
.login-wrap::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(100,60,220,.04) 0%,transparent 70%);bottom:-80px;right:-80px;pointer-events:none}
.login-card .form-label{color:#3d5068;letter-spacing:.02em}
.login-card{background:transparent;border:none;padding:0;width:100%;max-width:360px}
.logo-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1a6ef7,#6b3ff7);display:flex;align-items:center;justify-content:center;margin:0 0 20px;box-shadow:0 6px 20px rgba(26,110,247,.25)}
.logo-mark i{color:#fff;font-size:19px}
.login-title{font-size:26px;font-weight:650;text-align:left;margin-bottom:6px;color:#0b2545;letter-spacing:-.5px;line-height:1.25}
.login-sub{font-size:13px;color:#7a8699;text-align:left;margin-bottom:26px}
.role-tabs{display:flex;background:#f1f4f9;border-radius:10px;padding:4px;gap:3px;margin-bottom:22px;border:.5px solid #e6eaf0}
.role-tab{flex:1;padding:7px;border:none;border-radius:7px;font-size:13px;cursor:pointer;background:transparent;color:#7a8699;font-family:inherit;transition:all .15s}
.role-tab.active{background:#fff;color:#0b2545;font-weight:500;border:.5px solid #e6eaf0;box-shadow:0 1px 3px rgba(15,40,80,.08)}
.fg{margin-bottom:14px}
.form-label{font-size:12px;color:#52606d;margin-bottom:5px;display:block;font-weight:500}
.phone-wrap{display:flex;gap:8px}
.cc{display:flex;align-items:center;gap:6px;padding:0 12px;border:.5px solid rgba(0,0,0,.2);border-radius:8px;font-size:14px;background:#f5f5f3;color:#52606d;white-space:nowrap}
.login-card .cc{border:.5px solid rgba(15,40,80,.18);border-radius:10px;background:#f6f8fb;color:#3f4f68}
input[type=tel],input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{width:100%;padding:9px 12px;border:.5px solid rgba(0,0,0,.2);border-radius:8px;font-size:14px;background:#fff;color:#1a1a18;outline:none;transition:border .15s;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:#1a6ef7;box-shadow:0 0 0 3px rgba(26,110,247,.08)}
/* Accessibility: visible keyboard focus on every interactive element (WCAG 2.4.7).
   Only shows for keyboard navigation (:focus-visible), not mouse clicks — so it
   never adds visual noise for mouse/touch users, only helps people tabbing through. */
button:focus-visible,.btn:focus-visible,.nav-btn:focus-visible,a:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #1a6ef7;
  outline-offset:2px;
  border-radius:6px;
}
.login-card input[type=tel],.login-card input[type=text],.login-card input[type=number],.login-card select{border:.5px solid rgba(15,40,80,.18);border-radius:10px;background:#fff;color:#101828;padding:11px 14px;font-size:15px}
.login-card input:focus,.login-card select:focus{border-color:#1a6ef7;box-shadow:0 0 0 3px rgba(26,110,247,.1);background:#fff}
.login-card input::placeholder{color:#8b96a8}
textarea{resize:vertical;min-height:64px}
.char-count{font-size:11px;color:#7c8797;text-align:right;margin-top:4px}
.login-card .char-count{color:#8b96a8}
.err{font-size:12px;color:#a32d2d;margin-top:5px;display:none}
.login-card .err{color:#d64545}
.err.show{display:block}
.info-box{background:#f5f5f3;border-radius:8px;padding:10px 14px;display:flex;gap:10px;margin-bottom:16px}
.login-card .info-box{background:#f2f7ff;border:.5px solid rgba(26,110,247,.18);border-radius:10px}
.info-box i{color:#1a6ef7;font-size:16px;flex-shrink:0;margin-top:1px}
.info-box p{font-size:12px;color:#52606d;line-height:1.5}
.login-card .info-box p{color:#4a5a74}
.signup-prompt{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;padding:10px 12px;border:1px solid rgba(46,124,246,.18);border-radius:12px;background:linear-gradient(110deg,#f4f8ff,#f8f6ff);color:#52606d;font-size:13px;box-shadow:0 6px 18px rgba(31,76,145,.06)}
.signup-prompt-button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:#185fd5;font:700 13px/1.2 var(--font-body);cursor:pointer;padding:4px 2px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.signup-prompt-button i:first-child{font-size:14px;color:#7c3aed}.signup-prompt-button i:last-child{font-size:14px;text-decoration:none}
.signup-prompt-button:hover{color:#0b438f}
.otp-wrap{display:flex;gap:10px;justify-content:center;margin:4px 0}
.otp-box{width:48px;height:54px;border:.5px solid rgba(0,0,0,.2);border-radius:8px;font-size:22px;font-weight:500;text-align:center;background:#fff;color:#1a1a18;outline:none;transition:border .15s}
.login-card .otp-box{border:.5px solid rgba(15,40,80,.18);border-radius:10px;background:#fff;color:#101828}
.otp-box:focus{border-color:#1a6ef7;box-shadow:0 0 0 3px rgba(26,110,247,.08)}
.otp-box.filled{border-color:#1a6ef7;background:#f0f6ff}
.login-card .otp-box.filled{background:#eaf2ff;color:#0b2545}
.sent-to{font-size:13px;color:#52606d;text-align:center;margin-bottom:18px}
.login-card .sent-to{color:#3d5068}
.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:#52606d;cursor:pointer;margin-bottom:20px;background:none;border:none;padding:0;font-family:inherit}
.login-card .back-btn{color:#3d5068}
.timer{font-size:13px;color:#52606d;text-align:center;margin-top:10px}
.login-card .timer{color:#7a8699}
.resend-link{color:#1a6ef7;cursor:pointer;font-weight:500}
.resend-off{color:#7c8797}
.lstep{display:none}.lstep.active{display:block}
/* BUTTONS */
.btn{padding:9px 16px;border-radius:10px;border:.5px solid rgba(0,0,0,.1);font-size:13px;font-weight:500;cursor:pointer;background:#fff;color:#1a1a18;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:rgba(0,0,0,.2);background:#fafafa}
.btn:hover{background:#f5f5f3}
.btn.pri{background:linear-gradient(135deg,#2b7bff 0%,#1a6ef7 55%,#0d54d4 100%);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(26,110,247,.3),0 5px 16px rgba(26,110,247,.28);font-weight:600}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(26,110,247,.3),0 8px 22px rgba(26,110,247,.34)}
.btn.pri:active{transform:translateY(0)}
.btn.pri:hover{background:#1560d8;box-shadow:0 2px 6px rgba(26,110,247,.3),0 6px 16px rgba(26,110,247,.2);transform:translateY(-1px)}
.btn.full{width:100%;justify-content:center}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.ghost{color:#52606d;border-color:transparent}
.btn.ghost:hover{background:#f5f5f3}
.btn.dr{color:#a32d2d;border-color:transparent}
.btn.dr:hover{background:#fcebeb}
.btn:not(.pri):not(.ghost):not(.dr){box-shadow:0 1px 2px rgba(16,24,40,.04)}
.btn:not(.pri):not(.ghost):not(.dr):hover{box-shadow:0 2px 6px rgba(16,24,40,.08);transform:translateY(-1px)}
/* TOPBAR */
.topbar{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:.5px solid rgba(15,40,80,.08);box-shadow:0 1px 12px rgba(16,24,40,.04);padding:0 20px;display:flex;align-items:center;gap:4px;height:56px;position:sticky;top:0;z-index:100;overflow-x:auto;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}
.logo{font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;margin-right:auto;flex-shrink:0}
.logo-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#2b7bff,#6b3ff7);box-shadow:0 0 0 3px rgba(26,110,247,.14)}
.nav-btn{padding:7px 14px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;background:transparent;color:#55637a;transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.nav-btn i{font-size:15px}
.nav-btn:hover{background:#f3f4f6;color:#111}
.nav-btn:hover{background:#f5f5f3}
.nav-btn.active{background:linear-gradient(135deg,#1a6ef7,#0d54d4);color:#fff!important;font-weight:600;box-shadow:0 2px 8px rgba(26,110,247,.3)}
/* Nested labels must stay white too — otherwise inherited muted colour can
   make the selected tab look disabled. */
.nav-btn.active,.nav-btn.active span,.nav-btn.active i{color:#fff!important}
/* Billing is being kept out of the launch navigation, while the underlying
   page/data remain available for a later re-enable. */
.subscription-nav{display:none!important}
#nav-trial-badge{display:none;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;margin-left:4px!important;padding:0!important;border-radius:50%!important;font-size:12px!important;font-weight:800!important;line-height:1!important;box-shadow:0 0 0 3px rgba(220,38,38,.10);vertical-align:middle}
#ownerNav,#trainerNav,#studentNav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#ownerNav::-webkit-scrollbar,#trainerNav::-webkit-scrollbar,#studentNav::-webkit-scrollbar{display:none}
body.lang-kn .nav-btn{font-size:12px;padding:7px 9px;gap:4px}
body.lang-kn .nav-btn i{font-size:14px}
/* ── MOBILE BOTTOM NAV (app convention: 4 tabs + More sheet) ── */
#mobileNav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:.5px solid rgba(0,0,0,.1);box-shadow:0 -2px 10px rgba(0,0,0,.04);z-index:200;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
#mobileNav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;font-family:inherit;font-size:10.5px;font-weight:500;color:#55637a;padding:4px 2px;cursor:pointer;min-width:0}
#mobileNav button i{font-size:21px}
#mobileNav button.active{color:#1a6ef7}
#mobileMoreSheet{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;display:flex;align-items:flex-end}
#mobileMoreSheet.hidden{display:none}
.mm-sheet{background:#fff;border-radius:18px 18px 0 0;width:100%;padding:10px 16px calc(20px + env(safe-area-inset-bottom))}
.mm-handle{width:38px;height:4px;border-radius:2px;background:#e0e0dc;margin:2px auto 14px}
.mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mm-grid button{display:flex;flex-direction:column;align-items:center;gap:7px;background:#f7f7f5;border:none;border-radius:12px;padding:15px 6px;font-family:inherit;font-size:12px;font-weight:500;color:#333;cursor:pointer}
.mm-grid button i{font-size:21px;color:#1a6ef7}
/* ── MOBILE (≤760px): top nav & signout hidden, bottom nav shown; hero stacks ── */
@media (max-width:760px){
  .pkg-badge{max-width:105px;font-size:10px;padding:4px 8px}
  .topbar{height:52px;padding:0 14px}
  .card{padding:16px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:560px}
  .overlay{padding:10px;align-items:flex-end}
  .modal{max-width:100%;border-radius:16px 16px 0 0;padding:20px 16px;max-height:92vh;overflow-y:auto}
  .sec-title{font-size:17px}
  #ownerNav,#trainerNav,#studentNav{display:none !important}
  #signoutTopBtn{display:none !important}
  #mobileNav{display:flex}
  body{padding-bottom:66px}
  .logo{font-size:14px}
  .dash-hero{padding:18px 16px}
  .dash-hero-right{flex:1 1 100%;width:100%}
  #dash-next-card{flex:1 1 100%;min-width:0;width:100%}
  .dash-hero-actions{flex-direction:row !important;flex-wrap:wrap;width:100%}
  .dash-hero-actions button{flex:1 1 45%;justify-content:center}
  .page{padding:14px}
}
/* PAGES */
.page{display:none;padding:20px;max-width:960px;margin:0 auto}
.page.active{display:block;animation:pageIn .35s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* SKELETON LOADER */
.skel{background:linear-gradient(90deg,#eef0f3 25%,#f7f8fa 37%,#eef0f3 63%);background-size:400% 100%;animation:skelShine 1.4s ease infinite;border-radius:8px}
@keyframes skelShine{0%{background-position:100% 0}100%{background-position:0 0}}
.skel-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.skel-circle{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.skel-line{height:12px;border-radius:6px}
.sec-title{font-size:24px;font-weight:750;letter-spacing:-.5px;margin-bottom:5px;color:#0b2545;line-height:1.2}
.sec-sub{font-size:14px;color:#3d5068;margin-bottom:24px;letter-spacing:-.1px;font-weight:500}
/* CARD */
.card{background:#fff;border-radius:var(--radius-lg);border:.5px solid var(--c-border);box-shadow:var(--shadow-card);padding:22px 24px;margin-bottom:16px;transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.card:hover{box-shadow:var(--shadow-card-hover)}
.card-title{font-size:15px;font-weight:600;margin-bottom:4px;color:#0b2545;letter-spacing:-.1px}
.muted{color:#3d5068;font-size:13px;line-height:1.5;font-weight:500}
.flex{display:flex;align-items:center;gap:8px}
.jb{justify-content:space-between}
.mb{margin-bottom:14px}
.divider{height:.5px;background:linear-gradient(90deg,rgba(26,110,247,.18),rgba(0,0,0,.08) 40%);margin:16px 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dob-row{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin-bottom:0}
.dob-row select{padding-left:8px;padding-right:6px}
.addr-row{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:10px}
/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:#fff;border-radius:12px;padding:16px 18px;position:relative;border:.5px solid rgba(15,40,80,.08);box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05);transition:box-shadow .2s,transform .2s}
.kpi:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 10px 24px rgba(16,24,40,.08)}
.kpi::before{content:'';position:absolute;top:0;left:16px;right:16px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#2a78d6,#1baf7a)}
.kpi-row .kpi:nth-child(5n+2)::before{background:linear-gradient(90deg,#1baf7a,#7F77DD)}
.kpi-row .kpi:nth-child(5n+3)::before{background:linear-gradient(90deg,#dc7c1a,#eda100)}
.kpi-row .kpi:nth-child(5n+4)::before{background:linear-gradient(90deg,#7F77DD,#2a78d6)}
.kpi-row .kpi:nth-child(5n+5)::before{background:linear-gradient(90deg,#e34948,#dc7c1a)}
#page-dashboard div[onclick^="showPage"]{box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(16,24,40,.05)}
#page-dashboard div[onclick^="showPage"]:hover{box-shadow:0 2px 4px rgba(16,24,40,.06),0 14px 32px rgba(16,24,40,.08)}
.kpi-label{font-size:11px;color:#5f6f85;margin-bottom:6px;padding-right:62px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi-val{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.4px;color:#0b2545}
.kpi-delta{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:3px;color:#52606d}
.kpi-link{position:absolute;top:10px;right:8px;font-size:11px;color:#185fa5;background:#e6f1fb;border:none;border-radius:20px;padding:2px 8px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px;white-space:nowrap}
.kpi-link:hover{background:#b5d4f4}
/* CHARTS */
.charts-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.chart-card{background:#fff;border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.03);border-radius:14px;padding:18px 20px;transition:box-shadow .2s}
.chart-card:hover{box-shadow:0 2px 4px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05)}
.chart-card.full{grid-column:1/-1}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chart-title{font-size:13px;font-weight:500}
.chart-link{font-size:11px;color:#185fa5;background:#e6f1fb;border:none;border-radius:20px;padding:3px 10px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px}
.chart-link:hover{background:#b5d4f4}
.leg{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#52606d}
.leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.ttabs{display:flex;gap:3px;background:#f5f5f3;border-radius:6px;padding:2px}
.ttab{padding:3px 9px;border:none;border-radius:4px;font-size:11px;cursor:pointer;background:transparent;color:#52606d;font-family:inherit}
.ttab.active{background:#fff;color:#1a1a18;font-weight:500}
/* TABLE */
.tbl-wrap{overflow-x:auto}
table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 10px;color:#5f6f85;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid rgba(15,40,80,.1);background:linear-gradient(180deg,#f8f9fb,#f8f9fb)}

/* Slightly stronger hierarchy for operational headings and table columns. */
#mainApp th{font-size:12px;font-weight:700;letter-spacing:.055em}
#mainApp .sec-title{font-size:25px;font-weight:800}
#mainApp .sec-sub{font-size:15px;font-weight:600}
#mainApp .card-title,#mainApp .chart-title{font-size:16px;font-weight:700}
#mainApp .form-label{font-size:13px;font-weight:600}
#mainApp .form-label,#mainApp .sec-head,#mainApp .card-title,#mainApp .chart-title{color:#243b56}
#mainApp th{color:#31445d}
#mainApp .kpi-label{color:#405570}

/* DriveOne refresh tab: warm maroon-to-orange accent. */
#mainApp #refreshAppBtn{background:linear-gradient(180deg,#0f8a5f 0%,#1a6ef7 52%,#6b3ff7 100%)!important;color:#fff!important;border-color:rgba(26,110,247,.35)!important;box-shadow:0 10px 28px rgba(26,110,247,.28),0 4px 12px rgba(15,138,95,.2)!important}
#mainApp #refreshAppBtn:hover{filter:saturate(1.08) brightness(1.04)}
tbody tr{transition:background .12s}
tbody tr:nth-child(even){background:rgba(15,40,80,.015)}
tbody tr:hover{background:rgba(26,110,247,.045)}
td{padding:9px 10px;border-bottom:.5px solid rgba(0,0,0,.12);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f9f9f9}
/* BADGE */
.badge{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.01em;background:#e6f1fb;color:#185fa5}
.pkg-badge{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pkg-edit-btn{width:32px;height:32px;min-width:32px;padding:0!important;justify-content:center}
.pkg-matrix-table{table-layout:fixed;width:760px!important;max-width:100%}
.pkg-matrix-table th:nth-child(1),.pkg-matrix-table td:nth-child(1){width:40%}
.pkg-matrix-table th:nth-child(2),.pkg-matrix-table td:nth-child(2){width:18%}
.pkg-matrix-table th:nth-child(3),.pkg-matrix-table td:nth-child(3){width:18%}
.pkg-matrix-table th:nth-child(4),.pkg-matrix-table td:nth-child(4){width:24%;white-space:nowrap}
.b-bl{background:#e6f1fb;color:#185fa5}
.b-gr{background:#eaf3de;color:#3B6D11}
.b-am{background:#FAEEDA;color:#854F0B}
.b-rd{background:#fcebeb;color:#a32d2d}
.b-gy{background:#f5f5f3;color:#52606d;border:.5px solid rgba(0,0,0,.12)}
.b-pu{background:#EEEDFE;color:#3C3489}
/* PROGRESS */
.prog-bar{height:5px;border-radius:3px;background:#eef0f3;margin-bottom:2px}
.prog-fill{height:5px;border-radius:3px;background:linear-gradient(90deg,#2a78d6,#1baf7a);transition:width .6s cubic-bezier(.4,0,.2,1)}
/* SCHEDULER */
.srow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border-radius:10px;border:.5px solid rgba(0,0,0,.12);margin-bottom:8px}
.srow-time{font-size:12px;font-weight:500;color:#52606d;white-space:nowrap;min-width:80px}
.srow-det{font-size:12px;color:#52606d}
.srow-body{flex:1;min-width:0}
.srow-name{font-size:14px;font-weight:500;margin-bottom:2px}
.srow-meta{font-size:12px;color:#52606d}
.srow-actions{display:flex;gap:6px;flex-shrink:0}
.att-btn{padding:4px 10px;border-radius:6px;border:.5px solid rgba(0,0,0,.12);font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.att-btn.present{background:#eaf3de;color:#3B6D11;border-color:#b8dfa0}
.att-btn.absent{background:#fcebeb;color:#a32d2d;border-color:#f5b8b8}
.att-btn.upcoming{background:#f5f5f3;color:#52606d}
/* TRAINERS */
.trainer-tile{background:#fff;border-radius:14px;border:.5px solid rgba(0,0,0,.12);overflow:hidden}
.trainer-tile-head{padding:14px 16px;border-bottom:.5px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:10px}
.trainer-tile-body{padding:8px 10px}
.stu-att-row{display:flex;align-items:center;justify-content:space-between;padding:8px 8px;border-radius:8px;margin-bottom:4px;cursor:pointer;transition:background .15s;gap:8px}
.stu-att-row:hover{background:#f5f5f3}
.stu-att-row.present{background:#f0faea}
.stu-att-row.absent{background:#fff5f5}
.stu-att-name{font-size:13px;font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stu-att-topic{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-toggle{display:flex;gap:4px;flex-shrink:0}
.att-pill{padding:3px 9px;border-radius:20px;border:.5px solid rgba(0,0,0,.12);font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s;background:#f5f5f3;color:#52606d}
.att-pill.on-present{background:#eaf3de;color:#3B6D11;border-color:#b8dfa0;font-weight:500}
.att-pill.on-absent{background:#fcebeb;color:#a32d2d;border-color:#f5b8b8;font-weight:500}
.no-sess-msg{padding:18px 12px;text-align:center;font-size:12px;color:#7c8797}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,220px));gap:12px;justify-content:start}
.tcard{background:#fff;border-radius:16px;border:.5px solid rgba(15,40,80,.08);box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.055);padding:20px 16px;text-align:center;transition:box-shadow .2s,transform .2s}
.tcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 36px rgba(16,24,40,.09)}
.tcard:hover{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin:0 auto 8px;box-shadow:0 2px 6px rgba(16,24,40,.08)}
.av-b{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#185fa5}
.av-p{background:linear-gradient(135deg,#EEEDFE,#e0deff);color:#3C3489}
.av-t{background:linear-gradient(135deg,#E1F5EE,#c9f0e2);color:#085041}
/* TIMELINE */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(0,0,0,.1);border-radius:1px}
.tl-item{position:relative;margin-bottom:12px}
.tl-dot{position:absolute;left:-20px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid #f5f5f3}
.tl-dot.done{background:#1a6ef7}
.tl-dot.cur{background:#1a6ef7;box-shadow:0 0 0 3px rgba(26,110,247,.2)}
.tl-dot.up{background:#ccc}
.tl-c{background:#f5f5f3;border-radius:8px;padding:9px 12px;border:.5px solid rgba(0,0,0,.1)}
.tl-day{font-size:11px;color:#7c8797;margin-bottom:2px}
.tl-topic{font-size:13px;font-weight:500}
.tl-trainer{font-size:12px;color:#52606d}
/* TABS */
.tab-row{display:flex;margin-bottom:16px;border-bottom:.5px solid rgba(0,0,0,.1)}
.tab{padding:7px 14px;border:none;background:transparent;font-size:13px;cursor:pointer;color:#52606d;border-bottom:2.5px solid transparent;margin-bottom:-.5px;transition:all .15s;font-family:inherit;border-radius:6px 6px 0 0}
.tab:hover{color:#1a1a18;background:rgba(26,110,247,.04)}
.tab.active{color:#1a6ef7;border-image:linear-gradient(90deg,#2a78d6,#6b3ff7) 1;font-weight:600;background:rgba(26,110,247,.05)}
/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;overflow-y:auto;padding:20px;display:flex;align-items:flex-start;justify-content:center}
.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:500px;border:.5px solid rgba(0,0,0,.1);margin:auto;box-shadow:0 24px 64px rgba(16,24,40,.22),0 4px 16px rgba(16,24,40,.1)}
.msm{max-width:420px}
.modal-title{font-size:15px;font-weight:500;margin-bottom:3px}
.modal-sub{font-size:13px;color:#52606d;margin-bottom:18px}
/* Make modal dismissal obvious and consistent across owner, trainer and student views. */
.overlay .modal > .flex.jb > button.btn.sm.ghost,
.overlay .modal > .flex.jb.mb > button.btn.sm.ghost{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#fff!important;border:2px solid #0b2545!important;color:#0b2545!important;opacity:1!important;box-shadow:0 3px 10px rgba(11,37,69,.18)!important;transition:transform .15s,background .15s,border-color .15s,color .15s!important}
.overlay .modal > .flex.jb > button.btn.sm.ghost i,
.overlay .modal > .flex.jb.mb > button.btn.sm.ghost i{font-size:19px!important;font-weight:800!important;color:inherit!important;line-height:1!important}
.overlay .modal > .flex.jb > button.btn.sm.ghost:hover,
.overlay .modal > .flex.jb.mb > button.btn.sm.ghost:hover{background:#fff1f2!important;border-color:#dc2626!important;color:#b91c1c!important;transform:scale(1.06)}
/* ENROL STEPS */
.steps{display:flex;align-items:center;margin-bottom:8px}
.sdot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;transition:all .2s}
.sdot.done{background:#1a6ef7;color:#fff}
.sdot.cur{background:#1a6ef7;color:#fff;box-shadow:0 0 0 4px rgba(26,110,247,.15)}
.sdot.up{background:#eee;color:#7c8797}
.sline{flex:1;height:1px;background:rgba(0,0,0,.12);transition:background .2s}
.sline.done{background:#1a6ef7}
.step-lbls{display:flex;justify-content:space-between;margin-bottom:20px}
.step-lbls span{font-size:11px;color:#7c8797;text-align:center;flex:1}
.step-lbls span.al{color:#185fa5;font-weight:500}
.sec-head{font-size:13px;font-weight:500;color:#1a1a18;margin:18px 0 10px;display:flex;align-items:center;gap:7px}
.sec-head i{font-size:16px;color:#1a6ef7}
.sec-head:first-child{margin-top:0}
/* DOC UPLOAD */
.proof-block{border:.5px solid rgba(0,0,0,.1);border-radius:10px;padding:14px;margin-bottom:10px}
.pb-title{font-size:13px;font-weight:500;margin-bottom:2px}
.pb-sub{font-size:11px;color:#7c8797}
.opt-tag{font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;background:#f5f5f3;color:#888;border:.5px solid rgba(0,0,0,.1);margin-left:6px}
.id-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
.id-btn{border:.5px solid rgba(0,0,0,.12);border-radius:8px;padding:8px 10px;cursor:pointer;background:#f5f5f3;display:flex;align-items:center;gap:8px;transition:all .15s}
.id-btn:hover{border-color:#b5d4f4;background:#eef5ff}
.id-btn.sel{border:1.5px solid #1a6ef7;background:#e6f1fb}
.id-btn i{font-size:16px;color:#52606d;flex-shrink:0}
.id-btn.sel i{color:#185fa5}
.id-btn b{display:block;font-size:12px;font-weight:500;color:#1a1a18;line-height:1.2}
.id-btn.sel b{color:#185fa5}
.id-btn small{font-size:10px;color:#7c8797}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-lbl{font-size:11px;font-weight:500;color:#52606d;margin-bottom:5px}
.uz{position:relative;border:1.5px dashed rgba(0,0,0,.18);border-radius:8px;background:#f9f9f9;text-align:center;padding:14px 8px;cursor:pointer;transition:border-color .15s,background .15s}
.uz:hover,.uz.drag{border-color:#1a6ef7;background:#f0f6ff}
.uz input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.uz i{font-size:20px;color:#bbb;display:block;margin-bottom:4px;pointer-events:none}
.uz-t{font-size:12px;font-weight:500;color:#52606d;pointer-events:none}
.uz-s{font-size:10px;color:#7c8797;margin-top:2px;pointer-events:none}
.or-row{display:flex;align-items:center;gap:6px;margin:6px 0}
.or-row span{font-size:10px;color:#7c8797;white-space:nowrap}
.or-line{flex:1;height:.5px;background:rgba(0,0,0,.1)}
.cam-btn{width:100%;padding:6px 10px;border-radius:8px;border:.5px solid rgba(0,0,0,.12);background:#fff;font-size:11px;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;position:relative}
.cam-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.prev-row{display:flex;align-items:center;gap:8px;background:#f5f5f3;border:.5px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 10px}
.prev-thumb{width:36px;height:28px;border-radius:4px;object-fit:cover;flex-shrink:0}
.prev-icon{width:36px;height:28px;border-radius:4px;background:#e6f1fb;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prev-icon i{font-size:15px;color:#185fa5}
.prev-info{flex:1;min-width:0}
.prev-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-meta{font-size:10px;color:#3B6D11;margin-top:1px}
.rm-btn{background:none;border:none;cursor:pointer;color:#a32d2d;padding:2px;font-size:14px;flex-shrink:0;display:flex}
.doc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500}
.chip-done{background:#eaf3de;color:#3B6D11}
.chip-miss{background:#f5f5f3;color:#7c8797;border:.5px solid rgba(0,0,0,.1)}
/* PACKAGES */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.pkg-card{background:#fff;border-radius:16px;border:.5px solid rgba(15,40,80,.08);padding:20px;position:relative;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px rgba(16,24,40,.055);transition:box-shadow .2s,transform .2s}
.pkg-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 36px rgba(16,24,40,.09)}
.package-select,#am-pkg,#sm-package{appearance:none!important;-webkit-appearance:none!important;background:linear-gradient(180deg,#fff,#f7faff)!important;border:1.5px solid #b8cbe3!important;border-radius:11px!important;color:#0b2545!important;font-weight:650!important;min-height:46px;padding:11px 42px 11px 13px!important;box-shadow:0 2px 8px rgba(26,110,247,.08)!important}
.package-select:focus,#am-pkg:focus,#sm-package:focus{border-color:#1a6ef7!important;box-shadow:0 0 0 3px rgba(26,110,247,.14),0 3px 10px rgba(26,110,247,.1)!important;outline:none!important}
.package-select optgroup,#am-pkg optgroup,#sm-package optgroup{font-weight:700;font-style:normal;color:#2d4f73;letter-spacing:.01em;background:#f7faff}
.package-select option,#am-pkg option,#sm-package option{font-weight:500;color:#243b56;background:#fff;padding:7px 10px}
.package-picker{position:relative;width:100%}
.package-picker-native{display:none!important}
.package-picker-trigger{width:100%;min-height:46px;padding:11px 13px;border:1.5px solid #b8cbe3;border-radius:11px;background:linear-gradient(180deg,#fff,#f7faff);color:#52606d;font:inherit;font-size:13px;font-weight:500;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;box-shadow:0 2px 8px rgba(26,110,247,.08)}
.package-picker-trigger .selected-label{font-weight:650;color:#0b2545}
.package-picker-trigger:focus,.package-picker.open .package-picker-trigger{border-color:#1a6ef7;box-shadow:0 0 0 3px rgba(26,110,247,.14),0 3px 10px rgba(26,110,247,.1);outline:none}
.package-picker-trigger i{color:#52606d;font-size:17px}
.package-picker-menu{position:absolute;z-index:260;left:0;right:0;top:calc(100% + 7px);max-height:330px;overflow:auto;padding:8px;background:#fff;border:1px solid #cbd8e8;border-radius:13px;box-shadow:0 18px 42px rgba(16,24,40,.18)}
.package-picker-group{margin:0 0 7px;border:1px solid rgba(26,110,247,.12);border-radius:10px;overflow:hidden;background:#fff}
.package-picker-group:last-child{margin-bottom:0}
.package-picker-heading{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:750;color:#0b2545;border-bottom:1px solid rgba(26,110,247,.12)}
.package-picker-heading .pkg-icon{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.package-picker-heading .pkg-icon i{font-size:13px}
.package-picker-heading .pkg-icon.dual{gap:1px}
.package-picker-heading .pkg-icon.dual i{font-size:10px}
.package-picker-option{width:100%;border:0;background:#fff;color:#243b56;text-align:left;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;cursor:pointer}
.package-picker-option:hover,.package-picker-option.selected{background:#f3f7ff;color:#185fa5}
.package-picker-option .pkg-option-name{font-size:12px;font-weight:650}
.package-picker-option .pkg-option-meta{font-size:11px;color:#62748a;white-space:nowrap}
.package-picker-heading{min-height:52px!important;padding:10px 12px!important;align-items:center!important;gap:9px!important;font-size:15px!important;font-weight:850!important;color:#111827!important;letter-spacing:-.2px!important;border-bottom:1px solid rgba(99,91,255,.16)!important}
.package-picker-heading .pkg-icon{width:30px!important;height:30px!important;border-radius:9px!important}
.package-picker-heading .pkg-icon i{font-size:15px!important}
.package-picker-heading-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.package-picker-heading-copy strong{font-size:15px!important;font-weight:850!important;line-height:1.15!important;color:#111827!important}
.package-picker-heading-info{display:block!important;font-size:10.5px!important;font-weight:550!important;line-height:1.25!important;color:#64748b!important;letter-spacing:0!important}
.package-picker-option{padding:10px 12px!important}
.package-picker-option .pkg-option-name{font-size:13px!important;font-weight:750!important;color:#1f2937!important}
.package-picker-option .pkg-option-meta{font-size:11px!important;font-weight:550!important;color:#64748b!important}
.picker-close{position:sticky;top:0;z-index:2;display:block;margin:0 0 6px auto;width:30px;height:30px;border:1px solid rgba(99,91,255,.18);border-radius:50%;background:#fff;color:#334155;font-size:22px;line-height:25px;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.picker-close:hover{background:#eeecff;color:#4f46e5}
.student-picker-option{display:block;width:100%;padding:11px 12px;border:0;border-bottom:1px solid rgba(15,23,42,.06);background:#fff;color:#1f2937;text-align:left;font:inherit;font-size:13px;line-height:1.3;cursor:pointer}
.student-picker-option:hover,.student-picker-option.selected{background:#f1efff;color:#4f46e5;font-weight:700}
.modal .sec-head{font-size:14px;font-weight:700;color:#243b56;letter-spacing:-.1px}
.pkg-readonly{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid #dce7f2;border-radius:9px;background:linear-gradient(180deg,#fafdff,#f3f7fb);color:#0b2545;font-weight:650;white-space:nowrap}
.pkg-readonly small{display:block;color:#62748a;font-size:10px;font-weight:600;margin-left:3px}
.pkg-tier-bar{height:4px;border-radius:2px;margin-bottom:16px;margin-right:76px}
.t-std .pkg-tier-bar{background:#2a78d6}
.t-med .pkg-tier-bar{background:#1baf7a}
.t-prm .pkg-tier-bar{background:#7F77DD}
.pkg-name{font-size:16px;font-weight:500;margin-bottom:2px}
.pkg-price{font-size:26px;font-weight:500;margin-bottom:4px;line-height:1}
.pkg-price span{font-size:13px;font-weight:400;color:#52606d}
.pkg-desc{font-size:12px;color:#52606d;margin-bottom:14px;line-height:1.5}
.pkg-features{list-style:none;margin-bottom:16px}
.pkg-features li{font-size:12px;color:#555;padding:4px 0;display:flex;align-items:center;gap:7px;border-bottom:.5px solid rgba(0,0,0,.06)}
.pkg-features li:last-child{border-bottom:none}
.pkg-features li i{font-size:14px;color:#3B6D11;flex-shrink:0}
.pkg-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.pkg-students-count{font-size:12px;color:#52606d;display:flex;align-items:center;gap:5px}
.pkg-edit-btn{position:absolute;top:14px;right:14px;background:#fff;border:.5px solid rgba(0,0,0,.12);border-radius:6px;padding:4px 8px;font-size:11px;color:#52606d;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:inherit;transition:all .15s;z-index:1}
.pkg-edit-btn:hover{background:#f5f5f3}
.pkg-matrix-table .pkg-edit-btn{position:static;width:32px;height:32px;min-width:32px;padding:0!important;justify-content:center;gap:0}
.student-name-link{border:0;background:none;padding:0;color:#0b5cad;font:inherit;font-weight:600;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:#b5d4f4;text-underline-offset:3px}
.student-name-link:hover{color:#084b87;text-decoration-color:#0b5cad}
/* Keep package labels readable without letting them distort table rows. */
.tbl-wrap .pkg-badge{max-width:240px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
@media (max-width:760px){.tbl-wrap .pkg-badge{max-width:150px}}
.pkg-delete-btn{position:absolute;top:14px;right:72px;background:#fff;border:.5px solid rgba(180,45,45,.22);border-radius:6px;padding:4px 8px;font-size:11px;color:#b43d3d;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:inherit;transition:all .15s;z-index:1}
.pkg-delete-btn:hover{background:#fff1f1;border-color:rgba(180,45,45,.4)}
.plan{border:.5px solid rgba(0,0,0,.12);border-radius:10px;padding:14px;cursor:pointer;margin-bottom:8px;transition:all .15s}
.plan:hover{border-color:#1a6ef7}
.plan.sel{border:2px solid #1a6ef7;background:#f0f6ff}
.plan-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.plan-name{font-size:14px;font-weight:500}
.plan-price{font-size:17px;font-weight:500;color:#1a6ef7}
.plan-desc{font-size:12px;color:#52606d}
.disc-info{font-size:12px;color:#854F0B;background:#FAEEDA;border-radius:7px;padding:7px 10px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
/* DOC STATS */
.doc-stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.doc-stat{background:#f5f5f3;border-radius:8px;padding:10px 12px;text-align:center}
.doc-stat-val{font-size:18px;font-weight:500;margin-bottom:2px}
.doc-stat-lbl{font-size:11px;color:#52606d}
/* NOTIFY */
.enrol-type{flex:1;padding:8px 12px;border:none;border-radius:8px;font-size:13px;cursor:pointer;background:transparent;color:#52606d;font-family:inherit;display:flex;align-items:center;gap:6px;justify-content:center;transition:all .15s}
.enrol-type.active{background:#fff;color:#1a1a18;font-weight:500;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.stu-f{padding:5px 12px;border-radius:20px;border:.5px solid rgba(0,0,0,.12);background:#f5f5f3;font-size:12px;cursor:pointer;color:#52606d;font-family:inherit;transition:all .15s}
.stu-f:hover{border-color:#b5d4f4;color:#185fa5}
.stu-f.active{background:#e6f1fb;color:#185fa5;border-color:#b5d4f4;font-weight:500}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes gradientMove{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}}
/* Mobile responsive */
@media(max-width:768px){
  html,body{overflow-x:hidden;max-width:100vw}
  #loginPage{flex-direction:column;height:auto!important;overflow:visible;overflow-x:clip!important;max-width:100vw}
  #mobileHero{display:block!important;order:0}
  #loginPage>div[style*="width:440px"]{order:1;width:100%!important;position:static!important;height:auto!important;min-height:auto!important;padding:20px 24px 32px!important;overflow:visible!important;border-left:none!important}
  #landingPanel{order:2;min-height:auto!important;height:auto!important;overflow:hidden!important;padding:40px 24px 18px!important;border-top:.5px solid rgba(15,40,80,.1);justify-content:flex-start!important}
  #lpLogo,#lpHero{display:none!important}
  #lpFeaturesHead{display:block!important}
  #loginMainCard .logo-mark,#loginEyebrow,#loginMainCard>.login-title{display:none!important}
  #landingPanel h1{font-size:28px!important}
  .login-card{max-width:100%!important}
  .otp-box{width:40px!important;height:48px!important;font-size:18px!important}
}
@media(max-width:1024px) and (min-width:769px){
  #landingPanel{padding:40px 36px!important}
  #landingPanel h1{font-size:30px!important}
  #loginPage>div[style*="width:440px"]{width:380px!important}
}
@keyframes carDrive{0%{transform:translateX(-60px) scaleX(-1);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateX(calc(100vw + 60px)) scaleX(-1);opacity:0}}
/* Landing-hero car: drives up to a signal, waits out the red light, then goes */
@keyframes carDriveSignal{0%{transform:translateX(-60px) scaleX(-1);opacity:0}8%{opacity:1}42%{transform:translateX(210px) scaleX(-1)}66%{transform:translateX(210px) scaleX(-1)}94%{opacity:1}100%{transform:translateX(calc(100vw + 60px)) scaleX(-1);opacity:0}}
@keyframes sigRedOn{0%{opacity:1}64%{opacity:1}66%{opacity:.15}100%{opacity:.15}}
@keyframes sigGreenOn{0%{opacity:.15}64%{opacity:.15}66%{opacity:1}92%{opacity:1}100%{opacity:.15}}
@keyframes meshDrift{0%{background-position:0% 0%}50%{background-position:100% 60%}100%{background-position:0% 0%}}
/* Calm SaaS landing treatment: animated colour ribbons that gently unfurl. */
.saas-landing{background:#e8ecf2!important;isolation:isolate}
.saas-landing:before,.saas-landing:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.saas-landing:before{background:radial-gradient(circle at 8% 7%,rgba(46,124,246,.20),transparent 27%),radial-gradient(circle at 83% 68%,rgba(18,148,107,.17),transparent 26%),radial-gradient(circle at 45% 100%,rgba(176,54,46,.12),transparent 25%),linear-gradient(135deg,#e8ecf2 0%,#dde5ef 48%,#dfeae6 100%);animation:saasBreathe 15s ease-in-out infinite}
.saas-landing:after{background:repeating-conic-gradient(from 205deg at 0% 100%,rgba(46,124,246,.08) 0deg 2.4deg,transparent 2.4deg 8deg,rgba(18,148,107,.065) 8deg 10.4deg,transparent 10.4deg 16deg,rgba(176,54,46,.045) 16deg 17.4deg,transparent 17.4deg 23deg);filter:blur(16px);transform-origin:0% 100%;animation:rayUnfurl 10s ease-in-out infinite}
.saas-landing>div{position:relative;z-index:1}
.saas-brand-note{font-size:12px;color:#5c718c;font-weight:600;letter-spacing:.01em}
.saas-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(46,124,246,.14);border-radius:999px;background:rgba(255,255,255,.72);color:#1653B8;font-size:12px;font-weight:700;box-shadow:0 8px 28px rgba(46,124,246,.06);backdrop-filter:blur(10px)}
.saas-eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#2E7CF6,#12946B);box-shadow:0 0 0 4px rgba(18,148,107,.1)}
.saas-heading{font-size:40px;font-weight:750;color:#102a43;line-height:1.13;letter-spacing:-1.2px;margin:18px 0 14px;max-width:570px}
.saas-heading span{background:linear-gradient(100deg,#2E7CF6 0%,#1588df 24%,#15956c 47%,#7356db 70%,#df6a57 86%,#2E7CF6 100%);background-size:340% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientMove 11s ease-in-out infinite}
.saas-subcopy{font-size:15px;color:#5d718b;line-height:1.75;max-width:470px}
.saas-proof{display:flex;gap:18px;align-items:center;color:#607791;font-size:12px;font-weight:600;margin-top:24px}.saas-proof span{display:inline-flex;align-items:center;gap:6px}.saas-proof i{color:#12946B;font-size:15px}
.saas-mobile-hero{padding:24px 24px 20px!important;background:linear-gradient(145deg,#e8ecf2 0%,#dde5ef 58%,#dfeae6 100%)!important;border-bottom:1px solid rgba(15,42,67,.08)!important}.saas-mobile-heading{font-size:26px;font-weight:750;color:#102a43;line-height:1.18;letter-spacing:-.7px;margin:16px 0 8px}.saas-mobile-heading span{color:#2E7CF6}.saas-mobile-copy{color:#607791;font-size:13px;line-height:1.6;margin:0}.saas-mobile-step-divider{display:flex;align-items:center;gap:9px;margin:18px 0 12px;color:#2E7CF6}.saas-mobile-step-divider:before,.saas-mobile-step-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(46,124,246,.38))}.saas-mobile-step-divider:after{background:linear-gradient(90deg,rgba(46,124,246,.38),transparent)}.saas-mobile-step-divider i{font-size:14px;opacity:.85}.saas-mobile-login-prompt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.saas-mobile-login-title{margin:0;color:#24496e;font:700 15px/1.32 var(--font-display);letter-spacing:-.12px;white-space:nowrap}.saas-mobile-login-prompt>i{align-self:center;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:18px;background:linear-gradient(105deg,#2E7CF6 0%,#15956c 42%,#7356db 70%,#df6a57 100%);background-size:240% 100%;box-shadow:0 8px 18px rgba(46,124,246,.22);animation:promptArrow 2.2s ease-in-out infinite}@keyframes promptArrow{0%,100%{transform:translateY(0);background-position:0% center}50%{transform:translateY(6px);background-position:100% center}}.saas-mobile-legacy,.saas-desktop-legacy{display:none!important}
.landing-love .heart{color:#e11d48!important;font-weight:700!important}
@keyframes saasBreathe{0%,100%{filter:saturate(100%);transform:scale(1)}50%{filter:saturate(112%);transform:scale(1.015)}}
@keyframes rayUnfurl{0%,100%{transform:rotate(-8deg) scale(1.05)}50%{transform:rotate(8deg) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.saas-landing:before,.saas-landing:after,.saas-heading span,.saas-mobile-login-prompt>i{animation:none!important}}
.ti-steering-wheel{display:inline-block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
.notif{position:fixed;bottom:20px;right:20px;background:#1a6ef7;color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;z-index:300;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.notif.show{opacity:1;transform:translateY(0)}
.notif.success{background:#15803d}
.notif.success i{animation:checkPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes checkPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.notif.error{background:#b91c1c}
.notif i{font-size:15px;flex-shrink:0}

/* Mobile polish: preserve the calm desktop UI while giving phone screens their own layout. */
@media (max-width:760px){
  /* A browser's pull-to-refresh is clearer on phones; the desktop side tab must not cover content. */
  #refreshAppBtn{display:none!important}

  /* Landing: slower rhythm, a quieter headline, and no artificial space below the footer. */
  .saas-mobile-hero{padding:20px 24px 18px!important}
  .saas-mobile-hero > div:first-child{gap:12px!important}
  .saas-mobile-new > div:nth-child(2){font-size:12px!important;letter-spacing:.01em;margin:12px 0 7px!important}
  .saas-mobile-heading{font-size:25px!important;line-height:1.2!important;letter-spacing:-.7px!important;margin:0 0 9px!important}
  .saas-mobile-copy{font-size:13px!important;line-height:1.5!important;color:#4a5b73!important;max-width:35ch}
  .saas-mobile-step-divider{margin:16px 0 10px!important}
  .saas-mobile-login-title{font-size:15px!important;line-height:1.32!important}
  #landingPanel{justify-content:flex-start!important;min-height:0!important;padding:32px 20px 18px!important}
  #landingPanel > #landingFooter{margin-top:22px!important;margin-bottom:0!important;padding-bottom:0!important}

  /* Landing footer is content, not a viewport spacer. */
#landingFooter{gap:10px!important;align-items:flex-start!important}
#landingFooter a,#landingFooter div{color:#627792!important;font-weight:600!important}
#landingFooter .landing-love{flex-basis:100%;padding-top:4px;text-align:center;color:#5b718c!important;font-size:11px;letter-spacing:.01em}
  #landingFooter .landing-love .heart{color:#e11d48!important;font-size:13px;font-weight:700;vertical-align:-1px}

  /* Every main workspace header follows the same readable phone pattern. */
  #page-branches > .flex.jb,
  #page-packages > .flex.jb,
  #page-scheduler > .flex.jb,
  #page-students > .flex.jb,
  #page-trainers > .flex.jb,
  #page-cars > .flex.jb{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  #page-branches > .flex.jb > div,
  #page-packages > .flex.jb > div,
  #page-scheduler > .flex.jb > div,
  #page-students > .flex.jb > div,
  #page-trainers > .flex.jb > div,
  #page-cars > .flex.jb > div{width:100%}
  #page-branches > .flex.jb > .btn,
  #page-packages > .flex.jb > .btn,
  #page-scheduler > .flex.jb > .btn,
  #page-students > .flex.jb > .btn,
  #page-trainers > .flex.jb > .btn,
  #page-cars > .flex.jb > .btn,
  #page-payments > div[style^="margin-bottom:16px"] > .btn{width:100%;justify-content:center;min-height:46px}
  #page-packages > .flex.jb > .flex{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px!important}
  #page-packages > .flex.jb > .flex .btn{width:100%;justify-content:center;min-height:44px}
  #pkgMatrix{width:100%;padding-bottom:4px}
  #pkgMatrix section{min-width:0}
  #pkgMatrix table{min-width:0;table-layout:fixed}
  #pkgMatrix th:first-child,#pkgMatrix td:first-child{width:34%;padding-left:10px}
  #pkgMatrix th:last-child,#pkgMatrix td:last-child{width:25%;padding-right:10px}
  #pkgMatrix td{padding-top:9px;padding-bottom:9px}
  #pkgMatrix td .btn{padding:6px 7px;font-size:11px;white-space:nowrap}
  .sec-title{font-size:25px!important;line-height:1.15!important;letter-spacing:-.65px!important}
  .sec-title > span:first-child{width:42px!important;height:42px!important;border-radius:13px!important}
  .sec-title > span:first-child i{font-size:20px!important}
  .sec-sub{font-size:14px!important;line-height:1.45!important;margin:7px 0 0!important}

  /* Tables should scroll horizontally rather than squash labels into unreadable shapes. */
  .tbl-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .tbl-wrap table{min-width:640px!important}
  .badge{display:inline-flex!important;align-items:center!important;width:max-content!important;white-space:nowrap!important;line-height:1.2!important}
  #sched-progress-view .card{overflow-x:hidden!important}

  /* Subscription is a single-column phone view, not a cropped desktop grid. */
  #page-subscription > div[style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important;gap:14px!important}

  /* Dashboard identity and greeting: intentionally stacked, never squeezed side by side. */
  #page-dashboard .dash-hero{padding:16px!important;min-height:0!important;align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  #page-dashboard .dash-hero > div:first-child{width:100%!important}
  #page-dashboard .dash-hero > div:first-child > div:last-child{min-width:0!important}
  #dash-school-name{font-size:15px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.25!important}
  #dash-date{white-space:nowrap!important}
  #page-dashboard .dash-hero > div:last-child{text-align:left!important;width:100%!important;padding-left:48px!important}
  #dash-greeting{font-size:17px!important;line-height:1.25!important}
  #dash-rotating-greeting{font-size:12px!important;margin-top:4px!important}
  #page-dashboard .dash-hero + .card{padding:16px!important;gap:14px!important}
  #dash-next-card{flex:1 1 100%!important}
  .dash-hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:8px!important}
  .dash-hero-actions button{width:100%!important;min-height:42px!important;justify-content:center!important}
  .dash-hero-actions button:last-child{grid-column:1/-1}
}

/* More deliberate secondary text across the product — still calm, but no washed-out grey. */
#mainApp .muted{color:#3d5068}
#mainApp .kpi-label,#mainApp th{color:#647993}
#mainApp .nav-btn{color:#3d5068}
#mainApp .nav-btn:hover{color:#173c68}
#landingPanel [style*="color:#566a82"],#landingPanel [style*="color:#6b7a8f"],#landingPanel [style*="color:#c3cdda"]{color:#5f7692!important}

/* Print: show only the receipt content, hide everything else in the app */
@media print{
  body *{visibility:hidden}
  #receiptModal, #receiptModal *{visibility:visible}
  #receiptModal{position:absolute;top:0;left:0;width:100%;background:#fff}
  #receiptModal .modal{box-shadow:none;border:none;max-width:100%;padding:0}
  .no-print{display:none!important}
}

/* Premium SaaS visual refresh */
:root{
  --c-primary:#635bff;--c-primary-dk:#4f46e5;--c-primary-lt:#eeecff;
  --c-purple:#8b5cf6;--c-green:#0f9f8f;--c-green-dk:#047857;--c-amber:#c26a16;
  --c-ink:#111827;--c-text-2:#475569;--c-text-3:#64748b;
  --c-border:rgba(15,23,42,.075);--c-border-soft:rgba(15,23,42,.12);
  --radius-sm:10px;--radius-md:14px;--radius-lg:18px;
  --shadow-card:0 1px 2px rgba(15,23,42,.03),0 12px 30px rgba(15,23,42,.055);
  --shadow-card-hover:0 4px 8px rgba(15,23,42,.04),0 18px 42px rgba(15,23,42,.10);
}
body{
  color:#182033;
  background:
    radial-gradient(900px 520px at 100% -12%,rgba(99,91,255,.13),transparent 68%),
    radial-gradient(760px 480px at -12% 18%,rgba(20,184,166,.075),transparent 68%),
    #f5f7fb;
}
.topbar{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(15,23,42,.06)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.045)!important;
  backdrop-filter:blur(18px);
}
.logo{color:#111827!important;font-weight:800;letter-spacing:-.5px}
.logo-dot{background:linear-gradient(135deg,#635bff,#14b8a6)!important;box-shadow:0 0 0 5px rgba(99,91,255,.10)!important}
.nav-btn{color:#64748b!important;border-radius:11px!important;transition:background .2s ease,color .2s ease,transform .2s ease}
.nav-btn:hover{background:#f1efff!important;color:#4f46e5!important;transform:translateY(-1px)}
.nav-btn.active{background:linear-gradient(135deg,#746bff,#635bff)!important;box-shadow:0 8px 20px rgba(99,91,255,.25)!important}
.page{padding-top:28px!important}
.page{max-width:1480px!important;padding-left:30px!important;padding-right:30px!important;padding-bottom:30px!important}
.page > .sec-sub{margin-bottom:18px!important}
.page .card{margin-bottom:14px!important}
.page .kpi-row{gap:12px!important;margin-bottom:14px!important}
.page .kpi{padding:14px 16px!important}
.page .tbl-wrap,.page .table-wrap{max-width:none!important}
.card,.chart-card,.kpi-card,.modal,.table-wrap{
  border:1px solid rgba(15,23,42,.055)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow-card)!important;
  background:rgba(255,255,255,.92)!important;
}
.card:hover,.chart-card:hover,.kpi-card:hover{box-shadow:var(--shadow-card-hover)!important;transform:translateY(-1px)}
.sec-title,.modal-title,.card-title,.chart-title{color:#111827!important;font-weight:750!important;letter-spacing:-.45px}
.sec-sub,.muted{color:#64748b!important}
.btn{border-radius:11px!important;border:1px solid rgba(15,23,42,.09)!important;color:#334155!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important;transition:all .2s var(--ease-out)!important}
.btn:hover{background:#f8f8ff!important;border-color:rgba(99,91,255,.28)!important;color:#4f46e5!important;transform:translateY(-1px)}
.btn.pri,.btn.primary,.btn-primary{background:linear-gradient(135deg,#7b70ff,#635bff 58%,#5148dc)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 9px 20px rgba(99,91,255,.25)!important}
.btn.pri:hover,.btn.primary:hover,.btn-primary:hover{color:#fff!important;box-shadow:0 12px 25px rgba(99,91,255,.32)!important;transform:translateY(-2px)}
input,select,textarea{border:1px solid rgba(15,23,42,.12)!important;border-radius:11px!important;background:#fff!important;color:#111827!important}
input:focus,select:focus,textarea:focus{border-color:#7b70ff!important;box-shadow:0 0 0 4px rgba(99,91,255,.12)!important;outline:none!important}
button{transition:all .2s var(--ease-out)}
#page-dashboard .dash-hero{background:linear-gradient(135deg,#25205b 0%,#5148dc 55%,#14a89a 150%)!important;border-radius:20px!important;box-shadow:0 14px 32px rgba(63,56,160,.22)!important}
#page-dashboard .dash-hero .icon-box{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.18)!important}
#page-dashboard .dash-hero h1,#page-dashboard .dash-hero h2,#page-dashboard .dash-hero p{color:#fff!important}
#page-dashboard .money-card{border-radius:18px!important}
#page-dashboard .money-card.received{background:linear-gradient(145deg,#ecfbf5,#dff6ed)!important;border-color:rgba(15,159,143,.14)!important}
#page-dashboard .money-card.due{background:linear-gradient(145deg,#fff8eb,#fff1d3)!important;border-color:rgba(194,106,22,.14)!important}
#mainApp .kpi-val{color:#111827!important;letter-spacing:-1px}
#mainApp .form-label{color:#475569!important;font-weight:650!important}
#mainApp .form-label{font-weight:800!important;color:#334155!important;letter-spacing:-.08px}
@media(max-width:760px){.page{padding-top:18px!important}.card,.chart-card,.kpi-card{border-radius:15px!important}}
@media(max-width:760px){.page{padding-left:14px!important;padding-right:14px!important;padding-bottom:20px!important}}

/* Final polish: more visual hierarchy and intentional density */
body{
  background:
    radial-gradient(980px 560px at 0% -8%,rgba(99,91,255,.19),transparent 68%),
    radial-gradient(860px 540px at 100% 4%,rgba(20,184,166,.14),transparent 66%),
    linear-gradient(135deg,#f2f4ff 0%,#edf3fb 48%,#f5f1ff 100%)!important;
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(rgba(99,91,255,.11) .7px,transparent .7px);background-size:28px 28px;opacity:.28;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 72%)}
#page-dashboard{isolation:isolate}
#page-dashboard::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 260px at 78% 8%,rgba(124,58,237,.08),transparent 72%),radial-gradient(460px 240px at 18% 42%,rgba(20,184,166,.055),transparent 72%)}
#mainApp .page .sec-title{font-size:28px!important;line-height:1.12!important;color:#101828!important}
#mainApp .page .sec-title > span:first-child{background:linear-gradient(145deg,#eeecff,#e4fbf7)!important;box-shadow:inset 0 0 0 1px rgba(99,91,255,.08)!important}
#mainApp .page .sec-title > span:first-child i{color:#635bff!important}
#mainApp .page .sec-sub{font-size:13px!important;color:#64748b!important;letter-spacing:0!important}
#mainApp .page .card{position:relative;overflow:hidden}
#mainApp .page .card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 38%);opacity:.55}
#mainApp .page .card > *{position:relative;z-index:1}
#mainApp .page .kpi{background:linear-gradient(160deg,#fff 0%,#fbfcff 100%)!important;border-color:rgba(99,91,255,.09)!important}
#mainApp .page .kpi::before{background:linear-gradient(90deg,#635bff,#14b8a6)!important;height:3px!important}
#mainApp .page .kpi-label{font-weight:700!important;letter-spacing:.04em!important;color:#64748b!important}
#mainApp .page .kpi-val{font-size:25px!important}
.tab-row{border-bottom:1px solid rgba(15,23,42,.08)!important;gap:4px!important}
.tab{border-bottom:2px solid transparent!important;border-radius:9px 9px 0 0!important;color:#64748b!important;padding:9px 14px!important}
.tab:hover{background:#f1efff!important;color:#4f46e5!important}
.tab.active{background:#eeecff!important;color:#4f46e5!important;border-image:none!important;border-bottom-color:#635bff!important}
.ttabs{background:#f1f2f7!important;border-radius:9px!important;padding:3px!important}
.ttab{border-radius:7px!important;padding:5px 10px!important;color:#64748b!important}
.ttab.active{background:#fff!important;color:#4f46e5!important;box-shadow:0 1px 4px rgba(15,23,42,.09)!important}
th{background:#f7f8fc!important;color:#64748b!important;border-bottom-color:rgba(99,91,255,.14)!important}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:#fafaff!important}
.badge{border:1px solid rgba(99,91,255,.08)!important}
#refreshAppBtn{background:linear-gradient(180deg,#635bff,#4f46e5)!important;box-shadow:0 12px 28px rgba(99,91,255,.26)!important}
@media(max-width:760px){#mainApp .page .sec-title{font-size:23px!important}.page{padding-top:16px!important}}
/* Desktop receipt form: use the available width instead of creating a tall, narrow sheet. */
@media(min-width:761px){
  #createReceiptModal .modal{max-width:780px!important;padding:24px 28px!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;row-gap:10px}
  #createReceiptModal .modal > .flex.jb,
  #createReceiptModal #cr-total-hint,
  #createReceiptModal .modal > .divider,
  #createReceiptModal .modal > .fg:has(#cr-payment-plan),
  #createReceiptModal .modal > .form-row:has(#cr-discount),
  #createReceiptModal .modal > .form-row:has(#cr-amount),
  #createReceiptModal .modal > .fg:has(#cr-school-card),
  #createReceiptModal .modal > .flex:last-child{grid-column:1/-1}
  #createReceiptModal .modal > .fg{margin-bottom:0!important}
  #createReceiptModal .modal > .form-row{margin-bottom:0!important}
  #createReceiptModal .modal > .fg:has(#cr-method-row),
  #createReceiptModal .modal > .fg:has(#cr-note){align-self:start}
  #createReceiptModal .modal > .divider{margin:2px 0!important}
  #createReceiptModal #cr-school-card{padding:10px 12px!important}
  #createReceiptModal .package-picker-menu{max-height:300px!important}
}
@media(max-width:760px){
  .form-label,#mainApp .form-label,#createReceiptModal .form-label{font-size:12px!important;font-weight:800!important;color:#26344d!important;letter-spacing:-.05px!important}
  #page-dashboard .dash-hero-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #page-dashboard .dash-hero-actions button,
  #page-dashboard .dash-hero-actions button:last-child{grid-column:auto!important;width:100%!important;min-height:44px!important;padding:9px 8px!important;white-space:nowrap!important}
  .package-picker-trigger{min-height:42px!important;padding:9px 11px!important;font-size:12px!important}
  .package-picker-trigger .selected-label{font-size:12px!important;font-weight:750!important}
  .package-picker-trigger i{font-size:15px!important}
  .package-select,#am-pkg,#sm-package{min-height:42px!important;padding:9px 36px 9px 11px!important;font-size:12px!important}
}
.form-label{font-weight:800!important;color:#26344d!important}
.modal .form-label{font-weight:800!important;color:#26344d!important}
/* Keep section headings visually dominant; field labels are bold but about one step lighter. */
.form-label,.modal .form-label,#mainApp .form-label{font-weight:650!important;color:#334155!important}
.package-category-heading{min-height:74px!important;padding:16px 18px!important;position:relative;overflow:hidden}
.package-category-heading::after{content:'';position:absolute;right:-28px;top:-42px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none}
.package-category-title{font-size:18px!important;font-weight:850!important;letter-spacing:-.35px!important;color:#111827!important;line-height:1.15!important}
.package-category-info{font-size:12px!important;font-weight:550!important;color:#64748b!important;line-height:1.35!important;margin-top:5px!important}
.pkg-name{font-weight:800!important;letter-spacing:-.2px!important;color:#111827!important}
.pkg-name > span{font-size:11px!important;color:#64748b!important}