/* Gymmerzum – Duolingo dark (navy canvas, ledge gombok) */
:root {
    color-scheme: dark;
    /* Duo dark surfaces */
    --bg: #131F24;
    --bg-card: #1F2C34;
    --bg-elevated: #37464F;
    /* Brand accents (Duo) */
    --neon: #58CC02;
    --duo-green: #58CC02;
    --duo-green-dark: #58A700;
    --duo-green-deep: #58A700;
    --duo-green-light: #89E219;
    --pink: #FF4B4B;
    --blue: #1CB0F6;
    --duo-blue: #1CB0F6;
    --yellow: #FFC800;
    --duo-gold: #FFC800;
    --orange: #FF9600;
    --text: #FFFFFF;
    --text-muted: #AFAFAF;
    --border: #37464F;
    --border-soft: #37464F;
    --shadow-soft: none;
    --shadow-duo: 0 4px 0 #2A373E;
    --glass-bg: #1F2C34;
    --hero-overlay: linear-gradient(to top, rgba(19, 31, 36, 0.96) 0%, rgba(19, 31, 36, 0.45) 55%, rgba(19, 31, 36, 0.2) 100%);
    --graffiti-a: transparent;
    --graffiti-b: transparent;
    --graffiti-c: transparent;
    --graffiti-splash: 0;
    --stats-head-bg: #1F2C34;
    --launch-shade: linear-gradient(135deg, rgba(88, 204, 2, 0.35) 0%, rgba(19, 31, 36, 0.4) 45%, rgba(19, 31, 36, 0.9) 100%);
    --surface-overlay: rgba(19, 31, 36, 0.94);
    --pink-soft: rgba(255, 75, 75, 0.12);
    --neon-soft: rgba(88, 204, 2, 0.14);
    --radius: 16px;
    --nav-h: 96px;
    --touch: 56px;
    --touch-lg: 64px;
    /* Androidon gyakran 0 az inset, miközben a status bar ráül a tartalomra → milky top.
       Minimum ~28px: tartalom LEJJÉBB megy, nincs takaró sáv. */
    --safe-top: max(env(safe-area-inset-top, 0px), 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --vv-bottom: 0px;
    --vv-height: 100dvh;
    --logo-clearance-top: 4.75rem;
    --logo-clearance-left: 7.25rem;
    --font-display: 'Nunito', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, sans-serif;
}

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

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    background: #131F24;
}

/* Mobil: status bar alá ne kerüljön UI (logó/avatar) – ez volt a felső homály */
@media (max-width: 900px) {
    :root {
        --safe-top: max(env(safe-area-inset-top, 0px), 28px);
    }
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
    /* Safe-area EGYSZER: fixed logo + app-main – ne legyen dupla notch-sáv (homály) */
    padding-top: 0;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    max-width: min(480px, 100%);
    margin: 0 auto;
    touch-action: pan-y manipulation;
    -webkit-user-select: none;
    user-select: none;
}

input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
    font-size: 16px !important;
}

.graffiti-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg);
    pointer-events: none;
}

.graffiti-bg::after {
    display: none;
}

/* Typography */
.text-neon { color: var(--neon); }
.text-pink { color: var(--pink); }

h1, h2, h3, .page-title {
    font-family: var(--font-display);
    letter-spacing: 1px;
    font-weight: 400;
}

.page-title { font-size: 1.75rem; }

.section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Buttons – Duo 3D slab */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.85rem 1.25rem;
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    background: var(--bg-elevated);
    color: #fff;
    box-shadow: none;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: translateY(3px);
    border-bottom-width: 0;
}

.btn-neon,
.btn-duo {
    background: var(--duo-green);
    color: #fff;
    border-color: var(--duo-green);
    border-bottom: 4px solid var(--duo-green-dark);
}

.btn-pink {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
    border-bottom: 4px solid #E53030;
}

.btn-outline,
.btn-ghost {
    background: var(--bg-card);
    color: var(--text);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    text-transform: none;
    letter-spacing: 0;
}

.btn-block { width: 100%; }
.btn-lg { padding: 1.1rem 1.5rem; font-size: 1.1rem; min-height: var(--touch); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-xl {
    padding: 1.15rem 1.5rem;
    font-size: 1.15rem;
    min-height: var(--touch-lg);
    font-weight: 700;
    border-radius: 18px;
    gap: 0.75rem;
}
.btn-touch { min-height: var(--touch); font-size: 1.05rem; padding: 1rem 1.25rem; }
.btn-touch-sm { min-height: 48px; padding: 0.75rem 1rem; font-size: 0.95rem; }
.btn-icon-img { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

.btn-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Landing – csak mobil */
.landing { padding: 1.25rem 1.25rem 3rem; }

.landing-hero { text-align: center; padding: 2rem 0; }

.hero-tag { display: flex; gap: 0.5rem; justify-content: center; margin: 1rem 0; }

.tag {
    font-family: var(--font-display);
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 2px;
}

.tag-neon { background: var(--neon); color: #000; transform: rotate(-2deg); }
.tag-pink { background: var(--pink); color: #fff; transform: rotate(2deg); }

.hero-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 0.95;
    margin: 1.5rem 0;
    text-shadow: 3px 3px 0 var(--pink);
}

.hero-sub { color: var(--text-muted); margin-bottom: 2rem; font-size: 1rem; }

.hero-actions { display: flex; flex-direction: column; gap: 0.75rem; }

.features { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-card h3 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 1px; }
.feature-card p { color: var(--text-muted); font-size: 0.9rem; }

/* Auth */
.auth-page {
    min-height: calc(100dvh - var(--safe-top));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem 2rem;
}

.auth-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    margin-top: 1.5rem;
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-link { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-muted); }
.auth-link a { color: var(--neon); text-decoration: none; }

.remember-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.25rem 0 0.85rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
}

.remember-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--neon);
}

.btn-biometric {
    margin-top: 0.75rem;
}

.biometric-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}

.panel-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

.biometric-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.55rem 0 0.65rem;
}

.biometric-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: 0.88rem;
}

.btn-sm {
    padding: 0.35rem 0.65rem !important;
    min-height: auto !important;
    font-size: 0.78rem !important;
}

/* Forms */
.form { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }

.input, .form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 1rem 1.1rem;
    min-height: var(--touch);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
}

.input:focus, .form-group input:focus, .form-group select:focus {
    border-color: var(--neon);
}

.form-row { display: flex; gap: 0.5rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-2 > .form-group { min-width: 0; }

.input-date,
input[type="date"] {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: block;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-form .form-group-date {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.profile-form .input-date {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.95rem;
}

.profile-page {
    overflow-x: hidden;
    max-width: 100%;
}

.onboarding-page {
    overflow-x: hidden;
    max-width: 100%;
    padding-bottom: calc(var(--safe-bottom) + 2rem);
}

.onboarding-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}

.onboarding-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin: 0.75rem 0 0.35rem;
    letter-spacing: 0.02em;
}

.onboarding-lead {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 1rem;
}

.onboarding-missing {
    list-style: none;
    padding: 0.75rem 1rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    background: rgba(255, 0, 110, 0.1);
    border: 1px solid rgba(255, 0, 110, 0.25);
    border-radius: var(--radius);
}

.onboarding-missing li {
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
    background: rgba(255, 0, 110, 0.15);
    color: var(--pink);
    border-radius: 999px;
}

.onboarding-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    margin: 1.25rem 0 0.75rem;
    color: var(--neon);
}

.onboarding-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.onboarding-footer {
    margin-top: 1.5rem;
    padding-top: 0.5rem;
}

.profile-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.form-msg { font-size: 0.9rem; padding: 0.5rem; border-radius: 8px; text-align: center; }
.form-msg.error { background: rgba(255,0,110,0.15); color: var(--pink); }
.form-msg.success { background: rgba(57,255,20,0.15); color: var(--neon); }

/* App layout */
.app-main {
    padding: 1rem 1rem calc(var(--nav-h) + var(--safe-bottom) + 1rem);
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
    min-height: 44px;
}

.back-link {
    color: var(--neon);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem 0.25rem 0;
    flex-shrink: 0;
}

.header-spacer { width: 2rem; flex-shrink: 0; }

.app-header .page-title { flex: 1; text-align: center; font-size: 1.5rem; }

.greeting { color: var(--text-muted); font-size: 0.9rem; }
.avatar { border-radius: 50%; border: 2px solid var(--neon); }

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 0.75rem;
    text-align: center;
}

.stat-val {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--text);
}

.stat-neon .stat-val { color: var(--neon); }
.stat-pink .stat-val { color: var(--pink); }
.stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }

/* Gym card */
.gym-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gym-info { display: flex; align-items: center; gap: 0.75rem; }
.gym-info strong { display: block; font-size: 0.95rem; }
.gym-info small { color: var(--text-muted); font-size: 0.8rem; }

/* Start button */
.start-section { text-align: center; margin-bottom: 2rem; }

.btn-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), #cc0058);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 40px rgba(255,0,110,0.4), inset 0 -4px 0 rgba(0,0,0,0.2);
    transition: transform 0.2s;
    border: 4px solid var(--neon);
}

.btn-start:active { transform: scale(0.95); }

.btn-start-icon { font-size: 2rem; }
.btn-start-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-top: 0.25rem;
}

.start-hint { color: var(--neon); font-size: 0.85rem; margin-top: 0.75rem; }

/* Workout list */
.workout-list { display: flex; flex-direction: column; gap: 0.5rem; }

.workout-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s;
}

.workout-item:hover, .workout-item:active { border-color: var(--neon); }

.workout-item-date {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--pink);
    min-width: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.workout-item-info strong { display: block; font-size: 0.95rem; }
.workout-item-info small { color: var(--text-muted); font-size: 0.8rem; }

.empty-state { color: var(--text-muted); text-align: center; padding: 2rem 1rem; font-size: 0.9rem; }

/* workout-page: a logo clearance a .page-app .app-main szabályból jön */

.workout-header {
    text-align: center;
    padding: 1rem 1.25rem 1.25rem;
    position: sticky;
    top: 0;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
    border-bottom: 1px solid var(--border);
    margin: 0 -1.25rem 1rem;
}

.timer-display {
    font-family: var(--font-display);
    font-size: 4rem;
    letter-spacing: 4px;
    color: var(--neon);
    text-shadow: 0 0 30px rgba(57,255,20,0.4);
    line-height: 1;
}

.timer-controls { margin-top: 0.75rem; display: flex; justify-content: center; gap: 0.5rem; }

.rest-timer {
    background: linear-gradient(135deg, var(--blue), #0099cc);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    animation: pulse 1s ease infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); }
    50% { box-shadow: 0 0 40px rgba(0,212,255,0.6); }
}

.rest-label { font-family: var(--font-display); letter-spacing: 3px; font-size: 1rem; }
.rest-count { font-family: var(--font-display); font-size: 3rem; margin: 0.5rem 0; }

/* Exercise blocks */
.exercise-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.exercise-demo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0a0a10;
    border-bottom: 2px solid var(--border);
    overflow: hidden;
    position: relative;
}

.exercise-demo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.exercise-demo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.exercise-block .exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.5rem;
    margin-bottom: 0;
}

.exercise-block .exercise-note,
.exercise-block .sets-header,
.exercise-block .set-row,
.exercise-block .add-set-btn {
    margin-left: 1rem;
    margin-right: 1rem;
}

.exercise-block .add-set-btn {
    margin-bottom: 1rem;
}

.exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.exercise-header h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 1px;
}

.exercise-header small { color: var(--text-muted); font-weight: 400; }

.sets-header, .set-row {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 40px;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.sets-header { color: var(--text-muted); margin-bottom: 0.5rem; padding: 0 0.25rem; }

.set-row { padding: 0.4rem 0.25rem; border-radius: 8px; }
.set-row.done { background: rgba(57,255,20,0.08); }

.set-row input {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-align: center;
    font-size: 0.9rem;
}

.set-check {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--neon);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-check.done { background: var(--neon); color: #000; border-color: var(--neon); }

.add-set-btn {
    width: 100%;
    padding: 0.85rem;
    margin-top: 0.5rem;
    min-height: 52px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--neon) 35%, var(--border));
    border-radius: 14px;
    color: var(--neon);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.workout-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal.hidden { display: none; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }

.modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 85dvh;
    overflow-y: auto;
    border-top: 2px solid var(--pink);
}

.modal-content h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1rem; }

#exerciseModal .modal-content {
    max-width: min(100%, 520px);
    padding: 1rem 1rem calc(1.25rem + var(--safe-bottom));
    max-height: min(92dvh, 720px);
    display: flex;
    flex-direction: column;
}

.exercise-modal-sheet .modal-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: -0.35rem 0 0.85rem;
}

.exercise-modal-sheet .exercise-suggestions {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: min(54vh, 460px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.exercise-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--neon) 35%, var(--border));
    background: color-mix(in srgb, var(--neon) 8%, var(--bg-elevated));
    font-size: 0.82rem;
    color: var(--text);
}

.exercise-filter-bar.hidden { display: none !important; }

.custom-exercise-box {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Szett kártyák – nagy, mobil súlybevitel */
.set-cards {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 1rem 0.75rem;
}

.exercise-block .add-set-btn {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.modal-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.modal-actions .btn { flex: 1; }

/* Egyedi confirm / alert / prompt + toast */
.gz-dialog {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.75rem calc(0.75rem + var(--safe-bottom));
}
.gz-dialog.hidden { display: none; }
.gz-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 14, 0.72);
    backdrop-filter: blur(2px);
}
.gz-dialog-sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    background: #152228;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 1.2rem 1.15rem 1.15rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    text-align: left;
    animation: gzDialogIn 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
}
@keyframes gzDialogIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.gz-dialog-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--neon) 70%, #AFAFAF);
}
.gz-dialog-kicker.hidden { display: none; }
.gz-dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}
.gz-dialog-msg {
    margin: 0.45rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.4;
}
.gz-dialog-msg.hidden { display: none; }
.gz-dialog-field {
    margin-top: 0.9rem;
}
.gz-dialog-field.hidden { display: none; }
.gz-dialog-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--text-muted);
}
.gz-dialog-label.hidden { display: none; }
.gz-dialog-input {
    width: 100%;
}
.gz-dialog-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.15rem;
}
.gz-dialog-actions .btn {
    flex: 1;
    min-height: 48px;
    font-weight: 800;
}
.gz-dialog.is-danger .gz-dialog-kicker {
    color: #f87171;
}
.gz-dialog .btn-danger,
.btn-danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    box-shadow: 0 3px 0 #7f1d1d;
}
.gz-dialog .btn-danger:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7f1d1d;
}
body.has-gz-dialog {
    overflow: hidden;
}
.gz-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.1rem + var(--safe-bottom) + var(--nav-h, 88px));
    transform: translateX(-50%) translateY(12px);
    z-index: 250;
    max-width: min(92vw, 360px);
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: rgba(19, 31, 36, 0.96);
    border: 2px solid rgba(88, 204, 2, 0.45);
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.gz-toast.hidden { display: none; }
.gz-toast.is-visible {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (min-width: 720px) {
    .gz-dialog {
        align-items: center;
        padding: 1rem;
    }
}

.exercise-suggestions {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.suggestion-group-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem 0.4rem;
    margin-bottom: 0.15rem;
}

.suggestion-group-icons .suggestion-group-title {
    grid-column: 1 / -1;
    margin: 0.1rem 0 0.05rem;
}

.suggestion-item.suggestion-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0.1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

.suggestion-item.suggestion-icon:active {
    transform: scale(0.94);
}

.suggestion-item.suggestion-icon:hover,
.suggestion-item.suggestion-icon.selected,
.suggestion-item.suggestion-icon:focus-visible {
    border: 0;
    box-shadow: none;
    outline: none;
}

.suggestion-item.suggestion-icon .suggestion-demo {
    display: block;
    width: 100%;
    max-width: 108px;
    aspect-ratio: 1;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    background: #0a0a10;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    position: relative;
}

.suggestion-item.suggestion-icon:hover .suggestion-demo,
.suggestion-item.suggestion-icon.selected .suggestion-demo,
.suggestion-item.suggestion-icon:focus-visible .suggestion-demo {
    border-color: rgba(57, 255, 20, 0.85);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.22), 0 8px 18px rgba(0, 0, 0, 0.32);
}

.suggestion-item.suggestion-icon .suggestion-demo::after {
    display: none;
}

.suggestion-item.suggestion-icon .exercise-demo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.suggestion-icon-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(245, 245, 245, 0.92);
}

.suggestion-item.is-adding {
    opacity: 0.55;
    pointer-events: none;
}

.suggestion-item.is-added .suggestion-demo::before {
    content: '✓';
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: rgba(4, 18, 4, 0.55);
    color: var(--neon);
    font-size: 1.25rem;
    font-weight: 800;
}

.recommended-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-height: min(52vh, 480px);
    overflow-y: auto;
}

@media (max-width: 360px) {
    .suggestion-group-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 520px) {
    .suggestion-group-icons {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .suggestion-item.suggestion-icon .suggestion-demo {
        max-width: 80px;
    }
}

/* Ajánlott gyakorlatok a testrész-kijelölés után */
.recommended-exercises {
    margin-top: 1rem;
    padding: 0.85rem 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 80%, #000);
}

.recommended-exercises.hidden { display: none !important; }

.recommended-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.recommended-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.recommended-sub {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0 0 0.75rem;
}

.gym-simple-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.15rem 1.15rem;
    text-align: center;
}

.gym-simple-icon {
    margin: 0 auto 1rem;
    display: block;
}

.gym-simple-current {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.gym-simple-current strong {
    color: var(--neon);
    display: block;
    font-size: 1.1rem;
    margin-top: 0.25rem;
}

.gym-simple-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gym-simple-form .field-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.gym-search-lead {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.45;
}

.gym-search-lead strong { color: var(--blue); }

.input-search {
    font-size: 1.05rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
}

.gym-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.loader {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--neon);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.gym-error {
    background: rgba(255, 0, 110, 0.12);
    border: 1px solid var(--pink);
    color: var(--pink);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.gym-results-wrap { min-height: 120px; }

.gym-result {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
    position: relative;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.gym-result:active { transform: scale(0.98); }

.gym-result.selected { border-color: var(--neon); background: rgba(57, 255, 20, 0.06); }

.gym-result-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.gym-result-name { font-weight: 700; font-size: 1.02rem; flex: 1; }

.gym-result-addr { color: var(--text-muted); font-size: 0.84rem; margin-top: 0.35rem; line-height: 1.35; }

.gym-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.gym-result-dist { color: var(--blue); font-weight: 600; }

.gym-open { color: var(--neon); font-weight: 600; }
.gym-closed { color: var(--text-muted); }

.gym-result-rating { font-size: 0.8rem; color: var(--yellow); white-space: nowrap; }

.map-container {
    margin-bottom: 1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 10;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Gym search – tabs (legacy block kept) */
.search-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.tab {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
}

.tab.active { background: var(--pink); color: #fff; border-color: var(--pink); }

.tab-panel { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0; }
.tab-panel.hidden { display: none; }

.hint { color: var(--text-muted); font-size: 0.85rem; text-align: center; line-height: 1.4; }

.selected-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--neon);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Profile */
.profile-form { margin-bottom: 1.5rem; }

.profile-avatar {
    text-align: center;
    margin-bottom: 1.5rem;
}

.profile-avatar strong { display: block; margin-top: 0.5rem; font-size: 1.1rem; }
.profile-avatar small { color: var(--text-muted); }

.bmi-display { text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.bmi-display strong { color: var(--neon); }

.profile-links { display: flex; flex-direction: column; gap: 0.75rem; }

/* Detail view */
.detail-header { margin-bottom: 1.5rem; }
.detail-header h2 { font-family: var(--font-display); font-size: 1.5rem; }
.detail-header p { color: var(--text-muted); font-size: 0.9rem; }
.notes { font-style: italic; margin-top: 0.5rem; }

.sets-table .set-row { grid-template-columns: 40px 1fr 1fr; }

/* Bottom nav – lebegő dock */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 max(0.75rem, var(--safe-left)) calc(max(0.65rem, var(--safe-bottom)) + 0.15rem) max(0.75rem, var(--safe-right));
    pointer-events: none;
    max-width: 480px;
    margin: 0 auto;
    background: transparent;
    border: none;
    height: auto;
}

.bottom-nav-shell {
    pointer-events: auto;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem 0.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}

/* Logó a menü üveg hátterében – halk watermark, nem tolja szét a tabokat */
.nav-shell-watermark {
    display: none !important;
}

.nav-shell-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none;
}

.bottom-nav-shell .nav-item {
    position: relative;
    z-index: 1;
    flex: 1;
}

@media (min-width: 481px) {
    .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: min(480px, calc(100% - 1.5rem)); }
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.15rem 0.15rem;
    min-width: 0;
    position: relative;
    transition: color 0.2s ease;
}

.nav-label {
    line-height: 1.1;
    text-transform: uppercase;
}

.nav-active-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    margin-top: 0.05rem;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nav-item.active {
    color: var(--neon);
}

.nav-item.active .nav-active-dot {
    background: var(--neon);
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.8);
}

.nav-workout.active {
    color: var(--pink);
}

.nav-workout.active .nav-active-dot {
    background: var(--pink);
    box-shadow: 0 0 8px rgba(255, 0, 110, 0.8);
}

.nav-icon-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.nav-item:active .nav-icon-wrap {
    transform: scale(0.94);
}

.nav-item.active .nav-icon-wrap {
    background: rgba(57, 255, 20, 0.14);
    border-color: rgba(57, 255, 20, 0.35);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.22);
}

.nav-workout.active .nav-icon-wrap {
    background: rgba(255, 0, 110, 0.16);
    border-color: rgba(255, 0, 110, 0.4);
    box-shadow: 0 0 18px rgba(255, 0, 110, 0.28);
}

.nav-item-hero {
    flex: 1.15;
    margin-top: -1.15rem;
}

.nav-item-hero .nav-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--pink) 0%, #c4005a 100%);
    border: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 10px 28px rgba(255, 0, 110, 0.45),
        0 0 0 4px rgba(255, 0, 110, 0.12);
}

.nav-item-hero .nav-icon {
    filter: brightness(1.15);
}

.nav-item-hero.active .nav-icon-wrap {
    background: linear-gradient(145deg, #ff2d8a 0%, var(--pink) 100%);
    border-color: rgba(57, 255, 20, 0.45);
    box-shadow:
        0 12px 32px rgba(255, 0, 110, 0.5),
        0 0 0 4px rgba(57, 255, 20, 0.15);
}

.nav-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    border: 2px solid rgba(255, 0, 110, 0.45);
    animation: navPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes navPulse {
    0% { transform: scale(0.92); opacity: 0.85; }
    70%, 100% { transform: scale(1.18); opacity: 0; }
}

.nav-icon { width: 24px !important; height: 24px !important; }

.nav-svg {
    display: block;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.nav-item.active .nav-svg { color: var(--neon); }
.nav-workout .nav-svg { color: #fff; }
.nav-workout.active .nav-svg { color: #fff; }

.nav-item.active .nav-home-dot { fill: var(--neon); }

.nav-item-hero .nav-icon-wrap {
    animation: navHeroFloat 3.2s ease-in-out infinite;
}

.nav-svg-workout {
    /* statikus edzés-ikon – nincs pumpáló súlyzó */
}

.nav-home.active .nav-home-base {
    animation: navHomePop 2.4s ease-in-out infinite;
    transform-origin: 16px 16px;
}

.nav-home.active .nav-home-door {
    animation: navDoorGlow 2.4s ease-in-out infinite;
}

.nav-history.active .nav-history-line-1 { animation: navLineWrite 2s ease-in-out infinite; }
.nav-history.active .nav-history-line-2 { animation: navLineWrite 2s ease-in-out 0.25s infinite; }
.nav-history.active .nav-history-line-3 { animation: navLineWrite 2s ease-in-out 0.5s infinite; }

.nav-history.active .nav-history-check {
    animation: navCheckPop 2s ease-in-out infinite;
    transform-origin: 22px 22px;
}

.nav-profile.active .nav-profile-head {
    animation: navHeadNod 2.8s ease-in-out infinite;
    transform-origin: 16px 14px;
}

.nav-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon);
    opacity: 0;
    pointer-events: none;
}

.nav-spark-1 { top: 2px; right: 4px; animation: navSpark 2.2s ease-out infinite; }
.nav-spark-2 { bottom: 6px; left: 2px; animation: navSpark 2.2s ease-out 1.1s infinite; }

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

@keyframes navDumbbellPump {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(-6deg); }
}

@keyframes navHomePop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes navDoorGlow {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

@keyframes navLineWrite {
    0%, 100% { opacity: 0.35; transform: scaleX(0.7); transform-origin: left; }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes navCheckPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes navHeadNod {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(6deg); }
}

@keyframes navSpark {
    0% { opacity: 0; transform: scale(0.3) translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.2) translateY(-12px); }
}

.nav-item svg { width: 24px; height: 24px; }

/* Logo & brand */
.logo { text-align: center; }
.logo img { max-width: 100%; height: auto; }
.logo-lg img { width: 220px; }

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 100%;
}

.brand-stacked {
    flex-direction: column;
    text-align: center;
    gap: 0.45rem;
}

.brand-inline {
    flex-direction: row;
}

