.UserHomeContentArea {
    --uh-surface: rgba(12, 18, 28, 0.78);
    --uh-surface-strong: rgba(10, 14, 22, 0.92);
    --uh-surface-soft: rgba(255, 255, 255, 0.05);
    --uh-surface-soft-alt: rgba(255, 255, 255, 0.03);
    --uh-elevated: rgba(6, 10, 18, 0.88);
    --uh-muted: rgba(170, 174, 187, 0.82);
    --uh-muted-strong: rgba(226, 232, 240, 0.94);
    --uh-border: rgba(148, 163, 184, 0.18);
    --uh-border-strong: rgba(148, 163, 184, 0.24);
    --uh-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
    --uh-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.18);
    --uh-accent: #18c8c8;
    --uh-accent-alt: #3a7bff;
    --uh-accent-soft: rgba(58, 123, 255, 0.14);
    --uh-accent-line: rgba(58, 123, 255, 0.24);
    --uh-accent-text: #dbeafe;
    --uh-success-bg: rgba(34, 197, 94, 0.14);
    --uh-success-text: #bbf7d0;
    --uh-danger-bg: rgba(239, 68, 68, 0.16);
    --uh-danger-text: #fecaca;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at top right, rgba(24, 200, 200, 0.08), transparent 22%),
        radial-gradient(circle at 10% 22%, rgba(58, 123, 255, 0.08), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(249, 115, 22, 0.05), transparent 28%),
        var(--mainPageContent-bg-color);
}

html.light-theme .UserHomeContentArea {
    --uh-surface: rgba(255, 255, 255, 0.82);
    --uh-surface-strong: rgba(255, 255, 255, 0.92);
    --uh-surface-soft: rgba(48, 69, 96, 0.05);
    --uh-surface-soft-alt: rgba(48, 69, 96, 0.03);
    --uh-elevated: rgba(255, 255, 255, 0.96);
    --uh-muted: rgba(48, 69, 96, 0.72);
    --uh-muted-strong: rgba(48, 69, 96, 0.92);
    --uh-border: rgba(48, 69, 96, 0.12);
    --uh-border-strong: rgba(48, 69, 96, 0.18);
    --uh-shadow: 0 28px 56px rgba(48, 69, 96, 0.12);
    --uh-shadow-soft: 0 16px 36px rgba(48, 69, 96, 0.08);
    --uh-accent-soft: rgba(58, 123, 255, 0.08);
    --uh-accent-line: rgba(58, 123, 255, 0.18);
    --uh-accent-text: #264a8a;
    --uh-success-text: #166534;
    --uh-danger-text: #b91c1c;
}

.UserHomeContentArea::before,
.UserHomeContentArea::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.UserHomeContentArea::before {
    width: 360px;
    height: 360px;
    top: -140px;
    right: -120px;
    background: radial-gradient(circle, rgba(24, 200, 200, 0.12), transparent 68%);
}

.UserHomeContentArea::after {
    width: 420px;
    height: 420px;
    left: -180px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(58, 123, 255, 0.12), transparent 70%);
}

.UserHomeDashboardShell {
    width: min(1600px, 100%);
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--text-color);
    position: relative;
    z-index: 1;
}

.UserHomeDashboardToolbarArea {
    flex: 0 0 auto;
}

.UserHomeContent {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: auto;
}

.UserHomeHero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--uh-border);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(24, 200, 200, 0.18), transparent 28%),
        radial-gradient(circle at left center, rgba(34, 197, 94, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(13, 148, 136, 0.16), rgba(59, 130, 246, 0.14) 52%, rgba(244, 114, 182, 0.14)),
        var(--uh-surface-strong);
    box-shadow: var(--uh-shadow);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.UserHomeHero::after {
    content: '';
    position: absolute;
    inset: auto -120px -160px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 200, 200, 0.14), transparent 66%);
    pointer-events: none;
}

.UserHomeHeroCopy,
.UserHomeHeroActions {
    position: relative;
    z-index: 1;
}

.UserHomeHeroEyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--uh-muted);
}

.UserHomeHeroTitle {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.04;
}

.UserHomeHeroLead {
    margin: 12px 0 18px;
    max-width: 700px;
    color: var(--uh-muted);
    line-height: 1.5;
}

.UserHomeIdentity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.UserHomeName {
    font-size: 22px;
    font-weight: 700;
}

.UserHomeEmail {
    color: var(--uh-muted);
    font-size: 14px;
}

