/*
 * Role and surface styling only.
 * Global tokens, resets, accessibility and generic responsive rules live in ui-foundation/ui-responsive-mobile.
 */
/* =========================================================
   Premium responsive management workspace
   Desktop: professional SaaS console. Mobile: native app shell.
========================================================= */
body.management-role {
  --mg-primary: #4f46e5;
  --mg-primary-strong: #3730a3;
  --mg-accent: #06b6d4;
  --mg-surface: #ffffff;
  --mg-surface-soft: #f8fafc;
  --mg-border: #e2e8f0;
  --mg-text: #0f172a;
  --mg-muted: #64748b;
  --mg-shadow: 0 18px 48px rgba(15, 23, 42, .09);
  background:
    radial-gradient(circle at 74% -10%, rgba(99, 102, 241, .13), transparent 30%),
    linear-gradient(180deg, #f4f6fb 0, #f8fafc 420px) !important;
  color: var(--mg-text);
}

.management-role .sidebar {
  width: 280px;
  padding: 18px 12px 24px;
  background:
    radial-gradient(circle at 12% 5%, rgba(99, 102, 241, .28), transparent 25%),
    linear-gradient(180deg, #0a1020 0%, #111a32 58%, #090f1e 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 18px 0 55px rgba(15, 23, 42, .12);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .28) transparent;
}

.management-role .sidebar-header {
  min-height: 72px;
  padding: 8px 10px 18px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.management-role .sidebar-header img {
  width: 46px !important;
  height: 46px !important;
  padding: 5px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.management-role .sidebar-header h2 {
  font-size: 17px;
  letter-spacing: -.025em;
}

.management-role .sidebar > a {
  min-height: 45px;
  margin: 3px 4px;
  padding: 0 13px;
  border-radius: 13px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  gap: 11px;
}

.management-role .sidebar > a i {
  width: 19px;
  color: #94a3b8;
  font-size: 15px;
  text-align: center;
}

.management-role .sidebar > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
  transform: translateX(2px);
}

.management-role .sidebar > a.active {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 12px 28px rgba(79, 70, 229, .30);
}

.management-role .sidebar > a.active i {
  color: #fff;
}

.management-role .main {
  width: auto;
  min-width: 0;
  min-height: 100vh;
  margin-left: 280px;
  padding: 20px 28px 34px;
  transition: margin-left .28s ease;
}

.management-role .sidebar.hide {
  transform: translateX(-100%);
}

.management-role .main.full {
  margin-left: 0;
}

.management-role .topbar {
  top: 12px;
  min-height: 68px;
  padding: 10px 14px;
  margin: 0 0 22px;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .075);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.management-role .topbar-title {
  gap: 10px;
}

.management-role .topbar-title > span:last-child {
  display: grid;
  line-height: 1.15;
}

.management-role .topbar-title strong {
  max-width: 42vw;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-role .topbar-title small {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.management-role .topbar-brand-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #4f46e5, #7c3aed);
  box-shadow: 0 9px 22px rgba(79, 70, 229, .25);
}

.management-role .menu-btn,
.management-role .dark-btn,
.management-role .topbar-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  box-shadow: none !important;
}

.management-role .main :where(.card, .section-box, .search-panel, .form-box, .expense-box, .student-fee-card, .stat-card) {
  border: 1px solid rgba(226, 232, 240, .88);
  box-shadow: var(--mg-shadow);
}

.management-role .main :where(button, .btn, a.btn, input[type="submit"]) {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 750;
}

.management-role .main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
}

.management-role .main :where(table) {
  font-size: 13px;
}

.management-role .main :where(th) {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.management-mobile-dock {
  display: none;
}

.management-role.dark-mode {
  --mg-surface: #111827;
  --mg-surface-soft: #0f172a;
  --mg-border: #334155;
  --mg-text: #f8fafc;
  --mg-muted: #94a3b8;
  background: #070d1a !important;
}

.management-role.dark-mode .topbar {
  background: rgba(15, 23, 42, .90);
  border-color: #334155;
}

.management-role.dark-mode .topbar-title strong {
  color: #f8fafc;
}

@media (min-width: 1440px) {
  .management-role .main {
    padding-right: clamp(34px, 4vw, 72px);
    padding-left: clamp(34px, 4vw, 72px);
  }

  .management-role .main > :not(.topbar):not(.management-mobile-dock) {
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  body.management-role,
  body.student-role {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    background: #f3f6fb !important;
  }

  .management-role .base-bg-animation {
    display: none;
  }

  .management-role .sidebar {
    width: min(86vw, 320px);
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    border-radius: 0 24px 24px 0;
    z-index: 1200;
  }

  .management-role .main,
  .management-role .main.full {
    width: 100%;
    margin-left: 0;
    padding: 0 10px 18px !important;
  }

  .management-role .topbar {
    top: 0;
    min-height: 60px;
    margin: 0 -10px 12px;
    padding: 9px 12px;
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  }

  .management-role .topbar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .management-role .topbar-title strong {
    max-width: 40vw;
    font-size: 12px;
  }

  .management-role .topbar-title small {
    display: none;
  }

  .management-role .topbar-right {
    gap: 6px;
    width: auto;
    flex-wrap: nowrap;
  }

  .management-role .menu-btn,
  .management-role .dark-btn,
  .management-role .topbar-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 11px;
  }

  .management-role .main :where(.card, .section-box, .search-panel, .form-box, .expense-box, .student-fee-card, .stat-card) {
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .065) !important;
  }

  .management-role .main :where(button, .btn, a.btn, input[type="submit"]) {
    min-height: 46px;
    border-radius: 14px;
  }

  .management-mobile-dock {
    position: fixed;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 66px;
    padding: 7px 6px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .management-mobile-dock :where(a, button) {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
  }

  .management-mobile-dock i {
    font-size: 17px;
  }

  .management-mobile-dock .dock-primary {
    margin-top: -17px;
    color: #fff;
  }

  .management-mobile-dock .dock-primary i {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 4px solid #f3f6fb;
    border-radius: 16px;
    background: linear-gradient(145deg, #4f46e5, #7c3aed);
    box-shadow: 0 10px 25px rgba(79, 70, 229, .34);
  }

  .management-mobile-dock .dock-primary span {
    color: #4f46e5;
  }

  .management-mobile-dock :where(a.active, a:active, button:active) {
    color: #4f46e5;
    background: #eef2ff;
  }

  .management-role.dark-mode .management-mobile-dock,
  .student-role.dark-mode .management-mobile-dock {
    border-color: #334155;
    background: rgba(15, 23, 42, .96);
  }

  .management-role.dark-mode .management-mobile-dock :where(a, button),
  .student-role.dark-mode .management-mobile-dock :where(a, button) {
    color: #94a3b8;
  }

  .management-role.dark-mode .management-mobile-dock .dock-primary i,
  .student-role.dark-mode .management-mobile-dock .dock-primary i {
    border-color: #070d1a;
  }
}


/* =========================================================
   LibraHub unified professional SaaS design system
   Final cascade layer for public, student, owner and superadmin.
========================================================= */


:where(.public-surface, .student-role, .owner-surface, .superadmin-surface) {
  color: var(--lh-ink);
  font-family: "Manrope", "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(h1, h2, h3, h4, h5, h6) {
  /* Respect the foreground of dark hero and callout surfaces. */
  color: inherit;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(p, li, label, td, input, select, textarea, button) {
  line-height: 1.55;
}

:where(.public-surface, .student-role, .management-role, .owner-surface, .superadmin-surface)
:where(button, .btn, a.btn, input[type="submit"]) {
  min-height: 44px;
  border-radius: var(--lh-radius-sm);
  font-weight: 750;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

:where(.public-surface, .student-role, .management-role, .owner-surface, .superadmin-surface)
:where(button, .btn, a.btn, input[type="submit"]):not([disabled]):active {
  translate: 0 1px;
  scale: .985;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: var(--lh-radius-sm);
  background: #fff;
  color: var(--lh-ink);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(input, select, textarea):focus {
  border-color: #818cf8;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(.card, .panel, .section-box, .form-box, .stat-card, .metric-card, .od-card, .sa-card) {
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: var(--lh-radius);
  background-color: rgba(255, 255, 255, .96);
  box-shadow: var(--lh-shadow-sm);
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--lh-ink);
  font-size: 13px;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(th) {
  color: #475569;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
:where(th, td) {
  padding: 13px 14px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

:where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
tbody tr:hover {
  background: rgba(248, 250, 252, .9);
}

/* Public website: calmer premium presentation and lighter rendering. */
.public-surface {
  background: #fff;
}

.public-surface :where(.container, .public-container, .section-inner) {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

.public-surface :where(.section, section) {
  scroll-margin-top: 86px;
}

/*
 * The cinematic landing template owns its animation policy. Do not globally
 * collapse its animations here; that would freeze the QR scan, problem solver,
 * security rings and every other landing-page motion effect in production.
 */

.public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card) {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card):hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: var(--lh-shadow);
}

.public-surface :where(.btn, button, a[class*="btn"]) {
  letter-spacing: -.01em;
}

.public-surface :where(.navbar, .public-nav, header) {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Student app: same quality bar as management without owner-only layout. */
.student-role {
  --student-shell-width: 260px;
  background:
    radial-gradient(circle at 80% -5%, rgba(79, 70, 229, .12), transparent 28%),
    var(--lh-bg) !important;
}

.student-role .sidebar {
  background:
    radial-gradient(circle at 15% 5%, rgba(79, 70, 229, .26), transparent 24%),
    linear-gradient(180deg, #0a1020 0%, #111a32 58%, #090f1e 100%);
}

.student-role .main {
  max-width: none;
}

.student-role .topbar {
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--lh-shadow-sm);
}

.student-role :where(.dashboard-card, .profile-card, .notification-card, .attendance-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

/* Owner controls: retain navigation, unify surfaces and spacing. */
.owner-surface {
  background:
    radial-gradient(circle at 72% -8%, rgba(99, 102, 241, .11), transparent 28%),
    linear-gradient(180deg, #f1f4fb 0, var(--lh-bg) 360px);
}

.owner-surface .owner-content {
  width: min(100%, var(--lh-content));
  margin-inline: auto;
}

.owner-surface .owner-topbar {
  border-bottom-color: rgba(226, 232, 240, .9);
  background: rgba(245, 247, 251, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.owner-surface :where(.owner-card, .od-card, .billing-card, .settings-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

.owner-surface :where(.table-wrap, .table-responsive, .ui-scroll-table) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
}

/* Super Admin: denser enterprise console, same visual language. */
.superadmin-surface {
  background:
    radial-gradient(circle at 72% -8%, rgba(79, 70, 229, .10), transparent 26%),
    linear-gradient(180deg, #f1f4fb 0, var(--lh-bg) 340px);
}

.superadmin-surface .sa-content {
  width: min(100%, var(--lh-content));
  margin-inline: auto;
}

.superadmin-surface :where(.sa-card, .metric-card, .panel, .table-card) {
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
  box-shadow: var(--lh-shadow-sm);
}

.superadmin-surface :where(.table-wrap, .table-responsive, .ui-scroll-table) {
  overflow-x: auto;
  border: 1px solid var(--lh-border);
  border-radius: var(--lh-radius);
  background: #fff;
}

/* Dark mode parity across authenticated application surfaces. */
:where(.student-role, .owner-surface, .superadmin-surface).dark-mode {
  --lh-ink: #f8fafc;
  --lh-muted: #94a3b8;
  --lh-bg: #070d1a;
  --lh-surface: #0f172a;
  --lh-surface-soft: #111827;
  --lh-border: #334155;
  background: #070d1a !important;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(.card, .panel, .section-box, .form-box, .stat-card, .metric-card, .od-card, .sa-card, .owner-card) {
  border-color: #334155;
  background-color: #0f172a;
  color: #f8fafc;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(h1, h2, h3, h4, h5, h6, td) {
  color: #f8fafc;
}

:where(.student-role, .owner-surface, .superadmin-surface).dark-mode
:where(th) {
  color: #cbd5e1;
  background: #111827;
}

@media (min-width: 1200px) {
  .owner-surface .owner-content,
  .superadmin-surface .sa-content {
    padding-right: clamp(24px, 3vw, 52px);
    padding-left: clamp(24px, 3vw, 52px);
  }
}

@media (max-width: 768px) {
  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface) {
    overflow-x: clip;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(h1) {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.12;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(h2) {
    font-size: clamp(22px, 6.5vw, 30px);
    line-height: 1.18;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(button, .btn, a.btn, input[type="submit"]) {
    min-height: 46px;
    border-radius: 14px;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.grid, .stats-grid, .metrics-grid, .cards-grid) {
    gap: 12px;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.table-responsive, .ui-scroll-table, .table-wrap, .expense-list) {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.table-responsive, .ui-scroll-table, .table-wrap, .expense-list) > table {
    min-width: 680px;
  }

  .public-surface :where(.container, .public-container, .section-inner) {
    width: min(100% - 22px, 1240px);
  }

  .public-surface :where(.card, .feature-card, .pricing-card, .testimonial-card):hover {
    transform: none;
    box-shadow: var(--lh-shadow-sm);
  }

  .student-role .main {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .owner-surface .owner-content,
  .superadmin-surface .sa-content {
    padding: 14px 12px 28px;
  }

  .owner-surface :where(.owner-card, .od-card, .billing-card, .settings-card),
  .superadmin-surface :where(.sa-card, .metric-card, .panel, .table-card) {
    border-radius: 17px;
  }
}

@media (max-width: 420px) {
  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.actions, .button-row, .form-actions, .hero-actions) {
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(.public-surface, .student-role, .owner-surface, .superadmin-surface)
  :where(.actions, .button-row, .form-actions, .hero-actions) > * {
    width: 100%;
  }
}

/* Student Game Center navigation badge (available on every student page). */
.student-nav-new{margin-left:auto;padding:3px 7px;border-radius:999px;background:linear-gradient(135deg,#22d3ee,#8b5cf6);color:#fff!important;font-size:8px!important;font-weight:950!important;letter-spacing:.08em;box-shadow:0 5px 14px rgba(34,211,238,.22)}


/* OWNER PREMIUM DARK TOPBAR */
@media (min-width:769px){
  .management-role .topbar.owner-topbar-dark{
    min-height:78px;
    padding:12px 16px;
    border:1px solid rgba(129,140,248,.24);
    border-radius:22px;
    background:
      radial-gradient(circle at 70% -120%, rgba(99,102,241,.28) 0 28%, transparent 29%),
      radial-gradient(circle at 86% 145%, rgba(124,58,237,.18) 0 22%, transparent 23%),
      linear-gradient(110deg,#101827 0%,#172033 44%,#111827 76%,#0b1220 100%);
    box-shadow:
      0 18px 42px rgba(15,23,42,.20),
      0 8px 20px rgba(30,41,59,.14),
      inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    overflow:visible;
    isolation:isolate;
  }

  .management-role .topbar.owner-topbar-dark::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
      linear-gradient(118deg,transparent 0 55%,rgba(99,102,241,.07) 55% 66%,transparent 66%),
      linear-gradient(118deg,transparent 0 64%,rgba(124,58,237,.08) 64% 75%,transparent 75%);
    z-index:-1;
  }

  .management-role .topbar.owner-topbar-dark .topbar-left,
  .management-role .topbar.owner-topbar-dark .topbar-right{
    gap:12px;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title strong{
    color:#f8fafc;
    font-size:15px;
    font-weight:900;
    letter-spacing:-.015em;
    text-shadow:0 1px 8px rgba(0,0,0,.18);
  }

  .management-role .topbar.owner-topbar-dark .topbar-title small{
    margin-top:5px;
    color:#a5b4fc;
    font-size:10px;
    font-weight:800;
    letter-spacing:.105em;
  }

  .management-role .topbar.owner-topbar-dark .menu-btn{
    width:48px;
    height:48px;
    min-width:48px;
    border:1px solid rgba(129,140,248,.42) !important;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(145deg,#2563eb 0%,#4f46e5 56%,#6d28d9 100%);
    box-shadow:
      0 12px 26px rgba(79,70,229,.28) !important,
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }

  .management-role .topbar.owner-topbar-dark .topbar-icon-btn,
  .management-role .topbar.owner-topbar-dark .dark-btn{
    width:46px;
    height:46px;
    min-width:46px;
    border:1px solid rgba(148,163,184,.26) !important;
    border-radius:14px;
    color:#f8fafc;
    background:
      linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.96));
    box-shadow:
      0 10px 22px rgba(2,6,23,.24) !important,
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .management-role .topbar.owner-topbar-dark .topbar-icon-btn:hover,
  .management-role .topbar.owner-topbar-dark .dark-btn:hover{
    color:#fff;
    border-color:rgba(129,140,248,.5) !important;
    background:
      linear-gradient(145deg,rgba(45,55,80,.98),rgba(17,24,39,.98));
    box-shadow:
      0 14px 28px rgba(2,6,23,.28) !important,
      0 0 0 3px rgba(99,102,241,.08) !important;
    transform:translateY(-2px);
  }

  .management-role .topbar.owner-topbar-dark .menu-btn:hover{
    transform:translateY(-2px);
    box-shadow:
      0 15px 30px rgba(79,70,229,.34) !important,
      0 0 0 3px rgba(99,102,241,.09) !important;
  }

  .management-role .topbar.owner-topbar-dark .notification-count{
    top:-6px;
    right:-6px;
    border:2px solid #111827;
    background:linear-gradient(135deg,#ef4444,#f43f5e);
    box-shadow:0 6px 14px rgba(239,68,68,.28);
  }

  .management-role.dark-mode .topbar.owner-topbar-dark{
    background:
      radial-gradient(circle at 70% -120%, rgba(99,102,241,.30) 0 28%, transparent 29%),
      radial-gradient(circle at 86% 145%, rgba(124,58,237,.18) 0 22%, transparent 23%),
      linear-gradient(110deg,#0b1220 0%,#111827 48%,#0f172a 78%,#070d1a 100%);
    border-color:rgba(129,140,248,.28);
  }
}


/* OWNER MOBILE PREMIUM TOPBAR PARITY 20260918 */
@media (max-width:768px){
  .management-role .topbar.owner-topbar-dark{
    position:sticky;
    top:8px;
    z-index:850;
    min-height:68px;
    margin:0 0 12px;
    padding:10px 12px;
    border:1px solid rgba(129,140,248,.24);
    border-radius:18px;
    background:
      linear-gradient(118deg,transparent 0 53%,rgba(99,102,241,.08) 53% 66%,transparent 66%),
      radial-gradient(circle at 82% -95%,rgba(99,102,241,.30) 0 29%,transparent 30%),
      linear-gradient(110deg,#101827 0%,#172033 47%,#15142f 78%,#0d1025 100%);
    box-shadow:
      0 14px 32px rgba(15,23,42,.18),
      inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:visible;
  }

  .management-role .topbar.owner-topbar-dark .topbar-left,
  .management-role .topbar.owner-topbar-dark .topbar-right{
    flex-wrap:nowrap;
    gap:7px;
  }

  .management-role .topbar.owner-topbar-dark .topbar-left{
    min-width:0;
    flex:1 1 auto;
  }

  .management-role .topbar.owner-topbar-dark .topbar-right{
    width:auto;
    flex:0 0 auto;
    justify-content:flex-end;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title{
    min-width:0;
    max-width:none;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title > span:last-child{
    display:grid;
    min-width:0;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title strong{
    max-width:30vw;
    overflow:hidden;
    color:#f8fafc;
    font-size:13px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:-.01em;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.16);
  }

  .management-role .topbar.owner-topbar-dark .topbar-title small{
    display:block !important;
    max-width:30vw;
    margin-top:4px;
    overflow:hidden;
    color:#a5b4fc;
    font-size:8px;
    line-height:1.15;
    font-weight:850;
    letter-spacing:.075em;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .management-role .topbar.owner-topbar-dark .menu-btn,
  .management-role .topbar.owner-topbar-dark .topbar-icon-btn,
  .management-role .topbar.owner-topbar-dark .dark-btn{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    border:1px solid rgba(224,231,255,.86) !important;
    border-radius:12px !important;
    color:#1e3a8a !important;
    background:linear-gradient(145deg,#ffffff,#eef2ff) !important;
    box-shadow:
      0 8px 18px rgba(2,6,23,.18) !important,
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  .management-role .topbar.owner-topbar-dark .menu-btn:hover,
  .management-role .topbar.owner-topbar-dark .topbar-icon-btn:hover,
  .management-role .topbar.owner-topbar-dark .dark-btn:hover{
    color:#312e81 !important;
    background:#fff !important;
    transform:none;
    box-shadow:0 8px 18px rgba(2,6,23,.18) !important;
  }

  .management-role .topbar.owner-topbar-dark .notification-count{
    top:-5px;
    right:-5px;
    border:2px solid #111827;
  }
}

@media (max-width:420px){
  .management-role .topbar.owner-topbar-dark{
    padding:9px 10px;
    border-radius:17px;
  }

  .management-role .topbar.owner-topbar-dark .topbar-left,
  .management-role .topbar.owner-topbar-dark .topbar-right{
    gap:6px;
  }

  .management-role .topbar.owner-topbar-dark .menu-btn,
  .management-role .topbar.owner-topbar-dark .topbar-icon-btn,
  .management-role .topbar.owner-topbar-dark .dark-btn{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    border-radius:11px !important;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title strong{
    max-width:28vw;
    font-size:12px;
  }

  .management-role .topbar.owner-topbar-dark .topbar-title small{
    max-width:28vw;
    font-size:7.5px;
  }
}


/* Trial workspace indicator: desktop keeps floating badge; mobile sits in topbar. */
.trial-workspace-watermark{
  pointer-events:none;
  user-select:none;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.08em;
}
.trial-workspace-watermark--desktop{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:9998;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.86);
  color:#fff;
  font-size:11px;
  box-shadow:0 8px 24px rgba(15,23,42,.22);
}
.trial-workspace-watermark--mobile{
  display:none;
}

@media(max-width:768px){
  .trial-workspace-watermark--desktop{
    display:none !important;
  }
  .management-role .topbar .trial-workspace-watermark--mobile,
  .student-role .topbar .trial-workspace-watermark--mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:24px;
    padding:4px 7px;
    border:1px solid rgba(129,140,248,.34);
    border-radius:999px;
    background:rgba(79,70,229,.12);
    color:#4338ca;
    font-size:8px;
    line-height:1;
    letter-spacing:.07em;
  }
  .management-role .topbar.owner-topbar-dark .trial-workspace-watermark--mobile{
    border-color:rgba(165,180,252,.28);
    background:rgba(99,102,241,.18);
    color:#e0e7ff;
  }
  .management-role .topbar-left,
  .student-role .topbar-left{
    min-width:0;
    flex:1 1 auto;
    flex-wrap:nowrap;
  }
  .management-role .topbar-title,
  .student-role .topbar-title{
    min-width:0;
  }
}

@media(max-width:380px){
  .management-role .topbar .trial-workspace-watermark--mobile,
  .student-role .topbar .trial-workspace-watermark--mobile{
    padding:4px 6px;
    font-size:7px;
  }
}