:root {
    color-scheme: light;
    --bg-top: #eafcff;
    --bg-mid: #cceeff;
    --bg-bottom: #9dd7f1;
    --ink: #11243a;
    --muted: #61768d;
    --panel: rgba(255, 255, 255, 0.78);
    --border: rgba(255, 255, 255, 0.78);
    --primary: #42c7ff;
    --primary-deep: #4c62ff;
    --violet: #9a68ff;
    --success: #2fd6b2;
    --warning: #ffbb45;
    --danger: #ff6b86;
    --level: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* Main classroom experience: only the orb and cloud are visible. */
body.orb-experience {
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.38) 25%, transparent 54%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 52%, var(--bg-bottom) 100%);
    touch-action: manipulation;
    user-select: none;
}

.experience {
    position: relative;
    width: 100vw;
    min-height: 100svh;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
}

.experience::before,
.experience::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
}

.experience::before {
    z-index: -8;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.88) 0 1.6%, transparent 1.8%),
        radial-gradient(circle at 74% 18%, rgba(255,255,255,.76) 0 1.2%, transparent 1.4%),
        radial-gradient(circle at 83% 62%, rgba(255,255,255,.62) 0 1.1%, transparent 1.3%),
        radial-gradient(circle at 28% 76%, rgba(255,255,255,.74) 0 1.4%, transparent 1.6%);
    filter: blur(1px);
    animation: skyDrift 28s linear infinite alternate;
}

.experience::after {
    z-index: -7;
    background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.28) 46%, transparent 70%);
    transform: translateX(-45%);
    animation: lightSweep 15s ease-in-out infinite;
}

.sky-glow {
    position: absolute;
    width: min(78vw, 980px);
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -5;
    background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(145,228,255,.36) 35%, rgba(116,171,255,.12) 60%, transparent 72%);
    filter: blur(18px);
    animation: skyGlow 5.5s ease-in-out infinite;
}

.cloud {
    position: absolute;
    width: clamp(220px, 28vw, 500px);
    height: clamp(82px, 11vw, 180px);
    opacity: .74;
    filter: drop-shadow(0 22px 30px rgba(79,139,182,.13));
    pointer-events: none;
}

.cloud i,
.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    display: block;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,249,255,.9));
}
.cloud::before { left: 12%; right: 12%; bottom: 5%; height: 56%; }
.cloud::after { left: 3%; bottom: 9%; width: 36%; aspect-ratio: 1; }
.cloud i:nth-child(1) { width: 42%; aspect-ratio: 1; left: 26%; bottom: 23%; }
.cloud i:nth-child(2) { width: 32%; aspect-ratio: 1; left: 51%; bottom: 12%; }
.cloud i:nth-child(3) { width: 26%; aspect-ratio: 1; left: 69%; bottom: 7%; }
.cloud i:nth-child(4) { width: 24%; aspect-ratio: 1; left: 11%; bottom: 22%; }
.cloud-back { z-index: -4; filter: blur(.2px) drop-shadow(0 20px 35px rgba(77,135,180,.12)); }
.cloud-front { z-index: 8; opacity: .88; filter: drop-shadow(0 20px 34px rgba(67,121,160,.15)); }
.cloud-one { top: 10%; left: -9%; animation: cloudFloatA 18s ease-in-out infinite alternate; }
.cloud-two { top: 14%; right: -12%; transform: scale(.82); animation: cloudFloatB 21s ease-in-out infinite alternate; }
.cloud-three { bottom: 10%; left: 2%; transform: scale(.66); opacity: .48; animation: cloudFloatC 24s ease-in-out infinite alternate; }
.cloud-four { bottom: -2%; left: -8%; transform: scale(1.05); animation: cloudFloatB 17s ease-in-out infinite alternate-reverse; }
.cloud-five { bottom: -4%; right: -10%; transform: scale(1.15); animation: cloudFloatA 20s ease-in-out infinite alternate-reverse; }

.cloud-halo {
    position: absolute;
    width: clamp(360px, 58vw, 840px);
    height: clamp(190px, 31vw, 440px);
    z-index: -1;
    transform: translateY(13%);
    filter: drop-shadow(0 34px 44px rgba(60,126,170,.17));
    animation: cloudBreathe 4.8s ease-in-out infinite;
}

.cloud-halo .puff,
.cloud-halo .cloud-base {
    position: absolute;
    display: block;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 27%, #fff 0 26%, #f6fcff 52%, #d8effa 100%);
}
.cloud-halo .cloud-base {
    left: 8%; right: 8%; bottom: 8%; height: 43%;
    border-radius: 999px;
    box-shadow: inset 0 -18px 36px rgba(120,181,213,.13);
}
.puff-1 { width: 33%; aspect-ratio: 1; left: 4%; bottom: 14%; }
.puff-2 { width: 38%; aspect-ratio: 1; left: 21%; bottom: 28%; }
.puff-3 { width: 43%; aspect-ratio: 1; left: 38%; bottom: 31%; }
.puff-4 { width: 34%; aspect-ratio: 1; right: 7%; bottom: 20%; }
.puff-5 { width: 25%; aspect-ratio: 1; left: 28%; bottom: 8%; }
.puff-6 { width: 28%; aspect-ratio: 1; right: 24%; bottom: 8%; }