.brand-mark {
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 18px;
    border: 3px solid var(--neon);
    background: rgba(13, 13, 13, 0.65);
    padding: 6px;
    box-shadow:
        0 0 24px rgba(57, 255, 20, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Logó – bal felső splash; teljes grafika, éles (nincs crop/shadow) */
.logo-island {
    --logo-size: 118px;
    --logo-ease: cubic-bezier(0.32, 0.72, 0, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 90;
    display: block;
    line-height: 0;
    text-decoration: none;
    width: var(--logo-size);
    height: var(--logo-size);
    overflow: visible;
    transform: translate3d(max(0.2rem, var(--safe-left)), calc(var(--safe-top) + 0.1rem), 0) rotate(-10deg);
    transform-origin: top left;
    transition:
        transform 0.28s var(--logo-ease),
        width 0.28s var(--logo-ease),
        height 0.28s var(--logo-ease);
    filter: none !important;
    -webkit-filter: none !important;
    animation: none;
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: none !important;
    background: transparent !important;
}

.logo-island-splash::after {
    display: none;
}

.logo-splash-deco {
    display: none;
}

.logo-island:active {
    transform: translate3d(max(0.2rem, var(--safe-left)), calc(var(--safe-top) + 0.1rem), 0) rotate(-10deg) scale(0.96);
}

/* Görgetés: helyben kisebb – élő edzés NEM kompakt */
.logo-island.is-compact {
    --logo-size: 52px;
    animation: none;
    filter: none !important;
    transform: translate3d(max(0.35rem, var(--safe-left)), calc(var(--safe-top) + 0.2rem), 0) rotate(-6deg);
}

.logo-island.is-compact:active {
    transform: translate3d(max(0.35rem, var(--safe-left)), calc(var(--safe-top) + 0.2rem), 0) rotate(-6deg) scale(0.95);
}

.logo-island.is-compact::after,
.logo-island.is-compact .logo-splash-deco {
    opacity: 0;
}

.logo-island.is-compact .logo-island-mark {
    filter: none;
}

html.keyboard-open .logo-island,
html.keyboard-open .nav-shell-watermark {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .logo-island {
        transition: none !important;
    }
}

.logo-island-mark {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: none !important;
    image-rendering: auto;
}


.brand-mark-bare {
    border: none !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.welcome-hero-top-actions {
    justify-content: flex-end;
}

.launch-secondary-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--bg) 92%, transparent) 100%);
    pointer-events: none;
}

.brand-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 2.75rem);
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
    text-shadow:
        0 0 20px rgba(57, 255, 20, 0.35),
        2px 2px 0 var(--pink);
}

.brand-xs .brand-name { font-size: 1.35rem; letter-spacing: 0.1em; }
.brand-sm .brand-name { font-size: 1.75rem; }
.brand-md .brand-name { font-size: 2.1rem; }
.brand-lg .brand-name { font-size: 2.5rem; }
.brand-xl .brand-name { font-size: 2.85rem; }
.brand-hero .brand-name { font-size: clamp(2.5rem, 12vw, 3.5rem); }

.brand-xs .brand-mark { border-width: 2px; padding: 4px; border-radius: 12px; }
.brand-sm .brand-mark { border-radius: 14px; }
.brand-hero .brand-mark { border-width: 4px; padding: 10px; border-radius: 24px; }

.auth-card .brand,
.auth-card-big .brand {
    margin: 0 auto 0.85rem;
}

.welcome-hero-top .brand {
    flex: 1;
    min-width: 0;
}

.welcome-hero-top .brand-name {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

.page-banner-overlay .brand {
    margin-bottom: 0.65rem;
}

.page-banner-overlay .brand-name {
    font-size: 1.85rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.profile-welcome-logo-wrap .brand {
    margin: 0 auto;
}

.prestart-content .brand {
    margin: 0 auto 0.75rem;
}

.gz-loader-brand {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.14em;
    color: var(--neon);
    text-align: center;
    margin: 0.35rem 0 0.15rem;
    text-shadow: 0 0 16px rgba(57, 255, 20, 0.45);
}

.gz-loader-overlay.is-celebration .gz-loader-brand {
    color: var(--pink);
}

.gz-celebration-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--neon);
    margin-bottom: 0.35rem;
}

.gz-celebration-msg {
    display: block;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ===== RANK CARD ===== */
.rank-card {
    --rank-accent: var(--neon);
    position: relative;
    margin: 0 0 1.15rem;
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--rank-accent) 50%, var(--border));
    min-height: 168px;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        0 0 28px color-mix(in srgb, var(--rank-accent) 18%, transparent);
}

.rank-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rank-card-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.72) 48%, rgba(8, 8, 12, 0.45) 100%),
        radial-gradient(circle at 18% 40%, color-mix(in srgb, var(--rank-accent) 28%, transparent), transparent 55%);
    pointer-events: none;
}

.rank-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.1rem 1.2rem;
}

.rank-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.rank-badge {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    border: 3px solid var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.55rem;
    letter-spacing: 0.04em;
    color: var(--neon);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 26px rgba(57, 255, 20, 0.3);
}

.rank-lp-pill {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
}

.rank-card-body {
    flex: 1;
    min-width: 0;
}

.rank-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.2rem;
}

.rank-name {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 7vw, 2.35rem);
    letter-spacing: 0.06em;
    line-height: 0.95;
    margin: 0 0 0.35rem;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.rank-meta {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0.65rem;
    line-height: 1.35;
}

.rank-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.rank-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--neon), var(--pink));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-progress {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--neon);
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ===== Edzés végi jutalom – egyszerű, élő, egyedi kép ===== */
/* === Edzés végi – Duo lesson complete (egyszerű + látványos) === */
.gz-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #131F24;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.gz-reward-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.gz-reward-overlay.hidden { display: none; }
.gz-reward-overlay.is-visible:not(.hidden) { display: flex; }

.gz-reward-rays {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 38%, rgba(88, 204, 2, 0.22) 0%, transparent 42%),
        repeating-conic-gradient(from 0deg at 50% 38%,
            rgba(255, 200, 0, 0.07) 0deg 8deg,
            transparent 8deg 22deg);
    opacity: 0;
    transform: scale(0.85);
}
.gz-reward-overlay.is-ready .gz-reward-rays {
    animation: gzRewardRaysIn 0.7s ease 0.05s both, gzRewardRaysSpin 18s linear 0.7s infinite;
}
@keyframes gzRewardRaysIn {
    to { opacity: 1; transform: scale(1); }
}
@keyframes gzRewardRaysSpin {
    to { transform: rotate(360deg) scale(1); }
}

.gz-reward-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.gz-reward-sheet {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    min-height: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(180px, 1fr) auto auto;
    align-items: center;
    justify-items: center;
    padding: calc(var(--safe-top) + 0.5rem) 1.35rem calc(1rem + var(--safe-bottom));
    box-sizing: border-box;
    text-align: center;
    opacity: 0;
}
.gz-reward-overlay.is-ready .gz-reward-sheet {
    animation: gzRewardSheetIn 0.4s ease both;
}
@keyframes gzRewardSheetIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gz-reward-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    align-self: stretch;
}

.gz-reward-art {
    position: relative;
    width: min(78vw, 300px);
    height: min(78vw, 300px);
    max-width: min(46dvh, 300px);
    max-height: min(46dvh, 300px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d1519;
    box-shadow:
        0 0 0 6px rgba(88, 204, 2, 0.18),
        0 0 48px rgba(88, 204, 2, 0.28),
        0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: scale(0.55);
}
.gz-reward-overlay.is-ready .gz-reward-art {
    animation: gzRewardArtPop 0.55s cubic-bezier(0.22, 1.15, 0.36, 1) 0.06s both;
}
@keyframes gzRewardArtPop {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.gz-reward-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: none !important;
    filter: none !important;
}

.gz-reward-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0 0.75rem;
}

.gz-reward-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(2rem, 9vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
    opacity: 0;
}
.gz-reward-overlay.is-ready .gz-reward-title {
    animation: gzWinTitleSlam 0.45s cubic-bezier(0.22, 1.1, 0.36, 1) 0.2s both;
}

.gz-reward-sub {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #AFAFAF;
    opacity: 0;
}
.gz-reward-overlay.is-ready .gz-reward-sub {
    animation: gzRewardFadeUp 0.4s ease 0.36s both;
}

.gz-reward-xp {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    padding: 0.7rem 1.25rem 0.7rem 0.85rem;
    border-radius: 18px;
    background: #1F2C34;
    border: 2px solid #37464F;
    border-bottom: 5px solid #2A373E;
    color: #FFC800;
    opacity: 0;
    transform: scale(0.8);
}
.gz-reward-overlay.is-ready .gz-reward-xp {
    animation: gzRewardFadeUp 0.45s cubic-bezier(0.22, 1.25, 0.36, 1) 0.48s both;
}
.gz-reward-xp.is-pop {
    animation: gzRewardXpPop 0.55s cubic-bezier(0.34, 1.55, 0.64, 1) both;
}
.gz-reward-xp-gem {
    width: 1.7rem;
    height: 1.7rem;
    background: linear-gradient(145deg, #FFE600, #FFC800 50%, #FF9600);
    clip-path: polygon(50% 0%, 92% 28%, 78% 100%, 22% 100%, 8% 28%);
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3));
}
.gz-reward-xp-plus,
.gz-reward-xp-label {
    font-weight: 800;
    font-size: 1.15rem;
}
.gz-reward-xp strong {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1;
}

@keyframes gzRewardXpPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes gzRewardFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.gz-reward-streak-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0;
    font-weight: 800;
    opacity: 0;
}
.gz-reward-overlay.is-ready .gz-reward-streak-line {
    animation: gzRewardFadeUp 0.4s ease 0.62s both;
}
.gz-reward-streak-ico {
    width: 1.1rem;
    height: 1.25rem;
    border-radius: 50% 50% 45% 45%;
    background: linear-gradient(180deg, #FFC800, #FF4B4B);
    box-shadow: 0 0 12px rgba(255, 150, 0, 0.55);
}
.gz-reward-streak-line strong {
    font-size: 1.35rem;
    color: #FF9600;
    line-height: 1;
}
.gz-reward-streak-line span {
    font-size: 0.98rem;
    color: #AFAFAF;
}

.gz-reward-continue {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    min-height: 58px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(12px);
}
.gz-reward-continue.is-in {
    animation: gzRewardFadeUp 0.4s ease both;
}

.gz-confetti-bit.is-star {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: #FFE600 !important;
}

@media (max-height: 640px) {
    .gz-reward-art {
        max-height: 36dvh;
        width: min(58vw, 220px);
    }
    .gz-reward-title { font-size: 1.7rem; }
    .gz-reward-xp strong { font-size: 1.7rem; }
    .gz-reward-copy { gap: 0.35rem; padding-bottom: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gz-reward-sheet,
    .gz-reward-art,
    .gz-reward-rays,
    .gz-reward-title,
    .gz-reward-sub,
    .gz-reward-xp,
    .gz-reward-streak-line,
    .gz-reward-continue {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== Tiszta aktív edzés (nem csúszik össze) ===== */
.workout-actions-simple {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.workout-active-clean {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom) - 1rem);
    gap: 0;
    padding: 0;
    margin: 0 -1rem;
    width: calc(100% + 2rem);
}

.workout-active-clean.hidden { display: none !important; }

/* Teljes oldalas animált banner */
.wa-full-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(480px, 100%);
    height: 100dvh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.wa-live-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    transform: scale(1.18);
    transform-origin: center;
    animation: waLiveKen 11s ease-in-out infinite alternate;
    filter: saturate(1.35) contrast(1.12) brightness(1.05);
}
body.workout-live-on .wa-live-img {
    animation: waLiveKen 11s ease-in-out infinite alternate !important;
}

.wa-live-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 7, 10, 0.32) 0%,
        rgba(6, 7, 10, 0.55) 40%,
        rgba(6, 7, 10, 0.82) 72%,
        rgba(6, 7, 10, 0.94) 100%
    );
    animation: none;
}

.wa-live-sweep {
    display: none !important;
}

@keyframes waLiveKen {
    0% { transform: scale(1.14) translate3d(-3.5%, 1%, 0); }
    100% { transform: scale(1.32) translate3d(3.5%, -2.5%, 0); }
}

@keyframes waLiveSweep {
    0% { transform: translateX(-38%) rotate(2deg); opacity: 0; }
    18% { opacity: 0.95; }
    50% { opacity: 0.45; }
    100% { transform: translateX(42%) rotate(-2deg); opacity: 0; }
}

@keyframes waLiveShadePulse {
    0% {
        filter: brightness(0.92);
        opacity: 1;
    }
    100% {
        filter: brightness(1.18);
        opacity: 1;
    }
}

.wa-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.65rem 1rem 1rem;
    min-height: inherit;
}

.wa-top {
    position: sticky;
    top: 0.35rem;
    z-index: 12;
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: 18px;
    background: rgba(19, 31, 36, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.wa-live-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(240, 240, 240, 0.9);
}

.wa-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.5);
    animation: waLiveDot 1.6s ease-out infinite;
}

@keyframes waLiveDot {
    0% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(57, 255, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
}

.wa-timer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.workout-active-clean .timer-display {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 12vw, 3.4rem);
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 22px rgba(57, 255, 20, 0.35);
}

.workout-active-clean.is-paused .wa-live-img,
.workout-active-clean.is-paused .wa-live-sweep,
.workout-active-clean.is-paused .wa-live-dot {
    animation-play-state: paused;
}

.workout-active-clean.is-paused .wa-live-label {
    color: rgba(240, 240, 240, 0.55);
}

body.workout-live-on .graffiti-bg {
    opacity: 0;
    pointer-events: none;
}

body.workout-live-on .app-main.workout-page {
    padding-top: calc(var(--safe-top) + 7.1rem);
    background: transparent;
    transition: padding-top 0.22s ease;
}
body.workout-live-on.logo-is-compact .app-main.workout-page {
    padding-top: calc(var(--safe-top) + 3.35rem);
}

body.workout-live-on .bottom-nav-simple .bottom-nav-shell {
    background: #071014 !important;
    border-color: #58CC02 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .wa-live-img,
    .wa-live-sweep,
    .wa-live-dot {
        animation: none !important;
    }
    .wa-live-img { transform: scale(1.08); }
}

.wa-pause {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.wa-pause::before,
.wa-pause::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 4px;
    height: 18px;
    border-radius: 1px;
    background: #fff;
}

.wa-pause::before { left: 14px; }
.wa-pause::after { right: 14px; }

.wa-resume::before,
.wa-resume::after {
    content: none;
}

.wa-resume {
    background: rgba(57, 255, 20, 0.14);
    border-color: rgba(57, 255, 20, 0.35);
}

.wa-resume::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #fff;
    background: none;
    border-radius: 0;
}

.wa-meta { margin-top: 0.65rem; }

.wa-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.45rem;
}

.wa-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #58CC02, var(--neon));
    border-radius: inherit;
    transition: width 0.35s ease;
}

.wa-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.wa-stats strong {
    color: #fff;
    font-weight: 800;
}

.wa-empty {
    padding: 2rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(10, 10, 14, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.workout-active-clean .exercise-block-clean {
    background: rgba(14, 14, 18, 0.82);
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.workout-active-clean .rest-timer-clean {
    background: rgba(8, 24, 36, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(0, 212, 255, 0.35);
}

.workout-active-clean .wa-actions .btn-outline {
    background: rgba(12, 12, 16, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.wa-empty strong {
    display: block;
    color: #fff;
    margin-bottom: 0.25rem;
}

.rest-timer-clean {
    border-radius: 16px;
    padding: 1rem;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.28);
    text-align: center;
    animation: none;
}

.rest-clean-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.rest-timer-clean .rest-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.rest-timer-clean .rest-count {
    font-family: var(--font-display);
    font-size: 2.4rem;
    margin: 0;
    line-height: 1;
    color: #fff;
}

.rest-clean-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin: 0 auto 0.75rem;
    max-width: 220px;
}

.rest-clean-bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--blue);
    border-radius: inherit;
    transition: width 0.25s linear;
}

.ex-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.55rem;
    margin: 0.15rem 0 0.85rem;
    padding: 0.15rem 0;
}

.ex-icon-grid .wa-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.1rem 0.75rem;
}

.ex-icon {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0.15rem 0.1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

.ex-icon:active {
    transform: scale(0.94);
}

.ex-icon-img-wrap {
    position: relative;
    width: 100%;
    max-width: 112px;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(8, 8, 12, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.ex-icon.is-active .ex-icon-img-wrap {
    border-color: rgba(57, 255, 20, 0.85);
    box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.22), 0 8px 18px rgba(0, 0, 0, 0.32);
}

.ex-icon.is-done .ex-icon-img-wrap {
    border-color: rgba(57, 255, 20, 0.55);
}

.ex-icon-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.ex-icon-check {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--neon);
    color: #041204;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.ex-icon-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(245, 245, 245, 0.92);
}

.ex-icon-meta {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(240, 240, 240, 0.5);
    line-height: 1;
}

.ex-icon.is-active .ex-icon-meta {
    color: rgba(57, 255, 20, 0.9);
}

.ex-detail {
    margin: 0 0 0.85rem;
    min-width: 0;
}

.ex-detail.hidden {
    display: none !important;
}

@media (max-width: 360px) {
    .ex-icon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ex-icon-img-wrap {
        max-width: 132px;
    }
}

@media (min-width: 420px) {
    .ex-icon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ex-icon-img-wrap {
        max-width: 120px;
    }
}

@media (min-width: 520px) {
    .ex-icon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ex-icon-img-wrap {
        max-width: 118px;
    }
}

.exercise-block-clean {
    background: rgba(18, 18, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 0;
    margin-bottom: 0.9rem;
    overflow: hidden;
}

.exercise-block-clean.is-complete {
    border-color: rgba(57, 255, 20, 0.45);
    box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.12);
}

.ex-clean-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a0a10;
    overflow: hidden;
}

.ex-clean-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}

.ex-clean-media-fade {
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(10, 10, 14, 0.88));
    pointer-events: none;
}

.ex-clean-tag {
    position: absolute;
    left: 0.7rem;
    bottom: 0.65rem;
    z-index: 1;
    padding: 0.28rem 0.6rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(240, 240, 240, 0.92);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ex-clean-del {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
}

.ex-clean-body {
    padding: 0.8rem 0.85rem 0.85rem;
}

.exercise-block-clean .exercise-header {
    display: block;
    margin-bottom: 0.65rem;
    padding: 0;
}

.exercise-title-wrap {
    min-width: 0;
}

.exercise-title-wrap h4 {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 0.4rem;
    line-height: 1.25;
    color: #fff;
}

.exercise-block-clean .set-cards-compact {
    margin: 0 0 0.6rem;
    gap: 0.45rem;
}

.workout-active-clean .set-row-compact {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.45rem 0.35rem;
}

.workout-active-clean .set-row-compact.done {
    background: rgba(57, 255, 20, 0.12);
    border-color: rgba(57, 255, 20, 0.35);
}

.workout-active-clean .set-row-compact .set-weight,
.workout-active-clean .set-row-compact .set-reps {
    background: rgba(8, 8, 12, 0.72);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.05rem;
}

.workout-active-clean .set-num-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.workout-active-clean .set-prev {
    color: rgba(240, 240, 240, 0.55);
}

.workout-active-clean .set-check {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.workout-active-clean .set-check.done {
    background: var(--neon);
    border-color: var(--neon);
    color: #041204;
}

.exercise-block-clean .exercise-note,
.exercise-block-clean .set-row,
.exercise-block-clean .add-set-btn {
    margin-left: 0;
    margin-right: 0;
}

.exercise-clean-footer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.exercise-block-clean .add-set-btn {
    flex: 1;
    margin-bottom: 0;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
}

.wa-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.ex-set-track {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ex-set-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.ex-set-dot.is-done {
    background: var(--neon);
    border-color: var(--neon);
    box-shadow: none;
}

.workout-active-live .set-check {
    display: grid;
    place-items: center;
}

.workout-active-live .set-check svg {
    display: block;
}

.mood-row-labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
}

.mood-row-labels .mood-btn {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 240, 240, 0.85);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.25rem;
}

.mood-row-labels .mood-btn.active,
.mood-row-labels .mood-btn:active {
    border-color: rgba(57, 255, 20, 0.45);
    background: rgba(57, 255, 20, 0.12);
    color: #fff;
}

.ex-set-dot.is-warm:not(.is-done) {
    border-color: #1CB0F6;
}

.ex-set-count {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.exercise-block-live .set-cards-compact {
    margin: 0.35rem 0.85rem 0.55rem;
}

.exercise-live-footer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.85rem 0.9rem;
}

.exercise-block-live .add-set-btn {
    margin: 0;
    flex: 1;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-weight: 700;
}

.exercise-note-details {
    flex: 0 0 auto;
}

.exercise-note-details > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.55rem 0.35rem;
}

.exercise-note-details > summary::-webkit-details-marker { display: none; }

.exercise-note-details[open] {
    flex: 1 1 100%;
}

.exercise-note-details .exercise-note {
    margin: 0;
    width: 100%;
}

.finish-modal-simple {
    text-align: center;
}

.gz-duo-close {
    border-radius: 16px !important;
}

