:root {
    color-scheme: dark;
    --fv-bg: #0b0d12;
    --fv-surface: #12151c;
    --fv-surface-raised: #181c25;
    --fv-surface-soft: #202632;
    --fv-border: rgba(255, 255, 255, 0.08);
    --fv-border-strong: rgba(255, 255, 255, 0.14);
    --fv-text: #f7f8fa;
    --fv-muted: #9299a8;
    --fv-purple: #8068ff;
    --fv-purple-soft: #a496ff;
    --fv-lime: #b7f34a;
    --fv-coral: #ff8066;
    --fv-blue: #5fc8ff;
    --fv-danger: #ff6b72;
    --fv-radius-xl: 28px;
    --fv-radius-lg: 22px;
    --fv-radius-md: 16px;
    --fv-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

html {
    min-height: 100%;
    background: var(--fv-bg);
}

body[data-fv-page] {
    min-height: 100vh;
    padding:
        calc(22px + env(safe-area-inset-top))
        20px
        calc(118px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 12% -8%, rgba(128, 104, 255, 0.17), transparent 30rem),
        radial-gradient(circle at 100% 28%, rgba(183, 243, 74, 0.045), transparent 28rem),
        var(--fv-bg);
    color: var(--fv-text);
    font-family: Inter, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body[data-fv-page] *,
body[data-fv-page] *::before,
body[data-fv-page] *::after {
    box-sizing: border-box;
}

body[data-fv-page] button,
body[data-fv-page] input,
body[data-fv-page] select,
body[data-fv-page] textarea {
    font: inherit;
}

body[data-fv-page] button,
body[data-fv-page] a,
body[data-fv-page] [onclick] {
    -webkit-tap-highlight-color: transparent;
}

body[data-fv-page] button:focus-visible,
body[data-fv-page] a:focus-visible,
body[data-fv-page] input:focus-visible,
body[data-fv-page] textarea:focus-visible,
body[data-fv-page] [role="link"]:focus-visible {
    outline: 3px solid rgba(164, 150, 255, 0.48);
    outline-offset: 3px;
}

body[data-fv-page] > .top-header,
body[data-fv-page] > .page-title,
body[data-fv-page] > .plan-banner,
body[data-fv-page] > .limit-box,
body[data-fv-page] > .limit-info-box,
body[data-fv-page] > .stats-grid,
body[data-fv-page] > .chart-section,
body[data-fv-page] > .tabs,
body[data-fv-page] > .content-section,
body[data-fv-page] > .chat-container,
body[data-fv-page] > .typing-indicator,
body[data-fv-page] > .profile-section,
body[data-fv-page] > .menu-section,
body[data-fv-page] > .settings-container,
body[data-fv-page] > .header,
body[data-fv-page] > .current-plan,
body[data-fv-page] > .plans-container,
body[data-fv-page] > .compare-section,
body[data-fv-page] > .progress-container {
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
}

.fv-icon,
.fv-brand svg,
.fv-nav-icon {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Shared brand and headers */
body[data-fv-page] .top-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    background: transparent;
}

.fv-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fv-text);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.fv-brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--fv-purple), #5542dd);
    box-shadow: 0 10px 26px rgba(128, 104, 255, 0.28);
}

.fv-brand-mark svg {
    width: 18px;
    height: 18px;
}

.fv-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.fv-profile-shortcut {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--fv-border);
    border-radius: 14px;
    background: rgba(24, 28, 37, 0.82);
    color: var(--fv-muted);
    text-decoration: none;
}

.fv-profile-shortcut svg {
    width: 19px;
    height: 19px;
}

body[data-fv-page="progress"] .top-header .add-btn {
    margin-left: auto;
    margin-right: 8px;
}

body[data-fv-page] .logo-text {
    color: var(--fv-text);
    background: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.035em;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page] .page-title {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
    color: var(--fv-text);
    background: none;
    font-size: clamp(27px, 8vw, 34px);
    font-weight: 780;
    line-height: 1.06;
    letter-spacing: -0.045em;
    -webkit-text-fill-color: currentColor;
}

/* Bottom navigation */
body[data-fv-page] .bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 14px;
    display: grid;
    width: min(calc(100% - 28px), 600px);
    min-height: 74px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: initial;
    margin: 0 auto;
    padding: 8px 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: rgba(18, 21, 28, 0.91);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(22px);
}

