:root {
    --app-page-max: 480px;
    --app-bottom-safe: calc(96px + env(safe-area-inset-bottom));
    --app-card: #0e1724;
    --app-card-soft: #111d2d;
    --app-line: rgba(93, 236, 255, 0.18);
    --app-line-strong: rgba(93, 236, 255, 0.38);
    --app-cyan: #5decff;
    --app-green: #3ef0b0;
    --app-yellow: #ffd166;
    --app-orange: #ffa529;
    --app-blue: #4d9cff;
    --app-muted: #a9b4c4;
}

* { box-sizing: border-box; }

html,
body {
    min-height: 100%;
    overflow-x: hidden;
    background: #061115 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body {
    margin: 0;
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.has-app-modal { overflow: hidden; }

button,
input { font: inherit; }

.app-shell {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, #05080d 0%, #061115 38%, #0c2329 100%);
}

.screen {
    width: min(100%, var(--app-page-max));
    min-height: 100vh;
    margin: 0 auto;
    padding: calc(24px + env(safe-area-inset-top)) 14px var(--app-bottom-safe);
}

.view { animation: appIn 180ms ease-out; }

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

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.brand {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.brand span { color: var(--app-cyan); }

.top-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icon-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: var(--app-muted);
    background: transparent;
}

.icon-button i { font-size: 19px; }

.icon-button:active { transform: scale(0.96); }

.avatar-button {
    display: inline-grid;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    aspect-ratio: 1 / 1;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(93, 236, 255, 0.18);
    border-radius: 50%;
    color: #061115;
    background: #e7e8eb;
    font-weight: 900;
    line-height: 0;
}

.avatar-button.has-photo {
    border: 0;
    background: transparent;
}

.avatar-button img {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: #e7e8eb;
}

.login-button {
    min-width: 72px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(93, 236, 255, 0.48);
    border-radius: 999px;
    color: #041217;
    background: var(--app-cyan);
    font-size: 12px;
    font-weight: 950;
}

.compact-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.back-button, .forward-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    color: #c6c6c6;
    background: transparent;
    font-size: 17px;
    font-weight: 800;
}

.back-button i, .forward-button i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.page-title {
    margin: 0 0 24px;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.1;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.section-title__left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.section-title i { font-size: 17px; }

.muted { color: var(--app-muted); }

.cyan { color: var(--app-cyan); }

.green { color: var(--app-green); }

.yellow { color: var(--app-yellow); }

.orange { color: var(--app-orange); }

.blue { color: var(--app-blue); }

.loadblink-shell {
    position: relative;
    display: block;
    min-width: 0;
    overflow: visible;
    border-radius: 10px;
}

.loadblink-shell:before {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, rgba(169, 180, 196, 0.24) 0%, rgba(93, 236, 255, 0.18) 35%, rgba(181, 92, 255, 0.5) 50%, rgba(62, 240, 176, 0.24) 65%, rgba(169, 180, 196, 0.24) 100%);
    background-size: 260% 100%;
    box-shadow: 0 0 18px rgba(181, 92, 255, 0.14);
    content: "";
    -webkit-animation: gradientlb 1.15s ease-in-out infinite;
    -moz-animation: gradientlb 1.15s ease-in-out infinite;
    animation: gradientlb 1.15s ease-in-out infinite;
}

.loadblink-shell .app-input {
    position: relative;
    z-index: 1;
}

.loadblink {
    color: transparent !important;
    caret-color: transparent;
    border-color: transparent !important;
    border-radius: 10px;
    -webkit-text-fill-color: transparent !important;
    background: rgba(8, 13, 20, 0.14) !important;
    opacity: 0.62;
}

.loadblink::placeholder { color: transparent !important; }

@-webkit-keyframes gradientlb {
    0% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
    50% { background-position: 100% 50%; opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(62, 240, 176, 0.32), 0 0 18px rgba(93, 236, 255, 0.2); }
    100% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
}

@-moz-keyframes gradientlb {
    0% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
    50% { background-position: 100% 50%; opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(62, 240, 176, 0.32), 0 0 18px rgba(93, 236, 255, 0.2); }
    100% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
}

@keyframes gradientlb {
    0% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
    50% { background-position: 100% 50%; opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(62, 240, 176, 0.32), 0 0 18px rgba(93, 236, 255, 0.2); }
    100% { background-position: 0% 50%; opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.12), 0 0 8px rgba(93, 236, 255, 0.04); }
}

.meal-entry-switch__item--action.is-thinking {
    position: relative;
    overflow: visible;
    color: #efe3ff;
    border-color: rgba(181, 92, 255, 0.78);
    background: rgba(181, 92, 255, 0.14);
    box-shadow: 0 0 0 2px rgba(181, 92, 255, 0.18), 0 0 28px rgba(181, 92, 255, 0.42);
    -webkit-animation: aiThinkingGlow 1.25s ease-in-out infinite;
    -moz-animation: aiThinkingGlow 1.25s ease-in-out infinite;
    animation: aiThinkingGlow 1.25s ease-in-out infinite;
    pointer-events: none;
}

.meal-entry-switch__item--action.is-thinking:before {
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(181, 92, 255, 0.4), rgba(181, 92, 255, 0.02) 64%, transparent 72%);
    content: "";
    -webkit-animation: aiThinkingHalo 1.25s ease-in-out infinite;
    -moz-animation: aiThinkingHalo 1.25s ease-in-out infinite;
    animation: aiThinkingHalo 1.25s ease-in-out infinite;
}

@-webkit-keyframes aiThinkingGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(181, 92, 255, 0.12), 0 0 14px rgba(181, 92, 255, 0.22); transform: scale(1); }
    50% { box-shadow: 0 0 0 5px rgba(181, 92, 255, 0.24), 0 0 36px rgba(181, 92, 255, 0.68); transform: scale(1.03); }
}

@-moz-keyframes aiThinkingGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(181, 92, 255, 0.12), 0 0 14px rgba(181, 92, 255, 0.22); transform: scale(1); }
    50% { box-shadow: 0 0 0 5px rgba(181, 92, 255, 0.24), 0 0 36px rgba(181, 92, 255, 0.68); transform: scale(1.03); }
}

@keyframes aiThinkingGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(181, 92, 255, 0.12), 0 0 14px rgba(181, 92, 255, 0.22); transform: scale(1); }
    50% { box-shadow: 0 0 0 5px rgba(181, 92, 255, 0.24), 0 0 36px rgba(181, 92, 255, 0.68); transform: scale(1.03); }
}

@-webkit-keyframes aiThinkingHalo {
    0%, 100% { opacity: 0.36; transform: scale(0.92); }
    50% { opacity: 0.85; transform: scale(1.18); }
}

@-moz-keyframes aiThinkingHalo {
    0%, 100% { opacity: 0.36; transform: scale(0.92); }
    50% { opacity: 0.85; transform: scale(1.18); }
}

@keyframes aiThinkingHalo {
    0%, 100% { opacity: 0.36; transform: scale(0.92); }
    50% { opacity: 0.85; transform: scale(1.18); }
}

.app-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(17, 29, 45, 0.96), rgba(8, 13, 20, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.app-card--pad { padding: 12px; }

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

.home-card-slot { display: contents; }

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

.card-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.12;
}

.card-heading i {
    color: var(--app-muted);
    font-size: 16px;
}

.card-heading span { min-width: 0; }

.reminder-card-heading { align-items: flex-start; }

.metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #fff;
    font-size: 21px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.metric small {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 800;
}

.progress-track {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(169, 180, 196, 0.18);
}

.progress-fill {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--bar-color, var(--app-cyan));
}

.training-card { padding: 14px 12px; }

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

.training-card__top > .muted,
.training-card__top > .green {
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.1;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.week-day {
    min-width: 0;
    text-align: center;
}

.week-day b {
    display: block;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 900;
}

.week-day strong {
    display: block;
    margin: 4px 0 7px;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
}

.week-day.is-today b {
    color: var(--app-cyan);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.reminder-preview {
    display: grid;
    gap: 8px;
}

.reminder-line,
.meal-line,
.history-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
}

.reminder-line + .reminder-line,
.meal-line + .meal-line,
.history-line + .history-line { border-top: 1px solid rgba(93, 236, 255, 0.12); }

.reminder-line + .reminder-line { padding-top: 8px; }

.tile-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    color: var(--icon-color, var(--app-cyan));
    background: rgba(255, 255, 255, 0.07);
}

.tile-icon i { font-size: 15px; }

.row-title {
    margin: 0;
    color: #ddd;
    font-size: 10.75px;
    font-weight: 900;
    line-height: 1.1;
}

.row-title.muted {
    color: var(--app-muted);
    font-weight: 800;
}

.row-sub {
    margin: 3px 0 0;
    color: var(--app-muted);
    font-size: 9.75px;
    font-weight: 750;
    line-height: 1.18;
}

.circle-action {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 2px solid rgba(93, 236, 255, 0.24);
    border-radius: 50%;
    color: #fff;
    background: rgba(93, 236, 255, 0.08);
}

.circle-action i { font-size: 18px; }

.count-badge {
    width: 28px;
    height: 28px;
    align-self: flex-start;
    margin-left: auto;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    margin-top: -0.45rem;
    margin-right: -0.45rem;
}

.stat-card {
    min-height: 120px;
    padding-right: 56px;
}

.stat-card .metric {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-top: 2px;
    font-size: 20px;
    text-overflow: ellipsis;
}

