/* ── Sidebar ────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-width); background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; } .sidebar-header { padding: 20px 16px 12px; border-bottom: 1px solid var(--border); text-align: center; } .sidebar-title { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; text-decoration: none; display: inline-block; transition: color 0.15s ease; padding-bottom: 10px; } .sidebar-title:hover { color: var(--accent); } .btn-new { margin: 12px; padding: 10px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; text-align: left; } .btn-new:hover { background: var(--accent-hover); } .sidebar-section-label { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .sidebar-list { list-style: none; overflow-y: auto; flex: 1; padding: 4px 8px 8px; } .sidebar-empty { padding: 8px; color: var(--text-dim); font-size: 13px; } .sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); font-size: 13px; transition: background 0.1s, color 0.1s; user-select: none; } .sidebar-item:hover { background: var(--bg-surface-2); color: var(--text); } .sidebar-item.selected { background: var(--accent-dim); color: var(--text); } .sidebar-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; } .status-done { color: var(--green); } .status-error { color: var(--red); } .status-running { color: var(--accent); } .status-pending { color: var(--text-dim); } .sidebar-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }