:root { --navy:#102a43; --ink:#152536; --muted:#66788a; --blue:#1266c6; --sky:#edf6ff; --teal:#087e8b; --green:#14804a; --amber:#b86700; --red:#bc3a35; --line:#dce5ed; --paper:#fff; --canvas:#f5f8fb; --shadow:0 10px 30px rgba(24,49,73,.08); }
.salary-grid{max-height:430px}.salary-grid .data-table th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 #dce5ed}
.staff-grid table{table-layout:fixed}.staff-grid th,.staff-grid td{font-size:12px;padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-grid input{width:100%;padding:6px 7px;font-size:12px;box-sizing:border-box}
@media(max-width:900px){.staff-grid th,.staff-grid td{font-size:11px;padding:6px 4px}.staff-grid input{padding:5px 6px;font-size:11px}}
*{box-sizing:border-box} body{margin:0;background:var(--canvas);color:var(--ink);font:14px "DM Sans",sans-serif} button,input,select{font:inherit} button{cursor:pointer;border:0}.auth-shell{min-height:100vh;display:grid;grid-template-columns:45% 55%;background:#fff}.brand-panel{padding:56px 9%;background:linear-gradient(145deg,#102a43 0%,#0c4c76 100%);color:#fff;position:relative;overflow:hidden}.brand-panel:after{content:"";position:absolute;width:500px;height:500px;right:-250px;bottom:-140px;border:65px solid rgba(255,255,255,.07);border-radius:50%}.brand{display:flex;align-items:center;gap:12px;font:700 20px Manrope}.brand-mark{display:grid;place-items:center;background:#fff;color:var(--blue);border-radius:10px;width:40px;height:40px;font-weight:800}.brand-panel h1{font:800 clamp(35px,4vw,56px)/1.1 Manrope;margin:105px 0 20px;max-width:580px}.brand-panel p{font-size:17px;line-height:1.7;max-width:510px;color:#d8e9f7}.feature-list{margin-top:44px;display:grid;gap:14px}.feature-list span{display:flex;align-items:center;gap:10px}.feature-list span:before{content:"✓";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15)}.auth-area{max-width:500px;width:100%;margin:auto;padding:42px}.eyebrow{color:var(--blue);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.auth-area h2{font:800 29px Manrope;margin:10px 0}.subtle{color:var(--muted);line-height:1.55}.tabs{display:flex;background:#edf2f6;border-radius:10px;padding:4px;margin:30px 0 22px}.tabs button{flex:1;border-radius:7px;background:none;padding:10px;color:var(--muted);font-weight:700}.tabs button.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px #cbd5df}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:7px;color:#435468;font-size:13px;font-weight:600}input,select,textarea{border:1px solid #cad7e2;border-radius:8px;background:#fff;padding:12px 13px;color:var(--ink);outline-color:var(--blue);width:100%;font:inherit}.primary{background:var(--blue);color:white;border-radius:8px;padding:12px 18px;font-weight:700}.primary:hover{background:#0755aa}.secondary{color:var(--blue);background:#e9f3ff;border-radius:8px;padding:10px 14px;font-weight:700}.outline{border:1px solid #b9cadd;color:var(--navy);background:#fff;border-radius:8px;padding:9px 13px;font-weight:700}.danger{background:#fff0ef;color:var(--red);border-radius:8px;padding:9px 13px;font-weight:700}.auth-foot{margin-top:16px;color:var(--muted);font-size:12px}.alert{border-radius:8px;padding:12px 14px;margin:16px 0;background:#e7f5ec;color:#17663a}.alert.error{background:#fff0ef;color:#a42c2b}.shell{display:flex;min-height:100vh}.side{width:250px;background:var(--navy);color:#d5e1ec;position:fixed;height:100vh;padding:24px 14px;display:flex;flex-direction:column}.side .brand{margin:0 10px 35px;color:#fff}.role-pill{margin:0 10px 20px;text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:#96b8d3}.nav{display:grid;gap:5px}.nav button{background:transparent;color:#c4d3df;text-align:left;border-radius:7px;padding:12px 13px;font-weight:600}.nav button.active,.nav button:hover{background:#1b4568;color:white}.nav .icon{display:inline-block;width:24px}.side-bottom{margin-top:auto;border-top:1px solid #2c5271;padding:17px 10px;font-size:12px;color:#a7bdcf}.main{margin-left:250px;width:calc(100% - 250px);padding:30px 42px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:12px}.top-left{display:flex;align-items:center;min-width:0}.top h1{font:800 25px Manrope;margin:3px 0}.menu-toggle{display:none;flex:none;background:#fff;border:1px solid var(--line);border-radius:9px;width:38px;height:38px;font-size:16px;color:var(--navy);margin-right:12px}.header-actions{display:flex;align-items:center;gap:10px;flex:none}.user-chip{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 12px;border:1px solid var(--line);cursor:pointer;text-align:left}.user-chip:hover{background:#f3f8fd}.icon-btn{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);color:var(--red);border-radius:10px;padding:8px 13px;font-weight:700;white-space:nowrap}.icon-btn:hover{background:#fff0ef}.icon-glyph{font-size:15px;line-height:1}.side-backdrop{display:none}.search-input{flex:1;min-width:180px;max-width:460px}.avatar{background:#dbeeff;color:#095bad;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-weight:800;flex:none}.page{max-width:1300px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat,.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(24,49,73,.025)}.stat{padding:18px}.stat .label{color:var(--muted);font-size:12px}.stat strong{font:800 26px Manrope;display:block;margin-top:9px}.stat .hint{font-size:12px;color:var(--green)}.stat.flash-warn{animation:statFlashWarn 1.6s ease-in-out infinite;border-color:var(--amber)}@keyframes statFlashWarn{0%,100%{box-shadow:0 0 0 0 rgba(184,103,0,.35);background:var(--paper)}50%{box-shadow:0 0 0 5px rgba(184,103,0,0);background:#fff8ec}}.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}.card{padding:20px}.card h3{font:800 16px Manrope;margin:0 0 6px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.stack{display:grid;gap:13px}.activity{padding:12px 0;border-bottom:1px solid #edf1f4}.activity:last-child{border:0}.activity b{display:block;font-size:13px}.activity span{color:var(--muted);font-size:12px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th{text-align:left;color:#637689;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:#f6f8fa}.data-table th,.data-table td{padding:12px 11px;border-bottom:1px solid #e8edf1}.data-table td{font-size:13px}.badge{display:inline-block;padding:4px 8px;border-radius:99px;font-size:11px;font-weight:700}.badge.green{color:#11713f;background:#e5f7ed}.badge.amber{color:#9d5c00;background:#fff3dc}.badge.blue{color:#075aa9;background:#e9f3ff}.badge.red{color:#a42c2b;background:#fff0ef}.toolbar{display:flex;gap:10px;align-items:center;margin:18px 0}.toolbar .spacer{flex:1}.upload-zone{border:2px dashed #b7c9d9;border-radius:12px;padding:42px;text-align:center;background:#fbfdff}.upload-zone .upload-icon{font-size:30px;color:var(--blue)}.upload-zone h3{margin:10px 0 5px}.upload-zone p{color:var(--muted);margin:0 0 17px}.note{margin-top:14px;color:var(--muted);font-size:12px}.callout{border-left:4px solid var(--blue);background:#eef7ff;padding:12px 14px;color:#31516e;margin-bottom:18px;border-radius:0 8px 8px 0}.empty{text-align:center;color:var(--muted);padding:35px}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.report-card{padding:20px;min-height:160px}.report-card .report-icon{font-size:27px}.report-card h3{margin:14px 0 5px}.report-card p{font-size:13px;color:var(--muted);line-height:1.5}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.list-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ecf0f3}.list-row:last-child{border-bottom:none}.paybox{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 14px;border-radius:10px;border:1.5px solid;text-align:center}.paybox-label{font:800 13.5px Manrope;letter-spacing:.02em}.paybox-amount{font:800 21px Manrope}.paybox-gross{background:#edf6ff;border-color:#8fbde8;color:var(--navy)}.paybox-gross .paybox-label,.paybox-gross .paybox-amount{color:var(--navy)}.paybox-net{background:#e5f7ed;border-color:#8fd1ac;color:#11713f}.paybox-net .paybox-label,.paybox-net .paybox-amount{color:#11713f}@media(max-width:520px){.paybox{padding:13px 10px}.paybox-amount{font-size:17px}}.inline-add{display:flex;gap:8px;margin-top:12px}.modal-back{position:fixed;inset:0;background:rgba(14,37,57,.55);display:grid;place-items:center;padding:20px;z-index:5}.modal{background:#fff;max-width:590px;width:100%;max-height:90vh;overflow:auto;border-radius:13px;padding:24px;box-shadow:var(--shadow)}.modal h2{font:800 21px Manrope;margin:0 0 6px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.period{display:flex;gap:8px;align-items:center}.hidden{display:none!important}
.home-features{max-width:1120px;margin:0 auto;padding:64px 24px 80px}
.home-features .section-head{text-align:center;max-width:640px;margin:0 auto 40px}
.home-features .section-head .eyebrow{display:block;margin-bottom:8px}
.home-features .section-head h2{font:800 30px Manrope;color:var(--navy);margin:0 0 10px}
.home-features .section-head p{color:var(--muted);line-height:1.6;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.feature-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.feature-card h3{font:800 15px Manrope;color:var(--navy);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.feature-card h3 .report-icon{font-size:19px}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.check-list li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink);line-height:1.4}
.check-list li:before{content:"✓";flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--sky);color:var(--blue);font-size:10px;font-weight:800;margin-top:1px}
.home-cta{text-align:center;margin-top:44px}
.contact-admin-fab{position:fixed;right:22px;bottom:22px;z-index:8;border-radius:30px;padding:13px 20px;box-shadow:var(--shadow);font-weight:700}
.district-notice{border-radius:8px;padding:12px 14px;margin:2px 0 4px;background:#fff0ef;color:#a42c2b;font-size:13px;line-height:1.5}
.district-notice button{margin-top:8px}
@media(max-width:520px){.contact-admin-fab{right:14px;bottom:14px;padding:11px 16px;font-size:13px}}
@media(max-width:640px){.home-features{padding:44px 16px 56px}.home-features .section-head h2{font-size:23px}}@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.brand-panel{display:none}.auth-area{padding:30px 20px}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.side{position:fixed;left:0;top:0;width:250px;max-width:82vw;transform:translateX(-100%);transition:transform .25s ease;z-index:20;box-shadow:0 0 0 1px rgba(0,0,0,.04)}.side.open{transform:translateX(0)}.side-backdrop{position:fixed;inset:0;background:rgba(14,37,57,.5);z-index:15}.side-backdrop.open{display:block}.main{margin-left:0;width:100%;padding:24px 18px}.stats{grid-template-columns:repeat(2,1fr)}.grid,.settings-grid{grid-template-columns:1fr}.report-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.icon-btn .btn-label{display:none}.icon-btn{padding:9px 11px}}@media(max-width:520px){.main{padding:20px 12px}.top{align-items:center}.top h1{font-size:20px}.user-chip span{display:none}.header-actions{gap:7px}.stats{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:13px}.stat strong{font-size:22px}.form-grid,.report-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.toolbar{flex-wrap:wrap}.period{width:100%}.search-input{max-width:none}}