/* Video rozbory — světlé, ostré téma (samostatná aplikace) */

:root {
    --bg: #eef1f6;
    --bg-2: #e7ebf2;
    --card: #ffffff;
    --card-2: #f6f8fb;
    --line: #dde3ec;
    --line-strong: #c6cfdb;
    --field: #ffffff;
    --txt: #1b2230;
    --muted: #586273;
    --muted-2: #8a93a3;
    --accent-a: #2563eb;
    --accent-a-dark: #1d4ed8;
    --accent-b: #0ea5e9;
    --accent-soft: #e7effd;
    --danger-a: #db3a54;
    --danger-b: #c12642;
    --pos: #18794e;
    --neg: #b42334;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, 0.14), 0 4px 10px -4px rgba(16, 24, 40, 0.08);
}

* {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

body.bg-dashboard {
    overflow-wrap: break-word;
}

body.bg-dashboard {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    min-height: 100dvh;
    display: grid;
    align-items: start;
    padding:
        calc(16px + env(safe-area-inset-top))
        calc(16px + env(safe-area-inset-right))
        calc(24px + env(safe-area-inset-bottom))
        calc(16px + env(safe-area-inset-left));
    background:
        radial-gradient(1000px 480px at 8% -12%, rgba(37, 99, 235, 0.07), transparent 60%),
        radial-gradient(820px 460px at 96% -2%, rgba(14, 165, 233, 0.05), transparent 60%),
        linear-gradient(180deg, #f3f5fa 0%, #e9edf3 100%);
    background-attachment: fixed;
    color: var(--txt);
    -webkit-font-smoothing: antialiased;
}

.matrix {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.6;
    background-image: radial-gradient(circle at 1px 1px, rgba(27, 35, 48, 0.05) 1px, transparent 0);
    background-size: 30px 30px;
    pointer-events: none;
}

.dashboard,
.viewer {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.viewer {
    width: min(1024px, 100%);
}

.dashboard__header,
.test-management__card,
.access-card,
.analysis-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: clamp(16px, 2.6vw, 24px);
    box-shadow: var(--shadow);
}

.dashboard__header {
    display: grid;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.dashboard__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-a));
    background-size: 200% 100%;
    animation: shimmer 4.5s linear infinite;
}

.dashboard__header h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.8vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--txt);
}

.dashboard__header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
    max-width: 64ch;
}

h2 {
    margin: 0 0 14px;
    color: var(--txt);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.role-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid #c7dbfb;
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 11px;
}

.role-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-a);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    flex: 0 0 auto;
}

.logout-link {
    position: static;
    width: fit-content;
    margin-top: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    padding: 8px 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.7rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--txt);
    background: var(--card);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.logout-link:hover {
    background: var(--card-2);
    border-color: var(--accent-a);
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.header-actions form {
    display: inline-flex;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.back-link:hover {
    color: var(--accent-a-dark);
}

.message {
    margin: 0 0 4px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 0.86rem;
    background: var(--card-2);
    color: var(--txt);
}

.message.error {
    border-color: #f1c4cb;
    border-left-color: var(--danger-a);
    color: #8d1d2f;
    background: #fdecef;
}

.message.success {
    border-color: #bfe6cd;
    border-left-color: var(--pos);
    color: #176440;
    background: #e9f7ef;
}

.helper-text {
    color: var(--muted);
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
}

.helper-text strong {
    color: var(--txt);
}

label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--txt);
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-2);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-a);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586273' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

textarea {
    resize: vertical;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.form-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

button,
.button-ghost,
.cta {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 10px 15px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

button,
.cta {
    color: #fff;
    background: linear-gradient(180deg, #3d78f2 0%, var(--accent-a) 100%);
    border-color: rgba(29, 78, 216, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 1px 2px rgba(16, 24, 40, 0.18),
        0 4px 12px -4px rgba(37, 99, 235, 0.5);
}

button:hover,
.cta:hover {
    background: linear-gradient(180deg, #4a83f5 0%, #2e6cee 100%);
}

button:active,
.cta:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.2);
}

.button-ghost {
    color: var(--txt);
    background: var(--card);
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.button-ghost:hover {
    background: var(--card-2);
    border-color: var(--accent-a);
    color: var(--accent-a-dark);
}

.button-danger {
    color: #fff;
    background: linear-gradient(180deg, #e14e67 0%, var(--danger-a) 100%);
    border-color: rgba(193, 38, 66, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(16, 24, 40, 0.18),
        0 4px 12px -4px rgba(219, 58, 84, 0.45);
}

.button-danger:hover {
    background: linear-gradient(180deg, #e65f76 0%, #cf3350 100%);
}

/* ---------- Builder (trenérská část) ---------- */

.analysis-builder {
    display: grid;
    gap: 20px;
}

.ro-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: grid;
    gap: 20px;
}

.ro-fieldset:disabled {
    opacity: 0.96;
}

.analysis-videos {
    display: grid;
    gap: 12px;
}

.analysis-videos__empty {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    color: var(--muted);
    padding: 20px;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.6;
}

.analysis-block {
    display: grid;
    gap: 12px;
}

.analysis-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.analysis-block__header strong {
    color: var(--txt);
    font-size: 0.94rem;
}

.analysis-video {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card-2);
    padding: 16px;
    display: grid;
    gap: 14px;
    box-shadow: none;
}

.analysis-video__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
}

.analysis-video__header strong {
    color: var(--accent-a-dark);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.analysis-video__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.analysis-video__section {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.analysis-video__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.analysis-video__notes {
    display: grid;
    gap: 8px;
}

.analysis-note-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, 160px) minmax(140px, 180px) 1fr auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 9px;
}

.analysis-note-row select {
    width: 100%;
}

.analysis-note-row .note-remove {
    min-width: 40px;
    padding-inline: 10px;
}

.analysis-overlay-row {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, 160px) auto minmax(120px, 160px) minmax(140px, 180px) auto auto auto;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 9px;
}

.analysis-overlay-row select,
.analysis-overlay-row input {
    width: 100%;
}

.overlay-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 0.86rem;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}

.overlay-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-a);
}

