:root{--blue:#123e77;--blue2:#082b55;--yellow:#ffd321;--bg:#f4f6f8;--text:#172943;--line:#e2e7ee}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px "Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:250px;padding:25px 18px;background:linear-gradient(170deg,var(--blue),var(--blue2));color:#fff;display:flex;flex-direction:column;z-index:10}.brand{display:flex;gap:12px;align-items:center;padding:0 5px 26px;border-bottom:1px solid #ffffff22}.brand>b,.logo{width:44px;height:44px;border-radius:12px;background:var(--yellow);color:var(--blue);display:grid;place-items:center;font-weight:900}.brand strong,.brand small,.account strong,.account small{display:block}.brand strong{font-size:20px}.brand small,.account small{font-size:12px;color:#b5c9df}.brand+nav{padding-top:25px;display:grid;gap:7px}.brand+nav button{height:47px;border:0;border-radius:10px;padding:0 13px;background:transparent;color:#dae6f2;display:flex;align-items:center;gap:12px;text-align:left}.brand+nav button i{width:22px;font-style:normal;font-size:18px;text-align:center}.brand+nav button span{margin-left:auto;background:#ffffff1b;border-radius:20px;padding:3px 8px;font-size:12px}.brand+nav button.active{background:var(--yellow);color:var(--blue);font-weight:800}.account{margin-top:auto;padding:15px 7px 0;border-top:1px solid #ffffff22}.account button{margin-top:12px;background:#ffffff12;border:1px solid #ffffff28;color:#fff;border-radius:8px;padding:7px 13px}.workspace{margin-left:250px;min-height:100vh}.workspace>header{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;padding:0 38px;position:sticky;top:0;z-index:5}.search{max-width:430px;flex:1}.search input{width:100%;border:1px solid var(--line);background:#f6f8fa;border-radius:10px;padding:11px 14px;outline:0}.user-badge,.avatar{width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--blue);display:grid;place-items:center;font-size:12px;font-weight:900;margin-left:auto}.content{max-width:1400px;margin:auto;padding:36px clamp(20px,4vw,55px) 60px}.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.welcome p{margin:0 0 5px;color:#6d7989;text-transform:capitalize}.welcome h1{font-size:30px;margin:0 0 5px}.welcome span{color:#748092}.welcome button,.modal form>button,.install-card form>button{border:0;border-radius:10px;background:var(--yellow);color:var(--blue);font-weight:800;padding:12px 17px;box-shadow:0 5px 15px #123e7720}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px;display:flex;align-items:center;gap:13px}.stat i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-weight:800}.stat .blue{background:#eaf2fc;color:#2768aa}.stat .yellow{background:#fff6c8;color:#8c6800}.stat .red{background:#fff0ee;color:#d13e32}.stat .green{background:#e9f8ef;color:#2c8050}.stat small,.stat strong{display:block}.stat small{font-size:11px;color:#7c8796;font-weight:800}.stat strong{font-size:26px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 3px 12px #15345e0a}.panel-head{padding:21px 23px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{font-size:18px;margin:0}.panel-head span{font-size:12px;color:#7d8897}.task{min-height:96px;margin:0 20px;padding:17px 10px;border-bottom:1px solid #edf0f3;display:flex;align-items:center;gap:15px;position:relative}.task.urgent:before{content:"";position:absolute;left:-20px;width:3px;height:50px;background:#df4035}.task.done{opacity:.55}.task.done h3{text-decoration:line-through}.task>div{flex:1;min-width:0}.task h3{margin:0;font-size:16px}.task p{margin:6px 0;color:#758190;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task footer{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;color:#778494;font-size:12px}.tag{background:#fff5c7;color:#795c00;border-radius:5px;padding:3px 8px;font-weight:700}.late{color:#d33e32;font-weight:700}.delete{border:0;background:transparent;color:#8d98a5;font-size:19px}.check{width:19px;height:19px;accent-color:var(--blue)}.empty{text-align:center;padding:70px 20px;color:#778493}.empty b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin:auto;background:#eaf8ef;color:#2d8051;font-size:22px}.empty h3{color:var(--text);margin:14px 0 5px}.empty p{margin:0}.mobile-menu{display:none}.modal-bg{position:fixed;inset:0;background:#07182b99;z-index:50;display:grid;place-items:center;padding:16px}.modal{position:relative;width:min(590px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:16px;padding:25px}.modal h2{margin:0 0 20px}.close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:26px;color:#6f7b8b}.modal form,.install-card form{display:grid;gap:16px}.modal label,.install-card label{font-weight:650;display:grid;gap:7px}.modal input,.modal select,.modal textarea,.install-card input{width:100%;border:1px solid #ccd4de;border-radius:9px;padding:11px 12px;outline:0}.modal textarea{min-height:80px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.users article{display:flex;align-items:center;gap:13px;padding:17px 20px;border-bottom:1px solid var(--line)}.users .avatar{margin:0}.users article>div:nth-child(2){flex:1}.users strong,.users small{display:block}.users small{color:#748092;margin-top:3px}.users button{border:1px solid #d6dde6;background:#fff;color:var(--blue);border-radius:8px;padding:8px 10px;margin-left:6px}.toast{position:fixed;top:20px;right:20px;z-index:100;background:#173b6a;color:#fff;border-radius:10px;padding:13px 17px;box-shadow:0 10px 30px #0003}.login,.install-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#092c56,#164d87);padding:20px}.login-card,.install-card{width:min(450px,100%);background:#fff;border-radius:20px;padding:35px;box-shadow:0 24px 60px #00183266}.login-card .logo{margin:0 auto 15px}.login-card h1,.login-card>p{text-align:center}.login-card h1{margin:0;font-size:28px}.login-card>p{color:#6e7a89;margin:6px 0 26px}.login-card form{display:grid;gap:16px}.login-card label{display:grid;gap:7px;font-weight:650}.login-card input{border:1px solid #cbd4df;border-radius:10px;padding:12px}.login-card button{border:0;border-radius:10px;background:var(--yellow);color:var(--blue);font-weight:900;padding:13px}.login-card #error{color:#c9342b;text-align:center;min-height:18px}.install-card{width:min(650px,100%)}.install-brand{display:flex;align-items:center;gap:13px;margin-bottom:25px}.install-brand>b{width:48px;height:48px;border-radius:12px;background:var(--yellow);color:var(--blue);display:grid;place-items:center}.install-brand h1,.install-brand p{margin:0}.install-brand p{color:#708092}.install-card hr{border:0;border-top:1px solid var(--line);width:100%}.section-label{font-weight:800;color:var(--blue);margin:0}.alert.error{background:#fff0ee;color:#b82f27;padding:11px;border-radius:8px;margin-bottom:15px}.loading{padding:40px;text-align:center}
@media(max-width:850px){.stats{grid-template-columns:1fr 1fr}.workspace>header{padding:0 20px}.content{padding:28px 20px}}
@media(max-width:680px){aside{transform:translateX(-105%);transition:.2s;width:280px}aside.open{transform:translateX(0)}.workspace{margin-left:0}.content{padding:22px 14px}.workspace>header{height:64px}.mobile-menu{display:block;position:fixed;left:14px;bottom:18px;z-index:20;width:48px;height:48px;border:0;border-radius:50%;background:var(--yellow);color:var(--blue);font-size:22px;box-shadow:0 6px 20px #001a3855}.welcome{align-items:flex-start}.welcome h1{font-size:25px}.welcome>button{font-size:0;width:45px;height:43px;padding:0}.welcome>button:first-letter{font-size:23px}.stats{gap:8px}.stat{padding:12px 9px;gap:8px}.stat i{width:37px;height:37px}.stat strong{font-size:22px}.task{margin:0 12px;padding:16px 2px;align-items:flex-start}.task.urgent:before{left:-12px}.task p{white-space:normal}.two{grid-template-columns:1fr}.users article{flex-wrap:wrap}.users article>div:nth-child(2){min-width:calc(100% - 55px)}}
