*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f0f1a;--surface:#1a1a2e;--surface2:#252540;--border:#2d2d4a;--text:#e0e0e0;--text2:#888;--primary:#7c3aed;--primary-hover:#6d28d9;--danger:#ef4444;--danger-hover:#dc2626;--backlog:#6b7280;--in-progress:#3b82f6;--review:#f59e0b;--done:#10b981}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.hidden{display:none!important}
.screen{min-height:100vh}

/* Login */
#login-screen{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0f1a 0%,#1a1a3e 100%)}
.login-card{background:var(--surface);padding:48px;border-radius:16px;width:100%;max-width:420px;border:1px solid var(--border);box-shadow:0 24px 48px rgba(0,0,0,.4)}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(--text2);margin-bottom:24px;font-size:14px}
#login-form{display:flex;flex-direction:column;gap:12px}
#login-form input{padding:12px 16px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:15px;outline:none;transition:border .2s}
#login-form input:focus{border-color:var(--primary)}
#login-form button{padding:12px;border-radius:8px;border:none;background:var(--primary);color:white;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
#login-form button:hover{background:var(--primary-hover)}
#login-form button:disabled{opacity:.6;cursor:not-allowed}
.message{margin-top:16px;padding:12px;border-radius:8px;font-size:14px}
.message.success{background:#10b98120;color:#10b981;border:1px solid #10b98140}
.message.error{background:#ef444420;color:#ef4444;border:1px solid #ef444440}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(15,15,26,.85)}
body.light header{background:rgba(255,255,255,.9)}
.header-left{display:flex;align-items:center;gap:10px}
.header-left h1{font-size:18px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-right{display:flex;align-items:center;gap:12px}
#user-email{color:var(--text2);font-size:13px}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}
.btn-ghost:hover{border-color:var(--text2);color:var(--text)}

/* Board */
.board{display:flex;gap:20px;padding:24px;overflow-x:auto;min-height:calc(100vh - 65px);align-items:flex-start}
.column{background:var(--surface);border-radius:12px;min-width:280px;max-width:320px;flex:1;display:flex;flex-direction:column;border:1px solid var(--border)}
.column-header{display:flex;align-items:center;gap:8px;padding:18px 16px 14px}
.column-header h2{font-size:13px;font-weight:700;flex:1;text-transform:uppercase;letter-spacing:.06em}
.column-count{background:var(--surface2);color:var(--text2);font-size:11px;padding:2px 10px;border-radius:10px;font-weight:600}
.column-dot{width:10px;height:10px;border-radius:50%}
.column-dot.backlog{background:var(--backlog)}
.column-dot.in-progress{background:var(--in-progress)}
.column-dot.review{background:var(--review)}
.column-dot.done{background:var(--done)}
.card-list{flex:1;padding:0 12px 12px;min-height:60px;display:flex;flex-direction:column;gap:8px}
.card-list.drag-over{background:rgba(124,58,237,.08);border-radius:8px}

/* Cards */
.card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:all .2s;user-select:none;position:relative;overflow:hidden;-webkit-tap-highlight-color:rgba(124,58,237,.2);touch-action:manipulation}
.card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:10px 0 0 10px;pointer-events:none}
.column[data-column="backlog"] .card::before{background:var(--backlog)}
.column[data-column="in-progress"] .card::before{background:var(--in-progress)}
.column[data-column="review"] .card::before{background:var(--review)}
.column[data-column="done"] .card::before{background:var(--done)}
.card:hover{border-color:#7c3aed60;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.card.dragging{opacity:.5;transform:rotate(2deg)}
.card-title{font-size:14px;font-weight:600;margin-bottom:4px;line-height:1.4;padding-left:8px}
.card-assignee{font-size:12px;color:var(--text2);margin-bottom:6px;display:flex;align-items:center;gap:6px;padding-left:8px}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;padding-left:8px}
.tag{font-size:11px;padding:3px 10px;border-radius:12px;font-weight:500;letter-spacing:.02em}
.card-date{font-size:11px;color:var(--text2);margin-top:8px;padding-left:8px}
.card-comment-count{font-size:11px;color:var(--text2);padding-left:8px;display:inline-flex;align-items:center;gap:3px}
.card-comment-count::before{content:'💬';font-size:10px}

/* Tag colors */
.tag-0{background:#7c3aed30;color:#a78bfa}
.tag-1{background:#3b82f630;color:#60a5fa}
.tag-2{background:#10b98130;color:#34d399}
.tag-3{background:#f59e0b30;color:#fbbf24}
.tag-4{background:#ef444430;color:#f87171}
.tag-5{background:#ec489930;color:#f472b6}

/* Add card */
.add-card-btn{margin:0 12px 12px;padding:10px;border-radius:8px;border:1px dashed var(--border);background:none;color:var(--text2);cursor:pointer;font-size:13px;transition:all .2s}
.add-card-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(124,58,237,.05)}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-content{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:520px;padding:28px;box-shadow:0 24px 48px rgba(0,0,0,.5)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-header h2{font-size:18px;font-weight:700}
.modal-close{background:none;border:none;color:var(--text2);font-size:24px;cursor:pointer;padding:4px 8px;border-radius:6px}
.modal-close:hover{background:var(--surface2);color:var(--text)}
#card-form{display:flex;flex-direction:column;gap:16px}
#card-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--text2)}
#card-form input,#card-form textarea,#card-form select{padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:14px;font-family:inherit;outline:none;resize:vertical;transition:border .2s}
#card-form input:focus,#card-form textarea:focus,#card-form select:focus{border-color:var(--primary)}
#card-form select{cursor:pointer}
.modal-meta{font-size:12px;color:var(--text2)}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:4px}
.spacer{flex:1}
.btn-primary{padding:10px 20px;border-radius:8px;border:none;background:var(--primary);color:white;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:var(--primary-hover)}
.btn-danger{padding:10px 20px;border-radius:8px;border:none;background:var(--danger);color:white;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-danger:hover{background:var(--danger-hover)}
.modal-cancel{background:none;border:1px solid var(--border);color:var(--text2);padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px}

/* Light theme */
body.light{--bg:#f4f5f7;--surface:#fff;--surface2:#f0f1f4;--border:#dfe1e6;--text:#172b4d;--text2:#5e6c84;--primary:#6c5ce7;--primary-hover:#5a4bd1}
body.light header{background:#fff;border-bottom:1px solid #dfe1e6;box-shadow:0 1px 2px rgba(0,0,0,.06)}
body.light .header-left h1{background:none;-webkit-text-fill-color:#6c5ce7}
body.light .login-card{box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #dfe1e6}
body.light .logo h1{background:none;-webkit-text-fill-color:#6c5ce7}
body.light #login-screen{background:#f4f5f7}
body.light .column{background:#f0f1f4;border:none;border-radius:10px}
body.light .column-header h2{color:#172b4d}
body.light .column-count{background:#dfe1e6;color:#5e6c84}
body.light .card{background:#fff;border:none;box-shadow:0 1px 2px rgba(9,30,66,.13);border-radius:8px}
body.light .card:hover{box-shadow:0 4px 8px rgba(9,30,66,.15);transform:translateY(-1px)}
body.light .card-title{color:#172b4d}
body.light .card-date{color:#8993a4}
body.light .add-card-btn{border:none;background:rgba(9,30,66,.04);color:#5e6c84}
body.light .add-card-btn:hover{background:rgba(9,30,66,.08);color:#172b4d}
body.light .modal-backdrop{background:rgba(9,30,66,.4)}
body.light .modal-content{box-shadow:0 8px 32px rgba(9,30,66,.2);border:none}
body.light .btn-ghost{border-color:#dfe1e6;color:#5e6c84}
body.light .btn-ghost:hover{background:#f0f1f4;color:#172b4d}
body.light .tag-0{background:#ede9fe;color:#6c5ce7}
body.light .tag-1{background:#dbeafe;color:#2563eb}
body.light .tag-2{background:#d1fae5;color:#047857}
body.light .tag-3{background:#fef3c7;color:#92400e}
body.light .tag-4{background:#fee2e2;color:#b91c1c}
body.light .tag-5{background:#fce7f3;color:#be185d}
body.light .comment{background:#f8f9fa;border-color:#e9ecef}

/* Assignee */
.assignee-picker-wrap{display:flex;flex-direction:column;gap:8px}
.assignee-picker{display:flex;flex-wrap:wrap;gap:6px}
.assignee-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);transition:all .15s;user-select:none}
.assignee-chip:hover{border-color:var(--primary)}
.assignee-chip.selected{border-color:transparent;color:#fff}
.card-assignees{display:flex;flex-wrap:wrap;gap:4px;padding-left:8px;margin-bottom:6px}
.assignee-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:12px;color:#fff;font-size:11px;font-weight:600;flex-shrink:0}
.assignee-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;flex-shrink:0}

/* Filter */
.filter-wrap{position:relative}
.filter-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:20;display:flex;flex-direction:column;gap:8px}
.filter-dropdown .filter-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);transition:all .15s}
.filter-dropdown .filter-tag:hover{border-color:var(--primary)}
.filter-dropdown .filter-tag.active{background:var(--primary);color:#fff;border-color:var(--primary)}
#filter-tags{display:flex;flex-wrap:wrap;gap:6px}
.filter-active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}

/* Activity */
.activity-section{border-top:1px solid var(--border);padding-top:12px}
.activity-toggle{font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;padding:4px 0;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.activity-toggle::before{content:'▶';font-size:9px;transition:transform .2s}
details[open] .activity-toggle::before{transform:rotate(90deg)}
.activity-toggle:hover{color:var(--text)}
.activity-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:200px;overflow-y:auto}
.activity-item{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:6px 8px;border-radius:6px;background:var(--surface2)}
.activity-item .act-actor{font-weight:600;color:var(--primary);white-space:nowrap}
.activity-item .act-detail{color:var(--text);flex:1}
.activity-item .act-time{color:var(--text2);white-space:nowrap;font-size:11px}

/* Comments */
.comments-section{border-top:1px solid var(--border);padding-top:16px}
.comments-section h3{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text)}
.comment-input{display:flex;gap:8px;margin-bottom:12px;align-items:flex-end}
.comment-input textarea{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;font-family:inherit;resize:none;outline:none}
.comment-input textarea:focus{border-color:var(--primary)}
.btn-sm{padding:6px 14px;font-size:13px}
.comments-list{display:flex;flex-direction:column;gap:10px;max-height:250px;overflow-y:auto}
.comment{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.comment-author{font-size:12px;font-weight:600;color:var(--primary)}
.comment-time{font-size:11px;color:var(--text2)}
.comment-body{font-size:13px;line-height:1.4;color:var(--text)}
.comment-delete{background:none;border:none;color:var(--text2);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:4px}
.comment-delete:hover{color:var(--danger);background:var(--danger)20}

/* Add Column */
.add-column{background:transparent;border:2px dashed var(--border);border-radius:12px;min-width:280px;max-width:320px;display:flex;align-items:center;justify-content:center;min-height:120px;cursor:pointer;transition:all .2s}
.add-column:hover{border-color:var(--primary);background:rgba(124,58,237,.05)}
.add-column-btn{background:none;border:none;color:var(--text2);font-size:32px;cursor:pointer;padding:20px;transition:color .2s}
.add-column:hover .add-column-btn{color:var(--primary)}

/* Column delete */
.column-move-btns{opacity:0;transition:opacity .2s;margin-left:auto;display:flex;gap:2px}
.column-header:hover .column-move-btns{opacity:1}
.column-move{background:none;border:none;color:var(--text2);font-size:10px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .2s}
.column-move:hover{color:var(--accent);background:rgba(124,58,237,.1)}
.column-delete{background:none;border:none;color:var(--text2);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;opacity:0;transition:all .2s;margin-left:4px}
.column-header:hover .column-delete,.column-delete.visible{opacity:1}
.column-delete:hover{color:var(--danger);background:rgba(239,68,68,.1)}

/* Responsive */
@media(max-width:768px){
  .board{flex-direction:column;align-items:stretch;padding:12px}
  .column{min-width:auto;max-width:none}
  header{flex-direction:column;gap:8px}
}