:root{
  --ink:#F4F5FA; --surface:#FFFFFF; --surface-2:#F5F6FB; --surface-3:#ECEEF6;
  --border:#E2E5F0; --text:#1A1C28; --text-muted:#5C6178; --text-faint:#9297AD;
  --accent:#4F46E5; --accent-soft:#EEF0FE; --danger:#E1495B; --danger-dim:#FCE9EC;
  --warning:#D98A17; --warning-dim:#FBF0DC; --success:#1FA971; --success-dim:#E0F5EC;
  --radius-s:7px; --radius-m:12px;
  --shadow-sm:0 1px 2px rgba(26,28,40,0.04), 0 1px 3px rgba(26,28,40,0.06);
  --shadow-md:0 4px 12px rgba(26,28,40,0.08);
  --shadow-lg:0 12px 40px rgba(26,28,40,0.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--ink);color:var(--text);font-family:'Manrope','Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:'Manrope','Inter',system-ui,sans-serif;letter-spacing:-0.01em;}
button{font-family:inherit;}
::selection{background:var(--accent);color:#fff;}

#app{display:flex;flex-direction:column;height:100vh;min-height:600px;}

.topbar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;flex-wrap:wrap;}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:auto;}
.brand .mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#7C74F0);display:inline-flex;align-items:center;justify-content:center;font-family:'Manrope';font-weight:800;color:#fff;font-size:14px;}
.brand h1{font-size:16px;font-weight:600;margin:0;letter-spacing:0.2px;}
.brand .sub{color:var(--text-muted);font-size:13px;}

.stat-pill{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.stat-pill b{color:var(--text);font-weight:600;}
.stat-pill.warn b{color:var(--danger);}

.user-switch{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;}
.avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0;}

.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:filter .12s ease;}
.btn:hover{filter:brightness(1.08);}
.btn:active{filter:brightness(0.95);}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--text-faint);filter:none;background:var(--surface-2);}
.btn-sm{padding:6px 10px;font-size:12.5px;border-radius:7px;}
.btn-danger-ghost{background:transparent;color:var(--danger);border:1px solid var(--danger-dim);}
.btn-danger-ghost:hover{background:var(--danger-dim);filter:none;}

.layout{display:flex;flex:1;min-height:0;}

.sidebar{width:230px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);padding:18px 14px;overflow-y:auto;}
.sidebar-section{margin-bottom:26px;}
.sidebar-title{font-size:11px;color:var(--text-faint);font-weight:600;margin:0 0 10px 2px;}
.filter-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;color:var(--text-muted);font-size:13px;border:1px solid transparent;}
.filter-item:hover{background:var(--surface-2);color:var(--text);}
.filter-item.active{background:var(--surface-3);color:var(--text);border-color:var(--border);}
.filter-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.filter-item .count{margin-left:auto;color:var(--text-faint);font-size:12px;}

.add-link{display:flex;align-items:center;gap:6px;color:var(--text-faint);font-size:12.5px;padding:7px 8px;border-radius:7px;cursor:pointer;background:none;border:1px dashed var(--border);width:100%;text-align:left;margin-top:2px;}
.add-link:hover{color:var(--accent);border-color:var(--accent);}

.board-wrap{flex:1;display:flex;flex-direction:column;min-width:0;}
.board-filters{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
select.filter-select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:12.5px;cursor:pointer;}
.clear-filters{color:var(--text-faint);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.clear-filters:hover{color:var(--text);}

.board{flex:1;display:flex;gap:16px;padding:18px 20px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;}
.column{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);width:300px;flex-shrink:0;display:flex;flex-direction:column;max-height:100%;}
.column-head{display:flex;align-items:center;gap:8px;padding:13px 14px 11px;border-bottom:1px solid var(--border);}
.column-head .dot{width:9px;height:9px;border-radius:50%;}
.column-head h3{font-size:13px;font-weight:600;margin:0;letter-spacing:0.2px;}
.column-head .count{margin-left:auto;color:var(--text-faint);font-size:12px;background:var(--surface-2);padding:1px 8px;border-radius:10px;}
.column-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:80px;}
.column-body.drag-over{background:var(--surface-2);}
.column-empty{color:var(--text-faint);font-size:12.5px;text-align:center;padding:22px 10px;border:1px dashed var(--border);border-radius:8px;}

.card{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--proj-color, var(--accent));border-radius:8px;padding:11px 12px;cursor:grab;display:flex;flex-direction:column;gap:8px;transition:border-color .12s ease;}
.card:hover{border-color:var(--text-faint);}
.card.dragging{opacity:0.4;}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.card-title{font-size:13.5px;font-weight:500;color:var(--text);word-break:break-word;}
.prio-flag{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.card-proj{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
.card-proj .dot{width:6px;height:6px;border-radius:50%;}
.card-dept{font-size:10.5px;color:var(--text-faint);}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.deadline-chip{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--surface-3);color:var(--text-muted);white-space:nowrap;}
.deadline-chip.overdue{background:var(--danger-dim);color:var(--danger);}
.deadline-chip.today{background:var(--warning-dim);color:var(--warning);}
.card-avatar{width:21px;height:21px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:#fff;flex-shrink:0;}

.overlay{position:fixed;inset:0;background:rgba(30,32,55,0.35);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);width:100%;max-width:420px;max-height:88vh;overflow-y:auto;padding:22px;position:relative;}
.modal.admin-modal{max-width:560px;}
.modal h2{font-size:16px;margin:0 0 16px;font-weight:600;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:500;}
.field input[type=text],.field input[type=password],.field input[type=date],.field textarea,.field select{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:9px 10px;color:var(--text);font-size:13.5px;font-family:inherit;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:60px;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.priority-options,.color-options{display:flex;gap:8px;flex-wrap:wrap;}
.priority-opt{flex:1;text-align:center;padding:8px 4px;border-radius:7px;border:1px solid var(--border);cursor:pointer;font-size:12.5px;color:var(--text-muted);}
.priority-opt.sel-low.selected{border-color:var(--success);color:var(--success);background:var(--success-dim);}
.priority-opt.sel-medium.selected{border-color:var(--warning);color:var(--warning);background:var(--warning-dim);}
.priority-opt.sel-high.selected{border-color:var(--danger);color:var(--danger);background:var(--danger-dim);}
.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.color-swatch.selected{border-color:var(--text);}
.modal-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px;}
.modal-actions-right{display:flex;gap:8px;margin-left:auto;}
.close-x{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:18px;line-height:1;padding:4px;}
.close-x:hover{color:var(--text);}

.admin-tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.admin-tab{background:none;border:none;color:var(--text-muted);padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.admin-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.admin-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;max-height:260px;overflow-y:auto;}
.admin-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;}
.admin-row .meta{flex:1;min-width:0;}
.admin-row .meta .row-name{font-size:13px;font-weight:500;}
.admin-row .meta .row-sub{font-size:11.5px;color:var(--text-muted);}
.admin-row select{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 6px;font-size:12px;}
.admin-add-form{border-top:1px solid var(--border);padding-top:16px;}
.role-badge{font-size:10.5px;padding:2px 7px;border-radius:5px;background:var(--surface-3);color:var(--text-muted);white-space:nowrap;}
.role-badge.admin{background:var(--accent);color:#fff;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:80;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

.loading-screen{position:fixed;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100;color:var(--text-muted);font-size:13px;}
.spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--surface-3);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Login page */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:32px;width:100%;max-width:340px;}
.login-sub{color:var(--text-muted);font-size:13px;margin:-10px 0 20px;}
.login-error{background:var(--danger-dim);color:var(--danger);border-radius:7px;padding:8px 10px;font-size:12.5px;margin-bottom:6px;}
.login-hint{color:var(--text-faint);font-size:12px;text-align:center;margin-top:16px;margin-bottom:0;}

