/* titulky.tetour.name - jednoduchy tmavy vzhled (barvy znacky CSR: cervena #D91818, zluta #FFD400, podklad #141414) */
:root {
    --tt-bg: #141414;
    --tt-card: #1e1e1e;
    --tt-border: #2e2e2e;
    --tt-text: #ececec;
    --tt-muted: #9a9a9a;
    --tt-accent: #D91818;
    --tt-yellow: #FFD400;
    --tt-ok: #3ccf6e;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--tt-bg);
    color: var(--tt-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--tt-yellow); }

.tt { min-height: 100vh; display: flex; flex-direction: column; }

.tt-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-bottom: 1px solid var(--tt-border);
}
.tt-top nav { display: flex; gap: 18px; }
.tt-top nav a { color: var(--tt-text); text-decoration: none; }
.tt-top nav a:hover { color: var(--tt-yellow); }
.tt-lang { border: 1px solid var(--tt-border); border-radius: 6px; padding: 0 8px; font-size: 14px; }

.tt-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--tt-text); text-decoration: none; }
.tt-logo { background: var(--tt-accent); color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 14px; letter-spacing: 1px; }

.tt-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 32px 20px 48px; }

.tt-footer { border-top: 1px solid var(--tt-border); color: var(--tt-muted); font-size: 13px; text-align: center; padding: 16px 20px; }

.tt-h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; word-break: break-word; }
.tt-sub { color: var(--tt-muted); font-size: 18px; margin: 0 0 24px; }
.tt-section { margin-top: 40px; }
.tt-section h2, .tt-card h2 { font-size: 20px; margin: 0 0 12px; }
.tt-muted { color: var(--tt-muted); font-size: 14px; }
.tt-ok { color: var(--tt-ok); font-weight: 600; }
.tt-error { color: #ff6b6b; }

.tt-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 12px; padding: 20px; margin-bottom: 18px; }

.tt-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
    border: 2px dashed #444; border-radius: 10px; padding: 28px 16px; text-align: center; margin-bottom: 16px;
}
.tt-drop:hover { border-color: var(--tt-yellow); }
.tt-drop-title { font-size: 18px; font-weight: 600; }
.tt-drop input { max-width: 100%; color: var(--tt-muted); }

.tt-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tt-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--tt-muted); }

select, .tt-input {
    background: #111; color: var(--tt-text); border: 1px solid #444; border-radius: 8px;
    padding: 10px 12px; font-size: 16px; min-width: 220px;
}

.tt-btn {
    display: inline-block; background: var(--tt-accent); color: #fff; border: 0; border-radius: 8px;
    padding: 11px 20px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.tt-btn:hover { background: #f02020; }
.tt-btn:disabled { opacity: .6; cursor: default; }
.tt-btn-secondary { background: #333; }
.tt-btn-secondary:hover { background: #444; }

.tt-progress { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin: 14px 0 6px; }
.tt-progress-bar { height: 100%; width: 0; background: var(--tt-yellow); transition: width .3s; }

.tt-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; font-size: 15px; }
.tt-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--tt-accent); }

/* nahled s mluvcimi - barva textu = barva recnika v titulcich */
.tt-speaker-preview { background: #111; border-radius: 8px; padding: 14px; max-height: 420px; overflow: auto; font-size: 14px; margin: 0; }
.tt-speaker-preview p { margin: 0 0 6px; }
.tt-speaker-preview time { color: var(--tt-muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.tt-speaker-preview strong { margin-right: 6px; }

.tt-features { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.tt-features li::before { content: "✓ "; color: var(--tt-ok); font-weight: 700; }
.tt-how { padding-left: 22px; }

.tt-meta { display: flex; flex-wrap: wrap; gap: 20px; color: var(--tt-muted); font-size: 14px; margin-bottom: 8px; }
.tt-meta strong { color: var(--tt-text); }

.tt-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 12px 0 18px; }
.tt-package { text-align: center; margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.tt-package-minutes { font-size: 28px; font-weight: 700; }
.tt-package-minutes span { font-size: 15px; font-weight: 400; color: var(--tt-muted); }
.tt-package-price { font-size: 22px; color: var(--tt-yellow); font-weight: 700; }
.tt-waitlist p { margin: 6px 0 12px; }
.tt-unlock { border-color: var(--tt-accent); }

.tt-preview {
    background: #111; border-radius: 8px; padding: 14px; max-height: 420px; overflow: auto;
    font-size: 14px; white-space: pre-wrap; margin: 0;
}

#blazor-error-ui {
    background: #5a1010; color: #fff; bottom: 0; display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@media (max-width: 600px) {
    .tt-h1 { font-size: 26px; }
    .tt-main { padding: 20px 14px 36px; }
    select, .tt-input { min-width: 0; width: 100%; }
    .tt-row > * { width: 100%; }
}