body[data-fv-page] .nav-item {
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 2px;
    border-radius: 17px;
    color: #737a88;
    font-size: 9px;
    font-weight: 720;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

body[data-fv-page] .nav-item b {
    display: grid;
    width: 23px;
    height: 23px;
    margin: 0;
    place-items: center;
    font-size: 0;
}

body[data-fv-page] .nav-item .fv-nav-icon {
    width: 20px;
    height: 20px;
}

body[data-fv-page] .nav-item.active {
    background: rgba(128, 104, 255, 0.14);
    color: var(--fv-purple-soft);
}

body[data-fv-page] .nav-item:active {
    transform: scale(0.96);
}

/* Shared cards and controls */
body[data-fv-page] .plan-banner,
body[data-fv-page] .limit-box,
body[data-fv-page] .limit-info-box,
body[data-fv-page] .stat-card,
body[data-fv-page] .chart-section,
body[data-fv-page] .content-section,
body[data-fv-page] .calendar-card,
body[data-fv-page] .manual-form,
body[data-fv-page] .chat-container,
body[data-fv-page] .menu-list,
body[data-fv-page] .settings-section,
body[data-fv-page] .plan-card,
body[data-fv-page] .current-plan,
body[data-fv-page] .compare-section {
    border: 1px solid var(--fv-border);
    background: rgba(18, 21, 28, 0.84);
    box-shadow: none;
}

body[data-fv-page] .plan-banner,
body[data-fv-page] .limit-box,
body[data-fv-page] .limit-info-box {
    border-radius: var(--fv-radius-md);
}

body[data-fv-page] .plan-banner {
    min-height: 58px;
    margin-bottom: 12px;
    padding: 14px 16px;
    background:
        linear-gradient(120deg, rgba(128, 104, 255, 0.11), transparent 72%),
        var(--fv-surface);
}

body[data-fv-page] .plan-info,
body[data-fv-page] .plan-banner-left {
    color: var(--fv-muted);
    font-size: 12px;
}

body[data-fv-page] .plan-info strong,
body[data-fv-page] .plan-banner-left strong {
    color: var(--fv-text);
}

body[data-fv-page] .plan-badge,
body[data-fv-page] .plan-banner-badge,
body[data-fv-page] .current-plan-badge {
    padding: 7px 11px;
    border: 1px solid rgba(164, 150, 255, 0.18);
    border-radius: 11px;
    background: rgba(128, 104, 255, 0.12);
    color: var(--fv-purple-soft);
    font-size: 10px;
    font-weight: 760;
}

body[data-fv-page] .limit-box,
body[data-fv-page] .limit-info-box {
    margin-bottom: 18px;
    padding: 15px 16px;
}

body[data-fv-page] .limit-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px 14px;
    text-align: left;
}

body[data-fv-page] .limit-box .limit-label,
body[data-fv-page] .limit-box .limit-value {
    margin: 0;
}

body[data-fv-page] .limit-box .limit-value {
    color: var(--fv-muted);
    font-size: 12px;
    font-weight: 680;
    text-align: right;
}

body[data-fv-page] .limit-box .limit-value span {
    color: var(--fv-text);
}

body[data-fv-page] .limit-progress,
body[data-fv-page] .limit-bar-track {
    height: 5px;
    border-radius: 999px;
    background: var(--fv-surface-soft);
}

body[data-fv-page] .limit-progress-bar,
body[data-fv-page] .limit-bar-fill {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fv-purple), var(--fv-purple-soft));
}

body[data-fv-page] .limit-box .limit-progress {
    grid-column: 1 / -1;
}

body[data-fv-page] .stats-grid {
    gap: 10px;
    margin-bottom: 24px;
}

body[data-fv-page] .stat-card {
    min-width: 0;
    min-height: 104px;
    padding: 16px 14px;
    border-radius: var(--fv-radius-md);
}

body[data-fv-page] .stat-value {
    color: var(--fv-text);
    background: none;
    font-size: 23px;
    font-weight: 780;
    letter-spacing: -0.04em;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page] .stat-label,
body[data-fv-page] .stat-sub {
    color: var(--fv-muted);
    font-size: 11px;
}

body[data-fv-page] .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 16px;
    padding: 5px;
    border: 1px solid var(--fv-border);
    border-radius: 17px;
    background: var(--fv-surface);
}