.stat-card .weight-card-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.weight-card-metric > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weight-trend {
    display: inline-grid;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: rgba(169, 180, 196, 0.78);
    transform: translateY(1px);
}

.weight-trend i {
    font-size: 16px;
    stroke-width: 2.5;
}

.weight-trend--good { color: var(--app-green); }

.weight-trend--bad { color: #ff3f62; }

.weight-trend--neutral { color: rgba(169, 180, 196, 0.82); }

.stat-card .metric small,
.challenge-card .metric small { margin-left: 5px; }

.stat-card__action,
.challenge-card__action {
    position: absolute;
    right: 12px;
}

.stat-card__action { top: 46px; }

.stat-card__progress,
.challenge-card__progress {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.challenge-card {
    min-height: 120px;
    padding-right: 56px;
}

.challenge-card .row-title { font-size: 10.5px; }

.challenge-card .metric {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin: 15px 0 0;
    font-size: 20px;
    text-overflow: ellipsis;
}

.challenge-card__action { top: 52px; }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    color: var(--app-cyan);
    background: transparent;
    font-size: 11px;
    font-weight: 900;
}

.card-link i { font-size: 15px; }

.friend-link-row {
    margin: 20px 0 0;
    text-align: right;
}

.donut-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 12px;
}

.macro-donut {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: conic-gradient(var(--app-cyan) 0 39%, rgba(169, 180, 196, 0.42) 39% 48%, var(--app-yellow) 48% 75%, var(--app-green) 75% 100%);
}

.macro-donut:after {
    display: block;
    width: 34px;
    height: 34px;
    margin: 12px;
    border-radius: 50%;
    background: #05080d;
    content: "";
}

.macro-list {
    display: grid;
    gap: 5px;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 850;
}

.macro-list span {
    display: grid;
    grid-template-columns: 12px 16px 1fr;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot-color, var(--app-cyan));
}

.friend-stack {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

.friend-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-right: -8px;
    border: 2px solid #0a2330;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #4d9cff, #ffd166);
    font-weight: 900;
}

.gym-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.gym-logo {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 6px solid rgba(169, 180, 196, 0.38);
    border-left-color: var(--app-green);
    border-radius: 50%;
    color: #fff;
    background: #20314a;
    font-weight: 950;
    line-height: 1;
}

.gym-change-link {
    align-self: start;
    margin: 0;
    border: 0;
    color: var(--app-cyan);
    background: transparent;
    font-size: 9.75px;
    font-weight: 900;
    line-height: 1.18;
    text-align: right;
    white-space: nowrap;
}

.gym-card__progress {
    margin-top: 12px;
}

.primary-pill.start-workout-btn {
    font-size: 10px;
}

.primary-pill.start-workout-btn i {
    font-size: 15px;
}

.primary-pill,
.outline-pill,
.danger-pill {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    font-family: inherit;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}

.primary-pill {
    gap: 8px;
    border: 0;
    color: #031116;
    background: linear-gradient(135deg, #5decff, #19bfd9);
    font-size: 11.5px;
    font-weight: 950;
}

.outline-pill {
    gap: 7px;
    border: 1px solid rgba(93, 236, 255, 0.56);
    color: var(--app-cyan);
    background: transparent;
    font-size: 11px;
    font-weight: 900;
}

.danger-pill {
    border-color: rgba(255, 63, 98, 0.46);
    color: #ff93a7;
    background: rgba(255, 63, 98, 0.06);
}

.danger-pill:hover {
    border-color: rgba(255, 63, 98, 0.72);
    color: #fff;
    background: rgba(255, 63, 98, 0.12);
}

.primary-pill i,
.outline-pill i { font-size: 17px; }

.primary-pill span,
.outline-pill span,
.danger-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.split-pill {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    min-width: 0;
    min-height: 40px;
    overflow: hidden;
    border: 1px solid rgba(93, 236, 255, 0.56);
    border-radius: 999px;
    color: var(--app-cyan);
    background: transparent;
}

.split-pill__part {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: inherit;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
}

.split-pill__part--icon {
    padding: 0;
}

.split-pill__part--text {
    padding: 0 11px 0 13px;
    border-right: 1px solid rgba(93, 236, 255, 0.34);
}

.split-pill__part i { font-size: 17px; }

.split-pill__part span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 18px 0;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.date-strip::-webkit-scrollbar { display: none; }

.date-item {
    flex: 0 0 42px;
    min-height: 56px;
    padding: 0;
    border: 0;
    appearance: none;
    text-align: center;
    color: var(--app-muted);
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.05;
}

.date-item span,
.date-item b { display: block; }

.date-item b {
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
}

.date-item .date-bubble {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-top: 7px;
    place-items: center;
    border: 2px solid var(--app-cyan);
    border-radius: 50%;
    color: var(--app-cyan);
    background: transparent;
}

.date-item .date-bubble i {
    font-size: 14px;
}

.date-item.is-active .date-bubble {
    color: #021014;
    background: var(--app-cyan);
    box-shadow: 0 12px 26px rgba(93, 236, 255, 0.3);
}

.diet-summary {
    display: grid;
    grid-template-columns: 0.9fr 1.28fr;
    gap: 11px;
    align-items: center;
}

.diet-date-heading {
    position: relative;
    margin-top: -10px;
    text-align: center;
}

.diet-settings-button {
    position: absolute;
    top: 2px;
    right: 0;
}

.diet-date-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.08;
}

.diet-summary-label {
    margin: 0 0 8px;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 750;
}

.diet-summary .metric {
    font-size: 31px;
}

.diet-summary .metric small {
    font-size: 12px;
}

.macro-progress-list {
    display: grid;
    gap: 8px;
}

.macro-progress {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.ring {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: var(--app-cyan);
    background: conic-gradient(var(--app-cyan) var(--ring, 80%), rgba(169, 180, 196, 0.18) 0);
    font-size: 7px;
    font-weight: 950;
}

.ring:before {
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #0e1724;
    content: "";
}

.ring span { position: relative; }

.meal-list { margin-top: 16px; }

.meal-group-block + .meal-group-block {
    border-top: 1px solid rgba(93, 236, 255, 0.12);
}

.macro-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
}

.macro-progress__amount {
    min-width: max-content;
    font-size: 9.75px;
    font-weight: 900;
}

.macro-progress__meta .row-title { font-size: 9.75px; }

.meal-list .meal-line {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    min-height: 56px;
    padding: 11px 12px;
}

.meal-group {
    width: 100%;
    border: 0;
    color: inherit;
    background: transparent;
    font-family: inherit;
    text-align: left;
}

.meal-group.is-open {
    background: rgba(93, 236, 255, 0.035);
}

.meal-list .meal-line > div {
    min-width: 0;
}

.meal-list .meal-line > i {
    justify-self: end;
}

.meal-kcal {
    color: #fff;
    font-size: 10.75px;
    font-weight: 900;
    white-space: nowrap;
}

.meal-entry-list {
    display: grid;
    gap: 8px;
    padding: 8px 12px 13px 48px;
    border-top: 1px solid rgba(93, 236, 255, 0.1);
}

.meal-entry {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-family: inherit;
    text-align: left;
}

.meal-entry .row-title,
.meal-entry .row-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-edit-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--app-cyan);
    opacity: 0.78;
}

.meal-edit-icon i {
    font-size: 14px;
}

.meal-copy-icon {
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(93, 236, 255, 0.08);
    cursor: pointer;
}

.meal-copy-icon:hover {
    opacity: 1;
    background: rgba(62, 240, 176, 0.12);
}

.meal-entry-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.meal-entry-main > div {
    min-width: 0;
}

.meal-entry-empty {
    padding: 3px 0;
    font-size: 10.25px;
}

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

