:where(html) {
    font-size: 16px;
}

:where(body) {
    color: var(--m-color-text);
    background: var(--m-color-surface);
}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.m-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--m-color-card);
    border-bottom: 1px solid var(--m-color-border-soft);
}

.m-header__bar {
    min-height: var(--m-touch-min);
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
}

.m-header__title {
    flex: 1;
    min-width: 0;
    font-size: var(--m-font-lg);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    padding-inline: var(--m-space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-header__slot {
    width: var(--m-touch-min);
    display: flex;
    justify-content: flex-end;
}

.m-header__btn {
    width: var(--m-touch-min);
    height: var(--m-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-radius-sm);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.m-header__btn:active {
    background: var(--m-color-border-soft);
}

.m-container {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    padding-inline: var(--m-space-4);
}

.m-page {
    padding-top: var(--m-space-4);
    padding-bottom: calc(var(--m-bottom-nav-height) + var(--m-safe-area-bottom, 0px));
}

.m-section {
    margin-bottom: var(--m-space-4);
}

.m-card {
    background: var(--m-color-card);
    border-radius: var(--m-radius);
    border: 1px solid var(--m-color-border);
    overflow: hidden;
}

.m-card--elevated {
    box-shadow: var(--m-shadow);
}

.m-card--flat {
    box-shadow: none;
}

.m-card__body {
    padding: var(--m-space-4);
}

.m-card__body--sm {
    padding: var(--m-space-3);
}

.m-card__body--lg {
    padding: var(--m-space-5);
}

.m-card__section {
    padding: var(--m-space-4);
    border-bottom: 1px solid var(--m-color-border-soft);
}

.m-card__section:last-child {
    border-bottom: none;
}

.m-divider {
    height: 1px;
    background: var(--m-color-border-soft);
    margin: var(--m-space-4) 0;
}

.m-heading {
    font-size: var(--m-font-xl);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.m-text {
    font-size: var(--m-font-base);
    line-height: 1.55;
    margin: 0;
}

.m-text--secondary {
    color: var(--m-color-text-secondary);
}

.m-text--muted {
    color: var(--m-color-text-muted);
}

.m-label {
    display: block;
    font-size: var(--m-font-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--m-color-text-secondary);
    margin-bottom: var(--m-space-1);
    line-height: 1.3;
}

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-space-2);
    min-height: var(--m-touch-min);
    padding-inline: var(--m-space-6);
    border-radius: var(--m-radius-sm);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--m-font-lg);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

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

.m-btn.is-disabled,
.m-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.m-btn--block {
    width: 100%;
}

.m-btn--primary {
    background: var(--m-color-primary);
    color: #ffffff;
}

.m-btn--primary:active {
    background: var(--m-color-primary-strong);
}

.m-btn--secondary {
    background: var(--m-color-surface);
    color: var(--m-color-text);
    border-color: var(--m-color-border);
}

.m-btn--danger {
    background: var(--m-color-danger);
    color: #ffffff;
}

.m-btn--sm {
    min-height: var(--m-touch-compact);
    padding-inline: var(--m-space-4);
    font-size: var(--m-font-base);
}

.m-btn--icon {
    padding-inline: 0;
    min-width: var(--m-touch-min);
}

.m-btn--square {
    padding-inline: 0;
    width: var(--m-touch-min);
}

.m-btn--fixed {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    border-radius: 0;
    min-height: 3.75rem;
    box-shadow: var(--m-shadow-top);
    padding-bottom: var(--m-safe-area-bottom, 0px);
}

.m-field {
    display: grid;
    gap: var(--m-space-2);
}

.m-field__label {
    font-size: var(--m-font-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--m-color-text);
}

.m-field__required {
    color: var(--m-color-danger);
    font-size: var(--m-font-sm);
}

.m-field__helper {
    font-size: var(--m-font-sm);
    line-height: 1.45;
    color: var(--m-color-text-muted);
}

.m-field__error {
    font-size: var(--m-font-sm);
    line-height: 1.45;
    color: var(--m-color-danger);
}

.m-input,
.m-select,
.m-textarea {
    width: 100%;
    min-height: var(--m-touch-min);
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-color-border);
    background: #ffffff;
    padding: var(--m-space-3);
    font-size: var(--m-font-base);
    line-height: 1.3;
    color: var(--m-color-text);
}

.m-input-wrap {
    position: relative;
}

.m-input-wrap .m-input {
    padding-right: calc(var(--m-touch-min) + var(--m-space-2));
}

.m-input-trailing {
    position: absolute;
    top: 50%;
    right: var(--m-space-2);
    transform: translateY(-50%);
    width: var(--m-touch-min);
    height: var(--m-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-radius-sm);
    border: 0;
    background: transparent;
    color: var(--m-color-text-muted);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

.m-input-trailing:hover {
    background: var(--m-color-border-soft);
    color: var(--m-color-primary);
}

.m-input-trailing:active {
    transform: translateY(-50%) scale(0.98);
}

.m-input-trailing.is-active {
    color: var(--m-color-primary);
}

.m-textarea {
    min-height: calc(var(--m-touch-min) * 2);
    resize: vertical;
}

.m-input:focus,
.m-select:focus,
.m-textarea:focus {
    outline: none;
    border-color: var(--m-color-primary);
    box-shadow: 0 0 0 0.1875rem rgba(83, 61, 234, 0.12);
}

.m-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-1);
    padding: 0.375rem 0.75rem;
    border-radius: var(--m-radius-pill);
    font-size: var(--m-font-sm);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.m-badge--primary {
    background: rgba(83, 61, 234, 0.12);
    color: var(--m-color-primary);
    border-color: rgba(83, 61, 234, 0.22);
}

.m-badge--secondary {
    background: rgba(107, 114, 128, 0.12);
    color: var(--m-color-text-secondary);
    border-color: rgba(107, 114, 128, 0.2);
}

.m-badge--success {
    background: rgba(68, 180, 97, 0.14);
    color: #2d8a4d;
    border-color: rgba(68, 180, 97, 0.22);
}

.m-badge--danger {
    background: rgba(234, 52, 52, 0.14);
    color: #c91a1a;
    border-color: rgba(234, 52, 52, 0.22);
}

.m-badge--warning {
    background: rgba(242, 199, 28, 0.18);
    color: #8a6a00;
    border-color: rgba(242, 199, 28, 0.26);
}

.m-badge--info {
    background: rgba(5, 132, 255, 0.14);
    color: #0b5fcc;
    border-color: rgba(5, 132, 255, 0.22);
}

.m-chip {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.m-chip.is-active {
    background: var(--m-color-primary);
    color: #ffffff;
    border-color: var(--m-color-primary);
}

.m-row {
    display: flex;
    align-items: center;
    gap: var(--m-space-2);
}

.m-row--between {
    justify-content: space-between;
}

.m-wrap {
    flex-wrap: wrap;
}

.m-flex-1 {
    flex: 1;
    min-width: 0;
}

.m-gap-3 {
    gap: var(--m-space-3);
}

.m-mt-2 {
    margin-top: var(--m-space-2);
}

.m-mt-3 {
    margin-top: var(--m-space-3);
}

.m-mt-4 {
    margin-top: var(--m-space-4);
}

.m-mb-2 {
    margin-bottom: var(--m-space-2);
}

.m-mb-3 {
    margin-bottom: var(--m-space-3);
}

.m-mb-4 {
    margin-bottom: var(--m-space-4);
}

.m-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--m-space-3);
}

