/* MindRally Rally OS — shared interface refresh for utility and dashboard pages. */
:root {
  --ui-coral: #ff6b61;
  --ui-coral-soft: rgba(255, 107, 97, .15);
  --ui-cyan: #65d5e9;
  --ui-green: #78d7a1;
  --ui-yellow: #ffd65e;
  --ui-violet: #8b7ee7;
  --ui-night: #0e0d1a;
  --ui-panel: #1c1930;
  --ui-panel-2: #24203d;
  --ui-line: rgba(255,255,255,.11);
  --ui-ease: cubic-bezier(.2,.75,.25,1);
}

body.ui-refresh {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 88% -8%, rgba(101,213,233,.16), transparent 28rem),
    radial-gradient(circle at 4% 102%, rgba(255,107,97,.13), transparent 32rem),
    linear-gradient(145deg, #121020, #19162b 58%, #11101e);
}

body.ui-refresh::before,
body.ui-refresh::after { display: none; }

body.ui-refresh .appShell {
  grid-template-columns: 264px minmax(0,1fr);
  min-height: 100dvh;
}

body.ui-refresh .sidebar {
  width: auto;
  padding: 20px 16px;
  border-right: 1px solid var(--ui-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 32%),
    rgba(14,13,26,.93);
  box-shadow: 24px 0 60px rgba(4,3,14,.18);
  backdrop-filter: blur(24px);
}

body.ui-refresh .sidebar .brand {
  min-height: 68px;
  margin: 0 4px 24px;
  padding: 12px 12px 12px 58px;
  border-bottom: 1px solid var(--ui-line);
  position: relative;
  color: #fff;
  font-size: 1.32rem;
}

body.ui-refresh .sidebar .brand::before {
  left: 8px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--ui-coral);
  box-shadow: inset 0 -5px 0 rgba(85,0,0,.13), 0 9px 22px rgba(255,107,97,.18);
}

body.ui-refresh .sidebar .brand::after {
  left: 17px;
  top: 15px;
}

body.ui-refresh .nav {
  gap: 7px;
  position: relative;
}

body.ui-refresh .nav::before {
  content: 'WORKSPACE';
  margin: 0 11px 7px;
  color: #777289;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
}

body.ui-refresh .navItem {
  min-height: 49px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 15px;
  color: #aaa6ba;
  font-size: .9rem;
  transition: transform .18s var(--ui-ease), color .18s, background .18s, border-color .18s;
}

body.ui-refresh .navItem:hover {
  transform: translateX(4px);
  color: #fff;
  background: rgba(255,255,255,.055);
}

body.ui-refresh .navItem.active {
  color: #fff;
  border-color: rgba(255,107,97,.22);
  background: linear-gradient(100deg, rgba(255,107,97,.2), rgba(255,107,97,.055));
  box-shadow: inset 3px 0 0 var(--ui-coral), 0 12px 24px rgba(0,0,0,.11);
}

body.ui-refresh .main {
  min-width: 0;
  padding: clamp(16px,2.4vw,34px);
}

body.ui-refresh .pageWrap {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0;
  gap: 20px;
}

body.ui-refresh .container,
body.ui-refresh .layout {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.workspaceHero {
  min-height: 210px;
  padding: clamp(27px,4vw,48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.08), transparent 46%),
    #282441;
  box-shadow: 0 28px 70px rgba(5,4,18,.28);
}