@media (max-width:760px){
  .sidebar{position:fixed;left:-240px;top:0;bottom:0;z-index:40;transition:left .2s ease;box-shadow:var(--shadow-lg);}
  .sidebar.open{left:0;}
  .board{padding:14px;}
  .column{width:82vw;}
  .brand .sub{display:none;}
}
button:focus-visible,.filter-item:focus-visible,select:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* ===== v2: search, views, detail panel ===== */
.search-box{flex:0 1 260px;}
.search-box input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:13px;font-family:inherit;}
.search-box input:focus{outline:none;border-color:var(--accent);}

.nav-item{font-weight:500;}
.filters-divider{width:1px;height:22px;background:var(--border);margin:0 2px;}

.view-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px;}
.view-btn{background:none;border:none;color:var(--text-muted);padding:6px 12px;font-size:12.5px;border-radius:6px;cursor:pointer;font-weight:500;}
.view-btn.active{background:var(--surface-3);color:var(--text);}
.view-btn:hover:not(.active){color:var(--text);}

.view-container{flex:1;min-height:0;display:flex;flex-direction:column;}

/* subtask/comment badges on cards */
.card-badges{display:flex;align-items:center;gap:10px;color:var(--text-faint);font-size:11px;}
.card-badges .badge{display:inline-flex;align-items:center;gap:3px;}
.subtask-bar{height:4px;background:var(--surface-3);border-radius:3px;overflow:hidden;margin-top:2px;}
.subtask-bar > span{display:block;height:100%;background:var(--success);}

/* ===== List view ===== */
.list-view{flex:1;overflow:auto;padding:14px 20px;}
.list-table{width:100%;border-collapse:collapse;font-size:13px;}
.list-table th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--ink);cursor:pointer;white-space:nowrap;}
.list-table th:hover{color:var(--text);}
.list-table th .sort-arrow{opacity:0.5;font-size:10px;}
.list-table td{padding:9px 10px;border-bottom:1px solid var(--border);}
.list-row{cursor:pointer;}
.list-row:hover{background:var(--surface);}
.list-title-cell{display:flex;align-items:center;gap:8px;}
.list-title-cell .proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.list-status-pill{font-size:11px;padding:2px 9px;border-radius:11px;white-space:nowrap;}
.list-prio{display:inline-flex;align-items:center;gap:5px;font-size:12px;}
.list-empty{text-align:center;color:var(--text-faint);padding:50px;}

/* ===== Calendar view ===== */
.calendar-view{flex:1;overflow:auto;padding:14px 20px;display:flex;flex-direction:column;}
.cal-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.cal-header h3{margin:0;font-size:16px;min-width:180px;text-transform:capitalize;}
.cal-nav-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:15px;}
.cal-nav-btn:hover{background:var(--surface-3);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:1;}
.cal-dow{background:var(--surface);color:var(--text-faint);font-size:11px;padding:7px;text-align:center;font-weight:600;}
.cal-cell{background:var(--ink);min-height:88px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;}
.cal-cell.other-month{background:var(--surface);opacity:0.4;}
.cal-cell.today{background:var(--surface-2);}
.cal-daynum{font-size:11px;color:var(--text-muted);font-weight:600;margin-bottom:1px;}
.cal-cell.today .cal-daynum{color:var(--accent);}
.cal-task{font-size:10.5px;padding:2px 5px;border-radius:4px;background:var(--surface-3);color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid var(--proj-color,var(--accent));}
.cal-task.overdue-cal{background:var(--danger-dim);}
.cal-task.done-cal{opacity:0.5;text-decoration:line-through;}

