.nav .theme-toggle { display: grid; place-items: center; width: 38px; min-width: 38px; height: 38px; padding: 0; font: 25px/1 Georgia, serif; color: var(--ink); border: 1px solid var(--line); }
.nav .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav { flex-wrap: wrap; justify-content: flex-end; }
:root[data-theme="dark"] { --bg: #171d19; --card: #222b24; --ink: #f0f3e9; --text: #dce4d9; --muted: #a8b5a6; --line: #435046; --field: #6e7e6d; --accent: #9aca9f; --accent-ink: #b2dbb0; --accent-soft: #2e4031; --danger: #ff9d90; --shadow: 0 8px 30px #0003; }
html[data-theme="dark"] .brand-wordmark > path { fill: var(--ink); }
html[data-theme="dark"] .brand-wordmark > path:nth-of-type(2) { fill: var(--bg); }
html[data-theme="dark"] :is(.input, .select, .textarea, .large-input, .letter-input, .ending-editor, .tool-popover, .qr-settings, .additional summary, .settings-body, .heart-options, .url-control) { background-color: var(--card); color: var(--ink); }
html[data-theme="dark"] :is(.tool-popover, .qr-settings, .additional summary, .settings-body, .heart-options) { border-color: var(--line); }
html[data-theme="dark"] :is(.flow-panel, .kind-choice, .option, .divider-option, .done-card, .signin-card, .review-edit-dialog, .studio-dialog, .auth-card) { background: var(--card); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(.flow-head h1, .signin-card h1, .done-head h1, .kind-choice .choice-label, .review-value) { color: var(--ink); }
html[data-theme="dark"] :is(.flow-eyebrow, .art-chip, .review-letter, .review-link, .done-footer, .swatch-option, .eyebrow, .tiny-grid, .qr-top, .canvas-meta, .dimensions, .brush-size, .filled, .placement, .question-head .remove-q, .option-remove) { color: var(--muted); }
html[data-theme="dark"] :is(.tool-rail, .canvas-bottom, .auth-mode, .lock-question, .email-access-list li, .mine-local-notice, .template-grid > button, .size-step button, #closeToolOptions, .dialog-close, #shapeOptions button) { background: var(--accent-soft); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(.tool.active, .tool[aria-pressed="true"], .option[aria-pressed="true"], .divider-option[aria-pressed="true"], #shapeOptions button.active, #shapeOptions button[aria-pressed="true"], .saved-answer, .draft-badge, .kind-choice .choice-icon) { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
html[data-theme="dark"] :is(.flow-steps i, .step-line, .art-chip, .review-row, .ending-editor, .divider-option, .option .option-check) { border-color: var(--line); }
html[data-theme="dark"] :is(.btn.primary, .studio-dialog > .btn.primary) { background: var(--accent); color: #16251a; border-color: var(--accent); }
html[data-theme="dark"] :is(.flow-steps .active, .flow-steps .complete, .question-add-option, .review-row .review-edit, .done-url, .auth-card h1 span, .password-field button) { color: var(--accent-ink); }
html[data-theme="dark"] .flow-steps .complete i { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--line); }
html[data-theme="dark"] .review-row:hover { background: var(--accent-soft); }
html[data-theme="dark"] :is(.auth-error, .dialog-error, .studio-error, .flow-error) { color: var(--danger); }
html[data-theme="dark"] :is(.qr-paper, .review-qr, .qr-frame, .signin-art) { background: #fff; color-scheme: light; }
html[data-theme="dark"] .qr-frame { box-shadow: 0 0 0 4px #101610, 0 0 0 8px var(--gold), 0 0 0 12px #101610, 0 18px 40px #0004; }

/* Keep the workspace dark around the artwork and the printable QR paper. */
html[data-theme="dark"] :is(.qr-panel, .image-pixel-mat) { background-color: var(--card); border-color: var(--line); }
html[data-theme="dark"] :is(.qr-top .eyebrow, .live-badge, .placement-label, .qr-caption, .tool, .quiet-btn, .url-control #https, .ending-editor span, .signin-card .edit-link, .upload-zone svg) { color: var(--muted); }
html[data-theme="dark"] .live-badge > span { background-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="dark"] :is(#heartTemplate, #textTemplate, #iconGalleryBtn)[aria-expanded="true"] { border-color: var(--accent); background-color: #405746; color: var(--ink); }
html[data-theme="dark"] :is(.placement-controls button, #selectionOptions button) { background-color: var(--accent-soft); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(.tool:hover, .quiet-btn:hover, .canvas-bottom .dimensions:hover, .placement-controls button:hover, #selectionOptions button:hover, #closeToolOptions:hover, #shapeOptions button:hover) { background-color: #405746; color: var(--ink); border-color: var(--accent); }
html[data-theme="dark"] .url-control #https[aria-pressed="true"] { color: var(--accent-ink); }
html[data-theme="dark"] :is(.tool-separator, .step-line) { background-color: var(--line); }
html[data-theme="dark"] .color.active::after { border-color: var(--accent); }
html[data-theme="dark"] :is(.filled input, .resize-check input, .invert-template input, .answer-option input[type="checkbox"], .answer-option input[type="radio"]) { accent-color: var(--accent); }
html[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track { background-color: var(--field); }
html[data-theme="dark"] input[type="range"]::-moz-range-track { background-color: var(--field); }
html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { background-color: var(--card); }
html[data-theme="dark"] input[type="range"]::-moz-range-thumb { background-color: var(--card); }

/* Input boundaries remain distinct from the surrounding decorative borders. */
.url-control, .ending-editor { border-color: var(--field); }
html[data-theme="dark"] :is(.input, .select, .textarea, .large-input, .letter-input, .ending-editor, .url-control) { border-color: var(--field); }

/* Explicit states must outrank the dark field surface, including auth inputs. */
html[data-theme="dark"] :is(.input, .select, .textarea, .auth-card .input):focus { border-color: var(--accent); box-shadow: 0 0 0 3px #9aca9f40; }
html[data-theme="dark"] :is(.input, .select, .textarea, .auth-card .input)[aria-invalid="true"],
html[data-theme="dark"] .input.bad { border-color: var(--danger); }
html[data-theme="dark"] :is(.input, .select, .textarea, .auth-card .input)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px #ff9d9033; }
html[data-theme="dark"] :is(.input, .textarea, .url-control input)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] :is(.ending-editor, .url-control):focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #9aca9f40; }
html[data-theme="dark"] .ending-editor .input { background-color: transparent; box-shadow: none; }
html[data-theme="dark"] .ending-editor .input:focus { box-shadow: none; }
html[data-theme="dark"] .url-control input:focus { box-shadow: none; }
:is(.url-control, .ending-editor):has(input[aria-invalid="true"]),
html[data-theme="dark"] :is(.url-control, .ending-editor):has(input[aria-invalid="true"]) { border-color: var(--danger); }
:is(.url-control, .ending-editor):has(input[aria-invalid="true"]):focus-within,
html[data-theme="dark"] :is(.url-control, .ending-editor):has(input[aria-invalid="true"]):focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
html[data-theme="dark"] :focus-visible { outline-color: var(--accent); }
html[data-theme="dark"] .btn.primary:hover:not(:disabled) { background-color: var(--accent-ink); color: #16251a; border-color: var(--accent-ink); }
html[data-theme="dark"] .nav :is(a:hover, button:hover) { background-color: var(--accent-soft); color: var(--ink); }
html[data-theme="dark"] .toast { background-color: var(--ink); color: #16251a; }
html[data-theme="dark"] .review-letter pre { background-color: var(--accent-soft); }
@media (max-width: 480px) { .nav .theme-toggle { min-width: 32px; width: 32px; height: 32px; font-size: 22px; } .top { gap: 8px; } }