:root{--bg:#fafaf8;--card:#fff;--border:#e5e3db;--text:#1f1e1b;--text2:#6b6a64;--text3:#9a9890;--accent:#c15f3c;--accent-soft:#f7e7df;--danger:#b3261e;--overlay:rgba(30,29,26,.45);color-scheme:light}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button,input,select{font-family:inherit}input,select{font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);width:100%}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:0}label{font-size:11.5px;font-weight:600;color:var(--text2);display:block;margin:12px 0 4px}.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 60px}h1{font-size:20px;margin:0 0 2px}h1,h2{font-weight:600}h2{font-size:14px;margin:28px 0 10px}.sub{font-size:13px;color:var(--text2);margin:0 0 14px}.board-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.tab{font-size:12.5px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:none;color:var(--text2);cursor:pointer;white-space:nowrap}.tab:hover{border-color:var(--text3);color:var(--text)}.tab.sel{background:var(--card);border-color:var(--text);color:var(--text);font-weight:600}.tab.add{border-style:dashed;color:var(--text3)}.tab.add:hover{color:var(--accent);border-color:var(--accent)}.topbar{align-items:flex-start;justify-content:space-between;gap:12px}.actions,.topbar{display:flex;flex-wrap:wrap}.actions{gap:8px}.btn{font-size:12.5px;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;white-space:nowrap}.btn:hover{border-color:var(--text3)}.btn:disabled{opacity:.35;cursor:default}.btn:disabled:hover{border-color:var(--border)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.small{font-size:11.5px;padding:4px 10px}.toolbar{flex-wrap:wrap;gap:8px;margin-bottom:14px}.filter-btn,.toolbar{display:flex;align-items:center}.filter-btn{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;gap:6px;transition:opacity .15s}.filter-btn.off{opacity:.35}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.today-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:8px;gap:8px;margin-bottom:4px}.today-card{display:flex;gap:8px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 11px}.today-body{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}.today-body b{font-size:12.5px;margin-right:2px;width:100%}.today-task{font-size:11px;border-radius:6px;border:1px solid transparent;padding:2px 7px;cursor:pointer;word-break:break-word}.today-task.done{opacity:.5;text-decoration:line-through}.today-none{font-size:11px;color:var(--text3);font-style:italic}.today-off{font-size:12.5px;color:var(--text2);background:var(--card);border:1px dashed var(--border);border-radius:10px;padding:9px 12px;margin:0 0 4px}.milestones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}.milestone{display:flex;align-items:center;gap:8px;font-size:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:7px 11px;cursor:pointer}.milestone b{font-weight:600}.milestone .m-date{color:var(--text2);white-space:nowrap}.milestone.past{border-color:var(--danger)}.milestone.past .m-date{color:var(--danger);font-weight:600}.scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--card);padding:12px 0 16px}.board{width:max-content;min-width:100%}.row{display:flex}.label-spacer,.person-label{width:150px;flex:none;position:-webkit-sticky;position:sticky;left:0;background:var(--card);z-index:3;padding-left:12px}.days-header{flex:none;display:flex;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:6px}.day-head{flex:none;text-align:center;font-size:11px;color:var(--text2);font-weight:600;border-radius:8px;padding:3px 0;position:relative}.gap-mark{position:absolute;left:0;top:-2px;transform:translateX(-50%);font-size:9px;line-height:1;padding:3px 5px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--text3);font-weight:600;cursor:help;z-index:2}.gap-mark.hol{color:var(--danger);border-color:var(--danger)}.day-head b{display:block;font-size:13px;color:var(--text);font-weight:600;margin-bottom:1px}.day-head.today{background:var(--accent-soft)}.day-head.today b{color:var(--accent)}.flag-area{flex:none;position:relative;height:20px}.flag{position:absolute;transform:translateX(-50%);font-size:13px;cursor:pointer;line-height:20px}.person-row{margin-bottom:14px}.person-label{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;padding-top:2px}.person-label .edit-link{font-size:10.5px;font-weight:400;color:var(--text3);cursor:pointer;display:block;margin-top:1px}.person-label .edit-link:hover{color:var(--accent)}.mini-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:9px;padding:0 2px;vertical-align:middle}.mini-btn:hover{color:var(--accent)}.month-sel{width:auto;font-size:12px;padding:5px 10px;border-radius:999px;cursor:pointer}.avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:none}.role{display:block;font-size:10.5px;font-weight:400;color:var(--text2)}.person-canvas{flex:none;padding:2px 0 4px}.tasks-grid{display:grid;grid-row-gap:4px;row-gap:4px;align-content:start;grid-auto-flow:row dense;grid-auto-rows:min-content}.chip{border-radius:7px;border:1px solid transparent;padding:4px 7px;margin:0 3px;min-width:0;font-size:11px;line-height:1.35;cursor:-webkit-grab;cursor:grab;word-break:break-word;position:relative;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none}.chip.done{opacity:.45;text-decoration:line-through}.chip-status,.chip-title{font-weight:600}.chip-status{display:inline-block;width:100%;font-size:9px;letter-spacing:.02em;opacity:.75;margin-top:2px;text-transform:uppercase}.chip-status.st-selesai{opacity:.9}.chip-status.st-belum{opacity:.55}.chip-prio.pr-high{color:var(--danger);font-weight:700}.chip-prio.pr-low{opacity:.65}.chip.prio-high{box-shadow:inset 3px 0 0 var(--danger)}.dim-row .chip{opacity:.12}.chip .rz{position:absolute;top:0;bottom:0;width:8px;opacity:0;cursor:ew-resize}.chip .rz-l{left:0;border-radius:7px 0 0 7px}.chip .rz-r{right:0;border-radius:0 7px 7px 0}.chip:hover .rz{opacity:1;background:rgba(0,0,0,.1)}.chip.dragging{cursor:-webkit-grabbing;cursor:grabbing;outline:2px solid var(--accent);opacity:.95;z-index:4;box-shadow:0 4px 14px rgba(0,0,0,.18)}.person-row.drop-target .person-canvas{outline:2px dashed var(--accent);outline-offset:-1px;border-radius:8px;background-color:var(--accent-soft)}.add-grid{display:grid;margin-top:6px}.cell-add{border:1px dashed var(--border);background:none;color:var(--text3);border-radius:7px;font-size:12px;line-height:1;padding:3px 0;margin:0 3px;cursor:pointer;opacity:.4}.cell-add:hover{opacity:1;color:var(--accent);border-color:var(--accent)}.empty-note{font-size:12.5px;color:var(--text3);padding:6px 0 2px}.c0{background:#eeedfe;color:#26215c;border-color:#afa9ec}.c1{background:#e1f5ee;color:#04342c;border-color:#5dcaa5}.c2{background:#faece7;color:#4a1b0c;border-color:#f0997b}.c3{background:#fbeaf0;color:#4b1528;border-color:#ed93b1}.c4{background:#e8f1fb;color:#122f55;border-color:#8ab5e6}.c5{background:#fbf3dc;color:#4a3a0c;border-color:#dfc469}.c6{background:#e0f4f4;color:#0c3d3d;border-color:#6fc6c6}.c7{background:#efefed;color:#33322e;border-color:#b9b7ae}.dot-c0{background:#7f77dd}.dot-c1{background:#1d9e75}.dot-c2{background:#d85a30}.dot-c3{background:#d4537e}.dot-c4{background:#5b93d6}.dot-c5{background:#c7a93e}.dot-c6{background:#3fa9a9}.dot-c7{background:#8a887f}.overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px 22px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto}.modal h3{margin:0 0 4px;font-size:15px}.modal .hint{font-size:12px;color:var(--text2);margin:0 0 6px}.modal-actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;grid-gap:0 10px;gap:0 10px}.color-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}.color-pick{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}.color-pick.sel{border-color:var(--text)}.err{color:var(--danger);font-size:12px;margin-top:10px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px 28px;width:100%;max-width:360px}.login-card h1{font-size:18px;margin-bottom:10px}.auth-tabs{display:flex;gap:6px;margin-bottom:6px}.activity{margin-top:18px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px}.activity summary{font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.activity summary:hover{color:var(--text)}.activity ul{list-style:none;margin:10px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px}.activity li{font-size:12px;color:var(--text2);line-height:1.45}.activity li b{color:var(--text);font-weight:600}.act-time{margin-left:8px;white-space:nowrap}.act-time,footer{color:var(--text3);font-size:11px}footer{margin-top:16px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:12.5px;padding:9px 16px;border-radius:999px;z-index:60;box-shadow:0 4px 14px rgba(0,0,0,.25);max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:toast-in .18s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:640px){.wrap{padding:16px 10px 40px}.topbar{flex-direction:column}h1{font-size:17px}.sub{font-size:12px}h2{margin:22px 0 8px}.btn{padding:6px 11px}.btn,.tab{font-size:12px}.tab{padding:5px 12px}.label-spacer,.person-label{width:96px}.person-label{font-size:12px;padding-left:8px;gap:6px}.avatar{width:20px;height:20px}.avatar,.role{font-size:10px}.chip .rz{width:12px}.modal{padding:16px 16px 18px}.today-grid{grid-template-columns:1fr}.milestone{font-size:11.5px;padding:6px 9px}}