.meal-entry-switch {
    display: grid;
    grid-template-columns: 0.65fr 0.6fr 0.4fr 0.5fr; /* repeat(4, minmax(0, 1fr)); */
    gap: 4px;
    margin: 2px 0 12px;
    padding: 4px 0px 4px 4px;
    border: 1px solid rgba(93, 236, 255, 0.2);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(5, 19, 31, 0.96), rgba(8, 33, 41, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(0, 0, 0, 0.2);
}

.meal-entry-switch__item {
    display: inline-flex;
    min-width: 0;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(169, 180, 196, 0.84);
    background: transparent;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-entry-switch__item i {
    flex: 0 0 auto;
    font-size: 13px;
}

.meal-entry-switch__item.is-active {
    border-color: rgba(93, 236, 255, 0.58);
    color: #dffbff;
    background: linear-gradient(135deg, rgba(12, 68, 58, 0.98), rgba(7, 44, 59, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(62, 240, 176, 0.18),
        0 8px 20px rgba(62, 240, 176, 0.12),
        0 0 18px rgba(93, 236, 255, 0.12);
}

.meal-entry-panel {
    display: grid;
    gap: 0;
}

.meal-form-card .field-label {
    margin: 0 0 -4px;
}

.meal-form-card .app-input {
    font-size: 12px;
}

.meal-title-grid {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.meal-title-grid > div {
    min-width: 0;
}

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

.meal-macro-grid label {
    min-width: 0;
    color: var(--app-muted);
    font-size: 10.5px;
    font-weight: 900;
}

.meal-macro-grid label span {
    display: block;
    margin-bottom: 5px;
}

.meal-extra-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.meal-extra-head .outline-pill {
    min-height: 32px;
    padding: 0 12px;
    font-size: 10px;
}

.meal-extra-list {
    display: grid;
    gap: 8px;
}

.meal-extra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px 32px;
    gap: 6px;
    align-items: center;
}

.meal-extra-row .app-input {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 11px;
}

.meal-extra-row .circle-action {
    width: 32px;
    height: 32px;
}

.meal-entry-panel > .primary-pill,
.meal-entry-panel > .danger-pill,
.diet-settings-view > .primary-pill {
    width: 100%;
    margin-top: 16px;
}

.meal-entry-panel > .danger-pill {
    margin-top: 1.5rem;
}

.meal-entry-list--recent {
    gap: 12px;
    padding: 12px;
}

.meal-entry--recent {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 44px;
}

.meal-mode-empty {
    display: grid;
    min-height: 128px;
    place-items: center;
    gap: 10px;
    text-align: center;
}

.meal-mode-empty i {
    color: var(--app-cyan);
    font-size: 30px;
}

.meal-mode-empty p {
    max-width: 240px;
    margin: 0;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
}

.reminder-section {
    margin-bottom: 19px;
}

.reminder-list .reminder-line {
    min-height: 55px;
    padding: 11px 12px;
}

.toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(93, 236, 255, 0.2);
}

.toggle:after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--app-muted);
    transition: transform 160ms ease, background 160ms ease;
    content: "";
}

.toggle.is-on {
    background: var(--app-cyan);
}

.toggle.is-on:after {
    background: #fff;
    transform: translateX(16px);
}

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

.setting-chip {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 58px;
    align-content: center;
    align-items: center;
    gap: 4px 6px;
    padding: 9px 8px;
    border: 1px solid rgba(93, 236, 255, 0.16);
    border-radius: 12px;
    color: var(--app-muted);
    background: rgba(255, 255, 255, 0.02);
    font-size: 9.75px;
    font-weight: 900;
    line-height: 1.12;
}

.setting-chip i {
    font-size: 14px;
}

.setting-chip span {
    min-width: 0;
}

.setting-chip strong {
    display: block;
    grid-column: 1 / -1;
    margin-top: 2px;
    color: var(--app-cyan);
    font-size: 11.5px;
}

.water-chart {
    min-height: 210px;
    padding: 18px 0 14px;
}

.water-chart__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
}

.target-badge {
    align-self: flex-start;
    padding: 7px 12px;
    border: 1px solid rgba(77, 156, 255, 0.3);
    border-radius: 999px;
    color: #4d9cff;
    background: rgba(77, 156, 255, 0.08);
    font-weight: 900;
}

.water-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 12px;
    padding: 0 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.water-chart-scroll::-webkit-scrollbar { display: none; }

.water-chart-scroll .line-chart {
    display: block;
    width: auto;
    min-width: 100%;
    height: 148px;
    margin: 0;
}

.goal-line {
    stroke: rgba(77, 156, 255, 0.42);
    stroke-width: 2;
    stroke-dasharray: 6 10;
}

.today-marker { fill: rgba(77, 156, 255, 0.13); }

.chart-day-hit {
    cursor: pointer;
    fill: rgba(255, 255, 255, 0.001);
}

.selected-marker { fill: rgba(255, 255, 255, 0.06); }

.water-chart .selected-marker { fill: rgba(77, 156, 255, 0.18); }

.water-line {
    fill: none;
    stroke: #4d9cff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.water-points circle {
    fill: #0e1724;
    stroke: #4d9cff;
    stroke-width: 2.5;
}

.water-points circle.is-current {
    fill: #4d9cff;
    stroke: rgba(255, 255, 255, 0.35);
}

.water-points circle.is-selected {
    fill: #4d9cff;
    stroke: rgba(255, 255, 255, 0.58);
}

.water-labels,
.today-text {
    fill: rgba(169, 180, 196, 0.64);
    font-size: 8px;
    font-weight: 800;
    text-anchor: middle;
}

.today-value {
    fill: #4d9cff;
    font-size: 9px;
    font-weight: 900;
    text-anchor: middle;
}

.history-list {
    margin-bottom:6rem;
}

.history-list .history-line {
    grid-template-columns: auto 1fr auto auto;
    min-height: 54px;
    padding: 0 12px;
}

.history-list .history-empty {
    display: flex;
    min-height: 48px;
}

.history-time {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.history-amount {
    color: var(--app-cyan);
    font-size: 11px;
    font-weight: 950;
}

.history-list .history-remove {
    width: 28px;
    height: 28px;
    border-width: 1px;
    color: #4d9cff;
    background: rgba(77, 156, 255, 0.05);
}

.history-list .history-remove i { font-size: 15px; }

.challenge-chart .target-badge {
    border-color: rgba(255, 165, 41, 0.36);
    color: var(--app-orange);
    background: rgba(255, 165, 41, 0.08);
}

.challenge-chart .goal-line {
    stroke: rgba(255, 165, 41, 0.46);
}

.challenge-chart .today-marker { fill: rgba(255, 165, 41, 0.13); }

.challenge-chart .selected-marker { fill: rgba(255, 165, 41, 0.18); }

.challenge-line {
    fill: none;
    stroke: var(--app-orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.challenge-points circle {
    fill: #0e1724;
    stroke: var(--app-orange);
    stroke-width: 2.5;
}

.challenge-points circle.is-current {
    fill: var(--app-orange);
    stroke: rgba(255, 255, 255, 0.35);
}

.challenge-points circle.is-selected {
    fill: var(--app-orange);
    stroke: rgba(255, 255, 255, 0.58);
}

.challenge-chart .today-value {
    fill: var(--app-orange);
}

.challenge-history .history-amount {
    color: var(--app-orange);
}

.challenge-history .history-remove {
    color: var(--app-orange);
    background: rgba(255, 165, 41, 0.06);
}

.challenge-settings-card {
    display: grid;
    gap: 12px;
    margin-bottom: 1rem;
}

.challenge-settings-card .card-heading i {
    color: var(--app-orange);
}

.challenge-step {
    color: #241000;
    background: var(--app-orange);
}

.challenge-preset-row .outline-pill {
    border-color: rgba(255, 165, 41, 0.56);
    color: var(--app-orange);
}

.challenge-option-list {
    display: grid;
    gap: 10px;
}

.challenge-option {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid rgba(169, 180, 196, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
}

.challenge-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.challenge-option__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: var(--app-orange);
    background: rgba(255, 165, 41, 0.1);
}

.challenge-option__icon i { font-size: 18px; }

.challenge-option strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.challenge-option small {
    display: block;
    margin-top: 3px;
    color: rgba(169, 180, 196, 0.72);
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.25;
}

.challenge-option.is-active {
    border-color: rgba(255, 165, 41, 0.64);
    background: rgba(255, 165, 41, 0.08);
}

.challenge-save {
    background: linear-gradient(135deg, var(--app-orange), #ffd166);
}

.water-settings-card {
    display: grid;
    gap: 12px;
    margin-bottom: 1rem;
}

.water-increment-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
}

.water-step {
    width: 36px;
    height: 36px;
}

.water-step i { font-size: 16px; }

.water-preset-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.water-preset-row .outline-pill {
    min-height: 38px;
    padding: 0 8px;
    font-size: 10px;
}

.weight-chart .target-badge {
    border-color: rgba(42, 224, 155, 0.34);
    color: var(--app-green);
    background: rgba(42, 224, 155, 0.08);
}

.weight-chart-badges {
    display: grid;
    justify-items: end;
    gap: 7px;
    max-width: 54%;
}

.weight-chart-badges .target-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weight-chart .today-marker { fill: rgba(42, 224, 155, 0.12); }

.weight-chart .selected-marker { fill: rgba(42, 224, 155, 0.17); }

.weight-grid-line {
    stroke: rgba(169, 180, 196, 0.18);
    stroke-width: 2;
}

.weight-line {
    fill: none;
    stroke: var(--app-green);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.weight-points circle {
    fill: #0e1724;
    stroke: var(--app-green);
    stroke-width: 2.5;
}

.weight-points circle.is-current {
    fill: var(--app-green);
    stroke: rgba(255, 255, 255, 0.35);
}

.weight-points circle.is-selected {
    fill: var(--app-green);
    stroke: rgba(255, 255, 255, 0.58);
}

.weight-chart .today-value { fill: var(--app-green); }

.weight-empty-text {
    fill: rgba(169, 180, 196, 0.72);
    font-size: 11px;
    font-weight: 850;
    text-anchor: middle;
}

.weight-details {
    display: grid;
    gap: 0;
}

.weight-detail-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 42px;
    align-items: center;
    border-bottom: 1px solid rgba(169, 180, 196, 0.1);
}

.weight-detail-line:last-child { border-bottom: 0; }

.weight-detail-line span {
    min-width: 0;
    color: rgba(235, 241, 248, 0.86);
    font-size: 12px;
    font-weight: 800;
}

.weight-detail-line strong {
    color: var(--app-green);
    font-size: 12px;
    font-weight: 950;
}

.weight-history .history-line {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 9px;
}

.weight-history .history-time {
    display: grid;
    gap: 2px;
}

.weight-history .history-time small {
    color: rgba(169, 180, 196, 0.68);
    font-size: 9.5px;
    font-weight: 800;
}

.weight-history .history-amount { color: var(--app-green); }

.weight-history .history-remove {
    color: var(--app-green);
    background: rgba(42, 224, 155, 0.06);
}

.weight-chart-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid rgba(42, 224, 155, 0.24);
    border-radius: 999px;
    color: rgba(42, 224, 155, 0.92);
    background: rgba(42, 224, 155, 0.06);
    font-size: 9.5px;
    font-weight: 900;
    white-space: nowrap;
}

.weight-entry-card,
.weight-extra-card,
.weight-settings-card {
    display: grid;
    gap: 12px;
    margin-bottom: 1rem;
}

.weight-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.weight-settings-field {
    min-width: 0;
}

.weight-settings-field .field-label {
    margin-top: 0;
}

.weight-goal-preview {
    display: grid;
    gap: 5px;
    min-height: 72px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(42, 224, 155, 0.18);
    border-radius: 8px;
    background: rgba(42, 224, 155, 0.06);
}

.weight-goal-preview span {
    color: var(--app-green);
    font-size: 11px;
    font-weight: 950;
}

.weight-goal-preview strong {
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.weight-goal-preview small {
    color: rgba(169, 180, 196, 0.78);
    font-size: 10.5px;
    font-weight: 800;
}

.weight-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.weight-settings-actions .outline-pill {
    min-height: 42px;
    padding: 0 10px;
    white-space: normal;
}

.weight-main-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.weight-main-input span {
    color: var(--app-green);
    font-size: 15px;
    font-weight: 950;
}

.weight-extra-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.weight-extra-head .card-heading {
    margin-bottom: 0;
}

.weight-extra-head .outline-pill {
    min-height: 42px;
    max-width: 150px;
    white-space: normal;
}

.weight-extra-head .outline-pill span {
    overflow: visible;
    line-height: 1.12;
    text-overflow: clip;
    white-space: normal;
}

.weight-extra-card .card-heading i {
    color: var(--app-green);
}

.weight-extra-panel {
    display: none;
    gap: 12px;
}

.weight-extra-card.is-open .weight-extra-panel {
    display: grid;
}

.weight-featured-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.weight-preset-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.weight-preset-button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 56px;
    padding: 9px;
    border: 1px solid rgba(169, 180, 196, 0.16);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
}

.weight-preset-button.is-featured {
    border-color: rgba(42, 224, 155, 0.36);
    background: rgba(42, 224, 155, 0.06);
}

.weight-preset-button.is-added {
    opacity: 0.62;
}

.weight-preset-button__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--app-green);
    background: rgba(42, 224, 155, 0.1);
}

