/* ==========================================
   App UI Themes (Amoled, Cyber, Nordic)
   ========================================== */

/* 1. Amoled Black Theme */
body.theme-amoled {
    --bg-dark: #000000;
    --bg-card: rgba(10, 10, 10, 0.85);
    --bg-input: rgba(20, 20, 20, 0.9);
    --border-glass: rgba(255, 255, 255, 0.05);
    --shadow-premium: 0 4px 20px 0 rgba(0, 0, 0, 0.9);
    --accent-gradient: linear-gradient(135deg, #00ffc4 0%, #0077ff 100%);
}

/* 2. Cyber Neon Theme */
body.theme-cyber {
    --bg-dark: #0f051d;
    --bg-card: rgba(30, 9, 64, 0.55);
    --bg-input: rgba(45, 12, 96, 0.7);
    --text-primary: #ffd6ff;
    --text-secondary: #c77dff;
    --text-muted: #9d6fd0; /* was #7b2cbf (2.8:1, failed AA on this dark bg); now 5.3:1 */
    --accent-aurora: #ff007f;
    --accent-aurora-rgb: 255, 0, 127;
    --accent-gradient: linear-gradient(135deg, #ff007f 0%, #7b2cbf 100%);
    --border-glass: rgba(255, 0, 127, 0.15);
    --border-focus: rgba(255, 0, 127, 0.6);
    --shadow-premium: 0 8px 32px 0 rgba(255, 0, 127, 0.2);
}

body.theme-cyber {
    background-image: 
        radial-gradient(at 0% 0%, rgba(255, 0, 127, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(123, 44, 191, 0.08) 0px, transparent 50%);
}

/* 3. Nordic Light Theme */
body.theme-nordic {
    color-scheme: light;
    --bg-dark: #f3f4f6;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(243, 244, 246, 0.9);
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #5f6672; /* was #9ca3af (2.3:1, failed AA on this light bg); now 5.3:1 */
    --accent-aurora: #4f46e5;
    --accent-aurora-rgb: 79, 70, 229;
    --accent-aurora-violet: #4f46e5; /* on this light bg the secondary accent collapses to the indigo accent for contrast */
    --accent-aurora-violet-rgb: 79, 70, 229;
    /* Cyan end darkened (#06b6d4 -> #0e7490) so white button text passes AA across the whole
       gradient (indigo end 6.3:1, teal end 5.4:1). The old bright cyan gave white only 2.4:1. */
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #0e7490 100%);
    --border-glass: rgba(0, 0, 0, 0.08);
    --border-focus: rgba(79, 70, 229, 0.4);
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.06);
    /* Darker shades than the dark-theme defaults — the defaults fail 4.5:1 on this theme's light background */
    --text-warning: #b45309;
    --text-warning-strong: #92400e;
    --text-info: #0369a1;
    --text-danger-soft: #b91c1c;
}

body.theme-nordic {
    background-image: 
        radial-gradient(at 0% 0%, rgba(79, 70, 229, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.03) 0px, transparent 50%);
}

body.theme-nordic input,
body.theme-nordic select,
body.theme-nordic textarea {
    color: #1f2937 !important;
}

body.theme-nordic .toolbar-select option {
    background: #ffffff;
    color: #1f2937;
}

body.theme-nordic .device-header {
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.theme-nordic .device-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

body.theme-nordic .zoom-select option,
body.theme-nordic .theme-select option,
body.theme-nordic .vision-select option {
    background: #ffffff !important;
    color: #1f2937 !important;
}

/* ==========================================
   Element Inspector Panel
   ========================================== */
.inspector-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 320px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: inspectorSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes inspectorSlideIn {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.inspector-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.02);
}

.inspector-panel-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-inspector-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

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

.inspector-panel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inspector-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.info-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    word-break: break-all;
}

#inspect-size {
    font-family: var(--font-mono);
}

.info-value.code-value {
    font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-glass);
}

.inspector-panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: flex-end;
}