.assistant-orb {
    position: relative;
    z-index: 5;
    width: clamp(180px, 25vw, 330px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: transparent;
    background: transparent;
    cursor: pointer;
    outline: none;
    transform: translateY(-8%);
    -webkit-touch-callout: none;
}
.assistant-orb:focus-visible::after {
    content: "";
    position: absolute;
    inset: -18px;
    border: 4px solid rgba(40,119,255,.78);
    border-radius: 50%;
}
.assistant-orb:active { transform: translateY(-8%) scale(.97); }

.orb-aura {
    position: absolute;
    inset: -28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,210,255,.34) 0%, rgba(116,102,255,.18) 36%, transparent 70%);
    filter: blur(22px);
    opacity: calc(.48 + var(--level) * .65);
    transform: scale(calc(1 + var(--level) * .28));
    transition: opacity .08s linear, transform .08s linear;
    animation: auraIdle 4s ease-in-out infinite;
}

.orb-shell {
    position: absolute;
    inset: 15%;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 25%, rgba(255,255,255,.98) 0 5%, rgba(190,245,255,.96) 12%, rgba(66,199,255,.95) 28%, rgba(81,104,255,.94) 58%, rgba(105,56,205,.97) 86%, #2f266f 100%);
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.55),
        inset -26px -30px 48px rgba(21,20,91,.38),
        0 18px 48px rgba(59,119,202,.35),
        0 0 70px rgba(81,190,255,.42);
    transform: scale(calc(1 + var(--level) * .09));
    transition: transform .06s linear, filter .3s ease;
}

.orb-liquid {
    position: absolute;
    width: 92%;
    aspect-ratio: 1;
    border-radius: 43% 57% 64% 36% / 43% 37% 63% 57%;
    mix-blend-mode: screen;
    filter: blur(9px);
}
.liquid-a {
    left: -18%; top: -9%;
    background: radial-gradient(circle at 50% 50%, rgba(117,255,247,.8), rgba(54,158,255,.08) 68%);
    animation: liquidSpin 8s linear infinite;
}
.liquid-b {
    right: -22%; bottom: -12%;
    background: radial-gradient(circle at 50% 50%, rgba(222,118,255,.72), rgba(80,55,255,.05) 69%);
    animation: liquidSpinReverse 10s linear infinite;
}
.orb-highlight {
    position: absolute;
    width: 36%; height: 20%;
    left: 18%; top: 13%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.88), rgba(255,255,255,.04) 72%);
    transform: rotate(-27deg);
    filter: blur(2px);
}
.orb-depth {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 52% 44%, transparent 0 48%, rgba(22,19,88,.15) 70%, rgba(20,17,73,.38) 100%);
}

.orb-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: .58;
}
.ring-a { inset: 5%; border: 2px solid rgba(255,255,255,.6); animation: ringPulse 3.4s ease-in-out infinite; }
.ring-b { inset: -4%; border: 1px solid rgba(67,166,255,.42); border-style: dashed; animation: ringRotate 15s linear infinite; }
.ring-c { inset: -13%; border: 1px solid rgba(138,100,255,.24); animation: ringRotateReverse 22s linear infinite; }

body.state-connecting .orb-shell { animation: connecting 1s ease-in-out infinite; }
body.state-connecting .ring-b { border-width: 3px; animation-duration: 2s; }
body.state-listening .orb-shell {
    filter: hue-rotate(-18deg) saturate(1.12);
    animation: listening 1.45s ease-in-out infinite;
}
body.state-thinking .orb-shell { animation: thinking .9s ease-in-out infinite alternate; }
body.state-thinking .ring-b { animation-duration: 1.2s; }
body.state-thinking .ring-c { animation-duration: 1.8s; }
body.state-speaking .orb-shell {
    filter: saturate(1.18) brightness(1.06);
    animation: speaking .72s ease-in-out infinite alternate;
}
body.state-speaking .cloud-halo { animation-duration: 2.2s; }
body.state-error .orb-shell {
    filter: hue-rotate(118deg) saturate(1.35);
    animation: errorPulse .8s ease-in-out 3;
}
body.state-off .assistant-orb { opacity: .72; }
body.state-off .orb-aura { opacity: .22; }