.weight-preset-button__icon i { font-size: 17px; }

.weight-preset-button__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.weight-preset-button strong,
.weight-preset-button small {
    min-width: 0;
    overflow: visible;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
}

.weight-preset-button strong {
    font-size: 11px;
    font-weight: 950;
}

.weight-preset-button small {
    color: rgba(169, 180, 196, 0.74);
    font-size: 9.5px;
    font-weight: 800;
}

.weight-extra-list {
    display: grid;
    gap: 9px;
}

.weight-extra-row {
    display: grid;
    grid-template-columns: minmax(98px, 1fr) minmax(76px, 0.8fr) minmax(42px, auto) 30px;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 8px;
    border: 1px solid rgba(169, 180, 196, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.weight-extra-label {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.weight-extra-label strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weight-extra-label small,
.weight-unit {
    color: rgba(169, 180, 196, 0.74);
    font-size: 10px;
    font-weight: 850;
}

.weight-extra-row .app-input {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 12px;
}

.weight-unit-input {
    max-width: 58px;
}

.weight-remove-field {
    width: 30px;
    height: 30px;
    color: var(--app-green);
    background: rgba(42, 224, 155, 0.06);
}

.weight-custom-add,
.weight-save {
    width: 100%;
}

@media (max-width: 420px) {
    .weight-chart-badges {
        max-width: 50%;
    }

    .weight-settings-grid,
    .weight-settings-actions { grid-template-columns: 1fr; }
}

.fab {
    position: fixed;
    right: max(22px, calc((100vw - var(--app-page-max)) / 2 + 22px));
    bottom: calc(6rem + env(safe-area-inset-bottom));
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #031116;
    background: var(--app-blue);
    box-shadow: 0 20px 44px rgba(77, 156, 255, 0.28);
}

.fab i { font-size: 30px; }

.placeholder {
    min-height: 320px;
    display: grid;
    align-content: center;
    gap: 14px;
    text-align: center;
}

.placeholder i {
    color: var(--app-cyan);
    font-size: 42px;
}

.auth-view,
.profile-view {
    min-height: calc(100vh - var(--app-bottom-safe));
}

.auth-view {
    min-height: 100svh;
    padding-bottom: 28px;
}

.auth-shell {
    display: grid;
    gap: 0;
    padding: 1rem;
}

.auth-shell h1 {
    margin: 6px 0 8px;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: 950;
    line-height: 1.08;
}

.auth-shell > .muted {
    margin: 0 0 22px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;
}

.auth-shell .account-label {
    margin: 13px 0 7px;
    color: rgba(235, 241, 247, 0.82);
    font-size: 12px;
    font-weight: 900;
}

.account-input {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid rgba(105, 114, 154, 0.35);
    border-radius: 13px;
    background: #151b2a;
}

.account-input:focus-within {
    border-color: rgba(93, 236, 255, 0.66);
    box-shadow: 0 0 0 4px rgba(73, 73, 150, 0.22);
}

.account-input i {
    color: rgba(169, 180, 196, 0.72);
    font-size: 18px;
}

.account-input .app-input {
    width: 100%;
    min-height: 50px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 13.5px;
    font-weight: 800;
    outline: 0;
}

.account-input .app-input::placeholder {
    color: rgba(169, 180, 196, 0.58);
}

.language-input { text-align: center; }

select.js-language-preference {
    background-color: transparent !important;
    border: 0px solid transparent !important;
    box-shadow: none !important;
    color: #999999 !important;
    outline: 0px !important;
    font-size:12px;
}

select.js-language-preference option { color: #999999 !important; }

.account-eye {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    color: rgba(169, 180, 196, 0.75);
    background: transparent;
}

.account-helper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}

.account-check {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 0;
    color: rgba(169, 180, 196, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.account-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-check span {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(169, 180, 196, 0.36);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.02);
}

.account-check input:checked + span {
    border-color: var(--app-cyan);
    background: var(--app-cyan);
    box-shadow: inset 0 0 0 4px #151b2a;
}

.account-check b {
    min-width: 0;
    font-weight: 700;
}

.account-text-link {
    border: 0;
    color: var(--app-cyan);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
}

.account-main-action {
    width: 100%;
    margin-top: 22px;
    box-shadow: 0 16px 32px rgba(32, 203, 224, 0.18);
}

.account-main-action:disabled {
    color: rgba(255, 255, 255, 0.46);
    background: rgba(56, 142, 226, 0.58);
    box-shadow: none;
}

.account-main-action + .account-main-action {
    margin-top: 2px;
}

.account-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    color: rgba(169, 180, 196, 0.62);
    font-size: 11.5px;
    font-weight: 650;
}

.account-divider span {
    height: 1px;
    background: rgba(169, 180, 196, 0.24);
}

.account-google {
    width: 100%;
    gap: 1rem;
    min-height: 48px;
    padding: 0 16px;
    border-color: rgba(105, 114, 154, 0.35);
    color: rgba(235, 241, 247, 0.58);
    background: #151b2a;
}

.google-mark {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
    background: linear-gradient(90deg, #4285f4, #34a853, #fbbc04, #ea4335);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.account-note {
    margin: 26px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
}

.account-note .card-link {
    color: var(--app-cyan);
    font-size: 12px;
    font-weight: 950;
}

.signup-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 18px;
}

.signup-progress span {
    height: 4px;
    border-radius: 999px;
    background: rgba(169, 180, 196, 0.2);
}

.signup-progress .is-active {
    background: var(--app-cyan);
}

.password-rules {
    display: grid;
    gap: 7px;
    margin: 10px 0 13px;
}

.password-rule {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #ff5360;
    font-size: 11.5px;
    font-weight: 750;
}

.password-rule i {
    font-size: 20px;
}

.password-rule.is-valid {
    color: var(--app-green);
}

.account-terms {
    margin-top: 15px;
    font-size: 12px;
}

.account-terms .card-link {
    display: inline;
    padding: 0;
    color: var(--app-cyan);
    font: inherit;
    font-weight: 950;
}

.auth-confirm-shell {
    align-content: center;
    min-height: calc(100svh - 120px);
    text-align: center;
}

.confirm-loader {
    display: grid;
    width: 84px;
    height: 84px;
    margin: 18px auto 22px;
    place-items: center;
    border-radius: 50%;
    background: rgba(93, 236, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(93, 236, 255, 0.18);
}

.confirm-loader span {
    width: 58px;
    height: 58px;
    border: 4px solid rgba(93, 236, 255, 0.18);
    border-top-color: var(--app-cyan);
    border-radius: 50%;
    animation: app-spin 900ms linear infinite;
}

.auth-confirm-shell .muted b {
    color: #fff;
}

.confirm-card {
    margin: 18px 0 4px;
    padding: 15px;
    border: 1px solid rgba(93, 236, 255, 0.18);
    border-radius: 13px;
    background: rgba(21, 27, 42, 0.82);
}

.confirm-card p {
    margin: 0 0 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.confirm-card small {
    color: rgba(169, 180, 196, 0.76);
    font-size: 11.5px;
    font-weight: 700;
}

.confirm-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.confirm-actions .account-main-action {
    margin-top: 0;
}

.account-resend {
    width: 100%;
    min-height: 46px;
    border-color: rgba(93, 236, 255, 0.34);
    background: rgba(93, 236, 255, 0.05);
    font-weight: 950;
}

.account-resend:disabled {
    color: rgba(169, 180, 196, 0.58);
    border-color: rgba(169, 180, 196, 0.18);
    background: rgba(169, 180, 196, 0.04);
}

.confirm-secondary {
    margin: 14px auto 0;
}

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

.profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.profile-head h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.profile-head p {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 850;
}

.avatar-editor {
    position: relative;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.avatar-editor img {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(93, 236, 255, 0.24);
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #e7e8eb;
    box-sizing: border-box;
    overflow: hidden;
}

.avatar-editor.has-photo img {
    border: 0;
}

.avatar-file-field {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    overflow: hidden;
    transform: translate(-9999px, -9999px);
}

.avatar-file-field input {
    width: 1px;
    height: 1px;
}

body > input[type="file"]:not(.js-profile-photo) {
    position: fixed;
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    overflow: hidden;
    transform: translate(-9999px, -9999px);
}

.avatar-camera {
    position: absolute;
    right: -6px;
    bottom: -4px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid #071018;
    border-radius: 50%;
    color: #031116;
    background: var(--app-cyan);
}

.avatar-camera i {
    font-size: 16px;
}

.avatar-crop-panel {
    display: grid;
    gap: 16px;
}

.avatar-crop-frame {
    position: relative;
    width: min(74vw, 310px);
    aspect-ratio: 1 / 1;
    margin: 4px auto 0;
    overflow: hidden;
    border: 2px solid rgba(93, 236, 255, 0.54);
    border-radius: 50%;
    background: #070d14;
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08);
    touch-action: none;
    cursor: grab;
}

.avatar-crop-frame:active { cursor: grabbing; }

.avatar-crop-frame img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.avatar-crop-zoom {
    display: grid;
    gap: 7px;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 850;
}

.avatar-crop-zoom input {
    width: 100%;
    accent-color: var(--app-cyan);
}

.avatar-crop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.profile-main-view {
    display: grid;
    gap: 18px;
    min-height: calc(100vh - var(--app-bottom-safe));
}

.profile-main-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 2px;
}

.profile-main-logo {
    display: block;
    width: auto;
    height: 31px;
}

.profile-main-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.profile-main-actions .icon-button {
    position: relative;
    width: 36px;
    height: 36px;
    color: rgba(224, 230, 241, 0.82);
}

.profile-main-actions .icon-button i {
    font-size: 24px;
}

.profile-main-actions .js-test-notification:after {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-cyan);
    box-shadow: 0 0 10px rgba(93, 236, 255, 0.68);
    content: "";
}

.profile-main-hero {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.profile-main-avatar {
    position: relative;
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    border: 2px solid var(--app-cyan);
    border-radius: 50%;
    background: rgba(93, 236, 255, 0.05);
    box-shadow:
        0 0 24px rgba(93, 236, 255, 0.3),
        inset 0 0 0 5px #061115;
}

.profile-main-avatar img {
    display: block;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: #111d2d;
}

.profile-main-info {
    min-width: 0;
}

.profile-main-info h1 {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: #f8fbff;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.08;
}

.profile-main-info h1 > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-main-verified {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--app-cyan);
    filter: drop-shadow(0 0 8px rgba(93, 236, 255, 0.32));
}

.profile-main-verified i {
    font-size: 18px;
}

.profile-main-info p {
    margin: 6px 0 26px;
    overflow: hidden;
    color: rgba(224, 230, 241, 0.72);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-main-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0;
}

.profile-main-stat {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 5px;
    text-align: center;
}

.profile-main-stat + .profile-main-stat:before {
    position: absolute;
    top: 4px;
    bottom: 2px;
    left: 0;
    width: 1px;
    background: rgba(93, 236, 255, 0.34);
    content: "";
}

.profile-main-stat b {
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-main-stat small {
    overflow: hidden;
    color: rgba(224, 230, 241, 0.72);
    font-size: 11.5px;
    font-weight: 720;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-main-buttons {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 14px;
}

.profile-main-edit,
.profile-main-share {
    display: inline-flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 14px;
    overflow: hidden;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-main-edit {
    border: 1px solid rgba(93, 236, 255, 0.68);
    color: #031116;
    background: linear-gradient(135deg, #20dfff, #11a7d1);
    box-shadow: 0 14px 28px rgba(17, 167, 209, 0.18);
}

.profile-main-share {
    border: 1px solid rgba(93, 236, 255, 0.36);
    color: rgba(224, 230, 241, 0.76);
    background: rgba(3, 12, 18, 0.18);
}

.profile-main-share span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-main-share i {
    flex: 0 0 auto;
    color: rgba(224, 230, 241, 0.88);
    font-size: 21px;
}

.profile-main-tabs.meal-entry-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 5px 0 2px;
}

.profile-main-tabs .meal-entry-switch__item {
    min-height: 39px;
    font-size: 13px;
}

.profile-main-panel {
    display: grid;
    min-height: 330px;
}

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

.profile-shot-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 0.72 / 1;
    border: 1px solid rgba(93, 236, 255, 0.34);
    border-radius: 8px;
    background: #07131d;
    box-shadow: inset 0 0 18px rgba(93, 236, 255, 0.04);
}

.profile-shot-card > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.profile-shot-card__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 8, 13, 0) 44%, rgba(3, 8, 13, 0.68) 76%, rgba(3, 8, 13, 0.95) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 38%, rgba(0, 0, 0, 0.2));
}

.profile-shot-card__body {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 1;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.profile-shot-card__body h2 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.profile-shot-card__body p {
    margin: 0;
    color: var(--app-cyan);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.05;
}

.profile-shot-card__meta {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-top: 10px;
    color: rgba(224, 230, 241, 0.72);
    font-size: 10.5px;
    font-weight: 700;
}

.profile-shot-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.profile-shot-card__meta i {
    color: rgba(224, 230, 241, 0.86);
    font-size: 17px;
}

.profile-shot-card__meta button {
    justify-self: end;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    color: rgba(224, 230, 241, 0.72);
    background: transparent;
}

.profile-main-empty {
    display: grid;
    min-height: 260px;
    align-content: center;
    justify-items: center;
    gap: 10px;
    color: rgba(224, 230, 241, 0.72);
    text-align: center;
}

.profile-main-empty i {
    color: var(--app-cyan);
    font-size: 36px;
}

.profile-main-empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 780;
}

.account-form {
    display: grid;
    gap: 2px;
}

.account-form .field-label {
    margin-top: 12px;
}

.account-options {
    display: grid;
    gap: 0;
    margin-top: 12px;
    padding: 0;
}

.account-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 62px;
    padding: 12px;
    border: 0;
    border-bottom: 1px solid rgba(93, 236, 255, 0.12);
    color: inherit;
    background: transparent;
    text-align: left;
}

.account-row:last-child {
    border-bottom: 0;
}

.account-row > i {
    color: var(--app-cyan);
    font-size: 21px;
}

.account-row span {
    min-width: 0;
}

.account-row b,
.account-row small {
    display: block;
}

.account-row b {
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.account-row small {
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 10.25px;
    font-weight: 750;
    line-height: 1.2;
}

.account-row:disabled {
    opacity: 0.64;
}

.account-row--danger > i,
.account-row--danger b {
    color: #ff6b80;
}

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.58);
}