.m-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m-space-2);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    padding: var(--m-space-2);
    border-radius: var(--m-radius);
}

.m-menu-item:active {
    background: var(--m-color-border-soft);
}

.m-menu-item__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--m-radius);
    background: var(--m-color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-menu-item__label {
    font-size: var(--m-font-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

.m-list {
    background: var(--m-color-card);
    border-radius: var(--m-radius);
    border: 1px solid var(--m-color-border);
    overflow: hidden;
}

.m-list--elevated {
    box-shadow: var(--m-shadow);
}

.m-list-item {
    display: flex;
    align-items: center;
    gap: var(--m-space-3);
    padding: var(--m-space-4);
    border-bottom: 1px solid var(--m-color-border-soft);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--m-touch-min);
}

.m-list-item:last-child {
    border-bottom: none;
}

.m-list-item:active {
    background: var(--m-color-border-soft);
}

.m-list-item__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--m-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-color-surface);
    flex-shrink: 0;
}

.m-list-item__content {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: var(--m-space-1);
}

.m-list-item__title {
    font-size: var(--m-font-md);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.m-list-item__subtitle {
    font-size: var(--m-font-base);
    line-height: 1.4;
    color: var(--m-color-text-secondary);
    margin: 0;
}

.m-list-item__meta {
    font-size: var(--m-font-sm);
    line-height: 1.35;
    color: var(--m-color-text-muted);
    margin: 0;
}

.m-empty {
    text-align: center;
    padding: var(--m-space-8) var(--m-space-4);
    color: var(--m-color-text-secondary);
}

.m-empty__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--m-radius-lg);
    background: var(--m-color-border-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--m-space-3);
}

