/* Root Variables */
:root {
    --primary-color: #6c63ff;
    --secondary-color: #f7b731;
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --text-color: #24324a;
    --bg-color: #eef3fb;
    --white: #ffffff;
    --shadow: 0 14px 34px rgba(35, 57, 103, 0.08);
    --shadow-soft: 0 10px 24px rgba(39, 61, 109, 0.06);
    --border-radius: 10px;
    --radius-lg: 22px;
    --gray-light: #e2eaf7;
    --gray-text: #64748b;
    --border-soft: #d9e2f2;
}

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

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top, rgba(108, 99, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #f6f8fd 0%, var(--bg-color) 100%);
    color: var(--text-color);
    line-height: 1.6;
}

body.dark-mode {
    background:
        radial-gradient(circle at top, rgba(37, 190, 133, 0.18), transparent 28%),
        linear-gradient(180deg, #08111f 0%, #0f1b2e 100%);
    color: #e6eefc;
}

/* View Management */
.view-section {
    display: block;
}

.view-section.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

/* Container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Header */
header {
    background-color: #0a1330;
    background-image: url('logo.jfif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: var(--white);
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
    min-height: 340px;
    overflow: visible;
    z-index: 20;
    isolation: isolate;
}

header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 14, 35, 0.1) 0%, rgba(8, 14, 35, 0.08) 100%);
    pointer-events: none;
}

.header-topbar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
    position: relative;
    z-index: 3;
}

.menu-dropdown {
    position: relative;
    z-index: 4;
}

.settings-dropdown {
    position: relative;
    z-index: 5;
}

.header-branding {
    position: absolute;
    inset: auto 0 10px 0;
    opacity: 0;
    pointer-events: none;
}

.header-branding h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.header-branding .subtitle {
    font-size: 1rem;
    opacity: 0.9;
}

/* Main Content */
main {
    flex: 1;
    background: rgba(255, 255, 255, 0.96);
    padding: 30px;
    border-radius: 22px;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
    border: 1px solid rgba(219, 227, 243, 0.9);
    position: relative;
    z-index: 1;
}

main h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.8rem;
}

main > .content > p {
    color: var(--gray-text);
    margin-bottom: 25px;
    font-size: 1rem;
}

/* ===================== */
/* PROFILE FORM STYLES   */
/* ===================== */

.profile-form {
    max-width: 100%;
}

.form-group {
    border: 1px solid var(--gray-light);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, #fbfcff 0%, #f3f7fd 100%);
    box-shadow: var(--shadow-soft);
}

.form-group legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    padding: 0 10px;
    margin-bottom: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-column {
    display: flex;
    flex-direction: column;
}

.form-column label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
}

.form-column input {
    padding: 12px 15px;
    border: 1px solid #d6deed;
    border-radius: 14px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
    color: #25344f;
    background: #ffffff;
}

.form-column input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.form-column input::placeholder {
    color: #bbb;
}

.form-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.btn-lg {
    padding: 15px 40px;
    font-size: 1.1rem;
    width: 100%;
}

/* ===================== */
/* APP SHELL / MENU      */
/* ===================== */

.app-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-topbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-bottom: 1px solid var(--gray-light);
    padding-bottom: 16px;
    position: relative;
}

.app-topbar h2 {
    margin: 0;
    color: #0a1330;
}

.app-topbar-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu-dropdown {
    position: relative;
    flex-shrink: 0;
}

.menu-toggle-btn {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
}

.menu-toggle-btn:hover,
.menu-toggle-btn.menu-open {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.22);
}

.menu-toggle-btn span {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--white);
}

.settings-toggle-btn {
    align-items: center;
    justify-content: center;
    padding: 0;
}

.settings-toggle-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

.settings-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(360px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 50px rgba(17, 31, 68, 0.18);
    border: 1px solid #dfe6f5;
    z-index: 90;
}

.settings-panel.hidden {
    display: none;
}

.settings-panel-header h3 {
    margin: 4px 0 6px;
    color: #0a1330;
}

.settings-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16826c;
}

.settings-description {
    color: #66758f;
    font-size: 0.92rem;
}

.settings-card {
    border: 1px solid #dde5f5;
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f8ff 100%);
}

.settings-card-accent {
    background: linear-gradient(135deg, #f2fbf8 0%, #eef6ff 100%);
}

.settings-card-title {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #425474;
    margin-bottom: 10px;
}

.settings-language-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.settings-language-btn {
    border: 1px solid #dbe4f3;
    background: #ffffff;
    color: #223260;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.settings-language-btn.active {
    border-color: #16826c;
    background: #eaf8f4;
    color: #126a57;
}

.settings-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    color: #223260;
}

.settings-toggle-row + .settings-toggle-row {
    border-top: 1px solid #e5ebf6;
}

.settings-toggle-row strong,
.settings-toggle-row small {
    display: block;
}

.settings-toggle-row small,
.settings-surprise-copy {
    color: #66758f;
}

.settings-toggle-row input {
    margin-top: 3px;
}

.settings-page-shell {
    background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #dbe5fb;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 30px rgba(78, 104, 179, 0.08);
}

.settings-page-hero {
    margin-bottom: 18px;
}

.settings-page-grid {
    display: grid;
    gap: 14px;
}

.settings-select-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid #dbe5f5;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.settings-select-field + .settings-select-field {
    margin-top: 12px;
}

.settings-select-field span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #324563;
}

.settings-select-field select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #c8d6ed;
    border-radius: 14px;
    padding: 12px 42px 12px 14px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5 7 9l4-3.5' fill='none' stroke='%23546b92' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: #1f2f52;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

.settings-select-field select:focus {
    border-color: #7395cf;
    box-shadow: 0 0 0 4px rgba(78, 123, 196, 0.16);
}

.settings-select-field.is-selected {
    border-color: #c8d9ef;
    box-shadow: 0 10px 20px rgba(55, 86, 140, 0.08);
}

.settings-version-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(64, 87, 128, 0.12);
    color: #223260;
}

.settings-reset-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(179, 94, 94, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff5f5 0%, #ffeceb 100%);
    color: #8f2f2f;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.settings-reset-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(179, 94, 94, 0.44);
    box-shadow: 0 12px 20px rgba(143, 47, 47, 0.12);
}

body.compact-ui main {
    padding: 22px;
}

body.compact-ui .app-shell {
    gap: 14px;
}

body.compact-ui .app-panel,
body.compact-ui .dashboard-card,
body.compact-ui .training-plan-section,
body.compact-ui .nutrition-panel-card,
body.compact-ui .sleep-panel-card,
body.compact-ui .game-info-panel-card,
body.compact-ui .stats-panel-card,
body.compact-ui .prep-panel-card,
body.compact-ui .season-goal-panel-card,
body.compact-ui .trainer-feedback-panel,
body.compact-ui .personal-data-panel {
    border-radius: 18px;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

body.dark-mode header {
    background-color: #071224;
}

body.dark-mode main {
    background: rgba(12, 23, 40, 0.94);
    border-color: rgba(76, 108, 156, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

body.dark-mode .app-topbar {
    border-bottom-color: rgba(125, 151, 193, 0.2);
}

body.dark-mode .app-topbar h2,
body.dark-mode .settings-panel-header h3,
body.dark-mode .settings-version-row,
body.dark-mode .settings-card,
body.dark-mode .settings-toggle-row,
body.dark-mode .settings-select-field span {
    color: #e6eefc;
}

body.dark-mode .settings-page-shell {
    background: linear-gradient(145deg, rgba(17, 31, 53, 0.96) 0%, rgba(11, 23, 41, 0.96) 100%);
    border-color: rgba(80, 112, 163, 0.42);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.22);
}

body.dark-mode .settings-card {
    background: linear-gradient(180deg, rgba(21, 35, 59, 0.96) 0%, rgba(14, 27, 47, 0.98) 100%);
    border-color: rgba(80, 112, 163, 0.32);
}

body.dark-mode .settings-card-accent {
    background: linear-gradient(135deg, rgba(17, 56, 46, 0.95) 0%, rgba(14, 31, 56, 0.98) 100%);
}

body.dark-mode .settings-description,
body.dark-mode .settings-toggle-row small,
body.dark-mode .settings-surprise-copy {
    color: #9db0d0;
}

body.dark-mode .settings-select-field {
    background: linear-gradient(180deg, rgba(20, 38, 64, 0.94) 0%, rgba(14, 30, 52, 0.96) 100%);
    border-color: rgba(79, 112, 164, 0.42);
}

body.dark-mode .settings-select-field select {
    background-color: #183055;
    border-color: rgba(96, 129, 183, 0.46);
    color: #f1f6ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5 7 9l4-3.5' fill='none' stroke='%23c9dbff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
}

body.dark-mode .settings-select-field[data-settings-field="language"].is-selected {
    background: linear-gradient(180deg, rgba(20, 38, 64, 0.94) 0%, rgba(14, 30, 52, 0.96) 100%);
    border-color: rgba(79, 112, 164, 0.42);
    box-shadow: 0 14px 28px rgba(14, 38, 61, 0.24);
}

body.dark-mode .settings-select-field[data-settings-field="language"].is-selected select {
    background-color: #1a3a63;
    border-color: rgba(96, 129, 183, 0.46);
}

body.dark-mode .settings-select-field[data-settings-field="language"] {
    background: linear-gradient(180deg, rgba(20, 38, 64, 0.94) 0%, rgba(14, 30, 52, 0.96) 100%);
    border-color: rgba(79, 112, 164, 0.42);
    box-shadow: 0 14px 28px rgba(14, 38, 61, 0.24);
}

body.dark-mode .settings-select-field[data-settings-field="language"] select {
    background-color: #1a3a63;
    border-color: rgba(96, 129, 183, 0.46);
}

body.dark-mode .settings-reset-btn {
    background: linear-gradient(180deg, rgba(64, 26, 33, 0.96) 0%, rgba(45, 20, 27, 0.98) 100%);
    border-color: rgba(194, 101, 101, 0.34);
    color: #ffd6d6;
}

body.dark-mode .settings-reset-btn:hover {
    border-color: rgba(220, 121, 121, 0.48);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

body.dark-mode .app-menu-dropdown {
    background: #122238;
    border-color: rgba(86, 116, 166, 0.4);
}

/* ===================== */
/* DARK MODE — REGISTRATION / PROFILE FORM */
/* ===================== */

body.dark-mode #profileCreationView main,
body.dark-mode main:has(> .content > .profile-form) {
    background: rgba(12, 23, 40, 0.94);
}

body.dark-mode #profileCreationView h2,
body.dark-mode main h2 {
    color: #b6b0ff;
}

body.dark-mode #profileCreationView > .content > p,
body.dark-mode main > .content > p {
    color: #a6b6d4;
}

body.dark-mode .form-group {
    background: linear-gradient(180deg, rgba(21, 35, 59, 0.96) 0%, rgba(14, 27, 47, 0.98) 100%);
    border-color: rgba(80, 112, 163, 0.34);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body.dark-mode .form-group legend {
    color: #b6b0ff;
    background: #0d1a2e;
    border-radius: 999px;
    padding: 4px 14px;
    margin-left: -4px;
}

body.dark-mode .form-column label {
    color: #dbe5f7;
}

body.dark-mode .form-column input,
body.dark-mode .form-column select,
body.dark-mode .form-column textarea {
    background: #0f1f37;
    border-color: rgba(96, 129, 183, 0.42);
    color: #f1f6ff;
}

body.dark-mode .form-column input::placeholder,
body.dark-mode .form-column textarea::placeholder {
    color: #6f82a6;
}

body.dark-mode .form-column input:focus,
body.dark-mode .form-column select:focus,
body.dark-mode .form-column textarea:focus {
    border-color: #8a82ff;
    box-shadow: 0 0 0 3px rgba(138, 130, 255, 0.18);
}

body.dark-mode .form-column input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    opacity: 0.85;
}

.app-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 300px;
    max-width: min(360px, calc(100vw - 40px));
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 24px 50px rgba(17, 31, 68, 0.18);
    border: 1px solid #dfe6f5;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #b4b4b4 #f2f2f2;
    z-index: 240;
}

.app-menu-dropdown::-webkit-scrollbar {
    width: 16px;
}

.app-menu-dropdown::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
    border-left: 1px solid #dddddd;
}

.app-menu-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c6c6c6 0%, #9f9f9f 100%);
    border-radius: 999px;
    border: 3px solid #f3f3f3;
}