.app-modal.is-open { display: flex; }

.app-modal__panel {
    width: min(100%, 480px);
    padding: 24px;
    border: 1px solid var(--app-line-strong);
    border-radius: 24px;
    background: #0e1724;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54);
}

.app-modal__close {
    float: right;
    margin-top: -8px;
    margin-right: -8px;
}

.app-modal h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
}

.app-confirm {
    align-items: center;
    padding: 20px;
}

.app-confirm__panel {
    border-color: rgba(93, 236, 255, 0.28);
}

.app-confirm__panel p {
    margin: 0;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
}

.app-confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.app-confirm__button {
    min-height: 46px;
    border: 1px solid rgba(93, 236, 255, 0.24);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 950;
}

.app-confirm__accept {
    color: #041217;
    border-color: transparent;
    background: var(--app-cyan);
}

.app-confirm--danger .app-confirm__accept {
    color: #fff;
    background: #ff3f62;
}

.diet-ai-source-modal {
    align-items: center;
    padding: 20px;
}

.diet-ai-source-panel {
    border-color: rgba(93, 236, 255, 0.28);
}

.diet-ai-source-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.diet-ai-source-actions .primary-pill,
.diet-ai-source-actions .outline-pill {
    width: 100%;
    min-height: 48px;
}

.diet-ai-source-description-button {
    color: #a855f7;
    border-color: #a855f7;
}

.diet-ai-description-modal {
    align-items: center;
    padding: 20px;
}

.diet-ai-description-panel {
    border-color: rgba(93, 236, 255, 0.28);
}

.diet-ai-description-input {
    width: 100%;
    min-height: 124px;
    padding: 12px 14px;
    line-height: 1.35;
    resize: vertical;
    white-space: normal;
}

.diet-ai-description-panel .primary-pill {
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
}

.field-label {
    display: block;
    margin: 14px 0 6px;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 800;
}

.app-input {
    min-height: 48px;
    border-color: rgba(93, 236, 255, 0.2);
    color: #fff;
    background: #080d14;
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0 10px;
}

.auth-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-status[data-tone="success"] { color: var(--app-green); }

.auth-status[data-tone="warning"] { color: var(--app-yellow); }

