/* School visual system: local artwork, consistent SVG icons and restrained motion. */
:root{--muted:#667e86;--line:#e2ebe8;--canvas:#f5f8f7;--ease:cubic-bezier(.2,.7,.2,1)}
.school-icon{display:inline-block;flex-shrink:0;vertical-align:middle;overflow:visible}.brand-mark .school-icon{width:27px;height:27px}.school-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,box-shadow .2s,transform .2s}.school-app .btn .school-icon{width:17px;height:17px}.school-app .btn-primary{box-shadow:0 4px 10px #117f7515}.school-app .btn-primary:hover{box-shadow:0 6px 16px #117f7530;transform:translateY(-1px)}.school-app .btn:active{transform:translateY(0)}.school-app :focus-visible{outline:3px solid #6bbdaf;outline-offset:4px}.school-app .form-control:focus-visible{outline-offset:1px}.school-sidebar{padding-top:25px;border-left-color:#e3ece8;background:linear-gradient(180deg,#fff 60%,#fbfdfc)}.school-brand{margin-bottom:26px}.school-nav-link{transition:background .18s,color .18s;position:relative;padding:11px 14px}.school-nav-link .school-icon{color:#81998f;width:21px;height:21px;transition:transform .2s,color .2s}.school-nav-link:hover .school-icon{transform:translateX(-2px);color:var(--teal)}.school-nav-link.active{background:#e7f3ed;color:#0b7668}.school-nav-link.active .school-icon{color:#0b7668}.school-nav-link.active:after{content:"";position:absolute;left:13px;width:5px;height:5px;background:#31a18c;border-radius:50%}.school-topbar{background:#ffffffed}.topbar-date{background:#f6f9f7;border:1px solid #ecf1ee;padding:8px 12px;border-radius:8px}.topbar-date .school-icon{width:16px;height:16px;color:#7d9a8f}.school-main{padding-top:27px}.school-main>.page-heading{padding:0 1px 5px}.school-main>.page-heading h1{letter-spacing:-.7px}.school-main>.page-heading .eyebrow{display:flex;align-items:center;gap:6px}.panel-head{background:linear-gradient(100deg,#fff,#fcfdfc)}.panel-head h2{display:flex;align-items:center;gap:9px}.panel-head h2:before{content:"";height:15px;width:3px;background:#94c8b5;border-radius:3px}.panel,.stat-card,.filter-bar{box-shadow:0 3px 12px #193b2d03}.stat-card{position:relative;transition:border-color .2s,transform .25s,box-shadow .25s;overflow:hidden}.stat-card:after{content:"";position:absolute;left:-13px;bottom:-29px;width:96px;height:96px;border:15px solid #f5f9f7;border-radius:50%;pointer-events:none}.stat-card:hover{transform:translateY(-4px);border-color:#c8ded4;box-shadow:0 10px 25px #193b2d08}.stat-card .stat-number,.stat-card .stat-foot{position:relative;z-index:1}.stat-icon{width:39px;height:39px;border:1px solid #e7f0ec;background:#edf6f0}.stat-icon .school-icon{width:22px;height:22px}.stat-number{font-size:34px;letter-spacing:-1px}.stat-foot{color:#748b83}.stat-card.blue:after{border-color:#f3f7fc}.stat-card.red:after{border-color:#fdf5f4}.stat-card.amber:after{border-color:#fdf9f0}.stat-card.red .stat-icon,.stat-card.amber .stat-icon,.stat-card.blue .stat-icon{border-color:transparent}.table tbody tr{transition:background .18s}.school-app .table tbody tr:hover{background:#f7fbf8}.school-app .table th{color:#627d76;background:#f6f9f7}.school-app .table td{color:#4e6760}.school-app .table tr[data-status=absent]{background:#fffafa}.school-app .table tr[data-status=late]{background:#fffcf6}.school-app .table tr[data-status=present] .attendance-status{border-color:#bcdcc9;color:#157961;background-color:#f7fcf9}.school-app .table tr[data-status=absent] .attendance-status{border-color:#f2ccd0;color:#b65060;background-color:#fff8f8}.school-app .table tr[data-status=late] .attendance-status{border-color:#ead7af;color:#976f20;background-color:#fffbf4}.badge-status{font-size:10px;font-weight:500;padding:5px 9px}.badge-status:before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.7}.class-symbol .school-icon{width:20px;height:20px}.class-line{transition:background .2s;border-radius:8px;padding:14px 6px}.class-line:hover{background:#f8fbf9}.empty-state{background:radial-gradient(ellipse at center,#f5faf7 0,transparent 65%)}.empty-icon{display:grid;place-items:center;width:65px;height:65px;border-radius:21px;background:#edf5ef;border:1px solid #dfece2;margin:0 auto 18px;transform:rotate(-6deg)}.empty-icon .school-icon{width:32px;height:32px;transform:rotate(6deg);color:#71a78e}.school-app .alert{border:1px solid transparent;box-shadow:0 5px 18px #173d2b04;display:flex;gap:10px;align-items:center}.school-app .alert-success{background:#eaf6ed;border-color:#d1e8d8;color:#286c49}.school-app .alert-danger{background:#fff1f0;border-color:#f2d6d1;color:#a34c44}.school-app .alert-warning{background:#fff8e9;border-color:#eddfbf;color:#896827}.save-bar{backdrop-filter:blur(10px);background:#fffffff5;border-color:#cfe1d8}.school-app .form-control::placeholder{color:#9baaa5;font-size:11px}.notice{border-right:3px solid #8fb9a8;background:#f0f7f2}.welcome-hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;min-height:255px;overflow:hidden;border-radius:18px;background:#edf6f1;border:1px solid #ddece2;margin-bottom:25px;isolation:isolate}.welcome-copy{padding:29px 30px;z-index:2;align-self:center}.hero-eyebrow{display:flex;align-items:center;gap:7px;font-size:10px;color:#568773}.hero-eyebrow .school-icon{width:16px;height:16px}.welcome-copy h1{font-size:30px;line-height:1.7;letter-spacing:-1px;font-weight:bold;color:#224b3e;margin:11px 0 5px}.greeting-dot{color:#dcaa57;margin-right:3px}.welcome-copy p{font-size:12px;color:#668a79;line-height:2;margin:0 0 20px}.welcome-copy .btn{padding:10px 18px}.welcome-art{position:relative;align-self:stretch;min-width:0;display:flex;align-items:center;justify-content:center}.welcome-art>img{width:125%;max-width:none;height:100%;min-height:240px;object-fit:cover;object-position:center;mix-blend-mode:multiply;mask-image:linear-gradient(to right,#000 85%,transparent);margin-right:-15%;animation:art-entrance .9s var(--ease) both}.hero-floating-label{position:absolute;bottom:19px;left:20px;display:flex;align-items:center;gap:9px;font-size:10px;background:#ffffffed;border:1px solid #fff;border-radius:10px;padding:10px 14px;box-shadow:0 8px 20px #33604b0c;backdrop-filter:blur(5px);color:#416b56;animation:card-entrance .8s .2s var(--ease) both}.hero-floating-label .school-icon{color:#589f81;width:22px;height:22px}.hero-floating-label small{display:block;font-size:8px;margin-top:4px;color:#8da093}.chart-bar{transform-origin:bottom;animation:chart-grow .85s var(--ease) both;background:linear-gradient(0deg,#39987c,#98cdb5)}.progress-track>span{transform-origin:right;animation:progress-grow .7s var(--ease) both}.school-main>.panel,.school-main>.filter-bar,.school-main>.page-heading,.school-main>.summary-strip,.school-main>.dashboard-grid{animation:card-entrance .45s var(--ease) both}.stats-grid .stat-card{animation:card-entrance .5s var(--ease) both}.stats-grid .stat-card:nth-child(2){animation-delay:.06s}.stats-grid .stat-card:nth-child(3){animation-delay:.12s}.stats-grid .stat-card:nth-child(4){animation-delay:.18s}.school-main>.dashboard-grid{animation-delay:.1s}.school-app .alert{animation:notification-in .35s var(--ease) both}.submit-spinner{width:15px;height:15px;border:2px solid #ffffff65;border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;display:inline-block}.school-app .btn[aria-busy=true]{pointer-events:none;opacity:.8}
/* Entry pages share the same brand, with an illustration-led welcome. */
body.auth-page{background:#f4f6f1;min-height:100vh;display:grid;place-items:center;padding:36px}.auth-shell{width:min(1180px,100%);min-height:700px;display:grid;grid-template-columns:1fr 1.06fr;background:#fff;border:1px solid #e1e8df;border-radius:24px;overflow:hidden;box-shadow:0 25px 80px #2e514010}.auth-form-side{padding:36px 45px;display:flex;flex-direction:column;min-width:0}.auth-form-side .school-brand{font-size:15px;margin:0}.auth-form-side .school-brand small{font-size:10px}.auth-form-content{margin:auto 0;padding:45px 0}.auth-eyebrow{display:inline-flex;align-items:center;gap:7px;border:1px solid #e0ece3;border-radius:30px;background:#f5faf6;padding:7px 11px;font-size:10px;color:#688b77;margin-bottom:20px}.auth-eyebrow .school-icon{width:15px;height:15px}.auth-form-content h1{font-size:26px;line-height:1.8;letter-spacing:-1px;font-weight:bold;margin-bottom:8px}.auth-description{font-size:12px;line-height:2;color:#789084;margin:0 0 30px}.auth-form-footer{display:flex;align-items:center;gap:7px;font-size:10px;color:#8fa196}.auth-form-footer .school-icon{width:15px;height:15px}.role-options{display:flex;flex-direction:column;gap:15px}.role-option{display:flex;align-items:center;gap:14px;padding:22px 16px;border:1px solid #e1e9e3;border-radius:12px;text-decoration:none;color:#31533e;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}.role-option:hover{transform:translateX(-4px);border-color:#92c3a9;background:#fbfdfb;box-shadow:0 8px 18px #365a3c07;color:#31533e}.role-option-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#edf6ef;color:#54976e;flex-shrink:0}.role-option-icon.staff{background:#faf3e8;color:#b18a48}.role-option strong{font-size:13px}.role-option small{display:block;font-size:10px;margin-top:8px;color:#8b9d91;line-height:1.8}.role-arrow{margin-right:auto;width:17px;height:17px;color:#9bb6a4}.auth-art-side{background:#edf6f1;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.auth-art-heading{padding:38px 42px 0;z-index:1}.art-overline{font-size:10px;letter-spacing:.2px;color:#70957e;display:block;margin-bottom:17px}.auth-art-heading h2{font-size:38px;font-weight:bold;line-height:1.65;letter-spacing:-1.2px;color:#294f3d}.auth-art-heading h2 span{color:#c79e53}.auth-art-heading p{font-size:11px;color:#75927e;margin-top:12px}.campus-art{width:118%;height:auto;max-width:none;margin:0 -9%;mix-blend-mode:multiply;animation:art-entrance 1s var(--ease) both}.art-feature-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0 18px;z-index:2;margin-top:-24px}.art-feature-pills>span{font-size:9px;display:flex;align-items:center;gap:7px;background:#ffffffed;border:1px solid #fff;color:#668675;border-radius:8px;padding:10px 12px;box-shadow:0 5px 15px #244c2e07}.art-feature-pills .school-icon{width:17px;height:17px;color:#6b9a7d}.art-caption{font-size:10px;color:#7e9c87;display:flex;align-items:center;justify-content:center;gap:8px;padding:25px 20px}.art-caption>span{width:5px;height:5px;background:#8eb89b;border-radius:50%}.auth-login-form .form-label{font-size:12px;color:#496858}.input-with-icon{position:relative;margin-top:7px}.input-with-icon>.school-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#8baa96;pointer-events:none}.auth-login-form .form-control{height:49px;background:#fcfdfb;padding-right:42px;border-color:#dfe8df}.auth-login-form .form-control::placeholder{text-align:right;direction:rtl;color:#a2b0a5;font-size:10px}.password-wrap .form-control{padding-left:43px}.password-toggle{position:absolute;left:9px;top:9px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:#8eaa98;display:grid;place-items:center}.password-toggle:hover{background:#edf5ee}.password-toggle .school-icon{width:19px;height:19px}.password-toggle[aria-pressed=true]{color:#117f75;background:#e8f3ec}.auth-help{font-size:10px;line-height:2;color:#8b9e90;margin:15px 0 23px}.auth-submit{width:100%;min-height:47px}.auth-back{display:block;text-align:center;text-decoration:none;font-size:11px;color:#7d9585;margin-top:22px}.auth-back:hover{color:#117f75}.auth-form-content{animation:card-entrance .55s var(--ease) both}.auth-art-heading{animation:card-entrance .7s .1s var(--ease) both}
@keyframes card-entrance{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes art-entrance{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes notification-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1500px){.welcome-hero{min-height:285px}.welcome-copy{padding:35px 42px}.welcome-copy h1{font-size:36px}.welcome-art>img{object-fit:contain;width:105%;margin-right:0}}@media(max-width:1150px){.welcome-copy{padding:24px}.welcome-copy h1{font-size:26px}.welcome-copy p{font-size:11px}.hero-eyebrow{font-size:9px}.hero-floating-label{font-size:9px;left:15px}.auth-form-side{padding:30px}.auth-art-heading{padding:32px 30px 0}.auth-art-heading h2{font-size:33px}.auth-form-content h1{font-size:23px}.auth-shell{min-height:650px}}@media(max-width:1000px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.welcome-art>img{width:150%;margin-right:-35%;object-fit:cover}.hero-floating-label{display:none}.welcome-copy{padding:24px 20px}.welcome-hero{grid-template-columns:1.3fr 1fr;min-height:235px}.welcome-copy p{font-size:10px}.hero-eyebrow{font-size:8px}.auth-art-heading h2{font-size:30px}.auth-form-side{padding:28px}.role-option{padding:17px 12px}.role-option strong{font-size:11px}.role-option small{font-size:9px}.role-option-icon{width:36px;height:36px}}@media(max-width:850px){.welcome-hero{grid-template-columns:1.1fr 1fr}.welcome-copy{padding:28px}.welcome-copy h1{font-size:29px}.welcome-copy p{font-size:12px}.hero-eyebrow{font-size:10px}.welcome-art>img{width:125%;margin-right:-15%}.auth-page{padding:22px!important}.auth-shell{grid-template-columns:1fr 1fr}.auth-form-side{padding:24px}.auth-form-content h1{font-size:21px}.auth-art-heading{padding:30px 24px 0}.auth-art-heading h2{font-size:29px}.auth-art-heading p{font-size:10px;line-height:2}.role-option{gap:10px}.role-option small{font-size:8px}.role-arrow{display:none}.art-feature-pills{flex-direction:column;align-items:center}.art-caption{font-size:9px}.auth-description{font-size:11px}.auth-form-side .school-brand{font-size:13px}.auth-form-side .school-brand small{font-size:8px}}@media(max-width:650px){body.auth-page{padding:14px!important;display:block}.auth-shell{grid-template-columns:1fr;min-height:calc(100vh - 28px);border-radius:18px}.auth-form-side{padding:26px;min-height:610px}.auth-art-side{display:none}.auth-form-content{padding:40px 0}.auth-form-content h1{font-size:26px}.auth-form-side .school-brand{font-size:15px}.auth-form-side .school-brand small{font-size:10px}.role-option{padding:20px 15px}.role-option strong{font-size:13px}.role-option small{font-size:10px}.role-arrow{display:block}.role-option-icon{width:43px;height:43px}.auth-description{font-size:12px}.auth-form-footer{justify-content:center}}@media(max-width:500px){.welcome-hero{min-height:255px;grid-template-columns:1.5fr 1fr}.welcome-copy{padding:23px 19px}.welcome-copy h1{font-size:24px}.welcome-copy p{font-size:10px;line-height:2.1}.welcome-copy .btn{font-size:10px;padding:10px 13px}.hero-eyebrow{font-size:8px;gap:4px}.hero-eyebrow .school-icon{width:12px}.welcome-art>img{width:200%;height:245px;margin-right:-65%;opacity:.65;mask-image:linear-gradient(to right,#000 20%,transparent 95%)}.stat-card{padding:16px}.stat-icon{width:32px;height:32px}.stat-top{font-size:10px;gap:5px}.stat-foot{font-size:9px}.topbar-date{padding:7px 9px;gap:6px}.school-footer{font-size:9px}.school-topbar{gap:8px}.school-app .page-heading h1{font-size:21px}.auth-form-side{min-height:580px;padding:24px}.auth-form-content h1{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.stat-card:hover,.role-option:hover,.school-app .btn:hover{transform:none!important}}@media print{.welcome-art{display:none}.welcome-hero{background:#fff;min-height:auto;display:block}.welcome-copy{padding:10px}.welcome-copy .btn{display:none}.school-main>*{animation:none!important}}
/* Keep the campus silhouette inside the welcome illustration. */
.auth-art-side .campus-art{width:104%;margin:0 -2%;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 88%,transparent)}
@media(max-height:800px) and (min-width:651px){body.auth-page{padding:24px}.auth-shell{min-height:640px}.auth-art-heading{padding-top:28px}.auth-art-heading h2{font-size:32px}.auth-form-content{padding:30px 0}.art-caption{padding:20px}.auth-form-side{padding-top:30px;padding-bottom:26px}}