.inspector-copy-btn {
    width: 100%;
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--accent-gradient);
    border: none;
    color: #080d16;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.inspector-copy-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.inspector-copy-btn:active {
    transform: translateY(0);
}

/* Outline active button style */
#outline-toggle-btn.active {
    background: rgba(var(--accent-aurora-violet-rgb), 0.15);
    color: var(--accent-aurora-violet);
    border: 1px solid rgba(var(--accent-aurora-violet-rgb), 0.3);
    border-radius: 9999px;
}

#ai-context-btn:active {
    transform: scale(0.97);
}

/* ==========================================================================
   NORDIC LIGHT THEME CONTRAST & ACCESSIBILITY OVERRIDES
   ========================================================================== */
body.theme-nordic .canvas-toolbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-btn {
    color: #4b5563 !important;
}

body.theme-nordic .canvas-toolbar .toolbar-btn:hover {
    color: #1f2937 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-btn.active {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
}

body.theme-nordic #outline-toggle-btn.active {
    background: rgba(var(--accent-aurora-violet-rgb), 0.1) !important;
    color: var(--accent-aurora-violet) !important;
    border: 1px solid rgba(var(--accent-aurora-violet-rgb), 0.3) !important;
}

/* Gradient-backed buttons need white text under Nordic: the darkened accent-gradient is too
   dark for the default dark button text (which fails on both ends now). Scoped to the buttons
   that actually carry the gradient, so transparent icon buttons and the light
   .btn-secondary/.btn-danger keep their own dark text. */
body.theme-nordic .btn-primary,
body.theme-nordic .btn-warning-action,
body.theme-nordic .view-mode-selector .mode-btn.active,
body.theme-nordic .modal-btn:not(.btn-secondary),
body.theme-nordic .tb-device-btn.active,
body.theme-nordic #help-toggle-btn {
    color: #ffffff !important;
}

body.theme-nordic .canvas-toolbar .toolbar-zoom-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #4b5563 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-zoom-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #1f2937 !important;
}

body.theme-nordic .canvas-toolbar .toolbar-reset-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-reset-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-select {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
}

body.theme-nordic .canvas-toolbar .toolbar-select:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .canvas-toolbar .toolbar-separator {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* More Tools popup — same dark-glass-to-light-glass treatment as .canvas-toolbar above,
   since it's a separate floating surface (not a descendant of .canvas-toolbar). */
body.theme-nordic .tools-popup {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

body.theme-nordic .tools-popup-label {
    color: #6b7280 !important;
}

body.theme-nordic .tools-popup .toolbar-btn {
    color: #4b5563 !important;
}

body.theme-nordic .tools-popup .toolbar-btn:hover {
    color: #1f2937 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.theme-nordic .tools-popup .toolbar-btn.active {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
}

body.theme-nordic .tools-popup .toolbar-select {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
}

body.theme-nordic .tools-popup .toolbar-select:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Select option light fallback */
body.theme-nordic select option {
    background: #ffffff !important;
    color: #1f2937 !important;
}

/* Modals */
body.theme-nordic .modal-overlay {
    background: rgba(15, 23, 42, 0.3) !important;
}

body.theme-nordic .modal-box {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12) !important;
}

body.theme-nordic .modal-box h3,
body.theme-nordic .modal-box .modal-title {
    color: #1f2937 !important;
}

body.theme-nordic .modal-box p,
body.theme-nordic .modal-box .modal-message {
    color: #4b5563 !important;
}

body.theme-nordic .modal-input {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
}

body.theme-nordic .modal-box .modal-btn {
    border-radius: 10px !important;
}

body.theme-nordic .modal-box #modal-cancel-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #4b5563 !important;
}

body.theme-nordic .modal-box #modal-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .modal-box #modal-confirm-btn {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
}

/* Inspector Panel */
body.theme-nordic .inspector-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .inspector-panel-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.01) !important;
    color: #1f2937 !important;
}

body.theme-nordic .inspector-panel-header h3 {
    color: #1f2937 !important;
}

body.theme-nordic .inspector-panel-body .info-label {
    color: #4b5563 !important;
}

