.dashboard { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; width: 100%; display: flex; flex-direction: column; gap: 20px; } /* Top bar */ .topBar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 4px; flex-wrap: wrap; gap: 12px; } .topBarLeft { display: flex; align-items: center; gap: 12px; } .backBtn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; } .backBtn:hover { background: var(--bg-surface-2); color: var(--text-primary); } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-muted); } .breadcrumbSep { color: var(--border-strong); } .breadcrumbFile { color: var(--text-primary); font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topBarRight { display: flex; align-items: center; gap: 8px; } .actionBtn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; text-decoration: none; } .actionBtn:hover { background: var(--bg-surface-2); color: var(--text-primary); } .actionBtnPrimary { background: var(--accent); color: white; border-color: var(--accent); } .actionBtnPrimary:hover { background: var(--accent-hover); color: white; border-color: var(--accent-hover); } /* Export button */ .actionBtnExport { background: var(--text-primary); color: white; border-color: var(--text-primary); text-decoration: none; } .actionBtnExport:hover:not(:disabled) { background: #2d3748; color: white; border-color: #2d3748; } .actionBtnExport:disabled { opacity: 0.75; cursor: not-allowed; } .exportDone { background: var(--authentic) !important; border-color: var(--authentic) !important; color: white !important; } .spinIcon { animation: spin 0.8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Split layout */ .splitLayout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; } .leftCol { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rightCol { position: sticky; top: 76px; } @media (max-width: 960px) { .splitLayout { grid-template-columns: 1fr; } .rightCol { position: static; } } @media (max-width: 600px) { .dashboard { padding: 0 16px 40px; } .topBar { flex-direction: column; align-items: flex-start; } .topBarRight { width: 100%; flex-wrap: wrap; } .actionBtn span { display: none; } .breadcrumb { display: none; } }