.m-empty__title {
    font-size: var(--m-font-lg);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 var(--m-space-2);
    color: var(--m-color-text);
}

.m-empty__description {
    font-size: var(--m-font-base);
    line-height: 1.5;
    margin: 0;
}

.m-form-grid {
    display: grid;
    gap: var(--m-space-3);
}

@media (min-width: 30rem) {
    .m-form-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.m-hero {
    border-radius: var(--m-radius-lg);
    background: linear-gradient(135deg, var(--m-color-primary) 0%, #6b5aed 100%);
    color: #ffffff;
    padding: var(--m-space-5);
    box-shadow: var(--m-shadow);
}

.m-hero__label {
    font-size: var(--m-font-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0;
}

.m-hero__value {
    font-size: clamp(2rem, 10vw, 2.75rem);
    font-weight: 900;
    line-height: 1.05;
    margin: var(--m-space-2) 0 0;
    letter-spacing: -0.02em;
}

.m-hero__meta {
    font-size: var(--m-font-base);
    line-height: 1.4;
    opacity: 0.85;
    margin: var(--m-space-2) 0 0;
}

.m-webcam {
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--m-radius);
    background: var(--m-color-border-soft);
}

.m-webcam img,
.m-webcam video,
.m-webcam canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.m-check {
    display: flex;
    align-items: flex-start;
    gap: var(--m-space-3);
    font-size: var(--m-font-base);
    line-height: 1.4;
}

.m-check input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--m-color-primary);
    flex-shrink: 0;
}

@media (max-width: 22.5rem) {
    .m-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .m-container {
        max-width: 44rem;
        padding-inline: var(--m-space-5);
    }
}

.m-profile__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--m-color-border-soft);
}

.m-profile#app-wrap {
    padding-top: 0;
}

.m-profile .tabs-food-news {
    position: sticky;
    top: var(--m-touch-min);
    left: auto;
    right: auto;
    margin: 0;
    padding: var(--m-space-3) var(--m-space-2) var(--m-space-2);
    list-style: none;
    background: var(--m-color-card);
    border-bottom: 1px solid var(--m-color-border-soft);
    box-shadow: var(--m-shadow-sm);
    z-index: 55;
    display: flex;
    gap: var(--m-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.m-profile .tabs-food-news::-webkit-scrollbar {
    display: none;
}

.m-profile .tabs-food-news .nav-tab {
    list-style: none;
    border: 1px solid rgba(107, 114, 128, 0.2);
    background: rgba(107, 114, 128, 0.12);
    color: var(--m-color-text-secondary);
    font-weight: 700;
    font-size: var(--m-font-sm);
    line-height: 1.1;
    padding: 0.375rem 0.75rem;
    border-radius: var(--m-radius-pill);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    scroll-snap-align: start;
}

.m-profile .tabs-food-news .nav-tab.active {
    background: var(--m-color-primary);
    color: #ffffff;
    border-color: var(--m-color-primary);
}