@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

        :root {
            --bg: #0a0e17; --surface: #111827; --border: #1e2d45;
            --proj: #6366f1; --task: #06b6d4; --done: #22c55e;
            --warn: #f59e0b; --dead: #f43f5e; --note: #a78bfa;
            --text: #e2e8f0;
        }

        body {
            background: var(--bg); color: var(--text);
            font-family: 'Space Mono', monospace; min-height: 100vh;
            background-image:
                radial-gradient(ellipse at 15% 10%, rgba(99,102,241,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 85%, rgba(6,182,212,0.04) 0%, transparent 50%);
        }

        .syne { font-family: 'Syne', sans-serif; }
        .hidden-view { display: none !important; }

        .toggle { position:relative; display:inline-block; width:40px; height:22px; }
        .toggle input { opacity:0; width:0; height:0; }
        .slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:#1e293b; border-radius:22px; transition:.3s; border:1px solid #334155; }
        .slider:before { position:absolute; content:""; height:16px; width:16px; left:2px; bottom:2px; background:#475569; border-radius:50%; transition:.3s; }
        input:checked + .slider { background:rgba(99,102,241,0.3); border-color:var(--proj); }
        input:checked + .slider:before { transform:translateX(18px); background:var(--proj); }

        .board-col { min-height: 300px; }
        .task-card { cursor: pointer; transition: all 0.15s; }
        .task-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
        .task-card.overdue-card { border-left: 3px solid var(--dead) !important; }

        .pri-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
        .pri-low      { background: #22c55e; }
        .pri-medium   { background: #f59e0b; }
        .pri-high     { background: #f43f5e; }
        .pri-critical { background: #ff00ff; }

        .badge { padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
        .badge-todo       { background:rgba(148,163,184,0.15); color:#94a3b8; }
        .badge-inprogress { background:rgba(245,158,11,0.15);  color:var(--warn); }
        .badge-review     { background:rgba(167,139,250,0.15); color:var(--note); }
        .badge-done       { background:rgba(34,197,94,0.15);   color:var(--done); }
        .badge-planning   { background:rgba(99,102,241,0.15);  color:var(--proj); }
        .badge-active     { background:rgba(6,182,212,0.15);   color:var(--task); }
        .badge-onhold     { background:rgba(245,158,11,0.15);  color:var(--warn); }

        .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; }
        .modal-box { background:#111827; border:1px solid #1e2d45; border-radius:12px; padding:28px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; }

        .prog-bg { background:#1e293b; border-radius:4px; height:6px; overflow:hidden; }
        .prog-fill { height:100%; border-radius:4px; background: var(--proj); transition: width 0.4s ease; }

        tr.overdue-row td { background: rgba(244,63,94,0.04); }
        
        /* Clickable row style */
        .clickable-row { cursor: pointer; }
        .clickable-row:hover td { background: rgba(99, 102, 241, 0.08); }

        ::-webkit-scrollbar { width:6px; }
        ::-webkit-scrollbar-track { background:var(--bg); }
        ::-webkit-scrollbar-thumb { background:#1e2d45; border-radius:3px; }
        
        .admin-toggle {
            background: rgba(168, 85, 247, 0.1);
            border: 1px solid rgba(168, 85, 247, 0.3);
        }
        
        /* Notes display in modal */
        .notes-content {
            background: #0a0e17;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            white-space: pre-wrap;
            font-size: 13px;
            line-height: 1.6;
            max-height: 300px;
            overflow-y: auto;
        }
        .notes-content.empty {
            color: #64748b;
            font-style: italic;
        }