/* Portal-only presentation. Individual applications keep their own styles. */
:root {
    color-scheme: light;
    --canvas: #f2f6fc; --surface: #ffffff; --glass: #ffffffbd; --glass-strong: #ffffffe6;
    --ink: #17253e; --muted: #52657f; --line: #d9e3f0; --accent: #0878b2;
    --accent-hover: #075f91; --accent-soft: #e5f2fc; --secondary: #6255b8;
    --shadow: 0 18px 60px -30px #29487935, 0 4px 14px #28477407;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100svh; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; isolation: isolate; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .75; }
a { color: inherit; }
svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
img { display: block; max-width: 100%; height: auto; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; padding: 12px 20px; background: var(--surface); z-index: 20; transform: translateY(-160%); border-radius: 12px; }
.skip-link:focus { transform: translateY(0); }

/* Fluid aurora, with a CSS fallback when WebGL is unavailable. */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 14% 12%, #dfeaff, transparent 58%), radial-gradient(ellipse at 86% 70%, #ece4fb, transparent 60%), #f2f6fc; }
.ambient-orb { position: absolute; width: 75vw; height: 75vw; max-width: 1100px; max-height: 1100px; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; animation: aurora-drift 26s ease-in-out infinite alternate; }
.orb-sky { top: -45%; left: -25%; background: radial-gradient(circle, #a6d4fb, transparent 65%); }
.orb-violet { bottom: -55%; right: -24%; background: radial-gradient(circle, #d4bafa, transparent 65%); animation-delay: -11s; animation-duration: 32s; }
.orb-mint { top: 20%; left: 33%; background: radial-gradient(circle, #bcebe6, transparent 65%); animation-delay: -19s; animation-duration: 29s; }
.ambient-canvas { width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.ambient.has-shader .ambient-canvas { opacity: 1; }
.ambient.has-shader .ambient-orb { display: none; }
.ambient-grain { position: absolute; inset: 0; background-image: radial-gradient(#7485aa16 .7px, transparent .7px); background-size: 5px 5px; opacity: .22; }
.ambient[data-paused] .ambient-orb { animation-play-state: paused; }
.page-frame { width: min(1240px, 100%); min-height: 100svh; margin: auto; padding: 26px 40px 15px; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; animation: portal-enter .4s var(--ease) both; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; padding: 10px 15px 10px 10px; text-decoration: none; background: var(--glass); border: 1px solid #ffffffc9; border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.wordmark-copy strong { display: block; font-size: 18px; font-weight: 750; letter-spacing: -.5px; line-height: 1.25; }
.wordmark-copy small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; letter-spacing: .35px; }
.wordmark-light { font-weight: 500; }
.wordmark-dot { color: var(--accent); }
.wordmark-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #6554c0, #168cc1); color: #fff; box-shadow: 0 4px 12px #6475bd26; }
.wordmark-icon svg { width: 21px; height: 21px; }
.site-label { font-size: 10px; font-weight: 650; letter-spacing: 1.1px; color: var(--muted); background: var(--glass); padding: 11px 15px; border: 1px solid #ffffffa3; border-radius: 30px; backdrop-filter: blur(12px); }
main { flex: 1; }
.view-login main { display: grid; place-items: center; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; margin-top: 30px; min-height: 44px; }
.motion-toggle { display: inline-flex; gap: 8px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); padding: 10px; min-height: 44px; font-size: 11px; border-radius: 10px; }
.motion-toggle:hover { background: var(--glass); }
.motion-indicator { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-toggle[aria-pressed="true"] .motion-indicator { border: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }

/* The entrance remains usable while its short reveal is running. */
.login-shell { width: min(520px, 100%); margin: 0 auto; text-align: center; padding: 5px 0; }
.welcome-panel { animation: portal-enter .5s var(--ease) .04s both; }
.brand-plate { width: fit-content; max-width: 285px; margin: 0 auto 19px; padding: 10px 18px; border-radius: 15px; background: #ffffffec; border: 1px solid #fff; box-shadow: 0 5px 20px #43578408; }
.brand-plate img { width: 240px; height: 46px; object-fit: contain; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); padding: 7px 12px; background: var(--glass); border: 1px solid var(--line); border-radius: 30px; }
.tiny-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.welcome-panel h1 { font-size: clamp(36px, 4vw, 49px); line-height: 1.08; letter-spacing: -1.9px; font-weight: 760; margin: 17px 0 12px; }
.welcome-panel h1 span, .dashboard-welcome h1 span { color: var(--accent); }
.welcome-panel > p { max-width: 400px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.65; }
.login-panel { margin-top: 26px; padding: 27px 30px 24px; text-align: left; background: var(--glass-strong); border: 1px solid #fff; border-radius: 25px; box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); animation: portal-enter .48s var(--ease) .12s both; transition: transform .2s, box-shadow .2s; }
.login-audience { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; }
.login-audience svg { width: 16px; height: 16px; color: var(--accent); }
.login-form-wrap h2 { margin: 11px 0 7px; font-size: 25px; font-weight: 700; letter-spacing: -.8px; }
.form-intro { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
label { display: block; font-weight: 650; font-size: 12px; margin-bottom: 8px; }
.input-wrap { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; padding: 0 15px; min-height: 54px; background: var(--surface); transition: border-color .18s, box-shadow .18s; }
.input-wrap > svg { width: 18px; height: 18px; color: var(--muted); }
.input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-wrap input { width: 100%; min-width: 0; padding: 15px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.input-wrap input:focus-visible { outline: 0; }
.input-wrap input::placeholder { color: var(--muted); opacity: .8; }
.password-toggle { border: 0; background: transparent; color: var(--muted); border-radius: 9px; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; }
.password-toggle svg { width: 19px; height: 19px; }
.input-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 11px 0 19px; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 18px; gap: 16px; background: linear-gradient(115deg, var(--accent), var(--accent-hover)); color: #fff; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 18px -9px #0878b266; transition: transform .18s var(--ease), box-shadow .18s, filter .18s; }
.primary-button svg { width: 20px; height: 20px; transition: transform .2s; }
.primary-button:hover { filter: brightness(1.08); box-shadow: 0 10px 25px -9px #0878b266; }
.primary-button:hover svg { transform: translateX(3px); }
.primary-button:active { transform: scale(.985); }
.is-submitting .login-panel { transform: scale(.99); }
.loading-note { color: var(--muted); font-size: 12px; }
.form-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 21px; color: var(--muted); font-size: 11px; }
.form-bottom svg { width: 15px; height: 15px; }
.error-notice { background: #fff0f0; color: #981e2a; border: 1px solid #f0c7ca; padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; }
.mini-apps { display: flex; align-items: center; justify-content: center; padding-top: 21px; animation: portal-enter .45s var(--ease) .22s both; }
.mini-app { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 2px solid #fff; transform: rotate(-8deg); }
.mini-app + .mini-app { margin-left: -6px; transform: rotate(7deg); }
.mini-app svg { width: 17px; height: 17px; }
.mini-app-caption { color: var(--muted); font-size: 11px; margin-left: 11px; }

/* Floating launcher: two personal apps today, an extensible grid tomorrow. */
.tablet-shell { max-width: 1080px; margin: 0 auto; padding: 4px 0 20px; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; animation: portal-enter .4s var(--ease) .04s both; }
.dashboard-brand { width: fit-content; padding: 10px 18px; background: #fffffff0; border: 1px solid #fff; border-radius: 16px; box-shadow: var(--shadow); }
.dashboard-brand img { width: auto; max-width: 230px; height: 40px; object-fit: contain; }
.tablet-nav { display: flex; align-items: center; gap: 5px; padding: 5px; background: var(--glass); border: 1px solid #ffffffb3; border-radius: 17px; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.rail-home, .rail-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 0; border-radius: 12px; font-size: 12px; text-decoration: none; font-weight: 600; }
.rail-home { color: var(--accent); background: var(--accent-soft); }
.rail-logout { color: var(--muted); background: transparent; }
.rail-logout:hover { background: var(--surface); color: var(--ink); }
.rail-home svg, .rail-logout svg { width: 18px; height: 18px; }
.dashboard-welcome { text-align: center; margin: 52px auto 35px; max-width: 750px; animation: portal-enter .5s var(--ease) .08s both; }
.dashboard-welcome h1 { font-size: clamp(32px, 4vw, 49px); line-height: 1.13; font-weight: 750; letter-spacing: -1.8px; margin: 18px 0 13px; overflow-wrap: anywhere; }
.dashboard-welcome p { font-size: 14px; color: var(--muted); margin: 0; }
.student-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 19px; color: var(--muted); font-size: 11px; }
.student-chip svg { width: 15px; height: 15px; }
.student-chip strong { color: var(--ink); font-size: 12px; font-weight: 650; padding: 3px 8px; background: var(--glass); border: 1px solid var(--line); border-radius: 7px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; max-width: 1000px; margin: 0 auto 18px; animation: portal-enter .4s var(--ease) .1s both; }
.section-heading h2 { font-size: 14px; font-weight: 650; margin: 0; }
.section-heading > span { color: var(--muted); font-size: 11px; border: 1px solid var(--line); background: var(--glass); border-radius: 20px; padding: 5px 10px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 235px)); justify-content: center; gap: 20px; }
.app-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--glass-strong); border: 1px solid #fffffff0; border-radius: 23px; padding: 27px 21px 21px; min-height: 260px; text-decoration: none; box-shadow: 0 6px 25px #3c507d08; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .23s var(--ease), border-color .2s, box-shadow .23s; animation: app-enter .46s var(--ease) var(--entry-delay, 120ms) backwards; }
.app-card:hover { transform: translateY(-7px); border-color: var(--accent); box-shadow: 0 18px 38px -15px #36649b30; }
.app-card:active { transform: translateY(-2px) scale(.98); }
.app-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 20px; box-shadow: 0 7px 13px -7px currentColor, inset 0 1px 0 #ffffffb3; border: 1px solid #ffffffbd; transition: transform .23s var(--ease); }
.app-icon svg { width: 33px; height: 33px; stroke-width: 1.65; }
.app-card:hover .app-icon { transform: scale(1.07) rotate(-3deg); }
.blue { color: #2864ab; background: linear-gradient(145deg, #edf5ff, #d7e7fc); }
.rose { color: #a82b50; background: linear-gradient(145deg, #fff1f5, #f7d9e4); }
.green { color: #21795e; background: linear-gradient(145deg, #effbf7, #d5eee4); }
.amber { color: #986721; background: linear-gradient(145deg, #fff9ec, #faeac7); }
.violet { color: #7050bc; background: linear-gradient(145deg, #f6f2ff, #e4dbfc); }
.app-tag { font-size: 9px; font-weight: 650; color: var(--muted); margin-bottom: 15px; letter-spacing: .2px; }
.app-card h3 { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; margin: 19px 0 8px; }
.app-card p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.app-open { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 11px; font-weight: 650; margin-top: auto; padding-top: 7px; }
.app-open svg { width: 16px; height: 16px; transition: transform .2s; }
.app-card:hover .app-open svg { transform: translateX(3px); }
.tablet-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); margin-top: 30px; font-size: 11px; animation: portal-enter .4s var(--ease) .25s both; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--glass); color: var(--accent); font-size: 12px; font-weight: 650; }
.text-button svg { width: 16px; height: 16px; }
.text-button:hover { background: var(--surface); }

.company-shell { max-width: 760px; margin: 30px auto; padding: 38px; text-align: center; border-radius: 27px; background: var(--glass-strong); border: 1px solid #fff; box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: portal-enter .5s var(--ease) both; }
.company-shell h1 { font-size: 33px; letter-spacing: -1px; line-height: 1.2; margin: 19px 0 16px; }
.company-shell > p { max-width: 540px; color: var(--muted); margin: 0 auto 25px; font-size: 14px; }
.company-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 0; padding: 0; margin: 25px 0; }
.company-option { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; padding: 30px 16px; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; cursor: pointer; margin: 0; }
.company-option img { height: 75px; max-width: 235px; object-fit: contain; }
.company-option strong { font-size: 13px; }
.company-option input { position: absolute; top: 15px; right: 15px; accent-color: var(--accent); width: 19px; height: 19px; }
.company-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.company-option:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.company-shell .primary-button { max-width: 360px; margin: auto; }
.company-shell .company-note { font-size: 11px; margin: 18px auto; }

.theme-humanizar { --accent: #b02243; --accent-hover: #901b36; --accent-soft: #f9e8ee; }
.theme-coordination { color-scheme: dark; --canvas: #0b1429; --surface: #19273f; --glass: #192942bb; --glass-strong: #192942eb; --ink: #eef4ff; --muted: #b3c4de; --line: #344b68; --accent: #8ad7f5; --accent-hover: #b4e6fa; --accent-soft: #203b55; --shadow: 0 18px 50px -25px #0000007a; }
.theme-coordination .ambient { background: radial-gradient(ellipse at 10% 15%, #183959, transparent 65%), radial-gradient(ellipse at 90% 70%, #27274f, transparent 65%), #0b1429; }
.theme-coordination .orb-sky { background: radial-gradient(circle, #285e89, transparent 65%); }
.theme-coordination .orb-violet { background: radial-gradient(circle, #563e84, transparent 65%); }
.theme-coordination .orb-mint { background: radial-gradient(circle, #255c65, transparent 65%); }
.theme-coordination .wordmark, .theme-coordination .site-label, .theme-coordination .tablet-nav, .theme-coordination .login-panel, .theme-coordination .app-card, .theme-coordination .company-shell { border-color: #46617a66; }
.theme-coordination .wordmark-icon { background: linear-gradient(135deg, #5b52a0, #237d9e); }
.theme-coordination .primary-button { color: #10243a; }
.theme-coordination .app-card:hover { border-color: var(--accent); box-shadow: 0 18px 38px -15px #00000075; }
.theme-coordination .error-notice { background: #462e36; color: #ffbbc3; border-color: #82505c; }

@keyframes portal-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes app-enter { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes aurora-drift { from { transform: translate3d(-5%, -5%, 0) scale(.94); } to { transform: translate3d(13%, 12%, 0) scale(1.15); } }
@media (min-width: 1400px) { .page-frame { padding-top: 32px; }.view-dashboard main { display: flex; align-items: center; justify-content: center; }.tablet-shell { width: 100%; } }
@media (max-width: 1000px) { .page-frame { padding: 24px; }.app-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 250px)); } }
@media (max-width: 720px) {
    .page-frame { padding: 18px 18px 12px; }.site-header { margin-bottom: 22px; }.wordmark { padding: 8px 11px 8px 8px; gap: 8px; border-radius: 15px; }.wordmark-copy strong { font-size: 16px; }.wordmark-icon { width: 35px; height: 35px; border-radius: 10px; }.site-label { font-size: 8px; letter-spacing: .6px; padding: 10px; }
    .welcome-panel h1 { font-size: 38px; letter-spacing: -1.5px; }.welcome-panel > p { font-size: 13px; }.login-panel { margin-top: 23px; padding: 25px; }.site-footer { flex-wrap: wrap; justify-content: center; gap: 5px 15px; font-size: 10px; margin-top: 22px; }.site-footer > span:last-child { display: none; }.motion-toggle { font-size: 10px; }
    .dashboard-brand { padding: 9px 12px; border-radius: 13px; }.dashboard-brand img { max-width: 170px; height: 32px; }.tablet-nav { padding: 4px; border-radius: 14px; gap: 2px; }.rail-home, .rail-logout { padding: 10px; font-size: 11px; gap: 6px; }.dashboard-welcome { margin: 35px auto 28px; }.dashboard-welcome h1 { font-size: 33px; letter-spacing: -1px; }.dashboard-welcome p { font-size: 13px; }.student-chip { font-size: 10px; }
    .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.app-card { padding: 23px 15px 20px; border-radius: 20px; min-height: 250px; }.app-icon { width: 60px; height: 60px; border-radius: 18px; }.app-icon svg { width: 30px; height: 30px; }.app-card h3 { font-size: 17px; }.app-card p { font-size: 11px; }.app-open { font-size: 10px; gap: 6px; }.section-heading { margin-bottom: 16px; }.tablet-footer { margin-top: 22px; gap: 8px; }.company-shell { padding: 26px 20px; margin: 0; }.company-shell h1 { font-size: 29px; }.company-options { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 440px) {
    .page-frame { padding: 14px 16px 10px; }.site-header { margin-bottom: 18px; gap: 9px; }.wordmark-copy strong { font-size: 15px; }.site-label { padding: 9px 8px; font-size: 7px; }.brand-plate { margin-bottom: 14px; padding: 8px 15px; }.brand-plate img { width: 220px; height: 40px; }
    .welcome-panel h1 { font-size: 34px; margin-top: 14px; }.eyebrow { font-size: 9px; letter-spacing: 1.1px; }.welcome-panel > p { font-size: 12px; max-width: 310px; }.login-panel { margin-top: 20px; padding: 22px; border-radius: 22px; }.login-audience { display: none; }.login-form-wrap h2 { font-size: 24px; margin-top: 0; }.form-intro { font-size: 12px; margin-bottom: 18px; }.form-bottom { font-size: 10px; margin-top: 18px; padding-top: 14px; }.mini-apps { padding-top: 17px; }.mini-app-caption { font-size: 10px; }
    .dashboard-brand img { max-width: 142px; height: 28px; }.tablet-nav .rail-home span { display: none; }.dashboard-welcome h1 { font-size: 30px; }.dashboard-welcome { margin-top: 31px; }.app-card { padding: 20px 12px 18px; }.app-card h3 { font-size: 16px; }.app-icon { width: 58px; height: 58px; }.app-tag { font-size: 8px; }.app-open { font-size: 10px; }.app-open svg { width: 13px; height: 13px; }
}
@media (max-width: 340px) { .site-label { display: none; }.app-grid { grid-template-columns: 1fr; }.app-card { min-height: 230px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.ambient-orb { will-change: auto; } }