:root {
    --bg-dark: #0f172a;
    --primary-glow: #8b5cf6;
    --secondary-glow: #3b82f6;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #a855f7;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 40%);
}

.container {
    width: 100%;
    max-width: 1000px;
    padding: 2rem;
    z-index: 1;
}

header {
    text-align: center;
    margin-bottom: 3rem;
}

header h1 {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    background: linear-gradient(to right, #c084fc, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Tabs */
.tabs {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    gap: 1rem;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: white;
    border-bottom-color: var(--accent);
}

.tab-btn:hover {
    color: white;
}

/* Inputs */
.input-content {
    margin-bottom: 0;
}

.url-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.input-icon {
    margin-left: 1rem;
    color: var(--accent);
}

input[type="text"],
textarea {
    flex: 1;
    /* A flex item's min-width defaults to auto, which for a text input is its
       20-character intrinsic size (~284px here). That is what made the URL row
       wider than a 390px phone and pushed the eye button off the right edge. */
    min-width: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    padding: 0.8rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

textarea {
    resize: vertical;
    margin-top: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    width: 100%;
    border: 1px solid var(--glass-border);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
    border: none;
    color: white;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
}

.btn-primary.glow-anim {
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
    }

    50% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
    }

    100% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
    }
}

.action-bar {
    display: flex;
    justify-content: flex-end;
}

/* Config */
.config-section h3 {
    margin-bottom: 1.25rem;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.config-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.config-card.selected {
    border-color: var(--accent);
    background: rgba(168, 85, 247, 0.1);
}

.config-card p {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.6);
}

.config-card.selected p {
    color: rgba(168, 85, 247, 0.8);
}


.controls-row {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Advanced Settings */
.advanced-toggle {
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 0.5rem;
    border-top: 1px solid var(--glass-border);
}

.advanced-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
}

.setting-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Grid items default to min-width:auto too, so a wide control or a long
       status line would otherwise stretch its column past the panel. */
    min-width: 0;
}

/* These spans used to be inline styles, which no media query can override -
   and `span 2` inside the one-column phone grid silently invents a second,
   content-sized column, which is what widened the panel to 432px. */
.setting-group.span-2 {
    grid-column: span 2;
}

.setting-group.span-3 {
    grid-column: span 3;
}

.setting-row {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
}