.analysis-overlay-preview {
    position: relative;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: #0c1622;
    overflow: hidden;
    min-height: 240px;
    aspect-ratio: 16 / 9;
}

.analysis-overlay-preview.is-hidden {
    display: none;
}

.analysis-overlay-media {
    height: 100%;
}

.analysis-overlay-media iframe,
.analysis-overlay-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.analysis-overlay-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.analysis-overlay-placeholder {
    padding: 20px;
    color: #93a0b4;
}

/* ---------- Sdílení / seznamy ---------- */

.analysis-share {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.analysis-share__card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    background: var(--card);
    display: grid;
    gap: 12px;
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease;
}

.analysis-share__card:hover {
    border-color: var(--accent-a);
}

.analysis-card-summary {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    box-shadow: none;
    color: var(--txt);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    font-weight: 600;
}

.analysis-card-summary:hover {
    border-color: var(--accent-a);
    background: var(--card-2);
}

.analysis-card-summary-main {
    min-width: 0;
    display: grid;
    gap: 6px;
    text-align: left;
}

.analysis-card-summary-main strong {
    font-size: 0.96rem;
    color: var(--txt);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Knihovna uploadů ---------- */

.upload-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.upload-stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 14px 16px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 3px;
}

.upload-stat strong {
    color: var(--txt);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.1;
}

.upload-stat span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.upload-library__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.upload-library__head h2 {
    margin-bottom: 6px;
}

.upload-library__search {
    width: min(340px, 100%);
    flex: 0 0 min(340px, 100%);
}

.upload-library {
    display: grid;
    gap: 14px;
}

.upload-card {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 14px;
    box-shadow: var(--shadow);
}

.upload-card__media {
    aspect-ratio: 16 / 9;
    width: 100%;
    min-height: 148px;
    border: 1px solid #141923;
    border-radius: var(--radius-sm);
    background: #0e131b;
    overflow: hidden;
}

.upload-card__media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.upload-card__placeholder {
    min-height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px;
    color: #d9e3f4;
    text-align: center;
}

.upload-card__placeholder strong {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.upload-card__placeholder span {
    color: #9da9bd;
    font-size: 0.78rem;
    line-height: 1.45;
}

.upload-card__body {
    min-width: 0;
    display: grid;
    gap: 11px;
}

.upload-card__title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.upload-card__title-row h3 {
    margin: 0;
    color: var(--txt);
    font-size: 1rem;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.upload-status {
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--card-2);
}

.upload-status--ready {
    color: #176440;
    border-color: #bfe6cd;
    background: #e9f7ef;
}

.upload-status--processing,
.upload-status--created {
    color: #7a4a00;
    border-color: #f3d28a;
    background: #fff7df;
}

.upload-status--failed {
    color: #8d1d2f;
    border-color: #f1c4cb;
    background: #fdecef;
}

.upload-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.upload-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.upload-progress {
    height: 7px;
    border-radius: 999px;
    background: #e5eaf2;
    overflow: hidden;
}

.upload-progress span {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}

.upload-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.upload-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.analysis-card-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.analysis-card-summary-toggle {
    color: var(--accent-a-dark);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.analysis-share__details {
    display: grid;
    gap: 8px;
}

.analysis-share__details.is-hidden {
    display: none;
}

.analysis-share__code {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-a-dark);
    font-weight: 700;
}

.analysis-share__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--txt);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.analysis-share__copy:hover {
    background: var(--accent-soft);
    border-color: var(--accent-a);
}

.text-input {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--txt);
    padding: 10px 12px;
    font-size: 16px;
}

.is-hidden {
    display: none !important;
}

/* ---------- Taktická tabule (cvičení) ---------- */

.pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow);
    user-select: none;
    -webkit-user-select: none;
    container-type: inline-size;
}

.pitch--editor {
    touch-action: none;
    cursor: crosshair;
}

.pitch__field {
    position: absolute;
    inset: 0;
}

.pitch__field svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pitch__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pitch__layer {
    position: absolute;
    inset: 0;
}

.pitch--editor.is-drawing {
    cursor: crosshair;
}

.pitch.is-playing .pitch-token__del {
    display: none;
}

.pitch-token {
    position: absolute;
    transform: translate(-50%, -50%);
    width: clamp(16px, 4.2cqw, 32px);
    height: clamp(16px, 4.2cqw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(9px, 2.2cqw, 14px);
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    touch-action: none;
}

.pitch--editor .pitch-token {
    cursor: grab;
}

.pitch--editor .pitch-token:active {
    cursor: grabbing;
}

.pitch-token--player {
    background: var(--accent-a);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pitch-token--goalie {
    background: #15a85c;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pitch-token--coach {
    background: #f97316;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pitch-token--ball {
    width: clamp(11px, 3cqw, 20px);
    height: clamp(11px, 3cqw, 20px);
    background: radial-gradient(circle at 35% 30%, #ffffff, #d7dee8);
    border: 2px solid #0b1622;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.pitch-token--barrier {
    width: clamp(40px, 12cqw, 92px);
    height: clamp(8px, 2.4cqw, 15px);
    border-radius: 3px;
    background: repeating-linear-gradient(45deg, #e2e8f0 0 6px, #cbd5e1 6px 12px);
    border: 1.5px solid #475569;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.pitch-token--cone {
    background: transparent;
}

.pitch-token--cone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    width: 0;
    height: 0;
    border-left: clamp(6px, 1.6cqw, 11px) solid transparent;
    border-right: clamp(6px, 1.6cqw, 11px) solid transparent;
    border-bottom: clamp(11px, 2.8cqw, 19px) solid #f59e0b;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.pitch-token__label {
    pointer-events: none;
    min-width: 10px;
    text-align: center;
    outline: none;
}

.pitch--editor .pitch-token--player .pitch-token__label {
    pointer-events: auto;
}

.pitch-token__del {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: var(--danger-a);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    text-transform: none;
    letter-spacing: 0;
}

.pitch-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pitch-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.8rem;
}

.pitch-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pitch-legend i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.legend-player {
    background: var(--accent-a);
}

.legend-goalie {
    background: #15a85c;
}

.legend-coach {
    background: #f97316;
}

.legend-ball {
    background: radial-gradient(circle at 35% 30%, #ffffff, #d7dee8);
    border: 1px solid #0b1622;
}

.legend-cone {
    width: 0 !important;
    height: 0 !important;
    border-radius: 0 !important;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 12px solid #f59e0b;
}

.legend-barrier {
    width: 18px !important;
    height: 7px !important;
    border-radius: 2px !important;
    background: repeating-linear-gradient(45deg, #e2e8f0 0 4px, #cbd5e1 4px 8px);
    border: 1px solid #475569;
}

.pitch-timeline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pitch-timeline input[type="range"] {
    flex: 1;
    min-width: 160px;
    accent-color: var(--accent-a);
    background: transparent;
    border: none;
    padding: 0;
}

.pitch-step {
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pitch-play {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--accent-a);
    color: #fff;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pitch-frames {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pitch-frames [data-pitch-step] {
    font-size: 0.82rem;
    color: var(--txt);
    min-width: 96px;
    text-align: center;
    font-weight: 600;
}

.exercise-attach {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--card-2);
}

.exercise-attach__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
}

.exercise-attach__row:hover {
    border-color: var(--accent-a);
}

.exercise-attach__row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accent-a);
}