/* ===== Detail panel ===== */
.detail-backdrop{position:fixed;inset:0;background:rgba(30,32,55,0.30);z-index:60;display:none;}
.detail-backdrop.open{display:block;}
.detail-panel{position:fixed;top:0;right:-560px;bottom:0;width:540px;max-width:92vw;background:var(--surface);border-left:1px solid var(--border);z-index:70;display:flex;flex-direction:column;transition:right .22s ease;box-shadow:var(--shadow-lg);}
.detail-panel.open{right:0;}
.detail-header{padding:18px 22px 14px;border-bottom:1px solid var(--border);}
.detail-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.detail-status-select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 10px;font-size:12.5px;cursor:pointer;font-weight:600;}
.detail-title-input{width:100%;background:none;border:none;color:var(--text);font-size:18px;font-weight:600;font-family:'Manrope',sans-serif;padding:2px 0;}
.detail-title-input:focus{outline:none;border-bottom:1px solid var(--accent);}
.detail-body{flex:1;overflow-y:auto;padding:18px 22px;}
.detail-meta{display:flex;flex-direction:column;gap:2px;margin-bottom:20px;}
.detail-meta-row{display:flex;align-items:center;gap:12px;padding:5px 0;}
.detail-meta-label{width:100px;flex-shrink:0;color:var(--text-muted);font-size:12.5px;}
.detail-inline-select,.detail-inline-input{flex:1;background:var(--surface-2);border:1px solid transparent;color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px;font-family:inherit;cursor:pointer;}
.detail-inline-select:hover,.detail-inline-input:hover{border-color:var(--border);}
.detail-inline-select:focus,.detail-inline-input:focus{outline:none;border-color:var(--accent);background:var(--surface-2);}
.detail-section{margin-bottom:22px;}
.detail-section-title{display:block;font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:9px;}
.detail-desc{width:100%;min-height:70px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--text);font-size:13px;font-family:inherit;resize:vertical;}
.detail-desc:focus{outline:none;border-color:var(--accent);}
.subtask-progress{color:var(--text-faint);font-weight:400;font-size:11.5px;margin-left:4px;}
.subtask-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.subtask-item{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:6px;}
.subtask-item:hover{background:var(--surface-2);}
.subtask-check{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--text-faint);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.subtask-check.done{background:var(--success);border-color:var(--success);}
.subtask-text{flex:1;font-size:13px;}
.subtask-item.done .subtask-text{text-decoration:line-through;color:var(--text-faint);}
.subtask-del{background:none;border:none;color:var(--text-faint);cursor:pointer;opacity:0;font-size:14px;padding:2px 5px;}
.subtask-item:hover .subtask-del{opacity:1;}
.subtask-del:hover{color:var(--danger);}
.subtask-add input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;color:var(--text);font-size:13px;font-family:inherit;}
.subtask-add input:focus{outline:none;border-color:var(--accent);}
.comment-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
.comment-item{display:flex;gap:9px;}
.comment-item .avatar{width:26px;height:26px;font-size:10px;flex-shrink:0;}
.comment-body{flex:1;min-width:0;}
.comment-head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.comment-author{font-size:12.5px;font-weight:600;}
.comment-time{font-size:11px;color:var(--text-faint);}
.comment-del{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:12px;margin-left:auto;opacity:0;}
.comment-item:hover .comment-del{opacity:1;}
.comment-del:hover{color:var(--danger);}
.comment-text{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.comment-empty{color:var(--text-faint);font-size:12.5px;padding:4px 0;}
.comment-add{display:flex;flex-direction:column;gap:8px;}
.comment-add textarea{width:100%;min-height:54px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 10px;color:var(--text);font-size:13px;font-family:inherit;resize:vertical;}
.comment-add textarea:focus{outline:none;border-color:var(--accent);}
.comment-add .btn{align-self:flex-end;}
.detail-footer{padding:12px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.detail-created-info{font-size:11px;color:var(--text-faint);}

@media (max-width:760px){
  .search-box{order:5;flex-basis:100%;}
  .detail-panel{width:100vw;}
}

/* ===== v3: bell, activity, multi-dept ===== */
.bell-wrap{position:relative;}
.bell-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:15px;position:relative;display:inline-flex;align-items:center;justify-content:center;}
.bell-btn:hover{background:var(--surface-3);}
.bell-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.bell-dropdown{position:absolute;top:44px;right:0;width:340px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);z-index:90;overflow:hidden;}
.bell-head{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;}
.bell-list{max-height:380px;overflow-y:auto;}
.bell-item{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:9px;align-items:flex-start;}
.bell-item:last-child{border-bottom:none;}
.bell-item:hover{background:var(--surface-2);}
.bell-item.unseen{background:var(--surface-2);}
.bell-item .bell-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px;}
.bell-item.seen .bell-dot{background:transparent;}
.bell-item .bell-body{flex:1;min-width:0;}
.bell-item .bell-text{font-size:12.5px;line-height:1.4;}
.bell-item .bell-time{font-size:10.5px;color:var(--text-faint);margin-top:2px;}
.bell-empty{padding:24px 14px;text-align:center;color:var(--text-faint);font-size:12.5px;}

.activity-list{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border);padding-left:14px;margin-left:4px;}
.activity-item{position:relative;padding:6px 0;font-size:12.5px;color:var(--text-muted);}
.activity-item::before{content:"";position:absolute;left:-19px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--text-faint);}
.activity-item .act-actor{color:var(--text);font-weight:600;}
.activity-item .act-time{color:var(--text-faint);font-size:11px;margin-left:4px;}
.activity-empty{color:var(--text-faint);font-size:12.5px;padding:4px 0;}

.dept-checkboxes{display:flex;flex-direction:column;gap:5px;max-height:110px;overflow-y:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;}
.dept-checkboxes.inline{max-height:130px;}
.dept-check-row{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;}
.dept-check-row input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);}
.dept-check-empty{color:var(--text-faint);font-size:12px;}

.admin-dept-multi{position:relative;}
.admin-dept-btn{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:5px 8px;font-size:12px;cursor:pointer;min-width:120px;text-align:left;}
.admin-dept-pop{position:absolute;top:32px;left:0;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px;min-width:160px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto;}

/* status locked hint */
.detail-status-select:disabled{opacity:0.6;cursor:not-allowed;}
.card.locked-done{opacity:0.85;}

/* ===== v4: subtask assignee, operational overview ===== */
.subtask-item{align-items:center;}
.subtask-assign{position:relative;flex-shrink:0;cursor:pointer;}
.subtask-avatar{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;}
.subtask-avatar.empty{background:var(--surface-3);color:var(--text-faint);border:1px dashed var(--border);font-size:13px;}
.subtask-assign:hover .subtask-avatar.empty{border-color:var(--accent);color:var(--accent);}
.subassign-pop{position:absolute;top:26px;right:0;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:5px;min-width:180px;box-shadow:var(--shadow-lg);max-height:240px;overflow-y:auto;}
.subassign-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;}
.subassign-opt:hover{background:var(--surface-2);}
.subassign-opt .card-avatar{width:20px;height:20px;font-size:9px;}

