/* StudieVonk portal. Scoped to the enhanced shell; lesson-room layout stays intact. */ /* Keep the portal header clear; navigation remains available in the sidebar. */ :root .sv-portal-designed .sv-app-top > :is(.sv-icon-control, .sv-avatar) { display: none !important; } :root body.sv-app-mode > .shell:has(.sv-portal-designed) { width: 100% !important; max-width: none !important; margin: 0 !important; } :root #svMobileWorkspace.sv-portal-designed { --sv-design-ink: #26233e; --sv-design-muted: #716c84; --sv-design-line: #eae5f1; --sv-design-purple: #742bda; --sv-design-ease: cubic-bezier(.2,.8,.2,1); background: #f7f6fb; color: var(--sv-design-ink); } :root #svMobileWorkspace.sv-portal-designed :is(button,a) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :root #svMobileWorkspace.sv-portal-designed :is(button,a,input,textarea,select):focus-visible { outline: 3px solid #9870e2 !important; outline-offset: 4px; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) :is(button,a) { transition: background-color .18s, color .18s, border-color .18s, box-shadow .22s, transform .22s var(--sv-design-ease); } :root #svMobileWorkspace.sv-portal-designed .sv-design-location { display: none; } @media (min-width:761px) { :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) { display: grid; grid-template-columns: 238px minmax(0,1fr); min-height: 100dvh; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-side { position: sticky; top: 0; width: 238px; height: 100dvh; min-height: 0; box-sizing: border-box; padding: 29px 17px 21px; border-right: 1px solid var(--sv-design-line); background: #fff; overflow-y: auto; scrollbar-width: thin; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-brand { margin: 0 7px 29px; padding: 0; gap: 10px; flex-shrink: 0; text-decoration: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-brand b { display: block; color: #28233f; font-size: 21px; letter-spacing: -.7px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-brand .sv-spark { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; box-shadow: 0 5px 13px #743ad32e; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-brand small { font-size: 10px; color: #81758f; } :root #svMobileWorkspace.sv-portal-designed .sv-side-label { display: block; margin: 0 14px 12px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: #7e6e8d; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav { display: grid; gap: 5px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button { position: relative; min-height: 44px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; color: #716980; background: transparent; font: 650 12px/1.35 Manrope,Arial,sans-serif; gap: 12px; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button span:not(.sv-nav-icon,.sv-nav-label,.sv-agenda-notification,.sv-unread-badge) { display: inline; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav .sv-nav-label { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav :is(.sv-agenda-notification,.sv-unread-badge) { display: inline-flex; align-items: center; justify-content: center; position: static; flex: 0 0 auto; box-sizing: border-box; min-width: 22px; height: 22px; margin: 0 0 0 auto; padding: 0 6px; border: 0; border-radius: 7px; background: #f0e8fc; color: #6b2ac4; font: 750 11px/1 Manrope,Arial,sans-serif; font-variant-numeric: tabular-nums; box-shadow: none; transform: none; pointer-events: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button.active :is(.sv-agenda-notification,.sv-unread-badge) { background: #742bda; color: #fff; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav :is(.sv-agenda-notification,.sv-unread-badge)[hidden] { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button:hover { background: #f7f3fc; color: #6b2ccb; transform: translateX(2px); } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button.active { color: #742ad4; background: #f0e8fc; border-color: #e9dbfb; box-shadow: 0 3px 7px #60309906; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button.active:before { content: ''; position: absolute; width: 3px; height: 18px; top: calc(50% - 9px); left: -1px; border-radius: 0 3px 3px 0; background: #8c45e5; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav-icon { width: 18px; height: 18px; display: grid; place-items: center; color: inherit; } :root #svMobileWorkspace.sv-portal-designed .sv-nav-icon svg { width: 18px; height: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-help { display: block; border-top: 1px solid #efebf4; padding-top: 10px; margin-top: 15px; margin-bottom: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user { display: flex; min-height: 63px; flex-shrink: 0; gap: 10px; padding: 12px; border: 1px solid #ece5f5; border-radius: 14px; background: #f8f5fc; box-shadow: none; margin-top: auto; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user .sv-avatar { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user b { font-size: 11px; color: #493655; max-width: 137px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user > div { display: block; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user small { color: #7a6d88; font-size: 10px; } :root #svMobileWorkspace.sv-portal-designed .sv-signout { display: flex; align-items: center; width: auto; min-height: 36px; flex-shrink: 0; font-size: 11px; gap: 10px; margin: 7px 0 0; padding: 8px 14px; color: #85778f; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-main { width: 100%; min-width: 0; padding: 0 clamp(25px,3.1vw,64px) 44px; box-sizing: border-box; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-app-top { height: 81px; padding: 0; max-width: 1220px; margin: 0 auto; border-bottom: 1px solid #eae5f0; gap: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-location { display: flex; align-items: center; gap: 13px; margin-right: auto; font-size: 11px; color: #7d6e89; } :root #svMobileWorkspace.sv-portal-designed .sv-design-location i { font-style: normal; color: #c8bfd3; } :root #svMobileWorkspace.sv-portal-designed .sv-design-location b { font-weight: 700; color: #655673; } :root #svMobileWorkspace.sv-portal-designed .sv-app-top .sv-icon-control { width: 36px; height: 36px; border-radius: 12px; border-color: #e9e3ef; color: #8a789b; } :root #svMobileWorkspace.sv-portal-designed .sv-app-top .sv-icon-control svg { width: 18px; height: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-app-top .sv-avatar { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-app-content { width: 100%; max-width: 1220px; margin: 28px auto 0; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-card { border-color: var(--sv-design-line); box-shadow: 0 4px 16px #3c275503; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-view-head h1 { font-size: 30px; letter-spacing: -1.2px; color: var(--sv-design-ink); } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-view-head p { font-size: 13px; line-height: 1.7; color: var(--sv-design-muted); } } /* Overview structure is rebuilt with the original, already bound DOM nodes. */ :root #svMobileWorkspace.sv-portal-designed .sv-design-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: #2a2341; font-size: clamp(26px,2.35vw,35px) !important; font-weight: 800; letter-spacing: -1.3px; line-height: 1.25; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro h1 .sv-greeting-spark { position: static; display: inline-block; width: auto; height: auto; color: #b28add; font-size: .8em !important; animation: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro p { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #70637d; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro .sv-design-date { display: flex; align-items: center; flex-shrink: 0; gap: 8px; margin: 0; padding: 9px 12px; border: 1px solid #eae3f1; border-radius: 10px; background: #ffffffa6; font-size: 10px; font-weight: 650; color: #796687; text-transform: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-date svg { width: 16px; height: 16px; color: #a186b7; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(285px,1fr); grid-template-areas: 'welcome balance' 'lessons prep' 'shortcuts prep'; grid-template-rows: auto auto 1fr; align-items: start; gap: 22px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board > * { min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome { grid-area: welcome; isolation: isolate; display: flex; align-items: center; min-height: 238px; height: 100%; padding: 27px 30px; border: 0; border-radius: 22px; background: linear-gradient(112deg,#6321c7 0%,#8226db 49%,#6664e7 82%,#3f86ed 100%); box-shadow: 0 9px 24px #6b37bd19; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome:before { content: ''; position: absolute; inset: -110% -27% auto auto; width: 430px; height: 480px; border: 1px solid #ffffff14; border-radius: 50%; pointer-events: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-hero-copy { position: relative; z-index: 2; width: 70%; min-width: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: #eee0ff; } :root #svMobileWorkspace.sv-portal-designed .sv-design-eyebrow:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #e0c4ff; box-shadow: 0 0 0 4px #ffffff0d; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-hero-title { position: relative; z-index: 1; margin: 10px 0 0; font-size: clamp(27px,2.2vw,34px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #fff; overflow-wrap: anywhere; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome p { color: #f2e4ff; font-size: 12px; line-height: 1.6; margin: 10px 0 13px; max-width: 100%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher { display: flex; align-items: center; gap: 8px; color: #f6ecff; font-size: 11px; font-weight: 650; margin-bottom: 17px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid #ffffff50; border-radius: 9px; background: #fff2; font-size: 9px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-light-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 17px; gap: 14px; border-radius: 11px; background: #fff; color: #6d2ab7; box-shadow: 0 3px 8px #2e126122; font: 800 12px/1.4 Manrope,Arial,sans-serif; } :root #svMobileWorkspace.sv-portal-designed .sv-light-btn svg { width: 17px; height: 17px; transition: transform .22s var(--sv-design-ease); } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art { position: absolute; z-index: 0; right: -2px; top: 50%; width: 40%; max-width: 243px; height: auto; transform: translateY(-50%); pointer-events: none; overflow: visible; } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art g { transform-box: fill-box; transform-origin: center; transition: translate .6s var(--sv-design-ease); } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card { grid-area: balance; position: relative; display: block; min-height: 238px; height: 100%; padding: 25px 26px; overflow: hidden; border: 1px solid #e8e0f2; border-radius: 22px; background: linear-gradient(140deg,#fff 25%,#fbf7ff); box-shadow: 0 4px 16px #3c275503; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card:before { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card:after { content: '✦'; position: absolute; right: -19px; top: auto; bottom: -24px; color: #eee5fa; font-size: 133px; line-height: 1; pointer-events: none; transform: rotate(12deg); } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy { position: relative; z-index: 1; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-icon { position: absolute; top: 22px; right: 24px; width: 39px; height: 39px; border-radius: 12px; background: #f1eafb; color: #9863d5; border: 1px solid #eaddf7; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-icon:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-icon svg { width: 23px; height: 23px; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy .sv-balance-eyebrow { margin: 0 45px 7px 0 !important; color: #7f6594 !important; font-size: 9px !important; letter-spacing: 1px; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy h3 { color: #4a355e; font-size: 16px; font-weight: 750; letter-spacing: -.4px; margin: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount { display: flex; align-items: baseline; gap: 9px; margin: 12px 0 0; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount strong { font-size: 49px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: #7b3bce; background: none; -webkit-text-fill-color: currentColor; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount span { font-size: 12px; color: #7e6a8f; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy .sv-balance-note { margin: 10px 0 0 !important; max-width: 235px; color: #73607f !important; font-size: 11px !important; line-height: 1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px; gap: 12px; color: #7838bd; font-size: 11px; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lessons { grid-area: lessons; min-height: 0; padding: 23px 25px; border-radius: 21px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title { padding-bottom: 18px; border-color: #f0eaf5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title h2 { font-size: 16px; color: #493455; letter-spacing: -.45px; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title button { min-height: 32px; font-size: 11px; color: #8653ad; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-row { gap: 13px; padding: 20px 0 2px; align-items: center; flex-wrap: nowrap; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-row + .sv-lesson-row { padding-top: 20px; margin-top: 16px; border-top: 1px solid #f0eaf5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-date-block { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 45px; height: 52px; flex: 0 0 45px; border-radius: 12px; background: #f4edfc; color: #9557ca; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-date-block b { font-size: 19px; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-date-block small { font-size: 8px; text-transform: uppercase; letter-spacing: .8px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-student { font-size: 14px; color: #4c3659; font-weight: 800; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-subject { margin-top: 4px; font-size: 12px; color: #8b55ad; font-weight: 700; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-time { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; color: #786584; font-size: 11px; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-secondary-action { flex: 0 0 auto; min-height: 38px; margin-left: auto; padding: 9px 11px; border: 1px solid #eadcf5; border-radius: 10px; background: #fbf8ff; color: #77389f; font-size: 10px; box-shadow: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-prep { grid-area: prep; position: relative; min-height: 0; padding: 24px; border-radius: 21px; background: #fff; overflow: hidden; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-prep:after { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-kicker { font-size: 8px; font-weight: 800; letter-spacing: .9px; color: #85539f; margin: 0 0 8px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-focus-header h3 { color: #4c3559; font-size: 16px; letter-spacing: -.45px; margin: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-focus-header small { display: block; font-size: 10px; line-height: 1.6; color: #796487; margin-top: 6px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-score { flex-shrink: 0; padding: 6px 8px; background: #f2e9fc; color: #8444ae; border-radius: 8px; font-size: 9px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .complete .sv-prep-score { background: #eaf7f0; color: #368163; } :root #svMobileWorkspace.sv-portal-designed .sv-design-prep-progress { height: 4px; width: 100%; border-radius: 99px; margin: 20px 0 10px; background: #f1eaf7; overflow: hidden; } :root #svMobileWorkspace.sv-portal-designed .sv-design-prep-progress:after { content: ''; display: block; width: var(--sv-prep-progress,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#bc8ae3,#8c5ad1); } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 5px; min-height: 62px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task > span { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border: 1.5px solid #dfd1eb; border-radius: 6px; background: #fff; color: #fff; font-size: 12px; line-height: 1; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task b { font-size: 12px; font-weight: 750; color: #665071; text-decoration: none; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task small { font-size: 10px; color: #82708f; line-height: 1.5; margin-top: 3px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task.done > span { background: #aa79cf; border-color: #aa79cf; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task.done b { color: #766380; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 41px; margin-top: 14px; padding: 10px 12px; border: 1px solid #e9dcf4; border-radius: 11px; background: #f8f1fd; color: #8141ab; font: 750 10px/1.5 Manrope,Arial,sans-serif; cursor: pointer; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcuts { grid-area: shortcuts; padding: 0 2px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcuts h2 { margin: 0 0 13px; color: #6e567e; font-size: 12px; font-weight: 800; letter-spacing: -.1px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; min-width: 0; min-height: 125px; padding: 17px 15px; border: 1px solid #e9e0f1; border-radius: 17px; background: #fff; color: #7b5d8c; text-align: left; font-family: Manrope,Arial,sans-serif; cursor: pointer; box-shadow: 0 3px 10px #67438602; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #f2e9fc; color: #a469ce; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-icon svg { width: 18px; height: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut:nth-child(2) .sv-design-shortcut-icon { background: #fcecf4; color: #cc8aab; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut:nth-child(3) .sv-design-shortcut-icon { background: #eaf1ff; color: #8ba5d9; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut b { display: block; color: #594066; font-size: 12px; font-weight: 800; line-height: 1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut small { display: block; margin-top: 4px; color: #82668f; font-size: 10px; font-weight: 600; line-height: 1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut > svg { position: absolute; width: 15px; height: 15px; top: 24px; right: 14px; color: #9a7aaf; transition: transform .22s var(--sv-design-ease); } @media (hover:hover) and (prefers-reduced-motion:no-preference) { :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-light-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px #2d116b2b; } :root #svMobileWorkspace.sv-portal-designed .sv-light-btn:hover svg, :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut:hover > svg { transform: translateX(3px); } :root #svMobileWorkspace.sv-portal-designed .sv-welcome:has(.sv-light-btn:hover) .sv-design-book-front { translate: -2px -3px; } :root #svMobileWorkspace.sv-portal-designed .sv-welcome:has(.sv-light-btn:hover) .sv-design-book-back { translate: 2px -1px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut:hover { transform: translateY(-3px); border-color: #d5b6eb; box-shadow: 0 7px 20px #6231850b; } } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task:hover { background: #faf6fd; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board :is(.sv-prep-open,.sv-design-secondary-action):hover { background: #f2e8fb; border-color: #d9bfe9; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-link:hover { color: #6021ac; } @media (min-width:761px) and (max-width:1100px) { :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) { grid-template-columns: 210px minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-side { width: 210px; padding-left: 12px; padding-right: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board { grid-template-columns: minmax(0,1fr) minmax(255px,.85fr); gap: 16px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro .sv-design-date { display: none; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome { padding: 23px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-hero-copy { width: 100%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art { opacity: .18; width: 44%; right: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board :is(.sv-lessons,.sv-lesson-prep,.sv-balance-card) { padding: 21px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-row { flex-wrap: wrap; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-secondary-action { margin-left: 58px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-grid { grid-template-columns: 1fr; gap: 8px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut { flex-direction: row; align-items: center; min-height: 65px; padding: 13px; gap: 12px; } } @media (min-width:761px) and (max-width:950px) { :root #svMobileWorkspace.sv-portal-designed .sv-design-board { grid-template-columns: minmax(0,1fr); grid-template-areas: 'welcome' 'balance' 'lessons' 'prep' 'shortcuts'; grid-template-rows: auto; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome { min-height: 240px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-hero-copy { width: 70%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art { width: 38%; opacity: .75; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut { flex-direction: column; align-items: flex-start; min-height: 120px; } } @media (max-width:760px) { :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-intro { display: block; margin: 5px 2px 22px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-intro h1 { font-size: 27px !important; letter-spacing: -1px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-intro p { font-size: 12px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-intro .sv-design-date { display: none; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: 'welcome' 'balance' 'lessons' 'prep' 'shortcuts'; gap: 17px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-welcome { min-height: 244px !important; padding: 25px !important; border-radius: 22px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-hero-copy { width: 82%; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-study-art { width: 37%; opacity: .6; right: -16px; top: 70%; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-design-hero-title { font-size: 29px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-welcome p { font-size: 12px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-light-btn { min-height: 46px !important; font-size: 11px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board :is(.sv-lessons,.sv-lesson-prep,.sv-balance-card) { padding: 22px !important; border-radius: 20px !important; min-height: 0 !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-balance-card { display: block !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'eyebrow link' 'amount link' 'note note'; gap: 4px 8px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy h3, :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-balance-icon { display: none !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy .sv-balance-eyebrow { grid-area: eyebrow; margin: 0 0 4px !important; font-size: 8px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy .sv-balance-amount { grid-area: amount; margin: 0 !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy .sv-balance-link { grid-area: link; align-self: center; min-height: 44px; margin: 0; font-size: 10px; gap: 7px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy .sv-balance-note { grid-area: note; max-width: none; margin-top: 9px !important; font-size: 10px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-balance-icon { width: 42px !important; height: 42px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-balance-icon svg { width: 25px !important; height: 25px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-balance-amount strong { font-size: 42px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-lesson-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; padding-top: 18px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-date-block { width: 45px !important; height: 52px !important; flex-basis: 45px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-lesson-row .sv-list-copy { flex: 1; min-width: 140px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-lesson-row .sv-lesson-student { font-size: 13px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-lesson-subject { font-size: 11px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-lesson-time { font-size: 10px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-design-secondary-action { margin-left: 57px !important; min-height: 44px !important; width: calc(100% - 57px); font-size: 10px !important; justify-content: center; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task { margin: 0 !important; min-height: 64px !important; padding: 12px 4px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task b { font-size: 11px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task small { font-size: 10px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task > span { width: 20px !important; height: 20px !important; flex-basis: 20px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-prep-open { min-height: 46px !important; font-size: 11px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-design-shortcuts { padding: 5px 0; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut-grid { grid-template-columns: 1fr; gap: 10px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut { min-height: 74px; flex-direction: row; align-items: center; padding: 17px; gap: 15px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut b { font-size: 12px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut small { font-size: 10px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut > svg { top: calc(50% - 8px); right: 20px; } } @media (prefers-reduced-motion:reduce) { :root #svMobileWorkspace.sv-portal-designed *, :root #svMobileWorkspace.sv-portal-designed *:before, :root #svMobileWorkspace.sv-portal-designed *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button:hover { transform: none; } } /* Request planner: shared visual language, local calendar navigation, original form contract. */ :root #svMobileWorkspace.sv-portal-designed .sv-app-content:has(.sv-request-page-grid) { max-width:1840px!important;margin-top:36px; } :root #svMobileWorkspace.sv-portal-designed .sv-main:has(.sv-request-page-grid) .sv-app-top { max-width:1840px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-page-head { width:100%;max-width:none!important;margin:0 0 28px!important;align-items:flex-start!important; } :root #svMobileWorkspace.sv-portal-designed .sv-request-page-head h1 { font-size:38px!important;letter-spacing:-1.3px;margin:0 0 10px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-page-head .sv-view-kicker { font-size:11px;letter-spacing:1.4px;color:#795393;margin-bottom:10px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-page-head p { font-size:15px!important;color:#71657e!important;line-height:1.65;max-width:70ch; } :root #svMobileWorkspace.sv-portal-designed .sv-request-head-badge { display:none; } :root #svMobileWorkspace.sv-portal-designed .sv-request-page-grid { grid-template-columns:minmax(0,1fr) 340px;gap:26px; } :root #svMobileWorkspace.sv-portal-designed :is(.sv-request-form-card,.sv-request-side>*) { border:1px solid #e7e1ed;border-radius:22px;background:#fff;box-shadow:0 4px 6px #3c285004,0 14px 34px #3c285005;min-width:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-form-card { padding:32px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-scheduler { display:grid;grid-template-columns:minmax(310px,440px) minmax(0,1fr);gap:32px;align-items:start; } :root #svMobileWorkspace.sv-portal-designed :is(.sv-request-date-panel,.sv-request-time-panel) { min-width:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-time-panel { padding-left:30px;border-left:1px solid #eee8f3; } :root #svMobileWorkspace.sv-portal-designed .sv-request-step { grid-template-columns:36px minmax(0,1fr);gap:12px;margin:0 0 24px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-step>i { width:34px;height:34px;border-radius:11px;background:#f0e9fb;color:#743bb4;font-size:13px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-step b { font-size:18px;letter-spacing:-.3px;color:#342841; } :root #svMobileWorkspace.sv-portal-designed .sv-request-step p { font-size:13px;line-height:1.6;color:#7a6c85;margin-top:5px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-time-panel .sv-request-step.compact { padding-top:0;margin-top:0;border-top:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fields { grid-template-columns:minmax(0,1fr);gap:18px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fields label, :root #svMobileWorkspace.sv-portal-designed .sv-request-full { font-size:14px;color:#53425f;gap:10px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fields :is(input,select), :root #svMobileWorkspace.sv-portal-designed .sv-request-full textarea { font-size:15px;font-weight:550;color:#3d304c;background:#fcfbfe;border:1px solid #ded5e9;border-radius:12px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-full textarea { min-height:112px;padding:15px 17px;line-height:1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-request-full textarea::placeholder { color:#8a7f95;font-weight:400; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fields :is(input,select) { height:48px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fixed-duration { height:48px;background:#f6f1fc; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fixed-duration b { font-size:14px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-fixed-duration small { font-size:11px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar { border:1px solid #e8e0f0;border-radius:18px;background:#fff;overflow:hidden;padding:20px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-header { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-eyebrow { display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#877291;margin-bottom:6px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-month { font-size:20px;font-weight:750;letter-spacing:-.5px;color:#352541;margin:0;text-transform:capitalize; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-nav { display:flex;gap:7px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-nav button { display:grid;place-items:center;width:40px;height:40px;border:1px solid #e9e1f0;border-radius:11px;background:white;color:#715189;cursor:pointer; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-nav svg { width:18px;height:18px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-nav button:disabled { color:#c9bfce;background:#fcfbfd;cursor:default; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-weekdays, :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-week { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-weekdays { margin-bottom:8px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-weekdays span { text-align:center;font-size:11px;font-weight:650;color:#8a7a94;padding:6px 0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-grid { display:grid;gap:5px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day { position:relative;display:grid;place-items:center;min-width:0;width:100%;height:44px;border:1px solid transparent;border-radius:11px;background:transparent;color:#493651;font:650 14px Manrope,Arial,sans-serif;cursor:pointer; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day.is-today { border-color:#c8ace6;background:#faf6ff;color:#7037ac; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day:disabled { color:#c6bdcd;background:transparent;cursor:default; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day.is-outside:not(:disabled) { color:#8b709d;background:#faf7fd; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day.is-selected { background:#7135b9;color:#fff;border-color:#7135b9;box-shadow:0 5px 12px #7135b923; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-footer { margin-top:18px;padding-top:15px;border-top:1px solid #eee7f4; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-selected { display:block;font-size:13px;font-weight:700;color:#714495;line-height:1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-note { display:block;font-size:11px;line-height:1.6;color:#87748e;margin-top:4px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-date-fallback[hidden] { display:none!important; } :root #svMobileWorkspace.sv-portal-designed .sv-request-slots { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;max-height:280px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-slots button { height:48px;font-size:15px;font-weight:650;border-radius:12px;background:white;color:#5c456d;border-color:#e4d9ed; } :root #svMobileWorkspace.sv-portal-designed .sv-request-slots button.active { background:#7135b9;border-color:#7135b9;color:white;box-shadow:0 5px 12px #7135b91a; } :root #svMobileWorkspace.sv-portal-designed .sv-request-slots-state { min-height:148px;padding:24px;border:1px solid #eee7f4;border-radius:16px;background:#faf8fd;color:#7b6a87;font-size:14px;line-height:1.7;text-align:center; } :root #svMobileWorkspace.sv-portal-designed .sv-request-slots-state.error { background:#fff5f7;border-color:#f0ced8;color:#a03953; } :root #svMobileWorkspace.sv-portal-designed .sv-request-details { display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:28px;padding-top:26px;border-top:1px solid #eee7f4; } :root #svMobileWorkspace.sv-portal-designed .sv-request-details>.sv-request-step { grid-column:1/-1;border:0;padding:0;margin:0 0 2px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-full+.sv-request-full { margin-top:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit { margin-top:26px;padding:22px 0 0;border-top:1px solid #eee7f4;border-radius:0;background:transparent;color:#41304f;box-shadow:none; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit>div>span { font-size:10px;letter-spacing:1.2px;color:#897195;opacity:1; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit>div>b { font-size:17px;margin-top:5px;font-weight:750; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit>div>small { font-size:13px;line-height:1.6;color:#7b6b86;opacity:1;margin-top:5px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit button { min-height:50px;justify-content:center;padding:13px 23px;background:#7135b9;color:white;font-size:14px;border-radius:12px;box-shadow:0 5px 12px #7135b91a; } :root #svMobileWorkspace.sv-portal-designed .sv-request-side { gap:18px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher { display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 14px;text-align:left;padding:24px;background:#fff;align-items:center; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher:after { display:none; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher-label { grid-column:1/-1;font-size:10px;letter-spacing:1px;margin-bottom:20px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher-avatar { grid-column:1;grid-row:2/4;width:54px;height:54px;border:0;border-radius:17px;margin:0;font-size:20px;background:linear-gradient(135deg,#7135b9,#9a72d8);box-shadow:none; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher h2 { grid-column:2;grid-row:2;font-size:17px;line-height:1.4;overflow-wrap:anywhere; } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher>p { grid-column:2;grid-row:3;font-size:13px;margin:3px 0 0;color:#82708c; } :root #svMobileWorkspace.sv-portal-designed .sv-request-linked { grid-column:1/-1;margin-top:20px;padding:12px;border:0;background:#f2f9f5;border-radius:12px;grid-template-columns:26px minmax(0,1fr);gap:9px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-linked i { width:26px;height:26px;border-radius:8px;font-size:14px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-linked b { font-size:12px;color:#397455; } :root #svMobileWorkspace.sv-portal-designed .sv-request-linked small { font-size:11px;color:#688273;line-height:1.6; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending, :root #svMobileWorkspace.sv-portal-designed .sv-request-how { padding:24px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending header span, :root #svMobileWorkspace.sv-portal-designed .sv-request-how>span { font-size:10px;letter-spacing:1px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending header h3 { font-size:17px;color:#41334f; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending-row { grid-template-columns:36px minmax(0,1fr);gap:10px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending-row>em { grid-column:2;justify-self:start;font-size:10px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending-row>div>b { font-size:13px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-pending-row>div>small { font-size:11px;line-height:1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-request-empty-history { border:0;background:#faf8fc;padding:14px 12px;align-items:flex-start; } :root #svMobileWorkspace.sv-portal-designed .sv-request-empty-history>span { flex-shrink:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-empty-history b { font-size:12px;line-height:1.5; } :root #svMobileWorkspace.sv-portal-designed .sv-request-empty-history small { font-size:11px;line-height:1.5;margin-top:4px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-how { box-shadow:none;background:transparent;border-color:transparent; } :root #svMobileWorkspace.sv-portal-designed .sv-request-how p { font-size:13px;line-height:1.65;color:#7a6b86; } :root #svMobileWorkspace.sv-portal-designed .sv-request-how i { font-size:11px; } @media (hover:hover) { :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-day:not(:disabled):not(.is-selected):hover { background:#f1e8fb;color:#7135b9; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar-nav button:not(:disabled):hover { background:#f7f1fc;border-color:#ccb5e3; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit button:hover { background:#5c269e; } } @media (min-width:1201px) { :root #svMobileWorkspace.sv-portal-designed #svLinkedLessonRequestForm { display:grid;grid-template-columns:minmax(310px,410px) minmax(0,1fr);grid-template-areas:'day times' 'day details' 'submit submit';gap:26px 32px;align-items:start; } :root #svMobileWorkspace.sv-portal-designed .sv-request-scheduler { display:contents; } :root #svMobileWorkspace.sv-portal-designed .sv-request-date-panel { grid-area:day; } :root #svMobileWorkspace.sv-portal-designed .sv-request-time-panel { grid-area:times; } :root #svMobileWorkspace.sv-portal-designed .sv-request-details { grid-area:details;grid-template-columns:minmax(0,1fr);margin:0;padding:0 0 0 30px;border-top:0;border-left:1px solid #eee8f3;gap:15px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-submit { grid-area:submit;margin:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-full textarea { min-height:94px; } } @media (max-width:1700px) and (min-width:761px) { :root #svMobileWorkspace.sv-portal-designed .sv-request-page-grid { grid-template-columns:minmax(0,1fr);gap:22px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-side { grid-template-columns:repeat(2,minmax(0,1fr)); } :root #svMobileWorkspace.sv-portal-designed .sv-request-how { display:none; } } @media (max-width:1200px) and (min-width:761px) { :root #svMobileWorkspace.sv-portal-designed .sv-request-scheduler { grid-template-columns:minmax(0,1fr);gap:24px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-time-panel { border-left:0;padding-left:0; } :root #svMobileWorkspace.sv-portal-designed .sv-request-calendar { max-width:480px; } :root #svMobileWorkspace.sv-portal-designed .sv-request-details { grid-template-columns:minmax(0,1fr); } } @media (max-width:1100px) { :root #svMobileWorkspace.sv-portal-designed .sv-request-page-grid { grid-template-columns:minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed .sv-request-side { grid-template-columns:repeat(2,minmax(0,1fr)); } :root #svMobileWorkspace.sv-portal-designed .sv-request-teacher { grid-row:auto; } :root #svMobileWorkspace.sv-portal-designed .sv-request-how { display:none; } } @media (max-width:760px) { :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-app-content:has(.sv-request-page-grid) { margin-top:12px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-page-head h1 { font-size:29px!important; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-page-head p { font-size:14px!important; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-form-card { padding:20px 16px!important; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-scheduler, :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-details { grid-template-columns:minmax(0,1fr);gap:22px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-time-panel { padding-left:0;border-left:0; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar { padding:14px 9px;border-radius:14px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-header { padding-inline:4px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-month { font-size:18px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-nav button { width:36px;height:40px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-weekdays, :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-week { gap:1px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-day { font-size:13px;border-radius:9px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-calendar-footer { padding-inline:4px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-step { gap:10px;grid-template-columns:32px minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-step b { font-size:16px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-step p { font-size:12px; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-fields :is(input,select), :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-full textarea { font-size:16px!important; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-side { grid-template-columns:minmax(0,1fr)!important; } :root #svMobileWorkspace.sv-portal-designed.sv-mobile-app .sv-request-submit { gap:18px; } } /* Spacious workspace: a readable desktop scale without changing portal data or controls. */ @media (min-width: 761px) { :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) { grid-template-columns: 248px minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-side { width: 248px; padding: 32px 18px 22px; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-main { padding: 0 clamp(28px,2.5vw,56px) 56px; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-main:has(.sv-design-board) .sv-app-top { max-width: 2080px; height: 72px; border-color: #e6e2ed; } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) .sv-app-content:has(.sv-design-board) { max-width: 2080px; margin-top: 36px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-location { font-size: 13px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-brand { margin-bottom: 36px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-label { font-size: 10px; margin-bottom: 14px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav { gap: 6px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button { min-height: 48px; font-size: 14px; font-weight: 650; color: #635c75; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button.active { color: #6826c5; background: #eee6fb; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user { min-height: 70px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user b { font-size: 13px; } :root #svMobileWorkspace.sv-portal-designed .sv-side-user small, :root #svMobileWorkspace.sv-portal-designed .sv-signout { font-size: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro { margin-bottom: 30px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro h1 { font-size: clamp(32px,2.5vw,44px) !important; letter-spacing: -1.6px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro p { font-size: 15px; margin-top: 10px; color: #71677f; } :root #svMobileWorkspace.sv-portal-designed .sv-design-intro .sv-design-date { font-size: 12px; padding: 12px 16px; border-radius: 12px; color: #685875; background: #fff; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board { grid-template-columns: minmax(0,1.7fr) minmax(320px,1fr); gap: 26px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome { min-height: 294px; padding: 36px; border-radius: 24px; background: radial-gradient(ellipse at 95% 5%,#9b77ee66,transparent 52%),linear-gradient(115deg,#48218c,#7028c6 53%,#6966dc); box-shadow: 0 12px 32px #55239c14; } :root #svMobileWorkspace.sv-portal-designed .sv-design-hero-copy { width: 68%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-eyebrow { font-size: 11px; letter-spacing: 1.5px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-hero-title { font-size: clamp(30px,2.3vw,44px); line-height: 1.15; margin-top: 15px; max-width: 20ch; letter-spacing: -1.4px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome p { font-size: 15px; line-height: 1.65; max-width: 52ch; margin: 14px 0 22px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-light-btn { min-height: 48px; padding: 13px 20px; font-size: 14px; border-radius: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art { max-width: 320px; width: 35%; right: 16px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher { font-size: 14px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-teacher-avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 11px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board :is(.sv-lessons,.sv-lesson-prep,.sv-balance-card) { padding: 30px; border-radius: 24px; border: 1px solid #e7e2ee; box-shadow: 0 3px 5px #33234a02,0 12px 30px #33234a03; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card { min-height: 294px; background: linear-gradient(145deg,#fff 45%,#f6f0ff); } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-icon { top: 28px; right: 28px; width: 44px; height: 44px; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy .sv-balance-eyebrow { font-size: 11px !important; color: #72617e !important; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy h3 { font-size: 20px; margin-top: 10px; color: #382a49; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount { margin-top: 18px; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount strong { font-size: 62px; color: #6c34bb; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-amount span { font-size: 14px; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-copy .sv-balance-note { font-size: 14px !important; max-width: 38ch; } :root #svMobileWorkspace.sv-portal-designed .sv-balance-link { font-size: 14px; min-height: 44px; margin-top: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title { padding-bottom: 18px; align-items: center; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title h2, :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-focus-header h3 { font-size: 20px; color: #352b44; letter-spacing: -.5px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-section-title button { min-height: 44px; font-size: 13px; font-weight: 700; color: #7243a4; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-empty { padding: 32px 20px; font-size: 14px; line-height: 1.65; color: #73687f; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-empty b { color: #4d3e5e; font-size: 16px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-empty button { min-height: 44px; padding: 11px 18px; border-radius: 11px; font-size: 13px; background: #f2ebfc; color: #6d31b3; box-shadow: none; border: 1px solid #e6d8f7; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-kicker { font-size: 10px; letter-spacing: 1.3px; color: #786187; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-focus-header small { font-size: 13px; line-height: 1.65; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-score { font-size: 12px; padding: 8px 10px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-prep-progress { height: 5px; margin: 22px 0 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task { min-height: 76px; padding: 14px 10px; gap: 14px; border-radius: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task > span { width: 23px; height: 23px; flex-basis: 23px; border-radius: 7px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task b { font-size: 15px; color: #51405e; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task small { font-size: 12px; color: #7b6b85; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task.done { background: #f7f2fc; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-task.done > span { background: #8050b7; border-color: #8050b7; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-prep-open { min-height: 48px; margin-top: 20px; font-size: 13px; border-radius: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcuts { padding: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcuts h2 { font-size: 18px; color: #51405e; margin-bottom: 15px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-grid { gap: 16px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut { min-height: 146px; padding: 22px; border-radius: 20px; border-color: #e7e2ee; gap: 17px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-icon { width: 38px; height: 38px; border-radius: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut b { font-size: 15px; color: #45334f; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut small { font-size: 14px; color: #75637e; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut > svg { right: 22px; top: 29px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-student { font-size: 17px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-subject { font-size: 14px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-lesson-time { font-size: 13px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-secondary-action { min-height: 44px; font-size: 12px; } } @media (min-width: 1800px) { :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) { grid-template-columns: 272px minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-side { width: 272px; padding-inline: 22px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button { font-size: 15px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-welcome { padding: 42px; min-height: 320px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card { min-height: 320px; padding: 36px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-design-hero-title { font-size: 46px; } } @media (min-width: 761px) and (max-width: 1200px) { :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) { grid-template-columns: 220px minmax(0,1fr); } :root #svMobileWorkspace.sv-portal-designed:not(.room-mode) > .sv-side { width: 220px; padding-inline: 12px; } :root #svMobileWorkspace.sv-portal-designed .sv-side .sv-nav button { font-size: 13px; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board { gap: 20px; grid-template-columns: minmax(0,1fr); grid-template-areas: 'welcome' 'balance' 'lessons' 'prep' 'shortcuts'; } :root #svMobileWorkspace.sv-portal-designed .sv-design-board .sv-balance-card { min-height: 0; } :root #svMobileWorkspace.sv-portal-designed .sv-design-hero-copy { width: 72%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-study-art { opacity: .7; width: 30%; } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } :root #svMobileWorkspace.sv-portal-designed .sv-design-shortcut { padding: 18px; flex-direction: column; align-items: flex-start; } } @media (max-width: 760px) { :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-intro p { font-size: 14px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-section-title button { min-height: 44px; font-size: 12px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-focus-header small { font-size: 12px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-welcome { background: linear-gradient(115deg,#48218c,#7028c6 60%,#6966dc) !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-welcome p { font-size: 14px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-light-btn { font-size: 13px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task b { font-size: 14px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-task small { font-size: 12px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-board .sv-prep-open { font-size: 13px !important; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut b { font-size: 14px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-design-shortcut small { font-size: 12px; } :root #svMobileWorkspace.sv-mobile-app.sv-portal-designed .sv-balance-copy .sv-balance-note { font-size: 12px !important; } }