body[data-fv-page] .tab {
    min-height: 43px;
    padding: 10px 6px;
    border-radius: 12px;
    color: var(--fv-muted);
    font-size: 12px;
    font-weight: 700;
}

body[data-fv-page] .tab.active {
    background: var(--fv-surface-soft);
    color: var(--fv-text);
    box-shadow: none;
}

body[data-fv-page] .content-section {
    padding: 18px;
    border-radius: var(--fv-radius-lg);
}

body[data-fv-page] .chart-section,
body[data-fv-page] .calendar-card,
body[data-fv-page] .manual-form {
    border-radius: var(--fv-radius-lg);
}

body[data-fv-page] .section-header {
    margin-bottom: 15px;
}

body[data-fv-page] .section-title {
    color: var(--fv-text);
    font-weight: 760;
    letter-spacing: -0.02em;
}

body[data-fv-page] .section-icon {
    border-radius: 12px;
    background: var(--fv-surface-soft);
    color: var(--fv-purple-soft);
}

body[data-fv-page] .btn-primary,
body[data-fv-page] .action-btn,
body[data-fv-page] .modal-btn,
body[data-fv-page] .payment-btn {
    min-height: 48px;
    border: 0;
    border-radius: 15px;
    background: var(--fv-text);
    box-shadow: none;
    color: #111319;
    font-weight: 780;
    transition: transform 160ms ease, background 160ms ease;
}

body[data-fv-page] .btn-primary:hover,
body[data-fv-page] .action-btn:hover,
body[data-fv-page] .modal-btn:hover,
body[data-fv-page] .payment-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}

body[data-fv-page] .btn-secondary,
body[data-fv-page] .modal-btn-secondary,
body[data-fv-page] .payment-close {
    min-height: 44px;
    border: 1px solid var(--fv-border-strong);
    border-radius: 14px;
    background: transparent;
    color: var(--fv-muted);
}

body[data-fv-page] .form-input,
body[data-fv-page] input[type="text"],
body[data-fv-page] input[type="email"],
body[data-fv-page] input[type="password"],
body[data-fv-page] input[type="number"],
body[data-fv-page] textarea,
body[data-fv-page] select {
    border: 1px solid var(--fv-border-strong);
    border-radius: 14px;
    background: #0f1218;
    color: var(--fv-text);
}

body[data-fv-page] .form-input:focus,
body[data-fv-page] input:focus,
body[data-fv-page] textarea:focus,
body[data-fv-page] select:focus {
    border-color: var(--fv-purple);
    outline: none;
    box-shadow: 0 0 0 3px rgba(128, 104, 255, 0.12);
}

body[data-fv-page] .modal,
body[data-fv-page] .modal-overlay {
    background: rgba(5, 7, 10, 0.74);
    backdrop-filter: blur(12px);
}

body[data-fv-page] .modal-content {
    border: 1px solid var(--fv-border-strong);
    border-radius: var(--fv-radius-lg);
    background: var(--fv-surface-raised);
    box-shadow: var(--fv-shadow);
}

body[data-fv-page] .modal-title {
    color: var(--fv-text);
}

body[data-fv-page] .loading-overlay,
body[data-fv-page] #loading-screen {
    background: rgba(11, 13, 18, 0.97);
    backdrop-filter: blur(16px);
}

body[data-fv-page] .loading-spinner,
body[data-fv-page] .spinner {
    border-color: var(--fv-surface-soft);
    border-top-color: var(--fv-purple);
}

/* Home */
body[data-fv-page="home"] {
    padding-right: 20px;
    padding-left: 20px;
}

body[data-fv-page="home"] > .header,
body[data-fv-page="home"] > .streak-box,
body[data-fv-page="home"] > .plan-banner,
body[data-fv-page="home"] > .limits-section,
body[data-fv-page="home"] > .stats-grid,
body[data-fv-page="home"] > .section-title,
body[data-fv-page="home"] > .activity-list,
body[data-fv-page="home"] > .fv-home-actions {
    width: min(100%, 820px);
    margin-right: auto;
    margin-left: auto;
}

body[data-fv-page="home"] .header {
    min-height: 54px;
    margin-bottom: 24px;
    padding: 0;
}

