/* VuNarIQ V3.2 — Professional interface polish
   Presentation-only layer. It does not alter storage keys, student data or feature locks. */
:root{
  --v32-polish-line:#2b4e63;
  --v32-polish-panel:#0a2234;
  --v32-polish-panel-2:#0d2a3e;
  --v32-polish-text:#f1f8fc;
  --v32-polish-muted:#a8bfce;
  --v32-polish-teal:#70e6c3;
  --v32-polish-radius:16px;
  --v32-polish-shadow:0 14px 36px rgba(0,0,0,.22);
}

/* Quiet, balanced chrome */
.topbar{
  display:flex!important;
  align-items:center!important;
  min-height:64px!important;
  height:64px!important;
  padding:8px 16px!important;
  gap:14px!important;
  background:linear-gradient(180deg,#081b2a 0%,#071724 100%)!important;
  border-bottom:1px solid rgba(111,163,191,.28)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.16)!important;
}
.brand.brand-logo-button{
  flex:0 0 auto!important;
  width:184px!important;
  min-width:184px!important;
  height:46px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.brand-logo-button img{width:100%!important;max-width:184px!important;max-height:46px!important;object-fit:contain!important;object-position:left center!important}
.global-back{flex:0 0 auto!important;min-height:38px!important;padding:7px 10px!important;border-radius:11px!important;font-size:11px!important}
.active-label{flex:1 1 auto!important;min-width:0!important;padding:0 4px!important;font-size:12px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.top-actions{flex:0 0 auto!important;margin-left:auto!important;display:flex!important;align-items:center!important}
.top-actions>*{display:none!important}.top-actions>#v3MainMenuButton{display:flex!important}
.v3-main-menu-button{
  min-width:194px!important;
  min-height:46px!important;
  padding:7px 13px 7px 9px!important;
  gap:10px!important;
  border-radius:14px!important;
  border:1px solid #4c7389!important;
  background:linear-gradient(135deg,#11364d,#0a2639)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important;
}
.v3-control-icon{width:32px!important;height:32px!important;border-radius:10px!important;font-size:18px!important}
.v3-control-label b{font-size:12px!important;line-height:1.15!important}.v3-control-label small{font-size:9px!important;line-height:1.15!important;margin-top:2px!important}
body.v3-home-screen .global-back{display:none!important}

/* Main home/QR surface: contained, not edge-to-edge. */
body.v3-home-screen #main{
  width:min(1120px,calc(100vw - 40px))!important;
  margin-inline:auto!important;
  padding:16px 4px 86px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin;
}
body.v3-home-screen .hero{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)!important;gap:16px!important;align-items:stretch!important}
body.v3-home-screen .hero-card,body.v3-home-screen .metric-card,
body.v3-home-screen .class-card{border:1px solid rgba(87,133,158,.38)!important;background:linear-gradient(180deg,rgba(13,42,62,.96),rgba(8,29,44,.96))!important;box-shadow:var(--v32-polish-shadow)!important}
body.v3-home-screen .hero-card,body.v3-home-screen .metric-card{padding:20px!important;border-radius:18px!important}
body.v3-home-screen .hero h1{font-size:clamp(24px,3.2vw,38px)!important;line-height:1.08!important;margin:4px 0 10px!important;letter-spacing:-.02em!important}
body.v3-home-screen .hero p{display:block!important;max-height:none!important;overflow:visible!important;font-size:13px!important;line-height:1.55!important;margin:0 0 14px!important;color:#c3d5e0!important}
body.v3-home-screen .hero-actions{gap:9px!important;flex-wrap:wrap!important}
body.v3-home-screen .hero-actions button{min-height:40px!important;padding:8px 12px!important;font-size:11px!important;border-radius:11px!important}
body.v3-home-screen .section-title{margin:18px 2px 10px!important}.section-title h2{font-size:19px!important}
body.v3-home-screen .grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))!important;gap:12px!important}
body.v3-home-screen .class-card{padding:15px!important;border-radius:16px!important}.class-card h3{font-size:18px!important;margin:5px 0 7px!important}.class-meta{gap:6px!important}.class-card .row-actions{gap:7px!important;flex-wrap:wrap!important}.class-card .row-actions button{min-height:34px!important;padding:7px 9px!important;font-size:10px!important}

/* Keep utilities out of the hero/banner. Their home is Control Center. */
.v32-relocated-utility{display:none!important}
body.v3-home-screen #main [data-action="sprint"],
body.v3-home-screen #main [data-v3-voice-choice],
body.v3-home-screen #main .v3-voice-choice,
.topbar [data-action="sprint"],.topbar [data-v3-voice-choice],.topbar .v3-voice-choice{display:none!important}
body.v3-home-screen .hero-actions [data-action="demo-upgrade"],
.topbar [data-action="demo-upgrade"],.top-actions [data-action="demo-upgrade"]{display:none!important}