/* ===== BIG WIN OVERLAY ===== */
.gz-win-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(5, 5, 8, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.gz-win-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-card {
    animation: gzWinPop 0.55s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-badge {
    animation: gzWinBadgeSpin 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) 0.1s both;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-burst {
    animation: gzWinPulse 1.6s ease-in-out infinite, gzWinBurstIn 0.5s ease both;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-title {
    animation: gzWinTitleSlam 0.55s cubic-bezier(0.22, 1.15, 0.36, 1) 0.14s both;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-art {
    animation: gzWinArtSpin 0.6s cubic-bezier(0.22, 1.15, 0.36, 1) 0.06s both;
}
.gz-win-overlay.is-spectacular.is-ready .gz-win-kicker {
    animation: gzWinFlashIn 0.4s ease 0.08s both;
}
.gz-win-overlay.is-rank-up.is-ready .gz-win-rank-media {
    animation: gzRankSlam 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) both, gzRankPulse 2.2s ease-in-out 0.7s infinite;
}
.gz-win-overlay.is-rank-up.is-ready .gz-win-rank-name {
    animation: gzWinTitleSlam 0.5s cubic-bezier(0.22, 1.15, 0.36, 1) 0.22s both;
}
@keyframes gzWinBadgeSpin {
    0% { transform: scale(0.72); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes gzWinBurstIn {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes gzWinTitleSlam {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
}
@keyframes gzWinArtSpin {
    0% { opacity: 0; transform: scale(0.88); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes gzWinFlashIn {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: none; }
}
@keyframes gzRankSlam {
    0% { opacity: 0; transform: scale(0.86); }
    100% { opacity: 1; transform: scale(1); }
}

.gz-win-overlay.hidden {
    display: none;
}

.gz-win-overlay.is-visible:not(.hidden) {
    display: flex;
}

body.has-win-overlay {
    overflow: hidden;
}

.gz-win-burst {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 0, 110, 0.35) 0%, transparent 55%),
        radial-gradient(circle, rgba(57, 255, 20, 0.25) 0%, transparent 65%);
    animation: gzWinPulse 1.4s ease-in-out infinite;
    pointer-events: none;
}

.gz-win-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gz-confetti-bit {
    position: absolute;
    top: -18px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    animation-name: gzConfettiBurst;
    animation-timing-function: cubic-bezier(0.15, 0.75, 0.25, 1);
    animation-fill-mode: forwards;
    opacity: 0.98;
    will-change: transform, opacity;
}

.gz-confetti-bit.is-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.gz-confetti-bit.is-ribbon {
    width: 5px;
    height: 16px;
    border-radius: 999px;
}

.gz-confetti-bit.is-rect {
    width: 8px;
    height: 12px;
    border-radius: 2px;
}

.gz-win-card {
    position: relative;
    z-index: 2;
    width: min(100%, 400px);
    text-align: center;
    padding: 1.35rem 1.25rem 1.35rem;
    border-radius: 26px;
    border: 2px solid rgba(255, 0, 110, 0.55);
    background: linear-gradient(160deg, #1a1220 0%, #0d0d12 55%, #101818 100%);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 0, 110, 0.2);
    animation: gzWinPop 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both;
    overflow: hidden;
}

.gz-win-art {
    width: min(72vw, 220px);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 0.35rem;
    display: block;
    box-shadow:
        0 0 30px rgba(255, 0, 110, 0.35),
        0 0 50px rgba(57, 255, 20, 0.2);
    animation: gzWinBounce 0.85s ease both;
}

.gz-win-emoji,
.gz-win-badge {
    display: inline-grid;
    place-items: center;
    min-width: 64px;
    height: 36px;
    padding: 0 0.85rem;
    margin: -0.15rem auto 0.55rem;
    border-radius: 999px;
    background: linear-gradient(120deg, #FF006E, #FFE600);
    color: #12080c;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    animation: gzWinBounce 0.8s ease 0.08s both;
}

.gz-win-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 0.4rem;
}

.gz-win-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    letter-spacing: 0.06em;
    line-height: 0.95;
    color: #fff;
    text-shadow:
        0 0 24px rgba(57, 255, 20, 0.45),
        3px 3px 0 var(--pink);
    margin-bottom: 0.55rem;
}

.gz-win-msg {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 1.1rem;
}

.gz-win-rank {
    --rank-accent: var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0.15rem 0 1.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 20px;
    background: rgba(8, 14, 18, 0.55);
    border: 1px solid color-mix(in srgb, var(--rank-accent) 35%, transparent);
}
.gz-win-rank-media {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0b1216;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--rank-accent) 55%, transparent),
        0 10px 24px rgba(0, 0, 0, 0.4);
}
.gz-win-rank-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    transform: scale(1.92);
}
.gz-win-rank-img.hidden { display: none; }
.gz-win-rank-copy {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.gz-win-rank-badge {
    display: none;
}
.gz-win-rank-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}
.gz-win-rank-bar {
    margin-top: 0.55rem;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.gz-win-rank-bar-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff, var(--rank-accent));
    box-shadow: 0 0 14px color-mix(in srgb, var(--rank-accent) 60%, transparent);
    transition: width 1.25s cubic-bezier(0.2, 0.9, 0.25, 1);
    overflow: hidden;
}
.gz-win-rank-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
    animation: rankBarShine 1.6s ease-in-out 0.35s 2;
}
.gz-win-rank-meta {
    margin: 0.4rem 0 0;
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
}
.gz-win-overlay.is-rank-up .gz-win-achieve-img {
    display: none !important;
}
.gz-win-overlay.is-rank-up .gz-win-badge {
    background: linear-gradient(145deg, var(--rank-accent, var(--neon)), #fff);
    color: #0a1014;
}
.gz-win-overlay.is-rank-up .gz-win-rank {
    flex-direction: column;
    text-align: center;
    gap: 0.85rem;
    padding: 1.1rem 1rem 1.15rem;
    margin-top: 0.35rem;
    animation: gzRankPop 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.gz-win-overlay.is-rank-up .gz-win-rank-media {
    width: 160px;
    height: 160px;
    animation: gzRankPulse 1.8s ease-in-out infinite;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--rank-accent) 55%, transparent),
        0 0 48px color-mix(in srgb, var(--rank-accent) 45%, transparent),
        0 16px 36px rgba(0, 0, 0, 0.45);
}
.gz-win-overlay.is-rank-up .gz-win-rank-copy {
    text-align: center;
    width: 100%;
}
.gz-win-overlay.is-rank-up .gz-win-rank-name {
    font-size: clamp(1.65rem, 6.5vw, 2.05rem);
    background: linear-gradient(105deg, #fff 10%, var(--rank-accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gz-win-overlay.is-rank-up .gz-win-title {
    font-size: clamp(1.35rem, 5vw, 1.65rem);
    letter-spacing: 0.08em;
}
.gz-win-overlay.is-rank-up .gz-win-msg {
    display: none;
}
@keyframes gzRankPop {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes gzRankPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

.gz-win-close {
    width: 100%;
    min-height: 56px;
}

@keyframes gzWinPop {
    from { transform: scale(0.94) translateY(14px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes gzWinBounce {
    0% { transform: scale(0.88); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gzWinPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.65; }
    50% { transform: scale(1.04); opacity: 0.9; }
}

@keyframes gzConfettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0.1; }
}

@keyframes gzConfettiBurst {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
        opacity: 0.95;
    }
    20% {
        transform: translate3d(var(--cx, 40px), 7vh, 0) rotate(var(--rot, 120deg)) scale(1.05);
        opacity: 0.95;
    }
    100% {
        transform: translate3d(calc(var(--cx, 40px) * 0.3), 108vh, 0) rotate(calc(var(--rot, 120deg) * 1.5)) scale(0.9);
        opacity: 0;
    }
}

/* Enyhe jelenlét – nem rázás */
body.gz-impact {
    animation: none;
}

.gz-win-overlay.is-spectacular.is-ready::before,
.gz-reward-overlay.is-spectacular.is-ready::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 48%);
    animation: gzFlashBurst 0.7s ease-out both;
}
@keyframes gzFlashBurst {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

.is-count-pop {
    animation: gzCountPop 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes gzCountPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gz-win-card,
    .gz-win-emoji,
    .gz-win-burst,
    .gz-confetti-bit,
    .gz-win-overlay.is-spectacular.is-ready::before,
    .gz-reward-overlay.is-spectacular.is-ready::before,
    .is-count-pop {
        animation: none !important;
    }
}

.welcome-goal {
    font-size: 0.82rem;
    color: var(--neon);
    margin-top: 0.35rem;
    letter-spacing: 0.04em;
}

.goal-celebration {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 2px solid var(--neon);
    background: rgba(57, 255, 20, 0.1);
    text-align: center;
    box-shadow: 0 0 24px rgba(57, 255, 20, 0.15);
}

.goal-celebration strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--neon);
    margin-bottom: 0.25rem;
}

.goal-celebration span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.profile-form .goals-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

.install-prompt .brand {
    flex-shrink: 0;
}

.install-prompt .brand-stacked {
    gap: 0.2rem;
}

.install-prompt .brand-name {
    font-size: 1rem;
}


.hidden { display: none !important; }

.install-prompt {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--neon);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 60;
    max-width: 448px;
    margin: 0 auto;
}

.install-prompt p { font-size: 0.9rem; }

/* Telepítés FAB – jobb lent, a nav felett */
.install-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(var(--nav-h) + 0.35rem);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem 0.65rem 0.75rem;
    border-radius: 999px;
    border: 2px solid var(--neon);
    background: linear-gradient(135deg, rgba(26,26,34,0.96), rgba(13,13,18,0.98));
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 28px rgba(57, 255, 20, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.install-fab:active {
    transform: scale(0.96);
}

.install-fab-label {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

.install-ios-hint {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.install-ios-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.install-ios-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--neon);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.install-ios-card h3 {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

.install-ios-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0 0 1rem;
}

/* === Edzésnapló pro === */
.workout-title-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-align: center;
    padding: 0.25rem 0 0.5rem;
    margin-bottom: 0.5rem;
    outline: none;
}

.workout-title-input:focus { border-color: var(--neon); color: var(--text); }

.workout-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.chip {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.chip.active { background: var(--pink); border-color: var(--pink); color: #fff; }

.workout-journal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--neon);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.journal-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.journal-save-hint { color: var(--neon); font-size: 0.75rem; font-weight: 400; }

.journal-textarea {
    min-height: 72px;
    resize: vertical;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.pr-toast {
    position: fixed;
    top: calc(var(--safe-top) + 1rem);
    left: 1rem;
    right: 1rem;
    max-width: 448px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--yellow), #ffaa00);
    color: #000;
    font-weight: 700;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    z-index: 200;
    text-align: center;
    box-shadow: 0 8px 30px rgba(255, 230, 0, 0.35);
    animation: slideDown 0.3s ease;
}

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

/* Szett kártyák – nagy, mobil súlybevitel */
.set-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 0.85rem 0.9rem 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.set-card.done {
    border-color: color-mix(in srgb, var(--neon) 45%, var(--border));
    background: color-mix(in srgb, var(--neon) 8%, var(--bg-card));
}

.set-card.warmup {
    opacity: 0.72;
}

.set-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.set-card .set-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: #fff;
}

.set-card-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.weight-pad {
    margin-bottom: 0.75rem;
}

.weight-pad-label,
.reps-pad-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.weight-pad-row {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    gap: 0.55rem;
    align-items: stretch;
    margin-bottom: 0.55rem;
}

.weight-btn {
    min-height: 64px;
    border-radius: 16px;
    border: 2px solid color-mix(in srgb, var(--neon) 40%, var(--border));
    background: color-mix(in srgb, var(--neon) 12%, var(--bg-elevated));
    color: var(--neon);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.weight-btn.weight-plus {
    border-color: color-mix(in srgb, var(--pink) 45%, var(--border));
    background: color-mix(in srgb, var(--pink) 14%, var(--bg-elevated));
    color: var(--pink);
}

.weight-btn:active {
    transform: scale(0.96);
}

.weight-input,
.weight-pad .set-weight {
    width: 100%;
    min-height: 64px;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    color: #fff;
    text-align: center;
    font-family: var(--font-display);
    font-size: 2rem !important;
    letter-spacing: 0.04em;
    font-weight: 400;
    padding: 0.35rem !important;
}

.weight-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.weight-chip {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.weight-chip-hot {
    border-color: color-mix(in srgb, var(--pink) 50%, var(--border));
    color: var(--pink);
    background: color-mix(in srgb, var(--pink) 10%, transparent);
}

.weight-chip:active {
    border-color: var(--neon);
    color: var(--neon);
}

.reps-pad {
    margin-bottom: 0.7rem;
}

.reps-pad-row {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 0.45rem;
    align-items: stretch;
}

.reps-btn {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--blue);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}

.reps-pad .set-reps {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: #fff;
    text-align: center;
    font-size: 1.35rem !important;
    font-weight: 700;
    padding: 0.35rem !important;
}

.set-card-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.rpe-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.rpe-wrap .set-rpe {
    width: 56px;
    min-height: 40px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 1rem !important;
    padding: 0.35rem !important;
}

.copy-prev-btn {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--border));
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.45rem 0.7rem;
}

.copy-prev-btn:active {
    transform: scale(0.98);
}

.set-card .warmup-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.set-card .set-check {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 1.25rem !important;
}

.sets-header-pro, .set-row-pro {
    grid-template-columns: 24px minmax(0, 1.35fr) minmax(0, 1.15fr) 40px 30px 34px !important;
    font-size: 0.72rem;
    align-items: center;
    gap: 0.25rem !important;
}

.set-row-pro .set-num {
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
}

.set-row-pro.warmup { opacity: 0.65; }

.warmup-toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.warmup-toggle.on { background: var(--blue); color: #000; border-color: var(--blue); }

.exercise-note {
    margin-bottom: 0.65rem !important;
    font-size: 0.85rem !important;
    padding: 0.55rem 0.75rem !important;
}

.previous-hint {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    color: var(--blue);
    margin: 0.5rem 0;
}

.rest-presets { display: flex; gap: 0.4rem; justify-content: center; margin: 0.75rem 0; }

.rest-preset {
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

.rest-preset.active { background: rgba(255,255,255,0.25); }

.field-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0.35rem;
    font-weight: 500;
}

.finish-stats { margin-bottom: 0.5rem; }

.finish-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.finish-stat-grid strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--neon);
}

.finish-stat-grid span { font-size: 0.7rem; color: var(--text-muted); }

.rpe-row, .mood-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }

.rpe-btn, .mood-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}

.rpe-btn.active { background: var(--neon); color: #000; border-color: var(--neon); }
.mood-btn { width: 44px; font-size: 1.2rem; }
.mood-btn.active { border-color: var(--pink); background: rgba(255,0,110,0.15); }

.finish-modal { max-height: 90dvh; }

.quick-actions, .history-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.quick-actions .btn, .history-actions .btn { flex: 1; }

.detail-notes {
    background: var(--bg-card);
    border-left: 3px solid var(--neon);
    padding: 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1rem;
}

.detail-notes h4 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.detail-notes p { white-space: pre-wrap; line-height: 1.5; }

.detail-meta { color: var(--text-muted); font-size: 0.88rem; }

.detail-actions-row { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }

.edit-panel { margin-bottom: 1.25rem; }

.sets-readonly {
    grid-template-columns: 40px 1fr 1fr 1fr !important;
    font-size: 0.85rem;
    padding: 0.35rem 0;
}

.item-note-preview {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}

.workout-item.clickable {
    width: 100%;
    text-align: left;
    border: none;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.ex-note { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; font-style: italic; }

.delete-exercise {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
}

/* ========== MOBIL VIZUÁL – nagy gombok, ikonok ========== */

.landing-hero-visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    min-height: 340px;
    border: 2px solid var(--pink);
    box-shadow: 0 12px 40px rgba(255, 0, 110, 0.25);
}

.hero-photo {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,13,13,0.98) 0%, rgba(13,13,13,0.5) 45%, rgba(13,13,13,0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    text-align: center;
}

.logo-img-ai {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 0.5rem;
    border-radius: 22px;
    border: 3px solid var(--neon);
    box-shadow: 0 8px 30px rgba(57, 255, 20, 0.35);
}

.landing-actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.feature-card-big {
    padding: 1.35rem !important;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, var(--bg-card), var(--bg-elevated));
}

.feature-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(57, 255, 20, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(57, 255, 20, 0.3);
}

.feature-icon-wrap.icon-pink { background: rgba(255, 0, 110, 0.12); border-color: rgba(255, 0, 110, 0.3); }
.feature-icon-wrap.icon-blue { background: rgba(0, 212, 255, 0.12); border-color: rgba(0, 212, 255, 0.3); }

.feature-card-big h3 { font-size: 1.35rem !important; }

.install-prompt {
    bottom: calc(1rem + var(--safe-bottom));
    padding: 1rem 1.15rem;
    align-items: center;
}

.install-logo { border-radius: 12px; flex-shrink: 0; }

/* Auth vizuál */
.auth-page-visual { justify-content: flex-start; padding-top: 0; padding-left: 0; padding-right: 0; }

.auth-hero-strip {
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin-bottom: -2rem;
    position: relative;
    z-index: 0;
}

.auth-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.auth-card-big {
    position: relative;
    z-index: 1;
    margin: 0 1rem;
    width: calc(100% - 2rem);
    padding: 1.75rem 1.35rem !important;
    border: 2px solid var(--pink);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}

.auth-logo-mark {
    display: block;
    margin: 0 auto 1rem;
    border-radius: 20px;
    border: 3px solid var(--neon);
}

.auth-card-big h1 { font-size: 2.25rem !important; }

/* Dashboard */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.dash-header-left { display: flex; align-items: center; gap: 0.85rem; }

.dash-logo-mark {
    border-radius: 14px;
    border: 2px solid var(--neon);
    box-shadow: 0 4px 16px rgba(57, 255, 20, 0.3);
}

.avatar-lg { width: 52px !important; height: 52px !important; border-width: 3px !important; }

.stats-grid-big { gap: 0.65rem; }

.stat-card-big {
    padding: 1.1rem 0.65rem !important;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
}

.stat-icon { margin-bottom: 0.35rem; opacity: 0.9; }
.stat-emoji { font-size: 1.5rem; line-height: 1; margin-bottom: 0.15rem; }

.stat-card-big .stat-val { font-size: 2.25rem !important; }

.gym-card-big {
    flex-wrap: wrap;
    padding: 1.15rem !important;
    background: linear-gradient(135deg, rgba(255,0,110,0.08), var(--bg-card));
    border-color: rgba(255, 0, 110, 0.35) !important;
}

.gym-card-icon { flex-shrink: 0; }

.action-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 110px;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: transform 0.15s, border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

.action-tile:active { transform: scale(0.96); }

.action-tile-primary {
    grid-column: 1 / -1;
    min-height: 140px;
    background: linear-gradient(135deg, var(--pink), #b8004a);
    border-color: var(--neon);
    box-shadow: 0 10px 40px rgba(255, 0, 110, 0.35);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.action-tile-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    pointer-events: none;
}

.action-tile-primary img:not(.action-tile-bg),
.action-tile-primary .action-tile-label,
.action-tile-primary .action-tile-sub {
    position: relative;
    z-index: 1;
}

.action-tile-primary .action-tile-label {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 2px;
}

.action-tile-label { font-weight: 700; font-size: 0.95rem; }
.action-tile-sub { font-size: 0.8rem; opacity: 0.85; }
.action-tile-emoji { font-size: 2rem; line-height: 1; }

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.35rem !important;
}

.workout-item-big {
    min-height: var(--touch);
    padding: 1rem 1.1rem !important;
}

.workout-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(57, 255, 20, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workout-item-big { gap: 0.85rem !important; }

.workout-item-arrow {
    font-size: 1.75rem;
    color: var(--neon);
    font-weight: 300;
    margin-left: auto;
}


/* (bottom nav – lásd fent a lebegő dock stílust) */

/* Edzés oldal – nagyobb timer */
.timer-display { font-size: 4.5rem !important; }

.btn-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.4rem !important;
}

.set-check {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
}

.warmup-toggle {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.75rem !important;
}

.rpe-btn, .mood-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem !important;
}

.mood-btn { min-width: 52px !important; min-height: 52px !important; font-size: 1.4rem !important; }

.chip {
    padding: 0.65rem 1rem !important;
    font-size: 0.88rem !important;
    min-height: 44px;
}

.history-actions .btn { min-height: var(--touch) !important; font-size: 1rem !important; }

/* Asztali böngésző: get-app kapu – nincs app használat */

.api-key-notice {
    background: rgba(255, 230, 0, 0.08);
    border: 2px solid var(--yellow);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.api-key-notice strong { color: var(--yellow); display: block; margin-bottom: 0.5rem; font-size: 1rem; }
.api-key-notice ol { margin: 0.5rem 0 0.5rem 1.1rem; padding: 0; }
.api-key-notice li { margin-bottom: 0.35rem; }
.api-key-notice a { color: var(--neon); }
.api-key-notice code { background: var(--bg-elevated); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.85rem; }
.api-key-hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }

/* Page bannerek – nagyobb, logó alatt */
.page-app .page-banner {
    margin-top: calc(var(--safe-top) + 5.75rem);
}

.page-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    min-height: 168px;
    border: 2px solid rgba(57, 255, 20, 0.35);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}

.page-banner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,13,13,0.96) 0%, rgba(13,13,13,0.35) 55%, rgba(13,13,13,0.15) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.15rem 1.2rem 1.2rem;
}

.page-banner-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}

.page-banner-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.78);
    margin-top: 0.3rem;
}

.compact-header { margin-bottom: 0.75rem; }

/* Edzés – prestart képernyő */
.workout-prestart { text-align: left; }

.prestart-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.prestart-visual {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 1rem 1.25rem;
}

.prestart-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.prestart-visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 18, 0.15) 0%, rgba(13, 13, 18, 0.92) 100%);
}

.prestart-visual .brand {
    position: relative;
    z-index: 1;
}

.prestart-content {
    padding: 1.15rem 1.1rem 1.25rem;
}

.prestart-kicker {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pink);
    margin-bottom: 0.35rem;
}

.prestart-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
    line-height: 1;
}

.prestart-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 1.15rem;
    line-height: 1.45;
}

.prestart-back { margin-top: 0.65rem; }

.btn-reset {
    border: none;
    font: inherit;
    cursor: pointer;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

.btn-mega {
    min-height: 72px !important;
    font-size: 1.35rem !important;
    font-family: var(--font-display);
    letter-spacing: 3px;
    border-radius: 20px !important;
    margin-bottom: 0.75rem;
    box-shadow: 0 10px 40px rgba(57,255,20,0.35);
}

.btn-mega-visual {
    flex-direction: column;
    gap: 0.35rem;
    min-height: 120px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.85rem !important;
}

.btn-mega-img {
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(255, 0, 110, 0.25);
}

.workout-active.hidden { display: none !important; }
.workout-prestart.hidden { display: none !important; }

.journal-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rest-deco {
    margin: 0 auto 0.5rem;
    opacity: 0.85;
    border-radius: 12px;
}

.modal-banner {
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem;
    height: 100px;
    object-fit: cover;
    border-radius: 0;
}

.profile-hero-img {
    width: 100%;
    max-width: 280px;
    height: 100px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 auto 0.75rem;
    display: block;
    border: 2px solid var(--pink);
}

.profile-avatar-icon {
    border: 3px solid var(--neon);
    border-radius: 50%;
}

.stat-card-big {
    background-size: cover;
    background-position: center;
}

.dashboard-page .dash-header { margin-top: -0.5rem; }

.dashboard-page .page-title { font-size: 1.25rem; }

/* Nagy beköszönő hero */
.welcome-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 280px;
    margin-bottom: 1.15rem;
    border: 2px solid rgba(57, 255, 20, 0.45);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(255, 0, 110, 0.15);
}

.welcome-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.welcome-hero-grain {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, var(--graffiti-a) 0%, transparent 45%),
        var(--hero-overlay);
    pointer-events: none;
}

.welcome-hero-overlay {
    position: relative;
    z-index: 2;
    padding: calc(var(--safe-top) + 7.25rem) 1.15rem 1.35rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.welcome-hero-top {
    position: absolute;
    top: calc(var(--safe-top) + 0.65rem);
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.welcome-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.welcome-install-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--neon);
    background: rgba(13, 13, 18, 0.85);
    box-shadow: 0 4px 16px rgba(57, 255, 20, 0.35);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.welcome-install-btn:active {
    transform: scale(0.94);
}

.welcome-install-btn img {
    width: 22px;
    height: 22px;
}

.install-fallback-sub {
    margin-top: 0.5rem !important;
    font-size: 0.85rem !important;
}

.welcome-hero-logo {
    border-radius: 16px;
    border: 3px solid var(--neon);
    box-shadow: 0 6px 24px rgba(57, 255, 20, 0.4);
}

.welcome-avatar-link { display: block; }

.welcome-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--pink);
    box-shadow: 0 4px 16px rgba(255, 0, 110, 0.45);
    background: var(--bg-card);
}

.welcome-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.welcome-title {
    font-family: var(--font-display);
    line-height: 0.92;
    margin-bottom: 0.5rem;
}

.welcome-csa {
    display: block;
    font-size: clamp(2rem, 8vw, 2.75rem);
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}

.welcome-name {
    display: block;
    font-size: clamp(3.2rem, 14vw, 4.75rem);
    letter-spacing: 0.04em;
    color: var(--neon);
    text-shadow:
        0 0 30px rgba(57, 255, 20, 0.55),
        0 4px 0 var(--pink),
        0 8px 24px rgba(0, 0, 0, 0.9);
    animation: welcomePop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.welcome-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    max-width: 20rem;
}

.welcome-deco {
    position: absolute;
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
}

.welcome-deco-left {
    width: 100px;
    left: 0;
    bottom: 20px;
}

.welcome-deco-right {
    width: 80px;
    right: 10px;
    top: 40%;
}

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

/* Képstrip – gyors linkek */
.visual-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-bottom: 1.15rem;
}

.visual-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 88px;
    border: 2px solid var(--border);
    text-decoration: none;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s, border-color 0.15s;
}

.visual-card:active {
    transform: scale(0.96);
    border-color: var(--neon);
}

.visual-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-card-img-svg {
    object-fit: cover;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.visual-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 60%);
}

.visual-card-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.45rem;
    z-index: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.visual-card-workout { border-color: rgba(255, 0, 110, 0.5); }
.visual-card-history { border-color: rgba(0, 212, 255, 0.45); }
.visual-card-profile { border-color: rgba(57, 255, 20, 0.45); }

.stats-grid-visual .stat-card-visual {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    padding: 0.85rem 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-card);
}

.stats-snapshot {
    margin-bottom: 1.15rem;
}

.stat-card-glow {
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    opacity: 0.35;
    pointer-events: none;
}

.stat-card-workouts .stat-card-glow { background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, transparent 70%); }
.stat-card-streak .stat-card-glow { background: radial-gradient(circle, rgba(57, 255, 20, 0.45) 0%, transparent 70%); }
.stat-card-week .stat-card-glow { background: radial-gradient(circle, rgba(255, 0, 110, 0.45) 0%, transparent 70%); }

.stat-card-icon-wrap {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 0.15rem;
}

.stat-card-icon-emoji {
    font-size: 1.15rem;
    line-height: 1;
}

.stats-snapshot .stat-val {
    position: relative;
    z-index: 1;
    font-size: 2rem !important;
}

.stats-snapshot .stat-label {
    position: relative;
    z-index: 1;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gym-card-visual {
    position: relative;
    overflow: hidden;
}

.gym-card-bg {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    opacity: 0.2;
    pointer-events: none;
}

.gym-card-visual .gym-card-icon,
.gym-card-visual .gym-info,
.gym-card-visual .btn {
    position: relative;
    z-index: 1;
}

.gym-card-kicker {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pink);
    margin-bottom: 0.15rem;
}

.action-tile-img {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    padding: 0;
    justify-content: flex-end;
}

.action-tile-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.action-tile-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.82) 100%);
    pointer-events: none;
}

.action-tile-img .action-tile-label {
    position: relative;
    z-index: 1;
    padding: 0.75rem 0.65rem 0.85rem;
    width: 100%;
    font-size: 0.88rem;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.action-tile-mini-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.28;
    pointer-events: none;
}

.action-tile-img .action-tile-emoji,
.action-tile-img .action-tile-label,
.action-tile-img .action-tile-icon {
    position: relative;
    z-index: 1;
}

.action-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.action-tiles-visual .action-tile-primary {
    min-height: 155px;
}

.action-tiles-visual .action-tile-primary .action-tile-label {
    font-size: 1.65rem !important;
    letter-spacing: 0.12em !important;
}

.section-title-big {
    font-family: var(--font-display);
    font-size: 1.35rem !important;
    letter-spacing: 0.08em;
    gap: 0.5rem !important;
}

.workout-item-visual {
    padding: 0 !important;
    overflow: hidden;
    align-items: center !important;
    gap: 0 !important;
}

.workout-item-thumb {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    overflow: hidden;
}

.workout-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.workout-item-visual .workout-item-info {
    padding: 0.75rem 0.5rem 0.75rem 0;
}

.empty-state-visual {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: 20px;
}