body[data-fv-page="home"] .user-welcome p {
    margin-bottom: 5px;
    color: var(--fv-muted);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body[data-fv-page="home"] .user-welcome h1 {
    color: var(--fv-text);
    background: none;
    font-size: clamp(27px, 8vw, 34px);
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -0.045em;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page="home"] .profile-pic {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    overflow: visible;
    border: 1px solid var(--fv-border);
    border-radius: 15px;
    background: linear-gradient(145deg, #302a56, #171a22);
    color: var(--fv-purple-soft);
    font-size: 13px;
    font-weight: 820;
}

body[data-fv-page="home"] .profile-pic::after {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--fv-surface);
    border-radius: 50%;
    background: var(--fv-lime);
    content: "";
}

.fv-home-actions {
    margin-bottom: 14px;
}

.fv-featured-action {
    position: relative;
    min-height: 224px;
    margin: 0 0 14px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(164, 150, 255, 0.23);
    border-radius: var(--fv-radius-xl);
    background:
        linear-gradient(130deg, rgba(128, 104, 255, 0.23), rgba(128, 104, 255, 0.02) 70%),
        var(--fv-surface) !important;
    box-shadow: var(--fv-shadow);
    isolation: isolate;
}

.fv-featured-action::before {
    position: absolute;
    z-index: -1;
    top: -82px;
    right: -68px;
    width: 220px;
    height: 220px;
    border: 36px solid rgba(128, 104, 255, 0.1);
    border-radius: 50%;
    content: "";
}

.fv-featured-action::after {
    position: absolute;
    z-index: -1;
    top: 31px;
    right: 28px;
    width: 58px;
    height: 58px;
    border: 7px solid rgba(255, 255, 255, 0.07);
    border-top-color: var(--fv-lime);
    border-right-color: var(--fv-lime);
    border-radius: 50%;
    content: "";
    transform: rotate(25deg);
}

.fv-featured-action .fv-card-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--fv-purple-soft);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fv-featured-action .fv-card-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fv-purple-soft);
    box-shadow: 0 0 15px var(--fv-purple);
    content: "";
}

.fv-featured-action h2 {
    max-width: 270px;
    margin-bottom: 8px;
    color: var(--fv-text);
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.fv-featured-action p {
    max-width: 290px;
    margin-bottom: 21px;
    color: #b6bcc7;
    font-size: 14px;
    line-height: 1.5;
}

.fv-featured-action .action-btn {
    padding: 0 18px;
    color: #111319 !important;
}

.fv-quick-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 14px;
}

.fv-quick-heading h2 {
    font-size: 19px;
    letter-spacing: -0.025em;
}

.fv-quick-heading span {
    color: var(--fv-purple-soft);
    font-size: 12px;
    font-weight: 700;
}

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

.fv-quick-grid .action-card {
    min-height: 166px;
    margin: 0;
    padding: 18px;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-lg);
    background: var(--fv-surface) !important;
    box-shadow: none;
}

.fv-quick-grid .action-card::after {
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: 0.055;
}

.fv-quick-grid .action-card[data-fv-kind="meal"] { color: var(--fv-coral); }
.fv-quick-grid .action-card[data-fv-kind="video"] { color: var(--fv-lime); }

.fv-action-icon {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 12px;
    background: currentColor;
}

.fv-action-icon svg {
    width: 19px;
    height: 19px;
    color: var(--fv-bg);
}

.fv-quick-grid .action-card h2 {
    margin-bottom: 7px;
    color: var(--fv-text);
    font-size: 16px;
    line-height: 1.2;
}

.fv-quick-grid .action-card p {
    max-width: 100%;
    margin-bottom: 15px;
    color: var(--fv-muted);
    font-size: 11px;
    line-height: 1.4;
}

.fv-quick-grid .action-card .action-btn {
    min-height: 37px;
    padding: 0 12px;
    border: 1px solid var(--fv-border-strong);
    border-radius: 12px;
    background: var(--fv-surface-soft);
    color: var(--fv-text) !important;
    font-size: 11px;
}

body[data-fv-page="home"] .streak-box {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 128, 102, 0.17);
    border-radius: 15px;
    background: rgba(255, 128, 102, 0.07);
    color: var(--fv-coral);
}

body[data-fv-page="home"] .streak-box small {
    color: var(--fv-muted);
}

body[data-fv-page="home"] .limits-section {
    margin-bottom: 22px;
}

