.sidebar{width:248px;background:linear-gradient(180deg,#0b0f14,#101826);color:#ffffffeb;padding:16px 14px;box-shadow:2px 0 18px #00000040;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;height:100vh}.logo{font-size:14px;font-weight:800;margin:6px 10px 18px;line-height:1.2;letter-spacing:.2px;text-transform:uppercase;opacity:.95}.sidebar-header{padding:4px 6px 10px;margin-bottom:6px}.sidebar-subtitle{margin:-6px 10px 10px;font-size:12px;font-weight:600;opacity:.65}.logo:after{content:"";display:block;height:3px;width:46px;background:linear-gradient(90deg,var(--accent),rgba(246,201,69,.2));border-radius:999px;margin-top:10px}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{padding:0;margin:4px 0}.sidebar a{position:relative;color:#ffffffe0;text-decoration:none;display:block;padding:11px 12px;border-radius:12px;font-size:14px;font-weight:600;letter-spacing:.1px;transition:transform .16s ease,background .16s ease,color .16s ease}.sidebar a:hover{background:#ffffff0f;transform:translate(2px)}.sidebar a.active{background:#f6c94524;color:#fff;box-shadow:0 10px 22px #00000040 inset}.sidebar a.active:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:999px;background:var(--accent)}@media(max-width:980px){.sidebar{width:228px}}@media(max-width:760px){.sidebar{display:none}}.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 4px 6px}.sidebar-section{padding:8px 6px;border-top:1px solid rgba(255,255,255,.06)}.sidebar-section:first-child{border-top:none}.sidebar-section-title{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:2px 8px 8px}.sidebar-section .sidebar-menu li{margin:3px 0}.sidebar-section .sidebar-menu a{padding:10px 12px}.sidebar-scroll::-webkit-scrollbar{width:8px}.sidebar-scroll::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:999px}.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff2e}.sidebar-logout{padding:14px 20px;margin:15px;text-align:center;background:linear-gradient(135deg,#fc0,#f90);color:#000;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease}.sidebar-logout:hover{background:linear-gradient(135deg,#ffd633,#ffb300);transform:scale(1.05);box-shadow:0 0 15px #fc09}.header{height:64px;background:#ffffffd1;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center;padding:0 20px}.header-left{display:flex;align-items:center}.logo{height:45px}.logo.clickable{cursor:pointer}.header-right{display:flex;align-items:center;gap:16px}.header-back-btn{background:#fff;border:1px solid var(--border);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.header-back-btn:hover{background:#f6c9452e;border-color:#f6c94559;transform:translateY(-1px)}.profile-wrapper{position:relative;cursor:pointer}.user-name{font-size:14px;font-weight:600;color:var(--text)}.profile-dropdown{position:absolute;right:0;top:44px;width:220px;background:var(--surface);border-radius:10px;padding:14px;border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:1000}.profile-name{font-size:15px;font-weight:700}.profile-detail{font-size:13px;color:var(--muted);margin-top:4px}.profile-divider{height:1px;background:var(--border);margin:12px 0}.logout-btn{width:100%;background:transparent;border:none;color:#b91c1c;font-size:14px;font-weight:600;cursor:pointer;text-align:left}.footer{height:36px;background-color:#ffffffd9;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}.layout{display:flex;height:100vh;width:100vw;overflow-x:auto;overflow-y:hidden;background:var(--surface-2)}.main-content{flex:1;display:flex;flex-direction:column;background:var(--surface-2)}.page-content{flex:1;padding:24px;overflow-y:auto;overflow-x:auto;position:relative}.page-content:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;background:radial-gradient(900px 520px at 12% 10%,rgba(246,201,69,.16),transparent 58%),radial-gradient(760px 520px at 96% 8%,rgba(15,23,42,.06),transparent 58%),radial-gradient(900px 520px at 22% 104%,rgba(255,183,3,.1),transparent 55%),linear-gradient(180deg,#ffffff80,#fff0);filter:saturate(1.08);opacity:.95}.page-content>*{position:relative;z-index:1}@media(max-width:920px){.page-content{padding:16px}}:root{--bg: #0b0f14;--canvas: #0f141b;--surface: #ffffff;--surface-2: #f6f7fb;--surface-3: #eef1f7;--text: #0f172a;--muted: #64748b;--border: #e6e8ef;--accent: #f6c945;--accent-strong: #ffb703;--accent-ink: #1b1b1b;--danger: #dc2626;--success: #16a34a;--warning: #f59e0b;--shadow-sm: 0 6px 18px rgba(15, 23, 42, .08);--shadow-md: 0 12px 34px rgba(15, 23, 42, .12);--shadow-lg: 0 26px 70px rgba(15, 23, 42, .16);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--ring: 0 0 0 4px rgba(246, 201, 69, .22);--glass: rgba(255, 255, 255, .72);--glass-border: rgba(255, 255, 255, .55)}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%}body{margin:0;min-width:320px;overflow-x:hidden;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--surface-2)}#root{width:100%;min-height:100vh}body.login-route{overflow:hidden}body:before{content:"";position:fixed;inset:-60px;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 10% 8%,rgba(246,201,69,.22),transparent 58%),radial-gradient(760px 520px at 96% 10%,rgba(15,23,42,.08),transparent 58%),radial-gradient(900px 520px at 22% 104%,rgba(255,183,3,.14),transparent 55%),radial-gradient(760px 520px at 92% 96%,rgba(59,130,246,.08),transparent 60%),linear-gradient(180deg,#f9fafb,#f3f4f6);filter:saturate(1.05);animation:meshFloat 16s ease-in-out infinite}@keyframes meshFloat{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(0,-10px,0) scale(1.02)}}@media(prefers-reduced-motion:reduce){body:before{animation:none}}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}::selection{background:#f6c94573}.page-title{font-size:20px;font-weight:800;margin:0}.page-subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:#0f172a24}.card-header{padding:18px 18px 10px;border-bottom:1px solid var(--border)}.card-body{padding:18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:14px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translate(-120%);transition:transform .4s ease;pointer-events:none}.btn:hover:after{transform:translate(120%)}.btn:focus-visible{outline:none;box-shadow:var(--ring)}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:var(--accent-ink);box-shadow:0 10px 20px #f6c94540}.btn-primary:hover{box-shadow:0 14px 26px #f6c94552}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn-ghost:hover{background:#0f172a0a}input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);outline:none;transition:box-shadow .12s ease,border-color .12s ease}input:focus,select:focus,textarea:focus{border-color:#f6c945e6;box-shadow:var(--ring)}input::placeholder,textarea::placeholder{color:#64748bcc}label{font-size:12px;font-weight:800;letter-spacing:.2px;color:#1f2937}table{width:100%;border-collapse:separate;border-spacing:0}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}th{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.35px;text-transform:uppercase;background:#fbfbfd}tr:hover td{background:#f6c9450f}.table-container,.attendance-table-container,.designation-table-container,.report-list-container,.matrix-container{background:#ffffffdb;border:1px solid rgba(15,23,42,.1);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}[class$=-page]{position:relative}[class$=-page]:before{content:"";position:absolute;inset:-14px;border-radius:22px;pointer-events:none;background:radial-gradient(800px 360px at 14% 6%,rgba(246,201,69,.18),transparent 60%),radial-gradient(700px 360px at 92% 10%,rgba(15,23,42,.06),transparent 60%);opacity:.9;z-index:0}[class$=-page]>*{position:relative;z-index:1}*::-webkit-scrollbar{height:10px;width:10px}*::-webkit-scrollbar-thumb{background:#0f172a2e;border-radius:999px}*::-webkit-scrollbar-track{background:transparent}.welcome-card{background:var(--surface);padding:32px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border);max-width:900px}.welcome-card h2{font-size:26px;margin-bottom:10px;color:var(--text)}.welcome-card p{font-size:15px;color:var(--muted)}