/* Header - per AI.md PART 16: NO position: sticky/fixed on header/nav/footer */
.header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Site brand - per AI.md PART 16 */
.site-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    white-space: nowrap;
}

.site-brand:hover {
    color: var(--accent-secondary);
    text-decoration: none;
}

/* Legacy .logo class for backwards compatibility */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
}

.logo:hover {
    color: var(--accent-primary);
    text-decoration: none;
}

.logo-icon {
    font-size: 1.5rem;
}

.logo-img {
    height: 32px;
    width: auto;
}

/* User menu (always visible, far right) - per AI.md PART 16 */
.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Shared icon button style for header actions (theme toggle, preferences) */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.header-icon-btn:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
    text-decoration: none;
}

/* Legacy .user-icon kept for backwards compat */
.user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-icon:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
    text-decoration: none;
}

.user-icon svg {
    width: 20px;
    height: 20px;
}

/* Legacy header-actions for backwards compatibility */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.header-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-icon-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
    text-decoration: none;
}

.header-icon-link svg {
    width: 20px;
    height: 20px;
}

.header-search {
    flex: 1;
    max-width: 500px;
    display: flex;
}

.header-search-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-right: none;
    border-radius: 20px 0 0 20px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.header-search-input:focus {
    outline: none;
    border-color: var(--input-focus);
}

.header-search-btn {
    padding: 0.4rem 0.6rem;
    min-height: 44px;
    background-color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 0 20px 20px 0;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.header-search-btn:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

/* Hide nav-links on mobile - show only in slide-in panel */
.nav-links {
    display: none;
    align-items: center;
    gap: 1rem;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.5rem;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-primary);
}

/* Sub-header search bar — shown below header on non-home pages */
.subheader {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
}

.subheader-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 700px;
    box-shadow: 0 2px 8px var(--shadow-color);
    border-radius: 22px;
}

.subheader-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0.5rem 1rem;
    background-color: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-right: none;
    border-radius: 22px 0 0 22px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.subheader-input:focus {
    outline: none;
    border-color: var(--input-focus);
}