.app-toast {
    position: fixed;
    left: 50%;
    bottom: calc(104px + env(safe-area-inset-bottom));
    z-index: 1300;
    width: min(calc(100vw - 32px), 460px);
    padding: 14px 16px;
    border: 1px solid rgba(93, 236, 255, 0.26);
    border-radius: 16px;
    color: #fff;
    background: rgba(14, 23, 36, 0.96);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.app-toast[data-tone="success"] { border-color: rgba(65, 241, 174, 0.38); }

.app-toast[data-tone="warning"] { border-color: rgba(255, 205, 92, 0.42); }

.social-view {
    display: grid;
    gap: 14px;
}

.social-view .app-topbar {
    margin-bottom: 12px;
}

.social-story-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70px;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: -16px -14px 2px;
    padding: 16px 14px 10px;
    scrollbar-width: none;
}

.social-story-row::-webkit-scrollbar { display: none; }

.social-story {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: #e9edf3;
    background: transparent;
    text-align: center;
}

.social-story__avatar-wrap {
    position: relative;
    width: 62px;
    height: 62px;
}

.social-avatar {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(from var(--ring-start, 180deg), var(--ring-a, var(--app-cyan)) 0 28%, var(--ring-b, var(--app-orange)) 30% 57%, var(--ring-c, var(--app-green)) 59% 78%, rgba(93, 236, 255, 0.82) 80% 100%);
    box-shadow: 0 0 18px rgba(93, 236, 255, 0.22);
}

.social-avatar:before {
    position: absolute;
    inset: 2px;
    z-index: 1;
    border-radius: 50%;
    background: #061115;
    content: "";
}

.social-avatar:after {
    position: absolute;
    inset: -4px;
    z-index: 0;
    border-radius: 50%;
    background:
        conic-gradient(from var(--ring-start, 180deg), var(--ring-a, var(--app-cyan)) 0 28%, var(--ring-b, var(--app-orange)) 30% 57%, var(--ring-c, var(--app-green)) 59% 78%, rgba(93, 236, 255, 0.82) 80% 100%);
    filter: blur(5px);
    opacity: 0.42;
    content: "";
}

.social-avatar img {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: #0e1724;
}

.social-ring--one {
    --ring-start: 205deg;
    --ring-a: #19e7ff;
    --ring-b: #64f0ff;
    --ring-c: #1686ff;
}

.social-ring--two {
    --ring-start: 302deg;
    --ring-a: #ffb02e;
    --ring-b: #18e7ff;
    --ring-c: #32efad;
}

.social-ring--three {
    --ring-start: 18deg;
    --ring-a: #16e8ff;
    --ring-b: #ffb42d;
    --ring-c: #34efae;
}

.social-ring--four {
    --ring-start: 82deg;
    --ring-a: #ffad24;
    --ring-b: #20e3ff;
    --ring-c: #22e8a3;
}

.social-ring--five {
    --ring-start: 148deg;
    --ring-a: #23e7ff;
    --ring-b: #23efaa;
    --ring-c: #ffb02d;
}

.social-ring--six {
    --ring-start: 250deg;
    --ring-a: #ffb329;
    --ring-b: #20e5ff;
    --ring-c: #22edaa;
}

.social-story__avatar {
    width: 62px;
    height: 62px;
}

.social-story__avatar img {
    width: calc(100% - 7px);
    height: calc(100% - 7px);
}

.social-story__add {
    position: absolute;
    right: -1px;
    bottom: 1px;
    z-index: 2;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid #061115;
    border-radius: 50%;
    color: #031116;
    background: #19e7ff;
    box-shadow: 0 0 12px rgba(25, 231, 255, 0.52);
}

.social-story__add i { font-size: 16px; }

.social-story__label {
    max-width: 100%;
    overflow: hidden;
    color: rgba(244, 248, 252, 0.86);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-panel {
    position: relative;
    overflow: hidden;
    padding: 15px 16px;
    border: 1px solid rgba(25, 216, 255, 0.36);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% -20%, rgba(25, 216, 255, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(8, 25, 38, 0.96), rgba(5, 12, 20, 0.98));
    box-shadow:
        inset 0 0 30px rgba(25, 216, 255, 0.05),
        0 16px 34px rgba(0, 0, 0, 0.28);
}

.social-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.social-panel__head h2 {
    margin: 0;
    color: #f4f7fb;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.05;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0;
    border: 0;
    color: #16e6ff;
    background: transparent;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.social-link i { font-size: 18px; }

.social-place-list {
    display: grid;
}

.social-place {
    --tone: var(--app-green);
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(104px, 0.72fr);
    align-items: center;
    gap: 0.25rem;
    min-height: 70px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(169, 180, 196, 0.15);
}

.social-place:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
}

.social-place--orange { --tone: #ffa529; }

.social-place--red { --tone: #ff524d; }

.social-place--green { --tone: #24eba6; }

.social-place__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    color: var(--tone);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tone) 32%, transparent), rgba(17, 30, 46, 0.94) 70%);
    border: 1px solid color-mix(in srgb, var(--tone) 42%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 24%, transparent);
}

.social-place__icon i { font-size: 26px; }

.social-place__main {
    min-width: 0;
}

.social-place__main h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    overflow: hidden;
    color: #f7f9fb;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-place__star {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: #ffb32d;
    clip-path: polygon(50% 4%, 61% 36%, 95% 36%, 68% 56%, 78% 91%, 50% 70%, 22% 91%, 32% 56%, 5% 36%, 39% 36%);
    filter: drop-shadow(0 0 7px rgba(255, 179, 45, 0.5));
}

.social-place__star i { font-size: 17px; }

.social-place__main p {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: rgba(222, 229, 238, 0.78);
    font-size: 11.5px;
    font-weight: 720;
}

.social-place__main p i {
    color: rgba(222, 229, 238, 0.9);
    font-size: 14px;
}

.social-place__state {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 15px;
    min-width: 0;
}

.social-place__state strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--tone);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-place__bar {
    display: block;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(83, 104, 129, 0.42);
}

.social-place__bar:before {
    display: block;
    width: var(--value, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--tone);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tone) 48%, transparent);
    content: "";
}

.social-activity-list {
    position: relative;
    display: grid;
}

.social-activity-list:before {
    position: absolute;
    top: 0;
    bottom: 26px;
    left: 46px;
    width: 1px;
    background: rgba(198, 209, 224, 0.72);
    content: "";
}

.social-activity {
    position: relative;
    display: grid;
    grid-template-columns: 30px 34px 46px minmax(0, 1fr) 20px;
    align-items: center;
    min-height: 58px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(169, 180, 196, 0.13);
}

.social-activity:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.social-activity time {
    color: rgba(224, 230, 239, 0.78);
    font-size: 10px;
    font-weight: 700;
}

.social-activity__pin {
    position: relative;
    z-index: 1;
    justify-self: center;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 2px solid #00dcff;
    border-radius: 50%;
    background: #061621;
    box-shadow: 0 0 11px rgba(0, 220, 255, 0.34);
}

.social-activity__pin:before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00dcff;
    content: "";
}

.social-activity__avatar {
    justify-self: start;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    margin-right: 1.5rem;
}

.social-activity__avatar img {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
}

.social-activity__body {
    min-width: 0;
}

.social-activity__body h3 {
    margin: 0 0 3px;
    overflow: hidden;
    color: #f5f8fb;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-activity__body p {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: rgba(223, 229, 239, 0.78);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.social-activity__body p span,
.social-activity__body p b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-activity__body p span {
    flex: 0 1 auto;
}

.social-activity__body p i {
    flex: 0 0 auto;
    color: rgba(223, 229, 239, 0.88);
    font-size: 13px;
}

.social-activity__body p b {
    flex: 1 1 auto;
    overflow: hidden;
    color: #16e6ff;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-chevron {
    display: grid;
    width: 20px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    color: rgba(223, 229, 239, 0.74);
    background: transparent;
}

.social-chevron i { font-size: 22px; }

.social-panel--pros {
    padding-bottom: 12px;
}

.social-pro-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(106px, 1fr);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -8px;
    padding: 0 8px 1px;
    scrollbar-width: none;
}

.social-pro-list::-webkit-scrollbar { display: none; }

.social-pro {
    position: relative;
    min-height: 166px;
    overflow: hidden;
    border: 1px solid rgba(25, 216, 255, 0.5);
    border-radius: 7px;
    background: #071522;
    box-shadow: inset 0 0 18px rgba(25, 216, 255, 0.06);
}

.social-pro__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.social-pro__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 10, 16, 0.02) 40%, rgba(4, 9, 15, 0.74) 76%, rgba(4, 9, 15, 0.94) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 40%, rgba(0, 0, 0, 0.18));
}

.social-pro__avatar {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.social-pro__avatar img {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
}

.social-pro__body {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    min-width: 0;
    padding-right: 18px;
}

.social-pro__body h3,
.social-pro__body p {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-pro__body h3 {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.12;
}

.social-pro__body p {
    margin-top: 4px;
    color: rgba(235, 240, 247, 0.75);
    font-size: 10px;
    font-weight: 700;
}

.social-play {
    position: absolute;
    right: 6px;
    bottom: 7px;
    z-index: 3;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    padding: 0;
    border: 1.5px solid #16e6ff;
    border-radius: 50%;
    color: #16e6ff;
    background: rgba(6, 17, 21, 0.82);
}

.social-play i {
    margin-left: 1px;
    font-size: 11px;
}

.workout-view,
.workout-session-view {
    display: grid;
    gap: 8px;
}

.workout-view { padding-bottom: 12px; }

.workout-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.workout-topbar .brand {
    margin: 0;
    line-height: 0;
}

.workout-topbar .brand img {
    display: block;
    width: auto;
    height: 34px;
}

.workout-topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.workout-icon-btn,
.workout-avatar,
.workout-session-btn,
.workout-session-avatar {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    color: rgba(230, 236, 246, 0.78);
    background: transparent;
}

.workout-icon-btn i { font-size: 29px; }

.workout-dot {
    position: absolute;
    top: 2px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--app-cyan);
    box-shadow: 0 0 12px color-mix(in srgb, var(--app-cyan) 72%, transparent);
}

.workout-avatar {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 2px solid var(--app-line-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--app-cyan) 6%, transparent);
}