/* Operational overview (members with load) */
.ops-view{flex:1;overflow-y:auto;padding:20px;}
.ops-intro{color:var(--text-muted);font-size:13px;margin-bottom:16px;}
.ops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.ops-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px;cursor:pointer;transition:box-shadow .14s ease, transform .1s ease, border-color .14s ease;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:13px;}
.ops-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent);transform:translateY(-1px);}
.ops-card .avatar{width:42px;height:42px;font-size:15px;}
.ops-card .ops-meta{flex:1;min-width:0;}
.ops-card .ops-name{font-weight:600;font-size:14px;}
.ops-card .ops-role{font-size:11.5px;color:var(--text-faint);}
.ops-badge{min-width:30px;height:30px;border-radius:15px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;}
.ops-badge.zero{background:var(--surface-3);color:var(--text-faint);}
.ops-back{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;cursor:pointer;margin-bottom:14px;font-weight:600;}
.ops-back:hover{text-decoration:underline;}
.ops-drill-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.ops-drill-head .avatar{width:38px;height:38px;font-size:14px;}
.ops-drill-head h2{margin:0;font-size:18px;}
.ops-drill-head .ops-role{font-size:12.5px;color:var(--text-faint);}

/* ===== v5: author banner, deadline countdown ===== */
.detail-author-banner{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 11px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;}
.detail-author-label{font-size:12px;color:var(--text-muted);font-weight:600;}
.detail-author-banner .avatar{width:24px;height:24px;font-size:10px;}
.detail-author-name{font-size:13.5px;font-weight:600;color:var(--text);}
.detail-author-time{font-size:11.5px;color:var(--text-faint);margin-left:auto;}

.card-author{font-size:11px;color:var(--text-faint);margin-top:-2px;}

/* deadline chip with countdown */
.deadline-chip{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.dl-clock{font-size:10px;}
.deadline-chip.today{background:var(--warning-dim);color:var(--warning);}
.deadline-chip.soon{background:var(--danger-dim);color:var(--danger);font-weight:600;}
.deadline-chip.overdue{background:var(--danger-dim);color:var(--danger);font-weight:600;}

.detail-countdown{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:7px;background:var(--surface-3);color:var(--text-muted);}
.detail-countdown.cd-today{background:var(--warning-dim);color:var(--warning);}
.detail-countdown.cd-soon{background:var(--danger-dim);color:var(--danger);}
.detail-countdown.cd-overdue{background:var(--danger-dim);color:var(--danger);}

/* ===== v6: tags, files, profile card, recurrence, mentions ===== */
.tags-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.tag-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;color:#fff;}
.tag-chip .tag-x{cursor:pointer;opacity:0.75;font-size:13px;line-height:1;}
.tag-chip .tag-x:hover{opacity:1;}
.tag-add-wrap{position:relative;}
.tag-input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--text);font-size:12.5px;font-family:inherit;}
.tag-input:focus{outline:none;border-color:var(--accent);}
.tag-suggest{position:absolute;top:36px;left:0;right:0;z-index:25;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);max-height:180px;overflow-y:auto;padding:4px;}
.tag-suggest-item{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;}
.tag-suggest-item:hover,.tag-suggest-item.active{background:var(--surface-2);}
.tag-suggest-dot{width:10px;height:10px;border-radius:50%;}
.tag-suggest-new{color:var(--accent);font-weight:600;}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;}
.card-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;color:#fff;}

.attach-list{display:flex;flex-direction:column;gap:7px;margin-bottom:9px;}
.attach-item{display:flex;align-items:center;gap:10px;padding:7px 9px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;}
.attach-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surface-3);}
.attach-icon{width:40px;height:40px;border-radius:6px;background:var(--surface-3);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.attach-meta{flex:1;min-width:0;}
.attach-name{font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.attach-name:hover{color:var(--accent);text-decoration:underline;}
.attach-sub{font-size:11px;color:var(--text-faint);}
.attach-del{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;padding:2px 6px;}
.attach-del:hover{color:var(--danger);}
.attach-upload-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px dashed var(--border);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--text-muted);cursor:pointer;}
.attach-upload-btn:hover{border-color:var(--accent);color:var(--accent);}
.attach-hint{font-size:10.5px;color:var(--text-faint);margin-top:4px;}
.attach-uploading{font-size:12px;color:var(--accent);margin-top:6px;}

.profile-card{position:fixed;z-index:120;width:270px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:16px;}
.profile-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.profile-card-head .avatar{width:46px;height:46px;font-size:17px;}
.profile-card-name{font-size:15px;font-weight:700;}
.profile-card-title{font-size:12.5px;color:var(--accent);font-weight:600;}
.profile-card-role{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:10px;background:var(--surface-3);color:var(--text-muted);margin-top:4px;}
.profile-card-role.admin{background:var(--accent);color:#fff;}
.profile-card-bio{font-size:12.5px;color:var(--text-muted);line-height:1.5;border-top:1px solid var(--border);padding-top:10px;margin-top:4px;}
.clickable-user{cursor:pointer;}

.card-recur{font-size:11px;color:var(--text-faint);display:inline-flex;align-items:center;gap:3px;}

.mention-pop{position:absolute;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);max-height:180px;overflow-y:auto;padding:4px;min-width:180px;}
.mention-item{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:6px;cursor:pointer;font-size:12.5px;}
.mention-item:hover,.mention-item.active{background:var(--surface-2);}
.mention-item .card-avatar{width:20px;height:20px;font-size:9px;}
.comment-text .mention{color:var(--accent);font-weight:600;}

/* ===== v7: performance stats ===== */
.stats-view{flex:1;overflow-y:auto;padding:20px;}
.stats-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.stats-head h2{margin:0;font-size:18px;}
.period-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px;}
.period-btn{background:none;border:none;color:var(--text-muted);padding:6px 14px;font-size:12.5px;border-radius:6px;cursor:pointer;font-weight:500;}
.period-btn.active{background:var(--surface-3);color:var(--text);}
.period-btn:hover:not(.active){color:var(--text);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.perf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow-sm);padding:18px;}
.perf-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.perf-head .avatar{width:44px;height:44px;font-size:16px;}
.perf-name{font-size:15px;font-weight:700;}
.perf-title{font-size:12px;color:var(--text-faint);}
.perf-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.perf-metric{background:var(--surface-2);border-radius:9px;padding:11px 12px;}
.perf-metric .m-value{font-size:22px;font-weight:700;font-family:'Manrope',sans-serif;line-height:1.1;}
.perf-metric .m-label{font-size:11px;color:var(--text-muted);margin-top:3px;}
.perf-metric.good .m-value{color:var(--success);}
.perf-metric.warn .m-value{color:var(--warning);}
.perf-metric.bad .m-value{color:var(--danger);}
.perf-metric.accent .m-value{color:var(--accent);}
.perf-ontime-bar{height:7px;border-radius:4px;background:var(--danger-dim);overflow:hidden;margin-top:8px;grid-column:1 / -1;}
.perf-ontime-bar > span{display:block;height:100%;background:var(--success);}
.perf-empty-note{font-size:12px;color:var(--text-faint);margin-top:10px;grid-column:1 / -1;}
.stats-empty{text-align:center;color:var(--text-faint);padding:50px;}