/* Separate setup and administration pages remain functional but are never shown on the classroom orb page. */
body.admin-page {
    min-height: 100vh;
    margin: 0;
    padding: 28px 16px 60px;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.92), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(163,224,255,.45), transparent 32%),
        linear-gradient(145deg, #eafaff 0%, #d4effc 52%, #c6e4f5 100%);
}
.admin-container { width: min(1120px, 100%); margin: 0 auto; }
.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; }
.admin-header h1 { margin: 0; letter-spacing: -.04em; }
.admin-header p { margin: 7px 0 0; color: var(--muted); }
.admin-card {
    padding: clamp(20px, 4vw, 34px);
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 28px 70px rgba(59,111,145,.17);
    backdrop-filter: blur(22px);
}
.admin-card h2 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: .86rem; font-weight: 760; }
.form-field small { color: var(--muted); line-height: 1.45; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    border: 1px solid rgba(85,133,164,.22);
    border-radius: 13px;
    padding: 12px 13px;
    color: var(--ink);
    background: rgba(255,255,255,.8);
    outline: none;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    border-color: rgba(48,154,230,.62);
    box-shadow: 0 0 0 4px rgba(48,154,230,.1);
}
.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.checkbox-row { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.checkbox-row input { width: 18px; height: 18px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.secondary-button, .primary-button {
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.secondary-button { border: 1px solid rgba(81,124,154,.24); background: rgba(255,255,255,.72); color: var(--ink); }
.secondary-button:hover { border-color: rgba(56,165,235,.5); transform: translateY(-1px); }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, #20b9ed, #665cf0); }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.alert { border-radius: 14px; padding: 13px 15px; margin-bottom: 18px; line-height: 1.5; }
.alert-success { background: rgba(47,214,178,.13); color: #086b57; border: 1px solid rgba(47,214,178,.3); }
.alert-error { background: rgba(255,107,134,.13); color: #9b2441; border: 1px solid rgba(255,107,134,.3); }
.login-card { width: min(470px, 100%); margin: 10vh auto 0; }
.code-note { padding: 13px 15px; border-radius: 13px; background: rgba(222,242,252,.8); color: var(--muted); line-height: 1.55; font-size: .86rem; }
.code-note code { color: #12688f; }
.admin-nav { display: flex; gap: 10px; flex-wrap: wrap; }

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes skyDrift { from { transform: translate3d(-1%, -1%, 0); } to { transform: translate3d(2%, 1.5%, 0); } }
@keyframes lightSweep { 0%,18% { transform: translateX(-55%) rotate(-3deg); opacity: 0; } 45% { opacity: .75; } 72%,100% { transform: translateX(58%) rotate(-3deg); opacity: 0; } }
@keyframes skyGlow { 0%,100% { transform: scale(.94); opacity: .76; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes cloudFloatA { from { translate: -2% -2%; } to { translate: 5% 4%; } }
@keyframes cloudFloatB { from { translate: 3% 2%; } to { translate: -5% -3%; } }
@keyframes cloudFloatC { from { translate: -2% 1%; } to { translate: 8% -4%; } }
@keyframes cloudBreathe { 0%,100% { transform: translateY(13%) scale(.97); } 50% { transform: translateY(10%) scale(1.025); } }
@keyframes auraIdle { 0%,100% { filter: blur(22px); } 50% { filter: blur(28px); } }
@keyframes liquidSpin { to { transform: rotate(360deg); } }
@keyframes liquidSpinReverse { to { transform: rotate(-360deg); } }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes ringRotateReverse { to { transform: rotate(-360deg); } }
@keyframes ringPulse { 0%,100% { transform: scale(.96); opacity: .38; } 50% { transform: scale(1.03); opacity: .82; } }
@keyframes connecting { 0%,100% { transform: scale(.95) rotate(-2deg); } 50% { transform: scale(1.04) rotate(2deg); } }
@keyframes listening { 0%,100% { box-shadow: inset 0 0 18px rgba(255,255,255,.55), inset -26px -30px 48px rgba(21,20,91,.38), 0 18px 48px rgba(59,119,202,.35), 0 0 70px rgba(81,190,255,.42); } 50% { box-shadow: inset 0 0 28px rgba(255,255,255,.72), inset -20px -24px 42px rgba(21,20,91,.3), 0 20px 54px rgba(45,181,205,.46), 0 0 105px rgba(66,226,220,.64); } }
@keyframes thinking { from { transform: scale(.96) rotate(-4deg); } to { transform: scale(1.04) rotate(4deg); } }
@keyframes speaking { from { transform: scale(.96); } to { transform: scale(1.065); } }
@keyframes errorPulse { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.06); } }

@media (max-width: 760px) {
    .assistant-orb { width: clamp(170px, 48vw, 260px); }
    .cloud-halo { width: clamp(340px, 94vw, 650px); height: clamp(180px, 52vw, 350px); }
    .cloud-one { top: 7%; left: -25%; }
    .cloud-two { top: 14%; right: -28%; }
    .cloud-four { left: -26%; bottom: -1%; }
    .cloud-five { right: -31%; bottom: -3%; }
    .form-grid { grid-template-columns: 1fr; }
    .form-field.full { grid-column: auto; }
    .admin-header { align-items: flex-start; flex-direction: column; }
}

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