body[data-fv-page="home"] .limit-row {
    min-height: 64px;
    margin-bottom: 0;
    padding: 14px 15px;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-md);
    background: rgba(18, 21, 28, 0.82);
}

body[data-fv-page="home"] .limit-icon {
    display: grid;
    width: 32px;
    height: 32px;
    min-width: 32px;
    place-items: center;
    border-radius: 10px;
    background: rgba(128, 104, 255, 0.12);
    color: var(--fv-purple-soft);
    font-size: 15px;
}

body[data-fv-page="home"] .share-banner {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-lg);
    background:
        linear-gradient(120deg, rgba(128, 104, 255, 0.12), transparent 70%),
        var(--fv-surface);
    box-shadow: none;
}

body[data-fv-page="home"] .share-banner-icon {
    display: grid;
    width: 44px;
    height: 44px;
    min-width: 44px;
    place-items: center;
    border-radius: 14px;
    background: var(--fv-surface-soft);
    font-size: 20px;
}

body[data-fv-page="home"] .social-pill {
    border: 1px solid var(--fv-border);
    background: transparent;
    color: var(--fv-muted);
}

body[data-fv-page="home"] > .section-title {
    margin-top: 5px;
    margin-bottom: 14px;
    font-size: 19px;
}

body[data-fv-page="home"] .activity-list {
    overflow: hidden;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-lg);
    background: var(--fv-surface);
}

body[data-fv-page="home"] .activity-item {
    margin: 0;
    padding: 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body[data-fv-page="home"] .activity-item + .activity-item {
    border-top: 1px solid var(--fv-border);
}

body[data-fv-page="home"] .activity-icon {
    display: grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 13px;
    place-items: center;
    border-radius: 13px;
    background: var(--fv-surface-soft);
}

body[data-fv-page="home"] .activity-status {
    border: 0;
    background: transparent;
    color: var(--fv-lime);
}

/* Exercise and meals */
body[data-fv-page="exercises"] .upload-box,
body[data-fv-page="foods"] .camera-box {
    min-height: 230px;
    border: 1px dashed rgba(164, 150, 255, 0.36);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 18%, rgba(128, 104, 255, 0.11), transparent 10rem),
        #0f1218;
}

body[data-fv-page="exercises"] .upload-icon,
body[data-fv-page="foods"] .camera-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: var(--fv-surface-soft);
    font-size: 25px;
}

body[data-fv-page="exercises"] .upload-text strong,
body[data-fv-page="foods"] .camera-text strong {
    color: var(--fv-text);
}

body[data-fv-page="foods"] .btn-barcode {
    min-height: 48px;
    border-radius: 15px;
    background: var(--fv-lime);
    color: #11150b;
    font-weight: 780;
}

.fv-primary-flow {
    width: min(100%, 820px);
    margin: 0 auto 24px;
}

.fv-primary-flow > .tabs,
.fv-primary-flow > .content-section {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.fv-primary-flow > .content-section {
    padding: 18px;
}

body[data-fv-page="foods"] #barcode-video-container {
    border: 1px solid var(--fv-border-strong);
    border-radius: 20px !important;
    box-shadow: var(--fv-shadow);
}

/* Coach */
body[data-fv-page="chat"] {
    padding-bottom: calc(210px + env(safe-area-inset-bottom));
    overflow-x: hidden;
}

body[data-fv-page="chat"] > .page-title,
body[data-fv-page="chat"] > .limit-info-box,
body[data-fv-page="chat"] > .chat-container,
body[data-fv-page="chat"] > .typing-indicator {
    min-width: 0;
    max-width: 100%;
}

body[data-fv-page="chat"] .limit-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        linear-gradient(120deg, rgba(128, 104, 255, 0.1), transparent),
        var(--fv-surface);
}

body[data-fv-page="chat"] .limit-text,
body[data-fv-page="chat"] .limit-numbers {
    color: var(--fv-muted);
    font-size: 12px;
}

body[data-fv-page="chat"] .chat-container {
    min-height: 360px;
    min-width: 0;
    padding: 18px;
    overflow-x: hidden;
    border-radius: var(--fv-radius-lg);
}

body[data-fv-page="chat"] .workout-plans-section {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 17px;
    border: 1px solid rgba(128, 104, 255, 0.2);
    border-radius: 19px;
    background:
        linear-gradient(120deg, rgba(128, 104, 255, 0.13), transparent 75%),
        #11141b;
}