.subheader-adv-btn {
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-left: none;
    border-right: none;
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.subheader-adv-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.subheader-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1.25rem;
    background-color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
    border-radius: 0 22px 22px 0;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.subheader-btn:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

/* Header actions - theme toggle + settings icons, grouped on the right */
.header-actions {
    display: none;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Header mobile - hamburger only (shown on mobile, hidden on tablet+) */
.header-mobile {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Tablet+ (768px): hide mobile hamburger, show desktop actions */
@media (min-width: 768px) {
    .header-search-input {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .header-search-btn {
        padding: 0.5rem 1rem;
    }

    .header-mobile {
        display: none;
    }

    .header-actions {
        display: flex;
    }
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.theme-toggle:hover {
    color: var(--accent-primary);
}

/* Nav Search Form - Mobile first */
.nav-search-form {
    display: flex;
    align-items: stretch;
    flex: 1;
    max-width: 400px;
    margin: 0 0.5rem;
}

.nav-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 20px 0 0 20px;
    color: var(--text-primary);
    outline: none;
}

.nav-search-input:focus {
    border-color: var(--accent-primary);
}

.nav-search-input::placeholder {
    color: var(--text-muted);
}

.nav-search-btn {
    padding: 0.5rem 0.75rem;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    background-color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 0 20px 20px 0;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-search-btn:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

/* Per AI.md PART 16: Use data-theme-mode attribute for icon display (supports auto mode) */
/* Auto icon hidden by default (before JS runs) */
.theme-icon-auto { display: none; }

/* Dark mode: show sun icon (indicates current = dark; clicking → light) */
html[data-theme-mode="dark"] .theme-icon-dark { display: block; }
html[data-theme-mode="dark"] .theme-icon-light,
html[data-theme-mode="dark"] .theme-icon-auto { display: none; }

/* Light mode: show moon icon (indicates current = light; clicking → auto) */
html[data-theme-mode="light"] .theme-icon-light { display: block; }
html[data-theme-mode="light"] .theme-icon-dark,
html[data-theme-mode="light"] .theme-icon-auto { display: none; }

/* Auto mode: show monitor icon (indicates current = auto; clicking → dark) */
html[data-theme-mode="auto"] .theme-icon-auto { display: block; }
html[data-theme-mode="auto"] .theme-icon-dark,
html[data-theme-mode="auto"] .theme-icon-light { display: none; }

/* Navigation bar - HIDDEN: nav moved to header per AI.md PART 16 */
.nav {
    display: none;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Hidden checkbox controls menu state - NO JavaScript per AI.md PART 16 */
.nav-checkbox {
    display: none;
}

/* Hamburger toggle (label) - visible on mobile, hidden on desktop */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.nav-toggle:hover {
    background-color: var(--bg-secondary);
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hamburger animation when open - works with checkbox at header level */
.nav-checkbox:checked ~ .header-mobile .nav-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-checkbox:checked ~ .header-mobile .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-checkbox:checked ~ .header-mobile .nav-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav panel (slide-in menu) - hidden off-screen by default */
.nav-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background-color: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

/* Nav panel header */
.nav-panel::before {
    content: 'Menu';
    display: block;
    padding: 1rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

/* Close button in nav panel */
.nav-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.nav-close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-panel-search {
    display: flex;
    align-items: stretch;
    margin: 0.75rem 1rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    overflow: hidden;
}

.nav-panel-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    background-color: var(--input-bg);
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.nav-panel-search-input:focus {
    outline: none;
}

.nav-panel-search-btn {
    padding: 0.6rem 0.75rem;
    min-height: 44px;
    background-color: var(--accent-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-panel-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}

.nav-panel-link:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
    text-decoration: none;
}

.nav-panel-link.active {
    background-color: rgba(189, 147, 249, 0.1);
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
}

/* Nav panel icons - per AI.md PART 16: NO inline styles */
.nav-panel-icon {
    margin-right: 12px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Nav panel divider */
.nav-panel-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}

/* Theme toggle in nav panel */
.nav-panel-theme {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

.nav-panel-theme:hover {
    background-color: var(--bg-secondary);
    color: var(--accent-primary);
}

/* Theme label visibility — cycles: dark→light→auto. Labels show what clicking will do */
html[data-theme-mode="dark"] .theme-label-dark { display: inline; }
html[data-theme-mode="dark"] .theme-label-light,
html[data-theme-mode="dark"] .theme-label-auto { display: none; }
html[data-theme-mode="light"] .theme-label-light { display: inline; }
html[data-theme-mode="light"] .theme-label-dark,
html[data-theme-mode="light"] .theme-label-auto { display: none; }
html[data-theme-mode="auto"] .theme-label-auto { display: inline; }
html[data-theme-mode="auto"] .theme-label-dark,
html[data-theme-mode="auto"] .theme-label-light { display: none; }
/* Before JS runs: hide labels when no data-theme-mode attribute set */
html:not([data-theme-mode]) .theme-label-dark,
html:not([data-theme-mode]) .theme-label-light,
html:not([data-theme-mode]) .theme-label-auto { display: none; }

/* Nav overlay (label) - hidden by default */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    cursor: pointer;
}

/* CSS-only mobile menu: checkbox :checked triggers panel and overlay */
.nav-checkbox:checked ~ .nav-panel {
    right: 0;
}

.nav-checkbox:checked ~ .nav-overlay {
    display: block;
}

/* Tablet+ (768px): show inline links, hide hamburger per AI.md PART 16 */
@media (min-width: 768px) {
    .nav-toggle {
        display: none !important;
    }

    .nav-panel,
    .nav-overlay,
    .nav-close {
        display: none !important;
    }

    .nav-links {
        display: flex;
    }

    .nav {
        justify-content: space-between;
    }
}

/* Backward compat - remove old overlay styles */
.nav-overlay-old {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.nav-overlay.active {
    display: block;
}

/* Main Content */
.main-content {
    flex: 1;
    width: 100%;
}

/* Flash Messages */
.flash {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flash-success {
    background-color: rgba(80, 250, 123, 0.2);
    border: 1px solid var(--accent-success);
    color: var(--accent-success);
}

.flash-error {
    background-color: rgba(255, 85, 85, 0.2);
    border: 1px solid var(--accent-error);
    color: var(--accent-error);
}

.flash-warning {
    background-color: rgba(255, 184, 108, 0.2);
    border: 1px solid var(--accent-warning);
    color: var(--accent-warning);
}

.flash-info {
    background-color: rgba(139, 233, 253, 0.2);
    border: 1px solid var(--accent-info);
    color: var(--accent-info);
}

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Home Page */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem 1rem;
    text-align: center;
}

.logo-section {
    margin-bottom: 2rem;
}

.home-logo {
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.home-logo-img {
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
}

.home-tagline {
    color: var(--text-secondary);
    font-size: clamp(1rem, 3vw, 1.25rem);
}

/* Search Form */
.search-form {
    width: 100%;
    max-width: 650px;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.search-box {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px var(--shadow-color);
    border-radius: 28px;
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

.search-input {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    background-color: var(--input-bg);
    border: 2px solid var(--border-color);
    border-right: none;
    border-radius: 28px 0 0 28px;
    color: var(--text-primary);
    outline: none;
}

.search-input:focus {
    border-color: var(--accent-primary);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-btn {
    padding: 1rem 1.5rem;
    min-width: 60px;
    min-height: var(--touch-target);
    background-color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 0 28px 28px 0;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.search-btn:hover {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.search-btn:disabled,
.search-btn.submitting {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn:disabled,
.btn.submitting {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.category-tab:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.category-tab.active {
    background-color: rgba(189, 147, 249, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tab-icon {
    font-size: 1.25rem;
}

.tab-text {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Home Features */
.home-features {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.feature-icon {
    font-size: 1.25rem;
}

/* Announcements */
.announcements-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 1rem auto;
    padding: 0 1rem;
}

.announcement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.announcement-warning {
    background-color: rgba(255, 184, 108, 0.15);
    border: 1px solid var(--accent-warning);
    color: var(--accent-warning);
}

.announcement-info {
    background-color: rgba(139, 233, 253, 0.15);
    border: 1px solid var(--accent-info);
    color: var(--accent-info);
}

.announcement-error {
    background-color: rgba(255, 85, 85, 0.15);
    border: 1px solid var(--accent-error);
    color: var(--accent-error);
}

.announcement-success {
    background-color: rgba(80, 250, 123, 0.15);
    border: 1px solid var(--accent-success);
    color: var(--accent-success);
}

.announcement-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.announcement-title {
    font-weight: 600;
}

.announcement-message {
    color: var(--text-primary);
}

.announcement-dismiss {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: inherit;
}

.announcement-dismiss:hover {
    opacity: 1;
}

/* Cookie Consent */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    z-index: 1000;
    box-shadow: 0 -2px 10px var(--shadow-color);
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-consent-text {
    flex: 1;
    min-width: 200px;
}

.cookie-consent-text a {
    color: var(--link-color);
}

.cookie-consent-buttons {
    display: flex;
    gap: 0.5rem;
}

.cookie-accept,
.cookie-decline {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.cookie-accept {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
}

.cookie-decline {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Footer - per AI.md PART 17 */
.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 1rem;
    margin-top: auto;
    text-align: center;
}

.footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer p a {
    color: var(--text-secondary);
}

.footer p a:hover {
    color: var(--accent-primary);
}

.footer p span {
    color: var(--text-muted);
    margin: 0 0.25rem;
}

.footer br {
    display: block;
    margin: 0.5rem 0;
    content: "";
}

.footer a {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.footer-info {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-version {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

/* Code block with copy button - per AI.md PART 16 */
.code-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0.25rem 0;
}

.code-content {
    display: block;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.875rem;
    -webkit-overflow-scrolling: touch;
}

.copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: var(--touch-target, 44px);
    min-width: var(--touch-target, 44px);
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s, border-color 0.2s;
    color: var(--text-secondary);
}

.copy-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

.copy-btn:active,
.copy-btn.copied {
    background: var(--success-bg);
    border-color: var(--success);
}

.copy-text {
    display: none;
}

@media (min-width: 768px) {
    .copy-text {
        display: inline;
    }
}

/* Tor access section in footer - per AI.md PART 32 */
.tor-access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tor-icon {
    font-size: 1.25rem;
}

.tor-status {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Long string handling - per AI.md PART 16 */
/* Apply to: IPv6, Tor .onion, API tokens, hashes, UUIDs, Base64 */
.long-string,
.ip-address,
.onion-address,
.api-token,
.hash {
    word-break: break-all;
    overflow-wrap: break-word;
    font-family: monospace;
}

/* Tor hidden service address in footer - per AI.md PART 32 */
.tor-address {
    margin-bottom: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    overflow: hidden;
}

.tor-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.onion-link {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--accent-primary);
    word-break: break-all;
    overflow-wrap: anywhere;
    min-width: 0;
}

.onion-link:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* Mobile-first: tor address stacked vertically with truncation (base = mobile) */
.tor-address {
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

.onion-link {
    font-size: 0.7rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small screen+ (481px): tor address inline layout */
@media (min-width: 481px) {
    .tor-address {
        flex-direction: row;
        padding: 0.75rem 1rem;
        text-align: left;
    }

    .onion-link {
        font-size: 0.85rem;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
}

/* Search Results Page */
.search-results-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.search-categories {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-categories::-webkit-scrollbar {
    display: none;
}

.category-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.category-link:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

.category-link.active {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 500;
}

.category-link .cat-icon {
    font-size: 1rem;
}

.search-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
}

.search-info-sep {
    color: var(--border-color);
}

.search-engines {
    word-break: break-word;
}

.search-error {
    background-color: rgba(255, 85, 85, 0.1);
    border: 1px solid var(--accent-error);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    color: var(--accent-error);
}

/* Instant Answer Box */
.instant-answer-box {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--accent-primary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.instant-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.instant-answer-title {
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.instant-answer-source {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
}

.instant-answer-source:hover {
    color: var(--link-hover);
}

.instant-answer-content {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
}

.instant-answer-content strong {
    color: var(--accent-info);
}

.instant-answer-content em {
    color: var(--text-secondary);
    font-style: italic;
}

/* Instant Answer Type-Specific Styles */
.instant-answer-box[data-type="math"] .instant-answer-content,
.instant-answer-box[data-type="convert"] .instant-answer-content {
    font-family: 'SF Mono', Consolas, 'Liberation Mono', monospace;
    font-size: 1.1rem;
}

.instant-answer-box[data-type="definition"] .instant-answer-content {
    font-size: 0.95rem;
}

.instant-answer-content .math-result,
.instant-answer-content .conversion-result {
    font-size: 1.5rem;
    padding: 0.5rem 0;
}

.instant-answer-content .math-result .result,
.instant-answer-content .conversion-result strong {
    color: var(--accent-success);
    font-weight: 700;
}

.instant-answer-content .expression {
    color: var(--text-secondary);
}

.instant-answer-content .phonetic {
    color: var(--text-muted);
    font-style: italic;
}

.instant-answer-content .example {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* Hash result formatting */
.instant-answer-content .hash-result {
    word-break: break-all;
    font-family: 'SF Mono', Consolas, monospace;
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Color preview */
.instant-answer-content .color-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-right: 0.5rem;
    vertical-align: middle;
    border: 1px solid var(--border-color);
}

/* Time display */
.instant-answer-content .time-result {
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-info);
}

.instant-answer-content .date-result {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.no-results p {
    margin-bottom: 0.5rem;
}

.no-results-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Result Cards */
.results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.result-item {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    display: flex;
    gap: 1rem;
}

.result-item:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px var(--shadow-color);
    transform: translateY(-2px);
}

.result-favicon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.result-favicon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Fallback: if favicon img fails, show letter placeholder */
.result-favicon img[src=""],
.result-favicon img:not([src]) {
    display: none;
}

.result-favicon img[src=""]:not([src]) + .favicon-placeholder,
.result-favicon:has(img[src=""]) .favicon-placeholder {
    display: flex !important;
}

.result-favicon .favicon-placeholder {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.result-body {
    flex: 1;
    min-width: 0;
}

.result-title {
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.result-title a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.result-title a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.result-url {
    color: var(--accent-success);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.result-url-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.result-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.result-engine {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.result-date {
    color: var(--text-muted);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
    margin-top: 1rem;
}

.page-link {
    padding: 0.75rem 1.25rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 500;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
    text-decoration: none;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Infinite Scroll */
.infinite-scroll-trigger {
    height: 1px;
    margin-top: 2rem;
}

.loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-muted);
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.end-of-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Image Results - Mobile first: 2 columns */
.image-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.image-result {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.image-result:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px var(--shadow-color);
    transform: translateY(-2px);
}

.image-result a {
    display: block;
}

.image-result img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background-color: var(--bg-tertiary);
    display: block;
}

/* Fallback for broken image thumbnails - shows placeholder styling */
.image-result img[src=""],
.image-result img:not([src]) {
    visibility: hidden;
}

.image-thumb-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-thumb-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-thumb-wrap::before {
    content: "🖼️";
    font-size: 2rem;
    color: var(--text-muted);
    z-index: 0;
}

.image-placeholder {
    width: 100%;
    height: 160px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-muted);
}

.image-result-info {
    padding: 0.75rem;
}

.image-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

.image-title:hover {
    color: var(--accent-primary);
}

.image-source {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.35rem;
    text-transform: capitalize;
}

/* Video Results - Mobile first: single column */
.video-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.video-result {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.video-result:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px var(--shadow-color);
    transform: translateY(-2px);
}

.video-thumbnail-link {
    display: block;
    text-decoration: none;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-tertiary);
    overflow: hidden;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback for broken video thumbnails */
.video-thumbnail-container::before {
    content: "🎥";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted);
    z-index: 0;
}

.video-thumbnail {
    position: relative;
    z-index: 1;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted);
    background-color: var(--bg-tertiary);
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.video-result:hover .video-play-overlay {
    opacity: 1;
}

.video-play-overlay .play-icon {
    width: 28px;
    height: 28px;
    color: white;
    margin-left: 4px;
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    z-index: 2;
}

.video-info {
    padding: 0.875rem;
}

.video-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.video-title a {
    color: var(--text-primary);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-title a:hover {
    color: var(--accent-primary);
}

.video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.video-meta span {
    display: inline-flex;
    align-items: center;
}

.video-meta span:not(:last-child)::after {
    content: "\00B7";
    margin-left: 0.5rem;
    color: var(--text-muted);
}

.video-engine {
    text-transform: capitalize;
}

.video-description {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Buttons - per AI.md PART 16: 44px minimum touch targets */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--touch-target, 44px);
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--accent-primary);
    border: none;
    color: white;
}

.btn-primary:hover {
    background-color: var(--accent-secondary);
    color: white;
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
}

.btn-danger {
    background-color: var(--accent-error);
    border: none;
    color: white;
}

.btn-danger:hover {
    background-color: var(--accent-error-hover);
    color: white;
    text-decoration: none;
}

/* Contact Form */
.contact-success {
    text-align: center;
    padding: 2rem;
}

.contact-success h2 {
    color: var(--accent-success);
    margin-bottom: 1rem;
}

.contact-success p {
    margin-bottom: 1.5rem;
}

.form-error {
    padding: 0.75rem 1rem;
    background-color: rgba(255, 85, 85, 0.15);
    border: 1px solid var(--accent-error);
    border-radius: 6px;
    color: var(--accent-error);
    font-size: 0.9rem;
}

.form-actions {
    margin-top: 0.5rem;
}

.captcha-group {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
}

.captcha-group label {
    font-weight: 500;
}

.captcha-group input {
    max-width: 120px;
}

/* Terms page */
.last-updated {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--input-focus);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Info Pages */
.info-page {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.info-page h1 {
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
}

.info-page h2 {
    color: var(--text-primary);
    margin: 2rem 0 1rem;
}

.info-page p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Mobile-first responsive styles (base = mobile) */

/* Header mobile base - keep simple */

.header-search {
    order: 3;
    max-width: 100%;
    width: 100%;
    margin-top: 0.5rem;
}

/* Search Results mobile base */
.search-results-page {
    padding: 0.75rem;
}

.search-categories {
    gap: 0.35rem;
    padding: 0.5rem 0;
}

.category-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.result-item {
    padding: 1rem;
    gap: 0.75rem;
}

.result-item:hover {
    transform: none;
}

.result-favicon {
    width: 28px;
    height: 28px;
}

.result-title {
    font-size: 1rem;
}

.image-results {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.image-result img,
.image-thumb-wrap {
    height: 140px;
}

.image-placeholder {
    height: 140px;
    font-size: 2rem;
}

.video-results {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.video-play-overlay {
    width: 50px;
    height: 50px;
}

.video-play-overlay .play-icon {
    width: 24px;
    height: 24px;
}

.video-title {
    font-size: 0.9rem;
}

.video-meta {
    font-size: 0.75rem;
}

.video-description {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
}

.pagination {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.home-container {
    min-height: calc(100vh - 250px);
}

.category-tab {
    padding: 0.5rem 0.75rem;
    min-width: 60px;
}

.tab-icon {
    font-size: 1rem;
}

.tab-text {
    font-size: 0.65rem;
}

.home-features {
    gap: 1rem;
}

/* Category tabs: 5-column grid so all fit on one row on any phone */
.category-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
}

.category-tab {
    min-width: 0;
}

/* Tablet+ (768px): desktop enhancements */
@media (min-width: 768px) {
    .header-search {
        order: 0;
        max-width: 500px;
        width: auto;
        margin-top: 0;
    }

    .search-results-page {
        padding: 1.5rem 1rem;
    }

    .search-categories {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .category-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .result-item {
        padding: 1.25rem;
        gap: 1rem;
    }

    .result-item:hover {
        transform: translateY(-2px);
    }

    .result-favicon {
        width: 32px;
        height: 32px;
    }

    .result-title {
        font-size: 1.1rem;
    }

    .image-results {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .image-result img,
    .image-thumb-wrap {
        height: 180px;
    }

    .image-placeholder {
        height: 180px;
        font-size: 2.5rem;
    }

    .video-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .video-play-overlay {
        width: 60px;
        height: 60px;
    }

    .video-play-overlay .play-icon {
        width: 30px;
        height: 30px;
    }

    .video-title {
        font-size: 1rem;
    }

    .video-meta {
        font-size: 0.8rem;
    }

    .video-description {
        font-size: 0.85rem;
        -webkit-line-clamp: 3;
    }

    .pagination {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .page-link {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }

    .home-container {
        min-height: calc(100vh - 200px);
    }

    .category-tab {
        padding: 0.75rem 1rem;
        min-width: 80px;
    }

    .tab-icon {
        font-size: 1.25rem;
    }

    .tab-text {
        font-size: 0.75rem;
    }

    .home-features {
        gap: 2rem;
    }
}

/* Small screen+ (481px): restore single-row pill layout */
@media (min-width: 481px) {
    .search-box {
        flex-wrap: nowrap;
    }

    .search-input {
        flex: 1 1 auto;
        width: auto;
        padding: 1rem 1.5rem;
        border-right: none;
        border-radius: 28px 0 0 28px;
    }

    .search-btn {
        flex: 0 0 auto;
        padding: 1rem 1.5rem;
        margin-top: 0;
    }

    .advanced-search-trigger {
        flex: 0 0 auto;
        margin-top: 0;
        border: none;
        border-left: 1px solid var(--border-color);
        border-radius: 0;
    }

    .category-tabs {
        display: flex;
        gap: 0.5rem;
    }

    .category-tab {
        min-width: 60px;
        padding: 0.5rem 0.75rem;
    }

    /* Image grid: 3 columns on small tablets */
    .image-results {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.875rem;
    }

    .image-result img,
    .image-thumb-wrap,
    .image-placeholder {
        height: 160px;
    }

    /* Video grid: still single column but with larger thumbnails */
    .video-results {
        gap: 1.25rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Print styles - Per AI.md PART 14: Print-friendly styles */
@media print {
    /* Hide non-essential elements */
    .header,
    .footer,
    .nav-toggle,
    .nav-panel,
    .nav-overlay,
    .theme-toggle,
    .cookie-consent,
    .announcement,
    .btn,
    button:not([type="submit"]),
    .search-form,
    .pagination,
    .modal,
    .toast-container {
        display: none !important;
    }

    /* Reset colors for print */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Ensure links are visible */
    a {
        color: black !important;
        text-decoration: underline;
    }

    /* Show URL after links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't break inside important elements */
    .result-item,
    .widget,
    table tr {
        page-break-inside: avoid;
    }

    /* Ensure tables print properly */
    table {
        border-collapse: collapse;
    }

    table th,
    table td {
        border: 1px solid #ccc;
        padding: 0.5em;
    }

    /* Print headings clearly */
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100% !important;
    }
}

/* ========== WIDGET SYSTEM ========== */

.widgets-section {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.widget {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.widget:hover {
    box-shadow: 0 4px 12px var(--shadow-color);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.widget-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.widget-menu {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.2rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.widget-menu:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.widget-content {
    padding: 1rem;
    min-height: 120px;
}

.widget-loading {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
}

.widget-placeholder {
    text-align: center;
    padding: 1rem;
    color: var(--text-muted);
}

.widget-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.widget-placeholder-text {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.widget-settings-btn,
.widget-add-btn {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: opacity 0.2s;
}

.widget-settings-btn:hover,
.widget-add-btn:hover {
    opacity: 0.9;
}

/* Widget Dropdown Menu */
.widget-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 100;
    min-width: 120px;
    overflow: hidden;
}

.widget-dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
}

.widget-dropdown-menu button:hover {
    background-color: var(--bg-tertiary);
}

.widget-dropdown-menu button.danger {
    color: var(--accent-error);
}

/* Widget Drag and Drop */
.widget[draggable="true"] {
    cursor: grab;
}

.widget[draggable="true"]:active {
    cursor: grabbing;
}

.widget.widget-dragging {
    opacity: 0.6;
    cursor: grabbing;
}

.widget.widget-dragging-active {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 8px 24px var(--shadow-color);
}

.widget-placeholder-drop {
    background: var(--bg-tertiary);
    border: 2px dashed var(--accent-primary);
    border-radius: 12px;
    min-height: 150px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.widget-placeholder-drop:empty::before {
    content: 'Drop here';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 150px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Prevent text selection during drag */
.widget-grid.dragging-active {
    user-select: none;
}

/* Widget Settings Modal */
.widget-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.widget-settings-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.widget-settings-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.widget-settings-content label {
    display: block;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.widget-settings-content input,
.widget-settings-content select,
.widget-settings-content textarea {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.widget-settings-content textarea {
    resize: vertical;
    min-height: 80px;
}

.widget-settings-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.widget-settings-actions button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.widget-settings-actions button:first-child {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.widget-settings-actions button:last-child {
    background: var(--accent-primary);
    border: none;
    color: var(--bg-primary);
}

.widget-settings-content .setting-group {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.widget-settings-content .setting-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.widget-settings-content .setting-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.widget-settings-content .setting-help {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.widget-settings-content input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Clock Widget */
.clock-widget {
    text-align: center;
    padding: 0.5rem;
}

.clock-time {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    color: var(--accent-primary);
    letter-spacing: -1px;
}

.clock-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Weather Widget */
.weather-widget {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.weather-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.weather-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.weather-temp {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.weather-details {
    flex: 1;
}

.weather-location {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.weather-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: capitalize;
}

.weather-extra {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Quick Links Widget */
.quicklinks-widget {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.quicklink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s;
}

.quicklink-item:hover {
    background-color: var(--bg-tertiary);
}

.quicklink-favicon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.quicklink-name {
    font-size: 0.75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--text-secondary);
}

.quicklink-add {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
    background: none;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    min-height: 60px;
    transition: border-color 0.2s, color 0.2s;
}

.quicklink-add:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Calculator Widget */
.calculator-widget {
    max-width: 220px;
    margin: 0 auto;
}

.calc-display {
    width: 100%;
    padding: 0.75rem;
    font-size: 1.5rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    text-align: right;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}

.calc-buttons button {
    padding: 0.75rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.calc-buttons button:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.calc-buttons button.calc-op {
    background: var(--accent-secondary);
    color: var(--bg-primary);
}

.calc-buttons button.calc-eq {
    background: var(--accent-success);
    color: var(--bg-primary);
}

.calc-buttons button.calc-clear {
    background: var(--accent-error);
    color: white;
    grid-column: span 4;
}

/* Notes Widget */
.notes-widget {
    height: 100%;
}

.notes-textarea {
    width: 100%;
    height: 120px;
    resize: vertical;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
}

.notes-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Calendar Widget */
.calendar-widget {
    font-size: 0.85rem;
}

.calendar-header {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 2px;
}

.calendar-day {
    padding: 0.35rem;
    border-radius: 4px;
    color: var(--text-secondary);
}

.calendar-day.empty {
    visibility: hidden;
}

.calendar-day.today {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

/* Converter Widget */
.converter-widget select,
.converter-widget input {
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.converter-widget > select {
    width: 100%;
    margin-bottom: 0.75rem;
}

.converter-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.converter-row input {
    flex: 1;
    min-width: 0;
}

.converter-row select {
    width: 80px;
}

.converter-equals {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    margin: 0.25rem 0;
}

/* News Widget */
.news-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.news-item {
    display: block;
    padding: 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.news-item:hover {
    background-color: var(--bg-tertiary);
}

.news-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-source {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Stocks Widget */
.stocks-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.stock-symbol {
    font-weight: 600;
    color: var(--text-primary);
}

.stock-price {
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', monospace;
}

.stock-change {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.stock-change.positive {
    background: rgba(80, 250, 123, 0.2);
    color: var(--accent-success);
}

.stock-change.negative {
    background: rgba(255, 85, 85, 0.2);
    color: var(--accent-error);
}

/* Crypto Widget */
.crypto-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crypto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.crypto-name {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.crypto-price {
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 0.9rem;
}

.crypto-change {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.crypto-change.positive {
    background: rgba(80, 250, 123, 0.2);
    color: var(--accent-success);
}

.crypto-change.negative {
    background: rgba(255, 85, 85, 0.2);
    color: var(--accent-error);
}

/* Sports Widget */
.sports-widget {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sports-game {
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    text-align: center;
}

.sports-teams {
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sports-vs {
    color: var(--text-muted);
    margin: 0 0.5rem;
}

.sports-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.sports-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* RSS Widget */
.rss-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rss-item {
    display: block;
    padding: 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.rss-item:hover {
    background-color: var(--bg-tertiary);
}

.rss-title {
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.rss-source {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Widget Mobile-first Responsive (base = mobile) */
.widgets-section {
    padding: 0 0.5rem;
}

.widget-content {
    padding: 0.75rem;
}

.widget-grid {
    grid-template-columns: 1fr;
}

.quicklinks-widget {
    grid-template-columns: repeat(3, 1fr);
}

.clock-time {
    font-size: 2rem;
}

/* Small screen+ (481px): widget enhancements */
@media (min-width: 481px) {
    .widgets-section {
        padding: 0 1rem;
    }

    .widget-content {
        padding: 1rem;
    }

    .quicklinks-widget {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet+ (768px): widget grid enhancements */
@media (min-width: 768px) {
    .widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quicklinks-widget {
        grid-template-columns: repeat(5, 1fr);
    }

    .clock-time {
        font-size: 2.5rem;
    }
}

/* Toast Notifications (per AI.md PART 17)
 * Position: top-right, stacked vertically
 * Types: success, error, warning, info
 */
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
}

.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-hiding {
    transform: translateX(100%);
    opacity: 0;
}

.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50%;
}

.toast-success .toast-icon {
    background-color: var(--accent-success);
    color: var(--icon-on-light);
}

.toast-error .toast-icon {
    background-color: var(--accent-error);
    color: var(--icon-on-light);
}

.toast-warning .toast-icon {
    background-color: var(--accent-warning);
    color: var(--icon-on-dark);
}

.toast-info .toast-icon {
    background-color: var(--accent-info);
    color: var(--icon-on-dark);
}

.toast-message {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.toast-close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--text-primary);
}

/* Confirmation Dialog (per AI.md PART 17)
 * Uses native <dialog> with accessibility
 */
#confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 90%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 32px var(--shadow-color);
}

#confirm-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

#confirm-dialog header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

#confirm-dialog h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

#confirm-dialog main {
    padding: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

#confirm-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
}

/* Prompt Dialog (per AI.md PART 17)
 * Uses native <dialog> for text input prompts
 */
#prompt-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 90%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 32px var(--shadow-color);
}

#prompt-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

#prompt-dialog form {
    display: flex;
    flex-direction: column;
}

#prompt-dialog label {
    padding: 1.25rem 1.25rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

#prompt-dialog input {
    margin: 0 1.25rem;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

#prompt-dialog input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

#prompt-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
}

/* Alert Dialog (per AI.md PART 17) */
#alert-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px;
    width: 90%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 32px var(--shadow-color);
}

#alert-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

#alert-dialog header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

#alert-dialog h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

#alert-dialog main {
    padding: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

#alert-dialog footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
}

/* Mobile-first toast adjustments (base = mobile) */
#toast-container {
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
}

.toast {
    transform: translateY(-100%);
}

.toast-visible {
    transform: translateY(0);
}

.toast-hiding {
    transform: translateY(-100%);
}

#confirm-dialog {
    width: 95%;
}

#prompt-dialog {
    width: 95%;
}

#alert-dialog {
    width: 95%;
}

/* Small screen+ (481px): toast desktop enhancements */
@media (min-width: 481px) {
    #toast-container {
        left: auto;
        right: 1rem;
        max-width: 400px;
    }

    .toast {
        transform: translateX(100%);
    }

    .toast-visible {
        transform: translateX(0);
    }

    .toast-hiding {
        transform: translateX(100%);
    }

    #confirm-dialog {
        width: 400px;
    }

    #prompt-dialog {
        width: 400px;
    }

    #alert-dialog {
        width: 400px;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Visibility */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link for keyboard navigation - WCAG 2.1 AA */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-primary);
    color: var(--bg-primary);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* Spacing */
.mt-1 {
    margin-top: 1rem;
}

/* Bang Suggestion Styles */
.bang-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bang-suggestion-item:hover {
    background: var(--bg-tertiary, #313244);
}

.bang-shortcut {
    font-family: monospace;
    color: var(--accent-color, #bd93f9);
    font-weight: bold;
}

/* ============================================================================
   SEARCH AUTOCOMPLETE STYLES
   ============================================================================ */

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    gap: 12px;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: var(--bg-tertiary);
}

.autocomplete-item.selected {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.autocomplete-item.selected .autocomplete-icon {
    stroke: var(--bg-primary);
}

.autocomplete-item.selected .autocomplete-bang-shortcut {
    color: var(--bg-primary);
}

.autocomplete-item.selected .autocomplete-bang-category {
    color: var(--bg-primary);
    opacity: 0.8;
}

.autocomplete-icon {
    flex-shrink: 0;
    stroke: var(--text-muted);
}

.autocomplete-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Autocomplete Bang Styles */
.autocomplete-bang {
    display: flex;
    align-items: center;
    gap: 8px;
}

.autocomplete-bang-shortcut {
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    min-width: 50px;
}

.autocomplete-bang-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-bang-category {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: capitalize;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* Scrollbar styling for autocomplete dropdown */
.autocomplete-dropdown::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Mobile-first autocomplete (base = mobile) */
.autocomplete-dropdown {
    max-height: 300px;
}

.autocomplete-item {
    padding: 12px 14px;
}

.autocomplete-bang-shortcut {
    min-width: 40px;
    font-size: 0.8rem;
}

.autocomplete-bang-category {
    display: none;
}

/* Tablet+ (768px): autocomplete desktop enhancements */
@media (min-width: 768px) {
    .autocomplete-dropdown {
        max-height: 400px;
    }

    .autocomplete-item {
        padding: 10px 16px;
    }

    .autocomplete-bang-shortcut {
        min-width: 50px;
        font-size: 0.85rem;
    }

    .autocomplete-bang-category {
        display: block;
    }
}

/* ============================================================================
   KEYBOARD NAVIGATION STYLES
   ============================================================================ */

.keyboard-selected {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

#keyboard-help-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    color: var(--text-primary);
}

#keyboard-help-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

#keyboard-help-modal header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

#keyboard-help-modal h2 {
    margin: 0;
    font-size: 1.25rem;
}

.keyboard-help-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.shortcut-group {
    margin-bottom: 20px;
}

.shortcut-group h3 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shortcut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.shortcut kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: monospace;
    font-size: 0.875rem;
    min-width: 24px;
    text-align: center;
    margin-right: 4px;
}

.shortcut span {
    color: var(--text-secondary);
}

#keyboard-help-modal footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* ============================================================================
   VIDEO PREVIEW STYLES
   ============================================================================ */

.video-preview-container {
    position: fixed;
    z-index: 9999;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px var(--shadow-color);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.video-preview-container.visible {
    opacity: 1;
    visibility: visible;
}

.video-preview-youtube,
.video-preview-generic {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-preview-thumb,
.video-preview-gif,
.video-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-primary);
    width: 0;
    transition: width 0.3s;
}

.video-preview-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.touch-scrub-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--accent-primary);
    transition: width 0.1s;
}

/* ============================================================================
   ADVANCED SEARCH MODAL STYLES
   ============================================================================ */

.advanced-search-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    color: var(--text-primary);
}

.advanced-search-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.advanced-search-modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.advanced-search-modal header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.advanced-search-modal .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.advanced-search-modal .close-btn:hover {
    color: var(--text-primary);
}

.advanced-search-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.advanced-search-group {
    margin-bottom: 16px;
}

.advanced-search-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.advanced-search-group input,
.advanced-search-group select,
.advanced-search-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
}

.advanced-search-group input:focus,
.advanced-search-group select:focus,
.advanced-search-group textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.2);
}

.advanced-search-row {
    display: flex;
    gap: 16px;
}

.advanced-search-group.half {
    flex: 1;
}

.advanced-search-preview {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
}

.advanced-search-preview label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.advanced-search-preview code {
    display: block;
    font-family: monospace;
    color: var(--accent-info);
    word-break: break-all;
}

.advanced-search-modal footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.advanced-search-trigger {
    background: var(--bg-tertiary);
    border: none;
    border-left: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 0.75rem;
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.advanced-search-trigger:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Advanced search trigger in nav search (smaller) */
.nav-search-form .advanced-search-trigger {
    padding: 0 0.5rem;
    font-size: 14px;
}

/* ============================================================================
   RELATED SEARCHES STYLES
   ============================================================================ */

.related-searches {
    margin: 32px 0;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.related-title {
    font-size: 1rem;
    margin: 0 0 16px 0;
    color: var(--text-secondary);
    text-align: center;
}

.related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.related-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.related-item:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.related-icon {
    flex-shrink: 0;
    opacity: 0.6;
}

.related-item:hover .related-icon {
    opacity: 1;
}

/* People Also Ask */
.people-also-ask {
    margin: 24px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.paa-title {
    padding: 16px;
    margin: 0;
    font-size: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.paa-item {
    border-bottom: 1px solid var(--border-color);
}

.paa-item:last-child {
    border-bottom: none;
}

.paa-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.paa-question::-webkit-details-marker {
    display: none;
}

.paa-question:hover {
    background: var(--bg-secondary);
}

.paa-arrow {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.paa-item[open] .paa-arrow {
    transform: rotate(180deg);
}

.paa-answer {
    padding: 0 16px 16px;
    color: var(--text-secondary);
}

.paa-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--link-color);
    text-decoration: none;
}

.paa-link:hover {
    text-decoration: underline;
}

/* ============================================================================
   WIDGET STYLES (New Widgets)
   ============================================================================ */

/* Currency Widget */
.currency-widget {
    padding: 16px;
}

.currency-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.currency-row input {
    flex: 1;
    min-width: 0;
}

.currency-row select {
    width: 80px;
}

.currency-equals {
    text-align: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin: 8px 0;
}

.currency-convert-btn {
    width: 100%;
    padding: 10px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

/* Timezone Widget */
.timezone-widget {
    padding: 12px;
}

.timezone-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.timezone-item:last-child {
    border-bottom: none;
}

.timezone-city {
    font-weight: 500;
}

.timezone-time {
    font-family: monospace;
    color: var(--accent-info);
}

/* Translate Widget */
.translate-widget {
    padding: 16px;
}

.translate-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.translate-row select {
    flex: 1;
}

.translate-arrow {
    color: var(--text-secondary);
}

.translate-widget textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
}

.translate-output {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    min-height: 60px;
    color: var(--text-primary);
}

/* Wikipedia Widget */
.wikipedia-widget {
    padding: 16px;
}

.wikipedia-widget input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.wiki-result {
    display: flex;
    gap: 12px;
}

.wiki-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.wiki-content {
    flex: 1;
    min-width: 0;
}

.wiki-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.wiki-extract {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wiki-link {
    font-size: 0.875rem;
    color: var(--link-color);
}

.wiki-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
}

/* Tracking Widget */
.tracking-widget {
    padding: 16px;
}

.tracking-input-row {
    display: flex;
    gap: 8px;
}

.tracking-input-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.tracking-input-row button {
    padding: 10px 16px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.tracking-placeholder {
    margin-top: 12px;
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: 6px;
}

/* Nutrition Widget */
.nutrition-widget {
    padding: 16px;
}

.nutrition-widget input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.nutrition-result {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
}

.nutrition-name {
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.nutrition-serving {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.nutrition-facts {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.nutrition-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.875rem;
}

/* QR Code Widget */
.qrcode-widget {
    padding: 16px;
    text-align: center;
}

.qrcode-widget input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.qr-canvas {
    width: 150px;
    height: 150px;
    margin: 0 auto 12px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-placeholder {
    color: #666;
    font-size: 0.75rem;
    padding: 20px;
}

/* Timer Widget */
.timer-widget {
    padding: 16px;
    text-align: center;
}

.timer-display {
    font-family: monospace;
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: var(--accent-info);
}

.timer-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.timer-buttons button {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.timer-buttons button:hover {
    background: var(--bg-tertiary);
}

.timer-presets {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.timer-presets button {
    padding: 4px 12px;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.timer-presets button:hover {
    color: var(--text-primary);
}

/* Lorem Ipsum Widget */
.lorem-widget {
    padding: 16px;
}

.lorem-options {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.lorem-options select,
.lorem-options input {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.lorem-options input {
    width: 60px;
}

.lorem-options button {
    padding: 8px 16px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.lorem-output {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.lorem-copy {
    width: 100%;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Dictionary Widget */
.dictionary-widget {
    padding: 16px;
}

.dictionary-widget input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.dict-result {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
}

.dict-word {
    margin: 0;
    font-size: 1.25rem;
}

.dict-phonetic {
    color: var(--text-secondary);
    font-style: italic;
    margin-left: 8px;
}

.dict-meaning {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.dict-pos {
    display: inline-block;
    background: var(--accent-primary);
    color: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.dict-def {
    margin: 8px 0;
    font-size: 0.875rem;
}

.dict-example {
    margin: 4px 0 8px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

.dict-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
}

/* IP Address Widget */
.ip-widget {
    padding: 24px;
    text-align: center;
}

.ip-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ip-value {
    font-family: monospace;
    font-size: 1.5rem;
    color: var(--accent-info);
    margin-bottom: 16px;
}

.ip-copy {
    padding: 8px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.ip-error {
    color: var(--accent-error);
}

/* Color Picker Widget */
.colorpicker-widget {
    padding: 16px;
}

.colorpicker-widget input[type="color"] {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 12px;
}

.color-values {
    margin-bottom: 12px;
}

.color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.color-row label {
    width: 40px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.color-row input {
    flex: 1;
    padding: 8px;
    font-family: monospace;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.colorpicker-widget button {
    width: 100%;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS FOR NEW COMPONENTS - Mobile-first
   ============================================================================ */

/* Mobile base styles */
.advanced-search-row {
    flex-direction: column;
}

.advanced-search-modal {
    max-height: 95vh;
}

.related-list {
    flex-direction: column;
    align-items: center;
}

.related-item {
    justify-content: center;
}

.video-preview-container {
    display: none !important;
}

.keyboard-help-content {
    max-height: 50vh;
}

/* Tablet+ (768px): advanced component enhancements */
@media (min-width: 768px) {
    .advanced-search-row {
        flex-direction: row;
    }

    .advanced-search-modal {
        max-height: 80vh;
    }

    .related-list {
        flex-direction: row;
    }

    .related-item {
        justify-content: center;
    }

    .video-preview-container {
        display: block !important;
    }

    .keyboard-help-content {
        max-height: 60vh;
    }
}

/* ============================================================================
   RTL (Right-to-Left) SUPPORT
   Per AI.md PART 31: CSS logical properties for RTL languages
   Supports: Arabic (ar), Hebrew (he), Persian (fa), Urdu (ur)
   ============================================================================ */

/* Use CSS logical properties for RTL-aware layouts */
[dir="rtl"] {
    /* Text alignment - use logical values */
    text-align: start;
}

/* Search input RTL adjustments */
[dir="rtl"] .search-input {
    text-align: start;
}

[dir="rtl"] .header-search-input {
    border-radius: 0 20px 20px 0;
    border-right: 1px solid var(--input-border);
    border-left: none;
}

[dir="rtl"] .header-search-btn {
    border-radius: 20px 0 0 20px;
}

/* Navigation RTL */
[dir="rtl"] .nav-toggle {
    margin-left: 0;
    margin-right: auto;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* Result items RTL */
[dir="rtl"] .result-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .result-meta {
    flex-direction: row-reverse;
}

/* Skip link RTL */
[dir="rtl"] .skip-link {
    left: auto;
    right: 0;
    border-radius: 0 0 0 4px;
}

/* Toast container RTL */
[dir="rtl"] #toast-container {
    left: 1rem;
    right: auto;
}

[dir="rtl"] .toast {
    flex-direction: row-reverse;
    transform: translateX(-100%);
}

[dir="rtl"] .toast-visible {
    transform: translateX(0);
}

[dir="rtl"] .toast-hiding {
    transform: translateX(-100%);
}

/* Footer and form alignment */
[dir="rtl"] .footer-container {
    text-align: start;
}

[dir="rtl"] .form-label {
    text-align: start;
}

/* Widget adjustments for RTL */
[dir="rtl"] .widget-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .widget-dropdown-menu {
    left: 0;
    right: auto;
}

[dir="rtl"] .widget-dropdown-menu button {
    text-align: start;
}

/* Search info RTL */
[dir="rtl"] .search-info {
    padding-left: 0;
    padding-right: 0.25rem;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0;
}

/* Flash message RTL */
[dir="rtl"] .flash {
    flex-direction: row-reverse;
}

/* Instant answer RTL */
[dir="rtl"] .instant-answer-header {
    flex-direction: row-reverse;
}

/* Category tabs RTL - maintain LTR for horizontal scroll */
[dir="rtl"] .category-tabs {
    direction: ltr;
}

[dir="rtl"] .category-tabs .category-tab {
    direction: rtl;
}

/* Autocomplete RTL */
[dir="rtl"] .autocomplete-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .autocomplete-bang {
    flex-direction: row-reverse;
}

[dir="rtl"] .autocomplete-bang-shortcut {
    text-align: left;
}

/* Search categories horizontal scroll */
[dir="rtl"] .search-categories {
    direction: ltr;
}

[dir="rtl"] .search-categories .category-link {
    direction: rtl;
}

/* Admin sidebar RTL */
[dir="rtl"] .admin-container {
    flex-direction: row-reverse;
}

/* Pagination RTL */
[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

/* Cookie consent RTL */
[dir="rtl"] .cookie-consent-content {
    flex-direction: row-reverse;
}

/* Announcement RTL */
[dir="rtl"] .announcement {
    flex-direction: row-reverse;
}

[dir="rtl"] .announcement-content {
    flex-direction: row-reverse;
}

/* Image results grid - maintain LTR for grid layout */
[dir="rtl"] .image-results {
    direction: ltr;
}

[dir="rtl"] .image-result {
    direction: rtl;
}

/* Video results grid - maintain LTR for grid layout */
[dir="rtl"] .video-results {
    direction: ltr;
}

[dir="rtl"] .video-result {
    direction: rtl;
}

[dir="rtl"] .video-duration {
    left: 8px;
    right: auto;
}

/* Result URL RTL */
[dir="rtl"] .result-url {
    flex-direction: row-reverse;
}

/* Related searches RTL */
[dir="rtl"] .related-item {
    flex-direction: row-reverse;
}

/* People Also Ask RTL */
[dir="rtl"] .paa-question {
    flex-direction: row-reverse;
}

/* Modal footer RTL */
[dir="rtl"] .widget-settings-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] #confirm-dialog footer {
    flex-direction: row-reverse;
}

/* Advanced search modal RTL */
[dir="rtl"] .advanced-search-modal header {
    flex-direction: row-reverse;
}

[dir="rtl"] .advanced-search-modal footer {
    flex-direction: row-reverse;
}

/* Color preview margin RTL */
[dir="rtl"] .instant-answer-content .color-preview {
    margin-right: 0;
    margin-left: 0.5rem;
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/* Mobile-first RTL adjustments (base = mobile) */
[dir="rtl"] .nav-links {
    text-align: start;
}

[dir="rtl"] #toast-container {
    left: 0.5rem;
    right: 0.5rem;
}

[dir="rtl"] .toast {
    transform: translateY(-100%);
}

[dir="rtl"] .toast-visible {
    transform: translateY(0);
}

[dir="rtl"] .toast-hiding {
    transform: translateY(-100%);
}

/* Small screen+ (481px): RTL toast desktop enhancements */
@media (min-width: 481px) {
    [dir="rtl"] #toast-container {
        left: 1rem;
        right: auto;
    }

    [dir="rtl"] .toast {
        transform: translateX(-100%);
    }

    [dir="rtl"] .toast-visible {
        transform: translateX(0);
    }

    [dir="rtl"] .toast-hiding {
        transform: translateX(-100%);
    }
}

/* Tablet+ (768px): RTL nav desktop enhancements */
@media (min-width: 768px) {
    [dir="rtl"] .nav-links {
        text-align: end;
    }
}

/* ============================================================================
   STATIC PAGES (About, Privacy, Contact, Help, Terms)
   ============================================================================ */

.static-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.static-page h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-primary);
    padding-bottom: 0.5rem;
}

.static-page h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.static-page h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.static-page p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.static-page ul, .static-page ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.static-page li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.static-page a {
    color: var(--link-color);
    text-decoration: underline;
}

.static-page a:hover {
    color: var(--link-hover);
}

.page-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.page-content.markdown {
    line-height: 1.8;
}

/* About Page */
.about-page .about-section {
    margin-bottom: 2rem;
}

.about-page .feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.about-page .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 0;
}

.about-page .feature-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.about-page .feature-list strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.about-page .feature-list p {
    margin: 0;
    font-size: 0.9rem;
}

.about-page .onion-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.about-page .onion-address code {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-family: monospace;
    word-break: break-all;
    flex: 1;
    min-width: 200px;
}

.about-page .note {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Privacy, Terms Pages */
.privacy-page .privacy-section,
.terms-page .terms-section {
    margin-bottom: 2rem;
}

.privacy-page .data-table,
.terms-page .data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.privacy-page .data-table th,
.privacy-page .data-table td,
.terms-page .data-table th,
.terms-page .data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.privacy-page .data-table th,
.terms-page .data-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

/* Contact Page */
.contact-page .contact-methods {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-page .contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.contact-page .contact-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.contact-page .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-page .form-group label {
    font-weight: 500;
    color: var(--text-primary);
}

.contact-page .form-group input,
.contact-page .form-group textarea {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 1rem;
}

.contact-page .form-group input:focus,
.contact-page .form-group textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px rgba(var(--input-focus), 0.2);
}

.contact-page .form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-page .submit-btn {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
    transition: opacity 0.2s;
}

.contact-page .submit-btn:hover {
    opacity: 0.9;
}

/* Help Page */
.help-page .help-section {
    margin-bottom: 2rem;
}

.help-page .keyboard-shortcuts {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.help-page .shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.help-page .shortcut-key {
    display: inline-flex;
    gap: 0.25rem;
}

.help-page .shortcut-key kbd {
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
}

.help-page .bang-examples {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.help-page .bang-example {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.help-page .bang-example code {
    font-family: monospace;
    color: var(--accent-primary);
    white-space: nowrap;
}

/* Mobile-first static page styles (base = mobile) */
.static-page {
    padding: 1rem;
    min-width: 0;
}

.static-page h1 {
    font-size: 1.5rem;
}

.page-content {
    padding: 1.5rem;
    min-width: 0;
    overflow: hidden;
}

.static-page code,
.page-content code,
.version-grid code {
    word-break: break-all;
    overflow-wrap: break-word;
}

.feature-grid {
    grid-template-columns: 1fr;
}

.api-links,
.source-links {
    flex-direction: column;
}

.api-link,
.source-link,
.api-link-card {
    width: 100%;
    min-height: var(--touch-target, 44px);
}

.contact-page .form-actions .btn,
.contact-success .btn {
    width: 100%;
    justify-content: center;
}

.about-page .feature-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.help-page .shortcut-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Tablet+ (768px): static page desktop enhancements */
@media (min-width: 768px) {
    .static-page {
        padding: 2rem 1rem;
    }

    .static-page h1 {
        font-size: 2rem;
    }

    .page-content {
        padding: 2rem;
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .api-links,
    .source-links {
        flex-direction: row;
    }

    .about-page .feature-list li {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .help-page .shortcut-row {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .static-page {
        padding: 2rem 1.5rem;
    }

    .page-content {
        padding: 2.25rem;
    }

    .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================================
   ENHANCED ABOUT PAGE
   ============================================================================ */

.about-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.about-header h1 {
    border: none;
    margin-bottom: 0.5rem;
}

.about-header .tagline {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.about-header .version-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.feature-card {
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.feature-card .feature-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.feature-card h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.feature-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Tor Section */
.tor-section {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid #7D4698;
}

.onion-address-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-primary);
    border-radius: 6px;
}

.onion-address-box code {
    flex: 1;
    min-width: 200px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--accent-primary);
}

.onion-address-box .btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.onion-address-box .btn-copy:hover {
    opacity: 0.9;
}

.tor-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* API Links */
.api-links, .source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.api-link, .source-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.api-link:hover, .source-link:hover {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

/* Version Grid */
.version-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.version-grid dt {
    color: var(--text-muted);
}

.version-grid dd {
    margin: 0;
    color: var(--text-primary);
}

/* ============================================================================
   ENHANCED HELP PAGE
   ============================================================================ */

.help-header {
    text-align: center;
    margin-bottom: 2rem;
}

.help-header h1 {
    border: none;
    margin-bottom: 0.5rem;
}

.help-header .subtitle {
    color: var(--text-secondary);
}

/* Table of Contents */
.help-toc {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.help-toc h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
    color: var(--text-muted);
}

.help-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-toc a {
    color: var(--accent-primary);
    text-decoration: none;
    display: block;
    min-height: var(--touch-target, 44px);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.help-toc a:hover {
    text-decoration: underline;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    min-width: 0;
}

.category-item {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    text-align: center;
}

.category-item .category-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.category-item strong {
    display: block;
    color: var(--text-primary);
}

.category-item p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Bang Grid */
.bang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    min-width: 0;
}

.bang-item {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.9rem;
}

.bang-item code {
    color: var(--accent-primary);
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Operator Grid */
.operator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    min-width: 0;
}

.operator-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    min-width: 0;
}

.operator-item code {
    color: var(--accent-primary);
    font-family: var(--font-mono, monospace);
    font-size: 0.9rem;
    word-break: break-all;
    overflow-wrap: break-word;
}

.operator-item span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Example List */
.example-list {
    list-style: none;
    padding: 0;
}

.example-list li {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.example-list code {
    color: var(--accent-primary);
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Tables */
.operators-table,
.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.operators-table th,
.operators-table td,
.shortcuts-table th,
.shortcuts-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.operators-table th,
.shortcuts-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
}

.operators-table code,
.shortcuts-table kbd {
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
}

.operators-table code {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* API Link Cards */
.api-link-card {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    flex: 1;
    min-width: 200px;
}

.api-link-card:hover {
    border-color: var(--accent-primary);
}

.api-link-card h3 {
    margin: 0 0 0.25rem 0;
    color: var(--accent-primary);
    font-size: 1rem;
}

.api-link-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.help-page .code-block {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.help-page .code-block code {
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Privacy List */
.privacy-list {
    list-style: none;
    padding: 0;
}

.privacy-list li {
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.privacy-list strong {
    color: var(--text-primary);
}

/* FAQ */
.faq-list details {
    margin-bottom: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
}

.faq-list summary {
    padding: 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    min-height: var(--touch-target, 44px);
    display: flex;
    align-items: center;
}

.faq-list summary:hover {
    background: var(--bg-primary);
}

.faq-list details[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.faq-list details p {
    padding: 1rem;
    margin: 0;
}

/* ============================================================================
   HEALTH PAGE
   ============================================================================ */

.health-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.health-header {
    text-align: center;
    margin-bottom: 2rem;
}

.health-header h1 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.health-header .tagline {
    font-size: 1rem;
    color: var(--accent-primary);
    margin: 0 0 0.25rem 0;
}

.health-header .description {
    color: var(--text-muted);
    margin: 0;
}

/* Status Banner */
.status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Per AI.md PART 13: status-ok/error/warning classes */
.status-banner.status-ok {
    background: rgba(80, 250, 123, 0.15);
    color: var(--accent-success);
}

.status-banner.status-error {
    background: rgba(255, 85, 85, 0.15);
    color: var(--accent-error);
}

.status-banner.status-warning {
    background: rgba(255, 184, 108, 0.15);
    color: var(--accent-warning);
}

/* Health Grid */
.health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    min-width: 0;
}

.section-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    min-width: 0;        /* Prevent grid item from expanding beyond column width */
    overflow: hidden;    /* Contain long strings (onion address etc.) */
}

.section-card h2 {
    font-size: 1rem;
    margin: 0 0 1rem 0;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Health Info (dl) */
.health-info {
    margin: 0;
}

.info-row {
    display: flex;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
    min-width: 0;
}

.info-row dt {
    flex: 0 0 45%;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.info-row dd {
    flex: 1;
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

.info-row code {
    padding: 0.15rem 0.4rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--accent-primary);
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.badge-production {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge-development {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.badge-primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Component List */
.component-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.component-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.component-item:last-child {
    border-bottom: none;
}

.component-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
}

.component-ok .component-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.component-error .component-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.component-name {
    flex: 1;
    color: var(--text-primary);
}

.component-status {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Feature List in Health */
.section-card .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-card .feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.section-card .feature-item:last-child {
    border-bottom: none;
}

.section-card .feature-icon {
    font-size: 1.1rem;
}

.section-card .feature-name {
    flex: 1;
    color: var(--text-primary);
}

.section-card .feature-status {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.section-card .feature-status.status-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.section-card .feature-status.status-warning {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.section-card .feature-detail {
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.section-card .feature-detail code {
    font-size: 0.8rem;
    word-break: break-all;
    color: var(--accent-primary);
}

/* Health Footer */
.health-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.health-footer p {
    margin: 0.25rem 0;
}

.auto-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.refresh-indicator {
    width: 8px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile-first Health Page styles (base = mobile) */
.health-grid {
    grid-template-columns: 1fr;
}

.status-banner {
    flex-direction: column;
    text-align: center;
}

/* Mobile-first Help Page styles (base = mobile) */
.help-toc ul {
    flex-direction: column;
    gap: 0.5rem;
}

.category-grid {
    grid-template-columns: 1fr;
}

.bang-grid {
    grid-template-columns: 1fr;
}

.operator-grid {
    grid-template-columns: 1fr;
}

.operators-table,
.shortcuts-table {
    display: block;
    width: 100%;
    font-size: 0.9rem;
}

.operators-table thead,
.shortcuts-table thead {
    display: none;
}

.operators-table tbody,
.shortcuts-table tbody,
.operators-table tr,
.shortcuts-table tr,
.operators-table td,
.shortcuts-table td {
    display: block;
    width: 100%;
}

.operators-table tr,
.shortcuts-table tr {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.operators-table td,
.shortcuts-table td {
    padding: 0.35rem 0;
    border: 0;
}

.operators-table td + td,
.shortcuts-table td + td {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.operators-table td::before,
.shortcuts-table td::before {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bang-category-table td:nth-child(1)::before {
    content: "Category";
}

.bang-category-table td:nth-child(2)::before {
    content: "Examples";
}

.search-operators-table td:nth-child(1)::before {
    content: "Operator";
}

.search-operators-table td:nth-child(2)::before {
    content: "Example";
}

.search-operators-table td:nth-child(3)::before {
    content: "Description";
}

.api-endpoints-table td:nth-child(1)::before {
    content: "Method";
}

.api-endpoints-table td:nth-child(2)::before {
    content: "Endpoint";
}

.api-endpoints-table td:nth-child(3)::before {
    content: "Description";
}

.shortcuts-help-table td:nth-child(1)::before {
    content: "Shortcut";
}

.shortcuts-help-table td:nth-child(2)::before {
    content: "Action";
}

/* Mobile-first About Page styles (base = mobile) */
.feature-grid {
    grid-template-columns: 1fr;
}

.onion-address-box {
    flex-direction: column;
    align-items: stretch;
}

.onion-address-box code {
    min-width: 0;
    text-align: center;
}

.api-links {
    flex-direction: column;
}

/* Tablet+ (768px): Health page desktop enhancements */
@media (min-width: 768px) {
    .health-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .status-banner {
        flex-direction: row;
        text-align: left;
    }
}

/* Tablet+ (768px): Help page desktop enhancements */
@media (min-width: 768px) {
    .help-toc ul {
        flex-direction: row;
        gap: 1rem;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .bang-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .operator-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .operators-table,
    .shortcuts-table {
        display: table;
        font-size: 1rem;
    }

    .operators-table thead,
    .shortcuts-table thead {
        display: table-header-group;
    }

    .operators-table tbody,
    .shortcuts-table tbody {
        display: table-row-group;
    }

    .operators-table tr,
    .shortcuts-table tr {
        display: table-row;
        margin-bottom: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .operators-table td,
    .shortcuts-table td {
        display: table-cell;
        width: auto;
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-color);
    }

    .operators-table td + td,
    .shortcuts-table td + td {
        margin-top: 0;
        padding-top: 0.75rem;
        border-top: 0;
    }

    .operators-table td::before,
    .shortcuts-table td::before {
        display: none;
    }
}

/* Tablet+ (768px): About page desktop enhancements */
@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .onion-address-box {
        flex-direction: row;
        align-items: center;
    }

    .onion-address-box code {
        min-width: 300px;
        text-align: left;
    }

    .api-links {
        flex-direction: row;
    }
}

/* ============================================================
 * AUTH PAGES - Login, Register, Forgot Password, Verify
 * Per AI.md PART 16: NO inline CSS - all styles in external files
 * ============================================================ */

.auth-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tablet+ auth container enhancement */
@media (min-width: 481px) {
    .auth-container {
        padding: 2rem;
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
}

.auth-subtitle {
    color: var(--text-muted);
    margin: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent-primary);
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    padding: 0 1rem;
}

.auth-social {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.15);
}

.form-help {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: none;
}

.form-group-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Tablet+ form-group-inline enhancement */
@media (min-width: 481px) {
    .form-group-inline {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
}

/* Password Input with Toggle */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}

.password-toggle:hover {
    color: var(--text-primary);
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-label input {
    width: 1rem;
    height: 1rem;
}

/* Links */
.forgot-link {
    font-size: 0.9rem;
    color: var(--accent-primary);
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error {
    background: rgba(255, 85, 85, 0.1);
    color: var(--accent-error);
    border: 1px solid rgba(255, 85, 85, 0.2);
}

.alert-success {
    background: rgba(80, 250, 123, 0.1);
    color: var(--accent-success);
    border: 1px solid rgba(80, 250, 123, 0.2);
}

.alert-info {
    background: rgba(139, 233, 253, 0.1);
    color: var(--accent-info);
    border: 1px solid rgba(139, 233, 253, 0.2);
}

/* Icons */
.icon-eye::before {
    content: '\1F441';
}

.icon-key::before {
    content: '\1F511';
    margin-right: 0.5rem;
}

/* Verification Page */
.verify-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.verify-message {
    text-align: center;
    font-size: 1rem;
    color: var(--text-secondary);
}

.verify-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Password Requirements */
.password-requirements {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.85rem;
}

.password-requirements ul {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-muted);
}

.password-requirements li.valid {
    color: var(--accent-success);
}

.password-requirements li::before {
    content: '○';
    font-size: 0.75rem;
}

.password-requirements li.valid::before {
    content: '●';
}

/* Required Field Indicator */
.required {
    color: var(--accent-error);
}

/* Form Validation States */
.form-group input:invalid:not(:placeholder-shown) {
    border-color: var(--accent-error);
}

.error-text {
    color: var(--accent-error);
}

/* Error page (404, 500, 502, 503, etc.) */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.error-container {
    max-width: 480px;
    width: 100%;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-primary);
    opacity: 0.8;
    margin-bottom: var(--spacing-md);
}

.error-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.error-message {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.error-details {
    text-align: left;
    margin-bottom: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.error-details pre {
    margin-top: var(--spacing-sm);
    white-space: pre-wrap;
    word-break: break-all;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
}

.error-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.hidden {
    display: none !important;
}

/* Password Strength Indicator */
.password-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    margin-top: 0.5rem;
    overflow: hidden;
}

.password-strength::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--strength, 0%);
    background: var(--strength-color, var(--accent-error));
    transition: width 0.3s, background 0.3s;
}

/* Success Icon */
.success-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Spinner */
.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Verifying State */
.verifying {
    padding: 2rem 0;
    text-align: center;
}

.verifying p {
    color: var(--text-muted);
    margin-top: 1rem;
}

/* Resend Form */
.resend-form {
    margin: 0;
}

/* Auth Mobile Adjustments - mobile-first, see individual element media queries above */

/* ============================================================
 * DIRECT ANSWER PAGE
 * Per AI.md PART 16: NO inline CSS - all styles in external files
 * ============================================================ */

.direct-answer-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 15px;
}

/* Tablet+ direct answer page enhancement */
@media (min-width: 601px) {
    .direct-answer-page {
        padding: 20px;
    }
}

.direct-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.direct-type-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: var(--bg-primary);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.direct-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 10px 0;
    line-height: 1.3;
}

.direct-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 5px 0 0;
}

.direct-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    overflow-x: auto;
}

/* Tablet+ direct content enhancement */
@media (min-width: 601px) {
    .direct-content {
        padding: 20px;
    }
}

.direct-content.has-error {
    background: rgba(255, 85, 85, 0.05);
    border-color: rgba(255, 85, 85, 0.2);
}

.direct-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 85, 85, 0.1);
    border-radius: 4px;
    margin-bottom: 15px;
}

.direct-error .error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-error);
    color: var(--bg-primary);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
}

.direct-error .error-message {
    color: var(--accent-error);
}

.direct-content pre {
    background: var(--bg-tertiary);
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.direct-content code {
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
    font-size: 0.875rem;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
}

.direct-content h2 {
    color: var(--accent-primary);
    margin: 20px 0 10px;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.direct-content h3 {
    color: var(--text-primary);
    margin: 15px 0 8px;
    font-size: 1rem;
}

.direct-content p {
    margin: 10px 0;
    line-height: 1.6;
}

.direct-content ul,
.direct-content ol {
    margin: 10px 0;
    padding-left: 25px;
}

.direct-content li {
    margin: 5px 0;
}

.direct-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.875rem;
}

.direct-content th,
.direct-content td {
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    text-align: left;
}

/* Tablet+ table enhancement */
@media (min-width: 601px) {
    .direct-content table {
        font-size: 1rem;
    }

    .direct-content th,
    .direct-content td {
        padding: 8px 12px;
    }
}

.direct-content th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.direct-content tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.direct-content .record-type {
    color: var(--accent-primary);
    font-weight: 600;
}

.direct-content .security-warning {
    color: var(--accent-warning);
}

.direct-content .security-ok {
    color: var(--accent-success);
}

.direct-source {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 15px 0;
    border-top: 1px solid var(--border-color);
}

.source-label {
    margin-right: 5px;
}

.source-link {
    color: var(--accent-primary);
    text-decoration: none;
}

.source-link:hover {
    text-decoration: underline;
}

.direct-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* Tablet+ direct nav enhancement */
@media (min-width: 601px) {
    .direct-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
}

.back-to-search {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-to-search:hover {
    text-decoration: underline;
}

.direct-types-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.direct-types-hint code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
}

/* Direct answer page mobile-first - see individual element media queries above */

/* ==============================================================================
 * PREFERENCES PAGE STYLES
 * Per AI.md PART 16: NO inline CSS - all styles in external main.css
 * Mobile-first, WCAG 2.1 AA compliant, 44px touch targets
 * ============================================================================== */

.preferences-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4);
}

.preferences-page h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.preferences-page .subtitle {
    color: var(--text-muted);
    margin-bottom: var(--space-6);
    font-size: 1rem;
    line-height: 1.5;
}

.preferences-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid var(--border-color);
}

.preferences-section h2 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1.25rem;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.preferences-section h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: var(--accent-primary);
    border-radius: 2px;
}

.preferences-page .help-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.preferences-page .help-text code {
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--accent-primary);
}

/* Form groups with better spacing and touch targets */
.preferences-form .form-group {
    margin-bottom: var(--space-4);
}

.preferences-form .form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.preferences-form .form-group input[type="text"],
.preferences-form .form-group input[type="url"],
.preferences-form .form-group select {
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.preferences-form .form-group input:focus,
.preferences-form .form-group select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.2);
    outline: none;
}

/* Custom toggle switch for checkboxes */
.preferences-form .form-group.toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--touch-target);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.preferences-form .form-group.toggle-group:last-child {
    border-bottom: none;
}

.preferences-form .form-group.toggle-group label {
    margin-bottom: 0;
    flex: 1;
}

/* Toggle switch styling */
.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .slider {
    background-color: var(--accent-primary);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(24px);
}

.toggle-switch input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.3);
}

.preferences-form .form-group small {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: var(--space-2);
}

.preferences-page .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Tablet+ preferences form row enhancement */
@media (min-width: 768px) {
    .preferences-page {
        padding: var(--space-6);
    }

    .preferences-page .form-row {
        flex-direction: row;
    }

    .preferences-section {
        padding: var(--space-6);
    }
}

.preferences-page .form-row .form-group {
    flex: 1;
}

/* Category filter pills */
.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.filter-btn {
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: 22px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.filter-btn.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

/* Bang list with better scrolling */
.bang-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-height: 350px;
    overflow-y: auto;
    padding: var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.bang-list::-webkit-scrollbar {
    width: 8px;
}

.bang-list::-webkit-scrollbar-track {
    background: transparent;
}

.bang-list::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

/* Tablet+ bang list enhancement */
@media (min-width: 768px) {
    .bang-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bang-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bang-item {
    background: var(--bg-primary);
    padding: var(--space-3);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

.bang-item:hover {
    border-color: var(--accent-primary);
}

.bang-item.hidden {
    display: none;
}

.bang-shortcut {
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--accent-primary);
    margin-right: var(--space-2);
    font-size: 0.95rem;
}

.bang-name {
    font-weight: 500;
    color: var(--text-primary);
}

.bang-description {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* Custom bangs list */
.custom-bangs-list {
    margin-bottom: var(--space-4);
}

.custom-bangs-list .help-text {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.custom-bang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: var(--space-3);
    min-height: var(--touch-target);
}

.custom-bang-item .bang-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.custom-bang-item .delete-btn {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    background: var(--accent-error);
    color: white;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.custom-bang-item .delete-btn:hover {
    background: var(--accent-error-hover);
}

/* Add bang form */
.add-bang-form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px solid var(--border-color);
}

.add-bang-form h3 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1rem;
    color: var(--text-muted);
}

/* Browser add section */
.browser-add {
    line-height: 1.6;
}

.browser-add p {
    margin-bottom: var(--space-3);
}

.browser-add code {
    display: block;
    background: var(--bg-primary);
    padding: var(--space-3);
    border-radius: 8px;
    margin: var(--space-3) 0;
    word-break: break-all;
    font-family: var(--font-mono, monospace);
    border: 1px solid var(--border-color);
}

.browser-add .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (min-width: 768px) {
    .browser-add .form-group {
        flex-direction: row;
        align-items: flex-end;
    }

    .browser-add .form-group input {
        flex: 1;
    }
}

/* Data actions buttons */
.data-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.data-actions .btn {
    min-height: var(--touch-target);
    justify-content: center;
}

/* Tablet+ data actions enhancement */
@media (min-width: 768px) {
    .data-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Save preferences footer */
.preferences-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 2px solid var(--border-color);
}

@media (min-width: 768px) {
    .preferences-actions {
        flex-direction: row;
        align-items: center;
    }
}

.preferences-actions .btn {
    min-height: 52px;
    font-size: 1.1rem;
    font-weight: 600;
}

.save-status {
    color: var(--accent-success);
    font-weight: 500;
    text-align: center;
}

/* Widget toggles - card-based layout */
.widget-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.widget-category h3 {
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.widget-toggle-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .widget-toggle-group {
        grid-template-columns: repeat(4, 1fr);
    }
}

.widget-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 90px;
    text-align: center;
}

.widget-toggle:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.widget-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.widget-toggle .widget-icon {
    font-size: 1.75rem;
    opacity: 0.5;
    transition: all 0.2s;
}

.widget-toggle .widget-name {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Selected widget state */
.widget-toggle:has(input:checked) {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.1) 0%, rgba(139, 233, 253, 0.05) 100%);
    box-shadow: 0 4px 12px rgba(189, 147, 249, 0.15);
}

.widget-toggle:has(input:checked) .widget-icon {
    opacity: 1;
    transform: scale(1.1);
}

.widget-toggle:has(input:checked) .widget-name {
    opacity: 1;
    color: var(--accent-primary);
}

/* Checkmark indicator for selected widgets */
.widget-toggle::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--border-color);
    opacity: 0;
    transition: all 0.2s;
}

.widget-toggle:has(input:checked)::after {
    opacity: 1;
    background: var(--accent-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23282a36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.widget-toggle {
    position: relative;
}

/* Preferences page mobile-first - see individual element media queries above */

/* ==============================================================================
 * USER PAGES STYLES (Profile, Security, Tokens)
 * Per AI.md PART 16: NO inline CSS - all styles in external main.css
 * ============================================================================== */

.user-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.user-page .page-header {
    margin-bottom: 2rem;
}

.user-page .page-header h1 {
    margin: 0 0 0.5rem 0;
}

.user-page .page-subtitle {
    color: var(--text-muted);
    margin: 0;
}

.user-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.user-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    gap: 0.25rem;
}

/* Tablet+ user container/nav enhancement */
@media (min-width: 769px) {
    .user-container {
        grid-template-columns: 200px 1fr;
    }

    .user-nav {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

.user-nav .nav-item {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s;
}

.user-nav .nav-item:hover {
    background: var(--bg-secondary);
}

.user-nav .nav-item.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.user-content {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 2rem;
}

/* Profile page */
.profile-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.profile-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.profile-section h2 {
    font-size: 1.1rem;
    margin: 0 0 1.5rem 0;
}

.avatar-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.current-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.avatar-actions {
    display: flex;
    gap: 0.5rem;
}

.user-page .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet+ user page form row enhancement */
@media (min-width: 769px) {
    .user-page .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.user-page .form-group {
    margin-bottom: 1rem;
}

.user-page .form-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.user-page .form-group input,
.user-page .form-group textarea,
.user-page .form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.user-page .form-group input:focus,
.user-page .form-group textarea:focus,
.user-page .form-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(189, 147, 249, 0.15);
}

.user-page .form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.input-disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.user-page .form-help {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.char-count {
    text-align: right;
}

.input-with-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.input-with-badge input {
    flex: 1;
}

.user-page .badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.user-page .badge-success {
    background: rgba(80, 250, 123, 0.15);
    color: var(--accent-success);
}

.user-page .badge-warning {
    background: rgba(255, 184, 108, 0.15);
    color: var(--accent-warning);
}

.user-page .badge-primary {
    background: rgba(189, 147, 249, 0.15);
    color: var(--accent-primary);
}

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

/* Security page */
.security-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.security-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.security-section h2 {
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
}

.section-description {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.security-form {
    max-width: 400px;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    margin-top: 0.5rem;
    overflow: hidden;
}

.password-strength::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--strength, 0%);
    background: var(--strength-color, var(--accent-error));
    transition: width 0.3s, background 0.3s;
}

.twofa-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.twofa-disable-form,
.twofa-setup-card,
.recovery-keys-list {
    width: 100%;
    max-width: 100%;
}

.twofa-disable-form {
    display: grid;
    gap: 1rem;
}

.twofa-setup-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.twofa-qr {
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 8px;
    background: white;
    padding: 0.75rem;
}

.twofa-setup-details {
    min-width: 0;
}

.recovery-keys-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.recovery-key-item {
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.recovery-key-item code {
    font-family: var(--font-mono, monospace);
    word-break: break-all;
    overflow-wrap: break-word;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
}

.status-enabled {
    background: rgba(80, 250, 123, 0.15);
    color: var(--accent-success);
}

.status-disabled {
    background: rgba(255, 184, 108, 0.15);
    color: var(--accent-warning);
}

@media (min-width: 768px) {
    .twofa-setup-card {
        grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
        align-items: start;
    }
}

.status-icon {
    font-size: 1.2rem;
}

.status-text {
    color: var(--text-muted);
    margin: 0;
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.session-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* Tablet+ session item enhancement */
@media (min-width: 769px) {
    .session-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
}

.session-current {
    border-color: var(--accent-primary);
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-device {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.device-icon {
    font-size: 1.2rem;
}

.session-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.revoke-all-form {
    margin-top: 1rem;
}

/* Tokens page */
.tokens-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.tokens-section .section-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.tokens-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.token-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* Tablet+ token item enhancement */
@media (min-width: 769px) {
    .token-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0;
    }
}

.token-info {
    flex: 1;
}

.token-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.token-prefix code {
    font-size: 0.85rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.token-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Tablet+ token meta enhancement */
@media (min-width: 769px) {
    .token-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.token-permissions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.permission-badge {
    padding: 0.125rem 0.5rem;
    background: rgba(189, 147, 249, 0.15);
    color: var(--accent-primary);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.token-created {
    border: 2px solid var(--accent-success);
}

.token-created h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.token-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.token-display code {
    flex: 1;
    font-size: 0.9rem;
    word-break: break-all;
}

.token-warning {
    color: var(--accent-warning);
    font-size: 0.85rem;
    margin: 0;
}

/* Permissions grid */
.permissions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.permission-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.permission-toggle input {
    width: auto;
}

/* User page alerts */
.user-page .alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.user-page .alert-success {
    background: rgba(80, 250, 123, 0.1);
    color: var(--accent-success);
    border: 1px solid rgba(80, 250, 123, 0.2);
}

.user-page .alert-warning {
    background: rgba(255, 184, 108, 0.1);
    color: var(--accent-warning);
    border: 1px solid rgba(255, 184, 108, 0.2);
}

.user-page .alert-error {
    background: rgba(255, 85, 85, 0.1);
    color: var(--accent-error);
    border: 1px solid rgba(255, 85, 85, 0.2);
}

/* User page responsive - mobile-first, see individual element media queries above */

/* ============================================================================
   MOBILE-ONLY OVERRIDES (max-width: 480px)
   Must appear at end of file to override base styles (e.g. .advanced-search-trigger)
   ============================================================================ */
@media (max-width: 480px) {
    /* Search box: 2-row layout — input fills row 1, buttons share row 2 */
    .search-box {
        flex-wrap: wrap;
    }

    /* flex-basis: 100% forces input to take full row 1, pushing buttons to row 2.
       Using flex shorthand (not just width:100%) because flexbox ignores width
       when flex-basis is explicitly set (flex:1 sets flex-basis:0). */
    .search-input {
        flex: 0 0 100%;
        min-width: 0;
        padding: 0.75rem 1rem;
        border-right: 2px solid var(--border-color);
        border-radius: 28px;
    }

    /* Row 2: advanced trigger + submit button, equal width */
    .search-btn {
        flex: 1;
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        border-radius: 0 28px 28px 0;
        min-height: var(--touch-target, 44px);
    }

    .advanced-search-trigger {
        flex: 1 1 0;
        flex-shrink: 1;
        margin-top: 0.5rem;
        padding: 0.75rem;
        min-height: var(--touch-target, 44px);
        border: 2px solid var(--border-color) !important;
        border-right: none !important;
        border-radius: 28px 0 0 28px !important;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        cursor: pointer;
    }

    /* Tab icon / text sizing for tight 5-column grid */
    .tab-icon {
        font-size: 1rem;
    }

    .tab-text {
        font-size: 0.6rem;
    }
}