.work-toolbar { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); flex-wrap:wrap; }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-4); }
.project-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); box-shadow:var(--shadow-sm); transition:box-shadow var(--transition),transform var(--transition); cursor:pointer; }
.project-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.project-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.project-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.project-card-name { font-size:1rem; font-weight:700; flex:1; }
.project-card-desc { font-size:.85rem; color:var(--color-text-secondary); }
.project-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.project-stats { font-size:.78rem; color:var(--color-text-muted); }
.project-tags { display:flex; gap:var(--space-1); flex-wrap:wrap; }

.project-detail-header { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.back-btn { display:flex; align-items:center; gap:var(--space-2); font-size:.875rem; color:var(--color-text-secondary); font-weight:500; flex-shrink:0; }
.back-btn:hover { color:var(--color-primary); }
.back-btn svg { width:18px; height:18px; }
.project-detail-title { font-size:1.5rem; font-weight:800; flex:1; min-width:0; }
.project-detail-meta { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-5); }

.view-toggle { display:flex; background:var(--color-bg); border-radius:var(--radius-sm); padding:3px; gap:2px; }
.view-btn { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); font-size:.82rem; font-weight:500; color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition); border:none; background:none; }
.view-btn.active { background:var(--color-surface); color:var(--color-primary); box-shadow:var(--shadow-sm); }
.view-btn svg { width:15px; height:15px; }

.work-item-list { display:flex; flex-direction:column; gap:2px; margin-top:var(--space-4); }
.work-item-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); cursor:pointer; transition:box-shadow var(--transition); }
.work-item-row:hover { box-shadow:var(--shadow-md); border-color:var(--color-primary); }
.work-item-title { flex:1; font-size:.9rem; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-item-row.done .work-item-title { text-decoration:line-through; color:var(--color-text-muted); }
.work-item-meta { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.work-item-date { font-size:.78rem; color:var(--color-text-muted); }

/* Kanban: horizontal scroll on tablet/phone */
.kanban-board {
  display:grid; grid-template-columns:repeat(3,minmax(260px,1fr));
  gap:var(--space-5); margin-top:var(--space-4); align-items:start;
}
.kanban-column { background:var(--color-bg); border-radius:var(--radius-lg); padding:var(--space-4); min-height:300px; display:flex; flex-direction:column; gap:var(--space-3); }
.kanban-column.drag-over { background:var(--color-primary-light); border:2px dashed var(--color-primary); }
.kanban-col-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--space-3); border-bottom:2px solid var(--color-border); }
.kanban-col-title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--color-text-secondary); }
.kanban-col-count { font-size:.75rem; background:var(--color-border); color:var(--color-text-muted); padding:1px 8px; border-radius:var(--radius-full); }
.kanban-cards { display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.kanban-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); cursor:grab; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition); display:flex; flex-direction:column; gap:var(--space-2); }
.kanban-card:hover { box-shadow:var(--shadow-md); }
.kanban-card:active { cursor:grabbing; }
.kanban-card.dragging { opacity:.4; }
.kanban-card-title { font-size:.875rem; font-weight:600; }
.kanban-card-meta { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.kanban-card-date { font-size:.75rem; color:var(--color-text-muted); }
.kanban-add-btn { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); font-size:.82rem; color:var(--color-text-muted); background:none; border:1px dashed var(--color-border); width:100%; cursor:pointer; transition:all var(--transition); }
.kanban-add-btn:hover { background:var(--color-surface); color:var(--color-text); border-color:var(--color-text-muted); }
.kanban-add-btn svg { width:14px; height:14px; }

/* ── Kanban scroll wrapper for tablet/phone ── */
.kanban-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-4); margin:0 calc(-1 * var(--space-3)); padding-left:var(--space-3); padding-right:var(--space-3); }

/* ── Tablet (≤1024px) ── */
@media (max-width:1024px) {
  .projects-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .kanban-board { grid-template-columns:repeat(3,260px); }
}

/* ── Phone (≤640px) ── */
@media (max-width:640px) {
  .work-toolbar { gap:var(--space-2); }
  .projects-grid { grid-template-columns:1fr; }

  .project-detail-header { gap:var(--space-2); margin-bottom:var(--space-4); }
  .project-detail-title { font-size:1.2rem; }

  /* Kanban: horizontal scroll, fixed column width */
  .kanban-board { grid-template-columns:repeat(3,240px); gap:var(--space-3); }

  .work-item-date { display:none; }
  .work-item-row { padding:var(--space-3); }
}