.setting-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setting-input {
    width: 100%;
    min-width: 0;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: white;
    outline: none;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.setting-input-file {
    padding: 0.6rem;
}

.setting-hint {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.setting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.setting-actions .setting-hint {
    margin-top: 0;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.btn-setting {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
}

.btn-setting:hover {
    background: rgba(255, 255, 255, 0.18);
}

.card-back-preview {
    width: 63px;
    height: 88px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1.2rem;
}

.card-back-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iOS Safari zooms in on any form control whose computed font-size is under
   16px and never zooms back out, so the touch case gets a literal 16px. */
@media (pointer: coarse) {
    .setting-input {
        font-size: 16px;
    }
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 100%;
    height: 40px;
    background: transparent;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--glass-border);
    border-radius: 6px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--accent);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Preview Area */
.preview-section {
    max-height: none;
    display: flex;
    flex-direction: column;
}

.preview-container {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.preview-deck {
    margin-bottom: 2rem;
}

.preview-deck h4 {
    color: white;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
}

.preview-batch-label {
    color: var(--accent);
    font-size: 0.9rem;
    margin: 0.5rem 0;
    font-weight: bold;
}

.preview-grid-wrapper {
    display: flex;
    gap: 3rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    align-items: flex-start;
}

/* Centered by auto margins, not justify-content: center. A centered row wider
   than its scroller overflows to the LEFT as well, and nothing can scroll
   there - a deck with more sheets than fit lost its first few. Auto margins
   center a short row and simply collapse when the row overflows. */
.preview-grid-wrapper > .preview-page:first-child {
    margin-left: auto;
}

.preview-grid-wrapper > .preview-page:last-child {
    margin-right: auto;
}

/* 
   Accurate Scale Representation - 2.5x
   Physical: 215.9mm x 279.4mm 
   Card: 63mm x 88mm
   Scale Factor: 2.5 pixels per mm
*/
.preview-page {
    position: relative;
    border: 1px solid var(--glass-border);
    background: white;
    width: 540px;
    height: 699px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    display: block;
}

.preview-page.landscape {
    width: 699px;
    height: 540px;
}

.preview-page-grid {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(3, 157.5px);
    grid-template-rows: repeat(3, 220px);
}

.preview-card-slot {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 157.5px;
    height: 220px;
    border: none;
    border-radius: 7.5px;
    position: relative;
    transform: translateZ(0);
    z-index: 2;
}

.preview-card-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    border-radius: 7.5px;
}

.page-label {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* New Loading Bar */
.loading-section {
    text-align: center;
    padding: 3rem;
}

.loading-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

.loading-bar-bg {
    height: 30px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.loading-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--secondary-glow), var(--primary-glow), var(--accent));
    background-size: 200% 100%;
    animation: gradientMove 2s linear infinite;
    transition: width 0.3s ease;
}

@keyframes gradientMove {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.loading-text {
    font-family: 'JetBrains Mono', monospace;
    color: white;
    text-shadow: 0 0 10px var(--primary-glow);
    font-size: 1.1rem;
}

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

/* Something did not arrive: a card the run could not download, or a deck that
   never loaded at all. Amber rather than the panel's violet, because it is the
   one thing on an otherwise finished screen that is not finished, and it has to
   read that way at a glance. One class for both, so the two reports cannot
   drift into looking like different kinds of thing. */
.trouble-panel {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-left: 4px solid #fbbf24;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    text-align: left;
}

.trouble-panel h4 {
    color: #fbbf24;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Since chunk 20 this panel can hold up to three sections - a card that did not
   print, a card back that did not, and a double-faced card that printed wearing
   the plain back - and they are genuinely different problems with different
   next moves. Without a rule here the second heading sits flush against the
   list belonging to the first, so the two read as one run-on warning. A
   separator rather than only space, because the panel's own border is the only
   other line and the eye needs somewhere to stop. */
.trouble-panel h4:not(:first-child) {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(251, 191, 36, 0.3);
}

.trouble-panel p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.trouble-panel ul {
    margin: 0.75rem 0 0 1.1rem;
    padding: 0;
}

.trouble-panel li {
    color: var(--text-main);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.trouble-panel a {
    color: #fcd34d;
}

.download-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.download-btn {
    text-decoration: none;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    transition: all 0.2s;
}

.download-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--accent);
}

@media (max-width: 768px) {
    .config-grid {
        grid-template-columns: 1fr;
    }

    .advanced-panel {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1.25rem;
    }

    /* `span 2` in a one-column grid creates implicit columns rather than
       clamping, so say "the whole row" explicitly instead. */
    .setting-group.span-2,
    .setting-group.span-3 {
        grid-column: 1 / -1;
    }

    .setting-row {
        flex-wrap: wrap;
    }

    .container {
        padding: 1rem;
    }

    /* 2rem each side of a 390px screen leaves 294px of usable width. */
    .glass-panel {
        padding: 1.25rem;
    }

    .controls-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 0;
    }
}

/* Add styling for the inline action button */
.btn-input-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    padding: 0 1rem;
    cursor: pointer;
    transition: all 0.2s;
    height: 100%;
    margin-right: 0.2rem;
    border-left: 1px solid var(--glass-border);
}

.btn-input-action:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
}

/* Right align action bar for batch */
.action-bar-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Cut Lines Overlay */
.cut-lines-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cut-line {
    position: absolute;
    background-color: #000;
}