.workout-avatar img,
.workout-session-avatar img,
.workout-coach__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.workout-plan {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto 1px 26px auto;
    align-items: center;
    gap: 5px;
    min-height: 70px;
    padding: 12px 8px;
    border-color: var(--app-line);
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--app-cyan) 10%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 96%, transparent), color-mix(in srgb, var(--app-card) 92%, #05080d));
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--app-cyan) 3%, transparent), 0 14px 32px rgba(0, 0, 0, 0.22);
}

.workout-plan__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: var(--app-cyan);
    background: color-mix(in srgb, var(--app-cyan) 10%, transparent);
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--app-cyan) 8%, transparent);
}

.workout-plan__icon i { font-size: 21px; }

.workout-plan__copy { min-width: 0; }

.workout-plan__copy span,
.workout-session-progress span,
.workout-rest__copy span {
    display: block;
    color: rgba(216, 224, 236, 0.72);
    font-weight: 750;
}

.workout-plan__copy span {
    margin-bottom: 2px;
    font-size: 10.5px;
}

.workout-plan__copy strong {
    display: block;
    overflow: hidden;
    color: #f8fbff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    color: var(--app-cyan);
    background: color-mix(in srgb, var(--app-cyan) 7%, transparent);
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}

.workout-plan__split {
    display: block;
    width: 1px;
    height: 31px;
    background: rgba(169, 180, 196, 0.2);
}

.workout-plan__edit,
.workout-plan__manage {
    min-width: 0;
    border: 0;
    color: var(--app-cyan);
    background: transparent;
    font-weight: 900;
}

.workout-plan__edit {
    display: grid;
    width: 26px;
    height: 36px;
    place-items: center;
    color: #f4f7fb;
}

.workout-plan__edit i { font-size: 20px; }

.workout-plan__manage {
    padding: 0;
    font-size: 10.5px;
    white-space: nowrap;
}

.workout-next {
    position: relative;
    overflow: hidden;
    min-height: 232px;
    padding: 16px 16px 18px;
    border: 1px solid var(--app-line-strong);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-cyan) 22%, transparent), transparent 33%),
        radial-gradient(circle at 74% 8%, color-mix(in srgb, var(--app-cyan) 10%, transparent), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--app-card-soft) 92%, #061115), color-mix(in srgb, var(--app-card) 96%, #05080d) 54%, color-mix(in srgb, var(--app-card-soft) 82%, #061115));
    box-shadow: 0 0 26px color-mix(in srgb, var(--app-cyan) 10%, transparent), inset 0 0 36px color-mix(in srgb, var(--app-cyan) 5%, transparent);
}

.workout-next__body {
    position: relative;
    z-index: 2;
}

.workout-eyebrow {
    margin: 0 0 12px;
    color: var(--app-cyan);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.workout-next h2 {
    max-width: 70%;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.04;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.workout-next__stats {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.5fr) minmax(94px, 1.5fr);
    gap: 5px;
    max-width: 332px;
    margin: 20px 0 16px;
}

.workout-stat {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: rgba(224, 230, 241, 0.78);
}

.workout-stat + .workout-stat {
    border-left: 1px solid rgba(169, 180, 196, 0.23);
    padding-left: 6px;
}

.workout-stat i {
    color: rgba(224, 230, 241, 0.78);
    font-size: 19px;
}

.workout-stat strong,
.workout-stat small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-stat strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 0.95;
}

.workout-stat small {
    color: rgba(224, 230, 241, 0.72);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.1;
}

.workout-focus {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 13px;
    color: rgba(224, 230, 241, 0.78);
    font-size: 11px;
    font-weight: 700;
}

.workout-focus i { font-size: 18px; }

.workout-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 338px;
    margin-bottom: 15px;
}

.workout-tag {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid rgba(169, 180, 196, 0.2);
    border-radius: 999px;
    color: rgba(224, 230, 241, 0.72);
    background: rgba(255, 255, 255, 0.02);
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
}

.workout-next__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid rgba(169, 180, 196, 0.2);
}

.workout-start,
.workout-detail,
.workout-coach-action,
.workout-rest-action,
.workout-finish {
    min-width: 0;
}

.workout-start {
    min-height: 48px;
    font-size: 12px;
}

.workout-detail {
    min-height: 48px;
    font-size: 11px;
}

.workout-start i,
.workout-detail i { font-size: 18px; }

.workout-next__mark {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 1;
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--app-card) 90%, #05080d) 0 42%, color-mix(in srgb, var(--app-cyan) 10%, transparent) 43% 60%, color-mix(in srgb, var(--app-cyan) 5%, transparent) 61% 100%);
    box-shadow: inset 0 0 0 1px var(--app-line), 0 0 0 15px color-mix(in srgb, var(--app-cyan) 5%, transparent), 0 0 0 30px color-mix(in srgb, var(--app-cyan) 3%, transparent);
}

.workout-next__mark span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid var(--app-line-strong);
    border-radius: 50%;
    color: var(--app-cyan);
    background: rgba(5, 12, 20, 0.84);
    box-shadow: inset 0 0 20px color-mix(in srgb, var(--app-cyan) 12%, transparent);
}

.workout-next__mark i { font-size: 28px; }

.workout-coach {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 112px;
    padding: 12px;
    border-color: rgba(169, 180, 196, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 74% 50%, color-mix(in srgb, var(--app-cyan) 8%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 94%, transparent), color-mix(in srgb, var(--app-card) 96%, #05080d));
}

.workout-coach__avatar {
    position: relative;
    display: block;
    width: 62px;
    height: 62px;
    border: 2px solid var(--app-cyan);
    border-radius: 50%;
    box-shadow: 0 0 22px color-mix(in srgb, var(--app-cyan) 16%, transparent);
}

.workout-coach__avatar span,
.workout-session-avatar span {
    position: absolute;
    right: -2px;
    bottom: 4px;
    width: 14px;
    height: 14px;
    border: 2px solid #071018;
    border-radius: 50%;
    background: var(--app-green);
    box-shadow: 0 0 12px color-mix(in srgb, var(--app-green) 64%, transparent);
}

.workout-coach__copy { min-width: 0; }

.workout-coach__copy {
    padding-right: 32px;
}

.workout-coach h2 {
    margin: 0 0 5px;
    color: #f8fbff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.08;
}

.workout-coach p {
    margin: 0 0 10px;
    color: rgba(224, 230, 241, 0.72);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.28;
}

.workout-coach__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 6px;
    margin-right: -32px;
}

.workout-coach-action {
    min-height: 38px;
    gap: 4px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1.05;
}

.workout-coach-action i {
    flex: 0 0 auto;
    font-size: 16px;
}

.workout-coach-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-coach__shield {
    position: absolute;
    top: 1rem;
    right: 12px;
    display: grid;
    place-items: center;
    color: var(--app-cyan);
}

.workout-coach__shield i { font-size: 18px; }

.workout-section h2 {
    margin: 0 0 10px;
    color: #f8fbff;
    font-size: 12px;
    font-weight: 950;
}

.workout-list {
    overflow: hidden;
    border-color: rgba(169, 180, 196, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(12, 25, 39, 0.96), rgba(7, 14, 24, 0.98));
}

.workout-list-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 55px 60px 18px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid rgba(169, 180, 196, 0.14);
    color: rgba(224, 230, 241, 0.72);
    background: transparent;
    text-align: left;
}

.workout-list-row:last-child { border-bottom: 0; }

.workout-list-row strong {
    min-width: 0;
    overflow: hidden;
    color: #f8fbff;
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-list-row span:not(.workout-letter) {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-size: 10.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-list-row i {
    flex: 0 0 auto;
    font-size: 15px;
}

.workout-letter,
.workout-next-index {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--app-line-strong);
    border-radius: 50%;
    color: var(--app-cyan);
    background: color-mix(in srgb, var(--app-cyan) 4%, transparent);
    font-size: 14px;
    font-weight: 950;
}

.workout-quick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    border-color: rgba(169, 180, 196, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(12, 25, 39, 0.96), rgba(7, 14, 24, 0.98));
}

.workout-quick > span {
    display: block;
    height: 44px;
    background: rgba(169, 180, 196, 0.22);
}

.workout-quick button {
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    color: #f8fbff;
    background: transparent;
    font-size: 10px;
}

.workout-quick button i {
    color: var(--app-cyan);
    font-size: 25px;
}

.workout-session-view {
    gap: 12px;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.has-workout-session .menujs-bottombar {
    display: none !important;
}

.workout-session-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px 46px 46px;
    align-items: center;
    gap: 9px;
    margin-bottom: 2px;
    min-width: 0;
}

.workout-session-btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(169, 180, 196, 0.28);
    border-radius: 999px;
    background: rgba(13, 25, 39, 0.84);
    box-shadow: inset 0 0 16px rgba(169, 180, 196, 0.02);
}

.workout-session-btn i { font-size: 25px; }

.workout-session-head__title { min-width: 0; }

.workout-session-head__title strong {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    line-height: 0.95;
}