.empty-state-visual img {
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.empty-state-visual p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.recent-section-visual {
    margin-bottom: 0.5rem;
}

/* Profil – nagy köszönés */
.profile-welcome {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 220px;
    margin-bottom: 1.15rem;
    border: 2px solid rgba(255, 0, 110, 0.4);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.profile-welcome-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-welcome-overlay {
    position: relative;
    z-index: 1;
    min-height: 220px;
    padding: calc(var(--safe-top) + 3rem) 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.75rem;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.96) 0%, rgba(13, 13, 13, 0.55) 55%, rgba(13, 13, 13, 0.35) 100%);
}

.profile-welcome-logo-wrap {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

.profile-welcome-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 22px;
    border: 3px solid var(--neon);
    background: rgba(13, 13, 13, 0.75);
    padding: 8px;
    box-shadow:
        0 0 32px rgba(57, 255, 20, 0.55),
        0 8px 28px rgba(0, 0, 0, 0.55),
        inset 0 0 20px rgba(57, 255, 20, 0.08);
}

.profile-welcome-text {
    text-align: center;
}

.profile-welcome-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 10vw, 3rem);
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.profile-welcome-title span {
    color: var(--neon);
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.45);
}

.profile-welcome-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-avatar-compact {
    text-align: center;
    padding: 0.75rem 0 1rem !important;
    background: transparent !important;
    border: none !important;
}

.profile-avatar-compact strong {
    font-size: 1.1rem;
    display: block;
}

.profile-avatar-compact small {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.graffiti-bg::before {
    display: none;
}

/* Globális animált loading */
body.is-loading { overflow: hidden; }

.gz-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(8, 8, 10, 0.82);
    /* rejtve SOHA ne legyen backdrop-blur – WebKit-en opacity:0 mellett is homályosít */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
}

.gz-loader-overlay.is-visible,
body.is-page-loading .gz-loader-overlay {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* csak látható, nem-splash loaderen legyen blur (menüátmenet) */
.gz-loader-overlay.is-visible.is-nav-transit,
body.is-page-loading.is-navigating .gz-loader-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gz-loader {
    text-align: center;
    position: relative;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Egyszerű loading – csak 3 pont animáció */
.gz-loader-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.gz-pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neon);
    animation: gzDotPulse 0.9s ease-in-out infinite;
}

.gz-pulse-dot:nth-child(2) {
    animation-delay: 0.15s;
    background: #58CC02;
}

.gz-pulse-dot:nth-child(3) {
    animation-delay: 0.3s;
    background: var(--pink);
}

@keyframes gzDotPulse {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.35; }
    40% { transform: scale(1); opacity: 1; }
}

.gz-loader-text {
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gz-loader-rings,
.gz-loader-bar,
.gz-loader-mark,
.gz-loader-line {
    display: none !important;
}

@keyframes gzSpin { to { transform: rotate(360deg); } }

@keyframes gzPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes gzBar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
    position: relative;
}

.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.45em;
    vertical-align: -0.12em;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: gzSpin 0.7s linear infinite;
}

.btn-neon .btn-spinner,
.btn-pink .btn-spinner {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #000;
}

.inline-loader {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.75rem 0;
}

.inline-loader .btn-spinner {
    margin: 0;
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: var(--neon);
}

/* ===== Mobil űrlapok – ne legyen összenyomva ===== */
.form { display: flex; flex-direction: column; gap: 1rem; }

.form-group { gap: 0.45rem; margin-bottom: 0; }

.form-row-2 {
    gap: 1rem;
}

@media (max-width: 480px) {
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.form-row {
    flex-direction: column;
    gap: 0.75rem;
}

.modal-content {
    padding: 1.25rem 1rem calc(1.25rem + var(--safe-bottom));
    max-height: 92dvh;
}

.modal-content .input,
.modal-content .journal-textarea,
.modal-content select {
    width: 100%;
    min-height: var(--touch);
    font-size: 16px;
}

.journal-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.45;
}

.field-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.rpe-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.mood-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rpe-btn, .mood-btn {
    min-height: 44px;
    min-width: 44px;
}

.profile-form {
    gap: 1.1rem;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ===== Testrész választó ===== */
.body-map-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.body-map-head {
    margin-bottom: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.body-gender-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(57, 255, 20, 0.15);
    border: 1px solid var(--neon);
    color: var(--neon);
}

.dashboard-body-map {
    margin-bottom: 1.15rem;
}

.exercise-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.65rem;
}

.exercise-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    flex-shrink: 0;
    padding: 0;
}

.suggestion-item:not(.suggestion-icon) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
}

.suggestion-item:not(.suggestion-icon) .exercise-thumb,
.suggestion-item:not(.suggestion-icon) .suggestion-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 140px;
    border-radius: 0;
    border: none;
}

.body-map-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
}

.body-map-gender,
.body-map-view {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.body-gender-btn,
.body-view-btn {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.body-gender-btn.active,
.body-view-btn.active {
    border-color: var(--neon);
    background: rgba(57, 255, 20, 0.12);
    color: var(--neon);
}

.body-map-figure-wrap {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0.35rem;
    background: transparent;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    max-width: 100%;
}

.body-figure-no-bg {
    background: transparent !important;
}

.body-figure-no-bg .body-figure-img {
    background: transparent;
    mix-blend-mode: normal;
    filter: none;
}

.body-figure {
    position: relative;
    width: min(340px, 94vw);
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    background: transparent;
}

.body-figure-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: none;
}

.body-figure-zones {
    position: absolute;
    inset: 0;
}

.body-zone {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: none;
}

.body-zone-label {
    font-size: clamp(0.55rem, 2.2vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    pointer-events: none;
    line-height: 1.1;
    text-align: center;
    padding: 0.1rem;
}

.body-zone:focus-visible {
    outline: 2px solid #58CC02;
    outline-offset: 1px;
}

.body-zone.is-active {
    background: rgba(88, 204, 2, 0.28);
    border-color: #58CC02;
    box-shadow: none;
}

.body-zone.is-active .body-zone-label {
    color: #fff;
}

.body-zone.is-heat {
    background: rgba(88, 204, 2, calc(0.12 + var(--heat, 0.5) * 0.35));
    border-color: rgba(88, 204, 2, 0.65);
    box-shadow: none;
}

.body-map-svg {
    width: min(180px, 55vw);
    height: auto;
    display: block;
}

.body-skin {
    fill: #2a2a2a;
    stroke: #444;
    stroke-width: 1;
}

.body-part {
    fill: rgba(255, 255, 255, 0.08);
    stroke: #555;
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.15s, stroke 0.15s;
}

.body-part.is-active {
    fill: rgba(255, 0, 110, 0.55);
    stroke: var(--neon);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.45));
}

.body-map-readonly .body-zone {
    cursor: default;
    pointer-events: none;
}

.body-map-readonly .body-map-figure-wrap {
    margin-bottom: 0;
}

.is-loading-figure {
    min-height: 360px;
    opacity: 0.5;
}

.body-map-error {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

.body-map-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    min-height: 28px;
}

.body-map-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.body-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.body-chip.is-on {
    background: rgba(57, 255, 20, 0.15);
    border-color: var(--neon);
    color: var(--neon);
}

.body-chip-btn {
    cursor: pointer;
    min-height: 36px;
}

.body-chip-hint {
    font-style: italic;
    border-style: dashed;
}

.body-map-compact .body-figure {
    width: min(280px, 88vw);
}

.body-map-readonly .body-zone-label {
    font-size: 0.5rem;
}

.body-map-compact .body-map-quick {
    display: none;
}

/* ===== Legutóbbi edzések – mobil lista ===== */
.workout-item-recent {
    display: grid !important;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 0.75rem !important;
    padding: 0.85rem 0.9rem !important;
    min-height: 76px;
    text-align: left;
    width: 100%;
    border: none;
    font: inherit;
    color: inherit;
}

.workout-item-recent .workout-item-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(57, 255, 20, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workout-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.workout-item-title {
    display: block;
    font-size: 0.98rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workout-item-body small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.workout-item-recent .workout-item-arrow {
    font-size: 1.35rem;
    color: var(--text-muted);
    padding-left: 0.25rem;
    flex-shrink: 0;
}

.workout-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.workout-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(255, 0, 110, 0.15);
    color: var(--pink);
    border: 1px solid rgba(255, 0, 110, 0.35);
}

.detail-tags { margin-top: 0.65rem; }

.workout-list { gap: 0.65rem !important; }

.finish-modal .finish-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

.finish-modal .field-label:first-of-type {
    margin-top: 0.5rem;
}

/* ===== Statisztika panel (fitness app stílus) ===== */
.stats-pro {
    margin: 1.25rem 0 1.5rem;
    background: linear-gradient(180deg, rgba(28, 28, 34, 0.98) 0%, rgba(18, 18, 24, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}

.stats-pro-premium {
    position: relative;
}

.stats-pro-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.45), rgba(255, 0, 110, 0.35), transparent);
    z-index: 2;
    pointer-events: none;
}

.stats-pro-head {
    position: relative;
    min-height: 96px;
    overflow: hidden;
    background: var(--stats-head-bg);
}

.stats-pro-head-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stats-pro-bar {
    position: absolute;
    bottom: 0;
    width: 8%;
    min-width: 22px;
    max-width: 36px;
    border-radius: 6px 6px 2px 2px;
    opacity: 0.85;
}

.stats-pro-bar-1 { left: 8%; height: 42%; background: linear-gradient(180deg, #ff4d9a, #FF006E); }
.stats-pro-bar-2 { left: 18%; height: 58%; background: linear-gradient(180deg, #7fff6a, #39FF14); opacity: 0.9; }
.stats-pro-bar-3 { left: 28%; height: 48%; background: linear-gradient(180deg, #ff4d9a, #FF006E); opacity: 0.75; }
.stats-pro-bar-4 { left: 38%; height: 68%; background: linear-gradient(180deg, #7fff6a, #39FF14); }

.stats-pro-ring-deco {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6px solid rgba(57, 255, 20, 0.35);
    box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.2);
}

.stats-pro-banner {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
    opacity: 0.55;
}

.stats-pro-head-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.15rem;
    background: linear-gradient(105deg, rgba(13, 13, 18, 0.94) 0%, rgba(13, 13, 18, 0.55) 55%, transparent 100%);
}

.stats-pro-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pink);
    margin-bottom: 0.15rem;
}

.stats-pro-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.08em;
    color: var(--neon);
    line-height: 1;
}

.stats-pro-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.stats-pro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    padding: 0.9rem;
}

.stats-pro-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 0.85rem;
}

.stats-pro-chart-card {
    grid-column: 1 / -1;
    background:
        linear-gradient(180deg, rgba(57, 255, 20, 0.04) 0%, transparent 40%),
        rgba(255, 255, 255, 0.03);
}

.stats-pro-card-title {
    font-family: var(--font-display);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.week-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.35rem;
    height: 120px;
    padding: 0 0.15rem;
}

.week-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.week-bar-top {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--neon);
    min-height: 1rem;
    margin-bottom: 0.2rem;
}

.week-bar-col:not(.has-data) .week-bar-top {
    color: transparent;
}

.week-bar-track {
    flex: 1;
    width: 100%;
    max-width: 36px;
    display: flex;
    align-items: flex-end;
    background: rgba(255,255,255,0.04);
    border-radius: 8px 8px 4px 4px;
    overflow: hidden;
}

.week-bar-fill {
    width: 100%;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, var(--neon) 0%, rgba(57,255,20,0.35) 100%);
    min-height: 4px;
    transition: height 0.4s ease;
}

.week-bar-col.has-data .week-bar-fill {
    box-shadow: 0 0 12px rgba(57,255,20,0.35);
}

.week-bar-day {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.stats-pro-ring-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}

.stat-ring {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.stat-ring-svg {
    width: 100%;
    height: 100%;
}

.stat-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 8;
}

.stat-ring-fill {
    fill: none;
    stroke: var(--pink);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.stat-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.stat-ring-center strong {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--text);
}

.stat-ring-center small {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-ring-label {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.stat-metric-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 0.8rem 0.75rem;
}

.stat-metric-icon-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
}

.stat-metric-icon-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.stat-metric-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.stat-metric-card strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

.stat-metric-card span:last-child {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-metric-neon .stat-metric-icon-wrap { background: rgba(57, 255, 20, 0.12); }
.stat-metric-pink .stat-metric-icon-wrap { background: rgba(255, 0, 110, 0.12); }
.stat-metric-volume .stat-metric-icon-wrap { background: rgba(0, 212, 255, 0.1); }

.stat-metric-neon strong { color: var(--neon); }
.stat-metric-pink strong { color: var(--pink); }
.stat-metric-volume strong { color: var(--blue); }

.stats-pro-heatmap-card {
    grid-column: 1 / -1;
    padding: 0.5rem 0.75rem 0.75rem;
}

.stats-pro-heatmap-card .body-map {
    background: transparent;
    border: none;
    padding: 0;
}

.stats-pro-heatmap-card .body-map-head {
    margin-bottom: 0.35rem;
}

.stats-pro-heatmap-card .body-map-title {
    font-size: 0.95rem;
}

/* ===== Edzés indítás panel ===== */
.launch-panel {
    margin: 1.35rem 0 1.5rem;
}

.launch-panel-head {
    margin-bottom: 0.75rem;
}

.launch-kicker {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--neon);
    margin-bottom: 0.2rem;
}

.launch-panel-title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.06em;
    line-height: 1;
}

.launch-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border: 2px solid rgba(255, 0, 110, 0.45);
    box-shadow:
        0 16px 48px rgba(255, 0, 110, 0.28),
        0 0 0 1px rgba(57, 255, 20, 0.12) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.launch-hero-animated {
    animation: launchFloat 4s ease-in-out infinite;
}

.launch-hero-animated::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        120deg,
        rgba(57, 255, 20, 0.0) 0%,
        rgba(57, 255, 20, 0.65) 35%,
        rgba(255, 0, 110, 0.75) 65%,
        rgba(57, 255, 20, 0.0) 100%
    );
    background-size: 220% 220%;
    animation: launchBorderSpin 4.5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.launch-hero--live {
    animation: launchFloat 2.2s ease-in-out infinite, launchLiveGlow 1.6s ease-in-out infinite;
    border-color: rgba(57, 255, 20, 0.65);
}

.launch-hero-compact {
    min-height: 148px;
}

.launch-hero:active {
    animation-play-state: paused;
    transform: scale(0.985);
}

.launch-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transform: scale(1.08);
    animation: launchBgDrift 10s ease-in-out infinite alternate;
}

.launch-hero-shade {
    position: absolute;
    inset: 0;
    background: var(--launch-shade);
    pointer-events: none;
    animation: launchShadePulse 5s ease-in-out infinite;
}

.launch-hero-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    animation: launchShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.launch-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.25rem 1rem;
    text-align: center;
}

.launch-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--pink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    animation: launchPlayBounce 1.6s ease-in-out infinite;
}

.launch-play svg {
    animation: launchPlayIcon 1.6s ease-in-out infinite;
    transform-origin: center;
}

.launch-title {
    font-family: var(--font-display);
    font-size: 1.85rem;
    letter-spacing: 0.1em;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    animation: launchTitlePulse 2.8s ease-in-out infinite;
}

.launch-hero-compact .launch-title {
    font-size: 1.55rem;
}

.launch-sub {
    font-size: 0.82rem;
    opacity: 0.92;
    max-width: 260px;
    line-height: 1.35;
    animation: launchSubFade 2.8s ease-in-out infinite;
}

.launch-secondary-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 108px;
    padding: 0.75rem;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card);
    color: inherit;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease;
    animation: launchSecondaryFloat 4.5s ease-in-out infinite;
}

.launch-secondary-btn:nth-child(2) {
    animation-delay: 0.8s;
}

.launch-secondary-btn:active {
    transform: scale(0.97);
    animation-play-state: paused;
}

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

@keyframes launchLiveGlow {
    0%, 100% { box-shadow: 0 16px 48px rgba(255, 0, 110, 0.28), 0 0 0 0 rgba(57, 255, 20, 0.2); }
    50% { box-shadow: 0 20px 52px rgba(57, 255, 20, 0.35), 0 0 0 8px rgba(57, 255, 20, 0); }
}

@keyframes launchBorderSpin {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes launchBgDrift {
    0% { transform: scale(1.08) translate(0, 0); }
    100% { transform: scale(1.14) translate(-2%, -1.5%); }
}

@keyframes launchShadePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

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

@keyframes launchPlayBounce {
    0%, 100% { transform: scale(1) translateY(0); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
    50% { transform: scale(1.08) translateY(-3px); box-shadow: 0 14px 32px rgba(255, 0, 110, 0.35); }
}

@keyframes launchPlayIcon {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes launchTitlePulse {
    0%, 100% { letter-spacing: 0.1em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
    50% { letter-spacing: 0.14em; text-shadow: 0 2px 18px rgba(255, 0, 110, 0.45); }
}

@keyframes launchSubFade {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

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

.launch-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item-hero .nav-icon-wrap,
    .nav-svg-workout .nav-dumbbell-left,
    .nav-svg-workout .nav-dumbbell-right,
    .nav-home.active .nav-home-base,
    .nav-history.active .nav-history-line-1,
    .nav-history.active .nav-history-line-2,
    .nav-history.active .nav-history-line-3,
    .nav-history.active .nav-history-check,
    .nav-profile.active .nav-profile-head,
    .nav-spark,
    .nav-pulse,
    .launch-hero-animated,
    .launch-hero-bg,
    .launch-hero-shade,
    .launch-hero-shimmer,
    .launch-play,
    .launch-play svg,
    .launch-title,
    .launch-sub,
    .launch-secondary-btn {
        animation: none !important;
    }

    .launch-hero-animated::after {
        animation: none !important;
        background: rgba(255, 0, 110, 0.35);
    }
}

.launch-secondary-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    pointer-events: none;
}

.launch-secondary-btn span {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.25;
}

/* Nincs vízszintes húzás / kilógás */
.page-app,
.page-auth,
.welcome-hero,
.profile-welcome,
.visual-strip,
.stats-pro,
.stats-grid,
.launch-panel,
.action-tiles,
.recent-section,
.body-map-section,
.modal-content,
.bottom-nav {
    max-width: 100%;
    overflow-x: clip;
}


/* === Workout UX: plan + compact sets (mobile-first v2.9.2) === */
.plan-setup {
    margin: 0.75rem 0 1rem;
    text-align: left;
    padding: 0.75rem 0.7rem 0.85rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--neon) 28%, var(--border));
    background: color-mix(in srgb, var(--neon) 6%, var(--bg-card));
}

.plan-body-map {
    margin-bottom: 0.75rem;
}

.plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.plan-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    margin: 0;
}

.plan-hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0 0 0.65rem;
    line-height: 1.35;
}

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.plan-item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.7rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-elevated);
}

.plan-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.plan-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.plan-item-main strong {
    font-size: 0.98rem;
    line-height: 1.25;
}

.plan-item-main small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.plan-item-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0.45rem;
}

.plan-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.plan-field > span {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
}

.plan-stepper {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    gap: 0.25rem;
    align-items: stretch;
}

.plan-set-btn {
    min-width: 40px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
}

.plan-input {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    text-align: center;
    font-size: 16px; /* iOS zoom elkerülés */
    font-weight: 700;
    padding: 0.35rem 0.25rem;
    -webkit-appearance: none;
    appearance: none;
}

.plan-input:focus {
    outline: none;
    border-color: var(--neon);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 25%, transparent);
}

.plan-remove {
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
}

.plan-empty { padding: 1rem 0.5rem !important; }

@media (max-width: 380px) {
    .plan-item-grid {
        grid-template-columns: 1fr;
    }

    .plan-stepper {
        grid-template-columns: 48px 1fr 48px;
    }
}

.muscle-group-header {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 1rem 0 0.45rem;
    padding: 0 0.15rem;
}

.suggestion-group:not(.suggestion-group-icons) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.suggestion-group-title {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
}

.exercise-header-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.exercise-thumb-sm {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #0a0a10;
}

.set-cards-compact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0.55rem;
}

.set-row-head,
.set-row-compact {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: 0.35rem;
    align-items: center;
}

.set-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
}

.set-row-head {
    padding: 0 0.1rem;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    align-items: center;
}

.set-row-compact {
    padding: 0.4rem 0.2rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.set-row-compact.done {
    border-color: color-mix(in srgb, var(--neon) 40%, var(--border));
    background: color-mix(in srgb, var(--neon) 10%, var(--bg-card));
}

.set-row-compact.warmup { opacity: 0.72; }

.set-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.set-field-label {
    display: none;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
}

.set-num-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
}

.set-num-btn.on,
.set-num-btn.warmup-toggle.on {
    background: var(--blue, #4da3ff);
    color: #000;
    border-color: transparent;
}

.set-prev {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.55rem;
}

.set-row-compact .set-weight,
.set-row-compact .set-reps {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0.3rem;
    -webkit-appearance: none;
    appearance: none;
}

.set-row-compact .set-weight:focus,
.set-row-compact .set-reps:focus {
    outline: none;
    border-color: var(--neon);
}

.set-row-compact .set-check {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
}

.set-row-compact .set-check.done {
    background: var(--neon);
    border-color: var(--neon);
    color: #000;
}

.exercise-block .exercise-demo { display: none; }

.exercise-block .add-set-btn {
    min-height: 44px;
    touch-action: manipulation;
}

#launchEmptyBtn {
    margin-top: 0.35rem;
    opacity: 0.85;
}

/* Prestart + modal mobil */
@media (max-width: 640px) {
    .prestart-visual {
        min-height: 110px;
        max-height: 130px;
    }

    .prestart-title {
        font-size: 1.65rem;
    }

    .prestart-content {
        padding: 0.9rem 0.85rem calc(0.9rem + var(--safe-bottom));
    }

    .workout-page .launch-hero-compact {
        min-height: 72px;
    }

    .set-field-label { display: none; }

    .set-row-head {
        grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 44px;
    }

    .set-row-compact {
        grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 44px;
        grid-template-areas: none;
        align-items: center;
        gap: 0.3rem 0.35rem;
        padding: 0.4rem 0.3rem;
    }

    #exerciseModal .modal-content {
        max-height: min(94dvh, 900px);
        padding-bottom: calc(1rem + var(--safe-bottom));
    }

    .exercise-modal-sheet .exercise-suggestions {
        min-height: 180px;
        max-height: min(48vh, 420px);
    }

    .workout-actions {
        position: sticky;
        bottom: calc(var(--nav-h, 64px) + var(--safe-bottom) + var(--vv-bottom));
        z-index: 5;
        padding: 0.5rem 0 0.25rem;
        background: linear-gradient(180deg, transparent, var(--bg) 35%);
    }
}

/* === v3.0 – látványos, de egyszerű (streak-fókusz + splash logo) === */

.page-app .app-main {
    scroll-margin-top: calc(var(--safe-top) + var(--logo-clearance-top));
    padding-top: calc(var(--safe-top) + var(--logo-clearance-top));
}

.page-app .app-main.home-page {
    /* Főoldal hero a logó mellett */
    padding-top: calc(var(--safe-top) + 0.55rem);
}
/* Összes app fül: cím felül, mint az edzés */
.page-app .app-main.profile-page,
.page-app .app-main.history-simple,
.page-app .app-main.workout-page,
.page-app .app-main.gym-page,
.page-app .app-main.league-page,
.page-app .app-main.onboarding-page {
    padding-top: calc(var(--safe-top) + 0.55rem);
}

.bottom-nav-simple .bottom-nav-shell {
    border-radius: 22px;
    padding: 0.55rem 0.45rem 0.6rem;
    background: #0A1216;
    border: 2px solid rgba(88, 204, 2, 0.55);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 0 32px rgba(88, 204, 2, 0.22);
}

.bottom-nav-simple .nav-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border-color: transparent;
}

.bottom-nav-simple .nav-item.active .nav-icon-wrap {
    background: rgba(57, 255, 20, 0.12);
    border-color: rgba(57, 255, 20, 0.25);
}

.bottom-nav-simple .nav-workout.active .nav-icon-wrap {
    background: rgba(255, 0, 110, 0.12);
    border-color: rgba(255, 0, 110, 0.25);
}

.bottom-nav-simple .nav-pulse,
.bottom-nav-simple .nav-spark,
.bottom-nav-simple .nav-active-dot {
    display: none;
}

.bottom-nav-simple .nav-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.68rem;
    font-weight: 600;
}

/* Home */
.home-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.35rem;
}

.home-page.home-duo {
    gap: 1.15rem;
}

.home-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-height: 44px;
}

.home-top-offset {
    padding-left: var(--logo-clearance-left);
    min-height: 3.25rem;
}

.home-top-spacer {
    flex: 1;
}

.home-top-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.home-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.home-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--neon), #1a8f0a);
    color: #041204;
    font-weight: 800;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 1rem;
}

