painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/css/66-active-sessions.css

@@ -0,0 +1,979 @@
+/**
+ * Active Sessions Widget Styles
+ *
+ * Three-tab interface: Sessions | Instances | Stats
+ * - Sessions: Agent sessions with process state
+ * - Instances: Background processes with history timeline
+ * - Stats: Aggregated statistics dashboard
+ */
+
+/* Widget container */
+.active-sessions-widget {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-secondary);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Tab Bar
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.as-tabs {
+    display: flex;
+    align-items: center;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    padding: 0 var(--sp-8);
+    gap: var(--sp-4);
+}
+
+.as-tab {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-10) var(--sp-12);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.as-tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+}
+
+.as-tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.as-tab-badge {
+    font-size: 10px;
+    font-weight: 700;
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+    min-width: 18px;
+    text-align: center;
+}
+
+.as-tab-badge.running {
+    background: var(--accent-green, #22c55e);
+    color: white;
+}
+
+.as-tab-badge.history {
+    background: var(--bg-secondary);
+    color: var(--text-muted);
+}
+
+.as-auto-refresh-mini {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+    margin-left: auto;
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    cursor: pointer;
+}
+
+.as-auto-refresh-mini input {
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+}
+
+/* Tab content */
+.as-tab-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--sp-8);
+}
+
+/* Legacy toolbar (kept for backwards compat) */
+.as-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--sp-8) var(--sp-12);
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    gap: var(--sp-12);
+}
+
+.as-summary {
+    display: flex;
+    gap: var(--sp-12);
+    font-size: var(--font-size-sm);
+}
+
+.as-count-running {
+    color: var(--accent-green, #22c55e);
+    font-weight: 600;
+}
+
+.as-count-total {
+    color: var(--text-muted);
+}
+
+.as-auto-refresh {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+}
+
+.as-auto-refresh input {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+/* Session list */
+.as-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--sp-8);
+}
+
+/* Empty/loading states */
+.as-loading,
+.as-error,
+.as-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sp-32) var(--sp-20);
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.as-loading svg {
+    animation: spin 1s linear infinite;
+    margin-bottom: var(--sp-8);
+}
+
+.as-error {
+    color: var(--accent-red, #ef4444);
+}
+
+.as-empty-icon {
+    font-size: 32px;
+    margin-bottom: var(--sp-12);
+    opacity: 0.4;
+}
+
+.as-empty-icon svg {
+    width: 48px;
+    height: 48px;
+}
+
+.as-empty-text {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    margin-bottom: var(--sp-4);
+}
+
+.as-empty-hint {
+    font-size: var(--font-size-sm);
+    opacity: 0.7;
+}
+
+/* Session card */
+.as-session {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--sp-8);
+    padding: var(--sp-10) var(--sp-12);
+    cursor: pointer;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.as-session:hover {
+    border-color: var(--accent);
+}
+
+.as-session.running {
+    border-left: 3px solid var(--accent-green, #22c55e);
+}
+
+.as-session.idle {
+    border-left: 3px solid var(--text-muted);
+    opacity: 0.8;
+}
+
+/* Session header */
+.as-session-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sp-10);
+    margin-bottom: var(--sp-8);
+}
+
+/* Status indicator */
+.as-status {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    background: var(--bg-secondary);
+}
+
+.as-status svg {
+    width: 16px;
+    height: 16px;
+}
+
+.as-status.status-thinking {
+    background: rgba(168, 85, 247, 0.15);
+    color: #a855f7;
+}
+
+.as-status.status-thinking svg {
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+.as-status.status-tasks {
+    background: rgba(59, 130, 246, 0.15);
+    color: var(--accent-blue);
+}
+
+.as-status.status-tools {
+    background: rgba(245, 158, 11, 0.15);
+    color: #f59e0b;
+}
+
+.as-status.status-tools svg {
+    animation: spin 2s linear infinite;
+}
+
+.as-status.status-streaming {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.as-status.status-streaming svg {
+    animation: pulse 1s ease-in-out infinite;
+}
+
+.as-status.status-compacting {
+    background: rgba(107, 114, 128, 0.15);
+    color: #6b7280;
+}
+
+.as-status.status-idle {
+    background: var(--bg-secondary);
+    color: var(--text-muted);
+}
+
+.as-status.status-disconnected {
+    background: rgba(107, 114, 128, 0.1);
+    color: var(--text-muted);
+    opacity: 0.7;
+}
+
+/* Session info */
+.as-session-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.as-name {
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: var(--sp-2);
+}
+
+.as-cwd {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Session stats */
+.as-session-stats {
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.as-cost {
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    color: var(--accent-green, #22c55e);
+    font-family: var(--font-mono);
+}
+
+.as-messages {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+/* Session body */
+.as-session-body {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.as-meta-row {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    margin-bottom: var(--sp-6);
+}
+
+.as-meta-label {
+    color: var(--text-muted);
+}
+
+.as-meta-value {
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.as-ws-badge {
+    background: rgba(34, 197, 94, 0.2);
+    color: var(--accent-green, #22c55e);
+    font-size: 10px;
+    font-weight: 600;
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+    margin-left: auto;
+}
+
+.as-idle-time {
+    color: var(--text-muted);
+}
+
+.as-model {
+    background: var(--bg-secondary);
+    color: var(--text-muted);
+    font-size: 10px;
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+}
+
+/* Prompt preview */
+.as-prompt-preview {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    font-style: italic;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: var(--sp-6);
+    padding: var(--sp-4) var(--sp-8);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+}
+
+/* Tools summary */
+.as-tools-summary,
+.as-tasks-summary {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    font-size: var(--font-size-xs);
+    color: var(--accent-orange, #f59e0b);
+    font-family: var(--font-mono);
+    margin-bottom: var(--sp-4);
+}
+
+.as-tools-icon svg,
+.as-tasks-icon svg {
+    width: 12px;
+    height: 12px;
+}
+
+.as-tasks-summary {
+    color: var(--accent);
+}
+
+/* Actions */
+.as-session-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--sp-6);
+    margin-top: var(--sp-8);
+    padding-top: var(--sp-8);
+    border-top: 1px solid var(--border-color);
+}
+
+.as-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 28px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.as-btn:hover {
+    background: var(--bg-primary);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.as-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.as-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
+.as-btn-stop:hover {
+    border-color: var(--accent-red, #ef4444);
+    color: var(--accent-red, #ef4444);
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.as-btn-jump:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+/* Animations */
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Claude Instances (Background Processes) Section
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Section header */
+.as-section-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-10) var(--sp-12);
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.05));
+    border-bottom: 1px solid var(--border-color);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.as-section-icon svg {
+    width: 14px;
+    height: 14px;
+    color: var(--accent-purple, #8b5cf6);
+}
+
+.as-section-title {
+    flex: 1;
+}
+
+.as-section-count {
+    background: var(--accent-purple, #8b5cf6);
+    color: white;
+    font-size: 10px;
+    font-weight: 700;
+    padding: var(--sp-2) var(--sp-8);
+    border-radius: var(--radius-sm);
+}
+
+/* Instances container */
+.as-instances {
+    padding: var(--sp-8);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+/* Individual instance card */
+.as-instance {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-12);
+    padding: var(--sp-10) var(--sp-12);
+    margin-bottom: var(--sp-6);
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-left: 3px solid var(--accent-purple, #8b5cf6);
+    border-radius: var(--radius-md);
+    transition: all 0.15s;
+}
+
+.as-instance:last-child {
+    margin-bottom: 0;
+}
+
+.as-instance:hover {
+    border-color: var(--accent-purple, #8b5cf6);
+    background: var(--bg-secondary);
+}
+
+.as-instance-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.as-instance-type {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    margin-bottom: var(--sp-4);
+}
+
+.as-type-badge {
+    font-size: 10px;
+    font-weight: 600;
+    padding: var(--sp-2) var(--sp-8);
+    border-radius: var(--radius-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.as-type-badge.summary_fork {
+    background: rgba(139, 92, 246, 0.2);
+    color: var(--accent-purple, #8b5cf6);
+}
+
+.as-type-badge.compaction {
+    background: rgba(var(--accent-rgb), 0.2);
+    color: var(--accent);
+}
+
+.as-type-badge.task_agent {
+    background: rgba(34, 197, 94, 0.2);
+    color: var(--accent-green, #22c55e);
+}
+
+.as-instance-model {
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+    background: var(--bg-secondary);
+    padding: var(--sp-2) var(--sp-6);
+    border-radius: var(--radius-sm);
+}
+
+.as-instance-purpose {
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    margin-bottom: var(--sp-4);
+}
+
+.as-instance-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-10);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+}
+
+.as-instance-meta span {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+}
+
+.as-instance-parent {
+    font-size: 10px;
+    color: var(--text-muted);
+    margin-top: var(--sp-4);
+    padding-left: var(--sp-8);
+    border-left: 2px solid var(--border-color);
+}
+
+/* Pulse animation for running status */
+.as-instance-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.as-pulse {
+    width: 10px;
+    height: 10px;
+    background: var(--accent-purple, #8b5cf6);
+    border-radius: 50%;
+    animation: pulse-glow 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6);
+        transform: scale(1);
+    }
+    50% {
+        box-shadow: 0 0 8px 4px rgba(139, 92, 246, 0.2);
+        transform: scale(1.1);
+    }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   History Tab (Instances with timeline)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.as-instances-tab {
+    padding: 0;
+}
+
+.as-history-group {
+    margin-bottom: var(--sp-4);
+}
+
+.as-history-group-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-10) var(--sp-12);
+    background: var(--bg-primary);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.as-pulse-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--accent-green, #22c55e);
+    border-radius: 50%;
+    animation: pulse-glow-green 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-glow-green {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
+    50% { box-shadow: 0 0 6px 3px rgba(34, 197, 94, 0.2); }
+}
+
+.as-history-items {
+    padding: var(--sp-8);
+}
+
+.as-history-item {
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
+    gap: var(--sp-8) var(--sp-12);
+    align-items: center;
+    padding: var(--sp-10) var(--sp-12);
+    margin-bottom: var(--sp-6);
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+}
+
+.as-history-item.success {
+    border-left: 3px solid var(--accent-green, #22c55e);
+}
+
+.as-history-item.timeout {
+    border-left: 3px solid var(--accent-orange, #f59e0b);
+}
+
+.as-history-item.error {
+    border-left: 3px solid var(--accent-red, #ef4444);
+}
+
+.as-history-item.killed {
+    border-left: 3px solid var(--text-muted);
+}
+
+.as-history-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+}
+
+.as-history-status svg {
+    width: 14px;
+    height: 14px;
+}
+
+.as-history-status.status-success { color: var(--accent-green, #22c55e); }
+.as-history-status.status-timeout { color: var(--accent-orange, #f59e0b); }
+.as-history-status.status-error { color: var(--accent-red, #ef4444); }
+.as-history-status.status-killed { color: var(--text-muted); }
+
+.as-history-time {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
+.as-history-info {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    flex-wrap: wrap;
+}
+
+.as-history-duration {
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+}
+
+.as-history-cost {
+    font-family: var(--font-mono);
+    color: var(--accent-green, #22c55e);
+}
+
+.as-history-preview {
+    grid-column: 1 / -1;
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    font-style: italic;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--sp-6) var(--sp-8);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+    margin-top: var(--sp-4);
+}
+
+.as-history-error {
+    grid-column: 1 / -1;
+    font-size: var(--font-size-xs);
+    color: var(--accent-red, #ef4444);
+    padding: var(--sp-6) var(--sp-8);
+    background: rgba(239, 68, 68, 0.1);
+    border-radius: var(--radius-sm);
+    margin-top: var(--sp-4);
+}
+
+.as-history-parent {
+    grid-column: 1 / -1;
+    font-size: 10px;
+    color: var(--text-muted);
+    padding-left: var(--sp-8);
+    border-left: 2px solid var(--border-color);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Stats Tab
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.as-stats-tab {
+    padding: var(--sp-12);
+}
+
+/* Summary cards */
+.as-stats-summary {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--sp-10);
+    margin-bottom: var(--sp-16);
+}
+
+.as-stat-card {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--sp-12);
+    text-align: center;
+}
+
+.as-stat-card.success {
+    border-color: var(--accent-green, #22c55e);
+    background: rgba(34, 197, 94, 0.05);
+}
+
+.as-stat-card.cost {
+    border-color: var(--accent-purple, #8b5cf6);
+    background: rgba(139, 92, 246, 0.05);
+}
+
+.as-stat-value {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}
+
+.as-stat-card.success .as-stat-value {
+    color: var(--accent-green, #22c55e);
+}
+
+.as-stat-card.cost .as-stat-value {
+    color: var(--accent-purple, #8b5cf6);
+}
+
+.as-stat-label {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    margin-top: var(--sp-4);
+}
+
+/* Stats sections */
+.as-stats-section {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: var(--sp-12);
+    margin-bottom: var(--sp-12);
+}
+
+.as-stats-section-title {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: var(--sp-10);
+}
+
+/* Status bars */
+.as-status-bars {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+}
+
+.as-status-bar-row {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-10);
+}
+
+.as-status-bar-label {
+    width: 60px;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+}
+
+.as-status-bar {
+    flex: 1;
+    height: 8px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.as-status-bar-fill {
+    height: 100%;
+    border-radius: var(--radius-sm);
+    transition: width 0.3s ease;
+}
+
+.as-status-bar-fill.success { background: var(--accent-green, #22c55e); }
+.as-status-bar-fill.timeout { background: var(--accent-orange, #f59e0b); }
+.as-status-bar-fill.error { background: var(--accent-red, #ef4444); }
+.as-status-bar-fill.killed { background: var(--text-muted); }
+
+.as-status-bar-value {
+    width: 30px;
+    text-align: right;
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+}
+
+/* Type stats */
+.as-type-stats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+}
+
+.as-type-stat {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-10);
+    font-size: var(--font-size-xs);
+}
+
+.as-type-count {
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
+}
+
+.as-type-avg {
+    color: var(--text-muted);
+}
+
+.as-type-cost {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    color: var(--accent-green, #22c55e);
+}
+
+/* Token stats */
+.as-tokens-stats {
+    display: flex;
+    justify-content: space-around;
+    gap: var(--sp-16);
+}
+
+.as-token-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-4);
+}
+
+.as-token-value {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    font-family: var(--font-mono);
+    color: var(--text-primary);
+}
+
+.as-token-label {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+/* Mobile adjustments */
+@media (max-width: 480px) {
+    .as-toolbar {
+        flex-wrap: wrap;
+    }
+
+    .as-session-header {
+        flex-wrap: wrap;
+    }
+
+    .as-session-stats {
+        width: 100%;
+        text-align: left;
+        display: flex;
+        gap: var(--sp-12);
+        margin-top: var(--sp-4);
+    }
+}