.UserHomeGroupChips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.UserHomeGroupChip {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--uh-border-strong);
    background: var(--uh-surface-soft);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.UserHomeGroupChip strong {
    font-size: 13px;
}

.UserHomeGroupChip span {
    font-size: 12px;
    color: var(--uh-muted);
}

.UserHomeHeroActions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
}

.UserHomeActionCard {
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft);
    backdrop-filter: blur(12px);
}

.UserHomeActionCardTitle {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
}

.UserHomeActionCardText {
    margin: 0;
    color: var(--uh-muted);
    font-size: 13px;
    line-height: 1.45;
}

.UserHomeHeroButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.UserHomePrimaryButton,
.UserHomeSecondaryButton,
.UserHomeGhostButton,
.UserHomeWidgetAction,
.UserHomePickerToggle {
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.UserHomePrimaryButton:hover,
.UserHomeSecondaryButton:hover,
.UserHomeGhostButton:hover,
.UserHomeWidgetAction:hover,
.UserHomePickerToggle:hover {
    transform: translateY(-1px);
}

.UserHomePrimaryButton,
.UserHomeWidgetAction[data-variant='primary'] {
    background: linear-gradient(135deg, var(--uh-accent), var(--uh-accent-alt));
    color: #eff8ff;
    box-shadow: 0 14px 28px rgba(58, 123, 255, 0.18);
}

.UserHomeSecondaryButton {
    background: var(--uh-accent-soft);
    border-color: var(--uh-accent-line);
    color: var(--uh-accent-text);
}

.UserHomeGhostButton,
.UserHomeWidgetAction,
.UserHomePickerToggle {
    background: var(--button-bg-color);
    border-color: var(--uh-border);
    color: var(--text-color);
    backdrop-filter: blur(12px);
}

.UserHomeGhostButton:hover,
.UserHomeWidgetAction:hover,
.UserHomePickerToggle:hover,
.UserHomePrimaryButton:hover,
.UserHomeSecondaryButton:hover {
    box-shadow: var(--uh-shadow-soft);
}

.UserHomeLogoutButton {
    border-color: rgba(239, 68, 68, 0.24);
    background: var(--uh-danger-bg);
    color: var(--uh-danger-text);
}

.UserHomeDashboardToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--uh-border);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--uh-surface);
    box-shadow: var(--uh-shadow-soft);
    backdrop-filter: blur(18px);
}

.UserHomeDashboardToolbarActions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.UserHomeDashboardToolbarMeta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--uh-muted);
    font-size: 13px;
}

.UserHomeDashboardToolbarMeta strong {
    color: var(--text-color);
}

.UserHomePinnedRail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 2px 0;
}

.UserHomePinnedChip {
    border-radius: 999px;
    border: 1px solid var(--uh-accent-line);
    background: var(--uh-accent-soft);
    color: var(--uh-accent-text);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.UserHomePickerOverlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 40;
}

.UserHomePickerPanel {
    width: min(760px, 100%);
    max-height: min(84vh, 820px);
    overflow: auto;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid var(--uh-border-strong);
    background:
        radial-gradient(circle at top right, rgba(24, 200, 200, 0.12), transparent 22%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--uh-surface-strong);
    box-shadow: var(--uh-shadow);
    backdrop-filter: blur(20px);
}

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

.UserHomePickerHeader h2 {
    margin: 0 0 6px;
}

.UserHomePickerHeader p {
    margin: 0;
    color: var(--uh-muted);
    line-height: 1.5;
}

.UserHomePickerList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.UserHomePickerCard {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--uh-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--uh-surface-soft);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.UserHomePickerCardTitle {
    font-size: 15px;
    font-weight: 700;
}

.UserHomePickerCardText {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--uh-muted);
}

.UserHomePickerCardActions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.UserHomeDashboardGrid {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    width: 100%;
}

.UserHomeEmptyBoard {
    padding: 24px;
    border-radius: 24px;
    border: 1px dashed var(--uh-border-strong);
    background: var(--uh-surface-soft);
    color: var(--uh-muted);
    backdrop-filter: blur(12px);
}