.duo-topbar .home-rank-badge,
.home-rank-badge {
    --rank-accent: #89E219;
    --pct: 0;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
}
.home-rank-badge.hidden { display: none; }
.home-rank-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 2;
}
.home-rank-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 3;
}
.home-rank-ring-fill {
    fill: none;
    stroke: var(--rank-accent, #89E219);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--pct, 0));
    transition: stroke-dashoffset 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rank-accent, #89E219) 60%, transparent));
}
.home-rank-badge-media {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    overflow: hidden;
    background: #0b1216;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.home-rank-badge-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    /* A JPG-n a medál kisebb a keretnél — erősen ránagyítunk, hogy kitöltse a kört */
    transform: scale(1.92);
    transform-origin: center;
}

.streak-hero {
    text-align: center;
    padding: 0.35rem 0.1rem 0.15rem;
}

.streak-hero-visual {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 320px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.streak-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transform: none;
    animation: none;
    filter: saturate(1.28) contrast(1.08) brightness(1.04);
    z-index: 0;
}

.streak-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(19, 31, 36, 0.12) 0%, rgba(19, 31, 36, 0.28) 38%, rgba(19, 31, 36, 0.86) 76%, rgba(19, 31, 36, 0.98) 100%),
        radial-gradient(ellipse at 78% 28%, color-mix(in srgb, var(--rank-accent, #89E219) 42%, transparent), transparent 52%),
        radial-gradient(ellipse at 22% 20%, rgba(57, 255, 20, 0.22), transparent 50%),
        radial-gradient(ellipse at 50% 92%, color-mix(in srgb, var(--rank-accent, #89E219) 28%, transparent), transparent 55%);
    animation: none;
    transition: background 0.45s ease;
    pointer-events: none;
}

.streak-rank-block {
    margin: 0.45rem auto 0;
    max-width: 240px;
}
.streak-rank-block.hidden { display: none; }
.streak-rank-caption {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: color-mix(in srgb, var(--rank-accent, #89E219) 78%, #fff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.streak-rank-progress {
    margin: 0.45rem auto 0;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.streak-rank-progress-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--rank-accent, #89E219) 35%, #fff),
        var(--rank-accent, #89E219));
    box-shadow: 0 0 12px color-mix(in srgb, var(--rank-accent, #89E219) 55%, transparent);
    transition: width 0.75s cubic-bezier(0.2, 0.9, 0.25, 1);
    overflow: hidden;
}
.streak-rank-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: rankBarShine 2.2s ease-in-out infinite;
}
.streak-rank-progress-meta {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.7);
}
@keyframes rankBarShine {
    0%, 45% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* régi változatok */
.streak-hero-rank,
.streak-rank-ink,
.streak-rank-chip,
.streak-rank-seal,
.streak-rank-mark { display: none !important; }

.streak-hero-visual::after {
    content: none;
    display: none;
}

.streak-hero-content {
    position: relative;
    z-index: 2;
    padding: 1.55rem 1.05rem 1.7rem;
}

.home-hello {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 0.55rem;
    text-shadow: none;
}

.streak-flame {
    font-size: 4.1rem;
    line-height: 1;
    display: inline-block;
    animation: streakPulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(255, 140, 0, 0.55));
    transform-origin: 50% 80%;
}

.streak-flame.is-cold {
    animation: none;
    filter: none;
    opacity: 0.85;
}

@keyframes streakPulse {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    40% { transform: scale(1.1) rotate(3deg); }
    70% { transform: scale(0.98) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .streak-flame { animation: none; }
}

.streak-num {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 20vw, 5.8rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin-top: 0.1rem;
    color: #fff;
    text-shadow: none;
}

.streak-label {
    font-weight: 800;
    font-size: 1.2rem;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.92);
}

.streak-hint {
    color: rgba(245, 245, 245, 0.78);
    font-size: 1rem;
    font-weight: 650;
    margin-top: 0.45rem;
    line-height: 1.3;
}

.week-strip {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.35rem 0.15rem 0.5rem;
    box-shadow: none;
}

.week-strip-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.85rem;
    color: rgba(240, 240, 240, 0.65);
    font-size: 0.95rem;
    font-weight: 700;
}

.week-strip-head strong {
    color: var(--duo-green, var(--neon));
    font-size: 1.2rem;
    font-weight: 800;
}

.week-dots {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.35rem;
}

.week-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.week-dot-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #041204;
}

.week-dot.is-done .week-dot-mark {
    background: var(--neon);
    border-color: var(--neon);
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.35);
}

.week-dot.is-today .week-dot-mark {
    border-color: var(--pink);
}

.week-dot.is-today:not(.is-done) .week-dot-mark {
    box-shadow: inset 0 0 0 2px rgba(255, 0, 110, 0.25);
}

.week-dot-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 700;
}

.home-cta {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.15rem 0 0.25rem;
}

.home-start {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: var(--neon);
    color: #041204;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(57, 255, 20, 0.28);
    min-height: var(--touch-lg);
    border: none;
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
    overflow: visible;
}

/* Duo primary CTA slab */
.home-start-duo {
    justify-content: center;
    gap: 0.75rem;
    min-height: 58px;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: var(--duo-green);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 0;
    border-bottom: 4px solid var(--duo-green-dark);
    box-shadow: none;
    overflow: visible;
    z-index: 1;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
    filter: none;
}

.home-start-duo::before {
    display: none;
}

.home-start-duo .home-start-icon,
.home-start-duo .home-start-text {
    position: relative;
    z-index: 1;
}

.home-start-duo .home-start-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.14);
    color: #fff;
    backdrop-filter: none;
}

.home-start-duo .home-start-text {
    align-items: flex-start;
}

.home-start-duo.home-start-block .home-start-text {
    align-items: center;
}

.home-start-duo .home-start-text strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: none;
}

.home-start-duo .home-start-text small {
    opacity: 0.92;
    font-size: 0.84rem;
}

.home-start-duo:hover {
    filter: none;
}

.home-start-duo:active,
.home-start-duo.is-pressed {
    transform: translateY(4px);
    border-bottom-width: 0;
    box-shadow: none;
}

.home-start-duo.is-live {
    background: var(--duo-blue);
    border-bottom-color: #1899D6;
    box-shadow: none;
    color: #fff;
}

.home-start-duo.is-live:active,
.home-start-duo.is-live.is-pressed {
    box-shadow: none;
}

.home-start-visual {
    position: relative;
    min-height: 72px;
    color: #fff;
    background: var(--duo-green);
    box-shadow: none;
    overflow: hidden !important;
    border-radius: 16px;
    isolation: isolate;
}

.home-start-duo.home-start-visual {
    overflow: hidden !important;
    border-radius: 16px;
}

/* Nagy zöld CTA: nincs fotó / fényháttér */
.home-start-bg,
.home-start-shade {
    display: none !important;
}
.home-start-duo.home-start-visual,
.home-start-duo.home-start-ambient {
    background: var(--duo-green) !important;
    border-bottom-color: var(--duo-green-dark) !important;
    color: #fff !important;
}

.home-start-visual .home-start-icon,
.home-start-visual .home-start-text {
    position: relative;
    z-index: 1;
}

.home-start:active {
    transform: scale(0.98);
}

.home-start-duo:active {
    transform: translateY(6px);
}

.home-start.is-live .home-start-shade {
    background: linear-gradient(100deg, rgba(57, 255, 20, 0.75) 0%, rgba(13, 13, 18, 0.4) 50%, rgba(13, 13, 18, 0.85) 100%);
}

.home-start.is-live {
    color: #fff;
}

.home-start-block {
    justify-content: center;
}

.home-start-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.home-start-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.home-start-text strong {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
}

.home-start-text small {
    font-size: 0.82rem;
    opacity: 0.88;
    font-weight: 600;
}

.home-secondary-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    opacity: 0.92;
}

.home-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 84px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card);
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: 0.75rem;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.home-tile:active {
    transform: scale(0.98);
}

.home-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.home-tile span {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.88rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.home-cta-row {
    display: flex;
    justify-content: center;
    gap: 0.35rem 1rem;
    flex-wrap: wrap;
}

.home-link-btn {
    appearance: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.45rem 0.2rem;
    cursor: pointer;
}

.home-link-btn:active {
    color: var(--neon);
}

.home-link-btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.65rem;
}

.home-more {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(18, 18, 22, 0.72);
    overflow: hidden;
}

.home-more-toggle,
.home-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.05rem;
    font-weight: 700;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.home-more-toggle-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 0;
}

.home-more-toggle-text strong {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.home-more-toggle-text small,
.home-more > summary small {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(240, 240, 240, 0.5);
}

.home-more-chevron {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    position: relative;
}

.home-more-chevron::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
    transform: translate(-50%, -60%) rotate(45deg);
    transition: transform 0.18s ease;
}

.home-more[open] .home-more-chevron::before {
    transform: translate(-50%, -30%) rotate(225deg);
}

.home-more > summary::-webkit-details-marker { display: none; }

.home-more-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.15rem 0.7rem 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-more-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.home-more-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.home-more-item:active {
    transform: scale(0.985);
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.28);
}

.home-more-item-label {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.home-more-item-label strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.home-more-item-label small {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(240, 240, 240, 0.5);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-more-item-go {
    flex: 0 0 auto;
    color: rgba(240, 240, 240, 0.4);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.home-more-recent {
    padding: 0.15rem 0.15rem 0;
}

.home-more-recent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    padding: 0 0.15rem;
}

.home-more-recent-head h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.55);
}

.home-panel {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 0.9rem;
}

.home-panel-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-panel-row-tight {
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.home-panel-kicker {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-panel-title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: 0;
    margin: 0.1rem 0;
}

.home-panel-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.home-rank-visual {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.home-rank-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.home-rank-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,13,18,0.35), rgba(13,13,18,0.92));
}

.home-rank-row,
.home-rank-visual .home-bar {
    position: relative;
    z-index: 1;
}

.home-rank-visual .home-rank-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--rank-accent, var(--neon));
    color: var(--rank-accent, var(--neon));
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--rank-accent, var(--neon)) 12%, transparent);
}

.home-gym-visual {
    position: relative;
    overflow: hidden;
}

.home-gym-bg {
    position: absolute;
    right: -8%;
    top: -20%;
    width: 46%;
    height: 140%;
    object-fit: cover;
    opacity: 0.28;
    pointer-events: none;
}

.home-gym-visual > *:not(.home-gym-bg) {
    position: relative;
    z-index: 1;
}

.home-rank-lp {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.home-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 0.75rem;
    overflow: hidden;
}

.home-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--neon);
}

.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.home-stat {
    text-align: center;
    padding: 0.55rem 0.2rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
}

.home-stat strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
}

.home-stat span {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.home-stat-extra {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0.65rem;
    align-items: center;
}

.home-stat-note {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.home-gym {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workout-list-compact .workout-item {
    padding: 0.7rem 0.15rem;
}

.goal-celebration {
    border-radius: 14px;
    padding: 0.85rem 1rem;
    background: rgba(57, 255, 20, 0.1);
    border: 1px solid rgba(57, 255, 20, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
}

.goal-celebration strong { color: var(--neon); }

/* Landing simple */
.landing-simple {
    min-height: 100dvh;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.landing-stage {
    position: relative;
    flex: 1;
    min-height: 58dvh;
    overflow: hidden;
}

.landing-stage-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.landing-stage-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,13,13,0.25) 0%, rgba(13,13,13,0.55) 45%, rgba(13,13,13,0.98) 100%);
}

.landing-stage-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    padding: 0 1.5rem;
    text-align: center;
    z-index: 1;
}

.landing-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin: 0 auto 0.85rem;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

.landing-seo-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--neon, #58CC02) 75%, #fff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.landing-tagline {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
}
.landing-seo-lead {
    margin: 0.55rem auto 0;
    max-width: 18rem;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.landing-footer {
    padding: 1.25rem 1.35rem calc(1.5rem + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
}

.landing-mini-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    width: 100%;
    margin-bottom: 0.35rem;
}

.landing-mini-tiles img {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.9;
}

.landing-legal,
.get-app-legal,
.auth-legal {
    margin-top: 0.85rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
}
.landing-legal a,
.get-app-legal a,
.auth-legal a {
    color: var(--text-muted, #afafaf);
    text-decoration: none;
}
.landing-login-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.4rem;
}

.landing-login-link:active { color: var(--neon); }

/* Profile simple */
.profile-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-hero-visual {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(13,13,18,0.88) 0%, rgba(13,13,18,0.45) 100%);
}

.profile-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1rem;
}

.profile-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--pink), #8a0038);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.profile-name {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
}

.profile-email {
    color: rgba(240, 240, 240, 0.75);
    font-size: 0.85rem;
}

.profile-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.profile-quick-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 72px;
}

.profile-quick-item span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-quick-item strong {
    font-size: 0.95rem;
}

.profile-details .home-more-body {
    padding-top: 0.85rem;
}

.profile-logout {
    margin-top: 0.25rem;
}

.page-top-simple {
    margin-bottom: 1rem;
}
.page-top-simple.home-top-offset {
    min-height: 0;
}

.page-top-simple h1,
.page-top-visual h1 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0;
}

.page-top-simple p,
.page-top-visual p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Jobb felső cím – ugyanaz a hang + magasság, mint az edzés prestart topbar */
.page-topbar-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 3.35rem;
    padding: 0.15rem 0.05rem 0.55rem;
    margin: 0 0 0.85rem;
}
.page-topbar-end.home-top-offset {
    min-height: 3.35rem;
    padding-top: 0.15rem;
}
.page-topbar-end-copy {
    max-width: min(72%, 17rem);
    text-align: right;
}
.page-topbar-end h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1.55rem, 7vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: #fff;
}
.page-topbar-end p {
    margin: 0.2rem 0 0;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--text-muted);
}

.page-top-visual {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 128px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-top-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-top-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(13,13,18,0.9) 0%, rgba(13,13,18,0.45) 100%);
}

.page-top-copy {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1rem;
}

.page-top-visual p {
    color: rgba(240, 240, 240, 0.78);
}

.history-simple .history-actions {
    margin-bottom: 1rem;
}

.workout-prestart-simple .prestart-visual-bar {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    min-height: 160px;
    margin-bottom: 1rem;
    border: none;
    box-shadow: none;
}

.workout-prestart-simple .prestart-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workout-prestart-simple .prestart-visual-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(13,13,18,0.88) 0%, rgba(13,13,18,0.4) 100%);
}

.workout-prestart-simple .prestart-visual-copy {
    position: relative;
    z-index: 1;
    padding: 1.15rem 1rem;
}

.workout-prestart-simple .prestart-content {
    padding: 0.1rem 0 0;
}

.workout-prestart-simple .prestart-title {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    line-height: 1.1;
}

.workout-prestart-simple .prestart-sub {
    color: rgba(240, 240, 240, 0.78);
    margin: 0;
}

.workout-prestart-simple .home-start {
    margin-top: 0.5rem;
}

.plan-setup-focus {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.35rem 0.1rem 0.75rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.plan-step {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.plan-step-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.plan-step-head .plan-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
}

.plan-step-head .plan-hint {
    margin: 0.15rem 0 0;
}

.plan-step-head .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.plan-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--neon);
    color: #041204;
    font-weight: 800;
    font-size: 0.85rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.plan-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.6rem;
}

.plan-focus-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(57, 255, 20, 0.14);
    border: 1px solid rgba(57, 255, 20, 0.4);
    color: var(--neon);
    font-size: 0.8rem;
    font-weight: 700;
}

.plan-focus-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.plan-setup.has-focus {
    border-color: color-mix(in srgb, var(--neon) 45%, var(--border));
}

.plan-setup.plan-needs-focus {
    animation: planFocusPulse 0.7s ease 2;
    border-color: var(--pink);
}

@keyframes planFocusPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.35); }
}

.plan-body-map {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 16px;
    padding: 0.55rem 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.plan-recommended {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

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

.plan-recommended-list {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
}

.plan-recommended-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 200px;
    max-width: 240px;
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.plan-recommended-item:active {
    border-color: var(--neon);
}

.plan-recommended-item img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.plan-recommended-item span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.plan-recommended-item strong {
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-recommended-item small {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.plan-recommended-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.plan-item-simple {
    padding: 0.65rem 0.7rem;
}

.plan-details {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.plan-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    user-select: none;
}

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

.plan-details > summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--text-muted);
}

.plan-details[open] > summary::after {
    transform: rotate(180deg);
}

.plan-details > summary small {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
}

.plan-details-hint {
    padding: 0 0.9rem 0.55rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.plan-details-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0 0.75rem 0.85rem;
}

.onboarding-hero-compact {
    text-align: left;
}

.auth-page-visual .auth-hero-strip {
    max-height: 140px;
}

.auth-page .brand-name {
    font-size: 1.75rem;
}

/* === v3.1 – Natív app-érzet (PWA polish) === */

html.is-standalone,
body.is-standalone {
    overscroll-behavior: none;
}

body.is-standalone.page-app {
    padding-top: 0;
}

body.is-standalone .app-main {
    padding-top: calc(var(--safe-top) + var(--logo-clearance-top));
}

body.is-standalone .app-main.home-page {
    padding-top: calc(var(--safe-top) + 0.55rem);
}
body.is-standalone .app-main.profile-page,
body.is-standalone .app-main.history-simple,
body.is-standalone .app-main.workout-page,
body.is-standalone .app-main.gym-page,
body.is-standalone .app-main.league-page,
body.is-standalone .app-main.onboarding-page {
    padding-top: calc(var(--safe-top) + 0.55rem);
}

body.is-standalone .logo-island {
    /* top marad 0 – a safe-area a transformban van (ne duplázódjon) */
    top: 0;
}

/* Fejléc-szövegek ne menjenek a splash logó alá */
.page-app .page-top-copy,
.page-app .profile-top,
.page-app .prestart-visual-copy,
.page-app .onboarding-hero,
.page-app .app-header,
.page-app .page-banner-overlay,
.page-app .workout-header {
    padding-left: max(1rem, calc(var(--logo-clearance-left) - 0.35rem));
}

.page-app .page-top-visual,
.page-app .profile-hero-visual,
.page-app .prestart-visual-bar {
    /* A banner mehet a logó alá vizuálisan, a szöveg már ki van tolva */
}

.page-app .onboarding-hero-compact {
    padding-top: 0.25rem;
}

@media (max-width: 380px) {
    :root {
        --logo-clearance-left: 6.85rem;
        --logo-clearance-top: 4.35rem;
    }
    .logo-island:not(.is-compact) {
        --logo-size: 108px;
    }
    .logo-island.is-compact {
        --logo-size: 48px;
    }
    body.workout-live-on .logo-island:not(.is-compact) {
        --logo-size: 108px !important;
    }
    body.workout-live-on .logo-island.is-compact {
        --logo-size: 48px !important;
    }
}

/* Azonnali press feedback */
a, button, .btn, .nav-item, .home-tile, .home-start, .chip,
.plan-recommended-item, .set-check, .rest-preset, .home-link-btn,
.home-icon-btn, .week-dot {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn, .nav-item, .home-tile, .home-start, .chip,
.plan-recommended-item, .set-check, .rest-preset, .home-icon-btn {
    transition: transform 0.12s ease, box-shadow 0.14s ease, opacity 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.btn:active,
.home-tile:active,
.home-start:not(.home-start-duo):active,
.chip:active,
.plan-recommended-item:active,
.home-icon-btn:active,
.rest-preset:active {
    transform: scale(0.97);
}

.nav-item:active .nav-icon-wrap {
    transform: scale(0.92);
}

.set-check {
    min-width: 44px;
    min-height: 44px;
}

.set-check:active {
    transform: scale(0.9);
}

.bottom-nav-simple .nav-icon-wrap {
    min-width: 44px;
    min-height: 44px;
}

/* Navigáció: ugyanaz a slim loader, gyorsan */
body.is-navigating {
    cursor: progress;
}

body.is-navigating .gz-loader-overlay,
.gz-loader-overlay.is-nav-transit,
body.is-page-loading.is-navigating .gz-loader-overlay {
    transition: none;
    opacity: 1;
    visibility: visible;
}

@keyframes gzBarSnap {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(280%); }
}

.bottom-nav .nav-item.is-pending .nav-icon-wrap {
    transform: scale(0.94);
    background: rgba(88, 204, 2, 0.18) !important;
    color: var(--duo-green, #58CC02);
}

.bottom-nav .nav-item.is-pending .nav-label {
    color: var(--duo-green, #58CC02);
    font-weight: 800;
}

/* Billentyűzet / visualViewport */
.bottom-nav {
    bottom: var(--vv-bottom);
    transition: bottom 0.12s ease;
}

html.keyboard-open .bottom-nav,
html.keyboard-open .install-fab {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}

html.keyboard-open .app-main {
    padding-bottom: calc(1.25rem + var(--safe-bottom));
}

.modal-content {
    max-height: min(90dvh, calc(var(--vv-height) - 1.5rem));
}

html.keyboard-open .modal-content {
    max-height: calc(var(--vv-height) - 0.75rem);
}

.workout-actions {
    padding-bottom: max(0.25rem, var(--vv-bottom));
}

@media (prefers-reduced-motion: reduce) {
    .btn, .nav-item, .home-tile, .home-start, .chip,
    .plan-recommended-item, .set-check, .rest-preset, .home-icon-btn {
        transition: none;
    }
    .btn:active,
    .home-tile:active,
    .home-start:active,
    .chip:active,
    .plan-recommended-item:active,
    .home-icon-btn:active,
    .rest-preset:active,
    .set-check:active {
        transform: none;
    }
    .home-start-duo {
        transition: none;
        box-shadow: 0 4px 0 #3d8c02, 0 6px 14px rgba(0, 0, 0, 0.3);
    }
    .home-start-duo:active,
    .home-start-duo.is-pressed {
        transform: none;
        border-bottom-width: 5px;
    }
}

/* ===== Duolingo-minta: globális UX ===== */
:root {
    --duo-green: #58CC02;
    --duo-green-dark: #46A302;
    --duo-green-deep: #3d8c02;
    --duo-blue: #1CB0F6;
    --duo-blue-dark: #1899D6;
    --duo-gold: #FFC800;
}

.duo-app .app-main {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.duo-app.is-page-ready .app-main {
    opacity: 1;
    transform: none;
}


.duo-topbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.15rem 0.55rem;
    min-height: 48px;
}

.duo-topbar-spacer { flex: 1; }

.duo-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(26, 26, 32, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    min-height: 40px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.duo-pill.is-pressed,
.duo-pill:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.duo-pill-ico { font-size: 1rem; line-height: 1; }
.duo-pill-unit {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.duo-pill-streak { border-color: rgba(255, 140, 0, 0.45); }
.duo-pill-xp { border-color: rgba(28, 176, 246, 0.45); }
.duo-pill-xp strong { color: var(--duo-blue); }

.duo-page-head {
    padding: 0.35rem 0.15rem 0.85rem;
}

.duo-page-head h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

.duo-page-head p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.home-duo .home-cta {
    margin-top: 0.45rem;
}

.home-duo .home-start-duo {
    min-height: 84px;
    border-radius: 18px;
    gap: 0.85rem;
    padding: 1.15rem 1.35rem 1.25rem;
}

.home-duo .home-start-duo .home-start-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.home-duo .home-start-duo .home-start-text strong {
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-duo .home-start-duo .home-start-text small {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.92;
}

.home-duo .home-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
}

.home-duo .duo-pill {
    min-height: 46px;
    padding: 0.45rem 0.85rem;
    font-size: 1.05rem;
}

.home-duo .duo-pill-ico {
    font-size: 1.15rem;
}

.home-duo .home-more-toggle {
    padding: 1.1rem 1.15rem;
}

.home-duo .home-more-toggle-text strong {
    font-size: 1.15rem;
}

.home-duo .home-more-item {
    padding: 0.9rem 0.95rem;
    min-height: 64px;
}

.home-duo .home-more-item-label strong {
    font-size: 1.02rem;
}

.home-duo .home-more-item-label small {
    font-size: 0.78rem;
}

/* Kezdőlap belépő + élő mozgás */
.home-pop {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--pop-delay, 0ms);
}

body.home-alive .home-pop {
    opacity: 1;
    transform: none;
}

.home-start-pulse {
    animation: homeCtaPulse 2.2s ease-in-out infinite;
}

@keyframes homeCtaPulse {
    0%, 100% { box-shadow: 0 6px 0 var(--duo-green-deep, #3d8c02), 0 10px 22px rgba(0, 0, 0, 0.28); }
    50% { box-shadow: 0 6px 0 var(--duo-green-deep, #3d8c02), 0 12px 28px rgba(88, 204, 2, 0.42); }
}

.home-start-pulse:active,
.home-start-pulse.is-pressed {
    animation: none;
}

body.home-alive .week-dot {
    opacity: 0;
    transform: scale(0.7);
    animation: homeDotIn 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
    animation-delay: calc(180ms + var(--dot-delay, 0ms));
}

@keyframes homeDotIn {
    to { opacity: 1; transform: scale(1); }
}

body.home-alive .week-dot.is-done .week-dot-mark {
    animation: homeDotPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
    animation-delay: calc(280ms + var(--dot-delay, 0ms));
}

@keyframes homeDotPop {
    0% { transform: scale(0.7); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .home-pop,
    body.home-alive .home-pop {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .home-start-pulse,
    body.home-alive .week-dot,
    body.home-alive .week-dot.is-done .week-dot-mark {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.week-strip-duo {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.week-strip-duo .week-dot-mark {
    width: 42px;
    height: 42px;
    border-width: 3px;
    border-color: #3a3a42;
    background: #1f1f26;
    font-size: 1rem;
}

.week-strip-duo .week-dot.is-done .week-dot-mark {
    background: var(--duo-green);
    border-color: var(--duo-green-dark);
    color: #fff;
    box-shadow: 0 3px 0 var(--duo-green-deep);
}

.week-strip-duo .week-dot.is-today:not(.is-done) .week-dot-mark {
    border-color: var(--duo-gold);
    box-shadow: inset 0 0 0 2px rgba(255, 200, 0, 0.18);
}

.btn-duo {
    background: #58CC02;
    color: #fff;
    font-weight: 800;
    border: none;
    border-bottom: 4px solid #3d8c02;
    box-shadow: none;
    border-radius: 14px;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}

.btn-duo:hover { filter: brightness(1.04); }

.btn-duo:active,
.btn-duo.is-pressed {
    transform: translateY(3px);
    border-bottom-width: 1px;
    box-shadow: none;
}

.btn-duo-ghost {
    border: none !important;
    border-bottom: 4px solid #121217 !important;
    box-shadow: none !important;
    background: #2a2a32 !important;
}

.btn-duo-ghost:active,
.btn-duo-ghost.is-pressed {
    transform: translateY(3px);
    border-bottom-width: 1px !important;
}

.history-duo .history-actions {
    margin-bottom: 1rem;
}

.history-duo .workout-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-duo .workout-item {
    border: none;
    border-radius: 16px;
    border-bottom: 4px solid #121217;
    box-shadow: none;
    background: #1f1f26;
}

.profile-duo .duo-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin: 0.35rem 0 1rem;
}

.profile-duo .duo-stat {
    text-align: center;
    padding: 0.95rem 0.4rem;
    border-radius: 16px;
    background: #1f1f26;
    border: none;
    border-bottom: 4px solid #121217;
    box-shadow: none;
}

.profile-duo .profile-tile-grid {
    margin-bottom: 1rem;
}

.profile-duo .duo-tile-static {
    cursor: default;
    pointer-events: none;
}

.profile-duo .profile-details {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-duo .profile-hero-visual {
    border: none !important;
    box-shadow: none !important;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.profile-duo .duo-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--duo-green);
}

.profile-duo .duo-stat span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.workout-prestart-duo .plan-more-duo {
    margin: 0.75rem 0 1rem;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: var(--bg-card);
    padding: 0.15rem 0.85rem 0.85rem;
}

.workout-prestart-duo .plan-more-duo > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 0.15rem;
    font-weight: 800;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.workout-prestart-duo .plan-more-duo > summary::-webkit-details-marker { display: none; }

.workout-prestart-duo .plan-more-duo > summary small {
    color: var(--text-muted);
    font-weight: 600;
}

.workout-prestart-duo .plan-step-nested {
    padding-top: 0.25rem;
}

.workout-prestart-duo #launchWorkoutBtn {
    margin-top: 0.35rem;
}

.bottom-nav-simple .nav-item.active .nav-label {
    color: var(--duo-green);
    font-weight: 800;
}

.bottom-nav-simple .nav-item.active .nav-icon-wrap {
    background: rgba(88, 204, 2, 0.16);
    color: var(--duo-green);
}

.goal-celebration {
    border: 2px solid rgba(88, 204, 2, 0.45);
    background: linear-gradient(180deg, rgba(88, 204, 2, 0.18), rgba(13, 13, 18, 0.9));
    box-shadow: 0 6px 0 rgba(61, 140, 2, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .duo-app .app-main {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn-duo,
    .duo-pill {
        transition: none;
    }
    .btn-duo:active,
    .btn-duo.is-pressed,
    .duo-pill:active,
    .duo-pill.is-pressed {
        transform: none;
    }
}

/* === Gyakorlat részletező (izolált, nem ütközik a régi set-row szabályokkal) === */
#exerciseDetail.ex-detail {
    margin: 0 0 0.75rem;
    min-width: 0;
}

#exerciseDetail .xd {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.7rem 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(14, 14, 18, 0.92);
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

#exerciseDetail .xd-media {
    position: relative;
    width: calc(100% + 1.4rem);
    margin: -0.7rem -0.7rem 0.15rem;
    aspect-ratio: 16 / 10;
    max-height: 240px;
    overflow: hidden;
    background: #0a0a10;
}
#exerciseDetail .xd-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
    filter: saturate(1.2) contrast(1.08) brightness(1.05);
}
#exerciseDetail .xd-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

#exerciseDetail .xd-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

#exerciseDetail .xd-head h4 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#exerciseDetail .xd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-top: 0.3rem;
}

#exerciseDetail .xd-muscle {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.5);
}

#exerciseDetail .xd-del {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

#exerciseDetail .xd-cols,
#exerciseDetail .xd-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}

#exerciseDetail .xd-cols {
    padding: 0 0.1rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.42);
}

#exerciseDetail .xd-cols > span:nth-child(1),
#exerciseDetail .xd-row > .xd-num {
    flex: 0 0 38px;
    width: 38px;
    max-width: 38px;
}

#exerciseDetail .xd-cols > span:nth-child(2),
#exerciseDetail .xd-cols > span:nth-child(3),
#exerciseDetail .xd-row > .xd-input {
    flex: 1 1 0;
    min-width: 0;
}

#exerciseDetail .xd-cols > span:nth-child(4),
#exerciseDetail .xd-row > .xd-check {
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px;
}

#exerciseDetail .xd-cols > span:nth-child(1),
#exerciseDetail .xd-cols > span:nth-child(4) {
    text-align: center;
}

#exerciseDetail .xd-sets {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

#exerciseDetail .xd-row {
    padding: 0.3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

#exerciseDetail .xd-row.is-done,
#exerciseDetail .xd-row.done {
    border-color: rgba(57, 255, 20, 0.35);
    background: rgba(57, 255, 20, 0.1);
}

#exerciseDetail .xd-row.is-warm,
#exerciseDetail .xd-row.warmup {
    opacity: 0.78;
}

#exerciseDetail .xd-num {
    display: grid;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.84rem !important;
    font-weight: 800;
    cursor: pointer;
    box-sizing: border-box;
}

#exerciseDetail .xd-num.on {
    background: #1cb0f6;
    border-color: transparent;
    color: #041018;
}

