:root[data-theme=indigo-classic]{--school-primary:#082360;--school-accent:#2f16cc;--school-background:#eff4fb}
:root[data-theme=bright-blue]{--school-primary:#12325b;--school-accent:#176eea;--school-background:#eff4fb}
:root[data-theme=plain-card]{--school-primary:#082360;--school-accent:#176eea;--school-background:#fff}

@tailwind base;@tailwind components;@tailwind utilities;:root{--school-primary:#082360;--school-accent:#2f16cc;--school-background:#eff4fb;--ink:#101a3f;--muted:#5c6377;--border:#d9d9e3;--gold:#e6a23a;--panel:#fff;--danger:#b42318}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100vh;color:var(--ink);background:var(--school-background);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Aptos,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}button,input{font:inherit}button:disabled,input:disabled{cursor:not-allowed;opacity:.72}.login-page{grid-template-columns:minmax(320px,32%) 1fr;min-height:100vh;display:grid;overflow:hidden}.brand-panel{background:linear-gradient(180deg, color-mix(in srgb, var(--school-accent) 22%, white) 0%, var(--school-background) 47%, color-mix(in srgb, var(--school-primary) 10%, white) 100%);min-height:100vh;position:relative;overflow:hidden}.campus-art{object-fit:cover;object-position:center bottom;width:100%;height:56%;position:absolute;inset:auto 0 0}.sky-shape{background:linear-gradient(135deg, var(--school-primary) 0%, var(--school-accent) 100%);pointer-events:none;position:absolute}.top-shape{border-bottom-right-radius:58% 70%;width:92%;height:27%;top:-6%;left:-26%;transform:rotate(-8deg)}.bottom-shape{z-index:2;border-top-left-radius:70% 80%;width:85%;height:17%;bottom:-5%;right:-26%}.dot-grid{opacity:.72;background-image:radial-gradient(#ffffffbd 1.5px,#0000 1.5px);background-size:16px 16px;width:84px;height:84px;position:absolute;top:54px;left:28px}.brand-content{z-index:3;text-align:center;min-height:56vh;padding:5.8vh 4.2vw 0;position:relative}.school-logo{object-fit:contain;width:min(220px,78%);height:auto;margin:0 auto 8px;display:block}.brand-content h1{color:var(--school-primary);margin:0;font-size:clamp(28px,2.4vw,40px);font-weight:750;line-height:1.1}.gold-divider{background:var(--gold);width:94px;height:3px;margin:18px auto 16px;position:relative}.gold-divider:after{content:"";background:var(--gold);border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tagline{letter-spacing:.12em;color:var(--school-primary);margin:0;font-size:18px}.form-panel{background:radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--school-accent) 18%, transparent), transparent 30%), linear-gradient(135deg, white 0%, var(--school-background) 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:28px 3vw;display:flex}.login-card{width:min(640px,100%);box-shadow:0 24px 55px color-mix(in srgb, var(--school-primary) 16%, transparent);background:#fffffff5;border:1px solid #ffffffeb;border-radius:22px}.form-inner{width:100%;padding:48px 48px 40px}.section-title,.field-group>span:not(.input-wrap){color:var(--ink);margin:0 0 14px;font-size:18px;font-weight:700;display:block}.tabs{border:2px solid var(--border);border-radius:9px;grid-template-columns:1fr 1fr;min-height:64px;margin-bottom:28px;display:grid;overflow:hidden}.tab{color:#16182a;cursor:pointer;background:#fff;border:0;justify-content:center;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex}.tab+.tab{border-left:2px solid var(--border)}.tab svg,.input-wrap svg,.select-label svg,.sign-in svg,.administrator svg,.chevron{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.tab.active{color:var(--school-accent);background:color-mix(in srgb, var(--school-accent) 10%, white);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--school-accent) 35%, white)}.field-group{margin-bottom:20px;display:block}.required-marker{color:var(--danger)}.role-dropdown{position:relative}.input-wrap,.select-box{border:2px solid var(--border);width:100%;min-height:56px;color:var(--school-accent);background:#fff;border-radius:9px;align-items:center;gap:12px;padding:0 16px;display:flex}.input-wrap input{color:#202437;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:16px}.input-wrap input::placeholder,.select-label .is-placeholder{color:#5f6475}.select-box{cursor:pointer;text-align:left;justify-content:space-between}.select-box.open,.input-wrap:focus-within{border-color:var(--school-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--school-accent) 16%, transparent)}.select-label{color:var(--school-accent);align-items:center;gap:12px;font-size:16px;display:flex}.chevron{color:#0e1221;pointer-events:none}.select-box.open .chevron{transform:rotate(180deg)}.role-menu{z-index:20;border:2px solid var(--border);width:100%;box-shadow:0 18px 34px color-mix(in srgb, var(--school-primary) 14%, transparent);background:#fff;border-radius:9px;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden}.role-menu-option{color:#10172f;text-align:left;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #ececf4;width:100%;min-height:48px;padding:0 16px;font-size:16px;display:block}.role-menu-option:last-child{border-bottom:0}.role-menu-option:hover,.role-menu-option.selected{color:var(--school-accent);background:color-mix(in srgb, var(--school-accent) 10%, white)}.form-message{color:var(--danger);margin:-4px 0 16px;font-size:15px;font-weight:600}.sign-in{color:#fff;background:linear-gradient(180deg, var(--school-accent) 0%, var(--school-primary) 100%);width:100%;min-height:56px;box-shadow:0 12px 18px color-mix(in srgb, var(--school-accent) 28%, transparent);cursor:pointer;border:0;border-radius:9px;justify-content:center;align-items:center;gap:12px;margin-top:8px;font-size:18px;font-weight:700;display:flex}.loader{border:3px solid #ffffff6b;border-top-color:#fff;border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.or-row{color:#44495b;letter-spacing:.08em;align-items:center;gap:14px;margin:22px 4px 8px;font-size:14px;display:flex}.or-row:before,.or-row:after{content:"";background:#d9d9df;flex:1;height:1px}.administrator{text-align:center;color:#242838;justify-content:center;align-items:center;gap:8px;margin:16px 0 0;font-size:15px;display:flex}.administrator strong,.footer-link{color:var(--school-accent)}.page-footer{color:#5b6170;flex-wrap:wrap;justify-content:center;gap:16px;width:min(900px,100%);margin-top:24px;font-size:14px;display:flex}.page-footer i{font-style:normal}.footer-link{cursor:pointer}.login-centered{background:var(--school-background);justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;display:flex}.centered-card{background:var(--panel);width:min(560px,100%);box-shadow:0 18px 40px color-mix(in srgb, var(--school-primary) 12%, transparent);text-align:center;border-radius:16px;padding:36px 32px 20px}.centered-card .school-logo{width:min(120px,40%)}.centered-card h1{color:var(--school-primary);margin:12px 0 8px;font-size:28px;line-height:1.15}.centered-lead{color:var(--muted);margin:0 0 8px}.centered-card .login-card{box-shadow:none;background:0 0;border:0}.centered-card .form-inner{padding:12px 0 0}.inside-shell{background:var(--school-background);min-height:100vh}.inside-bar{background:var(--school-primary);color:#fff;align-items:center;gap:16px;padding:16px 28px;display:flex}.inside-bar img{width:auto;height:40px}.inside-body{padding:32px}.inside-centered{background:var(--school-background);justify-content:center;align-items:center;min-height:100vh;padding:32px 16px;display:flex}.inside-centered-card{background:var(--panel);text-align:center;width:min(480px,100%);box-shadow:0 18px 40px color-mix(in srgb, var(--school-primary) 12%, transparent);border-radius:16px;padding:32px}.inside-centered-card h1{color:var(--school-primary);margin:12px 0 20px;font-size:24px}@media (max-width:980px){.login-page{grid-template-columns:1fr}.brand-panel,.form-panel{min-height:auto}.brand-content{min-height:0;padding:48px 24px 220px}.form-panel{padding:28px 18px 36px}.form-inner{padding:32px 22px 28px}}
