/* ══════════════════════════════
   Barevná paleta
══════════════════════════════ */
:root {
    --clr-bg:            #0f0f0f;
    --clr-bg-card:       #1a1a1a;
    --clr-bg-input:      #111;
    --clr-bg-error:      #2a1010;

    --clr-border:        #2a2a2a;
    --clr-border-input:  #333;
    --clr-border-error:  #5a1a1a;

    --clr-accent:        #1e9bff;
    --clr-accent-hover:  #70bfff;

    --clr-text:          #e8e8e8;
    --clr-text-white:    #fff;
    --clr-text-muted:    #777;
    --clr-text-subtle:   #555;
    --clr-text-faint:    #444;
    --clr-text-placeholder: #333;

    --clr-error:         #ff8888;

    --clr-qr-bg:         #fff;
    --clr-page-bg:       #0f0f0f;
}

/* ─── Reset ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ══════════════════════════════
   Obrazovka
══════════════════════════════ */
@media screen {
    body {
        font-family: 'Segoe UI', system-ui, sans-serif;
        background: var(--clr-bg);
        color: var(--clr-text);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .wrap {
        width: 100%;
        max-width: 440px;
    }

    /* Hlavička */
    header {
        margin-bottom: 2rem;
    }

    .eyebrow {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--clr-accent);
        margin-bottom: 0.4rem;
    }

    h1 {
        font-size: 1.9rem;
        font-weight: 700;
        color: var(--clr-text-white);
    }

    h1 span {
        color: var(--clr-accent);
    }

    /* Karta */
    .card {
        background: var(--clr-bg-card);
        border: 1px solid var(--clr-border);
        border-radius: 12px;
        padding: 2rem;
    }

    /* Formulář */
    label {
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clr-text-muted);
        margin-bottom: 0.5rem;
    }

    .spz-input {
        width: 100%;
        background: var(--clr-bg-input);
        border: 1px solid var(--clr-border-input);
        border-radius: 8px;
        color: var(--clr-text-white);
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        text-align: center;
        padding: 0.7rem 1rem;
        outline: none;
        transition: border-color 0.2s;
    }

    .spz-input:focus {
        border-color: var(--clr-accent);
    }

    .spz-input::placeholder {
        color: var(--clr-text-placeholder);
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.1em;
    }

    .hint {
        font-size: 0.74rem;
        color: var(--clr-text-faint);
        margin-top: 0.4rem;
        text-align: center;
    }

    /* Tlačítko Generovat */
    .btn {
        width: 100%;
        margin-top: 1.25rem;
        padding: 0.85rem;
        background: var(--clr-accent);
        color: var(--clr-bg);
        border: none;
        border-radius: 8px;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s;
    }

    .btn:hover {
        background: var(--clr-accent-hover);
    }

    /* Chybová hláška */
    .error {
        margin-top: 0.9rem;
        background: var(--clr-bg-error);
        border: 1px solid var(--clr-border-error);
        color: var(--clr-error);
        border-radius: 8px;
        padding: 0.7rem 1rem;
        font-size: 0.86rem;
    }

    /* Výsledek */
    .result-screen {
        margin-top: 2rem;
        text-align: center;
    }

    .result-label {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--clr-text-faint);
        margin-bottom: 1rem;
    }

    .qr-wrap {
        display: inline-block;
        background: var(--clr-qr-bg);
        border-radius: 10px;
        padding: 14px;
    }

    .qr-wrap img {
        display: block;
    }

    .spz-badge {
        margin-top: 0.9rem;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: 0.25em;
        color: var(--clr-text-white);
    }

    /* Tlačítko Tisk */
    .btn-print {
        display: inline-block;
        margin-top: 1.25rem;
        padding: 0.75rem 2rem;
        background: transparent;
        border: 1px solid var(--clr-accent);
        color: var(--clr-accent);
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .btn-print:hover {
        background: var(--clr-accent);
        color: var(--clr-bg);
    }

    /* Tisková sekce skrytá na obrazovce */
    .print-page {
        display: none;
    }
}

/* ══════════════════════════════
   Tisk
══════════════════════════════ */
@media print {
    /* Skrýt vše kromě tiskové stránky */
    body > * {
        display: none !important;
    }

    .print-page {
        display: block !important;
        width: 100%;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        padding: 20mm 15mm;
    }

    .print-title {
        font-size: 11pt;
        font-weight: normal;
        color: #555;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 8mm;
    }

    .print-qr img {
        width: 80mm;
        height: 80mm;
        display: block;
        margin: 0 auto;
    }

    .print-spz {
        margin-top: 8mm;
        font-size: 28pt;
        font-weight: 900;
        letter-spacing: 0.3em;
        color: #000;
    }

    .print-footer {
        margin-top: 6mm;
        font-size: 8pt;
        color: #aaa;
    }
}