.exercise-attach__row span {
    color: var(--txt);
    font-size: 0.9rem;
}

.exercise-attach__row small {
    color: var(--muted);
}

.exercise-block {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--card-2);
    display: grid;
    gap: 10px;
}

/* ---------- Hráčské rozbalovací bloky ---------- */

.player-analyses {
    display: grid;
    gap: 12px;
    margin-bottom: 6px;
}

.player-group__title {
    margin: 20px 0 6px;
    color: var(--txt);
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-left: 3px solid var(--accent-a);
    padding-left: 12px;
}

#analysis-cards > .player-group__title:first-child {
    margin-top: 0;
}

.player-analysis {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.player-analysis__head,
.player-exercises__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    color: var(--txt);
    transition: background 0.15s ease;
}

.player-analysis__head {
    padding: 15px 17px;
}

.player-analysis__head:hover,
.player-exercises__head:hover {
    background: var(--card-2);
}

.player-analysis__main {
    display: grid;
    gap: 5px;
    text-align: left;
    min-width: 0;
}

.player-analysis__main strong {
    font-size: 1.04rem;
    color: var(--txt);
}

.player-analysis__meta {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.player-analysis__toggle {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-a-dark);
    white-space: nowrap;
    font-weight: 700;
}

.player-analysis__body {
    padding: 0 17px 17px;
    display: grid;
    gap: 14px;
}

.player-exercises {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    overflow: hidden;
}

.player-exercises__head {
    padding: 12px 14px;
    color: var(--txt);
    font-weight: 700;
}

.player-exercises__body {
    padding: 0 14px 14px;
    display: grid;
    gap: 12px;
}

/* ---------- Hráčská část (viewer) ---------- */

.analysis-group {
    display: grid;
    gap: 16px;
}

.analysis-group__title {
    margin: 8px 0 0;
    color: var(--txt);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.analysis-video-frame {
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
    background: #000;
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-strong);
}

.analysis-video-frame iframe,
.analysis-video-frame video,
.analysis-yt-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.analysis-video-frame:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
}

.analysis-video-frame:fullscreen video,
.analysis-video-frame:fullscreen iframe,
.analysis-video-frame:fullscreen .analysis-yt-player {
    width: 100%;
    height: 100%;
}

.analysis-player-topbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.analysis-player-topbar span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(12, 18, 28, 0.68);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.analysis-player-state {
    font-variant-numeric: tabular-nums;
}

.analysis-player-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(12, 18, 28, 0.78);
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.analysis-player-center:hover,
.analysis-player-center:focus-visible {
    background: rgba(37, 99, 235, 0.86);
    transform: translate(-50%, -50%) scale(1.04);
}

.analysis-card.is-playing .analysis-player-center {
    opacity: 0;
    pointer-events: none;
}

.analysis-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--card-2);
}

.analysis-controls--overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(12, 18, 28, 0.86);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.analysis-control__play {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--accent-a);
    color: #fff;
    min-width: 70px;
    height: 36px;
    padding: 0 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78rem;
}

.analysis-control__seek {
    flex: 1;
    min-width: 180px;
    accent-color: var(--accent-a);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.analysis-control__time {
    min-width: 92px;
    font-size: 0.76rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.analysis-controls--overlay .analysis-control__time {
    color: rgba(255, 255, 255, 0.78);
}

.analysis-control__seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-a) var(--seek-progress, 0%), rgba(255, 255, 255, 0.24) var(--seek-progress, 0%));
}

.analysis-control__seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent-a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.analysis-control__seek::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.analysis-control__seek::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent-a);
}

.analysis-card h3 {
    margin: 0 0 10px;
    color: var(--txt);
    font-size: 1.04rem;
    font-weight: 700;
}

.analysis-card h4 {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.analysis-notes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.analysis-notes li {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 11px 14px;
    background: var(--card-2);
}

.analysis-notes li.is-clickable {
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.analysis-notes li.is-clickable:hover {
    border-color: var(--accent-b);
    background: #eaf3ff;
}

.note-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 8px;
}

.note-tag--positive {
    background: #e6f7ec;
    color: var(--pos);
    border: 1px solid #bfe6cd;
}

.note-tag--negative {
    background: #fdecef;
    color: var(--neg);
    border: 1px solid #f1c4cb;
}

.note-time {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-b);
}

.note-text {
    display: block;
    margin-top: 4px;
    color: var(--txt);
    line-height: 1.55;
}

/* ---------- Tabulka hráčů / trenérů ---------- */

.player-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.player-table th,
.player-table td {
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.player-table th {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

.player-table td strong {
    color: var(--txt);
}

.player-key {
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-a-dark);
    white-space: nowrap;
}

.inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border: 1px solid #c7dbfb;
}

/* ---------- Responsivita ---------- */