/* Drawer: more room and readable labels; scrolling replaces cramped tiny text. */
#v3MainMenu{width:min(470px,94vw)!important}
#v3MainMenu>header{padding:17px 16px 13px!important}#v3MainMenu>header strong{font-size:18px!important;line-height:1.2!important}#v3MainMenu>header small{font-size:10px!important;line-height:1.35!important;margin-top:3px!important}
.v3-menu-scroll{padding:12px 13px 22px!important}.v3-menu-section{gap:7px!important;margin-bottom:16px!important}.v3-menu-section h3{font-size:10px!important;margin:8px 4px 4px!important}
.v3-menu-row{gap:6px!important}.v3-menu-main,.v3-option-card{min-height:52px!important;border-radius:13px!important}.v3-menu-main{grid-template-columns:32px minmax(0,1fr) auto!important;gap:9px!important;padding:8px 10px!important}.v3-menu-icon{width:31px!important;height:31px!important;border-radius:9px!important;font-size:15px!important}.v3-menu-copy{gap:2px!important}.v3-menu-copy b{font-size:12px!important;line-height:1.2!important}.v3-menu-copy small{font-size:9px!important;line-height:1.3!important}.v3-info{width:36px!important;min-height:52px!important;border-radius:13px!important}.v3-option-card{grid-template-columns:minmax(145px,.95fr) minmax(145px,1.1fr) 36px!important;gap:7px!important;padding:8px!important}.v3-option-card>div{grid-template-columns:31px minmax(0,1fr)!important;gap:9px!important}.v3-option-card select{height:38px!important;font-size:10px!important;border-radius:9px!important}.v3-menu-help-panel{padding:13px 14px!important;margin-top:11px!important;border-radius:13px!important}.v3-menu-help-title{font-size:14px!important}.v3-menu-help-panel p{font-size:10.5px!important;line-height:1.55!important}.v3-menu-help-panel li,.v3-menu-help-panel small{font-size:9.5px!important;line-height:1.48!important}

/* Social + upgrade is one deliberate footer cell, nowhere else. */
body:not(.v3-home-screen) .v3-social-footer{display:none!important}
.v3-social-footer{
  width:min(820px,calc(100vw - 36px))!important;
  max-width:820px!important;
  min-height:48px!important;
  bottom:12px!important;
  padding:8px 10px 8px 14px!important;
  gap:10px 12px!important;
  border-radius:16px!important;
  border:1px solid rgba(82,132,157,.48)!important;
  background:linear-gradient(135deg,rgba(7,26,40,.97),rgba(12,43,61,.95))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.34)!important;
  font-size:9.5px!important;
  flex-wrap:wrap!important;
  white-space:normal!important;
}
.v3-social-title{font-size:9.5px!important}.v3-social-item{font-size:9px!important;padding:4px 5px!important}.v3-footer-upgrade{margin-left:auto!important;min-height:32px!important;padding:6px 13px!important;font-size:9px!important;border-radius:10px!important}

/* General panels: fewer hard edges, consistent rhythm. */
.panel,.class-card,.import-card,.learning-mode-grid>button,.modal-card{border-radius:var(--v32-polish-radius)!important}
.class-header,.class-compact-header{gap:12px!important}.class-header h1,.class-compact-header h1{letter-spacing:-.01em!important}.row-actions{gap:8px!important}
button,.buttonlink,input,select,textarea{touch-action:manipulation}

