.main-wrap { display: flex; flex-direction: column; overflow: hidden; }
.main-toggles { flex-shrink: 0; border-bottom: 1px solid var(--border); }
.main-toggles .toggle-row { display: flex; border-bottom: 1px solid var(--border); }
.main-toggles .toggle-row:last-child { border-bottom: none; }
.main-toggles .view-toggle { display: flex; flex: 1; border: none; }
.main-toggles .view-btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 10px; border: none; border-right: 1px solid var(--border); transition: background 0.2s ease, color 0.15s ease; }
.main-toggles .view-btn:last-child { border-right: none; }
.main { overflow-y: auto; padding: 20px 24px; flex: 1; transition: opacity 0.2s ease-out; }
.header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; animation: fadeIn 0.2s ease-out; }
.header h2 { font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }

/* view toggle */
.view-toggle { display: flex; border: 1px solid var(--border); }
.view-btn { flex: 1; text-align: center; padding: 6px; font-family: inherit; font-size: 10px; background: none; border: none; color: var(--text-dim); cursor: pointer; transition: background 0.2s ease, color 0.15s ease; }
.view-btn.active { background: var(--accent); color: #fff; }

/* action button */
.action-btn { width: 100%; text-align: center; background: none; border: 1px solid var(--accent); color: var(--accent); font-family: inherit; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px; cursor: pointer; transition: background 0.15s ease, opacity 0.3s ease, box-shadow 0.3s ease; }
.action-btn:hover:not(:disabled) { background: var(--accent-dim); }
.action-btn:disabled { opacity: 0.3; cursor: default; }
.action-btn .btn-spinner { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 6px; vertical-align: middle; }
.action-btn.scraping { opacity: 1; border-color: var(--accent); color: var(--accent); cursor: default; }

.progress { font-size: 10px; color: var(--text-dim); padding: 4px 0; min-height: 18px; transition: opacity 0.15s ease; }
.progress .active { color: var(--accent); }
.progress .err { color: var(--red); }

.spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; gap: 14px; animation: fadeIn 0.3s ease-out; }
.spinner-ring { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner-text { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; color: var(--text-dim); text-align: center; gap: 12px; animation: fadeIn 0.3s ease-out; }
.empty-state .hint { font-size: 10px; max-width: 300px; line-height: 1.8; }