body[data-fv-page="chat"] .plans-grid {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

body[data-fv-page="chat"] .plan-card-small {
    min-width: 102px;
    min-height: 92px;
    flex: 0 0 102px;
    border: 1px solid var(--fv-border);
    border-radius: 14px;
    background: var(--fv-surface-raised);
    scroll-snap-align: start;
}

body[data-fv-page="chat"] .plan-card-small:hover,
body[data-fv-page="chat"] .plan-card-small.selected {
    border-color: rgba(164, 150, 255, 0.45);
    background: rgba(128, 104, 255, 0.12);
}

body[data-fv-page="chat"] .message {
    min-width: 0;
    max-width: 88%;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body[data-fv-page="chat"] .export-btn {
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 13px;
    background: var(--fv-purple);
}

body[data-fv-page="chat"] .message-ai {
    border: 1px solid var(--fv-border);
    border-bottom-left-radius: 6px;
    background: var(--fv-surface-raised);
}

body[data-fv-page="chat"] .message-user {
    border-bottom-right-radius: 6px;
    background: var(--fv-purple);
}

body[data-fv-page="chat"] .input-area-container {
    position: fixed;
    z-index: 900;
    right: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 14px;
    width: min(calc(100% - 28px), 820px);
    max-width: calc(100vw - 28px);
    margin: 0 auto;
    padding: 0;
    background: transparent;
}

body[data-fv-page="chat"] .input-area {
    min-height: 62px;
    min-width: 0;
    padding: 7px;
    border: 1px solid var(--fv-border-strong);
    border-radius: 20px;
    background: rgba(18, 21, 28, 0.94);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(20px);
}

body[data-fv-page="chat"] .input-area input {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-fv-page="chat"] .mic-btn {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--fv-border);
    border-radius: 13px;
    background: var(--fv-surface-soft);
    color: var(--fv-muted);
}

body[data-fv-page="chat"] .send-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 15px;
    border-radius: 14px;
    background: var(--fv-purple);
    color: #fff;
}

/* Profile and settings */
body[data-fv-page="profile"] .profile-section {
    padding: 28px 18px;
    border: 1px solid rgba(128, 104, 255, 0.2);
    border-radius: var(--fv-radius-xl);
    background:
        radial-gradient(circle at 50% 0, rgba(128, 104, 255, 0.19), transparent 14rem),
        var(--fv-surface);
}

body[data-fv-page="profile"] .avatar {
    border: 1px solid rgba(164, 150, 255, 0.32);
    background: linear-gradient(145deg, #302a56, #171a22);
    color: var(--fv-purple-soft);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

body[data-fv-page="profile"] .user-name {
    letter-spacing: -0.04em;
}

body[data-fv-page="profile"] .user-plan {
    color: var(--fv-purple-soft);
}

body[data-fv-page="profile"] .menu-section {
    margin-top: 26px;
}

body[data-fv-page="profile"] .menu-section > .section-title {
    margin: 24px 2px 10px;
    color: var(--fv-muted);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-fv-page="profile"] .menu-list {
    overflow: hidden;
    border-radius: var(--fv-radius-lg);
}

body[data-fv-page="profile"] .menu-item {
    min-height: 64px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body[data-fv-page="profile"] .menu-item + .menu-item {
    border-top: 1px solid var(--fv-border);
}

body[data-fv-page="profile"] .menu-item:hover {
    border-color: transparent;
    background: var(--fv-surface-raised);
    transform: none;
}

body[data-fv-page="profile"] .menu-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--fv-surface-soft);
    color: var(--fv-purple-soft);
    font-size: 0;
}

body[data-fv-page="profile"] .menu-icon svg {
    width: 18px;
    height: 18px;
}

body[data-fv-page="profile"] .menu-arrow {
    color: var(--fv-muted);
}

body[data-fv-page="settings"] .settings-section {
    overflow: hidden;
    border-radius: var(--fv-radius-lg);
}

body[data-fv-page="settings"] .setting-item {
    border-color: var(--fv-border);
}

body[data-fv-page] .toggle-switch.active {
    background: var(--fv-purple);
}

/* Progress */
body[data-fv-page="progress"] .header {
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-fv-page="progress"] .logo-text {
    font-size: clamp(27px, 8vw, 34px);
}

body[data-fv-page="progress"] .add-btn {
    width: 44px;
    height: 44px;
    background: var(--fv-text);
    box-shadow: none;
    color: #111319;
}

body[data-fv-page="progress"] .section-title::before {
    background: var(--fv-lime);
}

body[data-fv-page="progress"] .chart-card {
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-lg);
    background: var(--fv-surface);
}