@media (max-width: 960px) {
    .analysis-share {
        grid-template-columns: 1fr;
    }

    .upload-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .upload-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analysis-cards {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }

    .analysis-card {
        min-width: 86vw;
        scroll-snap-align: center;
    }
}

@media (max-width: 760px) {
    body.bg-dashboard {
        padding:
            calc(12px + env(safe-area-inset-top))
            12px
            calc(16px + env(safe-area-inset-bottom))
            12px;
    }

    .form-footer > * {
        flex: 1;
    }

    .analysis-overlay-row {
        grid-template-columns: 1fr;
    }

    .analysis-card-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .analysis-video__section-head > .button-ghost {
        width: 100%;
    }

    .player-table,
    .player-table tbody,
    .player-table tr,
    .player-table td {
        display: block;
        width: 100%;
    }

    .player-table thead {
        display: none;
    }

    .player-table tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        padding: 8px;
        background: var(--card-2);
    }

    .player-table td {
        border: none;
        padding: 6px 8px;
    }

    .upload-library__head {
        align-items: stretch;
        flex-direction: column;
    }

    .upload-library__search {
        width: 100%;
        flex-basis: auto;
    }

    .upload-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .analysis-note-row {
        grid-template-columns: 1fr;
    }

    .analysis-note-row .note-remove {
        width: 100%;
    }

    .upload-stats {
        grid-template-columns: 1fr;
    }

    .upload-card {
        padding: 10px;
    }

    .upload-card__title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .upload-card .inline-actions,
    .upload-card .inline-actions form,
    .upload-card .inline-actions button {
        width: 100%;
    }
}

/* ============================================================
   Horní menu (sticky dashboard nav)
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: min(1240px, 100%);
    margin: 0 auto 6px;
    border: 1px solid rgba(221, 227, 236, 0.9);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--shadow-md);
    animation: slideDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px clamp(12px, 2vw, 16px);
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--txt);
    text-decoration: none;
    margin-right: auto;
}

.topbar__logo-img {
    height: 26px;
    width: auto;
    display: block;
}

.topbar__brandsub {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid var(--line-strong);
}

.auth-logo {
    display: block;
    height: 36px;
    width: auto;
    margin: 0 auto 14px;
}

.foot-logo {
    height: 22px;
    width: auto;
    opacity: 0.92;
}

.topbar__logo {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    flex: 0 0 auto;
    overflow: hidden;
}

.topbar__logo::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 9px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.topbar__logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sheen 3.6s ease-in-out infinite;
}

.topbar__menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.topbar__link {
    position: relative;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.84rem;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.topbar__link:hover {
    color: var(--txt);
    background: var(--card-2);
}

.topbar__link::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
}

.topbar__link:hover::after {
    transform: scaleX(0.5);
}

.topbar__link.is-active {
    color: var(--accent-a-dark);
    background: var(--accent-soft);
}

.topbar__link.is-active::after {
    transform: scaleX(0);
}

.topbar__link--logout {
    color: var(--danger-a);
}

.topbar__link--logout::after {
    background: var(--danger-a);
}

.topbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.topbar__toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--txt);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.topbar.is-open .topbar__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.topbar.is-open .topbar__toggle span:nth-child(2) {
    opacity: 0;
}

.topbar.is-open .topbar__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Animace
   ============================================================ */

@keyframes shimmer {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

@keyframes sheen {
    0%, 100% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard > *,
.viewer > * {
    animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dashboard > *:nth-child(1) { animation-delay: 0.04s; }
.dashboard > *:nth-child(2) { animation-delay: 0.10s; }
.dashboard > *:nth-child(3) { animation-delay: 0.16s; }
.dashboard > *:nth-child(4) { animation-delay: 0.22s; }
.dashboard > *:nth-child(5) { animation-delay: 0.28s; }
.dashboard > *:nth-child(n+6) { animation-delay: 0.34s; }

button,
.cta,
.button-ghost,
.button-danger {
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

button:hover,
.cta:hover,
.button-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

.button-danger:hover {
    box-shadow: 0 6px 16px rgba(219, 58, 84, 0.22);
}

@media (min-width: 761px) and (max-width: 1040px) {
    .topbar__brandsub {
        display: none;
    }

    .topbar__link {
        padding: 8px 9px;
        font-size: 0.78rem;
    }
}

.analysis-share__card,
.player-analysis,
.exercise-block {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.analysis-share__card:hover,
.player-analysis:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 760px) {
    .topbar__toggle {
        display: flex;
    }

    .topbar__menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--card);
        box-shadow: var(--shadow-md);
        display: none;
    }

    .topbar {
        position: sticky;
    }

    .topbar__inner {
        position: relative;
    }

    .topbar.is-open .topbar__menu {
        display: flex;
        animation: fadeUp 0.2s ease both;
    }

    .topbar__link {
        padding: 11px 12px;
        font-size: 0.92rem;
    }

    .topbar__link::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .matrix,
    .dashboard__header::before,
    .topbar__logo::after,
    .topbar,
    .dashboard > *,
    .viewer > * {
        animation: none !important;
    }

    button:hover,
    .cta:hover,
    .analysis-share__card:hover,
    .player-analysis:hover {
        transform: none;
    }
}

/* ============================================================
   Úvodní stránka (landing)
   ============================================================ */

.landing-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-main {
    width: min(1120px, 100%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(48px, 7vw, 92px);
    padding: clamp(24px, 5vw, 60px) 4px clamp(40px, 6vw, 70px);
}

.landing-main > section {
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-main > section:nth-child(1) { animation-delay: 0.05s; }
.landing-main > section:nth-child(2) { animation-delay: 0.14s; }
.landing-main > section:nth-child(3) { animation-delay: 0.22s; }
.landing-main > section:nth-child(4) { animation-delay: 0.30s; }

.cta--lg {
    padding: 13px 22px;
    font-size: 0.82rem;
}

/* Hero */

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}

.hero__badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border: 1px solid #c7dbfb;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__title {
    margin: 16px 0 0;
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 800;
    color: var(--txt);
}

@supports (-webkit-background-clip: text) {
    .hero__title {
        background: linear-gradient(120deg, #10192b 30%, var(--accent-a) 90%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.hero__sub {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.65;
    max-width: 54ch;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}

.hero__hint {
    margin: 14px 0 0;
    color: var(--muted-2);
    font-size: 0.84rem;
}

/* Hero vizuál */

.hero__visual {
    display: flex;
    justify-content: center;
}

.hero-card {
    position: relative;
    width: min(420px, 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 24px 60px rgba(27, 35, 48, 0.14);
    padding: 16px;
    animation: floaty 6s ease-in-out infinite;
}

.hero-card__screen {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 30% 20%, #1f3350, #0c1626);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero-play {
    position: relative;
    z-index: 2;
    width: 0;
    height: 0;
    border-left: 26px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    margin-left: 8px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.hero-pulse {
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.55);
    animation: pulse 2.6s ease-out infinite;
}

.hero-pulse--2 {
    animation-delay: 1.3s;
}

.hero-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--card-2);
    border: 1px solid var(--line);
    margin: 14px 4px 4px;
    overflow: hidden;
}

.hero-bar span {
    display: block;
    height: 100%;
    width: 38%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
    animation: progress 5s ease-in-out infinite;
}

.hero-chip {
    position: absolute;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--card);
    box-shadow: 0 10px 24px rgba(27, 35, 48, 0.16);
    border: 1px solid var(--line);
    animation: floaty 5s ease-in-out infinite;
}

.hero-chip--pos {
    left: -14px;
    top: 30%;
    color: var(--pos);
    border-left: 3px solid var(--pos);
    animation-delay: 0.5s;
}

.hero-chip--neg {
    right: -14px;
    top: 58%;
    color: var(--neg);
    border-left: 3px solid var(--neg);
    animation-delay: 1.1s;
}

/* Features */

.features__title,
.cta-band h2 {
    margin: 0 0 26px;
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--txt);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.feature {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 22px;
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.feature:hover {
    transform: translateY(-3px);
    border-color: var(--accent-a);
    box-shadow: var(--shadow-md);
}

.feature__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    margin-bottom: 14px;
}

.feature__icon svg {
    width: 24px;
    height: 24px;
}

.feature h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--txt);
}