.workspaceHero::before {
  content: '';
  width: 300px;
  height: 300px;
  position: absolute;
  right: -115px;
  top: -155px;
  border: 44px solid rgba(101,213,233,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(101,213,233,.045);
}

.workspaceHero::after {
  content: '✦';
  position: absolute;
  right: 31%;
  top: 28px;
  color: var(--ui-yellow);
  font-size: 1.65rem;
  transform: rotate(13deg);
}

.workspaceHero > * { position: relative; z-index: 1; }
.workspaceEyebrow { margin: 0 0 9px; color: var(--ui-cyan); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.workspaceHero h1 { margin: 0; color: #fff; font-size: clamp(2.25rem,4vw,4.2rem); line-height: .98; letter-spacing: -.045em; }
.workspaceHero p:not(.workspaceEyebrow) { max-width: 670px; margin: 13px 0 0; color: #bbb7ca; font-size: 1rem; line-height: 1.6; }
.workspaceHeroActions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.workspaceHeroMark { width: 92px; height: 92px; display: grid; place-items: center; flex: 0 0 92px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: rgba(255,255,255,.075); color: var(--ui-yellow); font: 700 2.25rem var(--font-title); transform: rotate(4deg); box-shadow: inset 0 -9px 0 rgba(0,0,0,.07); }

body.ui-refresh .card {
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%),
    rgba(28,25,48,.9);
  box-shadow: 0 18px 45px rgba(5,4,18,.19);
  transition: border-color .2s, transform .2s var(--ui-ease), box-shadow .2s;
}

body.ui-refresh .main .card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 25px 58px rgba(5,4,18,.25);
}

body.ui-refresh .card.pad,
body.ui-refresh .card.cardPad,
body.ui-refresh .card:not(.authCard) { padding: clamp(18px,2.2vw,26px); }

body.ui-refresh .card h2,
body.ui-refresh .card h3 { color: #fff; }

body.ui-refresh .btn {
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 13px;
  font-weight: 800;
  transition: transform .16s var(--ui-ease), background .16s, border-color .16s, box-shadow .16s;
}

body.ui-refresh .btn:hover:not(:disabled) { transform: translateY(-2px); }
body.ui-refresh .btn.primary,
body.ui-refresh .btn:not(.secondary):not(.ghost) { border-color: var(--ui-coral); background: var(--ui-coral); color: #fff; box-shadow: 0 11px 24px rgba(255,107,97,.18); }
body.ui-refresh .btn.secondary { border-color: rgba(101,213,233,.24); background: rgba(101,213,233,.09); color: #eafcff; }
body.ui-refresh .btn.ghost { background: transparent; }

body.ui-refresh input:not([type='checkbox']):not([type='radio']),
body.ui-refresh select,
body.ui-refresh textarea,
body.ui-refresh .input {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: #151326;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

body.ui-refresh input:not([type='checkbox']):not([type='radio']):focus,
body.ui-refresh select:focus,
body.ui-refresh textarea:focus,
body.ui-refresh .input:focus {
  border-color: rgba(101,213,233,.62);
  box-shadow: 0 0 0 4px rgba(101,213,233,.13);
}

body.ui-refresh label { display: inline-block; margin-bottom: 6px; color: #d8d5e3; font-size: .78rem; font-weight: 800; }
body.ui-refresh .muted { color: #aaa6b9; }
body.ui-refresh .hint { border: 1px solid rgba(101,213,233,.13); border-radius: 12px; background: rgba(101,213,233,.055); color: #aaa6b9; }
body.ui-refresh .pill,
body.ui-refresh .badge { border-color: rgba(101,213,233,.22); background: rgba(101,213,233,.1); color: #a9eff9; }
body.ui-refresh hr { border: 0; border-top: 1px solid var(--ui-line); }
body.ui-refresh code { border: 1px solid rgba(255,214,94,.2); border-radius: 11px; background: rgba(255,214,94,.08); color: #ffe690; }

.ui-section-title { display: flex; align-items: center; gap: 11px; color: #fff; font: 700 1.15rem var(--font-title); }
.ui-section-title::before { content: ''; width: 9px; height: 28px; border-radius: 99px; background: var(--ui-coral); }

/* Student utilities */
.student-utility-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(380px,1.18fr); gap: 18px; }
.student-utility-grid > .workspaceHero { grid-column: 1/-1; }
.student-context-card { background: linear-gradient(145deg, rgba(101,213,233,.13), transparent 48%), rgba(28,25,48,.92) !important; }
.student-progress-card .bar { height: 11px; border-radius: 99px; background: rgba(255,255,255,.08); }
.student-progress-card .bar > div { border-radius: inherit; background: linear-gradient(90deg,var(--ui-coral),#ff9b68); }
.assignment-list-card { grid-column: 1/-1; }
.codes-dashboard { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px !important; }
.codes-dashboard > .workspaceHero,
.codes-dashboard > .topbar,
.codes-dashboard > #codesError { grid-column: 1/-1; }
.codes-dashboard > .card { width: 100%; max-width: none !important; margin: 0 !important; }
.code-vault-card code { display: inline-flex; min-width: 140px; justify-content: center; padding: 10px 14px; font-size: 1rem !important; font-weight: 800; letter-spacing: .05em; }

/* Parent, account, and management workspaces */
.parent-dashboard-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px !important; }
.parent-dashboard-grid > .workspaceHero { grid-column: 1/-1; }
.parent-dashboard-grid > .card { margin: 0 !important; }
.parent-dashboard-grid > .parent-wide { grid-column: 1/-1; }
.account-dashboard { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px !important; }
.account-dashboard > .workspaceHero,
.account-dashboard > .account-toolbar,
.account-dashboard > script { grid-column: 1/-1; }
.account-dashboard > .card { width: 100%; max-width: none !important; margin: 0 !important; }
.account-dashboard #deleteAccountCard { border-color: rgba(255,107,97,.28) !important; background: linear-gradient(145deg,rgba(255,107,97,.1),transparent 48%),rgba(28,25,48,.9); }
.account-toolbar { display:flex; justify-content:flex-end; }

.teacher-workspace .layout { gap: 18px !important; }
.teacher-workspace .toprow { min-height: 210px; padding: clamp(27px,4vw,48px); align-items:flex-end; border:1px solid rgba(255,255,255,.12); border-radius:30px; background:linear-gradient(135deg,rgba(139,126,231,.18),transparent 50%),#282441; box-shadow:0 28px 70px rgba(5,4,18,.28); position:relative; overflow:hidden; }
.teacher-workspace .toprow::after { content:'TEACH'; position:absolute; right:28px; top:24px; color:rgba(255,255,255,.055); font:700 clamp(3.4rem,8vw,7.5rem) var(--font-title); letter-spacing:-.06em; }
.teacher-workspace .toprow > * { position:relative; z-index:1; }
.teacher-workspace .toprow .workspaceEyebrow { margin-bottom:8px; color:var(--ui-cyan); font:800 .68rem var(--font-body); letter-spacing:.16em; }
.teacher-workspace .toprow > div:first-child > div:nth-child(2) { color:#fff; font:700 clamp(2.2rem,4vw,4rem) var(--font-title); letter-spacing:-.045em; }
.teacher-workspace #manageBlock { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.teacher-workspace #manageBlock > .card { margin:0 !important; }
.teacher-workspace #manageBlock > .card:nth-child(3),
.teacher-workspace #manageBlock > .card:nth-child(4) { grid-column:1/-1; }
.teacher-workspace .studentEntry,
.teacher-workspace .assignmentCard,
.teacher-workspace .progressBox { border-radius:15px; background:rgba(255,255,255,.035); }

.management-workspace .layout { gap: 18px !important; }
.management-workspace .layout > .card:first-child { border-radius: 30px; background: linear-gradient(130deg,rgba(101,213,233,.13),transparent 46%),#282441; }
.management-workspace .layout > .card:first-child h1 { color:#fff; font-size:clamp(2.2rem,4vw,3.8rem); letter-spacing:-.045em; }
.management-workspace .stats { gap: 12px !important; }
.management-workspace .stat { min-height: 104px; padding: 18px !important; display:flex; flex-direction:column; justify-content:center; border-radius:18px !important; background:rgba(255,255,255,.055) !important; }
.management-workspace .stat .v { color:#fff; font:700 2rem var(--font-title); }
.management-workspace .tableWrap { border-radius:16px !important; overflow:auto !important; }
.management-workspace table { min-width:720px; }
.management-workspace thead th { padding:13px 12px; background:#171526 !important; }
.management-workspace tbody tr { transition:background .15s; }
.management-workspace tbody tr:hover { background:rgba(101,213,233,.045); }
.management-workspace th,
.management-workspace td { padding:12px !important; }
.management-workspace .adminHero { min-height:210px; padding:clamp(27px,4vw,48px) !important; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; border-radius:30px; background:linear-gradient(130deg,rgba(139,126,231,.18),transparent 50%),#282441; }
.management-workspace .adminHero::after { content:'CONTROL'; position:absolute; right:24px; top:14px; color:rgba(255,255,255,.045); font:700 clamp(3.4rem,8vw,7rem) var(--font-title); letter-spacing:-.07em; }
.management-workspace .adminHero > div { width:100%; position:relative; z-index:1; }
.management-workspace .adminHero h1 { color:#fff; font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.045em; }
.school-workspace .layout > .card:first-child { min-height:260px; padding:clamp(27px,4vw,42px) !important; }

body.ui-refresh .skillRow,
body.ui-refresh .studentEntry,
body.ui-refresh .assignmentCard,
body.ui-refresh .integrityAlertRow,
body.ui-refresh .classMemberBox,
body.ui-refresh .classSummary {
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.035) !important;
}

body.ui-refresh .skillRow { padding:12px 14px; }
body.ui-refresh .assignmentSection + .assignmentSection { margin-top:18px; }
body.ui-refresh .assignmentSectionHead { padding:0 2px 10px; }
body.ui-refresh .skillCard { border-radius:16px; background:#24203d; }
body.ui-refresh .topbar { min-height:74px; border-radius:18px; }
body.ui-refresh .msg:not(:empty) { padding:12px 14px; border:1px solid var(--ui-line); border-radius:12px; background:rgba(255,255,255,.04); }

.launcher-workspace .secure-wrap { width:min(1240px,calc(100% - 32px)); margin:24px auto; gap:18px; }
.launcher-workspace .secure-head { min-height:220px; padding:clamp(28px,4vw,48px) !important; }
.launcher-workspace .secure-head > div:first-child { position:relative; z-index:1; }
.launcher-workspace .secure-actions { position:relative; z-index:1; }
.launcher-workspace .game-shell { padding:10px; border:1px solid var(--ui-line); border-radius:24px; background:#090812; box-shadow:0 28px 70px rgba(0,0,0,.28); }
.launcher-workspace .launcher-status { padding:18px 20px !important; }

/* Split-screen authentication */
body.authPage.ui-refresh { padding: 0; }
body.authPage.ui-refresh .authShell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(14px,2.2vw,30px);
  display: grid;
  grid-template-columns: minmax(360px,1fr) minmax(430px,620px);
  gap: clamp(18px,3vw,42px);
  align-items: stretch;
}

.authStory {
  min-height: 620px;
  padding: clamp(34px,5vw,72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.075),transparent 46%),
    linear-gradient(145deg,#302b55,#211d3b 64%,#171526);
  box-shadow: 0 34px 90px rgba(5,4,18,.34);
}

.authStory::before { content:''; width:360px; height:360px; position:absolute; right:-170px; top:-180px; border:58px solid rgba(101,213,233,.15); border-radius:50%; box-shadow:0 0 0 70px rgba(101,213,233,.04); }
.authStory::after { content:'✦'; position:absolute; right:18%; bottom:18%; color:var(--ui-yellow); font-size:2.4rem; transform:rotate(12deg); }
.authBrand { display:inline-flex; align-items:center; gap:11px; width:fit-content; color:#fff; text-decoration:none; font:700 1.25rem var(--font-title); }
.authBrandMark { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; background:var(--ui-coral); color:#fff; transform:rotate(-4deg); box-shadow:inset 0 -5px 0 rgba(80,0,0,.13); }
.authStoryCopy { position:relative; z-index:1; }
.authStoryCopy span { color:var(--ui-cyan); font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.authStoryCopy h2 { max-width:700px; margin:12px 0 18px; color:#fff; font:700 clamp(2.7rem,5vw,5.6rem)/.94 var(--font-title); letter-spacing:-.055em; }
.authStoryCopy p { max-width:620px; color:#c1bdce; font-size:1.05rem; line-height:1.7; }
.authStoryFoot { display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }
.authStoryFoot span { padding:8px 11px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.055); color:#d4d0df; font-size:.72rem; font-weight:700; }

body.authPage.ui-refresh .authCard {
  width: 100%;
  max-width: none;
  margin: auto 0;
  padding: clamp(26px,4vw,46px);
  border-radius: 28px;
  background: rgba(28,25,48,.94);
}

body.authPage.ui-refresh .authHead { text-align:left; }
body.authPage.ui-refresh .authHead h1 { font-size:clamp(2.15rem,4vw,3.35rem); }
body.authPage.ui-refresh .authHead p { max-width:48ch; }
body.authPage.ui-refresh .authForm { gap:9px; }
body.authPage.ui-refresh .authModeRow { padding:5px; border:1px solid var(--ui-line); border-radius:16px; background:#151326; }
body.authPage.ui-refresh .authModeRow .btn { flex:1; }
body.authPage.ui-refresh .roleGrid { gap:10px; }
body.authPage.ui-refresh .roleOpt { min-height:120px; margin:0; padding:16px; display:block; border-radius:16px; background:#151326; }
body.authPage.ui-refresh .roleOpt.active { border-color:rgba(101,213,233,.5); background:rgba(101,213,233,.08); box-shadow:0 0 0 3px rgba(101,213,233,.08); }
body.authPage.ui-refresh .authFooter { padding-top:18px; border-top:1px solid var(--ui-line); }

.launcher-refresh .authStory { min-height:520px; }
.launcher-refresh .authCard { align-self:center; }

@media (max-width: 1050px) {
  body.ui-refresh .appShell { grid-template-columns: 230px minmax(0,1fr); }
  body.authPage.ui-refresh .authShell { grid-template-columns: minmax(300px,.85fr) minmax(390px,1.15fr); }
  .teacher-workspace #manageBlock { grid-template-columns:1fr; }
  .teacher-workspace #manageBlock > .card:nth-child(n) { grid-column:auto; }
}

@media (max-width: 820px) {
  body.ui-refresh .appShell { grid-template-columns:minmax(0,1fr); }
  body.ui-refresh .main { padding: 76px 13px 20px; }
  body.ui-refresh .sidebar { width:min(320px,86vw); }
  .workspaceHero { min-height:230px; align-items:flex-start; flex-direction:column; }
  .workspaceHeroMark { width:70px; height:70px; flex-basis:70px; }
  .student-utility-grid,
  .codes-dashboard,
  .parent-dashboard-grid,
  .account-dashboard { grid-template-columns:1fr; }
  .codes-dashboard > *,
  .parent-dashboard-grid > *,
  .account-dashboard > * { grid-column:auto !important; }
  body.authPage.ui-refresh .authShell { grid-template-columns:1fr; padding:12px; }
  .authStory { min-height:370px; padding:34px 26px; }
  .authStoryCopy h2 { font-size:clamp(2.5rem,11vw,4.3rem); }
  .authStoryFoot { display:none; }
  body.authPage.ui-refresh .authCard { margin:0; }
}

@media (max-width: 560px) {
  body.ui-refresh .main { padding-inline:10px; }
  .workspaceHero { padding:25px 21px; border-radius:23px; }
  .workspaceHeroActions { width:100%; justify-content:stretch; }
  .workspaceHeroActions .btn { flex:1; }
  body.ui-refresh .card.pad,
  body.ui-refresh .card.cardPad,
  body.ui-refresh .card:not(.authCard) { padding:17px; border-radius:18px; }
  .parent-dashboard-grid,
  .account-dashboard { gap:12px !important; }
  body.authPage.ui-refresh .authCard { padding:24px 19px; border-radius:22px; }
  .authStory { min-height:320px; border-radius:23px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-refresh *, body.ui-refresh *::before, body.ui-refresh *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}