/* MANHJ PRO 33.0.1 — safe progressive UI layer. No core visibility or routing rules are overridden. */
:root{
  --v33-safe-top:env(safe-area-inset-top,0px);
  --v33-safe-right:env(safe-area-inset-right,0px);
  --v33-safe-bottom:env(safe-area-inset-bottom,0px);
  --v33-safe-left:env(safe-area-inset-left,0px);
  --v33-radius:18px;
  --v33-radius-sm:13px;
  --v33-shadow:0 14px 38px rgba(15,23,42,.09);
  --v33-shadow-soft:0 8px 24px rgba(15,23,42,.06);
}

html.manhj-v33-ready{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html.manhj-v33-ready body{min-height:100dvh}
html.manhj-v33-ready button,
html.manhj-v33-ready a,
html.manhj-v33-ready input,
html.manhj-v33-ready select,
html.manhj-v33-ready textarea{touch-action:manipulation}
html.manhj-v33-ready button:focus-visible,
html.manhj-v33-ready a:focus-visible,
html.manhj-v33-ready input:focus-visible,
html.manhj-v33-ready select:focus-visible,
html.manhj-v33-ready textarea:focus-visible,
html.manhj-v33-ready summary:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:2px}

/* App chrome */
html.manhj-v33-ready #appView .topbar{
  position:sticky;
  top:0;
  z-index:45;
  padding-top:max(10px,calc(8px + var(--v33-safe-top)));
  padding-inline:max(12px,calc(12px + var(--v33-safe-right))) max(12px,calc(12px + var(--v33-safe-left)));
  border-bottom:1px solid color-mix(in srgb,var(--border,#e5e7eb) 75%,transparent);
  background:color-mix(in srgb,var(--surface,#fff) 90%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
html.manhj-v33-ready #appView .topbar-brand{min-width:0}
html.manhj-v33-ready #appView .topbar-brand>div{min-width:0}
html.manhj-v33-ready #appView #pageTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.manhj-v33-ready #appView .topbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
html.manhj-v33-ready #appView .topbar-actions>.icon-button,
html.manhj-v33-ready #appView .topbar-actions summary.icon-button{min-width:42px;min-height:42px;border-radius:14px}

/* New compact utility strip */
.v33-utility{
  margin:12px max(12px,calc(12px + var(--v33-safe-right))) 2px max(12px,calc(12px + var(--v33-safe-left)));
  padding:10px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border,#e5e7eb);
  border-radius:17px;
  background:var(--surface,#fff);
  box-shadow:var(--v33-shadow-soft);
}
.v33-utility-copy{display:flex;align-items:center;gap:10px;min-width:0}
.v33-utility-copy>div{display:grid;gap:1px;min-width:0}
.v33-utility-copy strong{font-size:.86rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v33-utility-copy small{font-size:.69rem;color:var(--muted,#667085);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(44vw,480px)}
.v33-online-pill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 8px;border-radius:999px;background:rgba(34,197,94,.1);color:#15803d;font-size:.66rem;font-weight:900}
.v33-online-pill i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.v33-online-pill.offline{background:rgba(239,68,68,.1);color:#b91c1c}
.v33-online-pill.offline i{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.v33-utility-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.v33-tool-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface-2,#f8fafc);color:var(--text,#101828);padding:7px 10px;font:inherit;cursor:pointer}
.v33-tool-button span{font-size:1.1rem;line-height:1}
.v33-tool-button b{font-size:.72rem}
.v33-tool-button:hover{border-color:color-mix(in srgb,var(--primary,#2563eb) 35%,var(--border,#e5e7eb));background:color-mix(in srgb,var(--primary,#2563eb) 6%,var(--surface,#fff))}
.v33-top-button{display:none}
.v33-top-button.show{display:inline-flex}

/* Surface consistency */
html.manhj-v33-ready #appView .page-toolbar,
html.manhj-v33-ready #appView .student-class-browser,
html.manhj-v33-ready #appView .accountant-dashboard-hero,
html.manhj-v33-ready #appView .guardian-dashboard-hero,
html.manhj-v33-ready #appView .driver-cockpit-hero,
html.manhj-v33-ready #appView .student-experience-hero{
  border-radius:var(--v33-radius);
}
html.manhj-v33-ready #appView .report-kpi,
html.manhj-v33-ready #appView .stat-card,
html.manhj-v33-ready #appView .student-insight-card,
html.manhj-v33-ready #appView .accountant-action-card,
html.manhj-v33-ready #appView .guardian-family-summary>article{
  border-radius:var(--v33-radius-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
@media (hover:hover){
  html.manhj-v33-ready #appView .report-kpi:hover,
  html.manhj-v33-ready #appView .stat-card:hover,
  html.manhj-v33-ready #appView .accountant-action-card:hover{transform:translateY(-1px);box-shadow:var(--v33-shadow-soft)}
}

/* Forms and actions */
html.manhj-v33-ready #appView .btn,
html.manhj-v33-ready #appView button{font-weight:inherit}
html.manhj-v33-ready #appView input,
html.manhj-v33-ready #appView select,
html.manhj-v33-ready #appView textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
html.manhj-v33-ready #appView input:focus,
html.manhj-v33-ready #appView select:focus,
html.manhj-v33-ready #appView textarea:focus{border-color:color-mix(in srgb,var(--primary,#2563eb) 55%,var(--border,#e5e7eb));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#2563eb) 12%,transparent)}
html.manhj-v33-ready #appView .search-box{border-radius:14px}
html.manhj-v33-ready #appView .student-tools,
html.manhj-v33-ready #appView .finance-tools{gap:8px}

/* Dense operational areas */
html.manhj-v33-ready #appView .finance-risk-toolbar{gap:7px;scrollbar-width:none}
html.manhj-v33-ready #appView .finance-risk-toolbar::-webkit-scrollbar{display:none}
html.manhj-v33-ready #appView .finance-filter-chip{white-space:nowrap}
html.manhj-v33-ready #appView .student-list,
html.manhj-v33-ready #appView .finance-student-list,
html.manhj-v33-ready #appView .history-list,
html.manhj-v33-ready #appView .notes-list{gap:9px}
html.manhj-v33-ready #appView .student-list>* ,
html.manhj-v33-ready #appView .finance-student-list>* ,
html.manhj-v33-ready #appView .history-list>*{border-radius:15px}

/* Notification and account popovers */
html.manhj-v33-ready #notificationPopover .notification-popover-card,
html.manhj-v33-ready #accountPopover .header-popover-card{border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.18)}
html.manhj-v33-ready #notificationPopover[open]>summary,
html.manhj-v33-ready #accountPopover[open]>summary{background:color-mix(in srgb,var(--primary,#2563eb) 9%,var(--surface,#fff));color:var(--primary,#2563eb)}

/* Dialog polish without changing native dialog behavior */
html.manhj-v33-ready dialog[open] .modal-card{box-shadow:0 24px 80px rgba(15,23,42,.2)}
html.manhj-v33-ready .modal-card{border-radius:22px}
html.manhj-v33-ready .modal-head{position:sticky;top:0;z-index:3;background:var(--surface,#fff);padding-top:2px}
html.manhj-v33-ready .dialog-actions,
html.manhj-v33-ready .receipt-dialog-actions{gap:8px}

/* Health card */
.v33-health-card{margin:18px 0;padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:19px;background:var(--surface,#fff);box-shadow:var(--v33-shadow-soft)}
.v33-health-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.v33-health-head h3{margin:2px 0 0}
.v33-health-head>span{direction:ltr;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary,#2563eb) 9%,transparent);color:var(--primary,#2563eb);font-size:.7rem;font-weight:900}
.v33-health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0}
.v33-health-grid article{display:grid;gap:3px;padding:10px;border-radius:13px;background:var(--surface-2,#f8fafc)}
.v33-health-grid small{color:var(--muted,#667085);font-size:.68rem}
.v33-health-grid b{font-size:.79rem}

/* Search palette */
.v33-palette-overlay{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:start center;padding:calc(72px + var(--v33-safe-top)) 14px 22px;background:rgba(2,6,23,.48);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.v33-palette-overlay[hidden]{display:none!important}
.v33-palette{width:min(620px,100%);max-height:min(72dvh,640px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:22px;background:var(--surface,#fff);color:var(--text,#101828);box-shadow:0 32px 90px rgba(2,6,23,.28)}
.v33-palette-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--border,#e5e7eb)}
.v33-palette-head>span{font-size:1.35rem}
.v33-palette-head input{min-height:44px;border:0!important;background:transparent!important;box-shadow:none!important;padding:6px!important;font:inherit;font-size:1rem}
.v33-palette-head button{min-width:42px;min-height:42px;border:0;border-radius:12px;background:var(--surface-2,#f8fafc);color:var(--text,#101828)}
.v33-palette-results{overflow:auto;padding:8px;overscroll-behavior:contain}
.v33-palette-result{width:100%;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 11px;border:0;border-radius:13px;background:transparent;color:inherit;text-align:start;font:inherit;font-weight:800;cursor:pointer}
.v33-palette-result:hover,.v33-palette-result:focus-visible{background:color-mix(in srgb,var(--primary,#2563eb) 8%,transparent)}
.v33-palette-result-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--surface-2,#f8fafc);color:var(--primary,#2563eb)}
.v33-palette-empty{padding:30px 18px;text-align:center;color:var(--muted,#667085)}
.v33-palette footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-top:1px solid var(--border,#e5e7eb);font-size:.67rem;color:var(--muted,#667085)}
.v33-palette kbd{padding:3px 6px;border:1px solid var(--border,#e5e7eb);border-radius:6px;background:var(--surface-2,#f8fafc)}
body.v33-palette-open{overflow:hidden}

/* Toast */
.v33-toast{position:fixed;top:calc(12px + var(--v33-safe-top));left:50%;z-index:2147483640;max-width:min(92vw,520px);padding:10px 14px;border-radius:14px;background:#111827;color:#fff;box-shadow:0 18px 50px rgba(15,23,42,.24);font-size:.82rem;font-weight:800;transform:translate(-50%,-120px);opacity:0;transition:transform .2s ease,opacity .2s ease;pointer-events:none}
.v33-toast.show{transform:translate(-50%,0);opacity:1}
.v33-toast[data-type="warning"]{background:#92400e}.v33-toast[data-type="error"]{background:#991b1b}

/* Public and login polish is visual only */
html.manhj-v33-ready .public-hero-card,
html.manhj-v33-ready .public-showcase,
html.manhj-v33-ready .login-card{box-shadow:var(--v33-shadow)}
html.manhj-v33-ready .public-link-card,
html.manhj-v33-ready .manhj-download-btn{transition:transform .16s ease,box-shadow .16s ease}
@media (hover:hover){html.manhj-v33-ready .public-link-card:hover,html.manhj-v33-ready .manhj-download-btn:hover{transform:translateY(-1px)}}

@media (max-width:760px){
  html.manhj-v33-ready #appView{padding-bottom:calc(82px + var(--v33-safe-bottom))}
  html.manhj-v33-ready #appView .content{padding-inline:max(10px,calc(10px + var(--v33-safe-right))) max(10px,calc(10px + var(--v33-safe-left)));padding-bottom:20px}
  html.manhj-v33-ready #appView .topbar{padding-inline:max(9px,calc(9px + var(--v33-safe-right))) max(9px,calc(9px + var(--v33-safe-left)))}
  html.manhj-v33-ready #appView .topbar-brand-logo{width:35px;height:35px}
  html.manhj-v33-ready #appView .topbar .eyebrow{font-size:.58rem}
  html.manhj-v33-ready #appView #pageTitle{font-size:1rem}
  html.manhj-v33-ready #appView .topbar-actions{gap:3px}
  html.manhj-v33-ready #appView .topbar-actions>.icon-button,
  html.manhj-v33-ready #appView .topbar-actions summary.icon-button{min-width:38px;min-height:38px;border-radius:12px}

  .v33-utility{margin:8px max(9px,calc(9px + var(--v33-safe-right))) 2px max(9px,calc(9px + var(--v33-safe-left)));padding:8px 9px;border-radius:15px}
  .v33-online-pill b{display:none}
  .v33-online-pill{padding:7px}
  .v33-utility-copy{gap:7px;min-width:0;flex:1}
  .v33-utility-copy small{max-width:50vw;font-size:.63rem}
  .v33-utility-copy strong{font-size:.78rem}
  .v33-tool-button{min-width:39px;min-height:39px;padding:7px;border-radius:11px}
  .v33-tool-button b{display:none}

  html.manhj-v33-ready #appView input,
  html.manhj-v33-ready #appView select,
  html.manhj-v33-ready #appView textarea,
  html.manhj-v33-ready #loginView input{font-size:16px}

  html.manhj-v33-ready #appView .btn,
  html.manhj-v33-ready #appView button:not(.finance-filter-chip):not(.profile-tab):not(.guardian-family-tabs button){min-height:42px}

  html.manhj-v33-ready #appView .page-toolbar{align-items:stretch;gap:10px}
  html.manhj-v33-ready #appView .toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  html.manhj-v33-ready #appView .toolbar-actions>.btn{width:100%;min-width:0}

  html.manhj-v33-ready #appView .report-summary-grid,
  html.manhj-v33-ready #appView .finance-summary-grid,
  html.manhj-v33-ready #appView .guardian-family-summary{grid-template-columns:repeat(2,minmax(0,1fr))}

  html.manhj-v33-ready #appView .accountant-dashboard-actions,
  html.manhj-v33-ready #appView .driver-home-actions,
  html.manhj-v33-ready #appView .guardian-home-actions{grid-template-columns:repeat(2,minmax(0,1fr))}

  html.manhj-v33-ready #appView .finance-risk-toolbar{display:flex;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
  html.manhj-v33-ready #appView .finance-filter-chip,
  html.manhj-v33-ready #appView .finance-age-select{flex:0 0 auto;scroll-snap-align:start}

  html.manhj-v33-ready #notificationPopover[open] .notification-popover-card,
  html.manhj-v33-ready #accountPopover[open] .header-popover-card{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(10px + var(--v33-safe-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(72dvh,650px)!important;
    overflow:auto!important;
    border-radius:22px!important;
    z-index:120!important;
  }

  html.manhj-v33-ready dialog[open]{max-width:100vw;max-height:100dvh}
  html.manhj-v33-ready .modal-card{max-height:calc(100dvh - var(--v33-safe-top) - var(--v33-safe-bottom) - 18px);overflow:auto;overscroll-behavior:contain;padding-bottom:max(18px,calc(12px + var(--v33-safe-bottom)))}
  html.manhj-v33-ready .context-grid,
  html.manhj-v33-ready .finance-dialog-grid,
  html.manhj-v33-ready .print-settings-grid,
  html.manhj-v33-ready .receipt-control-grid{grid-template-columns:1fr}
  html.manhj-v33-ready .dialog-actions,
  html.manhj-v33-ready .receipt-dialog-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  html.manhj-v33-ready .dialog-actions>.btn,
  html.manhj-v33-ready .receipt-dialog-actions>.btn{width:100%;min-width:0}

  html.manhj-v33-ready #appView .bottom-nav{
    padding-left:calc(6px + var(--v33-safe-left));
    padding-right:calc(6px + var(--v33-safe-right));
    padding-bottom:calc(6px + var(--v33-safe-bottom));
    min-height:calc(64px + var(--v33-safe-bottom));
    background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    box-shadow:0 -10px 32px rgba(15,23,42,.08);
  }
  html.manhj-v33-ready #appView .bottom-nav .nav-item{min-width:0;border-radius:13px}
  html.manhj-v33-ready #appView .bottom-nav .nav-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  .v33-health-grid{grid-template-columns:1fr}
}

@media (max-width:420px){
  html.manhj-v33-ready #appView .toolbar-actions{grid-template-columns:1fr}
  html.manhj-v33-ready #appView .accountant-dashboard-actions,
  html.manhj-v33-ready #appView .driver-home-actions,
  html.manhj-v33-ready #appView .guardian-home-actions{grid-template-columns:1fr}
  html.manhj-v33-ready .dialog-actions,
  html.manhj-v33-ready .receipt-dialog-actions{grid-template-columns:1fr}
  .v33-utility-copy small{max-width:42vw}
}

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

@media print{
  #manhjV33Utility,#manhjV33Palette,#manhjV33Toast,#manhjV33HealthCard{display:none!important}
}