.app-menu-dropdown::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #b8b8b8 0%, #8f8f8f 100%);
}

.app-menu-dropdown::-webkit-scrollbar-button:single-button {
    display: block;
    height: 16px;
    background-color: #f2f2f2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

.app-menu-dropdown::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 2 9 7H1z' fill='%23939393'/%3E%3C/svg%3E");
}

.app-menu-dropdown::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3h8L5 8z' fill='%23939393'/%3E%3C/svg%3E");
}

.app-menu-dropdown.hidden {
    display: none;
}

.menu-header {
    padding-bottom: 6px;
}

.menu-header {
    display: none;
}

.menu-eyebrow {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.menu-help {
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--gray-text);
}

.app-menu-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-section {
    border: 1px solid #dde5f5;
    border-radius: 18px;
    background: linear-gradient(180deg, #fcfdff 0%, #f5f8ff 100%);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.menu-section:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(95, 118, 173, 0.09);
    border-color: #cfdaf2;
}

.menu-section-toggle {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--text-color);
    text-align: left;
}

.menu-section-toggle:hover {
    background: rgba(108, 99, 255, 0.06);
}

.menu-section-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.menu-section-title {
    font-size: 1rem;
}

.menu-section-subtitle {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-text);
}

.menu-section-arrow {
    font-size: 1rem;
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.menu-section.open .menu-section-arrow {
    transform: rotate(90deg);
}

.menu-subitems.hidden {
    display: none;
}

.menu-subitems {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
}

.menu-subitems.menu-subitems-single {
    padding-top: 4px;
}

.menu-section.open .menu-subitems {
    display: flex;
}

.menu-subitem {
    border: 1px solid #dbe4f3;
    background: var(--white);
    color: var(--text-color);
    border-radius: 14px;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: all 0.2s ease;
    font-weight: 600;
}

.menu-subitem:hover,
.menu-subitem.active {
    border-color: var(--primary-color);
    background: #eef0ff;
    color: var(--primary-color);
}

.menu-subitem.menu-subitem-featured {
    border-radius: 20px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #d7e5f7;
    color: #2b2b2b;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    box-shadow: 0 14px 26px rgba(133, 155, 198, 0.14);
}

.menu-subitem.menu-subitem-featured:hover,
.menu-subitem.menu-subitem-featured.active {
    border-color: #7eabff;
    background: #ffffff;
    color: #111111;
    transform: translateY(-1px);
}

.menu-btn {
    border: 2px solid #d9dff0;
    background: var(--white);
    color: var(--text-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-btn:hover {
    border-color: var(--primary-color);
}

.menu-btn.active {
    border-color: var(--primary-color);
    background: #eef0ff;
    color: var(--primary-color);
}

.menu-btn.menu-btn-accent {
    border-color: #ffd5cf;
    color: #a84434;
    background: #fff4f2;
}

.app-panel.hidden {
    display: none;
}

.app-panel {
    animation: panelFade 0.22s ease;
}

#aiModePanel,
.bottom-app-nav {
    display: none !important;
}

.landing-experience {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(77, 165, 255, 0.16), transparent 30%),
        linear-gradient(145deg, #edf4ff 0%, #e9f1ff 34%, #f8fbff 100%);
    border: 1px solid #dbe5fb;
    box-shadow: 0 18px 40px rgba(68, 89, 150, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.landing-splash-stage {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(14, 23, 49, 0.18) 0%, rgba(14, 23, 49, 0.04) 38%, rgba(248, 251, 255, 0) 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.16), transparent 42%);
    z-index: 1;
}

.landing-splash-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(38, 59, 112, 0.16), transparent 36%, rgba(108, 99, 255, 0.12) 100%);
}

.landing-logo-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 2;
    pointer-events: none;
}

.landing-logo-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.24) 0%, rgba(77, 165, 255, 0.12) 42%, transparent 72%);
    filter: blur(6px);
}

.landing-logo-mark {
    width: min(220px, 48vw);
    max-width: 220px;
    border-radius: 28px;
    box-shadow: 0 26px 48px rgba(23, 40, 82, 0.18);
}

.landing-logo-text {
    color: #21315f;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-menu-card {
    width: min(560px, 100%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 229, 247, 0.96);
    border-radius: 28px;
    box-shadow: 0 22px 42px rgba(43, 61, 114, 0.12);
    padding: 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
}

.landing-intro-shell {
    position: relative;
    z-index: 3;
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 26px 30px 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(226, 234, 248, 0.96);
    box-shadow: 0 24px 46px rgba(43, 61, 114, 0.12);
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(0.985);
}

.landing-intro-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.landing-intro-logo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 14px 28px rgba(34, 55, 105, 0.16);
}

.landing-intro-copy {
    text-align: left;
}

.landing-menu-eyebrow {
    color: #6781c5;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.landing-menu-card h3 {
    color: #1e2d5a;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.landing-intro-shell h3 {
    color: #1e2d5a;
    font-size: 1.95rem;
    margin: 0;
}

.landing-intro-shell > h3 {
    display: none;
}

.landing-menu-copy {
    color: #64748b;
    margin: 0 auto 12px;
    max-width: 46ch;
    font-size: 0.98rem;
    line-height: 1.65;
}

.landing-menu-note {
    color: #7b879d;
    font-size: 0.92rem;
    max-width: 34ch;
    margin: 0 auto;
}

.landing-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-menu-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-menu-btn {
    border: 1px solid #d9e4fb;
    border-radius: 18px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
    color: #26365a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-shadow: 0 10px 20px rgba(61, 80, 132, 0.08);
}

.landing-menu-btn:hover {
    transform: translateY(-2px);
    border-color: #bfcff4;
    background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
    box-shadow: 0 14px 24px rgba(61, 80, 132, 0.12);
}

.landing-animate .landing-splash-stage {
    animation: landingSplashFade 1.9s ease forwards;
}

.landing-animate .landing-logo-stage {
    animation: landingLogoFade 1.55s ease forwards;
}

.landing-animate .landing-intro-shell {
    animation: landingMenuReveal 0.8s ease 1.2s forwards;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-card {
    background: linear-gradient(180deg, #f9fbff 0%, #eff4fd 100%);
    border: 1px solid #dbe4f3;
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.dashboard-card h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.dashboard-card p {
    margin: 6px 0;
}

.detail-panel-card {
    background: linear-gradient(145deg, #f6f8ff 0%, #eef4ff 100%);
    border: 1px solid #d9e4fb;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 12px 28px rgba(84, 106, 170, 0.1);
}

.detail-panel-category {
    color: #111111;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.detail-panel-card h3 {
    margin-bottom: 10px;
    color: #223260;
    font-size: 1.7rem;
}

.detail-panel-description {
    color: #4f5d7d;
    max-width: 56ch;
    margin-bottom: 18px;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-info-card {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid #dce6fb;
}

.detail-info-card h4 {
    margin-bottom: 8px;
    color: #344675;
}

.detail-info-card p {
    color: #5b6786;
}

.detail-notes-card {
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #dce6fb;
}

.detail-notes-card h4 {
    margin-bottom: 10px;
    color: #344675;
}

.detail-notes-textarea {
    width: 100%;
    min-height: 160px;
    border: 1px solid #cfdcf8;
    border-radius: 14px;
    padding: 14px 16px;
    font: inherit;
    color: #344675;
    background: #fdfefe;
    resize: vertical;
}

.detail-notes-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}

.detail-notes-hint {
    margin-top: 8px;
    font-size: 0.92rem;
    color: #6a7693;
}

.trainer-feedback-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 188, 107, 0.26), transparent 24%),
        radial-gradient(circle at left top, rgba(67, 189, 255, 0.18), transparent 30%),
        linear-gradient(145deg, #f7fbff 0%, #eef4ff 44%, #fef7ee 100%);
    border: 1px solid #d9e6fb;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(45, 79, 138, 0.12);
}

.trainer-feedback-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.48), transparent 42%, rgba(255, 255, 255, 0.18));
    pointer-events: none;
}

.trainer-feedback-panel > * {
    position: relative;
    z-index: 1;
}

.trainer-feedback-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.trainer-feedback-category {
    color: #0d5f8f;
}

.trainer-feedback-hero-copy h3 {
    color: #14284f;
    font-size: 2rem;
    margin-bottom: 10px;
}

.trainer-feedback-intro {
    color: #4c607f;
    max-width: 58ch;
    font-size: 1rem;
}

.trainer-feedback-score-card,
.trainer-feedback-overview-card,
.trainer-feedback-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(214, 226, 245, 0.95);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(58, 83, 130, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.trainer-feedback-overview-card:hover,
.trainer-feedback-card:hover,
.weekly-review-card:hover,
.personal-data-card:hover,
.personal-data-profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(58, 83, 130, 0.11);
}

.trainer-feedback-score-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.trainer-feedback-score-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #4d6f95;
    margin-bottom: 10px;
}

.trainer-feedback-score-ring {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #ffffff 0 51%, transparent 52%),
        conic-gradient(#0f8dc7 0 68%, #ffb35c 68% 100%);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.trainer-feedback-score-ring span {
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 800;
    color: #14284f;
}

.trainer-feedback-score-ring small {
    display: block;
    margin-top: -4px;
    font-size: 0.9rem;
    color: #6881a1;
}

.trainer-feedback-score-text {
    color: #546882;
    max-width: 24ch;
}

.trainer-feedback-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.trainer-feedback-overview-card {
    padding: 18px;
}

.trainer-feedback-overview-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7ca3;
}

.trainer-feedback-overview-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.08rem;
    color: #13264d;
}

.trainer-feedback-overview-card p {
    color: #667892;
    font-size: 0.95rem;
}

.trainer-feedback-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trainer-feedback-card {
    padding: 20px;
}

.trainer-feedback-card-accent {
    background: linear-gradient(145deg, rgba(9, 73, 118, 0.96) 0%, rgba(18, 106, 139, 0.92) 100%);
    border-color: rgba(18, 101, 140, 0.8);
}

.trainer-feedback-card-accent .trainer-feedback-card-kicker,
.trainer-feedback-card-accent .trainer-feedback-card-header h4,
.trainer-feedback-card-accent .trainer-feedback-save-state,
.trainer-feedback-card-accent .trainer-feedback-field span {
    color: #eef7ff;
}

.trainer-feedback-card-accent .trainer-feedback-field input,
.trainer-feedback-card-accent .trainer-feedback-field select {
    background: rgba(255, 255, 255, 0.96);
}

.trainer-feedback-card-wide {
    grid-column: 1 / -1;
}

.trainer-feedback-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.trainer-feedback-card-kicker {
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6280a5;
}

.trainer-feedback-card-header h4 {
    color: #15284f;
    font-size: 1.15rem;
}

.trainer-feedback-save-state {
    color: #d6ecff;
    font-size: 0.85rem;
    white-space: nowrap;
}

.trainer-feedback-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trainer-feedback-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trainer-feedback-field-block {
    height: 100%;
}

.trainer-feedback-field span,
.trainer-feedback-range-field span {
    color: #536a88;
    font-weight: 700;
    font-size: 0.94rem;
}

