:root{--purple:#b16ff0;--purple-soft:#c990f5;--purple-dim:#b16ff01a;--done:#4ade80;--missing:#f87171;--text:#f0f0f0;--muted:#555;--border:#1c1c1c}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background:#0a0a0a;min-height:100vh;padding-bottom:60px;font-family:Plus Jakarta Sans,sans-serif}#particle-bg{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}.banner{background:#0a0a0a;justify-content:center;align-items:center;width:100%;height:280px;display:flex;position:relative;overflow:hidden}.banner canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.banner-content{z-index:2;flex-direction:column;align-items:center;display:flex;position:relative}.banner-title{letter-spacing:-5px;color:#fff;text-align:center;font-size:clamp(64px,10vw,130px);font-weight:800;line-height:1}.glow-line{background:linear-gradient(90deg,#0000,#7c3aed,#b16ff0,#c990f5,#b16ff0,#7c3aed,#0000);width:600px;max-width:90%;height:2px;margin-top:2px;position:relative}.glow-line:before{content:"";background:inherit;filter:blur(8px);opacity:.8;position:absolute;inset:-4px 10%}.glow-line:after{content:"";filter:blur(4px);background:radial-gradient(#c990f5 0%,#b16ff0 30%,#0000 70%);width:140px;height:14px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}nav{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a0a0aeb;border-bottom:1px solid #1a1a1a;justify-content:space-between;align-items:center;padding:13px 40px;display:flex;position:sticky;top:0}.nav-left{align-items:center;gap:12px;display:flex}.nav-logo svg{width:auto;height:22px;display:block}.nav-div{background:#2a2a2a;width:1px;height:16px}.nav-client{color:var(--purple);background:var(--purple-dim);letter-spacing:.5px;border:1px solid #b16ff040;border-radius:100px;padding:3px 10px;font-size:11px;font-weight:700}.nav-right{align-items:center;gap:10px;display:flex}.nav-pct{color:var(--purple);font-size:13px;font-weight:800;transition:color .4s}.nav-track{background:#1a1a1a;border-radius:100px;width:100px;height:3px;overflow:hidden}.nav-fill{background:linear-gradient(90deg,#8b3ff0,var(--purple-soft));width:0%;height:100%;transition:width .5s}.page-wrap{z-index:1;flex-direction:column;align-items:center;padding:48px 24px 80px;display:flex;position:relative}.main-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0e0e0eed;border:1px solid #222;border-radius:20px;width:100%;max-width:980px;overflow:hidden}.hero{border-bottom:1px solid #1a1a1a;padding:36px 40px 28px}.eyebrow{letter-spacing:2px;text-transform:uppercase;color:var(--purple);align-items:center;gap:8px;margin-bottom:14px;font-size:10px;font-weight:700;display:inline-flex}.pulse{background:var(--purple);border-radius:50%;width:5px;height:5px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}.hero h1{letter-spacing:-2px;margin-bottom:10px;font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.05}.hero h1 em{color:var(--purple);font-style:normal}.hero p{color:var(--muted);max-width:440px;margin-bottom:22px;font-size:13px;line-height:1.7}.prog-top{justify-content:space-between;align-items:baseline;margin-bottom:7px;display:flex}.prog-label{color:var(--muted);font-size:11px;font-weight:600}.prog-pct{color:var(--purple);font-size:18px;font-weight:800;transition:color .4s}.prog-track{background:#1a1a1a;border-radius:100px;height:4px;overflow:hidden}.prog-fill{background:linear-gradient(90deg,#8b3ff0,var(--purple-soft));width:0%;height:100%;transition:width .6s}.stats{gap:18px;margin-top:10px;display:flex}.stat{color:var(--muted);align-items:center;gap:5px;font-size:11px;display:flex}.stat-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.stat strong{color:var(--text);font-weight:700}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:24px 32px 32px;display:grid}.card{background:#0d0d0d;border:1px solid #1c1c1c;border-radius:12px;transition:border-color .2s,transform .18s;position:relative}.card:hover{border-color:#b16ff04d;transform:translateY(-2px)}.card-head{z-index:1;border-bottom:1px solid #161616;justify-content:space-between;align-items:center;padding:12px 14px 10px;display:flex;position:relative}.card-title-g{align-items:center;gap:8px;display:flex}.card-icon{background:var(--purple-dim);border:1px solid #b16ff021;border-radius:7px;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;display:flex}.card-title{font-size:12px;font-weight:700}.card-cnt{color:var(--muted);background:#141414;border:1px solid #1c1c1c;border-radius:100px;padding:2px 7px;font-size:9px;font-weight:600}.item{z-index:1;border-bottom:1px solid #ffffff06;transition:background .12s;position:relative}.item:last-child{border-bottom:none}.item:hover{background:#ffffff05}.item.done{background:#4ade8005}.item-top{grid-template-columns:1fr auto auto;align-items:center;gap:7px;padding:8px 13px 5px;display:grid}.item-name-wrap{align-items:center;gap:5px;min-width:0;display:flex;position:relative}.item-name{color:#ccc;white-space:nowrap;text-overflow:ellipsis;max-width:150px;font-size:11px;font-weight:500;transition:color .3s;overflow:hidden}.item.done .item-name{color:#444;-webkit-text-decoration:line-through #222;text-decoration:line-through #222}.badge{white-space:nowrap;border-radius:100px;flex-shrink:0;padding:2px 7px;font-size:8px;font-weight:700;transition:all .3s}.b-miss{color:var(--missing);background:#f8717114;border:1px solid #f871712e}.b-done{color:var(--done);background:#4ade8014;border:1px solid #4ade802e}.up-wrap{flex-shrink:0}.up-wrap label{color:#444;cursor:pointer;white-space:nowrap;z-index:2;background:#141414;border:1px solid #1e1e1e;border-radius:5px;align-items:center;gap:3px;padding:3px 8px;font-size:9px;font-weight:700;transition:all .15s;display:flex;position:relative}.up-wrap label:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}.up-wrap label.uploaded{color:var(--done);background:#4ade800d;border-color:#4ade804d}.up-wrap input[type=file]{display:none}.mark-btn{color:#444;cursor:pointer;white-space:nowrap;z-index:2;background:#141414;border:1px solid #1e1e1e;border-radius:5px;padding:3px 8px;font-family:inherit;font-size:9px;font-weight:700;transition:all .15s;position:relative}.mark-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}.mark-btn.done{color:var(--done);background:#4ade800d;border-color:#4ade804d}.tip-wrap{flex-shrink:0;position:relative}.tip-btn{color:#444;cursor:help;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;transition:all .15s;display:flex}.tip-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}.tip-text{color:#f0f0f0;z-index:1000;pointer-events:none;white-space:normal;text-align:left;background:#1a1a1a;border:1px solid #333;border-radius:10px;min-width:180px;max-width:260px;padding:10px 14px;font-size:11px;line-height:1.5;display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);box-shadow:0 12px 24px #000c}.tip-text:after{content:"";border:5px solid #0000;border-top-color:#2a2a2a;position:absolute;top:100%;left:50%;transform:translate(-50%)}.tip-wrap:hover .tip-text{display:block}.item-date{align-items:center;gap:5px;padding:0 13px 7px;display:flex}.date-lbl{color:#2a2a2a;text-transform:uppercase;letter-spacing:1px;font-size:8px;font-weight:600}.date-input{color:#333;cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit;font-size:9px}.date-input:focus{color:var(--purple)}.date-input::-webkit-calendar-picker-indicator{filter:invert(.15);cursor:pointer;opacity:.5}.preview{background:#0a0a0a;border:1px solid #1e1e1e;border-radius:6px;margin:0 13px 8px;display:none;overflow:hidden}.preview.show{display:block}.preview img{object-fit:cover;width:100%;max-height:100px;display:block}.preview video{width:100%;max-height:90px;display:block}.preview-doc{color:#555;align-items:center;gap:8px;padding:8px 10px;font-size:9px;display:flex}.card-link{padding:4px 13px 8px}.card-link input{color:#444;background:0 0;border:none;border-bottom:.5px solid #1a1a1a;outline:none;width:100%;padding:3px 0;font-family:inherit;font-size:10px;transition:all .2s}.card-link input:focus{color:var(--text);border-bottom-color:#b16ff059}.card-link input::placeholder{color:#222}.footer-bar{z-index:200;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0a0a0af5;border-top:1px solid #161616;justify-content:space-between;align-items:center;padding:11px 40px;display:flex;position:fixed;bottom:0;left:0;right:0}.footer-left{color:var(--muted);font-size:12px}.footer-left strong{color:var(--text);font-weight:700}.footer-logo svg{opacity:.2;width:auto;height:16px;display:block}.toast{color:var(--done);opacity:0;pointer-events:none;z-index:300;white-space:nowrap;background:#161616;border:1px solid #4ade8040;border-radius:100px;padding:8px 16px;font-size:11px;font-weight:600;transition:all .3s;position:fixed;bottom:54px;left:50%;transform:translate(-50%)translateY(16px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.card:before{content:"";background:linear-gradient(var(--angle),transparent 20%,#7c3aed 40%,#b16ff0 50%,#c990f5 60%,transparent 80%);-webkit-mask-composite:xor;opacity:0;pointer-events:none;z-index:0;border-radius:12px;padding:1px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card:hover:before{opacity:1;animation:3s linear infinite spin-border}@keyframes spin-border{to{--angle:360deg}}@media (width<=640px){nav{padding:12px 20px}.page-wrap{padding:24px 12px 80px}.hero{padding:24px 20px 20px}.grid{grid-template-columns:1fr;padding:16px 16px 24px}.footer-bar{padding:11px 20px}}#login-overlay{z-index:9999;background:#080808;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}#login-overlay.hidden{display:none}.login-glow{pointer-events:none;z-index:1;background:radial-gradient(#783cdc2e 0%,#b16ff014 40%,#0000 70%);width:600px;height:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.login-box{z-index:10;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#0a0a0ad9;border:1px solid #ffffff12;border-radius:18px;flex-direction:column;gap:18px;width:100%;max-width:340px;padding:36px 32px 32px;display:flex;position:relative;box-shadow:0 0 0 1px #b16ff014,0 32px 64px #0009}.login-logo{justify-content:center;margin-bottom:2px;display:flex}.login-logo svg{width:auto;height:44px}.login-title{text-align:center}.login-title h2{color:#fff;letter-spacing:-.5px;margin-bottom:3px;font-size:17px;font-weight:700}.login-title p{color:#3a3a3a;font-size:11px}.login-field{flex-direction:column;gap:6px;display:flex}.login-field label{color:#444;letter-spacing:.5px;text-transform:uppercase;font-size:10px;font-weight:600}.login-field input{color:#f0f0f0;background:#ffffff08;border:1px solid #1e1e1e;border-radius:8px;outline:none;padding:10px 14px;font-family:inherit;font-size:13px;transition:border-color .2s,box-shadow .2s}.login-field input:focus{border-color:#b16ff080;box-shadow:0 0 0 3px #b16ff014}.login-field input::placeholder{color:#2a2a2a}.login-error{color:var(--missing);text-align:center;font-size:11px;display:none}.login-error.show{display:block}.login-btn{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,#6d28d9,#b16ff0);border:none;border-radius:8px;margin-top:2px;padding:12px;font-family:inherit;font-size:13px;font-weight:700;transition:opacity .2s,transform .15s}.login-btn:hover{opacity:.9;transform:translateY(-1px)}.login-btn:active{opacity:.75;transform:translateY(0)}.login-footer{text-align:center;color:#222;font-size:10px}input,button{font-family:inherit}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:1s linear infinite spin}@keyframes fade-in{0%{opacity:0;filter:blur(15px);transform:translateY(30px)scale(.96)}20%{opacity:0}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.fade-in{animation:1s cubic-bezier(.16,1,.3,1) both fade-in}