/* Setup-page styles, extracted from an inline <style> block on 2026-10-02 so that
   404.html can use the same .setup-* classes. It previously lived ONLY inside
   newtab-setup.html, and 404.html links just styles.css, so every .setup-wrap /
   .setup-sub / .setup-card box on that page rendered completely unstyled.
   Note .hint below is also defined in styles.css; this copy is the setup-page
   original and is intentionally kept identical in effect. */
.setup-wrap { max-width: 820px; margin: 0 auto; padding: 40px 20px 70px; }
.setup-wrap h1 { font-size: 30px; margin-bottom: 6px; }
.setup-sub { color: var(--text-muted); margin-bottom: 26px; }
.setup-card { margin-bottom: 18px; }
.setup-card h2 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex: 0 0 28px;
}
.setup-card ol, .setup-card ul { padding-left: 20px; }
.setup-card li { margin-bottom: 8px; line-height: 1.6; font-size: 14px; }
.setup-code {
    display: inline-block; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px;
}
.browser-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.browser-tab {
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500;
}
.browser-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.browser-panel { display: none; }
.browser-panel.active { display: block; }
.hint { color: var(--text-muted); font-size: 13px; margin-top: 22px; line-height: 1.6; }