.feature p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Partner */

.partner-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: clamp(18px, 4vw, 42px);
    border: 1px solid #f4c7a8;
    border-radius: 16px;
    padding: clamp(22px, 4vw, 38px);
    background:
        radial-gradient(520px 220px at 100% 0%, rgba(255, 129, 84, 0.14), transparent 72%),
        linear-gradient(135deg, #fff 0%, #fff8f4 100%);
    box-shadow: var(--shadow);
}

.partner-strip__copy {
    display: grid;
    gap: 10px;
}

.partner-strip__eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #f2b98f;
    background: #fff1e8;
    color: #a74322;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 11px;
}

.partner-strip h2 {
    margin: 0;
    max-width: 720px;
    color: var(--txt);
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.18;
    font-weight: 800;
}

.partner-strip p {
    margin: 0;
    max-width: 68ch;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.partner-card {
    justify-self: end;
    width: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(167, 67, 34, 0.18);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 34px rgba(167, 67, 34, 0.12);
    color: #a74322;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.partner-card:hover {
    transform: translateY(-2px);
    border-color: #e88956;
    box-shadow: 0 20px 42px rgba(167, 67, 34, 0.16);
}

.partner-card span {
    color: #a74322;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.partner-card img {
    width: min(138px, 100%);
    height: auto;
    display: block;
}

/* CTA band */

.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(22px, 4vw, 38px);
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(37, 99, 235, 0.1), transparent 60%),
        var(--card);
    box-shadow: var(--shadow);
}

.cta-band h2 {
    margin: 0 0 6px;
    text-align: left;
}

.cta-band p {
    margin: 0;
    color: var(--muted);
    max-width: 52ch;
}

.cta-band__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Footer */

.landing-foot {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 22px 6px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}

.landing-foot span:first-child {
    font-weight: 700;
    color: var(--txt);
}

/* Animace landingu */

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes pulse {
    0% { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.1); opacity: 0; }
}

@keyframes progress {
    0% { width: 12%; }
    50% { width: 72%; }
    100% { width: 12%; }
}

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

    .partner-strip {
        grid-template-columns: 1fr;
    }

    .partner-card {
        justify-self: stretch;
        min-height: 150px;
    }

    .hero__visual {
        order: -1;
    }

    .hero-card {
        width: min(360px, 100%);
    }
}

@media (max-width: 520px) {
    .landing-nav__actions .topbar__link {
        display: none;
    }

    .topbar__brandsub {
        display: none;
    }

    .hero-chip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card,
    .hero-chip,
    .hero-pulse,
    .hero-bar span,
    .landing-main > section {
        animation: none !important;
    }
}

/* ============================================================
   Finální leštění — detaily
   ============================================================ */

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(37, 99, 235, 0.16);
}

/* Jemné scrollbary */
* {
    scrollbar-width: thin;
    scrollbar-color: #c6cfdb transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c9d2de;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aab6c6;
}

/* Viditelný focus pro klávesnici (inputy mají vlastní) */
a:focus-visible,
button:focus-visible,
.button-ghost:focus-visible,
.cta:focus-visible {
    outline: 2px solid var(--accent-a);
    outline-offset: 2px;
}

/* Časy a kódy zarovnaně (tabulková čísla) */
.note-time,
.analysis-control__time,
.pitch-step,
.player-key,
.analysis-share__code {
    font-variant-numeric: tabular-nums;
}

/* Řádky tabulek reagují na hover */
.player-table tbody tr {
    transition: background 0.12s ease;
}

.player-table tbody tr:hover {
    background: #f7f9fd;
}

/* Výraznější zdvih karet při najetí */
.analysis-share__card:hover,
.player-analysis:hover,
.feature:hover {
    box-shadow: var(--shadow-lg);
}

/* Prázdné stavy — jemnější a vzdušnější */
.analysis-videos__empty {
    border-width: 1.5px;
    background:
        radial-gradient(300px 80px at 50% 0%, rgba(37, 99, 235, 0.04), transparent 70%),
        var(--card-2);
}

