#decklist-input { display: block; width: 100%; resize: vertical; }
[hidden] { display: none !important; }
#art-modal { width: min(900px, calc(100vw - 32px)); max-width: 900px; }
.close-art-modal { float: right; border: 0; background: none; font-size: 25px; cursor: pointer; }
.dialog-hint { color: #78716c; margin-top: -8px; }
.change-art { display: block; width: calc(100% - 14px); margin: 0 7px 8px; border: 1px solid #d6d0c8; border-radius: 5px; background: #fff; padding: 4px; font-size: 11px; font-weight: 700; cursor: pointer; }
.edit-image { display: block; width: calc(100% - 14px); margin: 0 7px 8px; border: 1px solid #fdba74; border-radius: 5px; background: #fff7ed; color: #9a3412; padding: 4px; font-size: 11px; font-weight: 700; cursor: pointer; }
#image-editor-modal { width: min(980px, calc(100vw - 32px)); max-width: 980px; }
.close-image-editor { float: right; border: 0; background: none; font-size: 25px; cursor: pointer; }
.image-editor { display: grid; grid-template-columns: minmax(280px, 1fr) 270px; gap: 24px; margin-top: 20px; }
.image-editor-preview { background: #e7e2dc; border-radius: 10px; padding: 12px; text-align: center; }
#image-editor-canvas { display: block; width: min(100%, 420px); height: auto; margin: auto; background: #222; cursor: grab; }
#image-editor-canvas.dragging { cursor: grabbing; }
.image-editor-preview p { margin: 9px 0 0; color: #78716c; font-size: 12px; }
.image-editor-controls label { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0 0 12px; color: #44403c; font-size: 12px; font-weight: 700; }
.image-editor-controls input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #ea580c; }
.image-editor-controls output { color: #78716c; }
.image-editor-controls select, .image-editor-controls input:not([type=range]) { grid-column: 1 / -1; border: 1px solid #d6d0c8; border-radius: 7px; padding: 8px; font: inherit; }
.edit-art-upload { grid-template-columns: 1fr !important; }
.edit-art-upload .small-button { width: max-content; margin: 5px 0 0; }
.area-actions { display: flex; align-items: center; gap: 10px; margin: 0 0 15px; }
.area-actions .small-button { margin: 0; }
.area-actions .text-button { margin: 0; padding: 7px 0; font-size: 12px; }
.area-actions .small-button.active { background: #ea580c; border-color: #ea580c; color: #fff; }
.area-coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 15px; padding: 10px; border: 1px dashed #c9c2ba; border-radius: 8px; }
.area-coordinates legend { padding: 0 4px; color: #78716c; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.image-editor-controls .area-coordinates label { display: block; margin: 0; font-size: 11px; }
.area-coordinates input { width: 100%; margin-top: 3px; border: 1px solid #d6d0c8; border-radius: 5px; padding: 5px; font: inherit; }
html[data-theme="dark"] .area-coordinates { border-color: #57534e; }
html[data-theme="dark"] .area-coordinates input { background: #191919; border-color: #4a4a4a; color: var(--ink); }
.editor-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; margin-top: 19px; }
.editor-actions .generate-button { width: auto; margin: 0; padding: 9px; font-size: 13px; }
.editor-actions .small-button { margin: 0; text-align: center; }
html[data-theme="dark"] .edit-image { background: #3b1e0d; border-color: var(--accent); color: #fed7aa; }
html[data-theme="dark"] .image-editor-preview { background: #111; }
html[data-theme="dark"] .image-editor-controls label { color: var(--ink); }
html[data-theme="dark"] .image-editor-controls select, html[data-theme="dark"] .image-editor-controls input:not([type=range]) { background: #191919; color: var(--ink); border-color: #4a4a4a; }
@media (max-width: 680px) { .image-editor { grid-template-columns: 1fr; } }
#legal-modal { width: min(720px, calc(100vw - 32px)); max-width: 720px; }
.close-legal-modal { float: right; border: 0; background: none; font-size: 25px; cursor: pointer; }
.legal-content h3 { margin: 20px 0 4px; font-size: 15px; }
.legal-content p { margin: 7px 0; }
footer { display: flex; align-items: center; justify-content: center; gap: 18px; }
footer .text-button { margin: 0; flex: 0 0 auto; }
footer > span { flex: 0 1 auto; }
.kofi-button img { height: 36px; border: 0; }
#support-modal { width: min(420px, calc(100vw - 32px)); text-align: center; }
.close-support-modal { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 25px; cursor: pointer; }
.support-copy { color: #78716c; margin: 16px 0 20px; }
.support-link { display: block; border-radius: 9px; padding: 12px; background: #ea580c; color: #fff; text-decoration: none; font-weight: 800; }
#support-dismiss { margin-top: 12px; }
@media (max-width: 620px) { footer { flex-wrap: wrap; gap: 10px 14px; } }
.jump-button { display: block; margin: 18px auto 0; border: 1px solid #c9c2ba; border-radius: 8px; background: #fff; color: #44403c; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.jump-to-cards { position: sticky; top: 82px; z-index: 1; margin: 12px 0 12px auto; box-shadow: 0 2px 8px rgba(33,29,25,.12); }
.jump-button:disabled { opacity: .45; cursor: not-allowed; }
.card-actions { display: flex; align-items: center; gap: 12px; }
.card-actions .jump-button { margin: 0; }
@media (max-width: 520px) { .section-title { align-items: flex-start; } .card-actions { flex-direction: column; align-items: flex-end; gap: 5px; } }
.guide-link { display: inline-block; margin-top: 8px; color: #c2410c; font-weight: 800; text-decoration: none; }
.product-switcher { display: flex; align-items: center; gap: 18px; }
.product-link { display: inline-flex; align-items: center; gap: 7px; color: #171717; font-size: 19px; font-weight: 850; letter-spacing: -.8px; text-decoration: none; }
.product-link-current { gap: 0; }
.product-link-current .product-suffix, .nextdeck-link > span > span { color: #ea580c; }
.product-divider { width: 1px; height: 26px; background: #e7e2dc; }
.nextdeck-mark { width: 25px; height: 25px; color: var(--accent); flex: 0 0 auto; }
.nextdeck-link:hover, .product-link-current:hover { color: #ea580c; }
.spellcheck-link { display: inline-flex; align-items: center; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #171717; font-size: 19px; font-weight: 850; letter-spacing: -.8px; line-height: 1; text-decoration: none; }
.spellcheck-link > span { color: #ea580c; }
.spellcheck-link em { margin-left: 5px; padding: 2px 4px; border-radius: 3px; background: #fed7aa; color: #9a3412; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .35px; text-transform: uppercase; }
.spellcheck-link:hover { color: #ea580c; }
.theme-toggle { width: 32px; height: 32px; margin-left: 14px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.theme-toggle:hover { background: var(--wash); }
@media (max-width: 640px) { .product-switcher { gap: 9px; } .product-link, .spellcheck-link { font-size: 16px; } .spellcheck-link em { display: none; } .product-divider { height: 22px; } .site-header { padding-left: 14px; padding-right: 14px; } .header-actions .text-button { margin-left: 7px; } }
.seo-content { max-width: 1000px; margin: 64px auto 0; padding: 34px; border-top: 1px solid #e7e2dc; }
.seo-content h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.7px; }
.seo-content > p, .seo-content article p, .seo-content details p, .guide p { color: #57534e; }
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 38px; }
.seo-grid article { border: 1px solid #e7e2dc; border-radius: 12px; padding: 18px; background: #fff; }
.seo-grid h3 { margin: 0 0 6px; font-size: 16px; }
.seo-content details { border-top: 1px solid #e7e2dc; padding: 13px 0; }
.seo-content summary { cursor: pointer; font-weight: 700; }
.guide { max-width: 820px; }
.guide h1 { font-size: clamp(38px, 5vw, 58px); letter-spacing: -2px; line-height: 1; margin: 0 0 20px; }
.guide h2 { margin-top: 35px; letter-spacing: -.5px; }
.guide .lead { font-size: 19px; }
@media (max-width: 760px) { .seo-grid { grid-template-columns: 1fr; } .seo-content { padding: 25px 0; } }
.seo-disclaimer { margin-top: 24px; font-size: 13px; color: #78716c; }
.tcg-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 38px; }
.tcg-links a { border: 1px solid #e7e2dc; border-radius: 9px; padding: 11px; color: #44403c; font-weight: 700; text-decoration: none; }
.tcg-links a:hover { border-color: #ea580c; color: #c2410c; }
@media (max-width: 760px) { .tcg-links { grid-template-columns: 1fr; } }

/* Shared ProxyPrnt / NextDeck colour vocabulary. */
html[data-theme="dark"] { --ink: #fafafa; --muted: #a3a3a3; --line: #303030; --paper: #101010; --wash: #191919; --accent: #fb923c; color-scheme: dark; }
html[data-theme="dark"] .site-header { background: rgb(16 16 16 / 87%); }
html[data-theme="dark"] .panel, html[data-theme="dark"] .user-card, html[data-theme="dark"] .seo-grid article, html[data-theme="dark"] .tab.active, html[data-theme="dark"] .jump-button, html[data-theme="dark"] .small-button, html[data-theme="dark"] .secondary-button { background: #191919; color: var(--ink); }
html[data-theme="dark"] .tabs, html[data-theme="dark"] .stats div, html[data-theme="dark"] .back-options { background: #222; }
html[data-theme="dark"] .tab.active { background: var(--accent); color: #171717; box-shadow: none; }
html[data-theme="dark"] .paper-option.selected { background: var(--accent); border-color: var(--accent); color: #171717; }
html[data-theme="dark"] .paper-option.selected small { color: #3f1706; }
html[data-theme="dark"] .result { background: #191919; }
html[data-theme="dark"] .dropzone { background: #161616; border-color: #4a4a4a; }
html[data-theme="dark"] .search-row input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #191919; color: var(--ink); border-color: #4a4a4a; }
html[data-theme="dark"] .product-link, html[data-theme="dark"] .text-button, html[data-theme="dark"] .guide-link, html[data-theme="dark"] .tcg-links a { color: var(--ink); }
html[data-theme="dark"] .product-divider { background: #3a3a3a; }
html[data-theme="dark"] .spellcheck-link { background: transparent; color: var(--ink); }
html[data-theme="dark"] .spellcheck-link > span { color: #fb923c; }
html[data-theme="dark"] .spellcheck-link em { background: #5c2a13; color: #fed7aa; }
html[data-theme="dark"] .spellcheck-link:hover { background: transparent; color: #fb923c; }
html[data-theme="dark"] .dialog-hint, html[data-theme="dark"] .support-copy, html[data-theme="dark"] .seo-content > p, html[data-theme="dark"] .seo-content article p, html[data-theme="dark"] .seo-content details p, html[data-theme="dark"] .guide p { color: var(--muted); }
html[data-theme="dark"] dialog { color: var(--ink); background: #202020; }
html[data-theme="dark"] .close-modal, html[data-theme="dark"] .close-art-modal, html[data-theme="dark"] .close-legal-modal, html[data-theme="dark"] .close-support-modal { color: var(--ink); }
html[data-theme="dark"] .product-link-current .product-suffix { color: var(--accent) !important; }
/* Keep the Custom art card action distinct and readable in dark mode. */
html[data-theme="dark"] button.edit-image { background: var(--accent) !important; border-color: var(--accent) !important; color: #171717 !important; }
html[data-theme="dark"] button.change-art { background: #292929 !important; border-color: #57534e !important; color: #fafafa !important; }
html[data-theme="dark"] #toast { background: #292929; color: #fafafa; border: 1px solid #57534e; }