/* Subscription */
body[data-fv-page="subscriptions"] .header h2 {
    color: var(--fv-text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page="subscriptions"] .plan-card {
    border-radius: var(--fv-radius-xl);
}

body[data-fv-page="subscriptions"] .plan-card.popular {
    border-color: rgba(164, 150, 255, 0.38);
    background:
        linear-gradient(130deg, rgba(128, 104, 255, 0.15), transparent 65%),
        var(--fv-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body[data-fv-page="subscriptions"] .price-amount,
body[data-fv-page="subscriptions"] .price-currency {
    color: var(--fv-text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page="subscriptions"] .popular-badge {
    background: var(--fv-purple);
}

/* Login */
body[data-fv-page="login"] {
    display: grid;
    min-height: 100vh;
    padding:
        calc(30px + env(safe-area-inset-top))
        20px
        calc(30px + env(safe-area-inset-bottom));
    place-items: center;
}

body[data-fv-page="login"] .container {
    width: min(100%, 430px);
    padding: 28px;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-xl);
    background:
        radial-gradient(circle at 50% 0, rgba(128, 104, 255, 0.17), transparent 15rem),
        rgba(18, 21, 28, 0.93);
    box-shadow: var(--fv-shadow);
}

body[data-fv-page="login"] .header {
    margin-bottom: 24px;
}

body[data-fv-page="login"] .logo {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--fv-purple), #5542dd);
    box-shadow: 0 15px 34px rgba(128, 104, 255, 0.3);
}

body[data-fv-page="login"] .logo::before {
    color: white;
    font-size: 23px;
    font-weight: 900;
    content: "F";
}

body[data-fv-page="login"] h1 {
    color: var(--fv-text);
    background: none;
    font-size: 29px;
    letter-spacing: -0.045em;
    -webkit-text-fill-color: currentColor;
}

body[data-fv-page="login"] .subtitle {
    color: var(--fv-muted);
    line-height: 1.5;
}

body[data-fv-page="login"] input {
    min-height: 52px;
    padding: 0 15px;
}

body[data-fv-page="login"] .buttons {
    gap: 10px;
}

body[data-fv-page="login"] .btn-primary {
    background: var(--fv-text);
    color: #111319;
}

body[data-fv-page="login"] .google-btn {
    min-height: 50px;
    border: 1px solid var(--fv-border-strong);
    border-radius: 15px;
    background: var(--fv-surface-raised);
    color: var(--fv-text);
}

body[data-fv-page="login"] .divider::before,
body[data-fv-page="login"] .divider::after {
    background: var(--fv-border);
}

/* Compact phones */
@media (max-width: 370px) {
    body[data-fv-page] {
        padding-right: 15px;
        padding-left: 15px;
    }

    .fv-featured-action {
        padding: 20px;
    }

    .fv-featured-action::after {
        right: 18px;
        width: 48px;
        height: 48px;
    }

    .fv-quick-grid {
        gap: 9px;
    }

    .fv-quick-grid .action-card {
        padding: 15px;
    }

    body[data-fv-page] .bottom-nav {
        right: 9px;
        left: 9px;
        width: calc(100% - 18px);
    }

    body[data-fv-page="chat"] .input-area-container {
        right: 9px;
        left: 9px;
        width: calc(100% - 18px);
        max-width: calc(100vw - 18px);
    }

    body[data-fv-page="chat"] .input-area {
        gap: 6px;
    }

    body[data-fv-page="chat"] .input-area input {
        padding-right: 8px;
        padding-left: 10px;
    }

    body[data-fv-page="chat"] .send-btn {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (min-width: 840px) {
    body[data-fv-page] {
        padding-top: calc(34px + env(safe-area-inset-top));
    }

    body[data-fv-page="home"] .fv-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-fv-page="home"] .fv-featured-action {
        min-height: 250px;
    }

    body[data-fv-page="profile"] .menu-section,
    body[data-fv-page="settings"] .settings-container {
        max-width: 720px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-fv-page] *,
    body[data-fv-page] *::before,
    body[data-fv-page] *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}