body.dark-mode {
    background: var(--color-dark-bg);
    color: var(--color-dark-text);
}

body.dark-mode h1 {
    color: var(--color-dark-text);
}

body.dark-mode .subtitle {
    color: var(--color-dark-text-muted);
}

body.dark-mode input[type="url"] {
    background: var(--color-dark-surface);
    color: var(--color-dark-text);
}

body.dark-mode input[type="url"]::placeholder {
    color: var(--color-light-text-muted);
}

body.dark-mode .btn-primary {
    background: var(--color-dark-text);
    color: var(--color-dark-bg);
}

body.dark-mode .btn-primary:hover {
    background: #e0e0e0;
}

body.dark-mode .input-wrapper {
    border-color: var(--color-dark-text);
}

body.dark-mode .input-wrapper:focus-within {
    box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) 0 var(--color-dark-text);
}

body.dark-mode .theme-toggle {
    background: var(--color-dark-text);
    color: var(--color-dark-bg);
    border-color: var(--color-dark-text);
}

body.dark-mode .theme-toggle:hover {
    box-shadow: 2px -2px 0 var(--color-dark-text);
}

body.dark-mode .result-content {
    background: var(--color-dark-surface);
    border-color: var(--color-dark-text);
}

body.dark-mode .result-content::before {
    border-color: var(--color-dark-text);
}

body.dark-mode .result-label {
    color: var(--color-dark-text-muted);
}

body.dark-mode .result-url a {
    color: var(--color-dark-text);
    border-bottom-color: var(--color-dark-text);
}

body.dark-mode .copy-btn {
    background: var(--color-dark-surface);
    border-color: var(--color-dark-text);
    color: var(--color-dark-text);
}

body.dark-mode .copy-btn:hover {
    background: var(--color-dark-text);
    color: var(--color-dark-bg);
}

body.dark-mode .copy-btn.copied {
    background: var(--color-dark-text);
    color: var(--color-dark-bg);
}

body.dark-mode .error {
    background: var(--color-error-dark);
    border-color: var(--color-error-border-dark);
}

body.dark-mode .error::before {
    border-color: var(--color-error-border-dark);
}

body.dark-mode .error .result-label {
    color: var(--color-error-border-dark);
}

@media (max-width: 640px) {
    body.dark-mode .input-wrapper:focus-within {
        box-shadow: 0 var(--shadow-offset) 0 var(--color-dark-text);
    }
}