/* ===== v8: hide-done, calendar create/drag, telegram ===== */
.show-done-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);cursor:pointer;user-select:none;}
.show-done-toggle input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);}
.done-collapsed{text-align:center;color:var(--success);font-size:12.5px;font-weight:600;padding:14px 10px;border:1px dashed var(--success);border-radius:8px;cursor:pointer;background:var(--success-dim);}
.done-collapsed:hover{filter:brightness(0.97);}

.cal-cell[data-day]{cursor:pointer;}
.cal-cell.cal-drop{background:var(--accent-soft);outline:2px dashed var(--accent);outline-offset:-2px;}
.cal-task{cursor:grab;}
.cal-task.dragging{opacity:0.4;}

.profile-card-tg{border-top:1px solid var(--border);margin-top:10px;padding-top:10px;}
.tg-connect-btn{width:100%;background:#2AABEE;color:#fff;border:none;border-radius:8px;padding:9px;font-size:12.5px;font-weight:600;cursor:pointer;}
.tg-connect-btn:hover{filter:brightness(1.05);}
.tg-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tg-ok{color:var(--success);font-size:12.5px;font-weight:600;}
.tg-btn-sm{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:5px 9px;font-size:11.5px;cursor:pointer;}
.tg-btn-sm:hover{color:var(--text);border-color:var(--text-faint);}
.tg-note{font-size:11.5px;color:var(--text-faint);}
.tg-instr{font-size:12px;color:var(--text-muted);line-height:1.5;}
.tg-code{font-family:'Manrope',monospace;font-size:20px;font-weight:800;letter-spacing:3px;color:var(--accent);text-align:center;background:var(--accent-soft);border-radius:8px;padding:8px;margin:8px 0;}
.tg-link{color:#2AABEE;font-weight:600;}
.tg-instr .tg-btn-sm{display:inline-block;margin:4px 6px 0 0;}

/* ---------- Client chip on cards ---------- */
.card-client{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:4px;margin-top:2px;}

/* ---------- Custom deadline control ---------- */
.deadline-control{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;}
.deadline-control:hover{border-color:var(--text-faint);}
.deadline-control.has-value{border-color:var(--accent);background:var(--accent-soft);}
.deadline-control .dc-placeholder{color:var(--text-faint);}
.deadline-control .dc-value{font-weight:600;color:var(--accent);}
.deadline-control .dc-clear{color:var(--text-faint);font-size:13px;padding:0 2px;border-radius:4px;}
.deadline-control .dc-clear:hover{color:var(--danger);background:var(--danger-dim);}
.detail-inline-input.deadline-control{min-height:34px;}

/* ---------- Date-time picker popover ---------- */
.dtp-backdrop{position:fixed;inset:0;z-index:300;}
.dtp-pop{position:fixed;z-index:301;width:286px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:0 12px 40px rgba(20,22,40,.18);padding:12px;}
.dtp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dtp-title{font-weight:700;font-size:13.5px;}
.dtp-nav{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;}
.dtp-nav:hover{color:var(--text);border-color:var(--text-faint);}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dtp-dow{text-align:center;font-size:10.5px;color:var(--text-faint);font-weight:600;padding:2px 0;}
.dtp-day{display:flex;align-items:center;justify-content:center;height:34px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text);user-select:none;}
.dtp-day:hover{background:var(--surface-2);}
.dtp-day.empty{cursor:default;}
.dtp-day.today{color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--accent-soft);}
.dtp-day.picked{background:var(--accent);color:#fff;font-weight:700;}
.dtp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;}
.dtp-ghost{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:7px;padding:7px 10px;font-size:12px;cursor:pointer;}
.dtp-ghost:hover{color:var(--text);border-color:var(--text-faint);}
.dtp-apply{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:12.5px;font-weight:600;cursor:pointer;}
.dtp-apply:hover{filter:brightness(1.05);}
.dtp-time-label{font-size:11px;color:var(--text-faint);font-weight:600;margin:4px 0 8px;}
.dtp-time-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;}
.dtp-time-chip{padding:8px 4px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-size:12.5px;color:var(--text-muted);}
.dtp-time-chip:hover{border-color:var(--text-faint);color:var(--text);}
.dtp-time-chip.picked{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;}
.dtp-time-exact{display:flex;align-items:center;justify-content:center;gap:6px;}
.dtp-select{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:14px;color:var(--text);cursor:pointer;}
.dtp-colon{font-weight:700;font-size:16px;color:var(--text-muted);}

/* ---------- Columns admin ---------- */
.admin-hint{font-size:12px;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:10px;line-height:1.45;}
.col-row .col-dot{width:16px;height:16px;border-radius:50%;cursor:pointer;flex-shrink:0;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);}
.col-label-input{border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--text);padding:3px 5px;border-radius:5px;width:100%;font-family:inherit;}
.col-label-input:hover{background:var(--surface-3);}
.col-label-input:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.col-done-toggle{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
.col-move{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text-muted);font-size:13px;}
.col-move:hover:not(:disabled){color:var(--text);border-color:var(--text-faint);}
.col-move:disabled{opacity:.3;cursor:default;}
.mini-color-pick{display:flex;gap:6px;flex-wrap:wrap;max-width:200px;}