.workout-session-head__title span {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: rgba(224, 230, 241, 0.72);
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-session-avatar {
    width: 46px;
    height: 46px;
    border: 2px solid var(--app-cyan);
    border-radius: 50%;
}

.workout-session-avatar span {
    right: 0;
    bottom: 5px;
}

.workout-session-progress {
    display: grid;
    gap: 12px;
    min-height: 68px;
    padding: 14px 14px 13px;
    border-color: var(--app-line);
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 86%, #061115), color-mix(in srgb, var(--app-card) 96%, #05080d));
}

.workout-session-progress div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.workout-session-progress strong {
    color: #f8fbff;
    font-size: 13px;
    font-weight: 850;
}

.workout-session-progress span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
}

.workout-session-progress span i { font-size: 18px; }

.workout-session-bar {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(169, 180, 196, 0.14);
}

.workout-session-bar span {
    display: block;
    width: 61%;
    height: 100%;
    border-radius: inherit;
    background: var(--app-cyan);
    box-shadow: 0 0 18px color-mix(in srgb, var(--app-cyan) 28%, transparent);
}

.workout-rest {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 56px 56px 42px;
    align-items: center;
    gap: 7px;
    min-height: 78px;
    padding: 12px 10px;
    border-color: var(--app-line-strong);
    border-radius: 13px;
    background:
        radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--app-cyan) 10%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 88%, #061115), color-mix(in srgb, var(--app-card) 96%, #05080d));
}

.workout-rest__ring {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 5px solid rgba(169, 180, 196, 0.2);
    border-top-color: var(--app-cyan);
    border-right-color: var(--app-cyan);
    border-bottom-color: var(--app-cyan);
    border-radius: 50%;
    color: var(--app-cyan);
}

.workout-rest__ring i { font-size: 20px; }

.workout-rest__copy { min-width: 0; }

.workout-rest__copy span { font-size: 12px; }

.workout-rest__copy strong {
    display: block;
    margin-top: 2px;
    color: var(--app-cyan);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
}

.workout-rest-action {
    min-height: 42px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 800;
}

.workout-exercise {
    padding: 13px;
    border-color: var(--app-line-strong);
    border-radius: 13px;
    background:
        radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--app-cyan) 6%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 88%, #061115), color-mix(in srgb, var(--app-card) 96%, #05080d));
}

.workout-exercise > header,
.workout-up-next > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.workout-exercise h2,
.workout-up-next h2 {
    margin: 0;
    color: #fff;
    font-weight: 950;
    line-height: 1.08;
}

.workout-exercise h2 { font-size: 16px; }

.workout-exercise p {
    margin: 6px 0 0;
    color: rgba(224, 230, 241, 0.72);
    font-size: 12px;
    font-weight: 700;
}

.workout-exercise > header > span {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--app-line-strong);
    border-radius: 8px;
    color: var(--app-cyan);
    background: color-mix(in srgb, var(--app-cyan) 4%, transparent);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.workout-exercise__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 15px 0 9px;
}

.workout-exercise-metric {
    display: inline-flex;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 6px;
    overflow: hidden;
    border: 1px solid rgba(169, 180, 196, 0.18);
    border-radius: 999px;
    color: rgba(224, 230, 241, 0.78);
    font-size: 10.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-exercise-metric i {
    flex: 0 0 auto;
    font-size: 15px;
}

.workout-tip {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    gap: 2px;
    padding: 0 9px;
    border: 0px solid rgba(169, 180, 196, 0.18);
    border-radius: 9px;
    color: rgba(235, 240, 248, 0.86);
    font-size: 11px;
    font-weight: 600;
}

.workout-tip i { font-size: 19px; }

.workout-set-table {
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid rgba(169, 180, 196, 0.16);
    border-radius: 10px;
}

.workout-set-head,
.workout-set-row {
    display: grid;
    grid-template-columns: 0.75fr 1.3fr 0.9fr 0.9fr 0.75fr;
    align-items: center;
    min-height: 38px;
    padding: 0 9px;
    border-bottom: 1px solid rgba(169, 180, 196, 0.1);
    text-align: center;
}

.workout-set-head {
    color: rgba(224, 230, 241, 0.72);
    font-size: 11px;
    font-weight: 750;
}

.workout-set-row {
    color: rgba(244, 248, 252, 0.78);
    font-size: 12px;
    font-weight: 800;
}

.workout-set-row:last-child { border-bottom: 0; }

.workout-set-row span { min-width: 0; }

.workout-set-row i {
    color: var(--app-cyan);
    font-size: 12px;
}

.workout-set-row--active {
    min-height: 42px;
    margin: -1px 0 0;
    border: 1px solid var(--app-line-strong);
    border-radius: 8px;
    color: var(--app-cyan);
    background: color-mix(in srgb, var(--app-cyan) 4%, transparent);
}

.workout-set-row--active b {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--app-line-strong);
    border-radius: 6px;
    background: color-mix(in srgb, var(--app-cyan) 10%, transparent);
}

.workout-finish {
    width: 100%;
    min-height: 48px;
    margin-top: 1rem;
}

.workout-up-next {
    padding: 13px 11px 12px;
    border-color: var(--app-line);
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-card-soft) 86%, #061115), color-mix(in srgb, var(--app-card) 96%, #05080d));
}

.workout-up-next h2 { font-size: 12px; }

.workout-up-next header button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    color: var(--app-cyan);
    background: transparent;
    font-size: 11px;
    font-weight: 850;
}

.workout-next-list {
    display: grid;
    gap: 4px;
    margin-top: 12px;
}

.workout-next-row {
    display: grid;
    grid-template-columns: 22px 30px minmax(0, 1fr) 38px 48px 16px;
    align-items: center;
    gap: 5px;
    min-height: 46px;
    padding: 0 4px;
    border: 1px solid rgba(169, 180, 196, 0.13);
    border-radius: 9px;
    color: rgba(224, 230, 241, 0.78);
    background: rgba(255, 255, 255, 0.012);
    text-align: left;
}

.workout-grip {
    display: grid;
    place-items: center;
    color: rgba(224, 230, 241, 0.7);
}

.workout-next-row strong {
    min-width: 0;
    overflow: hidden;
    color: #f8fbff;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-next-row small {
    display: inline-flex;
    min-width: 0;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    overflow: hidden;
    border: 1px solid var(--app-line);
    border-radius: 6px;
    color: var(--app-cyan);
    font-size: 10.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-next-row small:empty { border-color: transparent; }

.workout-next-row > span:not(.workout-grip):not(.workout-next-index) {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-next-row i { font-size: 15px; }

.workout-next-row > i { color: rgba(224, 230, 241, 0.78); }

.workout-next-index {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.menujs-bottombar {
    width: min(calc(100% - 18px), var(--app-page-max)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: env(safe-area-inset-bottom) !important;
    height: 82px !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(8, 12, 24, 0.68) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transform: translateX(-50%) !important;
}

.menujs-bottombar-btn {
    min-width: 0 !important;
    height: 64px !important;
    padding: 7px 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #8a919f !important;
    background: transparent !important;
}

.menujs-bottombar-btn.is-active {
    color: var(--app-primary-dark) !important;
    background: var(--app-radial-gradient) !important;
    box-shadow: inset 0 0 0 1px var(--app-border-strong) !important;
}

[data-bs-theme="light"] .menujs-bottombar-btn.is-active { color: #e6e6e6 !important; }

.menujs-bottombar-ic { font-size: 19px !important; }

.menujs-bottombar-label {
    font-size: 10px !important;
    font-weight: 900 !important;
}

@media (max-width: 340px) {
    .screen { padding-inline: 10px; }
    .dashboard-grid { gap: 7px; }
    .app-card--pad { padding: 11px; }
    .card-heading { font-size: 11px; }
    .metric { font-size: 19px; }
    .stat-card,
    .challenge-card { padding-right: 50px; }
    .stat-card .metric,
    .challenge-card .metric { font-size: 20px; }
    .circle-action {
        width: 34px;
        height: 34px;
    }
    .stat-card__action { top: 48px; }
    .challenge-card__action { top: 54px; }
    .diet-summary { gap: 8px; }
    .diet-summary .metric { font-size: 28px; }
    .meal-title-grid {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 8px;
    }
    .macro-progress {
        grid-template-columns: 30px 1fr;
        gap: 6px;
    }
    .ring {
        width: 29px;
        height: 29px;
    }
    .ring:before {
        width: 21px;
        height: 21px;
    }
    .smart-settings { gap: 5px; }
    .setting-chip { padding: 8px 6px; }
    .profile-main-logo { height: 26px; }
    .profile-main-actions { gap: 7px; }
    .profile-main-hero {
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 12px;
    }
    .profile-main-avatar {
        width: 106px;
        height: 106px;
    }
    .profile-main-info h1 { font-size: 18px; }
    .profile-main-info p { margin-bottom: 18px; }
    .profile-main-stat b { font-size: 15px; }
    .profile-main-stat small { font-size: 10px; }
    .profile-main-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .profile-main-edit,
    .profile-main-share {
        min-height: 44px;
        padding: 0 9px;
        font-size: 10.5px;
    }
    .profile-shot-card__body {
        right: 9px;
        bottom: 8px;
        left: 9px;
    }
    .profile-shot-card__body h2 { font-size: 11.5px; }
    .profile-shot-card__meta {
        gap: 6px;
        font-size: 9.5px;
    }
}

@media (min-width: 700px) {
    :root { --app-page-max: 560px; }
    .screen { padding-inline: 22px; }
}