:root{--bg:#f7f7fa;--panel:#fff;--ink:#20202a;--muted:#777785;--line:#e7e7ed;--purple:#7357ea;--purple-soft:#eeeaff;--shadow:0 12px 35px rgba(32,25,64,.08)}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg);font-size:14px}.hidden{display:none!important}button,input,textarea,select{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;background:#fafafd;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:24px 16px 18px;z-index:4}.brand{display:flex;align-items:center;gap:10px;font:800 19px Manrope;margin:0 8px 28px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,#8e71ff,#6040d8);color:#fff;font:800 16px Manrope;box-shadow:0 5px 12px #7257ea50}.brand-mark.large{width:46px;height:46px;border-radius:14px;font-size:23px;margin-bottom:28px}.main-nav,.project-list{display:flex;flex-direction:column;gap:4px}.main-nav button,.project-list button,.sidebar-footer>button{border:0;background:transparent;color:#696877;border-radius:8px;padding:10px 12px;text-align:left;display:flex;align-items:center;gap:10px;font-weight:500}.main-nav button:hover,.project-list button:hover,.sidebar-footer>button:hover{background:#f0eefb;color:#3f345e}.main-nav .active{background:var(--purple-soft);color:#5d46c9;font-weight:700}.nav-icon{font-size:18px}.count-pill{margin-left:auto;background:#e6e3ee;border-radius:9px;padding:1px 7px;font-size:11px}.sidebar-label{margin:28px 10px 10px;display:flex;justify-content:space-between;align-items:center;color:#aaa9b5;font-size:11px;font-weight:700;letter-spacing:.1em}.sidebar-label button{border:0;background:none;font-size:18px;color:#777}.project-list button.active{color:#34313d;font-weight:700;background:#f2f1f6}.project-list i{width:8px;height:8px;border-radius:50%;display:block}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column}.sidebar-footer>button{padding:8px 12px}.user{border-top:1px solid var(--line);margin-top:12px;padding:18px 8px 0;display:flex;align-items:center;gap:10px;position:relative}.avatar,.avatars span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e5d8ce;color:#654839;font-size:11px;font-weight:700}.user div:nth-child(2){display:flex;flex-direction:column}.user strong{font-size:12px}.user small{font-size:10px;color:#999}.online{width:8px;height:8px;border-radius:50%;background:#2ebd85;position:absolute;left:32px;bottom:1px;border:2px solid #fff}main{grid-column:2;min-width:0}.topbar{height:76px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);display:flex;align-items:center;gap:18px;padding:0 34px;position:sticky;top:0;z-index:3;backdrop-filter:blur(12px)}.search{height:40px;max-width:420px;flex:1;display:flex;align-items:center;gap:10px;background:#f5f5f8;border:1px solid #ededf1;border-radius:9px;padding:0 12px;color:#999}.search input{border:0;outline:0;background:transparent;flex:1;min-width:80px}.search kbd{background:#fff;border:1px solid #dddde5;border-radius:5px;padding:2px 6px;font-size:10px;color:#999}.icon-btn{margin-left:auto;border:0;background:none;font-size:19px;color:#666;position:relative}.notification{margin-left:auto}.notification i{position:absolute;width:6px;height:6px;border-radius:50%;background:#795de8;right:2px;top:1px}.primary,.secondary{border-radius:8px;padding:10px 16px;border:1px solid transparent;font-weight:700}.primary{background:#6d52dc;color:#fff;box-shadow:0 4px 10px #6d52dc25}.primary:hover{background:#5f44cf}.secondary{background:#fff;border-color:#dddde6;color:#4f4e5b}.workspace{padding:34px 34px 50px}.project-head{display:flex;justify-content:space-between;align-items:center}.title-row{display:flex;align-items:center;gap:12px}.project-dot{width:11px;height:11px;border-radius:4px}.project-head h1{font:800 25px Manrope;margin:0}.project-head p{color:#898894;margin:7px 0 0 24px}.more{border:0;background:none;color:#aaa;font-weight:bold}.head-actions{display:flex;align-items:center;gap:12px}.avatars{display:flex}.avatars span{border:2px solid white;margin-left:-8px;background:#dcd4ed}.avatars span:first-child{margin:0}.avatars span:nth-child(2){background:#d7e9e3}.avatars span:nth-child(3){background:#eeeef1}.viewbar{margin-top:28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.view-tabs,.view-tools{display:flex;gap:5px}.view-tabs button,.view-tools button{border:0;background:none;padding:11px 12px;color:#878692}.view-tabs .active{color:#644bd1;font-weight:700;border-bottom:2px solid #7357ea}.board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:16px;padding-top:22px;align-items:start;overflow-x:auto}.column{min-width:230px;background:#f0f0f4;border-radius:12px;padding:12px}.column-head{display:flex;align-items:center;gap:8px;padding:2px 3px 12px;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%}.column-head .total{color:#aaa;font-size:11px}.column-head button{margin-left:auto;border:0;background:none;color:#aaa;font-size:18px}.cards{min-height:70px;display:flex;flex-direction:column;gap:9px}.task-card{background:#fff;border:1px solid #e7e7ed;border-radius:10px;padding:14px;box-shadow:0 2px 5px rgba(37,34,53,.025);cursor:grab;transition:.15s}.task-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#dcd8ee}.task-card.dragging{opacity:.45}.column.drag-over{background:#eae7f7}.task-card h3{font-size:13px;margin:0 0 7px;line-height:1.4}.task-card p{color:#888793;font-size:11px;line-height:1.5;margin:0 0 12px}.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{padding:3px 7px;border-radius:5px;background:#edf2fc;color:#5470a1;font-size:9px;font-weight:700;text-transform:uppercase}.tag:nth-child(2n){background:#f1ecfb;color:#7959a0}.card-meta{display:flex;align-items:center;margin-top:14px;padding-top:10px;border-top:1px solid #f0f0f3;color:#999;font-size:10px}.priority{display:flex;align-items:center;gap:5px}.priority:before{content:'';width:6px;height:6px;border-radius:50%;background:#e0a53d}.priority.high:before{background:#e06262}.priority.low:before{background:#55ad91}.due{margin-left:auto}.delete-task{border:0;background:none;color:#bbb;margin-left:6px;padding:0;opacity:0}.task-card:hover .delete-task{opacity:1}.add-inline{width:100%;border:0;background:none;color:#9796a2;padding:10px;text-align:left;border-radius:7px;font-size:12px}.add-inline:hover{background:#e7e7ed;color:#555}.empty{color:#aaa;text-align:center;font-size:11px;padding:20px 5px}.login-screen{min-height:100vh;display:grid;place-items:center;background:#f6f4fb;position:relative;overflow:hidden}.login-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:430px;height:430px;background:#ded5ff;top:-180px;right:-90px}.orb-two{width:360px;height:360px;background:#d7efe7;bottom:-180px;left:-80px}.login-card{position:relative;width:min(430px,calc(100% - 32px));background:rgba(255,255,255,.92);padding:48px;border:1px solid #fff;border-radius:22px;box-shadow:0 30px 80px rgba(57,43,105,.14);backdrop-filter:blur(20px)}.eyebrow{font-size:10px!important;letter-spacing:.15em!important;color:#795ee3!important;font-weight:800!important;margin:0 0 8px!important}.login-card h1{font:800 32px Manrope;margin:0}.login-copy{color:#7e7c89;line-height:1.55;margin:10px 0 30px}.login-card label,dialog label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#5d5b68}.password-wrap{display:flex;border:1px solid #dcdbe3;border-radius:9px;margin-top:8px;background:white}.password-wrap input{border:0;outline:0;padding:12px;flex:1;background:transparent}.password-wrap button{border:0;background:none;color:#aaa;padding:0 12px}.login-btn{width:100%;margin-top:8px;display:flex;justify-content:space-between}.form-error{height:16px;color:#d54e4e;font-size:11px;margin:7px 0}.hint{text-align:center;color:#aaa;font-size:10px;margin:15px 0 0}.hint code{background:#f1eff6;padding:2px 5px;border-radius:3px}dialog{border:0;border-radius:16px;padding:0;width:min(510px,calc(100% - 30px));box-shadow:0 25px 80px rgba(20,15,45,.24)}dialog::backdrop{background:rgba(31,28,43,.4);backdrop-filter:blur(4px)}dialog form{padding:26px;display:flex;flex-direction:column;gap:18px}.modal-head{display:flex;justify-content:space-between}.modal-head h2{font:800 22px Manrope;margin:0}.modal-head button{border:0;background:#f3f2f6;border-radius:50%;width:30px;height:30px;font-size:20px}dialog input,dialog textarea,dialog select{border:1px solid #dedde5;border-radius:8px;padding:11px;outline:0;background:#fff}dialog textarea{resize:vertical;min-height:85px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.toast{position:fixed;right:24px;bottom:24px;background:#292632;color:#fff;padding:11px 16px;border-radius:8px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:none}#mobile-menu{display:none}@media(max-width:900px){.board{grid-template-columns:repeat(4,270px)}.workspace{padding:26px 20px}.topbar{padding:0 20px}}@media(max-width:680px){.app{display:block}.sidebar{transform:translateX(-100%);transition:.2s;box-shadow:20px 0 50px #2223}.sidebar.open{transform:none}.app main{width:100%}#mobile-menu{display:block;margin:0}.notification{display:none}.topbar{height:64px;gap:8px}.topbar .primary{padding:9px 10px}.search kbd{display:none}.project-head{align-items:flex-start}.head-actions .avatars{display:none}.project-head h1{font-size:21px}.workspace{padding:22px 15px}.view-tools button:nth-child(2){display:none}.login-card{padding:34px 28px}.form-grid{grid-template-columns:1fr}}