/* Hlavičky sekcí s jemnou linkou */
.test-management__card > h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

/* Sdílený kód jako "kupón" */
.analysis-share__code,
.player-key {
    font-family: 'Montserrat', monospace;
}

/* Plynulejší přechod rozbalování hráčských bloků */
.player-analysis__body,
.player-exercises__body {
    animation: fadeUp 0.25s ease both;
}

.player-analysis__body.is-hidden,
.player-exercises__body.is-hidden {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .player-analysis__body,
    .player-exercises__body {
        animation: none;
    }
}

/* ============================================================
   Video timeline s markery + rychlost + aktivní poznámka
   ============================================================ */

.video-timeline {
    padding: 2px 2px 4px;
}

.video-timeline--editor {
    margin-top: 2px;
}

.video-timeline__track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--card-2);
    border: 1px solid var(--line);
    cursor: pointer;
    margin: 8px 6px 10px;
}

.video-timeline__track:hover {
    border-color: var(--line-strong);
}

.video-timeline__progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
    opacity: 0.85;
    pointer-events: none;
}

.video-timeline__marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.35);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.12s ease;
}

.video-timeline__marker:hover {
    transform: translate(-50%, -50%) scale(1.35);
    z-index: 3;
}

.video-timeline__marker--pos {
    background: #22c55e;
}

.video-timeline__marker--neg {
    background: #ef4444;
}

.video-timeline__marker--ovl {
    border-radius: 3px;
    background: var(--accent-b);
    transform: translate(-50%, -50%) rotate(45deg);
}

.video-timeline__marker--ovl:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
}

.analysis-control__speed {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--txt);
    height: 36px;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.72rem;
    box-shadow: none;
    min-width: 46px;
    font-variant-numeric: tabular-nums;
}

.analysis-control__skip,
.analysis-control__mute {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--txt);
    min-width: 44px;
    height: 36px;
    padding: 0 9px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.analysis-control__speed:hover {
    background: var(--card-2);
    border-color: var(--accent-a);
}

.analysis-control__speed.is-slow {
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border-color: #c7dbfb;
}

.analysis-control__fullscreen {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--txt);
    min-width: 38px;
    height: 36px;
    padding: 0 10px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.analysis-controls--overlay .analysis-control__speed,
.analysis-controls--overlay .analysis-control__skip,
.analysis-controls--overlay .analysis-control__mute,
.analysis-controls--overlay .analysis-control__fullscreen {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.analysis-controls--overlay .analysis-control__speed:hover,
.analysis-controls--overlay .analysis-control__skip:hover,
.analysis-controls--overlay .analysis-control__mute:hover,
.analysis-controls--overlay .analysis-control__fullscreen:hover {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.18);
}

.analysis-controls--overlay .analysis-control__speed.is-slow {
    background: rgba(91, 75, 219, 0.42);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 680px) {
    .analysis-controls {
        gap: 8px;
        padding: 8px;
    }

    .analysis-controls--overlay {
        left: 8px;
        right: 8px;
        bottom: 8px;
        flex-wrap: wrap;
    }

    .analysis-player-topbar {
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .analysis-player-topbar span {
        min-height: 24px;
        padding: 0 8px;
        font-size: 0.64rem;
    }

    .analysis-player-center {
        width: 64px;
        height: 64px;
        font-size: 0.72rem;
    }

    .analysis-control__play {
        min-width: 58px;
        height: 34px;
        padding: 0 10px;
        font-size: 0.72rem;
    }

    .analysis-control__seek {
        min-width: 90px;
        flex-basis: 100%;
        order: 10;
    }

    .analysis-control__time {
        min-width: 66px;
        font-size: 0.68rem;
    }

    .analysis-control__skip,
    .analysis-control__mute,
    .analysis-control__speed,
    .analysis-control__fullscreen {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
    }
}

.analysis-notes li.is-current {
    border-color: var(--accent-a);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Smyčka přehrávání cvičení */
.pitch-loop {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--txt);
    padding: 8px 13px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: none;
    white-space: nowrap;
}

.pitch-loop:hover {
    background: var(--card-2);
    border-color: var(--accent-a);
}

.pitch-loop.is-on {
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border-color: #c7dbfb;
}

/* ============================================================
   Zhlédnuto, zpětná vazba hráče, návod
   ============================================================ */

.seen-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.seen-pill--yes {
    background: #e6f7ec;
    color: var(--pos);
    border: 1px solid #bfe6cd;
}

.seen-pill--no {
    background: var(--card-2);
    color: var(--muted);
    border: 1px dashed var(--line-strong);
}

.fb-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border: 1px solid #c7dbfb;
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 0.8rem;
}

.fb-note--question {
    border-color: #f6c9a8;
    background: #fdf1e5;
    color: #9a4b12;
}

.fb-note span {
    color: var(--txt);
    font-weight: 500;
}

/* Formulář zpětné vazby (hráč) */
.feedback-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-2);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.feedback-box__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.feedback-form {
    display: grid;
    gap: 10px;
}

.feedback-reactions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.feedback-pill {
    position: relative;
    cursor: pointer;
}

.feedback-pill span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--txt);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.feedback-pill:hover span {
    border-color: var(--accent-a);
}

.feedback-pill input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent-a);
    color: var(--accent-a-dark);
    transform: translateY(-1px);
}

.feedback-pill input:focus-visible + span {
    outline: 2px solid var(--accent-a);
    outline-offset: 2px;
}

.feedback-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-row input {
    flex: 1;
    min-width: 200px;
}

/* Návod (tutorial) */
.tut details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    margin-bottom: 10px;
    overflow: hidden;
}

.tut details[open] {
    border-color: var(--accent-a);
    box-shadow: var(--shadow);
}

.tut summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    font-weight: 700;
    color: var(--txt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: background 0.15s ease;
}

.tut summary::-webkit-details-marker {
    display: none;
}

.tut summary::after {
    content: "▾";
    color: var(--muted);
    transition: transform 0.2s ease;
}