#exerciseDetail .xd-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0.2rem 0.25rem !important;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 8, 12, 0.75);
    color: #fff;
    text-align: center;
    font-size: 1rem !important;
    font-weight: 700;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

#exerciseDetail .xd-input:focus {
    outline: none;
    border-color: var(--neon);
}

#exerciseDetail .xd-check {
    display: grid !important;
    place-items: center;
    width: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    font-size: 1.05rem !important;
    font-weight: 800;
    cursor: pointer;
    box-sizing: border-box;
}

#exerciseDetail .xd-check.done {
    background: var(--neon);
    border-color: var(--neon);
    color: #041204;
}

#exerciseDetail .xd-empty {
    margin: 0;
    padding: 0.5rem 0;
    color: rgba(240, 240, 240, 0.5);
    font-size: 0.85rem;
    text-align: center;
}

#exerciseDetail .xd-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

#exerciseDetail .xd-add {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    margin: 0 !important;
    padding: 0.5rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

#exerciseDetail .xd-note {
    flex: 0 0 auto;
}

#exerciseDetail .xd-note > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.45rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(240, 240, 240, 0.55);
}

#exerciseDetail .xd-note > summary::-webkit-details-marker {
    display: none;
}

#exerciseDetail .xd-note[open] {
    flex: 1 1 100%;
}

#exerciseDetail .xd-note .exercise-note {
    width: 100%;
    margin-top: 0.25rem;
    box-sizing: border-box;
}

#exerciseDetail .xd-ready {
    width: 100%;
    min-height: 48px;
    margin: 0.15rem 0 0;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: 14px;
    background: var(--neon);
    color: #041204;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--neon) 55%, #000);
}

#exerciseDetail .xd-ready:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--neon) 55%, #000);
}

.wa-actions #finishBtn {
    min-height: 44px;
    opacity: 0.85;
}

/* Edzés vége – hangulatválasztó (izolált, nem ütközik a régi mood-btn szabályokkal) */
#finishModal .finish-modal-simple {
    width: min(100%, 420px);
    max-width: calc(100vw - 2rem);
    padding: 1.25rem 1.1rem calc(1.1rem + var(--safe-bottom));
    text-align: center;
    box-sizing: border-box;
}

#finishModal .finish-modal-simple h3 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    line-height: 1.2;
}

#finishModal .finish-simple-sub {
    color: var(--text-muted);
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

#finishModal .mood-row,
#finishModal .mood-row-labels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
    margin: 0 0 0.35rem !important;
    width: 100%;
    flex-wrap: nowrap;
}

#finishModal .mood-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0;
    padding: 0.65rem 0.5rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(245, 245, 245, 0.92) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    box-sizing: border-box;
}

#finishModal .mood-btn.active,
#finishModal .mood-btn:active {
    border-color: rgba(57, 255, 20, 0.55) !important;
    background: rgba(57, 255, 20, 0.14) !important;
    color: #fff !important;
}

#finishModal .finish-actions-simple,
#finishModal .modal-actions.finish-actions-simple {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 1.1rem;
    width: 100%;
}

#finishModal .finish-actions-simple .btn,
#finishModal .finish-actions-simple .home-start-duo {
    flex: none !important;
    width: 100%;
    max-width: 100%;
}

#finishModal .finish-actions-simple .home-start-duo {
    min-height: 52px;
}

#finishModal .finish-actions-simple .home-start-text strong {
    font-size: 1.05rem;
}


/* === Duolingo dark system (hivatalos navy + ledge) === */

.duo-app .card,
.duo-app .home-panel,
.duo-app .workout-item,
.duo-app .history-duo .workout-item,
.duo-app .workout-item-recent,
.duo-app .profile-duo .duo-stat,
.duo-app .profile-quick-item,
.duo-app .modal-content,
.duo-app #exerciseDetail .xd,
.duo-app .rest-timer-clean,
.duo-app .wa-top {
    background: var(--bg-card) !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.duo-app .week-strip,
.duo-app .week-strip-duo,
.duo-app .home-extra,
.duo-app .home-more,
.duo-app .plan-setup,
.duo-app .plan-setup-focus,
.duo-app .plan-more-duo,
.duo-app .plan-details {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.duo-app .streak-hero-visual,
.duo-app .prestart-visual-bar,
.duo-app .profile-hero-visual,
.duo-app .page-banner {
    border: none !important;
    box-shadow: none !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.duo-app .duo-pill {
    background: var(--bg-card) !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    color: #fff !important;
}

.duo-app .duo-pill-streak {
    border-bottom-color: #CC7A00 !important;
}

.duo-app .duo-pill-xp {
    border-bottom-color: #1899D6 !important;
}

.duo-app .duo-pill:active {
    transform: translateY(3px);
    border-bottom-width: 0 !important;
}

.duo-app .home-start-duo,
.duo-app .btn-duo,
.duo-app .btn-neon,
.duo-app #exerciseDetail .xd-ready {
    background: var(--duo-green) !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 4px solid var(--duo-green-dark) !important;
    box-shadow: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.duo-app .home-start-duo:active,
.duo-app .btn-duo:active,
.duo-app .btn-neon:active,
.duo-app #exerciseDetail .xd-ready:active {
    transform: translateY(4px);
    border-bottom-width: 0 !important;
}

.duo-app .btn-ghost,
.duo-app .btn-outline,
.duo-app .xd-add {
    background: var(--bg-card) !important;
    color: #fff !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
    box-shadow: none !important;
}

.duo-app .btn-ghost:active,
.duo-app .btn-outline:active,
.duo-app .xd-add:active {
    transform: translateY(3px);
    border-bottom-width: 0 !important;
}

.duo-app .input,
.duo-app input.input,
.duo-app textarea.input,
.duo-app select.input,
.duo-app .xd-input {
    background: var(--bg-card) !important;
    color: #fff !important;
    border: 2px solid var(--bg-elevated) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.duo-app .input:focus,
.duo-app input.input:focus,
.duo-app textarea.input:focus,
.duo-app select.input:focus,
.duo-app .xd-input:focus {
    border-color: var(--duo-blue) !important;
    box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.2) !important;
}

.duo-app .bottom-nav-simple .bottom-nav-shell {
    background: #071014 !important;
    border: 2px solid #58CC02 !important;
    border-top: 2px solid #58CC02 !important;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.7),
        0 0 36px rgba(88, 204, 2, 0.28) !important;
}

.duo-app .bottom-nav-simple .nav-icon-wrap {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    border-radius: 14px;
    width: 44px;
    height: 44px;
}

.duo-app .bottom-nav-simple .nav-item .nav-label {
    color: #F0F0F0;
    font-weight: 800;
    font-size: 0.76rem;
}

.duo-app .bottom-nav-simple .nav-item.active .nav-icon-wrap {
    background: rgba(88, 204, 2, 0.28) !important;
    border-color: #58CC02 !important;
    border-radius: 14px;
    box-shadow: 0 0 16px rgba(88, 204, 2, 0.35) !important;
}

.duo-app .bottom-nav-simple .nav-item.active .nav-label {
    color: #89E219 !important;
}

.duo-app .bottom-nav-simple .nav-item .nav-svg {
    color: #fff;
}

.duo-app .bottom-nav-simple .nav-item.active .nav-svg {
    color: #89E219;
}

.duo-app .bottom-nav-simple .nav-workout .nav-svg {
    color: #FF6A00;
}
.duo-app .bottom-nav-simple .nav-workout.active .nav-svg {
    color: #FF8A1A;
}
.duo-app .bottom-nav-simple .nav-workout.active .nav-icon-wrap {
    background: rgba(255, 106, 0, 0.22) !important;
    border-color: rgba(255, 106, 0, 0.65) !important;
    box-shadow: 0 0 18px rgba(255, 106, 0, 0.35) !important;
}

@keyframes navFireFlicker {
    0%, 100% { transform: scale(1) translateY(0); }
    35% { transform: scale(1.08) translateY(-1px); }
    60% { transform: scale(0.96) translateY(0.5px); }
}
@keyframes navFireInner {
    0%, 100% { opacity: 0.85; transform: scaleY(1); }
    40% { opacity: 1; transform: scaleY(1.12); }
    70% { opacity: 0.7; transform: scaleY(0.92); }
}
.nav-svg-workout .nav-fire {
    transform-origin: 16px 24px;
    animation: navFireFlicker 0.85s ease-in-out infinite;
}
.nav-svg-workout .nav-fire-inner {
    transform-origin: 16px 20px;
    animation: navFireInner 0.65s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .nav-svg-workout .nav-fire,
    .nav-svg-workout .nav-fire-inner {
        animation: none;
    }
}

.duo-app .week-dot-mark {
    background: var(--bg-elevated) !important;
    border: none !important;
    border-bottom: 4px solid #2A373E !important;
    color: transparent !important;
    box-shadow: none !important;
}

.duo-app .week-dot.is-done .week-dot-mark {
    background: var(--duo-green) !important;
    border-bottom-color: var(--duo-green-dark) !important;
    color: #fff !important;
}

.duo-app .week-dot.is-today:not(.is-done) .week-dot-mark {
    box-shadow: inset 0 0 0 3px var(--orange) !important;
}

.duo-app .wa-progress {
    height: 16px;
    border-radius: 999px;
    background: var(--bg-elevated);
    overflow: hidden;
    border: none !important;
}

.duo-app .wa-progress span {
    background: var(--duo-green);
}

.duo-app .ex-icon-img-wrap,
.duo-app .suggestion-item.suggestion-icon .suggestion-demo {
    border: none !important;
    border-bottom: 4px solid #2A373E !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
}

.duo-app .ex-icon.is-active .ex-icon-img-wrap {
    box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.35) !important;
    border-bottom-color: var(--duo-green-dark) !important;
}

.duo-app .body-map-figure-wrap,
.duo-app .body-figure,
.duo-app .body-figure-img {
    background: transparent !important;
}

.duo-app .plan-focus-chip,
.duo-app .chip,
.duo-app .rest-preset,
.duo-app .body-view-btn,
.duo-app .body-chip-btn {
    background: var(--bg-card) !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
    box-shadow: none !important;
    color: #fff !important;
}

.duo-app .rest-preset.active,
.duo-app .chip.active,
.duo-app .body-view-btn.active,
.duo-app .body-chip-btn.is-on {
    background: var(--duo-green) !important;
    border-color: var(--duo-green) !important;
    border-bottom-color: var(--duo-green-dark) !important;
    color: #fff !important;
}

.duo-app #finishModal .mood-btn {
    background: var(--bg-card) !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
}

.duo-app #finishModal .mood-btn.active {
    background: rgba(88, 204, 2, 0.18) !important;
    border-color: var(--duo-green) !important;
    border-bottom-color: var(--duo-green-dark) !important;
}

/* Képes csempék */
.home-extra { display: flex; flex-direction: column; gap: 0.9rem; }
.home-extra-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.home-extra-head p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}
.duo-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 0.75rem;
}
.duo-tile {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 124px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
    background: var(--bg-card);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: none;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(10px);
}
body.home-alive .duo-tile {
    animation: duoTileIn 0.4s cubic-bezier(0.2, 0.85, 0.25, 1.1) forwards;
    animation-delay: calc(200ms + var(--tile-delay, 0ms));
}
@keyframes duoTileIn { to { opacity: 1; transform: none; } }
.duo-tile:active {
    transform: translateY(3px);
    border-bottom-width: 0;
}
.duo-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.duo-tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(19, 31, 36, 0.88) 100%);
    pointer-events: none;
}
.duo-tile-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.1rem;
    min-height: 124px;
    padding: 0.9rem;
    box-sizing: border-box;
}
.duo-tile-copy strong {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.duo-tile-copy small {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-duo .profile-tile-grid { margin-bottom: 1rem; }
.profile-duo .duo-tile-static { pointer-events: none; cursor: default; }
.duo-app .home-start-pulse {
    animation: duoCtaBounce 1.8s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
@keyframes duoCtaBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-3px) scale(1.02); }
    55% { transform: translateY(0) scale(1); }
}
.duo-app .home-start-pulse:active,
.duo-app .home-start-pulse.is-pressed {
    animation: none;
}

.duo-app .auth-card,
.duo-app .auth-card-big {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .duo-tile, body.home-alive .duo-tile {
        opacity: 1; transform: none; animation: none;
    }
}


/* === Nagy Duo oldalak: napló / profil / terem === */
.duo-hero-bar {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 150px;
    margin-bottom: 0.35rem;
}
.duo-hero-bar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.duo-hero-bar-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(19,31,36,0.92) 0%, rgba(19,31,36,0.45) 100%);
}
.duo-hero-bar-copy {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1.1rem 1.35rem;
}
.duo-hero-bar-copy h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}
.duo-hero-bar-copy p {
    margin: 0.3rem 0 0;
    color: rgba(255,255,255,0.82);
    font-size: 1rem;
    font-weight: 600;
}
.profile-hero-copy {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.duo-avatar-lg {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--duo-green);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    border-bottom: 4px solid var(--duo-green-dark);
}
.duo-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.25rem 0.1rem 0.5rem;
}
.duo-panel-head h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.duo-panel-head p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-weight: 600;
}
.duo-panel-lead {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-muted);
}
.duo-panel-lead strong { color: #fff; font-weight: 800; }
.duo-subhead {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
}
.duo-panel-soft {
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
}
.duo-form .form-group { margin-bottom: 0.85rem; }
.duo-form label,
.duo-form .field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-muted);
}
.input-lg,
.duo-app .input.input-lg {
    min-height: 56px !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    padding: 0.9rem 1rem !important;
}
.duo-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.duo-history-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1rem 1.05rem;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}
.duo-history-item:active {
    transform: translateY(3px);
    border-bottom-width: 0;
}
.duo-history-date {
    flex: 0 0 auto;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    padding: 0.45rem 0.2rem;
    border-radius: 14px;
    background: var(--bg-elevated);
    border-bottom: 3px solid #2A373E;
}
.duo-history-date strong {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.duo-history-date small {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
}
.duo-history-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.duo-history-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #fff;
}
.duo-history-body small {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-muted);
}
.duo-history-go {
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-muted);
}
.history-duo .history-actions { margin-bottom: 1rem; }
.history-duo .detail-header h2 {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.history-duo .detail-actions-row {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.85rem 0 1rem;
}
.history-duo .exercise-block {
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.history-duo .exercise-block h4 {
    font-size: 1.15rem;
    font-weight: 800;
}
.profile-duo .duo-stat {
    min-height: 88px;
    padding: 1.05rem 0.4rem !important;
}
.profile-duo .duo-stat strong {
    font-size: 1.85rem !important;
}
.profile-duo .profile-name {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}
.profile-duo .profile-email {
    margin: 0.2rem 0 0;
    color: rgba(255,255,255,0.75);
    font-weight: 600;
}
.profile-duo .profile-logout {
    margin-top: 0.85rem;
    min-height: 52px;
}
.gym-duo .duo-form { display: flex; flex-direction: column; gap: 0.75rem; }
.gym-duo .home-link-btn-block { margin-top: 0.25rem; }
.duo-app .home-more-recent .workout-item-recent .workout-item-icon { display: none; }

/* Dashboard legutóbbi – ikon nélkül, nagy sor */
.home-extra .workout-item-recent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem !important;
    min-height: 72px;
}
.home-extra .workout-item-recent .workout-item-title {
    font-size: 1.05rem;
    font-weight: 800;
}


/* Textarea + detail Duo */
.duo-app textarea.input-lg,
.duo-app .input.input-lg[rows] {
    min-height: 96px !important;
    line-height: 1.35;
}
.history-duo #backToList {
    margin-bottom: 0.85rem;
    min-height: 48px;
    font-weight: 800;
}
.history-duo .detail-notes {
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 16px;
    padding: 1rem;
    margin: 0.75rem 0;
}
.history-duo .detail-notes h4 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
}
.history-duo .edit-panel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem 0 1rem;
}
.home-extra .duo-history-list,
.home-more-recent .duo-history-list {
    gap: 0.65rem;
}
.profile-duo .duo-panel {
    margin-top: 0.75rem;
}
.profile-duo .bmi-display {
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 14px;
    font-weight: 700;
}
.gym-duo .home-start { margin-top: 0.35rem; }


/* === Home: széria/pont a heróban + élő Mostanában + Mai edzés háttér === */
.streak-stats-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.15rem 0 0.75rem;
}
.streak-stats-row .duo-pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(19, 31, 36, 0.88) !important;
    animation: duoPillPop 0.5s cubic-bezier(0.22, 1.1, 0.36, 1) both;
}
.streak-stats-row .duo-pill-xp { animation-delay: 70ms; }
@keyframes duoPillPop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
body.home-alive .streak-flame:not(.is-cold) {
    animation: streakPulse 1.8s ease-in-out infinite, duoFlameIn 0.45s ease both;
}
@keyframes duoFlameIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
body.home-alive .streak-num {
    animation: duoNumPop 0.5s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}
body.home-alive .streak-num.is-ticking {
    animation: gzCountPop 0.32s ease both;
}
@keyframes duoNumPop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

.home-recent-live {
    margin-top: 1.15rem;
}
.home-recent-live-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.home-recent-live-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.home-recent-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0.15rem 0.55rem;
    margin: 0 -0.15rem;
    scrollbar-width: none;
}
.home-recent-rail::-webkit-scrollbar { display: none; }
.home-recent-card {
    flex: 0 0 min(72%, 240px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.05rem 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 18px;
    min-height: 118px;
    opacity: 0;
    transform: translateX(18px) scale(0.96);
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}
.home-recent-rail.is-ready .home-recent-card {
    animation: recentSlideIn 0.45s cubic-bezier(0.2, 0.85, 0.25, 1.05) forwards;
    animation-delay: calc(120ms + var(--recent-delay, 0ms));
}
@keyframes recentSlideIn {
    to { opacity: 1; transform: none; }
}
.home-recent-card:active {
    transform: translateY(3px);
    border-bottom-width: 0;
}
.home-recent-card-visual {
    position: relative;
    padding-left: 3.15rem;
}
.home-recent-ico {
    position: absolute;
    left: 0.85rem;
    top: 1.05rem;
    width: 28px;
    height: 28px;
    opacity: 0.9;
}
.home-recent-when {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--duo-green);
    border-bottom: 2px solid var(--duo-green-dark);
    animation: recentBadgePulse 2.4s ease-in-out infinite;
}
@keyframes recentBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
.home-recent-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: #fff;
}
.home-recent-meta {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-muted);
}

/* Mai edzés – kép háttérként, nem helyfoglaló sáv */
.workout-prestart-duo {
    position: relative;
    overflow: hidden;
}
.workout-prestart-duo .prestart-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.workout-prestart-duo .prestart-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.28;
    transform: scale(1.08);
    animation: prestartKen 18s ease-in-out infinite alternate;
    filter: saturate(1.05);
}
.workout-prestart-duo .prestart-bg-fade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(19,31,36,0.55) 0%, rgba(19,31,36,0.82) 40%, var(--bg, #131F24) 100%);
}
.workout-prestart-duo .prestart-head,
.workout-prestart-duo .prestart-content {
    position: relative;
    z-index: 1;
}
.workout-prestart-duo .prestart-head {
    padding: 0.15rem 0.1rem 0.85rem;
}
.workout-prestart-duo .prestart-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: homeHelloIn 0.45s ease both;
}
.workout-prestart-duo .prestart-sub {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-weight: 650;
    animation: homeHelloIn 0.5s ease both;
    animation-delay: 60ms;
}
@keyframes homeHelloIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes prestartKen {
    from { transform: scale(1.06) translate3d(-1%, 0, 0); }
    to { transform: scale(1.14) translate3d(1.5%, -1%, 0); }
}
.workout-prestart-duo #launchWorkoutBtn {
    margin-top: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
    .duo-app .home-start-pulse,
    .streak-stats-row .duo-pill,
    body.home-alive .streak-num,
    .home-recent-rail.is-ready .home-recent-card,
    .home-recent-when,
    .workout-prestart-duo .prestart-bg-img,
    .workout-prestart-duo .prestart-title,
    .workout-prestart-duo .prestart-sub {
        animation: none !important;
    }
    .home-recent-card { opacity: 1; transform: none; }
}