.trainer-feedback-field input,
.trainer-feedback-field select,
.trainer-feedback-field textarea {
    width: 100%;
    border: 1px solid #d3def0;
    border-radius: 16px;
    padding: 12px 14px;
    font: inherit;
    background: #fff;
    color: #183053;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.trainer-feedback-field textarea {
    min-height: 110px;
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.trainer-feedback-field textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.trainer-feedback-field input:focus,
.trainer-feedback-field select:focus,
.trainer-feedback-field textarea:focus,
.trainer-feedback-range-field input:focus {
    outline: none;
    border-color: #198fc8;
    box-shadow: 0 0 0 4px rgba(25, 143, 200, 0.12);
}

.trainer-feedback-range-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trainer-feedback-range-field input[type="range"] {
    width: 100%;
    accent-color: #198fc8;
}

.trainer-feedback-range-scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #6a7f9b;
    font-size: 0.88rem;
    margin-top: 10px;
}

.trainer-feedback-rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e7f5ff;
    color: #0b6d9f;
    font-weight: 800;
}

.self-feedback-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 144, 162, 0.22), transparent 24%),
        radial-gradient(circle at left top, rgba(255, 209, 102, 0.18), transparent 30%),
        linear-gradient(145deg, #fffaf5 0%, #fff4ef 42%, #fffdf9 100%);
    border-color: #f3ddd4;
    box-shadow: 0 18px 40px rgba(139, 83, 45, 0.1);
}

.self-feedback-category {
    color: #a8573f;
}

.self-feedback-score-card {
    background: rgba(255, 250, 246, 0.9);
}

.self-feedback-score-ring {
    background:
        radial-gradient(circle at center, #ffffff 0 51%, transparent 52%),
        conic-gradient(#ea7a63 0 68%, #ffcf6d 68% 100%);
}

.self-feedback-card-accent {
    background: linear-gradient(145deg, rgba(151, 76, 52, 0.96) 0%, rgba(205, 111, 71, 0.92) 100%);
    border-color: rgba(178, 97, 62, 0.76);
}

.self-feedback-card-accent .trainer-feedback-card-kicker,
.self-feedback-card-accent .trainer-feedback-card-header h4,
.self-feedback-card-accent .trainer-feedback-save-state,
.self-feedback-card-accent .trainer-feedback-field span {
    color: #fff7f1;
}

.self-feedback-card-accent .trainer-feedback-field input,
.self-feedback-card-accent .trainer-feedback-field select {
    background: rgba(255, 255, 255, 0.96);
}

.self-feedback-rating-badge {
    background: #fff0e7;
    color: #bd5c3d;
}

.weekly-review-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(111, 218, 168, 0.22), transparent 24%),
        radial-gradient(circle at left top, rgba(118, 188, 255, 0.16), transparent 30%),
        linear-gradient(145deg, #f8fffb 0%, #f1fbf5 42%, #fcfffd 100%);
    border: 1px solid #d8efe1;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(62, 116, 91, 0.1);
}

.weekly-review-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.weekly-review-category {
    color: #1f7a5c;
}

.weekly-review-hero h3 {
    color: #163d33;
    font-size: 2rem;
    margin-bottom: 10px;
}

.weekly-review-intro {
    color: #4e6f63;
    max-width: 58ch;
}

.weekly-review-score-card,
.weekly-review-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(212, 235, 223, 0.96);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(58, 112, 83, 0.08);
}

.weekly-review-score-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.weekly-review-score-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #5c8a78;
    margin-bottom: 10px;
}

.weekly-review-score-ring {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #ffffff 0 51%, transparent 52%),
        conic-gradient(#37b27c 0 68%, #83d8af 68% 100%);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.weekly-review-score-ring span {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: #163d33;
}

.weekly-review-score-ring small {
    display: block;
    margin-top: -4px;
    font-size: 0.9rem;
    color: #6d8f82;
}

.weekly-review-score-text {
    color: #547065;
    max-width: 24ch;
}

.weekly-review-topbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.weekly-review-week-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.weekly-review-week-wrap label {
    color: #40695a;
    font-weight: 700;
}

.weekly-review-week-wrap input {
    border: 1px solid #cae7d6;
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    color: #183c33;
    background: rgba(255, 255, 255, 0.95);
}

.weekly-review-save-state {
    color: #5f7b6f;
    font-size: 0.92rem;
}

.weekly-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.weekly-review-card {
    padding: 20px;
}

.weekly-review-card-wide {
    grid-column: 1 / -1;
}

.weekly-review-card h4 {
    color: #183d33;
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.weekly-review-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.weekly-review-options-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.weekly-review-option,
.weekly-review-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #d6ecdf;
    border-radius: 16px;
    background: #ffffff;
    color: #32594d;
    font-weight: 600;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.weekly-review-option:hover,
.weekly-review-check:hover {
    border-color: #bfe2cf;
    background: #f8fdf9;
    transform: translateY(-1px);
}

.weekly-review-option:has(input:checked),
.weekly-review-check:has(input:checked) {
    border-color: #7fd1a8;
    background: linear-gradient(180deg, #f4fcf7 0%, #ecf9f1 100%);
    box-shadow: 0 8px 18px rgba(61, 148, 105, 0.1);
}

.weekly-review-option input,
.weekly-review-check input {
    accent-color: #2fad79;
    transform: scale(1.08);
}

.weekly-review-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.weekly-review-textarea-wrap {
    display: block;
}

.weekly-review-textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid #d6ecdf;
    border-radius: 18px;
    padding: 14px 16px;
    font: inherit;
    color: #24473d;
    background: #ffffff;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.weekly-review-textarea:focus {
    outline: none;
    border-color: #2fad79;
    box-shadow: 0 0 0 4px rgba(47, 173, 121, 0.12);
}

.weekly-review-analysis-card {
    background:
        radial-gradient(circle at top right, rgba(140, 228, 184, 0.18), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 252, 248, 0.98) 100%);
}

.weekly-review-analysis-intro {
    color: #5b786c;
    margin-bottom: 16px;
    max-width: 60ch;
}

.weekly-review-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
}

.weekly-review-analysis-chart {
    min-height: 240px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px;
    border: 1px solid #dcefe3;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
}

.weekly-review-analysis-chart-empty {
    grid-column: 1 / -1;
    align-self: center;
    text-align: center;
    color: #5a7b6d;
    font-weight: 700;
    padding: 12px;
}

.weekly-review-analysis-bar-wrap {
    display: grid;
    gap: 8px;
    align-items: end;
}

.weekly-review-analysis-bar-note {
    min-height: 36px;
    font-size: 0.78rem;
    color: #5b786c;
    text-align: center;
}

.weekly-review-analysis-bar-track {
    height: 132px;
    border-radius: 16px;
    background: linear-gradient(180deg, #eef8f1 0%, #dcefe3 100%);
    display: flex;
    align-items: end;
    overflow: hidden;
}

.weekly-review-analysis-bar {
    width: 100%;
    border-radius: 16px 16px 10px 10px;
    min-height: 12px;
}

.weekly-review-analysis-bar-strong {
    background: linear-gradient(180deg, #2fc17d 0%, #229863 100%);
}

.weekly-review-analysis-bar-good {
    background: linear-gradient(180deg, #62c98f 0%, #3fae71 100%);
}

.weekly-review-analysis-bar-mid {
    background: linear-gradient(180deg, #f2ca69 0%, #d6a842 100%);
}

.weekly-review-analysis-bar-low {
    background: linear-gradient(180deg, #e7a377 0%, #cc7a47 100%);
}

.weekly-review-analysis-bar-empty {
    background: linear-gradient(180deg, #d9e7df 0%, #bdd2c7 100%);
}

.weekly-review-analysis-bar-label {
    text-align: center;
    color: #24473d;
    font-weight: 700;
    font-size: 0.88rem;
}

.weekly-review-analysis-copy {
    display: grid;
    gap: 14px;
}

.weekly-review-analysis-headline {
    color: #183d33;
    font-size: 1.02rem;
    font-weight: 800;
}

.weekly-review-analysis-insights {
    display: grid;
    gap: 10px;
}

.weekly-review-analysis-insight {
    border: 1px solid #dcefe3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 14px;
    color: #32594d;
    font-weight: 600;
}

.weekly-review-analysis-checks {
    border: 1px solid #dcefe3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    padding: 14px;
}

.weekly-review-analysis-checks-label,
.weekly-review-analysis-checks-empty {
    color: #5a7b6d;
    font-size: 0.86rem;
    font-weight: 700;
}

.weekly-review-analysis-checks-label {
    margin-bottom: 10px;
}

.weekly-review-analysis-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.weekly-review-analysis-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff9f3;
    border: 1px solid #d3eadc;
    color: #2c5c4d;
    font-size: 0.86rem;
    font-weight: 700;
}

.weekly-review-analysis-summary {
    border-left: 4px solid #5fc68d;
    background: rgba(239, 249, 243, 0.92);
    border-radius: 0 16px 16px 0;
    padding: 12px 14px;
    color: #294b40;
    font-weight: 600;
}

.weekly-review-analysis-card {
    display: none !important;
}

.feedback-analysis-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(117, 173, 255, 0.18), transparent 26%),
        radial-gradient(circle at left top, rgba(255, 184, 107, 0.16), transparent 28%),
        linear-gradient(145deg, #f8fbff 0%, #f4f8ff 42%, #fcfdff 100%);
    border: 1px solid #dbe6f7;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(61, 88, 138, 0.1);
}

.feedback-analysis-category {
    color: #4667a9;
}

.feedback-analysis-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.feedback-analysis-title,
.feedback-analysis-hero h3 {
    color: #172b53;
    font-size: 2rem;
    margin-bottom: 10px;
}

.feedback-analysis-intro {
    color: #596c89;
    max-width: 58ch;
}

.feedback-analysis-score-card,
.feedback-analysis-chart-card,
.feedback-analysis-card,
.feedback-analysis-summary-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(216, 227, 244, 0.96);
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(58, 83, 130, 0.08);
}

.feedback-analysis-score-card,
.feedback-analysis-summary-card,
.feedback-analysis-chart-card,
.feedback-analysis-card {
    padding: 20px;
}

.feedback-analysis-score-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.feedback-analysis-score-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #6480ab;
    margin-bottom: 10px;
}

.feedback-analysis-score-ring {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #ffffff 0 51%, transparent 52%),
        conic-gradient(#dce9e2 0 100%);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.62);
    margin-bottom: 12px;
}

.feedback-analysis-score-ring-empty {
    background:
        radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
        conic-gradient(#e8eef5 0 100%);
    box-shadow:
        inset 0 0 0 10px rgba(255, 255, 255, 0.7),
        0 10px 24px rgba(102, 123, 153, 0.12);
}

.feedback-analysis-score-ring span {
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 800;
    color: #16284c;
}

.feedback-analysis-score-value-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 2rem !important;
    color: #6d7f97 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.feedback-analysis-score-value-empty small {
    display: none;
}

.feedback-analysis-score-ring small {
    display: block;
    margin-top: -4px;
    font-size: 0.9rem;
    color: #6881a1;
}

.feedback-analysis-score-text {
    color: #5a6f8b;
    max-width: 24ch;
}

.feedback-analysis-topbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 18px;
}

.feedback-analysis-week-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-analysis-week-wrap label {
    color: #3f5d8f;
    font-weight: 700;
}

.feedback-analysis-week-wrap input {
    border: 1px solid #d2dff3;
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    color: #173055;
    background: rgba(255, 255, 255, 0.96);
}

.feedback-analysis-chart-card {
    margin-bottom: 18px;
}

.feedback-analysis-chart-card h4,
.feedback-analysis-summary-card h4,
.feedback-analysis-card h4 {
    color: #172b53;
}

.feedback-analysis-chart-card h4,
.feedback-analysis-summary-card h4 {
    margin-bottom: 14px;
}

.feedback-analysis-chart {
    min-height: 250px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.feedback-analysis-chart-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #60738f;
    font-weight: 700;
    padding: 18px 12px;
}

.feedback-analysis-chart-bar-wrap {
    display: grid;
    gap: 8px;
    align-items: end;
}

.feedback-analysis-chart-bar-value {
    text-align: center;
    color: #617594;
    font-size: 0.8rem;
    font-weight: 700;
}

.feedback-analysis-chart-bar-value-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 34px;
    color: #7c8da4;
    font-size: 0.72rem;
    line-height: 1.1;
}

.feedback-analysis-chart-bar-value-empty span {
    font-size: 0.66rem;
    font-weight: 600;
    color: #97a4b6;
}

.feedback-analysis-chart-bar-track {
    height: 156px;
    border-radius: 18px;
    background: linear-gradient(180deg, #eef4ff 0%, #dfe8f6 100%);
    display: flex;
    align-items: end;
    overflow: hidden;
}

.feedback-analysis-chart-bar {
    width: 100%;
    min-height: 12px;
    border-radius: 18px 18px 10px 10px;
}

.feedback-analysis-chart-bar-strong {
    background: linear-gradient(180deg, #2fbf8e 0%, #1d8f6c 100%);
}

.feedback-analysis-chart-bar-mid {
    background: linear-gradient(180deg, #4c96e6 0%, #326fc3 100%);
}

.feedback-analysis-chart-bar-low {
    background: linear-gradient(180deg, #f0b15f 0%, #d98c2f 100%);
}

.feedback-analysis-chart-bar-empty {
    background: linear-gradient(180deg, #d6dee8 0%, #bcc8d6 100%);
}

.feedback-analysis-chart-bar-label {
    text-align: center;
    color: #21385f;
    font-weight: 700;
    font-size: 0.9rem;
}

.feedback-analysis-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.feedback-analysis-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.feedback-analysis-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf4ff;
    color: #2f5ca0;
    font-weight: 800;
}

.feedback-analysis-card-badge-empty {
    background: #f2f5f8;
    color: #7a8798;
    border: 1px dashed #c9d2de;
}

.feedback-analysis-card-body {
    color: #4d617f;
    font-weight: 600;
    margin-bottom: 10px;
}

.feedback-analysis-card-detail {
    color: #234165;
    font-size: 0.95rem;
}

.feedback-analysis-card-detail strong {
    color: #19345b;
}

.feedback-analysis-card-tags-wrap {
    margin-top: 12px;
}

.feedback-analysis-card-tags-label {
    display: block;
    margin-bottom: 8px;
    color: #607595;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.feedback-analysis-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-analysis-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff4fb;
    border: 1px solid #d9e4f4;
    color: #2c4a72;
    font-size: 0.84rem;
    font-weight: 700;
}

.feedback-analysis-card-strong {
    border-color: #caeadb;
}

.feedback-analysis-card-mid {
    border-color: #d3e1f4;
}

.feedback-analysis-card-low {
    border-color: #ead8bf;
}

.feedback-analysis-card-empty {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 248, 252, 0.98) 100%);
}

.feedback-analysis-summary-text {
    color: #29486f;
    font-weight: 600;
}

.personal-data-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(108, 99, 255, 0.18), transparent 24%),
        radial-gradient(circle at left top, rgba(85, 182, 255, 0.14), transparent 30%),
        linear-gradient(145deg, #f8faff 0%, #f2f6ff 42%, #fcfdff 100%);
    border: 1px solid #dbe5fb;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(68, 89, 150, 0.1);
}

.personal-data-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.personal-data-category {
    color: #4359b5;
}

.personal-data-hero h3 {
    color: #1d2958;
    font-size: 2rem;
    margin-bottom: 10px;
}

.personal-data-intro {
    color: #556483;
    max-width: 58ch;
}

.personal-data-edit-btn {
    width: auto;
    min-width: 170px;
    flex-shrink: 0;
}

.personal-data-profile-card,
.personal-data-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(219, 229, 251, 0.96);
    border-radius: 24px;
    box-shadow: 0 12px 26px rgba(74, 98, 162, 0.08);
}

.personal-data-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 18px;
}