/* ---------- Dashboard ---------- */
.dash-loading{color:var(--text-faint);padding:30px;text-align:center;}
.dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.dash-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;min-width:280px;}
.dash-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.dash-tile.accent{border-color:var(--accent);background:var(--accent-soft);}
.dash-tile.good{border-color:var(--success);background:var(--success-dim);}
.dash-tile.bad{border-color:var(--danger);background:var(--danger-dim);}
.dash-tile-val{font-size:26px;font-weight:800;font-family:'Manrope';line-height:1;}
.dash-tile-label{font-size:11.5px;color:var(--text-muted);margin-top:5px;}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.dash-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:13px 15px;}
.dash-box-title{font-size:12.5px;font-weight:700;margin-bottom:11px;color:var(--text);}
.dash-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.dash-bar-label{font-size:12px;color:var(--text-muted);width:92px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-bar-track{flex:1;height:8px;background:var(--surface-3);border-radius:5px;overflow:hidden;}
.dash-bar-fill{display:block;height:100%;border-radius:5px;}
.dash-bar-val{font-size:12px;font-weight:600;width:28px;text-align:right;}
.dash-weeks{display:flex;align-items:flex-end;gap:6px;height:90px;}
.dash-week{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.dash-week-bar{width:100%;max-width:26px;background:linear-gradient(180deg,var(--accent),#7C74F0);border-radius:4px 4px 0 0;min-height:4px;}
.dash-week-x{font-size:10px;color:var(--text-faint);}
.dash-member{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--border);}
.dash-member:last-child{border-bottom:none;}
.dash-member .avatar{width:28px;height:28px;font-size:11px;}
.dash-member-name{flex:1;font-size:13px;}
.dash-member-count{font-weight:700;font-size:13px;color:var(--accent);}
@media(max-width:720px){.dash-tiles{grid-template-columns:repeat(2,1fr);}.dash-cols{grid-template-columns:1fr;}}

/* ---------- Trash (recycle bin) ---------- */
.trash-view{padding:18px 20px;overflow-y:auto;}
.trash-hint{font-size:12px;color:var(--text-faint);}
.trash-empty{color:var(--text-faint);font-size:13.5px;padding:30px 4px;max-width:560px;line-height:1.5;}
.trash-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.trash-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.trash-row:hover{border-color:var(--text-faint);}
.trash-main{flex:1;min-width:0;}
.trash-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
.trash-title .prio-flag{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.trash-sub{font-size:12px;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.trash-sub .dot{width:7px;height:7px;border-radius:50%;}
.trash-actions{display:flex;gap:8px;flex-shrink:0;}

/* =====================================================================
   v9 — Theme system, workspace backgrounds, modern refresh
   ===================================================================== */

/* Page backdrop shown behind the board (gaps + empty space). */
:root{ --app-bg:
  radial-gradient(1200px 600px at 100% -10%, #EEF0FE 0%, rgba(238,240,254,0) 55%),
  radial-gradient(900px 500px at -5% 110%, #E8ECFF 0%, rgba(232,236,255,0) 50%),
  #F4F5FA;
  --app-fg-on-bg:#1A1C28;
}
body{ background:var(--app-bg); background-attachment:fixed; background-size:cover; }

/* Let the backdrop show through the working canvas. */
.board-wrap,.view-container{background:transparent;}

/* ---- Color themes (light surfaces + tinted gradient canvas) ---- */
html[data-theme="indigo"]{ --app-bg:linear-gradient(135deg,#EEF1FF 0%,#E4E8FF 45%,#DCE4FF 100%); --accent:#4F46E5; }
html[data-theme="sunset"]{ --app-bg:linear-gradient(135deg,#FFF1E8 0%,#FFE3E8 50%,#FBE2F3 100%); --accent:#E0558B; }
html[data-theme="forest"]{ --app-bg:linear-gradient(135deg,#E9F7EE 0%,#DEF2E9 50%,#E4F0DA 100%); --accent:#1FA971; }
html[data-theme="ocean"]{ --app-bg:linear-gradient(135deg,#E6F6FB 0%,#DCEEFB 50%,#E2E9FF 100%); --accent:#0E8BC0; }

/* ---- Dark themes (full token override) ---- */
html[data-theme="dark"],html[data-theme="graphite"]{
  --surface:#181A26; --surface-2:#1E2130; --surface-3:#272B3C;
  --border:#2E3346; --text:#EDEFF7; --text-muted:#A6ADC6; --text-faint:#727A97;
  --accent:#8B83FF; --accent-soft:#26244A;
  --danger:#F26176; --danger-dim:#3A2230; --warning:#E6A23C; --warning-dim:#3A3020;
  --success:#38C08A; --success-dim:#163329;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.5);
}
html[data-theme="dark"]{ --app-bg:radial-gradient(1000px 600px at 100% -10%, #1C1F35 0%, rgba(28,31,53,0) 55%), #0E0F17; }
html[data-theme="graphite"]{ --app-bg:linear-gradient(135deg,#15171F 0%,#1A1D27 100%); --accent:#9AA0B4; --accent-soft:#262A38; }

/* ---- Glass effect for themed/custom canvases ---- */
body.glass .column,
body.glass .list-table,
body.glass .cal-grid{ background:rgba(255,255,255,0.80); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
body.glass .topbar,
body.glass .sidebar{ background:rgba(255,255,255,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
html[data-theme="dark"] body.glass .column,html[data-theme="graphite"] body.glass .column{background:rgba(24,26,38,0.80);}

/* ---- Modern refresh: typography & chrome ---- */
body{font-size:14px;}
.topbar{padding:12px 22px;gap:12px;box-shadow:var(--shadow-sm);position:relative;z-index:20;}
.brand .mark{width:30px;height:30px;border-radius:9px;font-size:15px;box-shadow:0 4px 12px rgba(79,70,229,.35);}
.brand h1{font-size:17px;font-weight:700;}
.search-box input{transition:box-shadow .15s,border-color .15s;}
.search-box input:focus{box-shadow:0 0 0 3px var(--accent-soft);}

/* Sidebar: larger, icon-led nav */
.sidebar{width:248px;padding:16px 12px;}
.sidebar-section{margin-bottom:22px;}
.sidebar-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;}
.nav-item{padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:500;gap:11px;transition:background .13s,color .13s,transform .08s;}
.nav-item:active{transform:scale(.98);}
.nav-item.active{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600;}
.nav-ic{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.9;}
.nav-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.nav-item.active .nav-ic{opacity:1;}
.sidebar-foot{margin-top:auto;}
.sidebar{display:flex;flex-direction:column;}
.sidebar-scroll{flex:1;}

/* Coin / level cluster in topbar */
.coin-pill{display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#FFF6DC,#FFE9B0);border:1px solid #F0D27A;border-radius:22px;padding:5px 12px 5px 8px;cursor:pointer;transition:transform .1s,box-shadow .15s;box-shadow:0 2px 8px rgba(214,164,23,.18);}
.coin-pill:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(214,164,23,.3);}
.coin-pill .coin-ico{width:22px;height:22px;flex-shrink:0;}
.coin-pill .coin-amt{font-weight:800;font-size:14px;color:#8A6400;font-family:'Manrope';}
.coin-pill .coin-lvl{font-size:10.5px;font-weight:700;color:#B07D00;background:rgba(255,255,255,.6);border-radius:10px;padding:1px 7px;}
html[data-theme="dark"] .coin-pill,html[data-theme="graphite"] .coin-pill{background:linear-gradient(135deg,#3A3220,#2A2616);border-color:#5A4B22;}
html[data-theme="dark"] .coin-pill .coin-amt{color:#FFD978;}
html[data-theme="dark"] .coin-pill .coin-lvl{color:#FFE4A0;background:rgba(255,255,255,.08);}

/* Spinning gold coin icon */
.gold-coin{display:inline-block;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFF1B8,#FFD24D 42%,#E8A200 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),inset 0 -3px 5px rgba(160,110,0,.4),0 1px 2px rgba(120,80,0,.3);position:relative;}
.gold-coin::after{content:"★";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#B37400;font-size:0.62em;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.35);}

/* Level progress ring in profile */
.level-ring-wrap{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:12px;border-top:1px solid var(--border);}
.level-ring{--p:0;width:52px;height:52px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-3) 0);display:flex;align-items:center;justify-content:center;}
.level-ring .inner{width:40px;height:40px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;font-family:'Manrope';color:var(--accent);}
.level-meta{font-size:12.5px;color:var(--text-muted);}
.level-meta b{color:var(--text);font-size:13.5px;}

/* Coin-drop celebration animation */
#coinFx{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.coin-fly{position:absolute;width:34px;height:34px;animation:coinFall 1.5s cubic-bezier(.3,.6,.4,1) forwards;}
@keyframes coinFall{0%{transform:translateY(-40px) scale(.4) rotate(0);opacity:0;}15%{opacity:1;}100%{transform:translateY(90vh) scale(1) rotate(540deg);opacity:0;}}
.coin-burst{position:fixed;z-index:10000;font-family:'Manrope';font-weight:800;color:#C8920F;font-size:28px;text-shadow:0 2px 10px rgba(255,210,80,.6);pointer-events:none;animation:burstUp 1.4s ease-out forwards;}
@keyframes burstUp{0%{transform:translate(-50%,0) scale(.6);opacity:0;}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1);}100%{transform:translate(-50%,-70px) scale(1);opacity:0;}}

/* ---- Activity feed ---- */
.feed-view{padding:18px 22px;overflow-y:auto;max-width:860px;}
.feed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.feed-head h2{font-size:19px;margin:0;display:flex;align-items:center;gap:9px;}
.feed-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--success);font-weight:600;}
.feed-live .dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.feed-item{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border);}
.feed-item:last-child{border-bottom:none;}
.feed-ava{flex-shrink:0;}
.feed-body{flex:1;min-width:0;}
.feed-line{font-size:13.5px;line-height:1.45;}
.feed-line b{font-weight:700;}
.feed-task{color:var(--accent);font-weight:600;cursor:pointer;}
.feed-task:hover{text-decoration:underline;}
.feed-time{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.feed-act-ic{display:inline-flex;width:28px;height:28px;border-radius:9px;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}

/* ---- Leaderboard (admin) ---- */
.lb-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.lb-row{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 15px;}
.lb-rank{font-weight:800;font-size:16px;width:30px;text-align:center;color:var(--text-faint);font-family:'Manrope';}
.lb-row.top1 .lb-rank{color:#E8A200;}.lb-row.top2 .lb-rank{color:#9AA3B8;}.lb-row.top3 .lb-rank{color:#C27A3E;}
.lb-row.top1{border-color:#F0D27A;box-shadow:0 2px 12px rgba(214,164,23,.14);}
.lb-name{flex:1;font-weight:600;font-size:14px;}
.lb-name .lb-title{font-weight:400;font-size:11.5px;color:var(--text-faint);display:block;}
.lb-coins{display:flex;align-items:center;gap:6px;font-weight:800;font-family:'Manrope';color:#B07D00;}
.lb-lvl{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:2px 9px;}

/* ---- Background picker ---- */
.bg-picker{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.bg-picker-title{font-size:11.5px;font-weight:700;color:var(--text-muted);margin-bottom:9px;}
.bg-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.bg-swatch{height:40px;border-radius:9px;cursor:pointer;border:2px solid transparent;position:relative;overflow:hidden;transition:transform .1s;}
.bg-swatch:hover{transform:scale(1.05);}
.bg-swatch.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.bg-swatch .bg-name{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8.5px;font-weight:700;color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.5);}
.bg-upload-btn{margin-top:9px;width:100%;font-size:12px;}

/* Review badge on cards + toggle in form */
.card-review{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--warning);background:var(--warning-dim);border-radius:8px;padding:2px 7px;margin-top:2px;}
.review-toggle{display:flex;gap:8px;margin-top:4px;}
.review-opt{flex:1;text-align:center;padding:9px;border-radius:9px;border:1px solid var(--border);cursor:pointer;font-size:12.5px;color:var(--text-muted);font-weight:500;transition:all .12s;}
.review-opt.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600;}

/* =====================================================================
   v10 — Slack-style task chat
   ===================================================================== */
.chat-list{display:flex;flex-direction:column;gap:3px;max-height:360px;overflow-y:auto;padding:4px 2px;margin-bottom:10px;}
.chat-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:24px 0;}
.chat-row{display:flex;gap:9px;align-items:flex-start;position:relative;padding:2px 0;}
.chat-row.mine{flex-direction:row-reverse;}
.chat-row.grouped{padding-top:0;}
.chat-ava{width:30px;height:30px;font-size:11px;flex-shrink:0;margin-top:2px;}
.chat-ava-space{width:30px;flex-shrink:0;}
.chat-row.mine .chat-ava-space{width:0;}
.chat-main{max-width:78%;min-width:0;display:flex;flex-direction:column;}
.chat-row.mine .chat-main{align-items:flex-end;}
.chat-head{display:flex;align-items:baseline;gap:7px;margin:2px 2px 3px;}
.chat-name{font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;}
.chat-name:hover{text-decoration:underline;}
.chat-time{font-size:10.5px;color:var(--text-faint);}
.chat-bubble{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;border-top-left-radius:5px;padding:8px 12px;font-size:13.5px;line-height:1.45;word-break:break-word;}
.chat-row.mine .chat-bubble{background:var(--accent);color:#fff;border-color:transparent;border-top-left-radius:14px;border-top-right-radius:5px;}
.chat-row.mine .chat-bubble .mention{background:rgba(255,255,255,.22);color:#fff;}
.chat-bubble.deleted{color:var(--text-faint);font-style:italic;background:transparent;border-style:dashed;}
.chat-text{white-space:pre-wrap;}
.chat-quote{border-left:3px solid var(--accent);padding:3px 8px;margin-bottom:5px;font-size:12px;color:var(--text-muted);background:var(--surface-3);border-radius:5px;cursor:pointer;}
.chat-row.mine .chat-quote{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9);border-left-color:rgba(255,255,255,.6);}
.chat-quote b{color:var(--text);}
.chat-row.mine .chat-quote b{color:#fff;}
.chat-atts{margin-top:6px;display:flex;flex-direction:column;gap:5px;}
.chat-img img{max-width:200px;max-height:160px;border-radius:9px;display:block;}
.chat-file{display:inline-block;font-size:12.5px;color:inherit;text-decoration:none;background:var(--surface-3);border-radius:7px;padding:5px 9px;}
.chat-row.mine .chat-file{background:rgba(255,255,255,.2);}
.chat-reacts{display:flex;gap:4px;margin:4px 2px 0;flex-wrap:wrap;}
.chat-react{font-size:11.5px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:1px 7px;cursor:pointer;line-height:1.6;}
.chat-react:hover{border-color:var(--text-faint);}
.chat-react.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600;}
.chat-actions{position:absolute;top:-10px;display:none;gap:1px;background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow-md);padding:2px;}
.chat-row:not(.mine) .chat-actions{right:8px;}
.chat-row.mine .chat-actions{left:8px;}
.chat-row:hover .chat-actions{display:flex;}
.chat-act{background:none;border:none;cursor:pointer;font-size:13px;width:26px;height:26px;border-radius:7px;}
.chat-act:hover{background:var(--surface-2);}
.chat-row.flash .chat-bubble{animation:flashBubble 1.2s ease;}
@keyframes flashBubble{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 3px var(--accent-soft);}}
.react-picker{position:fixed;z-index:400;display:none;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px 7px;}
.react-picker span{cursor:pointer;font-size:19px;padding:2px 3px;border-radius:7px;}
.react-picker span:hover{background:var(--surface-2);transform:scale(1.2);}

/* Reply bar + composer */
.reply-bar{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border-radius:8px 8px 0 0;padding:6px 10px;font-size:12px;color:var(--text-muted);border:1px solid var(--border);border-bottom:none;}
.reply-bar-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-bar-text b{color:var(--accent);}
.reply-bar-x{background:none;border:none;cursor:pointer;color:var(--text-faint);font-size:13px;}
.reply-bar-x:hover{color:var(--danger);}
.chat-attach-preview:not(:empty){margin-bottom:6px;}
.chat-attach-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12.5px;}
.chat-attach-chip span{cursor:pointer;color:var(--text-faint);}
.chat-attach-chip span:hover{color:var(--danger);}
.chat-composer{display:flex;align-items:flex-end;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:6px 8px;}
.chat-attach-btn{cursor:pointer;font-size:18px;padding:5px 4px;color:var(--text-muted);user-select:none;align-self:center;}
.chat-attach-btn:hover{color:var(--accent);}
.chat-input{flex:1;border:none;background:transparent;resize:none;font-family:inherit;font-size:13.5px;color:var(--text);outline:none;max-height:120px;padding:6px 0;line-height:1.4;}
.chat-input.editing{outline:2px solid var(--warning);outline-offset:3px;border-radius:6px;}
.chat-send{width:34px;height:34px;border-radius:9px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:15px;flex-shrink:0;align-self:center;transition:filter .1s;}
.chat-send:hover{filter:brightness(1.08);}

/* Unread badge on cards */
.card-badges .badge.unread{background:var(--accent);color:#fff;font-weight:700;}

/* =====================================================================
   v11 — Status label + smart next-step button
   ===================================================================== */
.detail-status-wrap{display:flex;align-items:center;gap:9px;}
.detail-status-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.detail-next-btn{display:block;width:100%;margin:12px 0 4px;padding:12px;border:none;border-radius:11px;font-size:14.5px;font-weight:700;cursor:pointer;transition:filter .12s,transform .08s;font-family:'Manrope','Inter',sans-serif;}
.detail-next-btn:active{transform:scale(.99);}
.detail-next-btn.primary{background:linear-gradient(135deg,var(--accent),#7C74F0);color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.3);}
.detail-next-btn.primary:hover{filter:brightness(1.07);}
.detail-next-btn.ghost{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);box-shadow:none;}
.detail-next-btn.ghost:hover{color:var(--text);border-color:var(--text-faint);}

/* =====================================================================
   v12 — Password change + backups
   ===================================================================== */
.pw-slot{margin-top:8px;}
.pw-form{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.pw-form input{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text);font-family:inherit;}
.pw-form input:focus{outline:none;border-color:var(--accent);}
.pw-actions{display:flex;gap:7px;justify-content:flex-end;}
.dash-backup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.backup-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.backup-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-size:12.5px;}
.backup-name{font-weight:600;font-family:'Manrope';}
.backup-meta{color:var(--text-faint);margin-left:auto;white-space:nowrap;}
.backup-row a.btn-sm{text-decoration:none;}