body.theme-nordic .inspector-panel-body .info-value {
    color: #1f2937 !important;
}

body.theme-nordic .info-value.code-value {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #1f2937 !important;
}

body.theme-nordic .inspector-copy-btn {
    color: #ffffff !important;
}

body.theme-nordic .inspector-panel .close-btn {
    color: #4b5563 !important;
}

body.theme-nordic .inspector-panel .close-btn:hover {
    color: #1f2937 !important;
}

/* QR Popup */
body.theme-nordic .qr-popup {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
}

body.theme-nordic .qr-popup-label {
    color: #1f2937 !important;
}

body.theme-nordic .qr-url-text {
    color: #4b5563 !important;
}

body.theme-nordic .close-qr-btn {
    color: #4b5563 !important;
}

body.theme-nordic .close-qr-btn:hover {
    color: #1f2937 !important;
}

/* Toasts */
body.theme-nordic .toast {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Backgrounds darkened so the white text passes WCAG AA (>=4.5:1); the original
   mid-tones gave 2.1-3.8:1. */
body.theme-nordic .toast-success {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
}

body.theme-nordic .toast-error {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

body.theme-nordic .toast-info {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

body.theme-nordic .toast-warning {
    background: #b45309 !important;
    border-color: #92400e !important;
    color: #ffffff !important;
}

/* Load Time Badges */
/* Text darkened so the badge label passes AA on its faint tinted background
   (originals gave ~2.7-3.8:1 on the light Nordic bg). */
body.theme-nordic .load-time-badge.speed-fast {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
}

body.theme-nordic .load-time-badge.speed-medium {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #92400e !important;
}

body.theme-nordic .load-time-badge.speed-slow {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}

/* Warning Banner */
body.theme-nordic .warning-banner {
    background: #fef2f2 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #b91c1c !important;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.08) !important;
}

body.theme-nordic .warning-banner strong {
    color: #991b1b !important;
}

body.theme-nordic .close-warning-btn {
    color: #ef4444 !important;
}

body.theme-nordic .close-warning-btn:hover {
    color: #b91c1c !important;
}

/* ==========================================================================
   PRO DEVELOPER SUITE — VISUAL DIFF, PANEL TABS, & console STYLES
   ========================================================================== */
/* Visual Diff Layout and Overlay Blend Mode */
.iframe-container.mode-visual-diff .slider-wrapper {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass) !important;
    box-shadow: var(--shadow-premium) !important;
    width: var(--diff-width, auto) !important;
    height: var(--diff-height, auto) !important;
}

.iframe-container.mode-visual-diff .iframe-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.iframe-container.mode-visual-diff .live-wrapper {
    z-index: 1 !important;
}

.iframe-container.mode-visual-diff .local-wrapper {
    z-index: 2 !important;
    mix-blend-mode: difference !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.iframe-container.mode-visual-diff .slider-handle {
    display: none !important;
}

/* Active buttons styling in Toolbar */
#visual-diff-btn.active {
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

body.theme-nordic #visual-diff-btn.active {
    background: rgba(244, 63, 94, 0.1) !important;
    color: #e11d48 !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
}

/* Panel Tab styling */
.panel-tab-btn {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.panel-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

body.theme-nordic .panel-tab-btn:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #1f2937 !important;
}

/* Glowing Top Header Help Button */
#help-toggle-btn {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: #020617 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 12px rgba(var(--accent-aurora-rgb), 0.25) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

#help-toggle-btn:hover {
    box-shadow: 0 0 20px rgba(var(--accent-aurora-rgb), 0.45) !important;
    transform: translateY(-1px) !important;
}

/* Nordic Light Theme overrides for Help Sidebar */
body.theme-nordic .canvas-onboarding-tips {
    background: rgba(255, 255, 255, 0.96) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #4b5563 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .tips-header h2 {
    background: linear-gradient(135deg, #059669, #0284c7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.theme-nordic .tips-group {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.theme-nordic .tips-group:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

body.theme-nordic .tips-group-summary {
    color: #1f2937 !important;
}

body.theme-nordic .tips-group-content {
    background: rgba(0, 0, 0, 0.01) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.theme-nordic .tip-item strong {
    color: #111827 !important;
}

body.theme-nordic .tip-item span {
    color: #4b5563 !important;
}

body.theme-nordic .close-tips-btn {
    color: #9ca3af !important;
}

body.theme-nordic .close-tips-btn:hover {
    color: #1f2937 !important;
}

/* ==========================================================================
   HELP CENTER READABILITY & ACCESSIBILITY UPGRADES
   ========================================================================== */
.canvas-onboarding-tips {
    width: 440px !important;
    font-size: 0.85rem !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.canvas-onboarding-tips * {
    user-select: text !important;
    -webkit-user-select: text !important;
}

.canvas-onboarding-tips button,
.canvas-onboarding-tips select,
.canvas-onboarding-tips label,
.canvas-onboarding-tips .tips-group-summary {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.tips-header h2 {
    font-size: 1.1rem !important;
}

.tips-header p {
    font-size: 0.8rem !important;
}

.help-tabs button {
    font-size: 0.8rem !important;
    padding: 10px 4px !important;
}

.help-content-section h3 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
}

.tip-item strong {
    font-size: 0.85rem !important;
}

.tip-item span {
    font-size: 0.8rem !important;
}

.tip-item ul {
    font-size: 0.78rem !important;
    color: var(--text-secondary) !important;
}

.tip-item ul li {
    margin-bottom: 6px;
}

.tips-group-summary {
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
}

.tips-group-content .tip-item {
    font-size: 0.8rem !important;
}

.tips-group-content .tip-item span {
    font-size: 0.8rem !important;
}

.help-content-section table {
    font-size: 0.8rem !important;
}

.help-content-section table th,
.help-content-section table td {
    padding: 8px 4px !important;
}

.help-content-section label {
    font-size: 0.8rem !important;
}

.help-content-section select,
.help-content-section textarea {
    font-size: 0.82rem !important;
    padding: 8px !important;
}

/* ==========================================================================
   NORDIC LIGHT THEME ADDITIONAL CONTRAST & ACCESSIBILITY FIXES
   ========================================================================== */
body.theme-nordic h1,
body.theme-nordic h2,
body.theme-nordic h3,
body.theme-nordic h4,
body.theme-nordic h5,
body.theme-nordic h6 {
    color: #1f2937 !important;
}

body.theme-nordic .device-header h2 {
    color: #1f2937 !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.theme-nordic .size-badge {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #4f46e5 !important;
}

body.theme-nordic .view-mode-selector,
body.theme-nordic .tab-toggle-container {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .view-mode-selector .mode-btn,
body.theme-nordic .tab-toggle-container .tab-btn {
    color: #4b5563 !important;
}

body.theme-nordic .view-mode-selector .mode-btn:hover,
body.theme-nordic .tab-toggle-container .tab-btn:hover {
    color: #1f2937 !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

body.theme-nordic .view-mode-selector .mode-btn.active,
body.theme-nordic .tab-toggle-container .tab-btn.active {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2) !important;
}

body.theme-nordic .rotate-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #1f2937 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .rotate-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: #4f46e5 !important;
}

body.theme-nordic .icon-only-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #4b5563 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-nordic .icon-only-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

/* ==========================================================================
   REDUCED MOTION — HIGH-SPECIFICITY COMPANION
   ========================================================================== */
/* These elements each set their own !important transition elsewhere (base.css,
   components.css, responsive.css) at equal-or-higher specificity than the general
   *, *::before, *::after reduced-motion rule in base.css, so that rule alone can't
   override them. Matching (or exceeding, for the #id) their specificity here — in
   this last-loaded stylesheet, so a same-specificity tie also resolves in our favor —
   makes prefers-reduced-motion actually take effect on them too. */
@media (prefers-reduced-motion: reduce) {
    .icon-only-btn,
    .modal-input,
    .tb-rotate-btn,
    .iframe-retry-btn,
    .dashboard,
    #help-toggle-btn {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}