*{margin:0;padding:0;box-sizing:border-box}
body{background:#0f172a;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow:hidden;height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#1e293b;border-bottom:1px solid #334155;height:40px;position:relative;z-index:10}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar h1{font-size:1rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.topbar-btns{display:flex;gap:6px}
.btn{padding:4px 10px;border:1px solid #334155;border-radius:6px;background:#1e293b;color:#e2e8f0;font-size:.7rem;cursor:pointer;transition:all .2s}
.btn:hover{background:#334155}
.btn-primary{background:linear-gradient(135deg,#6366f1,#a855f7);border:none;color:#fff;font-weight:600}
.btn-danger{border-color:#ef4444;color:#ef4444}
.btn-danger:hover{background:#ef4444;color:#fff}
.btn-logout{border-color:#64748b;color:#94a3b8}
.layout{display:flex;height:calc(100vh - 40px)}
.sidebar{width:180px;min-width:180px;background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column;overflow-y:auto}
.sidebar-header{padding:10px;font-size:.7rem;color:#94a3b8;font-weight:600;text-transform:uppercase}
.sidebar-item{padding:8px 12px;font-size:.75rem;cursor:pointer;border-left:3px solid transparent;transition:all .2s;display:flex;align-items:center;justify-content:space-between}
.sidebar-item:hover{background:#334155}
.sidebar-item.active{background:#334155;border-left-color:#6366f1;color:#e2e8f0}
.sidebar-item .del-btn{opacity:0;color:#ef4444;font-size:.65rem;transition:opacity .2s}
.sidebar-item:hover .del-btn{opacity:1}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.board{flex:1;overflow-y:auto;padding:16px}
.card{background:#1e293b;border-radius:12px;padding:16px;margin-bottom:12px;border:1px solid #334155;transition:all .2s}
.card:hover{border-color:#475569}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-title{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:6px}
.card-title .status-badge{font-size:.6rem;padding:2px 8px;border-radius:4px;background:#334155;color:#94a3b8;font-weight:500}
.card-title .status-badge.onboard{background:#065f46;color:#6ee7b7}
.card-title .status-badge.offboard{background:#7f1d1d;color:#fca5a5}
.card-controls{display:flex;gap:4px}
.card-controls button{padding:2px 6px;border:none;border-radius:4px;background:transparent;color:#94a3b8;cursor:pointer;font-size:.7rem;transition:all .2s}
.card-controls button:hover{background:#334155;color:#e2e8f0}
.fields{display:grid;gap:6px;margin-bottom:10px}
.field-item{display:flex;flex-direction:column;gap:2px}
.field-item label{font-size:.65rem;color:#64748b;font-weight:500}
.field-item input{padding:6px 8px;border-radius:6px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.75rem;outline:none;transition:border .2s}
.field-item input:focus{border-color:#6366f1}
.field-item.optional{opacity:.7}
.field-item.optional:hover{opacity:1}
.folder-row{display:flex;gap:4px}
.folder-row input{flex:1}
.browse-btn{padding:4px 8px;border:none;border-radius:4px;background:#334155;color:#94a3b8;cursor:pointer;font-size:.65rem;white-space:nowrap}
.browse-btn:hover{background:#475569;color:#e2e8f0}
.folder-link{font-size:.6rem;color:#6366f1;cursor:pointer;margin-top:2px;word-break:break-all}
.folder-link:hover{text-decoration:underline}
.task-section{margin-top:8px}
.task-list{list-style:none;padding:0;margin:0}
.task-list li{padding:6px 8px;border-radius:6px;margin-bottom:4px;background:#0f172a;border:1px solid #1e293b;transition:all .2s}
.task-list li.overdue{border-color:#ef4444;background:rgba(239,68,68,.08)}
.task-list li.pending-active{border-color:#f59e0b;background:rgba(245,158,11,.08)}
.task-row{display:flex;align-items:center;justify-content:space-between}
.task-text{font-size:.75rem;flex:1}
.task-checkboxes{display:flex;gap:8px;margin-left:8px}
.task-checkboxes label{display:flex;align-items:center;gap:2px;font-size:.7rem;color:#94a3b8;cursor:pointer}
.task-checkboxes input[type=checkbox]{width:14px;height:14px;accent-color:#6366f1}
.task-meta{font-size:.6rem;color:#64748b;margin-top:4px;display:flex;gap:8px}
.task-actions{display:flex;gap:4px;margin-top:4px;align-items:center}
.task-actions input[type=text]{width:70px;padding:2px 6px;border-radius:4px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.65rem}
.task-actions input[type=datetime-local]{padding:2px 6px;border-radius:4px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.65rem}
.add-task-form{display:flex;gap:4px;margin-top:6px}
.add-task-form input{flex:1;padding:6px 8px;border-radius:6px;border:1px solid #334155;background:#0f172a;color:#e2e8f0;font-size:.75rem;outline:none}
.add-task-form input:focus{border-color:#6366f1}
.add-task-form button{padding:6px 12px;border:none;border-radius:6px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:.75rem;font-weight:600;cursor:pointer}
.archive-section{margin-top:8px}
.archive-section details summary{font-size:.7rem;color:#64748b;cursor:pointer;padding:4px 0}
.archive-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:4px;background:#0f172a;margin-top:2px;font-size:.7rem}
.arch-content{display:flex;align-items:center;gap:6px}
.arch-date{color:#6366f1;font-size:.6rem}
.restore-btn{padding:2px 6px;border:none;border-radius:4px;background:#334155;color:#94a3b8;cursor:pointer;font-size:.65rem}
.restore-btn:hover{background:#475569;color:#e2e8f0}
.log-area{margin-top:8px}
.log-area details summary{font-size:.7rem;color:#64748b;cursor:pointer;padding:4px 0}
.log-entry{display:flex;gap:6px;padding:2px 0;font-size:.65rem}
.log-date{color:#6366f1;white-space:nowrap}
.log-text{color:#94a3b8}
.timer-panel{background:#1e293b;border-left:1px solid #334155;padding:8px 12px;width:200px;min-width:200px;overflow-y:auto}
.timer-panel.hidden{display:none}
.timer-widget{margin-bottom:6px}
.timer-title{font-size:.7rem;font-weight:600;color:#94a3b8;margin-bottom:4px}
.timer-item{padding:4px 8px;border-radius:4px;background:#0f172a;margin-bottom:2px;font-size:.65rem}
.timer-item.overdue{border-left:3px solid #ef4444}
.timer-item.soon{border-left:3px solid #f59e0b}
.timer-task{font-weight:500;color:#e2e8f0}
.timer-meta{color:#64748b;margin-top:2px}
.timer-project{color:#6366f1}
.settings-bar{display:flex;align-items:center;gap:8px;padding:0 12px}
.settings-bar label{font-size:.65rem;color:#94a3b8}
.settings-bar input[type=range]{width:80px;accent-color:#6366f1}