.UserHomeWidgetCard {
    position: absolute;
    left: var(--uh-x, 0px);
    top: var(--uh-y, 0px);
    width: var(--uh-width, 320px);
    height: var(--uh-height, 320px);
    z-index: var(--uh-z, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid var(--uh-border);
    background:
        radial-gradient(circle at top right, rgba(24, 200, 200, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--uh-surface);
    overflow: hidden;
    box-shadow: var(--uh-shadow-soft);
    backdrop-filter: blur(18px);
    min-height: 0;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.UserHomeWidgetCard.is-loading {
    opacity: 0.9;
}

.UserHomeWidgetCard.is-interacting {
    border-color: var(--uh-accent-line);
    box-shadow: 0 22px 56px rgba(58, 123, 255, 0.16);
    z-index: calc(var(--uh-z, 1) + 100);
    will-change: left, top, width, height;
}

.UserHomeWidgetHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.UserHomeWidgetHeaderCopy {
    min-width: 0;
    flex: 1 1 auto;
}

.UserHomeWidgetHeader.is-draggable {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.UserHomeWidgetHeader.is-draggable:active {
    cursor: grabbing;
}

.UserHomeWidgetEyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--uh-muted);
}

.UserHomeWidgetTitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
}

.UserHomeWidgetLead {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--uh-muted);
    line-height: 1.45;
}

.UserHomeWidgetControls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.UserHomeWidgetIconButton {
    min-width: 0;
    border-radius: 12px;
    border: 1px solid var(--uh-border);
    background: var(--button-bg-color);
    color: var(--uh-muted-strong);
    backdrop-filter: blur(12px);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.UserHomeWidgetNotice {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
}

.UserHomeWidgetNotice.is-success {
    background: var(--uh-success-bg);
    color: var(--uh-success-text);
}

.UserHomeWidgetNotice.is-error {
    background: var(--uh-danger-bg);
    color: var(--uh-danger-text);
}

.UserHomeWidgetBody {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}

.UserHomeInlineForm,
.UserHomeFieldGrid {
    display: grid;
    gap: 10px;
}

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

.UserHomeInlineForm label,
.UserHomeFieldGrid label,
.UserHomeTaskBlock label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--uh-muted);
}

.UserHomeInlineForm input,
.UserHomeInlineForm select,
.UserHomeInlineForm textarea,
.UserHomeFieldGrid input,
.UserHomeFieldGrid select,
.UserHomeFieldGrid textarea,
.UserHomeTaskBlock input,
.UserHomeTaskBlock textarea,
.UserHomeTaskBlock select,
.UserHomeNotesSelect {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--uh-border);
    background: var(--input-bg-color);
    color: var(--text-color);
    font-size: 14px;
}

.UserHomeInlineForm textarea,
.UserHomeFieldGrid textarea,
.UserHomeTaskBlock textarea {
    min-height: 86px;
    resize: vertical;
}

.UserHomeFoodPicker {
    position: relative;
}

.UserHomeFoodPicker:focus-within {
    z-index: 8;
}

.UserHomeFoodPickerInput {
    position: relative;
    z-index: 2;
}

.UserHomeFoodSavedPanel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--uh-border-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        var(--uh-elevated);
    box-shadow: var(--uh-shadow-soft);
    backdrop-filter: blur(18px);
}

.UserHomeFoodPicker:focus-within .UserHomeFoodSavedPanel {
    display: flex;
}

.UserHomeFoodSavedPanelTitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--uh-muted);
}

.UserHomeFoodSavedList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}

.UserHomeFoodSavedItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.UserHomeFoodSavedItem:hover,
.UserHomeFoodSavedItem:focus-visible {
    transform: translateY(-1px);
    border-color: var(--uh-accent-line);
    background: var(--uh-accent-soft);
    outline: none;
}

.UserHomeFoodSavedItem strong {
    font-size: 13px;
}

.UserHomeFoodSavedItem span,
.UserHomeFoodSavedEmpty {
    color: var(--uh-muted);
    font-size: 12px;
    line-height: 1.4;
}

.UserHomeInlineActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.UserHomeWidgetMetaLine {
    color: var(--uh-muted);
    font-size: 12px;
}

.UserHomeWidgetSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.UserHomeFoodFormSection {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.UserHomeFoodEntriesSection {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.UserHomeFoodEntriesList {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.UserHomeCalendarFormSection {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.UserHomeCalendarEventsSection {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.UserHomeCalendarLists {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding-right: 4px;
}

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

.UserHomeWidgetSectionTitle {
    margin: 0;
    font-size: 13px;
    color: var(--uh-muted-strong);
}

.UserHomeWeatherForecast {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
}

.UserHomeWeatherHourlyForecast {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.UserHomeWeatherTimeline {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px 6px;
    min-height: 0;
}

.UserHomeWeatherTimeline::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 211, 252, 0.08), rgba(125, 211, 252, 0.34), rgba(125, 211, 252, 0.08));
}

.UserHomeWeatherTimelineItem {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.UserHomeWeatherTimelineHour {
    margin: 0;
    color: var(--uh-muted-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.UserHomeWeatherTimelineMarker {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--uh-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        var(--uh-elevated);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.UserHomeWeatherTimelineIcon {
    width: 28px;
    height: 28px;
    display: block;
}

.UserHomeWeatherDay {
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--uh-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        var(--uh-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.UserHomeWeatherHour {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--uh-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        var(--uh-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.UserHomeWeatherDay strong {
    font-size: 14px;
}

.UserHomeWeatherHour strong {
    font-size: 15px;
}

.UserHomeWeatherDay span,
.UserHomeWeatherDay small,
.UserHomeWeatherHour span,
.UserHomeWeatherHour small {
    color: var(--uh-muted);
    font-size: 12px;
}

.UserHomeWeatherDayMedia {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft-alt);
    min-height: 110px;
}

.UserHomeWeatherDayArt {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
}

.UserHomeWeatherDayBadge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--uh-border);
    background: var(--uh-elevated);
    backdrop-filter: blur(8px);
    color: var(--uh-muted-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.UserHomeWeatherDayBody {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.UserHomeWeatherHourHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.UserHomeWeatherHourHeader .UserHomeWeatherDayBadge {
    position: static;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

.UserHomeWeatherDayHeading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.UserHomeWeatherDayWeekday {
    color: var(--uh-accent-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.UserHomeWeatherDay .UserHomeWeatherPrimary {
    color: var(--uh-muted-strong);
    font-size: 13px;
    font-weight: 700;
}

.UserHomeWeatherDay .UserHomeWeatherSecondary {
    color: var(--uh-accent-text);
}

.UserHomeWeatherDay .UserHomeWeatherMeta {
    color: var(--uh-muted);
}

.UserHomeWeatherHour .UserHomeWeatherPrimary {
    color: var(--uh-muted-strong);
    font-size: 13px;
    font-weight: 700;
}

.UserHomeWeatherHour .UserHomeWeatherSecondary {
    color: var(--uh-accent-text);
}

.UserHomeWeatherHour .UserHomeWeatherMeta {
    color: var(--uh-muted);
}

.UserHomeWeatherDay.is-clear {
    border-color: rgba(250, 204, 21, 0.22);
}

.UserHomeWeatherHour.is-clear {
    border-color: rgba(250, 204, 21, 0.22);
}

.UserHomeWeatherDay.is-cloudy {
    border-color: rgba(148, 163, 184, 0.22);
}

.UserHomeWeatherHour.is-cloudy {
    border-color: rgba(148, 163, 184, 0.22);
}

.UserHomeWeatherDay.is-fog {
    border-color: rgba(203, 213, 225, 0.22);
}

.UserHomeWeatherHour.is-fog {
    border-color: rgba(203, 213, 225, 0.22);
}

.UserHomeWeatherDay.is-rain-light {
    border-color: rgba(56, 189, 248, 0.24);
}

.UserHomeWeatherHour.is-rain-light {
    border-color: rgba(56, 189, 248, 0.24);
}

.UserHomeWeatherDay.is-rain-medium {
    border-color: rgba(14, 165, 233, 0.28);
}

.UserHomeWeatherHour.is-rain-medium {
    border-color: rgba(14, 165, 233, 0.28);
}

.UserHomeWeatherDay.is-rain-heavy {
    border-color: rgba(59, 130, 246, 0.34);
    background:
        linear-gradient(180deg, rgba(58, 123, 255, 0.08), rgba(255, 255, 255, 0)),
        var(--uh-surface-soft);
}

.UserHomeWeatherHour.is-rain-heavy {
    border-color: rgba(59, 130, 246, 0.34);
    background:
        linear-gradient(180deg, rgba(58, 123, 255, 0.08), rgba(255, 255, 255, 0)),
        var(--uh-surface-soft);
}

.UserHomeWeatherDay.is-snow-light,
.UserHomeWeatherDay.is-snow-medium,
.UserHomeWeatherDay.is-snow-heavy {
    border-color: rgba(125, 211, 252, 0.26);
}

.UserHomeWeatherHour.is-snow-light,
.UserHomeWeatherHour.is-snow-medium,
.UserHomeWeatherHour.is-snow-heavy {
    border-color: rgba(125, 211, 252, 0.26);
}

.UserHomeWeatherDay.is-storm {
    border-color: rgba(250, 204, 21, 0.34);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.UserHomeWeatherHour.is-storm {
    border-color: rgba(250, 204, 21, 0.34);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.UserHomeWeatherTimelineItem.is-clear .UserHomeWeatherTimelineMarker {
    border-color: rgba(250, 204, 21, 0.28);
}

.UserHomeWeatherTimelineItem.is-cloudy .UserHomeWeatherTimelineMarker {
    border-color: rgba(148, 163, 184, 0.28);
}

.UserHomeWeatherTimelineItem.is-fog .UserHomeWeatherTimelineMarker {
    border-color: rgba(203, 213, 225, 0.3);
}

.UserHomeWeatherTimelineItem.is-rain-light .UserHomeWeatherTimelineMarker,
.UserHomeWeatherTimelineItem.is-rain-medium .UserHomeWeatherTimelineMarker {
    border-color: rgba(56, 189, 248, 0.32);
}

.UserHomeWeatherTimelineItem.is-rain-heavy .UserHomeWeatherTimelineMarker {
    border-color: rgba(59, 130, 246, 0.36);
    background:
        linear-gradient(180deg, rgba(58, 123, 255, 0.12), rgba(255, 255, 255, 0)),
        var(--uh-elevated);
}

.UserHomeWeatherTimelineItem.is-snow-light .UserHomeWeatherTimelineMarker,
.UserHomeWeatherTimelineItem.is-snow-medium .UserHomeWeatherTimelineMarker,
.UserHomeWeatherTimelineItem.is-snow-heavy .UserHomeWeatherTimelineMarker {
    border-color: rgba(125, 211, 252, 0.32);
}

.UserHomeWeatherTimelineItem.is-storm .UserHomeWeatherTimelineMarker {
    border-color: rgba(250, 204, 21, 0.36);
    box-shadow:
        0 10px 20px rgba(2, 6, 23, 0.16),
        inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.UserHomeEventList,
.UserHomeSimpleList,
.UserHomeReminderList,
.UserHomeTaskList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.UserHomeEventItem,
.UserHomeSimpleListItem,
.UserHomeReminderItem,
.UserHomeTaskListItem {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft);
    backdrop-filter: blur(12px);
}

.UserHomeEventItemHeader,
.UserHomeSimpleItemHeader,
.UserHomeReminderHeader,
.UserHomeTaskHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.UserHomeEventItemHeader strong,
.UserHomeSimpleItemHeader strong,
.UserHomeReminderHeader strong,
.UserHomeTaskHeader strong {
    font-size: 14px;
}

.UserHomeEventItemMeta,
.UserHomeSimpleItemMeta,
.UserHomeReminderMeta,
.UserHomeTaskMeta {
    margin-top: 4px;
    color: var(--uh-muted);
    font-size: 12px;
    line-height: 1.45;
}

.UserHomeInlinePills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.UserHomePill {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--uh-accent-soft);
    color: var(--uh-accent-text);
    font-size: 11px;
    font-weight: 600;
}

.UserHomeKpiGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.UserHomeKpiCard {
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.UserHomeKpiCard span,
.UserHomeKpiCard small {
    color: var(--uh-muted);
    font-size: 12px;
}

.UserHomeKpiCard strong {
    font-size: 22px;
    line-height: 1;
}

.UserHomeCheckboxGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.UserHomeCheckbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--uh-surface-soft);
    border: 1px solid var(--uh-border);
    font-size: 12px;
    color: var(--uh-muted-strong);
}

.UserHomeCheckbox input {
    width: auto;
    margin: 0;
}

.UserHomeTaskComposer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.UserHomeTaskBlock {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--uh-border);
    background: var(--uh-surface-soft);
}

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

.UserHomeTaskBlockTitle {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.UserHomeTaskNestedList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.UserHomeTaskNestedList[data-depth='1'] {
    padding-left: 12px;
    border-left: 1px solid var(--uh-border);
}

.UserHomeTaskNestedList[data-depth='2'] {
    padding-left: 12px;
    border-left: 1px dashed var(--uh-border);
}

.UserHomeNotesToolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.UserHomeNotesEditorHostWrap {
    min-height: 0;
    flex: 1 1 auto;
}

.UserHomeNotesEditorHost {
    min-height: 100%;
}

.UserHomeNotesPreview {
    padding: 14px;
    border-radius: 18px;
    background: var(--uh-surface-soft);
    border: 1px solid var(--uh-border);
    color: var(--uh-muted-strong);
    line-height: 1.5;
}

.UserHomeWidgetEmpty {
    padding: 14px;
    border-radius: 16px;
    border: 1px dashed var(--uh-border-strong);
    color: var(--uh-muted);
    font-size: 13px;
}

.UserHomeWidgetResizeHandle {
    position: absolute;
    display: block;
    background: transparent;
    z-index: 3;
    touch-action: none;
}

.UserHomeWidgetResizeHandle--n,
.UserHomeWidgetResizeHandle--s {
    left: 18px;
    right: 18px;
    height: 10px;
}

.UserHomeWidgetResizeHandle--n {
    top: 0;
    cursor: ns-resize;
}

.UserHomeWidgetResizeHandle--s {
    bottom: 0;
    cursor: ns-resize;
}

.UserHomeWidgetResizeHandle--e,
.UserHomeWidgetResizeHandle--w {
    top: 18px;
    bottom: 18px;
    width: 10px;
}

.UserHomeWidgetResizeHandle--e {
    right: 0;
    cursor: ew-resize;
}

.UserHomeWidgetResizeHandle--w {
    left: 0;
    cursor: ew-resize;
}

.UserHomeWidgetResizeHandle--ne,
.UserHomeWidgetResizeHandle--nw,
.UserHomeWidgetResizeHandle--se,
.UserHomeWidgetResizeHandle--sw {
    width: 18px;
    height: 18px;
}

.UserHomeWidgetResizeHandle--ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.UserHomeWidgetResizeHandle--nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.UserHomeWidgetResizeHandle--se {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}

.UserHomeWidgetResizeHandle--sw {
    left: 0;
    bottom: 0;
    cursor: nesw-resize;
}

.UserHomeWidgetCard.is-compact .UserHomeWidgetLead,
.UserHomeWidgetCard.is-compact .UserHomeWidgetSecondary,
.UserHomeWidgetCard.is-compact .UserHomeTaskNestedList,
.UserHomeWidgetCard.is-compact .UserHomeNotesEditorHostWrap {
    display: none;
}

.UserHomeWidgetCard.is-compact .UserHomeFieldGrid {
    grid-template-columns: 1fr;
}

.UserHomeWidgetCard.is-compact .UserHomeWeatherForecast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.UserHomeWidgetCard.is-compact .UserHomeWeatherHourlyForecast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.UserHomeWidgetCard.is-compact .UserHomeWeatherTimeline {
    gap: 10px;
    padding-inline: 2px;
}

.UserHomeWidgetCard.is-compact .UserHomeWeatherTimelineItem {
    min-width: 52px;
}

.UserHomeWidgetCard.is-compact .UserHomeWeatherTimelineMarker {
    width: 36px;
    height: 36px;
}

.UserHomeWidgetCard.is-compact .UserHomeKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.UserHomeWidgetCard.is-compact .UserHomeInlineActions {
    flex-direction: column;
}

@media (max-width: 1100px) {
    .UserHomeHero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .UserHomeContentArea {
        padding: 16px;
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .UserHomeDashboardShell {
        flex: 0 0 auto;
        min-height: auto;
        gap: 14px;
    }

    .UserHomeContent {
        flex: 0 0 auto;
        min-height: auto;
        gap: 14px;
        overflow: visible;
    }

    .UserHomeHero {
        padding: 18px;
        border-radius: 24px;
    }

    .UserHomeDashboardToolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .UserHomeDashboardToolbarActions {
        flex-direction: row;
        align-items: stretch;
    }

    .UserHomePinnedRail {
        overflow: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .UserHomeDashboardGrid {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: auto;
        height: auto !important;
    }

    .UserHomeWidgetCard {
        position: relative;
        left: auto;
        top: auto;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        min-height: unset;
    }

    .UserHomeWidgetBody {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }

    .UserHomeWidgetResizeHandle {
        display: none;
    }

.UserHomeFieldGrid,
.UserHomeCheckboxGrid,
.UserHomeWeatherForecast,
.UserHomeWeatherHourlyForecast,
.UserHomeKpiGrid {
    grid-template-columns: 1fr;
}

    .UserHomeWeatherTimeline {
        gap: 10px;
        padding-inline: 2px;
    }

    .UserHomePickerOverlay {
        padding: 12px;
    }

    .UserHomePickerPanel {
        padding: 18px;
        border-radius: 22px;
    }
}