.tut details[open] summary::after {
    transform: rotate(180deg);
    color: var(--accent-a-dark);
}

.tut summary:hover {
    background: var(--card-2);
}

.tut-body {
    padding: 2px 18px 16px;
    color: var(--txt);
}

.tut-body ul,
.tut-body ol {
    margin: 8px 0 10px;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    line-height: 1.6;
    font-size: 0.92rem;
}

.tut-steps {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 12px;
    line-height: 1.6;
    font-size: 0.94rem;
    counter-reset: none;
}

.tut-steps li::marker {
    color: var(--accent-a-dark);
    font-weight: 700;
}

.tut-tips {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 9px;
    line-height: 1.6;
    font-size: 0.92rem;
}

.tut-tips li::marker {
    color: var(--accent-a);
}

/* ============================================================
   Průvodce aplikací (tour) + poznámky trenérů
   ============================================================ */

.tour {
    display: grid;
    gap: 14px;
}

.tour__viewport {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-2);
    padding: clamp(16px, 3vw, 24px);
    min-height: 300px;
}

.tour__step {
    display: none;
}

.tour__step.is-active {
    display: block;
    animation: fadeUp 0.3s ease both;
}

.tour__step h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--txt);
}

.tour__step > p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.94rem;
}

.tour__demo {
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    padding: 16px;
    display: grid;
    gap: 12px;
    justify-items: start;
}

.tour__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tour__dots {
    display: flex;
    gap: 6px;
    margin-inline: auto;
}

.tour__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: var(--line-strong);
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.tour__dot:hover {
    background: var(--muted);
    transform: scale(1.2);
}

.tour__dot.is-active {
    background: var(--accent-a);
    transform: scale(1.25);
}

.tour__count {
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Demo prvky uvnitř průvodce */
.demo-static {
    pointer-events: none;
}

.demo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.demo-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.demo-flow__box {
    border: 1px solid var(--line-strong);
    background: var(--card);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--txt);
    box-shadow: var(--shadow);
}

.demo-flow__arrow {
    color: var(--accent-a);
    font-weight: 700;
}

.demo-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--muted);
    padding: 9px 12px;
    min-width: 160px;
    font-size: 0.9rem;
}

.demo-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    padding: 9px 12px;
    width: 100%;
}

.demo-note__text {
    color: var(--txt);
    font-size: 0.9rem;
}

.demo-note .note-tag {
    margin-top: 0;
}

.demo-pitch {
    width: min(380px, 100%);
    background:
        linear-gradient(180deg, #123a57, #0c2236);
}

/* Poznámky trenérů */
.notes-list {
    display: grid;
    gap: 12px;
}

.note-card {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-a);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow);
}

.note-card--foreign {
    border-left-color: var(--line-strong);
}

.note-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.note-card__meta strong {
    color: var(--txt);
    font-size: 0.9rem;
}

.note-card__body {
    margin: 0;
    color: var(--txt);
    line-height: 1.6;
    font-size: 0.94rem;
}

/* Střední šířky: kompaktnější menu, ať se vejde všech 7 položek */
@media (min-width: 761px) and (max-width: 1120px) {
    .topbar__link {
        padding: 8px 9px;
        font-size: 0.78rem;
    }

    .topbar__brandsub {
        display: none;
    }

    .topbar__inner {
        gap: 10px;
    }
}

/* ============================================================
   Klipy, tagy událostí, statistiky
   ============================================================ */

.video-timeline__band {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(37, 99, 235, 0.35);
    cursor: pointer;
    z-index: 1;
    transition: background 0.15s ease;
}

.video-timeline__band:hover {
    background: rgba(37, 99, 235, 0.3);
}

.clip-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.clip-chips__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.clip-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--txt);
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.clip-chip small {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.clip-chip:hover {
    border-color: var(--accent-a);
    background: var(--card-2);
}

.clip-chip.is-active {
    background: var(--accent-soft);
    border-color: var(--accent-a);
    color: var(--accent-a-dark);
}

.note-tag--event {
    background: var(--accent-soft);
    color: var(--accent-a-dark);
    border: 1px solid #c7dbfb;
}

.tag-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    padding: 9px 12px;
}

.tag-stats__item {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--card);
    border: 1px solid var(--line-strong);
    color: var(--txt);
}

.tag-stats__item--pos {
    background: #e6f7ec;
    color: var(--pos);
    border-color: #bfe6cd;
}

.tag-stats__item--neg {
    background: #fdecef;
    color: var(--neg);
    border-color: #f1c4cb;
}

/* Řádek klipu v editoru */
.analysis-clip-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr minmax(150px, 190px) minmax(150px, 190px) auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    padding: 9px;
}

.analysis-video__clips {
    display: grid;
    gap: 8px;
}

.analysis-clip-row .clip-remove {
    min-width: 40px;
    padding-inline: 10px;
}

@media (max-width: 720px) {
    .analysis-clip-row {
        grid-template-columns: 1fr;
    }

    .analysis-clip-row .clip-remove {
        width: 100%;
    }
}

/* Poznámky v editoru mají nově 5 sloupců (čas, hodnocení, tag, text, ×) */
.analysis-note-row {
    grid-template-columns: minmax(150px, 185px) minmax(115px, 140px) minmax(115px, 150px) 1fr auto;
}

@media (max-width: 900px) {
    .analysis-note-row {
        grid-template-columns: 1fr 1fr;
    }

    .analysis-note-row > div:nth-child(4) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .analysis-note-row {
        grid-template-columns: 1fr;
    }
}

/* Právní stránky + odkazy v patičce */
.landing-foot__links {
    display: inline-flex;
    gap: 14px;
}

.landing-foot__links a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}

.landing-foot__links a:hover {
    color: var(--accent-a-dark);
}

.legal h2 {
    margin-top: 22px;
    font-size: 1rem;
}

.legal h2:first-child {
    margin-top: 0;
}

.legal p,
.legal li {
    color: var(--txt);
    line-height: 1.65;
    font-size: 0.92rem;
}

