/*
 * Dersal v21.14 — Mobile App Shell + compact public footer
 * Mobile-first presentation layer. Desktop is intentionally untouched.
 * Goal: logged-in web experience feels like a native app without changing business logic.
 */
.mobile-app-dock,.admin-mobile-menu,.admin-mobile-close{display:none}

@media (max-width:820px){
  :root{
    --app-mobile-bg:#f5f6fa;
    --app-mobile-surface:#fff;
    --app-mobile-text:#181d2a;
    --app-mobile-muted:#7b8496;
    --app-mobile-line:#e6e9f0;
    --app-mobile-primary:#6452ee;
    --app-mobile-primary-soft:#efedff;
    --app-mobile-top:60px;
    --app-mobile-dock:68px;
  }

  html{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    background:var(--app-mobile-bg);
    overscroll-behavior-y:none;
    -webkit-text-size-adjust:100%;
  }
  body{
    width:100%;
    min-width:0;
    min-height:100dvh;
    overflow-x:hidden;
    background:var(--app-mobile-bg);
  }
  body.panel-auth{
    min-height:100dvh;
    background:var(--app-mobile-bg)!important;
    padding-bottom:calc(var(--app-mobile-dock) + env(safe-area-inset-bottom));
  }
  body.panel-auth main{min-height:calc(100dvh - var(--app-mobile-top));}
  body.panel-auth .site-footer-panel{display:none!important}
  body.panel-auth img,body.panel-auth video,body.panel-auth iframe,body.panel-auth canvas{max-width:100%}
  body.panel-auth iframe[src*="youtube"],
  body.panel-auth iframe[src*="youtu.be"],
  body.panel-auth iframe[src*="vimeo"]{
    display:block;
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:16/9;
    height:auto!important;
    min-height:0!important;
    border:0;
    border-radius:14px;
    background:#0f1320;
  }

  /* --- Native-style bottom dock --- */
  .mobile-app-dock{
    position:fixed;
    left:10px;
    right:10px;
    bottom:max(8px,env(safe-area-inset-bottom));
    z-index:1450;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    min-height:60px;
    padding:5px;
    border:1px solid rgba(222,225,234,.94);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 14px 42px rgba(24,29,48,.16),0 1px 0 rgba(255,255,255,.9) inset;
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    transition:transform .18s ease,opacity .18s ease;
  }
  .mobile-app-dock>a{
    position:relative;
    min-width:0;
    min-height:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 2px 4px;
    border-radius:15px;
    color:#8a92a2;
    text-decoration:none;
    font-size:9.5px;
    line-height:1.1;
    font-weight:750;
    letter-spacing:-.01em;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .mobile-app-dock>a:active{transform:scale(.96)}
  .mobile-app-dock>a.active{
    color:var(--app-mobile-primary);
    background:linear-gradient(180deg,#f3f1ff,#f8f7ff);
  }
  .mobile-app-dock-icon{
    position:relative;
    width:28px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:10px;
  }
  .mobile-app-dock>a.active .mobile-app-dock-icon{background:#e9e5ff}
  .mobile-app-dock svg{width:19px;height:19px;stroke-width:2}
  .mobile-app-dock b{
    position:absolute;
    top:-4px;
    right:-5px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:999px;
    background:#ef4b62;
    color:#fff;
    font-size:8px;
    line-height:1;
    font-weight:800;
  }
  body.menu-open .mobile-app-dock,
  body.admin-mobile-menu-open .mobile-app-dock,
  body.mobile-input-focus .mobile-app-dock{
    opacity:0;
    pointer-events:none;
    transform:translateY(calc(100% + 24px));
  }

  /* --- Generic authenticated app header --- */
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1250!important;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid rgba(228,231,239,.9)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 1px 0 rgba(21,27,44,.02)!important;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .site-header .nav-wrap{
    width:100%!important;
    min-height:58px!important;
    padding:0 12px!important;
    gap:9px!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .site-header .brand{
    min-width:0;
    gap:8px;
    font-size:18px!important;
    font-weight:800;
    letter-spacing:-.045em;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .site-header .brand-mark{width:31px;height:31px}
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .mobile-menu{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    margin-left:auto;
    border-color:#e5e8ef!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .main-nav{
    width:min(330px,88vw)!important;
    padding:calc(12px + env(safe-area-inset-top)) 13px calc(88px + env(safe-area-inset-bottom))!important;
    border-left:0!important;
    box-shadow:-22px 0 56px rgba(17,24,39,.18)!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .main-nav>a:not(.btn),
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .main-nav .nav-dropdown-trigger{
    min-height:48px!important;
    border-radius:13px!important;
  }

  /* --- Generic authenticated content: full-width app canvas --- */
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-shell{
    padding:12px 0 calc(90px + env(safe-area-inset-bottom))!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-shell>.container,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) main>.container,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .section>.container{
    width:100%!important;
    max-width:none!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-grid{
    display:block!important;
    width:100%;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-grid>.sidebar{
    display:none!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-header{
    margin:0 0 12px!important;
    padding:8px 2px 4px!important;
    gap:12px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-header h1{
    margin:0;
    font-size:26px!important;
    line-height:1.13;
    letter-spacing:-.045em!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-header p{
    margin-top:6px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
    color:var(--app-mobile-muted)!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-header>.action-row,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-header>.btn{width:100%!important}
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .panel,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .profile-card,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .booking-card,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .product-detail-card{
    margin-bottom:12px;
    padding:16px!important;
    border:1px solid var(--app-mobile-line)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 5px 20px rgba(25,31,52,.045)!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .panel-title{
    margin-bottom:13px!important;
    gap:9px!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .panel-title h2{
    font-size:17px!important;
    line-height:1.25!important;
    letter-spacing:-.025em!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .metric-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .stats-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .institution-metrics,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .store-admin-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .metric,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .stat{
    min-height:100px!important;
    padding:14px!important;
    border:1px solid var(--app-mobile-line)!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .metric strong,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .stat strong{font-size:25px!important}
  .panel-auth .btn,.panel-auth button,.panel-auth input,.panel-auth select,.panel-auth textarea{max-width:100%}
  .panel-auth .btn{min-height:42px;border-radius:12px!important}
  .panel-auth input:not([type="checkbox"]):not([type="radio"]),
  .panel-auth select,.panel-auth textarea{
    min-height:46px;
    font-size:16px!important;
    border-radius:12px!important;
  }
  .panel-auth textarea{min-height:112px}
  .panel-auth .action-row{gap:8px!important}
  .panel-auth .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    border:1px solid var(--app-mobile-line);
    border-radius:15px;
    background:#fff;
    -webkit-overflow-scrolling:touch;
  }
  .panel-auth table{min-width:680px!important}
  .panel-auth th,.panel-auth td{padding:12px 10px!important;font-size:12px!important}
  .panel-auth .tabs,.panel-auth .segmented,.panel-auth .filter-tabs{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .panel-auth .tabs::-webkit-scrollbar,.panel-auth .segmented::-webkit-scrollbar,.panel-auth .filter-tabs::-webkit-scrollbar{display:none}

  /* --- Student app shell --- */
  .student-v109-page{
    min-height:100dvh;
    background:var(--app-mobile-bg)!important;
    padding-bottom:calc(var(--app-mobile-dock) + env(safe-area-inset-bottom));
  }
  .student-v109-page>main{min-height:100dvh!important;padding:0!important}
  .student-v109-page .student-app-shell{display:block!important;min-height:100dvh!important}
  .student-v109-page .student-app-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:1700!important;
    width:min(320px,88vw)!important;
    height:100dvh!important;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(86px + env(safe-area-inset-bottom))!important;
    transform:translate3d(-104%,0,0)!important;
    border-right:0!important;
    border-radius:0 22px 22px 0!important;
    box-shadow:24px 0 70px rgba(19,24,42,.2)!important;
    transition:transform .22s cubic-bezier(.22,.8,.24,1)!important;
  }
  .student-v109-page .student-app-shell.sidebar-open .student-app-sidebar{transform:translate3d(0,0,0)!important}
  .student-v109-page .student-app-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:1660!important;
    display:none!important;
    background:rgba(15,20,35,.44)!important;
  }
  .student-v109-page .student-app-shell.sidebar-open .student-app-overlay{display:block!important}
  .student-v109-page .student-app-page{display:block!important;width:100%!important;background:var(--app-mobile-bg)!important}
  .student-v109-page .student-app-topbar{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    height:auto!important;
    padding:env(safe-area-inset-top) 12px 0!important;
    gap:9px!important;
    border-bottom:1px solid rgba(227,230,238,.92)!important;
    background:rgba(255,255,255,.93)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }
  .student-v109-page .student-sidebar-toggle{
    display:grid!important;
    place-items:center!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    border:1px solid #e4e7ee!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .student-v109-page .student-app-page-title{min-width:0;flex:1}
  .student-v109-page .student-app-page-title h1{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px!important;
    letter-spacing:-.035em!important;
  }
  .student-v109-page .student-app-page-title p{display:none!important}
  .student-v109-page .student-app-top-actions{gap:6px!important}
  .student-v109-page .student-app-top-actions>.btn{display:none!important}
  .student-v109-page .student-top-icon,.student-v109-page .student-top-avatar{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
    border:1px solid #e4e7ee!important;
    box-shadow:none!important;
  }
  .student-v109-page .student-app-content{
    width:100%!important;
    max-width:none!important;
    padding:12px 12px calc(92px + env(safe-area-inset-bottom))!important;
  }
  .student-v109-page .student-card,
  .student-v109-page .student-greeting,
  .student-v109-page .student-active-package,
  .student-v109-page .ds-today-card,
  .student-v109-page .ds-student-focus-copy,
  .student-v109-page .student-content-main,
  .student-v109-page .student-content-outline,
  .student-v109-page .student-question-list,
  .student-v109-page .student-question-thread,
  .student-v109-page .student-quiz-panel{
    border-radius:18px!important;
    border-color:#e5e8ef!important;
    box-shadow:0 5px 20px rgba(24,31,54,.045)!important;
  }
  .student-v109-page .student-card{padding:16px!important}
  .student-v109-page .student-card-head{gap:10px!important}
  .student-v109-page .student-card-head h2{font-size:17px!important}
  .student-v109-page .student-greeting{padding:20px!important}
  .student-v109-page .student-greeting h2{font-size:25px!important}
  .student-v109-page .student-dashboard-metrics,
  .student-v109-page .student-recommend-grid,
  .student-v109-page .student-quick-list,
  .student-v109-page .student-subject-grid,
  .student-v109-page .ds-progress-grid,
  .student-v109-page .ds-pending-grid{grid-template-columns:1fr!important;gap:10px!important}
  .student-v109-page .student-dashboard-metric{min-height:92px!important;border-radius:16px!important}
  .student-v109-page .student-upcoming-class{border-radius:15px!important}
  .student-v109-page .student-learning-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .student-v109-page .student-learning-tabs::-webkit-scrollbar{display:none}

  /* --- Admin becomes a true off-canvas app shell --- */
  .admin-pro-page{
    min-height:100dvh;
    background:var(--app-mobile-bg)!important;
    padding-bottom:calc(var(--app-mobile-dock) + env(safe-area-inset-bottom));
  }
  .admin-pro-page .admin-pro-shell{display:block!important;min-height:100dvh!important}
  .admin-pro-page .admin-pro-sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:1750!important;
    width:min(326px,88vw)!important;
    height:100dvh!important;
    padding:calc(14px + env(safe-area-inset-top)) 13px calc(88px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0 22px 22px 0!important;
    background:#161929!important;
    box-shadow:26px 0 72px rgba(10,14,28,.28)!important;
    transform:translate3d(-104%,0,0)!important;
    transition:transform .22s cubic-bezier(.22,.8,.24,1)!important;
  }
  body.admin-mobile-menu-open{overflow:hidden!important;touch-action:none}
  body.admin-mobile-menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1710;
    background:rgba(12,16,30,.45);
  }
  body.admin-mobile-menu-open .admin-pro-sidebar{transform:translate3d(0,0,0)!important}
  .admin-pro-page .admin-pro-sidebar .admin-pro-brand{
    min-height:50px!important;
    margin-right:48px!important;
    padding:6px 8px 14px!important;
    color:#fff!important;
  }
  .admin-pro-page .admin-mobile-close{
    position:absolute;
    top:calc(14px + env(safe-area-inset-top));
    right:13px;
    z-index:2;
    width:40px;
    height:40px;
    display:grid!important;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    color:#fff;
  }
  .admin-pro-page .admin-pro-sidebar nav{
    display:block!important;
    height:calc(100dvh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:4px 0 14px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none;
  }
  .admin-pro-page .admin-pro-sidebar nav::-webkit-scrollbar{display:none}
  .admin-pro-page .admin-nav-group{
    display:block!important;
    margin:15px 10px 6px!important;
    color:rgba(255,255,255,.42)!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.11em!important;
  }
  .admin-pro-page .admin-pro-sidebar nav a{
    width:100%!important;
    min-height:45px!important;
    display:flex!important;
    margin:2px 0!important;
    padding:0 11px!important;
    border-radius:12px!important;
    color:rgba(239,241,255,.72)!important;
    font-size:12px!important;
  }
  .admin-pro-page .admin-pro-sidebar nav a svg{color:rgba(239,241,255,.52)!important}
  .admin-pro-page .admin-pro-sidebar nav a.active{
    background:rgba(113,91,241,.2)!important;
    color:#fff!important;
    box-shadow:inset 3px 0 0 #8a76ff!important;
  }
  .admin-pro-page .admin-pro-sidebar nav a.active svg{color:#fff!important}
  .admin-pro-page .admin-pro-sidebar-foot{display:none!important}
  .admin-pro-page .admin-pro-main{
    width:100%!important;
    min-width:0!important;
    padding:0 12px calc(94px + env(safe-area-inset-bottom))!important;
    background:var(--app-mobile-bg)!important;
  }
  .admin-pro-page .admin-pro-topbar{
    position:sticky!important;
    top:0!important;
    z-index:1250!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 -12px 12px!important;
    padding:env(safe-area-inset-top) 12px 0!important;
    border-bottom:1px solid rgba(226,229,237,.92)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
  }
  .admin-pro-page .admin-pro-topbar-left{min-width:0;flex:1;gap:7px!important}
  .admin-pro-page .admin-mobile-menu{
    display:grid!important;
    place-items:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid #e3e6ee;
    border-radius:12px;
    background:#fff;
    color:#232a3a;
  }
  .admin-pro-page .admin-pro-back{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
  }
  .admin-pro-page .admin-pro-back span{display:none!important}
  .admin-pro-page .admin-pro-breadcrumb{
    min-width:0!important;
    display:block!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .admin-pro-page .admin-pro-breadcrumb>a,
  .admin-pro-page .admin-pro-breadcrumb>span{display:none!important}
  .admin-pro-page .admin-pro-breadcrumb>strong{
    display:block!important;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#1c2230!important;
    font-size:15px!important;
    letter-spacing:-.025em;
  }
  .admin-pro-page .admin-pro-top-actions{gap:6px!important}
  .admin-pro-page .admin-pro-search-shortcut{display:none!important}
  .admin-pro-page .admin-pro-top-actions .notification-link{
    width:38px!important;
    height:38px!important;
    min-height:38px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid #e3e6ee!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .admin-pro-page .admin-pro-user{gap:0!important}
  .admin-pro-page .admin-pro-user>div{display:none!important}
  .admin-pro-page .admin-pro-user-avatar{width:38px!important;height:38px!important;border-radius:12px!important}
  .admin-pro-page .admin-pro-heading,
  .admin-pro-page .admin-overview-heading{
    margin:0 0 12px!important;
    padding:7px 2px 2px!important;
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .admin-pro-page .admin-pro-heading h1,
  .admin-pro-page .admin-overview-heading h1{font-size:25px!important;letter-spacing:-.045em!important}
  .admin-pro-page .admin-pro-heading p,
  .admin-pro-page .admin-overview-heading p{font-size:12px!important;line-height:1.55!important}
  .admin-pro-page .admin-pro-heading-actions,
  .admin-pro-page .admin-overview-heading .admin-pro-heading-actions{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important}
  .admin-pro-page .admin-action-center{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .admin-pro-page .admin-action-card{
    min-height:118px!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:9px!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  .admin-pro-page .admin-action-card>svg{display:none!important}
  .admin-pro-page .admin-action-icon{width:36px!important;height:36px!important;border-radius:11px!important}
  .admin-pro-page .admin-action-card strong{font-size:22px!important}
  .admin-pro-page .admin-action-card p{font-size:10.5px!important}
  .admin-pro-page .admin-overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:16px!important}
  .admin-pro-page .admin-overview-strip>div{min-height:66px!important;padding:12px!important}
  .admin-pro-page .admin-recent-card,.admin-pro-page .admin-pro-card{border-radius:17px!important;box-shadow:0 5px 20px rgba(25,31,52,.04)!important}
  .admin-pro-page .admin-card-heading{padding:16px 15px 12px!important;gap:10px!important;flex-direction:column!important}
  .admin-pro-page .admin-card-heading h2{font-size:17px!important}
  .admin-pro-page .admin-pro-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .admin-pro-page .admin-stat-card{min-height:102px!important;padding:14px!important;border-radius:16px!important}
  .admin-pro-page .admin-pro-filter,
  .admin-pro-page .admin-create-grid,
  .admin-pro-page .admin-detail-grid{grid-template-columns:1fr!important}
  .admin-pro-page .admin-filter-field.search,.admin-pro-page .admin-create-grid .span-3{grid-column:auto!important}
  .admin-pro-page .admin-sheet{min-width:760px!important}

  /* --- Premium notifications remains compact inside app canvas --- */
  .panel-auth .notifications-page,
  .panel-auth .notification-page{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}

  /* --- Public/mobile marketing refinement (no dock) --- */
  body:not(.panel-auth) .site-header{
    position:sticky;
    top:0;
    z-index:1200;
    padding-top:env(safe-area-inset-top);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  body:not(.panel-auth) .site-header .nav-wrap{width:100%;padding-left:12px;padding-right:12px}
  body:not(.panel-auth) .page-hero{padding:34px 0 22px!important}
  body:not(.panel-auth) .page-hero h1{font-size:31px!important;letter-spacing:-.045em!important}
  body:not(.panel-auth) .page-hero p{font-size:14px!important}
  body:not(.panel-auth) .section,body:not(.panel-auth) .store-section{padding-block:42px!important}
}

@media (max-width:560px){
  .mobile-app-dock{left:7px;right:7px;bottom:max(6px,env(safe-area-inset-bottom));border-radius:19px}
  .mobile-app-dock>a{font-size:9px}
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .metric-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .stats-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .institution-metrics,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .store-admin-metrics{grid-template-columns:1fr 1fr!important}
  .admin-pro-page .admin-action-center{grid-template-columns:1fr!important}
  .admin-pro-page .admin-action-card{min-height:96px!important}
  .admin-pro-page .admin-overview-strip{grid-template-columns:1fr 1fr!important}
  .student-v109-page .student-app-content{padding-left:10px!important;padding-right:10px!important}
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .dashboard-shell>.container,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) main>.container,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .section>.container{padding-left:10px!important;padding-right:10px!important}
}

@media (max-width:380px){
  .mobile-app-dock>a{font-size:8.5px}
  .mobile-app-dock svg{width:18px;height:18px}
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .metric-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .stats-grid,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .institution-metrics,
  .panel-auth:not(.student-v109-page):not(.admin-pro-page) .store-admin-metrics{grid-template-columns:1fr!important}
  .admin-pro-page .admin-overview-strip{grid-template-columns:1fr!important}
}

@media (display-mode:standalone) and (max-width:820px){
  body.panel-auth{background:var(--app-mobile-bg)!important}
  .mobile-app-dock{bottom:max(7px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .mobile-app-dock,.admin-pro-sidebar,.student-app-sidebar{transition:none!important}
}


/* --------------------------------------------------------------------------
 * v21.14 — Public mobile footer cleanup
 * Keeps desktop footer intact; compresses the public footer into an app-like
 * two-column information layout on phones.
 * ----------------------------------------------------------------------- */
@media (max-width:620px){
  .site-footer-market{
    padding:30px 0 calc(18px + env(safe-area-inset-bottom))!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(180deg,#101321 0%,#0d1020 100%)!important;
  }
  .site-footer-market>.container{
    width:100%!important;
    max-width:none!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .site-footer-market .market-footer-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:24px 18px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .site-footer-market .market-footer-brand{
    grid-column:1/-1!important;
    min-width:0!important;
    padding:0 0 22px!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
  }
  .site-footer-market .market-footer-brand .brand{
    display:inline-flex!important;
    align-items:center!important;
    gap:10px!important;
    margin:0!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .site-footer-market .market-footer-brand .brand-mark{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    filter:drop-shadow(0 8px 18px rgba(92,76,255,.25))!important;
  }
  .site-footer-market .market-footer-brand p{
    max-width:none!important;
    margin:14px 0 16px!important;
    color:#b8bfce!important;
    font-size:13px!important;
    line-height:1.62!important;
    letter-spacing:-.01em!important;
  }
  .site-footer-market .market-footer-contacts{
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;
    gap:8px!important;
    margin:0 0 14px!important;
  }
  .site-footer-market .market-footer-contact{
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.055)!important;
    color:#eef0f7!important;
    font-size:11.5px!important;
    line-height:1.2!important;
    font-weight:750!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .site-footer-market .market-footer-contact svg{
    width:16px!important;
    height:16px!important;
    flex:0 0 16px!important;
    color:#8e80ff!important;
  }
  .site-footer-market .social-links-footer{
    justify-content:flex-start!important;
    gap:8px!important;
    margin:0!important;
  }
  .site-footer-market .social-links-footer .social-link{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    border-radius:12px!important;
    border-color:rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.065)!important;
    color:#f4f5fb!important;
  }
  .site-footer-market .social-links-footer .social-link-label{display:none!important}

  .site-footer-market .market-footer-section{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .site-footer-market .market-footer-section h4{
    margin:0 0 9px!important;
    color:#8f97aa!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  .site-footer-market .market-footer-section a{
    display:block!important;
    margin:0!important;
    padding:5px 0!important;
    color:#d7dbe5!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    font-weight:550!important;
    letter-spacing:-.01em!important;
  }
  .site-footer-market .market-footer-section a:active{color:#fff!important}

  .site-footer-market .footer-bottom{
    margin-top:26px!important;
    padding-top:15px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    color:#7f8799!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.45!important;
  }
  .site-footer-market .footer-bottom span{
    margin:0!important;
    color:inherit!important;
    font-size:inherit!important;
  }
}

@media (max-width:380px){
  .site-footer-market>.container{padding-left:16px!important;padding-right:16px!important}
  .site-footer-market .market-footer-grid{gap:22px 14px!important}
  .site-footer-market .market-footer-contacts{grid-template-columns:1fr!important}
  .site-footer-market .market-footer-section a{font-size:12px!important}
}