.personal-data-avatar {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #6c63ff 0%, #4da5ff 100%);
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.personal-data-eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6781c5;
    margin-bottom: 4px;
}

.personal-data-headline h4 {
    color: #1e2d5a;
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.personal-data-headline p {
    color: #5c6e8f;
}

.personal-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.personal-data-card {
    padding: 20px;
}

.personal-data-card h4 {
    color: #21315f;
    margin-bottom: 14px;
}

.personal-data-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.personal-data-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f7faff;
    border: 1px solid #e2eafc;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.personal-data-item:hover {
    border-color: #cedaf7;
    background: #fbfdff;
}

.personal-data-item span {
    color: #697b98;
    font-weight: 600;
}

.personal-data-item strong {
    color: #21315f;
    text-align: right;
}

@media (max-width: 900px) {
    .personal-data-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .personal-data-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .personal-data-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .personal-data-hero h3 {
        font-size: 1.5rem;
    }

    .personal-data-edit-btn {
        width: 100%;
        min-width: 0;
    }

    .personal-data-profile-card,
    .personal-data-card {
        padding: 14px;
        border-radius: 18px;
    }

    .personal-data-profile-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .personal-data-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .personal-data-item strong {
        text-align: left;
    }
}

@media (max-width: 900px) {
    .weekly-review-hero,
    .weekly-review-grid,
    .weekly-review-check-grid,
    .weekly-review-options-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .landing-experience {
        min-height: 500px;
        padding: 16px;
        border-radius: 20px;
    }

    .landing-intro-shell {
        width: 100%;
        margin: 0 auto;
        padding: 18px 16px 16px;
        border-radius: 24px;
    }

    .landing-intro-brand {
        flex-direction: column;
        gap: 10px;
    }

    .landing-logo-mark {
        width: min(180px, 52vw);
        border-radius: 22px;
    }

    .landing-logo-text {
        font-size: 1.2rem;
    }

    .landing-intro-logo {
        width: 68px;
        height: 68px;
    }

    .landing-intro-copy {
        text-align: center;
    }

    .landing-intro-shell h3 {
        font-size: 1.45rem;
    }

    .landing-menu-copy {
        font-size: 0.92rem;
    }

    .landing-menu-note {
        font-size: 0.86rem;
    }

    .weekly-review-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .weekly-review-hero h3 {
        font-size: 1.5rem;
    }

    .weekly-review-topbar,
    .weekly-review-options,
    .weekly-review-check-grid {
        grid-template-columns: 1fr;
    }

    .weekly-review-topbar {
        display: grid;
        align-items: stretch;
    }

    .weekly-review-card,
    .weekly-review-score-card {
        padding: 14px;
        border-radius: 18px;
    }
}

@media (max-width: 900px) {
    .trainer-feedback-hero,
    .trainer-feedback-overview,
    .trainer-feedback-form-grid,
    .trainer-feedback-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .trainer-feedback-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .trainer-feedback-hero-copy h3 {
        font-size: 1.5rem;
    }

    .trainer-feedback-card,
    .trainer-feedback-overview-card,
    .trainer-feedback-score-card {
        padding: 14px;
        border-radius: 18px;
    }

    .trainer-feedback-score-ring {
        width: 112px;
        height: 112px;
    }
}

.nutrition-panel-card {
    background: linear-gradient(145deg, #f6fff7 0%, #eef9ff 100%);
    border: 1px solid #d8ebdf;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 28px rgba(84, 170, 122, 0.09);
}

.nutrition-panel-header h3 {
    margin-bottom: 10px;
    color: #204b3d;
    font-size: 1.7rem;
}

.nutrition-selected-day-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dceee1;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
}

.nutrition-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.nutrition-selected-week {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4b8b73;
    margin-bottom: 6px;
}

.nutrition-selected-day-card h4 {
    color: #204b3d;
    font-size: 1.45rem;
    margin-bottom: 14px;
}

.nutrition-controls-shell {
    position: relative;
    flex-shrink: 0;
}

.nutrition-menu-toggle {
    width: 46px;
    height: 46px;
    border: 1px solid #cfe3d5;
    border-radius: 14px;
    background: #f7fff8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    cursor: pointer;
}

.nutrition-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #4b8b73;
}

.nutrition-controls-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, calc(100vw - 70px));
    background: #ffffff;
    border: 1px solid #dceee1;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 14px 30px rgba(41, 84, 70, 0.14);
    z-index: 20;
}

.nutrition-controls-panel.hidden {
    display: none;
}

.nutrition-week-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.nutrition-week-row label {
    font-weight: 700;
    color: #2b5d4e;
}

.nutrition-week-row input {
    border: 1px solid #cfe3d5;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
}

.nutrition-day-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nutrition-day-btn {
    border: 1px solid #dceee1;
    border-radius: 10px;
    background: #f8fffa;
    color: #295446;
    padding: 10px 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nutrition-day-btn.active {
    border-color: #66a680;
    background: #e9f8ef;
    color: #1d4d3d;
}

.nutrition-day-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.nutrition-field-card {
    background: #fcfffc;
    border: 1px solid #dceee1;
    border-radius: 14px;
    padding: 12px;
}

.nutrition-field-card h5 {
    color: #2b5d4e;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.nutrition-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.nutrition-tip-card,
.nutrition-notes-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dceee1;
    border-radius: 16px;
    padding: 16px;
}

.nutrition-tip-card h4,
.nutrition-notes-card h4 {
    margin-bottom: 8px;
    color: #2b5d4e;
}

.nutrition-tip-card p,
.nutrition-notes-card p {
    color: #4f6c63;
}

.nutrition-table-wrap {
    display: none;
}

.nutrition-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 680px;
}

.nutrition-table th,
.nutrition-table td {
    padding: 12px;
    border-bottom: 1px solid #dceee1;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.9);
}

.nutrition-table th {
    text-align: left;
    color: #2b5d4e;
    font-size: 0.92rem;
    background: #eaf7ee;
}

.nutrition-table th:first-child {
    border-top-left-radius: 14px;
}

.nutrition-table th:last-child {
    border-top-right-radius: 14px;
}

.nutrition-day {
    font-weight: 700;
    color: #295446;
    min-width: 120px;
}

.nutrition-select,
.nutrition-input {
    width: 100%;
    border: 1px solid #cfe3d5;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    color: var(--text-color);
    background: #fcfffc;
}

.nutrition-select {
    min-height: 46px;
}

.nutrition-input {
    min-height: 84px;
    resize: vertical;
}

.nutrition-select:focus,
.nutrition-input:focus {
    outline: none;
    border-color: #66a680;
    box-shadow: 0 0 0 3px rgba(102, 166, 128, 0.14);
}

.nutrition-custom-label {
    display: block;
    margin: 10px 0 8px;
    color: #527264;
    font-size: 0.82rem;
    font-weight: 700;
}

.nutrition-custom-input {
    min-height: 68px;
}

.sleep-panel-card {
    background: linear-gradient(145deg, #fff9f1 0%, #f6f8ff 100%);
    border: 1px solid #ece2cf;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 28px rgba(146, 124, 77, 0.08);
}

.sleep-selected-day-card,
.sleep-chart-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ede3d2;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
}

.sleep-menu-toggle {
    background: #fffaf3;
    border-color: #e8dbc4;
}

.sleep-menu-toggle span {
    background: #9a7341;
}

.sleep-controls-panel {
    border-color: #ede3d2;
}

.sleep-day-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sleep-field-card {
    background: #fffdfa;
    border: 1px solid #eee4d5;
    border-radius: 14px;
    padding: 12px;
}