/* Footer in Preview */
.preview-footer {
    position: absolute;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    font-family: 'Helvetica', sans-serif;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.8);
    padding: 0 2px;
    box-sizing: border-box;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1;
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: right;
}

/* Monetization Footer */
.footer-monetize {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding: 1.5rem 2rem;
    transition: all 0.5s ease-in-out;
}

.footer-monetize-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.footer-monetize-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 700px;
    font-style: italic;
    transition: color 0.5s ease-in-out;
}

.footer-monetize-actions {
    display: flex;
    align-items: center;
}

.btn-support {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}

/* Subtle (default/inactive) state */
.footer-monetize.subtle {
    opacity: 0.45;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.footer-monetize.subtle .footer-monetize-text {
    color: rgba(148, 163, 184, 0.65);
    font-size: 0.9rem;
}

.kofi-btn {
    background: rgba(255, 140, 91, 0.08);
    color: rgba(255, 140, 91, 0.85);
    border: 1px solid rgba(255, 140, 91, 0.45);
    box-shadow: none;
}

.kofi-btn:hover {
    background: rgba(255, 140, 91, 0.16);
    color: white;
    border-color: rgba(255, 140, 91, 0.65);
    transform: translateY(-1px);
}

/* Prominent (active) state */
.footer-monetize.prominent {
    opacity: 1.0;
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.footer-monetize.prominent .footer-monetize-text {
    color: var(--text-main);
    font-size: 0.95rem;
}

.footer-monetize.prominent .kofi-btn {
    background: linear-gradient(135deg, #ff5e5b 0%, #ff8c5b 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4), 
        inset 0 -1px 0 rgba(0, 0, 0, 0.2), 
        0 0 15px rgba(255, 94, 91, 0.35);
    transform: scale(1.03);
}

.footer-monetize.prominent .kofi-btn:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5), 
        inset 0 -1px 0 rgba(0, 0, 0, 0.2), 
        0 0 25px rgba(255, 94, 91, 0.55);
}

.footer-monetize.prominent .kofi-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    animation: shineSweep 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.footer-monetize.prominent .kofi-btn:hover::after {
    animation: shineSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-monetize.prominent .kofi-btn i {
    transition: transform 0.2s ease;
}

.footer-monetize.prominent .kofi-btn:hover i {
    animation: heartBeat 0.8s infinite alternate;
}

@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.25);
    }
}

@keyframes shineSweep {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

@media (max-width: 768px) {
    .footer-monetize-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .footer-monetize-text {
        max-width: 100%;
    }
}

/* The circled i that holds a setting's explanation, so the row stays one line. */
.info-tip {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 0.25rem;
    cursor: help;
}

.info-tip:hover,
.info-tip:focus {
    color: var(--accent);
    outline: none;
}

/* Batch mode's combine switch, under the list of links it applies to. */
.combine-toggle {
    margin-top: 1rem;
}

/* Silhouette cut sheets: the registration marks the PDF prints, and each card
   outlined where the cut file cuts it - rounded, like the cut. */
.registration-marks-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* over the cards' slots (z-index 2), whose art reaches toward the marks */
    z-index: 3;
}

.registration-clearance {
    position: absolute;
    background: #fff;
}

.registration-mark {
    position: absolute;
    background: #000;
}

.preview-footer.silhouette-footer {
    justify-content: center;
    gap: 1.5em;
}

/* A Silhouette card's art runs past its cut line into the gaps, so its slot
   neither clips nor rounds; the cut line is drawn over the art instead. */
.preview-card-slot.silhouette-slot {
    overflow: visible;
    border-radius: 0;
}

.preview-card-img.extended {
    visibility: hidden;
}

.preview-bleed {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.preview-bleed-art {
    position: absolute;
    display: block;
}

.silhouette-cut-outline {
    position: absolute;
    inset: 0;
    border-radius: 7.5px;
    outline: 0.5px dashed rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* A switch row like the board toggles, not a stacked setting. */
.setting-group.silhouette-toggle {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}