/* === Duo-szerű PWA splash (nagy logó) === */
.gz-loader-overlay.gz-splash {
    background: #131F24;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    padding: max(1.5rem, var(--safe-top)) 1.5rem max(2rem, var(--safe-bottom));
    transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease;
}
.gz-loader-overlay.gz-splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    pointer-events: none;
}
.gz-splash-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: min(100%, 320px);
}
.gz-splash-logo {
    display: block !important;
    width: min(58vw, 220px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter: none;
    transform-origin: 50% 60%;
    animation: gzSplashLogoIn 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both,
               gzSplashLogoBob 2.2s ease-in-out 0.7s infinite;
}
.gz-splash-brand {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 6.5vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    animation: gzSplashBrandIn 0.55s ease 0.18s both;
}
.gz-splash-dots {
    margin-top: 0.35rem;
    animation: gzSplashBrandIn 0.45s ease 0.35s both;
}
@keyframes gzSplashLogoIn {
    0% { opacity: 0; transform: scale(0.55) rotate(-8deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes gzSplashLogoBob {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.03); }
}
@keyframes gzSplashBrandIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* Menüátmenet: ne a nagy splash, csak pöttyök */
body.is-navigating .gz-splash-logo,
body.is-navigating .gz-splash-brand,
.gz-loader-overlay.is-nav-transit .gz-splash-logo,
.gz-loader-overlay.is-nav-transit .gz-splash-brand {
    display: none !important;
}
body.is-navigating .gz-loader-overlay.gz-splash,
.gz-loader-overlay.is-nav-transit.gz-splash {
    background: rgba(19, 31, 36, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.is-navigating .gz-splash-stage,
.gz-loader-overlay.is-nav-transit .gz-splash-stage {
    width: auto;
    gap: 0;
}

html.is-cold-splash body,
body.is-cold-splash {
    background: #131F24;
}

@media (prefers-reduced-motion: reduce) {
    .gz-splash-logo,
    .gz-splash-brand,
    .gz-splash-dots,
    .gz-loader-overlay.gz-splash.is-leaving {
        animation: none !important;
        transition: opacity 0.15s ease;
        transform: none !important;
    }
}


/* === Profil kompakt + Mai edzés kevesebb felső hely === */
.profile-duo .profile-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.15rem 0.1rem 0.65rem;
    margin: 0;
}
.duo-avatar-md {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--duo-green);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    border-bottom: 3px solid var(--duo-green-dark);
}
.profile-head-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.profile-duo .profile-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
}
.profile-duo .profile-email {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    font-weight: 650;
    color: #AFAFAF !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.profile-duo .profile-stat-compact {
    display: none !important;
}
.profile-duo .profile-stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 0 0 0.95rem;
}
.profile-duo .profile-stats-row .duo-pill {
    min-height: 48px;
    padding: 0.55rem 0.95rem;
    font-size: 1.05rem;
    gap: 0.4rem;
    background: rgba(19, 31, 36, 0.95);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.profile-duo .profile-stats-row .duo-pill-ico {
    font-size: 1.2rem;
}
.profile-duo .profile-stats-row .duo-pill strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.profile-duo .profile-stats-row .duo-pill-unit {
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.profile-duo .profile-stats-row .duo-pill-streak {
    border-color: rgba(255, 140, 0, 0.55);
}
.profile-duo .profile-stats-row .duo-pill-streak strong {
    color: #ffb347;
}
.profile-duo .profile-stats-row .duo-pill-xp {
    border-color: rgba(28, 176, 246, 0.55);
}
.home-admin-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    color: #042f2e !important;
    background: #2dd4bf !important;
    border: 2px solid #5eead4 !important;
    text-decoration: none !important;
}
.profile-admin-banner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.75rem;
    padding: 0.95rem 1.05rem;
    border-radius: 14px;
    text-decoration: none;
    color: #052e2b;
    background: linear-gradient(135deg, #5eead4 0%, #99f6e4 100%);
    border: 2px solid #2dd4bf;
    border-bottom-width: 4px;
    min-height: 52px;
    justify-content: center;
}
.profile-admin-banner strong {
    font-size: 1.05rem;
    font-weight: 900;
}
.profile-admin-banner span {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.85;
}
.profile-quick-admin {
    border-color: #2dd4bf !important;
    background: rgba(45, 212, 191, 0.12) !important;
}
.profile-quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}
.profile-quick-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom: 4px solid #2A373E;
    border-radius: 14px;
    min-width: 0;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}
.profile-quick-chip:not(.is-static):active {
    transform: translateY(3px);
    border-bottom-width: 0;
}
.profile-quick-chip.is-static {
    pointer-events: none;
}
.profile-quick-chip strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}
.profile-quick-chip small {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-duo .duo-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.profile-duo .duo-panel-head {
    margin-bottom: 0.55rem;
}
.profile-duo .duo-panel-head h2 {
    font-size: 1.25rem;
}
.profile-duo .duo-panel-head p { display: none; }
.profile-duo .profile-tile-grid { display: none !important; }
.profile-duo .duo-hero-bar.profile-hero-bar {
    display: block !important;
    margin-bottom: 0.55rem;
    border-radius: 18px;
    overflow: hidden;
}
.profile-duo .profile-hero-bar .duo-hero-bar-img {
    max-height: 140px;
    object-fit: cover;
    object-position: center left;
}

/* Workout: előkészítőn splash logó; élő edzésnél kicsibe */
body:has(.workout-page):not(.workout-live-on) .logo-island:not(.is-compact),
body:has(.workout-page):not(.workout-live-on) .logo-island.logo-island-splash:not(.is-compact) {
    --logo-size: 118px;
    animation: none;
    filter: none !important;
    transform: translate3d(max(0.2rem, var(--safe-left)), calc(var(--safe-top) + 0.1rem), 0) rotate(-10deg);
}
.app-main.workout-page,
.app-main.history-simple,
.app-main.profile-page,
.app-main.gym-page,
.app-main.league-page,
.app-main.onboarding-page {
    padding-top: calc(var(--safe-top) + 0.55rem) !important;
}
body.is-standalone .app-main.workout-page,
body.is-standalone .app-main.history-simple,
body.is-standalone .app-main.profile-page,
body.is-standalone .app-main.gym-page,
body.is-standalone .app-main.league-page,
body.is-standalone .app-main.onboarding-page {
    padding-top: calc(var(--safe-top) + 0.55rem) !important;
}
body.workout-live-on .app-main.workout-page {
    padding-top: calc(var(--safe-top) + 7.1rem) !important;
    transition: padding-top 0.22s ease;
}
body.workout-live-on.logo-is-compact .app-main.workout-page {
    padding-top: calc(var(--safe-top) + 3.35rem) !important;
}
/* Edzés: ugyanaz a logó-méretelés, mint máshol (nagy → görgetésre kicsi) */
body.workout-live-on .logo-island:not(.is-compact) {
    --logo-size: 118px;
    opacity: 1;
    animation: none;
    filter: none !important;
    transform: translate3d(max(0.2rem, var(--safe-left)), calc(var(--safe-top) + 0.1rem), 0) rotate(-10deg);
}
body.workout-live-on .logo-island.is-compact {
    --logo-size: 52px !important;
    opacity: 1 !important;
    transform: translate3d(max(0.35rem, var(--safe-left)), calc(var(--safe-top) + 0.2rem), 0) rotate(-6deg) !important;
}
body.workout-live-on .logo-island .logo-island-mark {
    filter: none !important;
}
body.workout-live-on .wa-stage {
    padding-top: 0.55rem;
}
body.workout-live-on .wa-top {
    top: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.7rem 0.85rem 0.8rem;
}
body.workout-live-on .workout-active-clean .timer-display {
    font-size: clamp(2.2rem, 9.5vw, 2.9rem);
}
.workout-prestart-duo {
    overflow: visible;
}
.workout-prestart-duo .prestart-bg { display: none !important; }
.workout-prestart-duo .prestart-head,
.workout-prestart-duo .prestart-compact { display: none !important; }
.workout-prestart-duo .prestart-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 3.35rem;
    padding: 0.15rem 0.05rem 0.55rem;
    margin: 0;
}
.workout-prestart-duo .prestart-topbar-copy {
    max-width: min(62%, 15.5rem);
    text-align: right;
}
.workout-prestart-duo .prestart-topbar .prestart-title {
    margin: 0;
    font-size: clamp(1.35rem, 5.8vw, 1.65rem) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: #fff;
}
.workout-prestart-duo .prestart-topbar .prestart-sub {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--text-muted);
}
.workout-prestart-duo .prestart-content {
    padding-top: 0;
}
.workout-prestart-duo .plan-step-head .plan-title {
    font-size: 1.05rem !important;
    margin: 0;
}
.workout-prestart-duo .plan-setup-focus {
    padding-top: 0 !important;
    gap: 0.65rem !important;
}
.workout-prestart-duo .plan-step-head {
    margin: 0;
    padding: 0.1rem 0 0.35rem;
}
.workout-prestart-duo .plan-title.prestart-title,
.workout-prestart-duo .prestart-title {
    margin: 0;
    font-size: clamp(1.45rem, 6.5vw, 1.75rem) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.workout-prestart-duo .plan-hint {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
}
.workout-prestart-duo .plan-body-map {
    margin-top: 0.15rem;
}


/* Mehet gomb: sima Duo zöld, nincs fény / gyűrű / shine */
#startWorkoutBtn {
    position: relative;
    overflow: hidden;
}
#startWorkoutBtn .cta-volt { display: none !important; }
#startWorkoutBtn.is-streak,
#startWorkoutBtn.is-streak:active,
#startWorkoutBtn.is-streak.is-pressed {
    animation: none !important;
    box-shadow: none !important;
}
#startWorkoutBtn.is-streak::before,
#startWorkoutBtn.is-streak::after {
    content: none !important;
    display: none !important;
}

/* Képek: élénk – hero teteje NE legyen milky/homályos */
.duo-tile-img,
.duo-hero-bar-img,
.wa-live-img,
.gz-win-art,
.home-start-bg,
.tile-img,
img.duo-tile-img,
.home-repeat-img,
.hc-empty-cta-img,
.home-week-insight-img,
.league-invite-hero img,
.hc-hero-img {
    filter: saturate(1.35) contrast(1.14) brightness(1.16) !important;
}
.gz-reward-art img {
    filter: none !important;
}
.streak-hero-bg {
    filter: none !important;
}
.duo-tile-shade {
    background: linear-gradient(180deg, transparent 58%, rgba(19, 31, 36, 0.48) 100%) !important;
}
.streak-hero-shade {
    /* csak alul sötétít – a teteje tiszta */
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 38%,
        rgba(19, 31, 36, 0.35) 68%,
        rgba(19, 31, 36, 0.92) 100%
    ) !important;
}
.duo-hero-bar-fade {
    background: linear-gradient(100deg, rgba(19, 31, 36, 0.45) 0%, rgba(19, 31, 36, 0.1) 100%) !important;
}
/* Felső sáv: ÉLES – tiltott blur/shadow a top zónában */
.logo-island,
.logo-island-splash,
.logo-island.is-compact,
body.workout-live-on .logo-island,
.logo-island-mark,
.logo-island.is-compact .logo-island-mark,
body.workout-live-on .logo-island .logo-island-mark,
.nav-shell-watermark img {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.logo-island-splash::after,
.logo-splash-deco,
.logo-island::after,
.logo-island::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    filter: none !important;
    background: none !important;
    box-shadow: none !important;
}
.home-page .streak-hero-visual {
    isolation: isolate;
}
.home-page .streak-hero-content {
    z-index: 2;
}
/* Főoldal: nincs lélegzés – az edzés közbeni háttér lélegzik */
.home-page .streak-hero-bg,
.home-page .streak-hero-shade,
.home-page .home-start-duo.home-start-ambient .home-start-bg {
    animation: none !important;
    transform: none;
}
.graffiti-bg::before,
.graffiti-bg::after {
    display: none !important;
    content: none !important;
}
.gz-splash-logo {
    filter: none !important;
}
.duo-tile-img {
    transform: scale(1.04);
    transform-origin: center;
}

/* Natív WebView app: PWA telepítés UI elrejtve */
html.is-native-app #installFab,
html.is-native-app #installHeaderBtn,
html.is-native-app #installPrompt,
html.is-native-app #installIosHint,
html.is-native-app #installFallbackHint,
body.is-native-app #installFab,
body.is-native-app #installHeaderBtn {
    display: none !important;
}


/* === Menü: egész dock zöld kerettel – ne olvadjon a háttérbe === */
.duo-app .bottom-nav-simple .bottom-nav-shell,
.bottom-nav-simple .bottom-nav-shell {
    background: #071014 !important;
    border: 2.5px solid #58CC02 !important;
    border-bottom: 5px solid #3FA800 !important;
    border-radius: 22px !important;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 28px rgba(88, 204, 2, 0.35) !important;
    padding: 0.55rem 0.5rem 0.6rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.duo-app .bottom-nav-simple .nav-label,
.bottom-nav-simple .nav-label {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #AFAFAF;
}
.duo-app .bottom-nav-simple .nav-item.active .nav-label {
    color: #39FF14 !important;
}
.duo-app .bottom-nav-simple .nav-icon-wrap {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
}
.duo-app .bottom-nav-simple .nav-item.active .nav-icon-wrap {
    background: rgba(57, 255, 20, 0.18) !important;
    box-shadow: inset 0 -3px 0 rgba(42, 143, 0, 0.55) !important;
}
.duo-app .bottom-nav-simple .nav-workout.active .nav-icon-wrap,
.duo-app .bottom-nav-simple .nav-item-hero.active .nav-icon-wrap {
    background: rgba(255, 0, 110, 0.22) !important;
    box-shadow: inset 0 -3px 0 rgba(200, 0, 90, 0.55) !important;
}
.duo-app .bottom-nav-simple .nav-workout.active .nav-label,
.duo-app .bottom-nav-simple .nav-item-hero.active .nav-label {
    color: #FF006E !important;
}
.duo-app .nav-icon {
    width: 26px !important;
    height: 26px !important;
}
:root {
    --nav-h: 108px;
}

/* === Edzés: nagyobb, mobilosabb === */
.workout-prestart-duo .prestart-topbar .prestart-title {
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
}
.workout-prestart-duo .prestart-topbar .prestart-sub {
    font-size: 0.95rem !important;
}
.workout-prestart-duo .plan-step-head .plan-title {
    font-size: 1.25rem !important;
}
.workout-prestart-duo .plan-hint {
    font-size: 1rem !important;
}
.workout-page .body-figure,
.workout-prestart-duo .body-figure {
    width: min(420px, 98vw) !important;
}
.workout-page .plan-body-map,
.workout-prestart-duo .plan-body-map {
    padding: 0.75rem 0.45rem 0.95rem !important;
    border-radius: 20px !important;
    border: 2px solid var(--bg-elevated) !important;
    border-bottom: 4px solid #2A373E !important;
    background: var(--bg-card) !important;
}
.workout-page .plan-focus-chip,
.workout-prestart-duo .plan-focus-chip {
    font-size: 0.92rem !important;
    padding: 0.5rem 0.9rem !important;
    min-height: 40px;
}
.workout-page #launchWorkoutBtn,
.workout-prestart-duo #launchWorkoutBtn {
    min-height: 78px !important;
    font-size: 1.1rem;
    margin-top: 0.85rem !important;
}
.workout-page #launchWorkoutBtn .home-start-text strong,
.workout-prestart-duo #launchWorkoutBtn .home-start-text strong {
    font-size: 1.2rem !important;
}
.workout-page #launchEmptyBtn,
.workout-prestart-duo #launchEmptyBtn {
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 800;
}
.workout-page .plan-more-duo > summary,
.workout-prestart-duo .plan-more-duo > summary {
    font-size: 1.05rem !important;
    font-weight: 800;
    padding: 0.85rem 0.2rem !important;
}
.workout-page .body-view-btn,
.workout-page .body-chip-btn,
.workout-prestart-duo .body-view-btn,
.workout-prestart-duo .body-chip-btn {
    min-height: 44px;
    font-size: 0.92rem !important;
    padding: 0.55rem 0.85rem !important;
}
.workout-active-clean .timer-display {
    font-size: clamp(2.9rem, 14vw, 3.7rem) !important;
}
.workout-active-clean .wa-top {
    padding: 1rem 1rem 1.1rem !important;
}
.workout-active-clean .wa-stats {
    font-size: 0.95rem !important;
}
.workout-active-clean .wa-pause {
    width: 52px !important;
    height: 52px !important;
}

/* === Liga + Bar�tok (Duo) === */
.league-duo {
    padding-bottom: calc(var(--nav-h) + 1.5rem);
}
.league-top {
    padding: 0.35rem 0 0.75rem;
}
.league-top h1 {
    margin: 0;
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.league-top-sub {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95rem;
}
.league-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin: 0.4rem 0 1rem;
    padding: 0.35rem;
    border-radius: 16px;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
}
.league-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 800;
    font-size: 0.95rem;
    min-height: 44px;
    border-radius: 12px;
    cursor: pointer;
}
.league-tab.is-on {
    background: #58CC02;
    color: #131F24;
    box-shadow: 0 3px 0 #58A700;
}
.league-me-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(88, 204, 2, 0.18), rgba(28, 176, 246, 0.12));
    border: 2px solid rgba(88, 204, 2, 0.35);
    border-bottom-width: 4px;
}
.league-me-place,
.league-row-place {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.95rem;
    background: var(--bg-elevated);
    color: #fff;
    flex-shrink: 0;
}
.league-me-place.is-gold,
.league-row-place.is-gold { background: #FFC800; color: #131F24; }
.league-me-place.is-silver,
.league-row-place.is-silver { background: #AAB4BD; color: #131F24; }
.league-me-place.is-bronze,
.league-row-place.is-bronze { background: #CE7A3A; color: #131F24; }
.league-me-copy {
    flex: 1;
    min-width: 0;
}
.league-me-copy strong,
.league-row-body strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}
.league-me-copy small,
.league-row-body small {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.82rem;
}
.league-rank-pill {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    border: 2px solid #58CC02;
    color: #58CC02;
}
.league-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.league-row,
.league-person {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 4px;
    animation: leagueRowIn 0.35s ease both;
    animation-delay: calc(var(--row-i, 0) * 40ms);
}
.league-row.is-me {
    border-color: rgba(88, 204, 2, 0.55);
    background: rgba(88, 204, 2, 0.08);
}
@keyframes leagueRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.league-row-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: color-mix(in srgb, var(--rank, #58CC02) 22%, #1A2A32);
    color: var(--rank, #58CC02);
    border: 2px solid color-mix(in srgb, var(--rank, #58CC02) 45%, transparent);
    flex-shrink: 0;
}
.league-row-body { flex: 1; min-width: 0; }
.league-row-xp {
    font-weight: 800;
    color: #FFC800;
    white-space: nowrap;
}
.league-row-xp strong { font-size: 1.05rem; }
.league-code-box {
    margin-bottom: 1rem;
}
.duo-panel-soft {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 4px;
}
.league-code-label {
    margin: 0 0 0.45rem;
    font-weight: 800;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.league-code-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.league-code-row strong {
    font-size: 1.55rem;
    letter-spacing: 0.18em;
    font-weight: 900;
}
.league-invite { margin-bottom: 1.25rem; }
.league-invite-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}
.league-block { margin-top: 1.15rem; }
.duo-subhead {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
}
.league-people {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.league-crew {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.league-crew-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "av copy"
        "cta cta";
    gap: 0.55rem 0.75rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 4px;
}
.league-crew-av {
    grid-area: av;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.05rem;
    background: rgba(88, 204, 2, 0.16);
    color: #58CC02;
    border: 2px solid rgba(88, 204, 2, 0.55);
    flex-shrink: 0;
    overflow: hidden;
}
.league-crew-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.league-crew-copy {
    grid-area: copy;
    min-width: 0;
    padding-right: 1.5rem;
}
.league-crew-copy strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}
.league-crew-copy small {
    display: block;
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-weight: 650;
    font-size: 0.82rem;
}
.league-crew-cta {
    grid-area: cta;
    width: 100%;
    justify-content: center;
}
.league-crew-cta.is-sent {
    opacity: 0.85;
}
.league-crew-more {
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.55;
}
.league-crew-more:active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}
.league-ping-banner {
    margin: 0.85rem 0 0;
}
.league-ping {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(88, 204, 2, 0.1);
    border: 2px solid rgba(88, 204, 2, 0.35);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
}
.league-ping .league-row-avatar {
    flex-shrink: 0;
}
.league-person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1 1 100%;
    justify-content: flex-end;
    max-width: 100%;
}
.league-person-actions .btn {
    flex: 0 1 auto;
    white-space: nowrap;
    max-width: 100%;
}
.btn-sm {
    min-height: 40px;
    padding: 0.4rem 0.75rem;
    font-size: 0.88rem;
}
@media (prefers-reduced-motion: reduce) {
    .league-row { animation: none; }
}

/* === Közösség – kompakt pro kártya === */
.home-community {
    margin-top: 0.2rem;
}
.home-community-pro .hc-card {
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 4px;
}
.hc-hero {
    position: relative;
    min-height: 88px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem;
    padding: 0.7rem 0.75rem 0.65rem;
}
.hc-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}
.hc-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(10, 14, 18, 0.92) 0%, rgba(10, 14, 18, 0.55) 55%, rgba(10, 14, 18, 0.25) 100%);
}
.hc-hero-copy,
.hc-hero-actions {
    position: relative;
    z-index: 1;
}
.hc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #58CC02;
    margin-bottom: 0.1rem;
}
.hc-kicker img { display: block; }
.hc-hero-copy h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
}
.hc-hero-copy p {
    margin: 0.12rem 0 0;
    font-size: 0.78rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.72);
}
.hc-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.hc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(19, 31, 36, 0.72);
    border: 1.5px solid rgba(88, 204, 2, 0.45);
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 800;
    backdrop-filter: blur(6px);
}
.hc-chip img { display: block; flex-shrink: 0; }
.hc-chip:active { transform: scale(0.96); }

.hc-cheers.home-cheers-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(28, 176, 246, 0.25);
    background: rgba(28, 176, 246, 0.12);
    font-size: 0.82rem;
    font-weight: 700;
}
.hc-cheers img { flex-shrink: 0; }
.hc-cheers.hidden { display: none; }

.hc-friends.home-motivate-row {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.55rem 0.65rem 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hc-friends::-webkit-scrollbar { display: none; }
.hc-friend {
    appearance: none;
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 3px;
    background: var(--bg);
    color: inherit;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.45rem 0.35rem;
    min-width: 3.4rem;
    font: inherit;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.hc-friend-av {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 900;
    background: rgba(88, 204, 2, 0.18);
    border: 2px solid #58CC02;
    color: #58CC02;
}
.hc-friend-name {
    font-size: 0.62rem;
    font-weight: 800;
    max-width: 3.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-friend-ask {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #58CC02;
    line-height: 1;
}
.hc-friend.is-sent,
.home-motivate-chip.is-sent {
    border-color: rgba(88, 204, 2, 0.65);
    background: rgba(88, 204, 2, 0.1);
}
.hc-friend.is-sent .hc-friend-av {
    background: #58CC02;
    color: #131F24;
}
.hc-friend.is-sent .hc-friend-ask {
    color: #fff;
}

.hc-feed.community-feed-home {
    max-height: none;
    overflow: visible;
    gap: 0;
    padding: 0.15rem 0 0.2rem;
}
.hc-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.hc-item-av {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 900;
    background: var(--bg-elevated);
    flex-shrink: 0;
}
.community-item-workout .hc-item-av {
    background: rgba(28, 176, 246, 0.2);
    color: #1CB0F6;
}
.community-item-cheer .hc-item-av {
    background: rgba(255, 200, 0, 0.2);
    color: #FFC800;
}
.hc-item-body {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-item-ico { flex-shrink: 0; opacity: 0.9; }
.hc-empty {
    margin: 0;
    padding: 0.65rem 0.85rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-muted, #8a9aa3);
}
.hc-empty-cta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.35rem 0.65rem 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: rgba(88, 204, 2, 0.1);
    border: 1.5px dashed rgba(88, 204, 2, 0.45);
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
}

.community-feed {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.community-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: var(--bg-card);
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 3px;
}
.home-motivate-chip {
    appearance: none;
    border: 2px solid var(--bg-elevated);
    border-bottom-width: 4px;
    background: var(--bg-card);
    color: inherit;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
@media (max-width: 380px) {
    .logo-island:not(.is-compact) {
        --logo-size: 108px;
    }
    .logo-island.is-compact {
        --logo-size: 48px;
    }
    body.workout-live-on .logo-island:not(.is-compact) {
        --logo-size: 108px !important;
    }
    body.workout-live-on .logo-island.is-compact {
        --logo-size: 48px !important;
    }
}

/* === Desktop bemutató (app csak mobilon) === */
body.page-get-app {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100dvh;
    background: #131F24;
    overflow-x: hidden;
    font-family: 'Nunito', system-ui, sans-serif;
}
.get-app-showcase {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 3rem;
}
.ga-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.5rem;
}
.ga-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.ga-brand {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
}
.ga-brand strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
}
.ga-brand span {
    font-size: 0.85rem;
    font-weight: 650;
    color: #AFAFAF;
}
.ga-legal-link {
    color: #AFAFAF;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.88rem;
}
.ga-legal-link:hover { color: #58CC02; }
.ga-hero {
    position: relative;
    margin: 0 1.25rem;
    min-height: min(58vh, 520px);
    border-radius: 28px;
    overflow: hidden;
    border: 2px solid #2A373E;
}
.ga-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.2) brightness(0.92);
}
.ga-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    padding: 3rem 2.25rem 2.5rem;
    background: linear-gradient(105deg, rgba(19, 31, 36, 0.92) 0%, rgba(19, 31, 36, 0.55) 70%, transparent 100%);
}
.ga-kicker {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #58CC02;
}
.ga-hero-copy h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
}
.ga-lead {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 650;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}
.ga-store-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1.35rem;
}
.ga-store-row--footer {
    margin: 0 0 1rem;
}
.ga-play-badge {
    display: inline-block;
    line-height: 0;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.ga-play-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}