.sleep-field-card h5 {
    color: #7f5c2f;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.sleep-input,
.sleep-select,
.sleep-textarea {
    width: 100%;
    border: 1px solid #dfd2bd;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #fff;
    color: var(--text-color);
}

.sleep-textarea {
    min-height: 88px;
    resize: vertical;
}

.sleep-input:focus,
.sleep-select:focus,
.sleep-textarea:focus {
    outline: none;
    border-color: #c69a61;
    box-shadow: 0 0 0 3px rgba(198, 154, 97, 0.14);
}

.sleep-chart-header h4 {
    color: #7f5c2f;
    margin-bottom: 6px;
}

.sleep-chart-header p {
    color: #74665a;
    margin-bottom: 14px;
}

.sleep-chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sleep-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6d6255;
    font-size: 0.9rem;
    font-weight: 600;
}

.sleep-legend-color {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-block;
}

.sleep-legend-bad {
    background: linear-gradient(180deg, #ff8a8a 0%, #de4b4b 100%);
}

.sleep-legend-medium {
    background: linear-gradient(180deg, #f6c274 0%, #d99338 100%);
}

.sleep-legend-good {
    background: linear-gradient(180deg, #67d98b 0%, #2fa95f 100%);
}

.sleep-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 220px;
}

.sleep-chart-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sleep-chart-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7f5c2f;
}

.sleep-chart-bar-area {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 10px;
}

.sleep-chart-bar {
    width: 100%;
    max-width: 52px;
    min-height: 10px;
    border-radius: 14px 14px 6px 6px;
    transform-origin: bottom center;
    animation: sleepBarRise 0.35s ease;
}

.sleep-chart-bar-good {
    background: linear-gradient(180deg, #67d98b 0%, #2fa95f 100%);
    box-shadow: 0 8px 20px rgba(47, 169, 95, 0.22);
}

.sleep-chart-bar-medium {
    background: linear-gradient(180deg, #f6c274 0%, #d99338 100%);
    box-shadow: 0 8px 20px rgba(217, 147, 56, 0.22);
}

.sleep-chart-bar-bad {
    background: linear-gradient(180deg, #ff8a8a 0%, #de4b4b 100%);
    box-shadow: 0 8px 20px rgba(222, 75, 75, 0.22);
}

.sleep-chart-bar-empty {
    background: linear-gradient(180deg, #d8d8d8 0%, #bbbbbb 100%);
    box-shadow: none;
}

.sleep-chart-label {
    font-size: 0.78rem;
    color: #6d6255;
    text-align: center;
}

.sleep-chart-empty {
    color: #7b7166;
    font-size: 0.95rem;
}

.sleep-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sleep-tip-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ede3d2;
    border-radius: 16px;
    padding: 16px;
}

.sleep-tip-card h4 {
    margin-bottom: 8px;
    color: #7f5c2f;
}

.sleep-tip-card p {
    color: #6f6558;
}

.game-info-panel-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(79, 221, 255, 0.24), transparent 26%),
        radial-gradient(circle at 0% 0%, rgba(129, 95, 255, 0.22), transparent 32%),
        linear-gradient(145deg, #091427 0%, #111b35 48%, #08111f 100%);
    border: 1px solid rgba(106, 154, 255, 0.28);
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 22px 40px rgba(5, 12, 30, 0.38);
}

.game-info-panel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(119, 242, 255, 0.08), transparent 40%, rgba(255, 255, 255, 0.03));
    pointer-events: none;
}

.game-info-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.game-info-panel-card h3 {
    color: #f2f7ff;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.game-info-panel-card .detail-panel-description {
    color: #98a9d6;
    max-width: 56ch;
}

.game-info-signal-card {
    background: linear-gradient(180deg, rgba(15, 31, 61, 0.92), rgba(8, 20, 42, 0.9));
    border: 1px solid rgba(96, 172, 255, 0.26);
    border-radius: 22px;
    padding: 18px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    box-shadow: inset 0 0 18px rgba(60, 164, 255, 0.08);
}

.game-info-signal-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #79d8ff;
}

.game-info-signal-orb {
    width: 78px;
    height: 78px;
    margin-inline: auto;
    border-radius: 999px;
    background: radial-gradient(circle, #95f3ff 0%, #46b9ff 42%, rgba(70, 185, 255, 0.08) 72%, transparent 73%);
    box-shadow: 0 0 22px rgba(111, 224, 255, 0.65), 0 0 60px rgba(67, 166, 255, 0.28);
    animation: gameInfoPulse 2.8s ease-in-out infinite;
}

.game-info-signal-text {
    color: #dce8ff;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.game-info-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.game-info-controls label {
    font-weight: 700;
    color: #9edfff;
}

.game-info-controls input {
    border: 2px solid rgba(96, 172, 255, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(7, 19, 40, 0.9);
    color: #eff6ff;
}

.game-info-dashboard {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    gap: 18px;
}

.game-info-preview-card,
.game-info-form-grid {
    background: linear-gradient(180deg, rgba(14, 28, 56, 0.9), rgba(8, 19, 39, 0.95));
    border: 1px solid rgba(96, 172, 255, 0.18);
    border-radius: 22px;
    padding: 18px;
    box-shadow: inset 0 0 16px rgba(90, 195, 255, 0.04);
}

.game-info-preview-label {
    margin-bottom: 8px;
    color: #79d8ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.game-info-preview-card h4 {
    color: #f2f7ff;
    font-size: 1.45rem;
    margin-bottom: 16px;
}

.game-info-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.game-info-preview-item {
    border: 1px solid rgba(98, 144, 223, 0.18);
    border-radius: 16px;
    padding: 14px;
    background: rgba(8, 17, 35, 0.62);
}

.game-info-preview-key {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7ebeed;
    margin-bottom: 6px;
}

.game-info-preview-value {
    display: block;
    color: #f0f6ff;
    line-height: 1.45;
}

.game-info-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.game-info-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-info-field-wide {
    grid-column: 1 / -1;
}

.game-info-field label {
    color: #9edfff;
    font-size: 0.88rem;
    font-weight: 700;
}

.game-info-field input {
    min-height: 48px;
    border: 2px solid rgba(96, 172, 255, 0.2);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(5, 15, 31, 0.88);
    color: #eef5ff;
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.game-info-field input::placeholder {
    color: #7285b2;
}

.game-info-field input:focus,
.game-info-controls input:focus {
    outline: none;
    border-color: #70dfff;
    box-shadow: 0 0 0 4px rgba(92, 223, 255, 0.12), 0 0 20px rgba(92, 223, 255, 0.08);
    transform: translateY(-1px);
}

.prep-panel-card {
    background:
        radial-gradient(circle at top right, rgba(79, 221, 255, 0.22), transparent 28%),
        radial-gradient(circle at top left, rgba(129, 95, 255, 0.16), transparent 26%),
        linear-gradient(145deg, #091427 0%, #111b35 48%, #08111f 100%);
    border: 1px solid rgba(106, 154, 255, 0.22);
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 22px 40px rgba(5, 12, 30, 0.34);
}

.prep-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.prep-panel-card h3 {
    color: #f1f7ff;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.prep-panel-card .detail-panel-description {
    color: #97afd4;
}

.prep-eyebrow {
    color: #79d8ff;
}

.prep-week-controls {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(8, 22, 42, 0.82);
    border: 1px solid rgba(111, 196, 255, 0.2);
}

.prep-week-controls label,
.prep-field label {
    color: #98e4ff;
    font-weight: 700;
}

.prep-week-controls input,
.prep-field input {
    min-height: 48px;
    border: 2px solid rgba(111, 196, 255, 0.16);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(5, 16, 31, 0.9);
    color: #eff6ff;
    font: inherit;
}

.prep-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.prep-card {
    background: rgba(8, 20, 39, 0.9);
    border: 1px solid rgba(111, 196, 255, 0.16);
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prep-card-wide {
    grid-column: 1 / -1;
}

.prep-card h4 {
    color: #f1f7ff;
    font-size: 1.1rem;
}

.prep-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prep-quote-card {
    border: 1px solid rgba(111, 196, 255, 0.14);
    border-radius: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.prep-quote-label {
    display: block;
    color: #98e4ff;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.prep-quote-text {
    color: #f1f7ff;
    font-size: 1rem;
    line-height: 1.6;
}

.prep-field input::placeholder {
    color: #7285b2;
}

.prep-field input:focus,
.prep-week-controls input:focus {
    outline: none;
    border-color: #70dfff;
    box-shadow: 0 0 0 4px rgba(92, 223, 255, 0.12);
}

.game-info-panel-card input[type="week"],
.game-info-panel-card input[type="date"],
.game-info-panel-card input[type="time"],
.stats-panel-card input[type="week"],
.stats-panel-card input[type="date"],
.stats-panel-card input[type="time"],
.prep-panel-card input[type="week"],
.prep-panel-card input[type="date"],
.prep-panel-card input[type="time"] {
    color-scheme: dark;
}

.game-info-panel-card input[type="week"]::-webkit-calendar-picker-indicator,
.game-info-panel-card input[type="date"]::-webkit-calendar-picker-indicator,
.game-info-panel-card input[type="time"]::-webkit-calendar-picker-indicator,
.stats-panel-card input[type="week"]::-webkit-calendar-picker-indicator,
.stats-panel-card input[type="date"]::-webkit-calendar-picker-indicator,
.stats-panel-card input[type="time"]::-webkit-calendar-picker-indicator,
.prep-panel-card input[type="week"]::-webkit-calendar-picker-indicator,
.prep-panel-card input[type="date"]::-webkit-calendar-picker-indicator,
.prep-panel-card input[type="time"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.prep-checklist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.prep-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d6e4ff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(111, 196, 255, 0.12);
    border-radius: 14px;
    padding: 12px;
}

.season-goal-panel-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 165, 90, 0.16), transparent 22%),
        radial-gradient(circle at bottom left, rgba(87, 225, 255, 0.18), transparent 24%),
        linear-gradient(135deg, #fff6eb 0%, #fffdf8 46%, #f2fbff 100%);
    border: 1px solid rgba(236, 197, 140, 0.48);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 24px 44px rgba(180, 164, 135, 0.24);
}

.season-goal-panel-card::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(125, 214, 230, 0.18);
    border-radius: 22px;
    pointer-events: none;
}

.season-goal-hero {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
}

.season-goal-panel-card h3 {
    color: #32293e;
    font-size: 1.85rem;
    margin-bottom: 10px;
}

.season-goal-panel-card .detail-panel-description {
    display: inline-block;
    color: #594f63;
    max-width: 58ch;
    background: rgba(255, 250, 244, 0.9);
    border: 1px solid rgba(223, 191, 150, 0.58);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 10px 20px rgba(180, 164, 135, 0.1);
}

.season-goal-eyebrow {
    color: #d78532;
}

.season-goal-pill-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.season-goal-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 194, 128, 0.18);
    border: 1px solid rgba(222, 159, 84, 0.3);
    color: #9c5b1f;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.season-goal-pill-accent {
    background: rgba(123, 227, 255, 0.16);
    border-color: rgba(92, 197, 230, 0.32);
    color: #18718a;
}

.season-goal-pill-combined {
    background: linear-gradient(90deg, rgba(255, 194, 128, 0.2), rgba(123, 227, 255, 0.18));
    border-color: rgba(194, 176, 148, 0.34);
    color: #6c5a46;
}

.season-goal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.season-goal-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 246, 0.98));
    border: 1px solid rgba(221, 190, 150, 0.36);
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 16px 30px rgba(212, 194, 163, 0.18);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.season-goal-card.active {
    transform: translateY(-2px);
    border-color: rgba(226, 146, 64, 0.5);
    box-shadow: 0 18px 34px rgba(226, 146, 64, 0.14);
}

.season-goal-card-accent.active {
    border-color: rgba(57, 176, 214, 0.72);
    box-shadow: 0 18px 34px rgba(57, 176, 214, 0.16);
}

.season-goal-kicker {
    color: #d78532;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.season-goal-card-accent .season-goal-kicker {
    color: #1a93ae;
}

.season-goal-card-accent {
    border-color: rgba(57, 176, 214, 0.48);
}