/* Teaching screens stay dense enough for full-class view but headings must not crush. */
body:not(.v3-home-screen) #main{padding:10px 12px!important}
.class-compact-header{min-height:42px!important;align-items:flex-start!important}.class-compact-header h1{font-size:21px!important;line-height:1.12!important}.class-summary{font-size:9px!important;line-height:1.3!important;max-height:none!important}.class-quick{gap:5px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
.class-board-wrap{padding:5px!important}.seating-board,.team-board{gap:4px!important}

@media(max-width:900px){
  .topbar{padding:8px 12px!important;gap:11px!important}.brand.brand-logo-button{width:152px!important;min-width:152px!important}.brand-logo-button img{max-width:152px!important}.v3-main-menu-button{min-width:170px!important}
  body.v3-home-screen #main{width:min(780px,calc(100vw - 30px))!important;padding:14px 2px 92px!important}
  body.v3-home-screen .hero{grid-template-columns:1fr!important}.metric-card{min-height:auto!important}
}

@media(max-width:640px){
  :root{--v3-clean-top:64px!important}
  .topbar{height:64px!important;min-height:64px!important;padding:9px 12px!important;gap:10px!important}
  body.v3-home-screen .topbar{justify-content:space-between!important}
  .brand.brand-logo-button{width:132px!important;min-width:132px!important;height:44px!important}.brand-logo-button img{max-width:132px!important;max-height:44px!important}
  .active-label{display:none!important}
  .global-back{font-size:0!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important}.global-back::before{content:'←';font-size:19px!important;line-height:1!important}
  .v3-main-menu-button{min-width:156px!important;max-width:168px!important;min-height:44px!important;padding:6px 9px!important;gap:8px!important}.v3-control-icon{width:31px!important;height:31px!important}.v3-control-label b{font-size:10.5px!important;white-space:normal!important}.v3-control-label small{font-size:8px!important;white-space:normal!important}
  body.v3-home-screen #main{width:min(560px,calc(100vw - 28px))!important;padding:14px 0 122px!important}
  body.v3-home-screen .hero-card,body.v3-home-screen .metric-card{padding:17px!important}
  body.v3-home-screen .hero h1{font-size:25px!important}.hero p{font-size:12px!important}.metric{font-size:25px!important}
  body.v3-home-screen .grid{grid-template-columns:1fr!important;gap:11px!important}
  body.v3-home-screen .class-card{padding:14px!important}.class-card .row-actions button{min-height:38px!important;font-size:10px!important}
  #v3MainMenu{width:min(440px,94vw)!important}.v3-menu-main,.v3-option-card{min-height:56px!important}.v3-menu-copy b{font-size:12px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.v3-menu-copy small{font-size:9px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}.v3-info{min-height:56px!important}
  .v3-option-card{position:relative!important;grid-template-columns:1fr!important;padding:10px!important}.v3-option-card>div{padding-right:35px!important}.v3-option-card select{width:100%!important;height:40px!important;font-size:10.5px!important}.v3-option-card .v3-info{position:absolute!important;right:10px!important;top:10px!important;width:32px!important;height:32px!important;min-height:32px!important}
  .v3-social-footer{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:min(520px,calc(100vw - 28px))!important;bottom:10px!important;padding:9px 10px!important;gap:5px 8px!important}.v3-social-title{grid-column:1/-1!important;text-align:center!important}.v3-social-item{text-align:center!important;font-size:8.5px!important;white-space:normal!important;overflow-wrap:anywhere!important}.v3-footer-upgrade{grid-column:1/-1!important;width:100%!important;margin:2px 0 0!important;min-height:34px!important;font-size:9px!important}
  body:not(.v3-home-screen) #main{padding:9px 10px!important}.class-compact-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}.class-compact-header h1{font-size:19px!important}.class-summary{display:block!important;font-size:8.5px!important;line-height:1.25!important}.class-quick{max-width:46vw!important}.class-quick .compact{min-height:30px!important;font-size:8px!important;padding:5px 7px!important}
}

@media(max-width:390px){
  .topbar{padding-inline:10px!important;gap:8px!important}.brand.brand-logo-button{width:116px!important;min-width:116px!important}.brand-logo-button img{max-width:116px!important}.v3-main-menu-button{min-width:146px!important;max-width:152px!important}.v3-control-label b{font-size:9.8px!important}.v3-control-label small{font-size:7.7px!important}
  body.v3-home-screen #main{width:calc(100vw - 24px)!important}.v3-social-footer{width:calc(100vw - 24px)!important}
}


/* V3.2 confirmed phone-landscape rule: three cards across, preserve photo proportions. */
@media (orientation:landscape) and (max-width:980px) and (max-height:620px){
  body.v3-home-screen #main{width:min(920px,calc(100vw - 34px))!important;padding-inline:2px!important}
  body.v3-home-screen .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
  body.v3-home-screen .class-card{min-width:0!important;padding:12px!important}
  body.v3-home-screen .class-card h3{font-size:16px!important}
  body.v3-home-screen .class-card .row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  body.v3-home-screen .class-card .row-actions button{min-width:0!important;font-size:9px!important;padding:6px 5px!important}
  .students,.learning-students{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .student-card,.learning-student-card{min-width:0!important}
  .student-photo,.learning-face,.face-photo,.face-main>.face-photo{object-fit:contain!important;object-position:center center!important;transform:none!important;background:#000!important}
  .learning-face,.learning-student-card>.photo-placeholder{aspect-ratio:4/3!important;max-height:none!important}
}


/* V3.2 social links reinstated: compact clickable footer icons on home screen. */
.v3-social-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:32px!important;
  padding:4px 8px!important;
  border:1px solid rgba(116,166,190,.26)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
  color:#d8ebf5!important;
  text-decoration:none!important;
  font-weight:850!important;
  line-height:1!important;
}
.v3-social-link:hover,.v3-social-link:focus-visible{background:rgba(255,255,255,.085)!important;border-color:rgba(116,231,197,.52)!important;color:#fff!important;outline:none!important}
.v3-social-icon{width:22px!important;height:22px!important;display:inline-grid!important;place-items:center!important;flex:0 0 22px!important;border-radius:7px!important;overflow:hidden!important}
.v3-social-icon svg{width:15px!important;height:15px!important;display:block!important;fill:currentColor!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.v3-social-facebook .v3-social-icon{background:#1877f2!important;color:#fff!important}.v3-social-facebook .v3-social-icon svg{stroke:none!important}
.v3-social-instagram .v3-social-icon{background:linear-gradient(145deg,#6a36d9,#d62976 52%,#f7a331)!important;color:#fff!important}.v3-social-instagram .v3-social-icon svg{fill:none!important;stroke:#fff!important}
.v3-social-email .v3-social-icon{background:#fff!important;color:#d84a3d!important}.v3-social-email .v3-social-icon svg{fill:none!important;stroke:#d84a3d!important}
.v3-social-copy{font-size:9px!important;white-space:nowrap!important}
@media(max-width:640px){
 .v3-social-footer{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .v3-social-title{grid-column:1/-1!important}
 .v3-social-link{min-width:0!important;min-height:34px!important;padding:5px 4px!important;gap:4px!important}
 .v3-social-icon{width:21px!important;height:21px!important;flex-basis:21px!important}
 .v3-social-copy{font-size:8px!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .v3-footer-upgrade{grid-column:1/-1!important}
}
@media(max-width:390px){
 .v3-social-copy{font-size:7.6px!important}.v3-social-link{padding-inline:3px!important}
}


/* VuNarIQ V3.2 — Offline First + Transfer + Persistent Navigation */
body.v3-home-screen .global-back{display:inline-flex!important;visibility:visible!important}
body.v3-home-screen .global-back:disabled{opacity:.55!important;cursor:default!important}
.v32-offline-banner{margin:14px 0 18px;padding:14px 16px;border:1px solid #2f6570;border-left:4px solid #63e6be;border-radius:15px;background:linear-gradient(135deg,rgba(12,47,58,.94),rgba(8,29,43,.96));box-shadow:0 10px 28px #0003;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.v32-offline-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#0b2030;border:1px solid #397186;color:#63e6be;font-size:22px;font-weight:950}
.v32-offline-copy strong{display:block;color:#f5fbff;font-size:14px;margin-bottom:3px}.v32-offline-copy span{display:block;color:#b8cede;font-size:12px;line-height:1.4}.v32-offline-copy b{color:#63e6be}
#v3SocialFooter .v3-footer-upgrade{background:linear-gradient(135deg,#e0ad45,#ffe08b)!important;color:#291b00!important;border:1px solid #ffe7a5!important;box-shadow:0 0 0 2px rgba(255,207,90,.13),0 7px 20px rgba(0,0,0,.32)!important;font-weight:950!important;min-height:38px!important;padding:8px 14px!important}
@media(max-width:760px){.v32-offline-banner{margin:10px 0 14px;padding:11px 12px;gap:9px}.v32-offline-mark{width:36px;height:36px;border-radius:10px;font-size:19px}.v32-offline-copy strong{font-size:12px}.v32-offline-copy span{font-size:10px}}

/* Brand-uniform patch 2026-09-01 */
.vniq-mark{display:inline-flex;align-items:baseline;font-weight:1000}.vniq-mark .v{color:#f22b2b}.vniq-mark .n{color:#ffd233}.vniq-mark .i{color:#ff861a;font-size:1.14em;-webkit-text-stroke:.65px #ffb144;text-shadow:0 0 7px #ff861a55}.vniq-mark .q{color:#914cff}.v3-menu-brand-logo{display:block;width:180px;max-width:55vw;height:auto;margin-bottom:2px}.v3-footer-upgrade{gap:6px!important}.v3-footer-upgrade img{height:20px!important;width:auto!important;display:block}.license-brand-logo{width:min(360px,82vw);height:auto;display:block;margin:0 auto 10px}.license-edition{text-align:center;font-weight:950;letter-spacing:.08em;color:#63e6be;margin:0 0 8px}.brand-inline-logo{height:22px;width:auto;vertical-align:middle}