.ga-play-badge img {
    display: block;
    width: 200px;
    height: auto;
    margin: -10px -12px;
}
.ga-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem 0.55rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #2A373E;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.ga-qr img {
    display: block;
    width: 88px;
    height: 88px;
}
.ga-qr span {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #131F24;
    text-align: center;
    max-width: 7.5rem;
    line-height: 1.2;
}
.ga-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.85rem;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    background: #58CC02;
    color: #131F24;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 4px solid #46a302;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.ga-play-btn:hover {
    filter: brightness(1.05);
    color: #131F24;
}
.ga-play-btn:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
}
.ga-footer-cta a:not(.ga-play-badge):not(.ga-play-btn) {
    color: #58CC02;
    font-weight: 800;
    text-decoration: underline;
}
.ga-android .mono {
    color: #e5e7eb;
    font-size: 0.9em;
}
.ga-phone-band {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 2rem;
    align-items: center;
    margin: 2.5rem 1.25rem 0;
    padding: 1.5rem;
    border-radius: 24px;
    background: #1a2730;
    border: 2px solid #2A373E;
}
.ga-phone {
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid #37464F;
    border-bottom-width: 5px;
    background: #0d1519;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ga-phone img {
    display: block;
    width: 100%;
    height: auto;
}
.ga-phone-copy h2 {
    margin: 0 0 0.75rem;
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
}
.ga-bullets {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    color: #e5e7eb;
    font-weight: 650;
    line-height: 1.55;
}
.ga-bullets li { margin-bottom: 0.35rem; }
.ga-cta-note {
    margin: 0 0 0.45rem;
    font-weight: 700;
    color: #58CC02;
}
.ga-url {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}
.ga-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 1.25rem 0;
}
.ga-feat {
    display: grid;
    grid-template-rows: 160px auto;
    border-radius: 20px;
    overflow: hidden;
    background: #1a2730;
    border: 2px solid #2A373E;
    border-bottom-width: 4px;
}
.ga-feat img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    filter: saturate(1.25) brightness(1.05);
}
.ga-feat > div {
    padding: 1rem 1.1rem 1.15rem;
}
.ga-feat h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.ga-feat p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.4;
    color: #AFAFAF;
}
.ga-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin: 2rem 1.25rem 0;
}
.ga-strip img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: saturate(1.2) brightness(1.08);
}
.ga-footer-cta {
    margin: 2.25rem 1.25rem 0;
    padding: 1.75rem 1.5rem;
    border-radius: 22px;
    background: rgba(88, 204, 2, 0.08);
    border: 2px solid rgba(88, 204, 2, 0.35);
}
.ga-footer-cta h2 {
    margin: 0 0 0.85rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
}
.ga-steps {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    color: #fff;
    font-weight: 650;
    line-height: 1.55;
}
.ga-steps li { margin-bottom: 0.4rem; }
.ga-steps strong { color: #58CC02; }
.ga-android {
    margin: 0 0 0.85rem;
    font-weight: 650;
    color: #AFAFAF;
}
.get-app-legal {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 650;
    color: #AFAFAF;
}
.get-app-legal a {
    color: #AFAFAF;
    text-decoration: underline;
}
.get-app-legal a:hover { color: #58CC02; }
@media (max-width: 860px) {
    .ga-phone-band {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .ga-phone { max-width: 240px; }
    .ga-bullets { text-align: left; display: inline-block; }
    .ga-features { grid-template-columns: 1fr; }
    .ga-strip { grid-template-columns: 1fr 1fr; }
    .ga-hero-copy { max-width: none; background: linear-gradient(180deg, transparent 0%, rgba(19, 31, 36, 0.92) 55%); padding-top: 8rem; }
    .ga-store-row { justify-content: center; }
    .ga-play-btn { width: 100%; max-width: 280px; }
}

/* —— Home: heti insight, gyors start, terem-társak (képes) —— */
.home-week-insight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    min-height: 72px;
    padding: 0.65rem 0.85rem 0.65rem 0.65rem;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(88, 204, 2, 0.28);
}
.home-week-insight-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-week-insight-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.92) 35%, rgba(19, 31, 36, 0.55) 100%);
}
.home-week-insight-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
}
.home-week-insight-copy strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--duo-green, #58CC02);
}
.home-week-insight-copy span {
    font-size: 0.78rem;
    color: #d7dde0;
    font-weight: 650;
}
.home-week-insight-ico {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}

.home-start-duo.home-start-visual {
    border-bottom-color: var(--duo-green-dark);
}

.home-repeat-cta {
    position: relative;
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden !important;
    isolation: isolate;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: #1a2730;
}
.home-repeat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}
.home-repeat-shade {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.88) 30%, rgba(19, 31, 36, 0.35) 100%);
}
.home-repeat-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.15rem;
}
.home-repeat-copy strong {
    font-size: 1rem;
    font-weight: 800;
}
.home-repeat-copy small {
    font-size: 0.75rem;
    color: #d0d6d9;
    font-weight: 650;
}
.home-repeat-cta:active {
    transform: translateY(1px);
}

.home-templates {
    margin-top: 0.15rem;
}
.home-templates-label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #afafaf);
}
.home-templates-row {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.home-templates-row::-webkit-scrollbar { display: none; }
.home-tpl-chip {
    position: relative;
    flex: 0 0 auto;
    width: 9.5rem;
    height: 7.2rem;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden !important;
    isolation: isolate;
    background: #1a2730;
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.home-tpl-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
}
.home-tpl-shade {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 25%, rgba(10, 16, 20, 0.92) 100%);
}
.home-tpl-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding: 0.65rem 0.7rem;
}
.home-tpl-chip strong {
    font-size: 0.92rem;
    font-weight: 800;
}
.home-tpl-chip small {
    font-size: 0.66rem;
    color: #c8ced1;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-tpl-chip:active {
    outline: 2px solid var(--duo-green, #58CC02);
    outline-offset: 1px;
}

.home-gym-mates {
    padding: 0 0 0.35rem;
}
.home-gym-mates-hero {
    position: relative;
    height: 72px;
    overflow: hidden;
    margin-bottom: 0.55rem;
}
.home-gym-mates-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-gym-mates-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.85) 20%, rgba(19, 31, 36, 0.25) 100%);
}
.home-gym-mates-label {
    position: absolute;
    left: 0.9rem;
    bottom: 0.7rem;
    z-index: 1;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}
.home-gym-mates-row {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0 0.9rem 0.35rem;
    scrollbar-width: none;
}
.home-gym-mates-row::-webkit-scrollbar { display: none; }
.home-gym-mate {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 3.4rem;
}
.home-gym-mate-av {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2c3c46, #1a2730);
    font-weight: 800;
    font-size: 0.9rem;
    border: 2px solid transparent;
}
.home-gym-mate.is-live .home-gym-mate-av {
    border-color: var(--duo-green, #58CC02);
    box-shadow: 0 0 0 2px rgba(88, 204, 2, 0.25);
}
.home-gym-mate-name {
    font-size: 0.68rem;
    font-weight: 700;
    max-width: 3.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-gym-mate small {
    font-size: 0.62rem;
    color: var(--text-muted, #afafaf);
    font-weight: 650;
}

.hc-empty-cta-visual {
    position: relative;
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #1a2730;
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.hc-empty-cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hc-empty-cta-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.88) 25%, rgba(19, 31, 36, 0.4) 100%);
}
.hc-empty-cta-copy {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.1rem 1rem;
    font-weight: 750;
}

.league-code-visual {
    padding: 0 0 1rem !important;
    overflow: hidden;
}
.league-invite-hero {
    position: relative;
    height: 110px;
    margin-bottom: 0.85rem;
}
.league-invite-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.league-invite-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 10%, rgba(19, 31, 36, 0.92) 100%);
}
.league-invite-hero .league-code-label {
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
    z-index: 1;
    margin: 0;
    color: #fff;
}
.league-code-visual .league-code-row,
.league-code-visual .league-share-btn,
.league-code-visual .field-hint,
.league-code-visual .form-msg {
    margin-left: 1rem;
    margin-right: 1rem;
}
.league-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    box-sizing: border-box;
}
.league-share-btn img {
    filter: brightness(0) invert(1);
}

.auth-invite-visual {
    position: relative;
    margin: 0 0 1rem;
    border-radius: 14px;
    overflow: hidden;
    min-height: 88px;
}
.auth-invite-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.auth-invite-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.9) 30%, rgba(19, 31, 36, 0.55) 100%);
}
.auth-invite-banner {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.85rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.35;
    color: #fff;
    background: transparent;
    border: 0;
}
.auth-invite-banner strong {
    color: var(--duo-green, #58CC02);
    letter-spacing: 0.04em;
}

/* —— Terem: GPS / Google Places —— */
.gym-current-addr {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--text-muted, #afafaf);
    font-weight: 650;
}
.gym-same-stats {
    margin: 0.55rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: rgba(88, 204, 2, 0.1);
    border: 1px solid rgba(88, 204, 2, 0.35);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.35;
}
.gym-locate-block {
    margin: 0 0 1.1rem;
}
.gym-locate-btn {
    gap: 0.65rem;
}
.gym-locate-btn .home-start-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}
.gym-locate-btn .home-start-text small {
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
    font-weight: 700;
}
.gym-locate-ico {
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.gym-maps-off {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(255, 200, 0, 0.1);
    border: 1px solid rgba(255, 200, 0, 0.28);
    font-size: 0.85rem;
    font-weight: 650;
    color: #f0d78c;
}
.gym-search-row {
    margin: 0 0 0.85rem;
}
.gym-search-controls {
    display: flex;
    gap: 0.5rem;
}
.gym-search-controls .input {
    flex: 1;
    min-width: 0;
}
.gym-places {
    margin: 0 0 1.1rem;
}
.gym-places-label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #afafaf);
}
.gym-places-empty {
    margin: 0;
    padding: 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-muted, #afafaf);
}
.gym-places-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.gym-place-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    background: #1a2730;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.gym-place-card.is-nearest {
    border-color: rgba(88, 204, 2, 0.45);
}
.gym-place-card.is-selected {
    border-color: var(--duo-green, #58CC02);
    box-shadow: 0 0 0 2px rgba(88, 204, 2, 0.2);
}
.gym-place-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.gym-place-top strong {
    font-size: 0.95rem;
    font-weight: 800;
}
.gym-place-dist {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(88, 204, 2, 0.18);
    color: var(--duo-green, #58CC02);
    font-size: 0.72rem;
    font-weight: 800;
}
.gym-place-card small {
    font-size: 0.78rem;
    color: #AFAFAF;
    font-weight: 650;
    line-height: 1.3;
}
.gym-place-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.gym-place-pick {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--duo-green, #58CC02);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gym-place-map {
    font-size: 0.75rem;
    font-weight: 750;
    color: #9ecbff;
    text-decoration: none;
}
.onb-gym-locate {
    margin-bottom: 0.85rem;
}
.onb-gym-locate .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.onb-gym-locate .gym-places {
    margin-top: 0.65rem;
}

/* Profilképek */
.home-avatar.has-photo,
.duo-avatar-md.has-photo,
.league-row-avatar.has-photo,
.league-crew-av.has-photo,
.hc-friend-av.has-photo,
.hc-item-av.has-photo,
.home-gym-mate-av.has-photo {
    padding: 0;
    overflow: hidden;
    background: #1a2730;
    border-color: rgba(255, 255, 255, 0.12);
    color: transparent;
}
/* Profil: overflow visible, különben levágja a kamera badge-et */
.profile-av-btn.has-photo {
    padding: 0;
    overflow: visible;
    background: #1a2730;
    border-color: rgba(255, 255, 255, 0.12);
    color: transparent;
}
.home-avatar img,
.duo-avatar-md img,
.league-row-avatar img,
.league-crew-av img,
.hc-friend-av img,
.hc-item-av img,
.home-gym-mate-av img,
.profile-av-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.profile-av-btn.has-photo img {
    border-radius: 50%;
}
.profile-av-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    overflow: visible;
}
.profile-av-btn {
    border: 0;
    cursor: pointer;
    padding: 0;
    font: inherit;
    position: relative;
    overflow: visible;
}
.profile-av-btn::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--duo-green, #58CC02) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131F24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
    border: 2px solid var(--bg, #131F24);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.profile-av-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.profile-av-hint {
    margin: 0.35rem 0 0;
    min-height: 1em;
    font-size: 0.75rem;
    color: var(--text-muted, #afafaf);
    font-weight: 650;
}
.profile-av-hint.is-error {
    color: #ff6b6b;
}
/* WebView: ne clip/display:none – Androidon így nyílik a fájlválasztó */
.avatar-file-input {
    position: fixed;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Profilkép vágó */
body.avatar-crop-open {
    overflow: hidden;
}
.avatar-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(8, 12, 16, 0.72);
    padding: 0;
}
.avatar-crop-sheet {
    width: min(100%, 440px);
    background: #1a2730;
    border-radius: 22px 22px 0 0;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
.avatar-crop-head {
    text-align: center;
    margin-bottom: 0.75rem;
}
.avatar-crop-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}
.avatar-crop-head p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #afafaf);
}
.avatar-crop-stage {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    touch-action: none;
    background: #0e161b;
    cursor: grab;
}
.avatar-crop-stage:active {
    cursor: grabbing;
}
.avatar-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.avatar-crop-mask {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(8, 12, 16, 0.55);
    border: 2px solid rgba(88, 204, 2, 0.85);
}
.avatar-crop-zoom {
    display: grid;
    gap: 0.35rem;
    margin: 0.85rem 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #afafaf);
}
.avatar-crop-zoom input[type="range"] {
    width: 100%;
    accent-color: var(--duo-green, #58CC02);
}
.avatar-crop-actions {
    display: flex;
    gap: 0.55rem;
}
.avatar-crop-actions .btn {
    flex: 1;
}
@media (min-width: 520px) {
    .avatar-crop-modal {
        align-items: center;
        padding: 1rem;
    }
    .avatar-crop-sheet {
        border-radius: 22px;
    }
}

/* Jogi oldalak (Play / adatvédelem) */
.legal-page {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.25rem 1.1rem 3rem;
    color: var(--text, #eee);
}
.legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    font-weight: 800;
    margin-bottom: 1.25rem;
}
.legal-brand img {
    border-radius: 12px;
}
.legal-page h1 {
    margin: 0 0 0.35rem;
    font-size: 1.55rem;
    font-weight: 800;
}
.legal-updated {
    color: var(--text-muted, #afafaf);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}
.legal-page section {
    margin-bottom: 1.15rem;
}
.legal-page h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
}
.legal-page p,
.legal-page li {
    line-height: 1.45;
    font-size: 0.92rem;
}
.legal-page ul {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
}
.legal-page a {
    color: var(--duo-green, #58CC02);
}
.legal-back {
    margin-top: 1.75rem;
    font-weight: 700;
}

/* —— Kardió + nagyobb mobil szett UI —— */
.onb-optional {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #8e8e93);
    text-transform: none;
    letter-spacing: 0;
}
.onb-gym-hint { margin: 0 0 0.65rem; }
.onb-gym-quick { margin-bottom: 0.75rem; }
.onb-gym-quick .btn {
    min-height: 48px;
    font-size: 1rem;
    border-radius: 14px;
}

#exerciseDetail .xd-input-lg,
.plan-input-lg {
    min-height: 52px !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    border-radius: 14px !important;
}
#exerciseDetail .xd-row {
    padding: 0.45rem !important;
    gap: 0.5rem !important;
    min-height: 58px;
}
#exerciseDetail .xd-num,
#exerciseDetail .xd-check {
    width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 1.1rem !important;
    border-radius: 14px !important;
}
#exerciseDetail .xd-check-lg {
    width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    font-size: 1.5rem !important;
    border-radius: 18px !important;
}
#exerciseDetail .xd-ready {
    min-height: 54px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 16px;
    margin-top: 0.75rem;
}
#exerciseDetail .xd-add {
    min-height: 44px;
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
}

.xd-cardio {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0.85rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}
.xd-cardio-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}
.xd-cardio-field > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(240, 240, 240, 0.55);
}
.xd-cardio-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.xd-cardio-input-wrap .xd-input {
    width: 100%;
    padding-right: 2.6rem !important;
}
.xd-cardio-input-wrap em {
    position: absolute;
    right: 0.7rem;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(240, 240, 240, 0.45);
    pointer-events: none;
}
.xd-cardio-hint {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: rgba(240, 240, 240, 0.5);
}
#exerciseDetail .is-cardio .xd-head h4 {
    font-size: 1.2rem;
    white-space: normal;
}

.plan-item-grid-cardio {
    grid-template-columns: 1fr 1fr !important;
}
.plan-field .plan-input-lg {
    width: 100%;
}
.plan-stepper .plan-set-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    border-radius: 12px;
}
.ex-icon.is-cardio .ex-icon-meta {
    color: #58cc02;
}

@media (max-width: 420px) {
    .xd-cardio {
        grid-template-columns: 1fr 1fr;
    }
    .xd-cardio .xd-check-lg {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: none !important;
        height: 56px !important;
    }
}

.profile-danger-zone {
    border: 1px solid rgba(255, 80, 80, 0.28);
}
.profile-danger-btn {
    color: #ff6b6b !important;
    border-color: rgba(255, 107, 107, 0.35) !important;
}
.detail-vol-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted, #8e8e93);
}
.gz-reward-session-meta {
    margin: 0.65rem 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    line-height: 1.35;
}
.gz-reward-session-meta.hidden {
    display: none;
}
.gz-reward-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    max-width: 100%;
}
.gz-reward-badges.hidden { display: none; }
.gz-reward-badge {
    margin: 0;
    width: 72px;
    text-align: center;
}
.gz-reward-badge img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: block;
    margin: 0 auto 0.3rem;
    background: #0a1216;
    box-shadow: 0 0 0 2px rgba(88, 204, 2, 0.35);
}
.gz-reward-badge figcaption {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
}
.gz-reward-badge.is-text span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.3rem;
    border-radius: 14px;
    background: #0a1216;
    font-size: 1.4rem;
}
.gz-win-achieve-img {
    position: relative;
    z-index: 2;
    width: 140px;
    height: 140px;
    margin: -0.5rem auto 0.65rem;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(88, 204, 2, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
}
.gz-win-achieve-img.hidden { display: none; }
.gz-win-art.is-dimmed { opacity: 0.22; filter: grayscale(0.4); }
.streak-hero,
.streak-hero-visual {
    --rank-accent: #89E219;
}

.profile-rank-hero {
    --rank-accent: #89E219;
    position: relative;
    overflow: hidden;
    margin: 0 0 1rem;
    border-radius: 24px;
    min-height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}
.profile-rank-hero.hidden { display: none; }
.profile-rank-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(1.2) contrast(1.05);
    z-index: 0;
}
.profile-rank-hero-art { display: none !important; }
.profile-rank-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(19, 31, 36, 0.92) 0%, rgba(19, 31, 36, 0.62) 55%, rgba(19, 31, 36, 0.4) 100%),
        radial-gradient(ellipse at 85% 40%, color-mix(in srgb, var(--rank-accent) 40%, transparent), transparent 55%);
}
.profile-rank-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.1rem 1.15rem;
}
.profile-rank-sticker-wrap {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0d1418;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.4),
        0 0 0 3px color-mix(in srgb, var(--rank-accent) 50%, transparent),
        0 0 22px color-mix(in srgb, var(--rank-accent) 28%, transparent);
}
.profile-rank-sticker-wrap.is-empty { display: none; }
.profile-rank-sticker {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.92);
    transform-origin: center;
}
.profile-rank-sticker.is-empty { display: none; }
.profile-rank-hero-copy {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: none;
    flex: 1;
    min-width: 0;
}
.profile-rank-kicker {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rank-accent) 75%, #AFAFAF);
}
.profile-rank-title {
    margin: 0.15rem 0 0.1rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 6.5vw, 2.15rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.03em;
    background: linear-gradient(105deg, #fff 8%, var(--rank-accent) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.profile-rank-meta {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
}
.profile-rank-bar {
    margin-top: 0.65rem;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    max-width: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.profile-rank-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rank-accent) 40%, #fff), var(--rank-accent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--rank-accent) 45%, transparent);
    transition: width 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
    overflow: hidden;
}
.profile-rank-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    animation: rankBarShine 2.2s ease-in-out infinite;
}
.profile-rank-next {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.65);
}

.profile-badges-panel {
    margin: 0.85rem 0 1rem;
}
.profile-badges-panel .duo-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.profile-badges-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted, #8e8e93);
}
.profile-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.65rem 0.5rem;
    padding: 0.25rem 0 0.35rem;
}
.profile-badge {
    margin: 0;
    text-align: center;
}
.profile-badge img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: block;
    margin: 0 auto 0.35rem;
    background: #0a1216;
    box-shadow: 0 0 0 2px rgba(88, 204, 2, 0.2);
}
.profile-badge figcaption {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text, #111);
}
.profile-badges-empty {
    grid-column: 1 / -1;
    margin: 0.35rem 0;
    font-size: 0.9rem;
}

/* Oldalháttér fotók kikapcsolva – csak edzés közben a wa-live */
@keyframes pageBreatheKen {
    0% { transform: scale(1.06) translate3d(-1.5%, 0.5%, 0); }
    100% { transform: scale(1.18) translate3d(1.8%, -1.2%, 0); }
}
.page-breathe {
    display: none !important;
}
.app-main.has-page-breathe {
    background: var(--bg) !important;
}
.duo-hero-bar-img,
.duo-hero-bar-fade {
    animation: none !important;
}
.home-start-duo.home-start-visual,
.home-start-duo.home-start-ambient {
    position: relative;
}
.home-start-duo.home-start-ambient .home-start-icon,
.home-start-duo.home-start-ambient .home-start-text,
.home-start-duo.home-start-ambient .gym-locate-ico {
    position: relative;
    z-index: 2;
}

.home-start-pulse {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .streak-hero-bg,
    .duo-hero-bar-img,
    .page-breathe-img,
    .home-start-duo.home-start-ambient .home-start-bg,
    .streak-hero-shade,
    .duo-hero-bar-fade,
    .page-breathe-shade,
    .page-breathe-sweep,
    .streak-hero-visual::after,
    .home-start-pulse,
    .wa-live-img,
    .wa-live-shade,
    .wa-live-sweep,
    body.workout-live-on .wa-live-img,
    body.workout-live-on .wa-live-shade,
    body.workout-live-on .wa-live-sweep {
        animation: none !important;
    }
    .wa-live-img,
    body.workout-live-on .wa-live-img {
        transform: scale(1.08);
    }
}

/* Kis képek: világosabb + keret – elválnak a sötét háttértől */
.duo-tile,
.home-repeat-cta,
.hc-empty-cta-visual,
.league-invite-hero,
.home-week-insight {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.28);
}
.duo-tile-img,
.home-repeat-img,
.hc-empty-cta-img,
.home-week-insight-img,
.league-invite-hero img {
    filter: saturate(1.38) contrast(1.16) brightness(1.2) !important;
}
.home-repeat-shade {
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.72) 28%, rgba(19, 31, 36, 0.22) 100%) !important;
}
.hc-empty-cta-shade,
.home-week-insight-shade {
    background: linear-gradient(90deg, rgba(19, 31, 36, 0.7) 22%, rgba(19, 31, 36, 0.28) 100%) !important;
}
.league-row-avatar:not(.has-photo),
.duo-avatar-md:not(.has-photo),
.home-avatar:not(.has-photo) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.league-row-avatar.has-photo,
.league-crew-av.has-photo,
.duo-avatar-md.has-photo,
.home-avatar.has-photo {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}