.season-goal-card h4 {
    color: #2f2937;
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.season-goal-copy {
    color: #5f5966;
    margin-bottom: 16px;
    line-height: 1.6;
}

.season-goal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.season-goal-field + .season-goal-field {
    margin-top: 14px;
}

.season-goal-field label {
    color: #8e5d28;
    font-weight: 700;
}

.season-goal-card-accent .season-goal-field label {
    color: #1c879f;
}

.season-goal-field input,
.season-goal-field textarea {
    width: 100%;
    border: 2px solid rgba(227, 197, 164, 0.28);
    border-radius: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #302b37;
    font: inherit;
}

.season-goal-card-accent .season-goal-field input,
.season-goal-card-accent .season-goal-field textarea {
    border-color: rgba(127, 231, 255, 0.3);
}

.season-goal-field textarea {
    min-height: 150px;
    resize: vertical;
}

.season-goal-field input::placeholder,
.season-goal-field textarea::placeholder {
    color: #9f92b8;
}

.season-goal-field input:focus,
.season-goal-field textarea:focus {
    outline: none;
    border-color: rgba(255, 191, 122, 0.62);
    box-shadow: 0 0 0 4px rgba(255, 191, 122, 0.12);
}

.season-goal-card-accent .season-goal-field input:focus,
.season-goal-card-accent .season-goal-field textarea:focus {
    border-color: rgba(127, 231, 255, 0.62);
    box-shadow: 0 0 0 4px rgba(127, 231, 255, 0.12);
}

@media (max-width: 900px) {
    .season-goal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .season-goal-panel-card {
        padding: 16px;
        border-radius: 22px;
    }

    .season-goal-panel-card h3 {
        font-size: 1.45rem;
    }

    .season-goal-card {
        padding: 16px;
        border-radius: 18px;
    }
}

@media (max-width: 960px) {
    .prep-hero,
    .prep-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

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

@media (max-width: 640px) {
    .prep-panel-card {
        padding: 16px;
        border-radius: 22px;
    }

    .prep-panel-card h3 {
        font-size: 1.45rem;
    }

    .prep-week-controls,
    .prep-card {
        padding: 14px;
        border-radius: 18px;
    }

    .prep-checklist {
        grid-template-columns: 1fr;
    }
}

.stats-panel-card {
    background:
        radial-gradient(circle at top left, rgba(84, 240, 214, 0.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(77, 134, 255, 0.18), transparent 30%),
        linear-gradient(145deg, #081322 0%, #0f1f36 48%, #09111e 100%);
    border: 1px solid rgba(107, 196, 255, 0.22);
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 22px 40px rgba(5, 12, 30, 0.34);
}

.stats-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.stats-panel-card h3 {
    color: #f1f7ff;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.stats-panel-card .detail-panel-description {
    color: #97afd4;
}

.stats-eyebrow {
    color: #70e4dc;
}

.stats-week-controls {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(8, 22, 42, 0.82);
    border: 1px solid rgba(111, 196, 255, 0.2);
}

.stats-week-controls label,
.stats-field label {
    color: #98e4ff;
    font-weight: 700;
}

.stats-week-controls input,
.stats-field input {
    min-height: 48px;
    border: 2px solid rgba(111, 196, 255, 0.16);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(5, 16, 31, 0.9);
    color: #eff6ff;
    font: inherit;
}

.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stats-summary-card {
    background: rgba(10, 24, 46, 0.88);
    border: 1px solid rgba(111, 196, 255, 0.16);
    border-radius: 20px;
    padding: 16px;
}

.stats-summary-label,
.stats-summary-note {
    display: block;
}

.stats-summary-label {
    color: #89d7ff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stats-summary-value {
    display: block;
    margin: 8px 0 6px;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
}

.stats-summary-note {
    color: #8f9fbe;
    font-size: 0.82rem;
}

.stats-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
}

.stats-wave-card,
.stats-form-card {
    background: rgba(8, 20, 39, 0.9);
    border: 1px solid rgba(111, 196, 255, 0.16);
    border-radius: 22px;
    padding: 18px;
}

.stats-wave-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.stats-wave-eyebrow {
    color: #70e4dc;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stats-wave-card h4 {
    color: #f4f8ff;
    font-size: 1.3rem;
}

.stats-wave-hint {
    color: #8f9fbe;
    font-size: 0.9rem;
    max-width: 28ch;
    text-align: right;
}

.stats-wave-chart {
    min-height: 280px;
}

.stats-wave-chart {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.stats-trend-panel {
    border: 1px solid rgba(111, 196, 255, 0.12);
    border-radius: 18px;
    padding: 14px;
    background: rgba(6, 16, 31, 0.72);
}

.stats-trend-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.stats-trend-top h5 {
    color: #eff5ff;
    font-size: 0.98rem;
}

.stats-mini-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #b7c8e8;
    font-size: 0.76rem;
}

.stats-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
}

.stats-legend-dot.minutes {
    background: #58deff;
}

.stats-legend-dot.goals {
    background: #ffbf5c;
}

.stats-legend-dot.assists {
    background: #8d6bff;
}

.stats-trend-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.stats-trend-pill.minutes {
    background: rgba(88, 222, 255, 0.14);
    color: #7ce8ff;
}

.stats-trend-pill.goals {
    background: rgba(255, 191, 92, 0.14);
    color: #ffd66b;
}

.stats-trend-pill.assists {
    background: rgba(141, 107, 255, 0.16);
    color: #bba4ff;
}

.stats-bar-chart {
    height: 180px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 10px;
    align-items: end;
}

.stats-bar-chart-grouped {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 16px;
}

.stats-group-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.stats-group-track {
    width: 100%;
    height: 128px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(111, 196, 255, 0.08));
    padding: 8px 12px;
}

.stats-group-bar-wrap {
    flex: 0 0 14px;
    width: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.stats-bar-value {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.stats-bar-value.minutes {
    color: #7ce8ff;
}

.stats-bar-value.goals {
    color: #ffd66b;
}

.stats-bar-value.assists {
    color: #bba4ff;
}

.stats-bar-fill {
    width: 100%;
    border-radius: 10px 10px 6px 6px;
    min-height: 6px;
}

.stats-bar-fill.minutes {
    background: linear-gradient(180deg, #8cf4ff 0%, #2f83ff 100%);
}

.stats-bar-fill.goals {
    background: linear-gradient(180deg, #ffe28b 0%, #ff9a3c 100%);
}

.stats-bar-fill.assists {
    background: linear-gradient(180deg, #c3afff 0%, #7c52ff 100%);
}

.stats-bar-label {
    color: #90a6cf;
    font-size: 0.72rem;
    text-align: center;
}

.stats-wave-empty {
    color: #94a5c6;
    padding-top: 90px;
    text-align: center;
}

.stats-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stats-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-field-wide {
    grid-column: 1 / -1;
}

.stats-field input::placeholder {
    color: #7285b2;
}

.stats-field input:focus,
.stats-week-controls input:focus {
    outline: none;
    border-color: #70e4dc;
    box-shadow: 0 0 0 4px rgba(112, 228, 220, 0.12);
}

@media (max-width: 960px) {
    .stats-hero,
    .stats-layout {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

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

@media (max-width: 640px) {
    .stats-panel-card {
        padding: 16px;
        border-radius: 22px;
    }

    .stats-panel-card h3 {
        font-size: 1.45rem;
    }

    .stats-week-controls,
    .stats-wave-card,
    .stats-form-card {
        padding: 14px;
        border-radius: 18px;
    }

    .stats-summary-grid,
    .stats-form-grid {
        grid-template-columns: 1fr;
    }

    .stats-summary-value {
        font-size: 1.7rem;
    }

    .stats-wave-header {
        flex-direction: column;
    }

    .stats-wave-hint {
        text-align: left;
    }

    .stats-wave-chart {
        min-height: 220px;
    }
}

@keyframes gameInfoPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .game-info-hero,
    .game-info-dashboard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .game-info-panel-card {
        padding: 16px;
        border-radius: 22px;
    }

    .game-info-panel-card h3 {
        font-size: 1.4rem;
    }

    .game-info-signal-card,
    .game-info-preview-card,
    .game-info-form-grid {
        border-radius: 18px;
        padding: 14px;
    }

    .game-info-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .game-info-preview-grid,
    .game-info-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== */
/* TRAINING PLAN STYLES  */
/* ===================== */

.training-plan-section {
    background: linear-gradient(145deg, #f7f9ff 0%, #edf3ff 100%);
    padding: 22px;
    border-radius: 22px;
    margin-bottom: 25px;
    border: 1px solid #dbe5fb;
    box-shadow: 0 16px 30px rgba(78, 104, 179, 0.08);
}

.training-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.training-plan-eyebrow {
    margin-bottom: 6px;
    color: #111111 !important;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.training-plan-section h3 {
    color: #111111;
    margin-bottom: 6px;
    font-size: 1.45rem;
}

.training-plan-intro {
    color: #111111;
    max-width: 48ch;
    font-size: 0.96rem;
}

.training-week-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe5fb;
    min-width: 180px;
}

.training-week-controls label {
    font-weight: 600;
    color: #445271;
}

.training-week-controls input {
    width: 100%;
    border: 2px solid #d5def2;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.95rem;
    background: var(--white);
}

.training-day-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.training-day-tab {
    border: 1px solid #d7e0f4;
    background: rgba(255, 255, 255, 0.86);
    border-radius: 16px;
    padding: 12px 10px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.training-day-tab:hover,
.training-day-tab.active {
    border-color: #223260;
    background: #223260;
    color: var(--white);
    transform: translateY(-1px);
}

.training-day-tab-name,
.training-day-tab-short,
.training-day-tab-meta,
.training-overview-top,
.training-overview-body,
.training-overview-line {
    display: block;
}

.training-day-tab-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.training-day-tab-short {
    display: none;
    font-weight: 700;
    font-size: 0.95rem;
}

.training-day-tab-meta {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #61708f;
}

.training-day-tab.active .training-day-tab-meta {
    color: rgba(255, 255, 255, 0.8);
}

.training-week-overview {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.training-overview-card {
    border: 1px solid #d7e0f4;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    color: inherit;
}

.training-overview-card:hover,
.training-overview-card.active {
    border-color: #9fb3e7;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(76, 104, 170, 0.12);
}

.training-overview-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.training-overview-day {
    font-weight: 700;
    color: #223260;
    min-width: 0;
    line-height: 1.25;
}

.training-overview-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5b77c4;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(91, 119, 196, 0.12);
}

.training-overview-body {
    min-height: 58px;
}

.training-overview-line {
    font-size: 0.76rem;
    color: #576580;
    line-height: 1.45;
}

.training-overview-line + .training-overview-line {
    margin-top: 4px;
}

.training-overview-line-empty {
    color: #8b95ab;
}

.training-editor-shell {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe5fb;
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 18px;
}

.training-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.training-editor-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6e7c9b;
    margin-bottom: 4px;
}

.training-active-day-title {
    color: #223260;
    font-size: 1.25rem;
}

.training-plan-grid {
    display: block;
}

.training-day-card {
    display: none;
    background-color: var(--white);
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #dbe5fb;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 18px rgba(83, 108, 168, 0.08);
}

.training-day-card.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.training-day-card:hover {
    border-color: #c8d5f3;
}

.training-day-card h4 {
    font-weight: 700;
    color: #223260;
    font-size: 1rem;
    margin: 0;
    grid-column: 1 / -1;
    text-align: left;
    letter-spacing: 0.02em;
}

.training-slot {
    border: 1px solid #dde6f7;
    border-radius: 16px;
    padding: 14px;
    background-color: #f8fbff;
}

.training-slot h5 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #445271;
}

.training-times {
    display: flex;
    align-items: center;
    gap: 6px;
}

.training-times input {
    flex: 1;
    padding: 10px;
    border: 2px solid #d5def2;
    border-radius: 12px;
    font-size: 0.85rem;
    font-family: monospace;
    transition: all 0.3s ease;
}

.training-times input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.training-times span {
    font-weight: 600;
    color: #bbb;
    font-size: 0.8rem;
    min-width: 12px;
    text-align: center;
}

.training-topic-input {
    padding: 10px;
    border: 2px solid #d5def2;
    border-radius: 12px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    font-family: inherit;
    width: 100%;
    margin-top: 8px;
}

.training-topic-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.training-topic-input::placeholder {
    color: #ccc;
    font-style: italic;
}

.training-time-input {
    padding: 10px;
    border: 2px solid #d5def2;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: monospace;
    transition: border-color 0.3s ease;
}

.training-time-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.attendance-toggle {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.training-slot-flags {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.training-slot-flags .attendance-toggle {
    margin-top: 0;
}

.attendance-toggle-secondary {
    justify-content: flex-end;
    margin-left: auto;
}

.attendance-section {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe5fb;
    border-radius: 18px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.attendance-section h4 {
    color: var(--text-color);
    margin-bottom: 6px;
}

.attendance-summary {
    color: var(--gray-text);
    margin: 0;
}

.training-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

@media (min-width: 480px) {
    .training-actions {
        flex-direction: row;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .training-plan-header {
        flex-direction: column;
    }

    .training-week-controls {
        width: 100%;
    }

    .training-day-tabs {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .training-day-tab {
        min-width: 120px;
        flex: 0 0 auto;
    }

    .training-week-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .training-plan-section {
        padding: 14px;
        border-radius: 18px;
    }

    .training-plan-intro {
        display: none;
    }

    .training-plan-section h3 {
        font-size: 1.25rem;
    }

    .training-week-controls {
        padding: 12px;
        border-radius: 16px;
        gap: 8px;
    }

    .training-day-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }

    .training-day-tab {
        min-width: 0;
        padding: 10px 8px;
        border-radius: 14px;
        text-align: center;
    }

    .training-day-tab-name {
        display: none;
    }

    .training-day-tab-short {
        display: block;
    }

    .training-day-tab-meta {
        margin-top: 3px;
        font-size: 0.72rem;
    }

    .training-week-overview {
        display: block;
        margin-bottom: 14px;
    }

    .training-overview-card {
        display: none;
        padding: 12px;
        border-radius: 16px;
    }

    .training-overview-card.active {
        display: block;
    }

    .training-overview-body {
        min-height: auto;
    }

    .training-editor-shell {
        padding: 14px;
        border-radius: 18px;
        margin-bottom: 14px;
    }

    .training-editor-header {
        margin-bottom: 10px;
    }

    .training-editor-label {
        font-size: 0.72rem;
    }

    .training-active-day-title {
        font-size: 1.1rem;
    }

    .training-day-card.active {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .training-day-card {
        padding: 12px;
        border-radius: 16px;
        box-shadow: none;
    }

    .training-day-card h4 {
        display: none;
    }

    .training-slot {
        padding: 12px;
        border-radius: 14px;
    }

    .training-slot h5 {
        font-size: 0.86rem;
    }

    .training-times {
        gap: 4px;
    }

    .training-times input,
    .training-time-input,
    .training-topic-input {
        padding: 10px;
        font-size: 0.86rem;
    }

    .attendance-toggle {
        margin-top: 8px;
        font-size: 0.8rem;
    }

    .attendance-section {
        padding: 12px;
        border-radius: 16px;
    }

    .training-actions {
        flex-direction: column;
        gap: 8px;
    }

    .training-actions .btn {
        width: 100%;
    }
}

/* Buttons */
.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(59, 74, 117, 0.08);
}

.btn-primary {
    background: linear-gradient(135deg, #6c63ff 0%, #4b8cff 100%);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #5a52d5;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: linear-gradient(135deg, #e85d4f 0%, #d73a49 100%);
    color: var(--white);
}

.btn:focus-visible,
.menu-toggle-btn:focus-visible,
.menu-section-toggle:focus-visible,
.menu-subitem:focus-visible,
.menu-btn:focus-visible {
    outline: 3px solid rgba(108, 99, 255, 0.2);
    outline-offset: 2px;
}

.btn-secondary:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary:active {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .training-actions .btn {
        width: 100%;
        flex: 1;
    }
}

.bottom-app-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(10, 19, 48, 0.96) 0%, rgba(26, 46, 104, 0.94) 100%);
    box-shadow: 0 22px 44px rgba(15, 28, 67, 0.16);
}

.bottom-app-nav-item {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bottom-app-nav-item strong,
.bottom-app-nav-kicker {
    display: block;
}

.bottom-app-nav-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 3px;
}

.bottom-app-nav-item strong {
    font-size: 1rem;
}

.bottom-app-nav-item:hover,
.bottom-app-nav-item.active {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.34);
}

.bottom-app-nav-item.active {
    background: rgba(255, 255, 255, 0.18);
}

.bottom-app-nav-item-accent {
    background: linear-gradient(135deg, rgba(117, 255, 203, 0.15) 0%, rgba(133, 189, 255, 0.2) 100%);
}

.ai-mode-panel {
    background:
        radial-gradient(circle at top right, rgba(117, 255, 203, 0.18), transparent 32%),
        radial-gradient(circle at top left, rgba(108, 99, 255, 0.15), transparent 28%),
        linear-gradient(145deg, #081227 0%, #112349 56%, #173264 100%);
    color: #ecf4ff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 22px 42px rgba(12, 28, 71, 0.22);
}

.ai-mode-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.ai-mode-category {
    color: #8df3cf;
}

.ai-mode-intro {
    max-width: 620px;
    color: rgba(236, 244, 255, 0.82);
}

.ai-mode-badge {
    min-width: 180px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(141, 243, 207, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ai-mode-badge-line {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8df3cf 0%, #8ab9ff 100%);
    margin-bottom: 12px;
}

.ai-mode-badge strong,
.ai-mode-badge small {
    display: block;
}

.ai-mode-badge small {
    margin-top: 4px;
    color: rgba(236, 244, 255, 0.68);
}

.ai-mode-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.ai-mode-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-mode-status-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ai-mode-status-copy strong {
    font-size: 1rem;
}

.ai-mode-status-copy p {
    color: rgba(236, 244, 255, 0.74);
}

.ai-mode-status-badge {
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    color: #f6fbff;
}

.ai-mode-status-badge.online {
    background: rgba(80, 219, 164, 0.18);
    color: #9af5d3;
}

.ai-mode-status-badge.offline {
    background: rgba(255, 184, 77, 0.18);
    color: #ffd591;
}

.ai-mode-model-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-mode-model-field span {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 244, 255, 0.72);
}

.ai-mode-model-field input {
    width: 100%;
    border: 1px solid rgba(138, 185, 255, 0.24);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    color: #f7fbff;
    background: rgba(255, 255, 255, 0.08);
}

.ai-mode-model-field input:focus {
    outline: none;
    border-color: rgba(141, 243, 207, 0.44);
    box-shadow: 0 0 0 3px rgba(141, 243, 207, 0.12);
}

.ai-suggestion-chip {
    border: 1px solid rgba(138, 185, 255, 0.26);
    background: rgba(255, 255, 255, 0.07);
    color: #f5fbff;
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
}

.ai-suggestion-chip:hover {
    background: rgba(138, 185, 255, 0.14);
}

.ai-mode-chat-shell {
    background: rgba(4, 12, 28, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 16px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-mode-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 260px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 4px;
}

.ai-message {
    max-width: min(84%, 620px);
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.ai-message p {
    margin: 0;
    white-space: normal;
}

.ai-message-assistant {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(142, 244, 208, 0.14) 0%, rgba(124, 167, 255, 0.18) 100%);
    border: 1px solid rgba(141, 243, 207, 0.18);
}

.ai-message-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.28) 0%, rgba(75, 140, 255, 0.32) 100%);
    border: 1px solid rgba(151, 165, 255, 0.28);
}

.ai-message-meta {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.68;
    margin-bottom: 6px;
}

.ai-message-typing p {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 18px;
}

.ai-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c6f7e6;
    animation: aiTypingPulse 1.1s infinite ease-in-out;
}

.ai-typing-dot:nth-child(2) {
    animation-delay: 0.14s;
}

.ai-typing-dot:nth-child(3) {
    animation-delay: 0.28s;
}

.ai-mode-composer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border-radius: 18px;
    background: rgba(5, 14, 33, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.ai-mode-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-mode-input-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 244, 255, 0.72);
}

.ai-mode-input-wrap textarea {
    width: 100%;
    min-height: 52px;
    max-height: 140px;
    resize: none;
    border: 1px solid rgba(138, 185, 255, 0.24);
    border-radius: 16px;
    padding: 14px 16px;
    font: inherit;
    color: #f7fbff;
    background: rgba(255, 255, 255, 0.08);
}

.ai-mode-input-wrap textarea:focus {
    outline: none;
    border-color: rgba(141, 243, 207, 0.44);
    box-shadow: 0 0 0 3px rgba(141, 243, 207, 0.12);
}

.ai-mode-send-btn {
    min-width: 132px;
    margin: 0;
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 20px;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .detail-info-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-tips-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-day-fields {
        grid-template-columns: 1fr;
    }

    .sleep-day-fields,
    .sleep-tips-grid {
        grid-template-columns: 1fr;
    }

    .ai-mode-hero,
    .ai-mode-composer,
    .ai-mode-status-card {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .bottom-app-nav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    header {
        padding: 20px 15px;
        background-position: center 46%;
        background-size: 92% auto;
    }

    .header-topbar {
        margin-bottom: 6px;
    }

    .header-branding h1 {
        font-size: 2rem;
    }

    header {
        min-height: 220px;
    }

    main {
        padding: 16px;
    }

    .ai-mode-panel,
    .bottom-app-nav {
        padding: 14px;
        border-radius: 18px;
    }

    .ai-mode-chat-shell {
        min-height: 360px;
        padding: 12px;
    }

    .ai-message {
        max-width: 100%;
    }

    .ai-mode-send-btn {
        min-width: 0;
    }

    .app-topbar-row {
        align-items: flex-start;
    }

    .app-topbar-row h2 {
        font-size: 1.45rem;
    }

    .app-menu-dropdown {
        min-width: 0;
        width: min(340px, calc(100vw - 28px));
    }

    .detail-panel-card {
        padding: 16px;
    }

    .detail-panel-card h3 {
        font-size: 1.3rem;
    }

    .detail-info-card {
        padding: 14px;
        border-radius: 14px;
    }

    .training-plan-section {
        padding: 14px;
    }

    .training-week-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .training-week-controls input {
        width: 100%;
    }

    .nutrition-panel-card {
        padding: 12px;
    }

    .sleep-panel-card,
    .sleep-selected-day-card,
    .sleep-chart-card {
        padding: 12px;
    }

    .nutrition-selected-day-card {
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .nutrition-panel-header h3 {
        font-size: 1.2rem;
    }

    .nutrition-selected-day-card h4 {
        font-size: 1.15rem;
        margin-bottom: 10px;
    }

    .nutrition-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .nutrition-controls-shell {
        align-self: flex-end;
    }

    .nutrition-menu-toggle {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .nutrition-controls-panel {
        right: 0;
        width: min(320px, calc(100vw - 48px));
        padding: 12px;
        border-radius: 14px;
    }

    .nutrition-day-selector {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nutrition-day-btn {
        padding: 8px 10px;
        font-size: 0.88rem;
    }

    .nutrition-field-card {
        padding: 10px;
        border-radius: 12px;
    }

    .nutrition-field-card h5 {
        font-size: 0.88rem;
        margin-bottom: 6px;
    }

    .nutrition-selected-week {
        font-size: 0.72rem;
        margin-bottom: 4px;
    }

    .nutrition-tips-grid {
        gap: 10px;
        margin-bottom: 14px;
    }

    .nutrition-tip-card,
    .nutrition-notes-card {
        padding: 12px;
        border-radius: 12px;
    }

    .nutrition-tip-card h4,
    .nutrition-notes-card h4 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .nutrition-tip-card p,
    .nutrition-notes-card p,
    .detail-panel-description {
        font-size: 0.9rem;
    }

    .nutrition-select,
    .nutrition-input {
        padding: 8px 10px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .nutrition-input {
        min-height: 58px;
    }

    .nutrition-custom-label {
        font-size: 0.78rem;
        margin-bottom: 6px;
    }

    .nutrition-notes-card {
        margin-top: 2px;
    }

    .sleep-chart {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px;
        min-height: 0;
        align-items: end;
    }

    .sleep-chart-legend {
        gap: 10px;
        margin-bottom: 12px;
    }

    .sleep-legend-item {
        font-size: 0.82rem;
    }

    .sleep-chart-bar-area {
        height: 120px;
        min-width: 0;
    }

    .sleep-chart-bar-wrap {
        gap: 6px;
    }

    .sleep-chart-value {
        font-size: 0.64rem;
        line-height: 1.2;
        text-align: center;
        word-break: break-word;
    }

    .sleep-chart-bar {
        max-width: 100%;
        border-radius: 10px 10px 4px 4px;
    }

    .sleep-chart-label {
        font-size: 0.68rem;
    }

    .sleep-tip-card {
        padding: 12px;
        border-radius: 12px;
    }

    .form-group {
        padding: 15px;
    }

    .btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        position: relative;
    }

    .container,
    header,
    main,
    .content,
    .app-shell,
    .app-panel,
    .app-topbar,
    .dashboard-grid,
    .detail-panel-card,
    .trainer-feedback-panel,
    .nutrition-panel-card,
    .sleep-panel-card,
    .game-info-panel-card,
    .stats-panel-card,
    .season-goal-panel-card,
    .training-plan-section,
    .training-editor-shell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-card,
    .detail-info-card,
    .trainer-feedback-card,
    .trainer-feedback-overview-card,
    .nutrition-selected-day-card,
    .sleep-selected-day-card,
    .sleep-chart-card,
    .game-info-preview-card,
    .stats-summary-card,
    .season-goal-card,
    .training-day-card,
    .training-slot {
        min-width: 0;
    }

    .detail-panel-description,
    .trainer-feedback-intro,
    .game-info-panel-card .detail-panel-description,
    .season-goal-copy {
        max-width: 100%;
    }

    .app-menu-dropdown,
    .nutrition-controls-panel,
    .sleep-controls-panel {
        max-width: calc(100vw - 28px);
    }
}

@media (max-width: 640px) {
    .container {
        padding: 12px;
    }

    header {
        min-height: 210px;
        padding: 14px 14px 22px;
        margin-bottom: 20px;
        border-radius: 18px;
        background-position: center 48%;
        background-size: min(92%, 360px) auto;
    }

    .header-topbar {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 0;
        z-index: 260;
    }

    .menu-dropdown {
        order: 1;
        margin-left: 0;
        z-index: 280;
    }

    .settings-dropdown {
        order: 2;
        margin-left: auto;
        z-index: 279;
    }

    .menu-toggle-btn {
        width: 48px;
        height: 48px;
    }

    .app-menu-dropdown {
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 24px));
        max-height: min(70vh, 520px);
        padding: 14px;
        border-radius: 18px;
        z-index: 320;
    }

    main {
        padding: 14px;
        margin-bottom: 20px;
        border-radius: 18px;
    }

    footer {
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
        border-radius: 18px;
    }

    .content,
    .app-shell,
    .app-panel,
    .app-topbar,
    .settings-page-shell,
    .landing-intro-shell,
    .dashboard-grid,
    .detail-panel-card,
    .trainer-feedback-panel,
    .feedback-analysis-panel,
    .weekly-review-panel,
    .personal-data-panel,
    .ai-mode-panel,
    .nutrition-panel-card,
    .sleep-panel-card,
    .game-info-panel-card,
    .stats-panel-card,
    .season-goal-panel-card,
    .training-plan-section,
    .training-editor-shell,
    .prep-panel-card {
        width: 100%;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
    }

    .settings-page-shell,
    .detail-panel-card,
    .trainer-feedback-panel,
    .feedback-analysis-panel,
    .weekly-review-panel,
    .personal-data-panel,
    .ai-mode-panel,
    .nutrition-panel-card,
    .sleep-panel-card,
    .game-info-panel-card,
    .stats-panel-card,
    .season-goal-panel-card,
    .training-plan-section,
    .prep-panel-card {
        padding: 16px;
        border-radius: 20px;
    }

    .settings-page-shell {
        max-width: 360px;
        padding: 14px;
    }

    .settings-page-hero {
        max-width: 300px;
        margin: 0 auto 14px;
        text-align: center;
    }

    .settings-page-grid {
        max-width: 320px;
        margin: 0 auto;
        gap: 10px;
    }

    .settings-card {
        padding: 12px;
        border-radius: 16px;
        text-align: left;
    }

    .settings-card-title,
    .settings-select-field span,
    .settings-surprise-copy {
        text-align: left;
    }

    .settings-select-field {
        padding: 12px;
        border-radius: 14px;
    }

    .settings-select-field select {
        width: 100%;
        min-width: 0;
        padding: 11px 38px 11px 12px;
        font-size: 0.92rem;
    }

    .app-topbar,
    .app-topbar-row,
    .settings-page-shell,
    .landing-intro-shell,
    .landing-intro-brand,
    .nutrition-panel-header,
    .game-info-hero,
    .stats-hero,
    .prep-hero,
    .season-goal-hero,
    .trainer-feedback-hero,
    .feedback-analysis-hero,
    .weekly-review-hero,
    .personal-data-hero,
    .ai-mode-hero {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .detail-panel-category,
    .detail-panel-card h3,
    .detail-panel-description,
    .trainer-feedback-intro,
    .weekly-review-intro,
    .personal-data-intro,
    .ai-mode-intro,
    .game-info-panel-card .detail-panel-description,
    .season-goal-copy,
    .prep-panel-card .detail-panel-description,
    .stats-wave-hint {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .dashboard-card,
    .detail-info-card,
    .detail-notes-card,
    .trainer-feedback-card,
    .trainer-feedback-overview-card,
    .trainer-feedback-score-card,
    .feedback-analysis-score-card,
    .feedback-analysis-chart-card,
    .feedback-analysis-card,
    .feedback-analysis-summary-card,
    .weekly-review-card,
    .weekly-review-score-card,
    .personal-data-profile-card,
    .personal-data-card,
    .settings-card,
    .nutrition-selected-day-card,
    .sleep-selected-day-card,
    .sleep-chart-card,
    .game-info-signal-card,
    .game-info-preview-card,
    .stats-week-controls,
    .stats-wave-card,
    .stats-form-card,
    .prep-card,
    .prep-week-controls,
    .season-goal-card,
    .ai-mode-badge,
    .ai-mode-status-card,
    .ai-mode-chat-shell {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-card,
    .detail-panel-card,
    .trainer-feedback-score-card,
    .weekly-review-score-card,
    .personal-data-profile-card,
    .game-info-signal-card,
    .game-info-preview-card,
    .stats-week-controls,
    .ai-mode-badge,
    .ai-mode-status-card,
    .settings-page-shell,
    .settings-card {
        text-align: center;
    }

    .trainer-feedback-card-header,
    .stats-wave-header,
    .weekly-review-topbar,
    .personal-data-profile-card,
    .settings-version-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .settings-page-shell {
        text-align: center;
    }

    .settings-card,
    .settings-select-field,
    .settings-version-row {
        text-align: left;
    }

    .settings-version-row {
        align-items: flex-start;
        text-align: left;
    }

    .settings-surprise-copy {
        text-align: left;
    }

    .trainer-feedback-save-state,
    .weekly-review-save-state,
    .settings-surprise-copy,
    .trainer-feedback-overview-card p,
    .trainer-feedback-overview-card strong {
        text-align: center;
    }

    .settings-surprise-copy {
        text-align: left;
    }

    .trainer-feedback-save-state {
        white-space: normal;
    }

    .trainer-feedback-overview,
    .trainer-feedback-form-grid,
    .trainer-feedback-fields,
    .feedback-analysis-grid,
    .weekly-review-grid,
    .weekly-review-analysis-grid,
    .weekly-review-options,
    .weekly-review-check-grid,
    .game-info-preview-grid,
    .game-info-form-grid,
    .stats-summary-grid,
    .stats-form-grid,
    .prep-grid,
    .prep-checklist,
    .season-goal-grid,
    .detail-info-grid,
    .personal-data-grid,
    .nutrition-day-fields,
    .sleep-day-fields {
        grid-template-columns: 1fr;
    }

    .personal-data-profile-card,
    .personal-data-item,
    .weekly-review-option,
    .weekly-review-check,
    .prep-check-item {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .personal-data-item strong {
        text-align: center;
    }

    .form-actions,
    .training-actions,
    .ai-mode-suggestions {
        justify-content: center;
    }

    .btn,
    .btn-lg,
    .personal-data-edit-btn,
    .ai-mode-send-btn {
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .nutrition-controls-shell {
        align-self: center;
    }

    .nutrition-controls-panel,
    .sleep-controls-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(320px, calc(100vw - 36px));
    }

    .nutrition-day-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feedback-analysis-chart {
        min-height: 220px;
        gap: 10px;
    }

    .weekly-review-analysis-chart {
        min-height: 212px;
        padding: 12px;
        gap: 8px;
    }

    .weekly-review-analysis-bar-note {
        min-height: 30px;
        font-size: 0.72rem;
    }
}

@media (max-width: 420px) {
    .app-menu-dropdown {
        width: calc(100vw - 20px);
        padding: 12px;
    }

    .nutrition-controls-panel,
    .sleep-controls-panel {
        width: calc(100vw - 28px);
    }

    .training-day-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weekly-review-score-ring,
    .trainer-feedback-score-ring,
    .feedback-analysis-score-ring {
        width: 104px;
        height: 104px;
    }

    .feedback-analysis-chart {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .feedback-analysis-chart-bar-track {
        height: 120px;
    }

    .weekly-review-analysis-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .weekly-review-analysis-bar-track {
        height: 112px;
    }

    .ai-mode-chat-shell {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .feedback-analysis-hero {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .feedback-analysis-hero-copy,
    .feedback-analysis-score-card,
    .feedback-analysis-chart-card,
    .feedback-analysis-summary-card {
        text-align: center;
    }

    .feedback-analysis-intro,
    .feedback-analysis-score-text,
    .feedback-analysis-summary-text {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .feedback-analysis-score-card {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-analysis-topbar {
        justify-content: center;
    }

    .feedback-analysis-week-wrap {
        align-items: center;
    }

    .feedback-analysis-week-wrap input {
        width: min(100%, 240px);
        text-align: center;
    }

    .feedback-analysis-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-analysis-card {
        text-align: center;
    }

    .feedback-analysis-card-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .feedback-analysis-card-tags {
        justify-content: center;
    }

    .feedback-analysis-chart {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 0;
    }

    .feedback-analysis-chart-bar-wrap {
        width: 100%;
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-analysis-chart-bar-value,
    .feedback-analysis-chart-bar-label {
        text-align: center;
    }
}

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

@keyframes sleepBarRise {
    from {
        transform: scaleY(0.15);
        opacity: 0.55;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes landingLogoFade {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }
    18% {
        opacity: 1;
        transform: scale(1);
    }
    72% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
        visibility: hidden;
    }
}

@keyframes landingSplashFade {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0.16;
    }
}

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

@keyframes aiTypingPulse {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}