@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--orange:#f26b21;--blue:#164e8a;--ink:#172337;--muted:#778397;--line:#e5eaf1;--bg:#f6f8fb;--white:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}.layout{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:#fff;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:24px}.brand{display:flex;gap:12px;align-items:center;padding:0 8px}.brand b{font:800 17px Manrope,sans-serif;display:block}.brand small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.brand-logo{width:48px;height:48px;object-fit:contain;flex:none}.login-logo{width:70px;height:70px;object-fit:contain;margin:auto;display:block}.logo{width:45px;height:45px;border-radius:14px;background:var(--orange);color:white;display:grid;place-items:center;font-weight:800;font-family:Manrope,sans-serif;letter-spacing:-1px}.logo.big{width:62px;height:62px;border-radius:18px;margin:auto;font-size:20px}nav{display:grid;gap:5px}nav button,#logout{background:transparent;border:0;text-align:left;padding:12px 14px;border-radius:9px;color:#647187;font:600 13px 'DM Sans';cursor:pointer}nav button:hover,nav button.active{background:#fff0e7;color:#d95813}nav button.active{box-shadow:inset 3px 0 var(--orange)}.pdf{margin-top:auto;padding:13px;border-radius:10px;background:#eaf3fc;color:var(--blue);text-decoration:none;font-weight:700}.sidebar .hidden,.hidden{display:none}main{margin-left:252px;min-height:100vh}header{height:94px;background:white;border-bottom:1px solid var(--line);padding:22px 34px;display:flex;justify-content:space-between;align-items:center}h1{font:800 24px Manrope;margin:5px 0 0;letter-spacing:-.7px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#9aa4b3}.pill{background:#f0f8f4;color:#16845b;padding:9px 12px;border-radius:30px;font-size:11px;font-weight:700}.content{padding:30px;max-width:1400px;margin:auto}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.welcome h2{font:800 23px Manrope;margin:0 0 7px}.welcome p,.muted{color:var(--muted);margin:0}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 7px 24px #17233708}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:22px}.stat{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}.stat span{color:var(--muted);font-size:12px}.stat strong{display:block;font:800 29px Manrope;margin-top:12px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.toolbar input,.toolbar select,input,select,textarea{font:inherit;border:1px solid #dfe5ed;border-radius:9px;padding:11px 12px;background:white;color:var(--ink);width:100%;min-width:0}.toolbar input{max-width:280px}.btn,.primary{background:var(--orange);color:white;border:0;border-radius:9px;padding:11px 15px;font:700 13px 'DM Sans';cursor:pointer}.btn.blue{background:var(--blue)}.btn.secondary{background:#edf1f6;color:#344155}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:13px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}th{background:#f9fafc;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.7px}td{font-size:13px}tr:last-child td{border-bottom:0}.login{max-width:430px;margin:7vh auto;text-align:center;padding:34px}.login h2{font:800 22px Manrope;margin:20px 0 8px}.login p{color:var(--muted);line-height:1.5}.login form{text-align:left;display:grid;gap:15px;margin-top:24px}.login label{font-weight:700;font-size:12px;display:grid;gap:7px}.login button{width:100%}.error{color:#b42318!important;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid label{display:grid;gap:7px;color:#536075;font-size:12px;font-weight:700}.form-grid .wide{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.empty{padding:36px;text-align:center;color:var(--muted)}.timer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.timer-card{background:white;border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center}.timer-card.counter{cursor:pointer;background:linear-gradient(140deg,#fff,#fff5ee)}.timer-label{font-weight:700;color:var(--muted)}.timer-display{font:800 54px Manrope;color:var(--blue);margin:20px}.count-value{font:800 34px Manrope;color:var(--orange)}.timer-help{color:var(--muted);line-height:1.5}.timer-actions{display:flex;gap:9px;justify-content:center;margin-top:18px}#toast{position:fixed;right:20px;bottom:20px;background:#172337;color:#fff;padding:12px 18px;border-radius:10px;display:none;z-index:10}.skill-tabs{display:flex;gap:8px;margin-bottom:16px}.skill-tabs button{padding:10px 16px;border:1px solid var(--line);background:white;border-radius:9px;cursor:pointer}.skill-tabs button.active{background:#fff0e7;border-color:#ffd4bb;color:#cf5310}@media(max-width:850px){.sidebar{position:relative;width:auto;inset:auto;padding:14px;gap:12px}.brand{padding-bottom:5px}nav{grid-template-columns:repeat(3,minmax(0,1fr))}nav button{padding:10px;font-size:12px}.pdf{margin-top:0}main{margin-left:0}header{padding:18px 20px;height:auto}.content{padding:18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.timer-grid{grid-template-columns:1fr}}@media(max-width:500px){nav{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.stats{gap:8px}.stat{padding:14px}.stat strong{font-size:24px}.timer-display{font-size:42px}.pill{display:none}}
/* Usability and layout refinements */
#content{padding:30px;max-width:1440px;margin:0 auto}
.section-gap{margin-top:30px}
.roster-card{margin-bottom:26px}
.roster-card h3{font:800 18px Manrope,sans-serif;margin:0 0 8px}
.roster-card>.muted{margin-bottom:18px}
.roster-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.roster-person{display:flex!important;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}
.roster-person:has(input:checked){border-color:#f5b18b;background:#fff7f2}
.roster-person input{width:17px;height:17px;accent-color:var(--orange);flex:none}
.roster-person span{display:grid;gap:4px}
.roster-person b{font-size:13px;color:var(--ink)}
.roster-person small{font-size:11px;color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #f6b48e;outline-offset:2px}
button:disabled{opacity:.5;cursor:not-allowed}
textarea{resize:vertical;line-height:1.5}
.card h3{font-family:Manrope,sans-serif}
@media(max-width:650px){#content{padding:16px}.roster-list{grid-template-columns:1fr}.roster-controls{grid-template-columns:1fr}.welcome{align-items:flex-start;flex-direction:column}.welcome .btn{width:100%}}

:root{color-scheme:light;--surface:#fff;--input-bg:#fff}
:root[data-theme="dark"]{color-scheme:dark;--ink:#e8edf5;--muted:#9ba9bd;--line:#2a3548;--bg:#0c1220;--white:#111a2b;--surface:#141e30;--input-bg:#101827;--orange:#ff8748;--blue:#78b7ff}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] header,:root[data-theme="dark"] .card,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .timer-card,:root[data-theme="dark"] .table-wrap{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] nav button,:root[data-theme="dark"] #logout{color:#b8c4d6}
:root[data-theme="dark"] nav button:hover,:root[data-theme="dark"] nav button.active,:root[data-theme="dark"] .skill-tabs button.active{background:#3b291f;color:#ffad7a}
:root[data-theme="dark"] .pdf{background:#172d47;color:#a9d2ff}
:root[data-theme="dark"] .pill{background:#17352e;color:#7ce0b5}
:root[data-theme="dark"] .toolbar input,:root[data-theme="dark"] .toolbar select,:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--input-bg);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] th{background:#101827;color:#a4b1c4}
:root[data-theme="dark"] td{border-color:var(--line)}
:root[data-theme="dark"] .btn.secondary,:root[data-theme="dark"] .skill-tabs button{background:#253247;color:#e8edf5;border-color:#334159}
:root[data-theme="dark"] .roster-person{background:#111a2b;border-color:var(--line)}
:root[data-theme="dark"] .roster-person:has(input:checked){background:#35271f;border-color:#a95c35}
:root[data-theme="dark"] .roster-person b{color:var(--ink)}
:root[data-theme="dark"] .timer-card.counter{background:linear-gradient(140deg,#182337,#2a201c)}
:root[data-theme="dark"] .error{color:#ff9a9a!important}
.header-actions{display:flex;align-items:center;gap:12px}
body,.sidebar,header,.card,.stat,.timer-card,.table-wrap,input,select,textarea,nav button,.pdf{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.card,.stat,.timer-card,.roster-person,.btn,nav button{animation:rise-in .42s cubic-bezier(.2,.75,.25,1) both}
.card:nth-child(2),.stat:nth-child(2){animation-delay:.04s}.card:nth-child(3),.stat:nth-child(3){animation-delay:.08s}.card:nth-child(4),.stat:nth-child(4){animation-delay:.12s}
.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .2s ease}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 16px #1723371a}
nav button:hover{transform:translateX(2px)}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}