.legal ul {
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

/* Ukázkový režim (demo rozbor z hlavní stránky) */
.demo-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid #c7dbfb;
    border-left: 4px solid var(--accent-a);
    border-radius: var(--radius);
    background:
        radial-gradient(400px 120px at 100% 0%, rgba(37, 99, 235, 0.08), transparent 70%),
        var(--accent-soft);
    padding: 14px 18px;
    animation: fadeUp 0.5s ease both;
}

.demo-banner__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.demo-banner__text strong {
    color: var(--accent-a-dark);
    font-size: 0.95rem;
}

.demo-banner__text span {
    color: var(--txt);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ============================================================
   Studio editor videa
   ============================================================ */

.studio-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 18px;
    background: rgba(9, 13, 20, 0.78);
}

.studio-modal.is-hidden {
    display: none;
}

.studio-modal__shell {
    width: min(1480px, 100%);
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 248px;
    border-radius: var(--radius);
    border: 1px solid #2a3039;
    background: #101318;
    color: #e8ebf0;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.studio-modal__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #181c23;
    border-bottom: 1px solid #2a3039;
}

.studio-modal__topbar strong {
    display: block;
    font-size: 0.84rem;
    color: #fff;
}

.studio-modal__topbar span {
    color: #8b94a3;
    font-size: 0.78rem;
}

.studio-modal__topbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.studio-modal__main {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
}

.studio-monitor-wrap {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: radial-gradient(900px 480px at 50% 0%, #161b23, #101318);
}

.studio-monitor {
    position: relative;
    width: min(100%, 980px);
    aspect-ratio: 16 / 9;
    max-height: calc(100% - 52px);
    border-radius: 8px;
    border: 1px solid #363d49;
    background: #000;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48);
}

.studio-video-host,
.studio-video-host video,
.studio-video-host iframe,
.studio-video-host > div:not(.studio-placeholder) {
    width: 100%;
    height: 100%;
}

.studio-video-host video,
.studio-video-host iframe {
    display: block;
    object-fit: contain;
    background: #000;
}

#studio-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.studio-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #8b94a3;
    text-align: center;
}

.studio-transport,
.studio-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.studio-time {
    border: 1px solid #2a3039;
    border-radius: 6px;
    background: #181c23;
    padding: 6px 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.studio-inspector {
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #2a3039;
    background: #181c23;
    overflow-y: auto;
}

.studio-inspector h3 {
    margin: 0 0 8px;
    color: #8b94a3;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.studio-inspector label {
    color: #8b94a3;
}

.studio-inspector input,
.studio-inspector textarea,
.studio-inspector select,
.studio-tools input {
    background: #12151b;
    color: #e8ebf0;
    border-color: #363d49;
}

.studio-inspector .studio-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.studio-hint {
    color: #8b94a3;
    font-size: 0.78rem;
    line-height: 1.55;
}

.studio-timeline {
    min-height: 0;
    background: #181c23;
    border-top: 1px solid #2a3039;
}

.studio-tools {
    padding: 8px 12px;
    border-bottom: 1px solid #2a3039;
}

.studio-tools input {
    flex: 1 1 220px;
    min-width: 180px;
}

.studio-timeline__body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    height: calc(100% - 53px);
    min-height: 0;
}

.studio-track-labels {
    border-right: 1px solid #2a3039;
}

.studio-track-labels > div {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid #2a3039;
    color: #8b94a3;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-track-labels > div:first-child {
    height: 26px;
}

.studio-track-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.studio-track-inner {
    position: relative;
    height: 100%;
    min-width: 100%;
}

.studio-ruler {
    position: relative;
    height: 26px;
    border-bottom: 1px solid #2a3039;
    cursor: pointer;
}

.studio-ruler__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #363d49;
    color: #8b94a3;
    font-size: 0.58rem;
    padding: 3px 0 0 4px;
}

.studio-track {
    position: relative;
    height: 40px;
    border-bottom: 1px solid #2a3039;
    background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.025) 79px 80px);
}

.studio-item,
.studio-marker {
    position: absolute;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.studio-item {
    top: 6px;
    height: 28px;
    display: flex;
    align-items: center;
    min-width: 16px;
    padding: 0 8px;
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.64rem;
    font-weight: 700;
}

.studio-item--video {
    background: linear-gradient(180deg, #2b6cb0, #1d4e8f);
}

.studio-item--clip {
    background: linear-gradient(180deg, #2563eb, #1e40af);
}

.studio-item--overlay {
    background: linear-gradient(180deg, #d97706, #b45309);
}

.studio-marker {
    top: 12px;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 3px;
}

.studio-marker--positive {
    background: #22c55e;
}

.studio-marker--negative {
    background: #ef4444;
}

.studio-item.is-selected,
.studio-marker.is-selected {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.studio-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 2px solid #0ea5e9;
    z-index: 5;
    pointer-events: none;
}

.studio-playhead::before {
    content: "";
    position: absolute;
    top: 0;
    left: -7px;
    border: 7px solid transparent;
    border-top: 9px solid #0ea5e9;
}

@media (max-width: 900px) {
    .studio-modal {
        padding: 0;
    }

    .studio-modal__shell {
        border-radius: 0;
        grid-template-rows: auto minmax(0, 1fr) 280px;
    }

    .studio-modal__main {
        grid-template-columns: 1fr;
    }

    .studio-inspector {
        display: none;
    }
}

/* ============================================================
   Nahrávání videa (Bunny Stream)
   ============================================================ */

.video-source {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.video-source input[type="url"] {
    flex: 1;
    min-width: 0;
}

.video-upload-btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

.video-upload-btn.is-disabled {
    opacity: 0.72;
    border-style: dashed;
}

.video-upload-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    font-size: 0.82rem;
    color: var(--txt);
}

.video-upload-status.has-error {
    border-color: #f1c4cb;
    background: #fdecef;
    color: #8d1d2f;
}

.video-upload-bar {
    flex: 1;
    min-width: 80px;
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.video-upload-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
    transition: width 0.3s ease;
}

.video-upload-text {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    max-width: 55%;
}

.video-upload-cancel {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 4px 9px;
}