/* VieGeo responsive system — loaded last on every HTML page. */
:root{--responsive-gutter:clamp(12px,3vw,36px);--responsive-touch:44px}
html{width:100%;max-width:100%;overflow-x:hidden;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;min-width:0;min-height:100dvh;margin:0;overflow-x:hidden}
body>*{min-width:0}
img,video,canvas,iframe{max-width:100%}
img,video{height:auto}
svg{max-width:100%}
button,input,select,textarea{max-width:100%;min-width:0}
textarea{resize:vertical}
pre,code{max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
table{width:100%;max-width:100%}
.table-panel,.table-wrap,.table-container,.question-bank-table-wrap,.ops-table-wrap,.ranking-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.modal-overlay,.popup-overlay,[class$="-modal"],[class$="-overlay"]{max-width:100vw}
[role="dialog"]{max-width:calc(100vw - 24px)}
body:has(.shared-topbar){padding-top:0!important}
body:has(.shared-topbar) main{padding-top:clamp(24px,4vw,48px)!important}

/* These are page-content headers, not navigation bars. Keeping them static
   prevents the welcome/admin cards from covering the real sticky menu. */
.admin-header,.student-header,.parent-dashboard-header,.support-user-header,.exam-topbar{
  position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;z-index:1!important
}

@media(max-width:1200px){
  .shared-topbar{padding-inline:10px!important;gap:7px!important}
  .shared-left{gap:5px!important}.shared-stats{display:none!important}
  .shared-center{justify-content:flex-start!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scrollbar-width:none}
  .shared-center::-webkit-scrollbar{display:none}.shared-link{flex:0 0 auto!important;padding-inline:10px!important}
  .admin-main,.student-main,.profile-main{padding-inline:clamp(18px,3vw,30px)!important}
  .parent-dashboard-shell,.support-user-shell,.shop-main,.leaderboard-main,.discovery-main,.exam-arena-shell{max-width:100%!important;padding-inline:var(--responsive-gutter)!important}
}

@media(max-width:960px){
  .shared-topbar{height:auto!important;min-height:58px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto auto!important}
  .shared-left{grid-column:1;grid-row:1}.shared-right{grid-column:3;grid-row:1;margin-left:0!important}
  .shared-center{grid-column:1/-1;grid-row:2;width:100%;padding:3px 0 2px!important}
  .shared-link{min-width:max-content!important;min-height:38px}
  body:has(.shared-topbar) main{padding-top:24px!important}

  .content-grid,.user-top-grid,.upload-grid,.profile-grid,.dashboard-grid,.support-admin-layout,.exam-control-panel{grid-template-columns:minmax(0,1fr)!important}
  .stats-grid,.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .shop-grid,.inventory-grid,.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-hero{grid-template-columns:1fr!important}
  .support-user-grid{grid-template-columns:240px minmax(0,1fr)!important}

  .student-shell{display:block!important}
  .student-sidebar{position:sticky!important;top:0!important;z-index:100001!important;isolation:isolate!important;width:100%!important;height:auto!important;max-height:none!important;min-height:64px!important;padding:8px 10px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-rows:auto!important;align-items:center!important;gap:8px!important;border-radius:0 0 20px 20px!important;overflow:visible!important;background:var(--sidebar-background,#173f51)!important;box-shadow:0 10px 24px rgba(2,18,31,.2)!important}
  .student-sidebar .brand-block{grid-column:1;padding:0!important}.student-sidebar .brand-icon{width:42px;height:42px;border-radius:14px}
  .student-sidebar .sidebar-menu{grid-column:2;min-width:0;display:flex!important;flex-direction:row!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none}
  .student-sidebar .sidebar-menu::-webkit-scrollbar{display:none}.student-sidebar .menu-item{flex:0 0 auto!important;width:auto!important;min-height:44px;padding:6px 10px!important;border-radius:14px!important;white-space:nowrap}
  .student-sidebar .menu-icon{width:32px;height:32px}.student-sidebar .sidebar-card{display:none!important}
  .student-sidebar .sidebar-actions{display:contents!important}.student-sidebar .theme-toggle-btn{display:none!important}
  .student-sidebar .sidebar-footer{grid-column:3;width:auto!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important}
  .student-sidebar .role-switch-card{width:132px;padding:5px 7px!important}.student-sidebar .role-switch-card>span{display:none}.student-sidebar .role-switch-card select{height:34px!important}
  .student-sidebar .logout-button{width:44px!important;height:44px!important;padding:0!important;flex:0 0 44px!important}.student-sidebar .logout-button span:last-child{display:none}
  .student-main{position:relative!important;z-index:0!important;padding-top:22px!important}

  .admin-shell{display:block!important}
  .admin-sidebar{position:sticky!important;top:0!important;z-index:10000!important;width:100%!important;height:auto!important;min-height:64px!important;padding:8px 10px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;border-radius:0 0 20px 20px!important;overflow:visible!important}
  .admin-sidebar .back-to-home-btn{grid-column:1;width:44px!important;height:44px!important;padding:0!important;justify-content:center!important}.admin-sidebar .back-to-home-btn span:last-child{display:none}
  .admin-sidebar .brand-block{display:none!important}.admin-sidebar .sidebar-menu{grid-column:2;display:flex!important;flex-direction:row!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none}.admin-sidebar .sidebar-menu::-webkit-scrollbar{display:none}
  .admin-sidebar .menu-item{flex:0 0 auto!important;width:auto!important;min-height:44px;padding:6px 10px!important;white-space:nowrap}.admin-sidebar .menu-icon{width:31px!important;height:31px!important}
  .admin-sidebar .sidebar-footer{grid-column:3;margin:0!important;display:flex!important;grid-template-columns:none!important;gap:5px!important}.admin-sidebar .theme-button{display:none!important}.admin-sidebar .logout-button{width:44px!important;height:44px!important;padding:0!important;justify-content:center!important}.admin-sidebar .logout-button span:last-child{display:none}
  .admin-main{padding-top:24px!important}

  .profile-shell{display:block!important}
  .profile-sidebar{position:relative!important;top:auto!important;width:100%!important;height:auto!important;min-height:64px!important;padding:8px 10px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;border-radius:0 0 20px 20px!important;overflow:visible!important}
  .profile-sidebar .brand-block{grid-column:1;padding:0!important}.profile-sidebar .brand-block>div:last-child{display:none}
  .profile-sidebar .sidebar-menu{grid-column:2;display:flex!important;flex-direction:row!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none}.profile-sidebar .sidebar-menu::-webkit-scrollbar{display:none}
  .profile-sidebar .menu-item{flex:0 0 auto!important;min-height:44px;padding:6px 9px!important;white-space:nowrap}.profile-sidebar .menu-item span{width:31px;height:31px}.profile-sidebar .sidebar-footer{grid-column:3;margin:0!important;display:flex!important;gap:5px!important}.profile-sidebar .theme-button{display:none!important}.profile-sidebar .logout-button{width:44px!important;height:44px!important;padding:0!important;justify-content:center!important}.profile-sidebar .logout-button strong{display:none}

  body:has(.support-shell){overflow:auto!important}
  .support-shell{height:auto!important;min-height:100dvh!important;grid-template-columns:280px minmax(0,1fr)!important;padding:8px!important;gap:8px!important}
  .ticket-sidebar,.chat-main{height:calc(100dvh - 16px)!important;border-radius:20px!important}.customer-info{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .chat-actions{max-width:100%;overflow-x:auto;flex-wrap:nowrap!important}.header-action{flex:0 0 auto}

  .exam-workspace.arena-fullscreen-workspace{grid-template-columns:minmax(0,1fr)!important;padding:16px!important;gap:14px!important;overflow-y:auto!important}
  .exam-navigator-card{position:static!important;max-height:none!important}.exam-question-card{min-width:0!important}
  .arena-result-card{max-height:calc(100dvh - 24px);overflow-y:auto}
}

@media(max-width:720px){
  :root{--responsive-gutter:14px}
  .shared-topbar{grid-template-columns:minmax(0,1fr) auto!important;padding:6px 8px!important}
  .shared-left{min-width:0}.shared-brand{padding-inline:4px!important}.shared-logo-mark{width:32px;height:32px}.shared-brand strong{display:none}
  .shared-right{gap:4px!important}.shared-select-control{display:none!important}.shared-action{min-width:42px;padding-inline:8px!important}
  .shared-center{scroll-snap-type:x proximity}.shared-link{scroll-snap-align:start;font-size:11px!important;padding-inline:11px!important}
  body:has(.shared-topbar) main{padding-top:18px!important}

  .admin-main,.student-main,.profile-main,.shop-main,.leaderboard-main,.discovery-main,.exam-arena-shell,.parent-dashboard-shell,.support-user-shell{padding-inline:14px!important}
  .admin-header,.student-header,.page-header,.shop-heading-row,.hero-section,.filter-bar,.parent-dashboard-header{align-items:flex-start!important;flex-direction:column!important}
  .header-actions,.parent-dashboard-actions,.table-tools,.question-bank-filters{width:100%!important;max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:3px}
  .header-actions>* ,.parent-dashboard-actions>*{flex:0 0 auto}
  .stats-grid,.activity-grid,.weekly-grid,.shop-grid,.inventory-grid,.course-grid,.parent-stat-grid,.form-grid,.achievement-modal-list{grid-template-columns:minmax(0,1fr)!important}
  .panel-card,.stat-card,.hero-card,.profile-hero,.bento-card{border-radius:20px!important}
  .hero-card,.profile-hero{padding:20px!important}.student-header{padding:20px!important}.student-header h1,.page-header h1{font-size:clamp(24px,8vw,30px)!important}
  .section-heading,.panel-heading,.table-heading{align-items:flex-start!important;flex-direction:column!important}

  .student-sidebar .brand-block>div:last-child{display:none}.student-sidebar .menu-item>span:last-child{display:none}.student-sidebar .menu-item{padding:6px!important}.student-sidebar .role-switch-card{width:112px}
  .admin-sidebar .menu-item>span:last-child{display:none}.admin-sidebar .menu-item{padding:6px!important}
  .profile-sidebar .menu-item strong{display:none}.profile-sidebar .menu-item{padding:6px!important}

  .support-shell{display:block!important;height:auto!important;padding:6px!important}
  .ticket-sidebar{position:relative!important;top:auto!important;width:100%!important;height:auto!important;max-height:46dvh!important;min-height:300px!important;border-radius:18px!important}
  .ticket-list{max-height:230px!important}.chat-main{width:100%!important;height:max(620px,calc(100dvh - 12px))!important;margin-top:8px!important;border-radius:18px!important}
  .chat-header{padding:13px!important}.chat-user{min-width:0}.chat-title-row{flex-wrap:wrap}.chat-user p{max-width:65vw!important}
  .customer-info{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:9px!important}.message-list{padding:14px 11px!important}.message-group{max-width:88%!important}
  .message-composer{grid-template-columns:40px minmax(0,1fr) auto!important;padding:9px!important}.message-composer .composer-tool{width:40px!important;height:42px!important}.send-button{height:42px!important;padding-inline:11px!important}

  .support-user-header{grid-template-columns:1fr!important}.support-user-grid{grid-template-columns:1fr!important}.support-info-card{display:none!important}.support-chat-card{min-height:calc(100dvh - 130px)!important;border-radius:20px!important}.support-message{max-width:88%!important}.support-composer{grid-template-columns:42px minmax(0,1fr) auto!important;padding:10px!important}.support-composer button{padding-inline:12px!important}

  .parent-dashboard-shell{padding-top:16px!important}.parent-dashboard-actions{display:flex!important}.parent-dashboard-actions .bento-btn,.parent-theme-btn{min-height:44px}.parent-progress-strip{grid-template-columns:1fr!important}.parent-progress-visual{width:100%!important}

  .battle-stage{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.question-arena{grid-column:1/-1!important;grid-row:1!important;padding:18px 12px!important}.fighter-card{min-width:0!important;padding-inline:8px!important}.powerup-tray{gap:5px!important}.powerup-button{min-width:0!important}
  .arena-result-card{padding:28px 16px!important;border-radius:22px!important}.arena-rewards{gap:7px!important}.arena-rewards span{padding:11px 6px!important;font-size:.74rem}
  .exam-topbar{align-items:flex-start!important;flex-direction:column!important}.exam-topbar-actions{width:100%;overflow-x:auto}.exam-setup-form{grid-template-columns:1fr!important}.exam-options{grid-template-columns:1fr!important}.exam-workspace.arena-fullscreen-workspace{padding:10px!important}

  .ranking-row,.leaderboard-row{min-width:0}.side-column{grid-template-columns:1fr!important}.podium-section{grid-template-columns:1fr!important}
  .shop-item,.inventory-item,.course-card{min-width:0}.inventory-panel{padding:18px 12px!important}
  .quiz-container,.theory-container{width:calc(100% - 24px)!important;max-width:100%!important;height:auto!important;min-height:0!important;margin-inline:auto!important;padding:18px 14px!important}.top-bar{width:calc(100% - 16px)!important;height:auto!important;min-height:60px!important;margin:8px 8px 0!important;flex-wrap:wrap!important;padding:9px!important}
  .top-bar #quizBoosters{order:3;width:100%;overflow-x:auto}.top-bar #quizBoosters>button{flex:0 0 auto}.top-bar .progress-container{min-width:90px}.top-bar .learning-theme-toggle{width:58px!important}
  .auth-wrapper{width:calc(100% - 20px)!important;margin:10px!important}.auth-left,.auth-right{padding-inline:18px!important}

  .modal-overlay,.popup-overlay,.achievement-modal,.island-result-modal{padding:10px!important}.note-modal,.achievement-modal-dialog,.island-result-dialog,[role="dialog"]{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:18px!important}
  .viegeo-toast-container{left:10px!important;right:10px!important;width:auto!important}.viegeo-toast{max-width:100%!important}
}

@media(max-width:480px){
  :root{--responsive-gutter:10px}
  .shared-action.shared-theme{display:none!important}.shared-center{gap:3px!important}.shared-link{font-size:10px!important;padding-inline:9px!important}
  .student-sidebar,.admin-sidebar,.profile-sidebar{padding-inline:6px!important;gap:4px!important}
  .student-sidebar .brand-icon,.profile-sidebar .brand-icon{width:38px!important;height:38px!important}.student-sidebar .menu-item,.admin-sidebar .menu-item,.profile-sidebar .menu-item{min-height:40px!important}
  .student-sidebar .menu-icon,.admin-sidebar .menu-icon,.profile-sidebar .menu-item span{width:29px!important;height:29px!important}
  .student-sidebar .role-switch-card{display:none!important}
  .admin-sidebar .logout-button#roleButton{display:none!important}
  .admin-main,.student-main,.profile-main,.shop-main,.leaderboard-main,.discovery-main,.exam-arena-shell,.parent-dashboard-shell,.support-user-shell{padding-inline:10px!important}
  .panel-card,.stat-card,.hero-card,.profile-hero,.bento-card{padding:16px!important;border-radius:17px!important}
  .customer-info{grid-template-columns:1fr!important}.chat-actions{width:100%}.header-action{min-height:40px!important}.message-group{max-width:92%!important}.message-avatar{width:30px!important;height:30px!important}
  .message-composer,.support-composer{grid-template-columns:38px minmax(0,1fr)!important}.message-composer .send-button,.support-composer>button:last-child{grid-column:1/-1;width:100%;height:42px}.message-composer .composer-tool,.support-composer .support-attach-button{width:38px!important}
  .support-chat-heading{padding:14px!important}.support-message-list{padding:14px!important}.support-message{max-width:94%!important}
  .battle-stage{grid-template-columns:1fr 1fr!important}.fighter-stats{grid-template-columns:1fr!important}.fighter-stats span:nth-child(2){display:none}.powerup-button span{display:none!important}.arena-rewards{grid-template-columns:1fr!important}.arena-result-card h2{font-size:2.2rem!important}
  .profile-identity h2{font-size:24px!important}.avatar-area{align-items:flex-start!important}.level-row{flex-wrap:wrap}.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .parent-dashboard-brand{font-size:1.05rem!important}.parent-dashboard-brand span{font-size:.9rem!important}.parent-dashboard-actions{display:grid!important;grid-template-columns:1fr!important}.parent-dashboard-actions>*{width:100%!important;margin-left:0!important}
  .table-tools,.question-bank-filters{display:grid!important;grid-template-columns:1fr!important}.table-tools>*,.question-bank-filters>*{width:100%!important}
  .auth-left{min-height:300px!important}.brand-slogan{font-size:2rem!important}.auth-card{padding:22px 16px!important}
}

@media(hover:none) and (pointer:coarse){
  button,a,select,input[type="button"],input[type="submit"]{min-height:var(--responsive-touch)}
  .shared-link,.menu-item{-webkit-tap-highlight-color:transparent}
}

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

/* Keep the Admin foreground/background pairing readable in dark mode. */
html[data-theme="dark"] body:has(.admin-shell),
html[data-theme="dark"] body:has(.admin-shell) .admin-shell,
html[data-theme="dark"] body:has(.admin-shell) .admin-main{background:#0e1822!important}
html[data-theme="dark"] body:has(.admin-shell) .admin-header h1,
html[data-theme="dark"] body:has(.admin-shell) .admin-header p,
html[data-theme="dark"] body:has(.admin-shell) .stat-card,
html[data-theme="dark"] body:has(.admin-shell) .stat-card *,
html[data-theme="dark"] body:has(.admin-shell) .table-panel,
html[data-theme="dark"] body:has(.admin-shell) .table-panel *,
html[data-theme="dark"] body:has(.admin-shell) .user-table td{color:var(--text-primary,#f8fafc)!important}
html[data-theme="dark"] body:has(.admin-shell) .admin-header{background:var(--surface,#17232f)!important;border-color:var(--border,#334657)!important}
html[data-theme="dark"] body:has(.admin-shell) .stat-card,
html[data-theme="dark"] body:has(.admin-shell) .table-panel,
html[data-theme="dark"] body:has(.admin-shell) .user-table,
html[data-theme="dark"] body:has(.admin-shell) .user-table td{background:var(--surface,#17232f)!important}
html[data-theme="dark"] body:has(.admin-shell) .user-table th{color:var(--text-primary,#f8fafc)!important;background:var(--surface-soft,#1d2d3b)!important}

/* Standalone administration helper page. */
.set-admin-page{min-height:100svh;padding:clamp(20px,6vw,64px);display:grid;place-content:center;gap:16px;text-align:center;color:#183247;background:linear-gradient(145deg,#e8f7ff,#effbf4)}
.set-admin-page h2,.set-admin-page p{width:min(100%,560px);margin:0 auto}
.set-admin-page button{width:min(100%,320px);min-height:48px;margin:0 auto;padding:12px 20px;border:0;border-radius:14px;color:#fff;font:inherit;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#22a6b3,#48bb78);box-shadow:0 14px 30px rgba(34,166,179,.22)}