/* Self-hosted fonts (offline-safe on Samsung Flip / kiosk devices) */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2500-259F, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --hos-bg: #080808;
    --hos-surface: #121212;
    --hos-surface-2: #0D0D0D;
    --hos-surface-hover: #181818;
    --hos-border: #292929;

    --hos-text: #F5F5F5;
    --hos-text-muted: #9A9A9A;

    --hos-accent: #E53935;
    --hos-accent-hover: #FF4D4D;
    --hos-accent-muted: rgba(229, 57, 53, 0.12);
    --hos-accent-ink: #FF7B87;
    --hos-accent-glow: rgba(229, 57, 53, .22);

    --hos-danger: #35171B;
    --hos-danger-ink: #FF9BA4;

    /* Legacy aliases (kept for shared component rules) */
    --bg: var(--hos-bg);
    --bg-card: var(--hos-surface);
    --bg-surface: #151515;
    --bg-surface-soft: var(--hos-surface-2);
    --bg-hover: var(--hos-surface-hover);
    --border: var(--hos-border);
    --border-strong: #3A3A3A;

    --text: var(--hos-text);
    --text-muted: var(--hos-text-muted);
    --text-faint: #7d7d7d;

    --accent: var(--hos-accent);
    --accent-bright: var(--hos-accent-hover);
    --accent-hover: var(--hos-accent-hover);
    --accent-soft: var(--hos-accent-muted);
    --accent-ink: var(--hos-accent-ink);
    --accent-glow: var(--hos-accent-glow);

    --danger-surface: var(--hos-danger);
    --danger-ink: var(--hos-danger-ink);

    color-scheme: dark;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 320px; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { -webkit-appearance: none; appearance: none; touch-action: manipulation; }
a, [role="button"] { touch-action: manipulation; }
select, input[type="text"], input[type="search"], textarea { -webkit-appearance: none; appearance: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--hos-accent-hover); outline-offset: 3px; }
a { color: inherit; }
h1:focus { outline: none; }
::selection { background: rgba(229, 57, 53, .55); color: #fff; }

/* ---------- Loading ---------- */
.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; top: 32vh; right: 0; left: 0; inset: 32vh 0 auto; margin: auto; }
.loading-progress circle { fill: none; stroke: #2a2526; stroke-width: .55rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; top: calc(32vh + 2.55rem); right: 0; left: 0; inset: calc(32vh + 2.55rem) 0 auto; text-align: center; font-weight: 700; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "HOS"); }

#blazor-error-ui { color-scheme: dark; display: none; position: fixed; top: auto; right: 20px; bottom: 20px; inset: auto 20px 20px; z-index: 1000; background: var(--danger-surface); color: var(--danger-ink); border: 1px solid #694039; border-radius: 12px; box-shadow: 0 10px 35px rgba(0, 0, 0, .35); padding: 14px 48px 14px 18px; }
#blazor-error-ui .reload { font-weight: 700; margin-left: 8px; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; cursor: pointer; }

/* ============ Wall (fullscreen calendar) ============ */
.wall-shell { min-height: 100vh; }
.wall-page {
    height: 100vh; min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr);
    padding: clamp(18px, 2vw, 38px) clamp(18px, 2.7vw, 54px) clamp(24px, 2.5vw, 48px);
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 50% -220px, rgba(229, 57, 53, .07), transparent 460px),
        var(--hos-bg);
}

.wall-header { min-height: 104px; display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr); align-items: center; gap: clamp(18px, 2vw, 34px); }
.wall-brand-zone { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.brand-lockup { display: inline-flex; align-items: center; gap: 14px; width: max-content; text-decoration: none; }
.brand-lockup strong { display: block; color: var(--hos-text); font: 700 28px/1 "Manrope", "DM Sans", system-ui, sans-serif; font-size: clamp(24px, 2vw, 34px); letter-spacing: -.04em; }
.brand-lockup small { display: block; margin-top: 5px; color: var(--hos-text-muted); font-size: 13px; letter-spacing: .02em; }
.brand-mark { width: 47px; height: 47px; border-radius: 14px; background: var(--hos-accent); border: 1px solid var(--hos-accent-hover); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 12px 10px; box-shadow: 0 10px 30px var(--hos-accent-glow); }
.brand-mark i { display: block; width: 6px; border-radius: 8px; background: #fff; transform: rotate(35deg); }
.brand-mark i:nth-child(1) { height: 16px; }
.brand-mark i:nth-child(2) { height: 24px; }
.brand-mark i:nth-child(3) { height: 13px; margin-left: 2px; }
.brand-mark.small { width: 40px; height: 40px; border-radius: 13px; padding: 10px 8px; }

.month-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-arrow, .close-button { border: 1px solid var(--hos-border); background: var(--hos-surface); color: var(--hos-text); min-width: 56px; height: 56px; border-radius: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.nav-arrow { font-size: 30px; line-height: 1; padding: 0 0 3px; }
.nav-arrow:hover, .close-button:hover { border-color: var(--hos-accent); background: var(--hos-surface-hover); color: var(--hos-accent-hover); }
.nav-arrow:active, .today-button:active { transform: scale(.96); }
.month-heading { min-width: clamp(150px, 13vw, 220px); min-height: 56px; border: 0; background: transparent; cursor: pointer; text-align: center; padding: 6px 8px; }
.month-heading span { display: block; font: 700 26px/1 "Manrope", "DM Sans", system-ui, sans-serif; font-size: clamp(22px, 1.9vw, 30px); letter-spacing: .06em; }
.month-heading strong { display: block; color: var(--hos-text-muted); font-size: 12px; margin-top: 6px; letter-spacing: .14em; }

.wall-status { justify-self: end; display: flex; align-items: center; gap: 14px; text-align: right; }
.wall-status-copy { display: flex; flex-direction: column; align-items: flex-end; }
.clock { color: var(--hos-text); font: 600 28px/1 "Manrope", "DM Sans", system-ui, sans-serif; font-size: clamp(24px, 2vw, 32px); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sync-state { margin-top: 7px; display: inline-flex; align-items: center; gap: 7px; color: #777173; font-size: 11px; }
.sync-state i { width: 7px; height: 7px; border-radius: 50%; background: #A98E43; }
.sync-state.online i { background: #5F9E77; box-shadow: 0 0 0 3px rgba(95, 158, 119, .11); }
.sync-state.syncing i { animation: pulse 1s ease infinite; }
.exit-wall-button { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px; border: 1px solid var(--hos-border); border-radius: 13px; background: var(--hos-surface); color: var(--hos-text); font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.exit-wall-icon { flex: 0 0 auto; }
.exit-wall-button:hover { border-color: var(--hos-accent); background: var(--hos-surface-hover); color: var(--hos-accent-hover); }

.legend { display: flex; flex-wrap: wrap; gap: 20px; }
.legend-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hos-text-muted); }
.legend-person i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--member-color); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); font-size: 10px; font-style: normal; font-weight: 800; }
.today-button { min-width: 104px; height: 56px; border: 1px solid var(--hos-border); border-radius: 13px; background: var(--hos-surface); color: var(--hos-text); padding: 0 18px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.today-button:hover { border-color: var(--hos-accent); background: var(--hos-surface-hover); color: var(--hos-accent-hover); }

.calendar-card { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--hos-surface-2); border: 1px solid var(--hos-border); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .34); overflow: hidden; }
.wall-content-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.weekday-row, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { min-height: 49px; border-bottom: 1px solid var(--hos-border); background: var(--hos-surface); }
.weekday-row div { display: grid; place-items: center; color: var(--hos-text-muted); font-size: clamp(12px, 1vw, 15px); font-weight: 700; letter-spacing: .04em; }
.weekday-row div:nth-child(n+6) { color: #A9939A; }
.month-grid { --calendar-week-count: 6; min-height: 0; grid-template-rows: repeat(var(--calendar-week-count), minmax(98px, 1fr)); }
.month-grid.weeks-4 { --calendar-week-count: 4; }
.month-grid.weeks-5 { --calendar-week-count: 5; }

.day-cell { position: relative; min-width: 0; border: 0; border-right: 1px solid var(--hos-border); border-bottom: 1px solid var(--hos-border); background: var(--hos-surface-2); padding: 9px; text-align: left; overflow: hidden; transition: background .15s ease; }
.day-cell:nth-child(7n) { border-right: 0; }
.day-cell:nth-last-child(-n+7) { border-bottom: 0; }
.day-cell-add-zone { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.day-cell-add-zone:hover { background: rgba(255, 255, 255, .018); }
.day-cell-add-zone:focus-visible { outline: 3px solid var(--hos-accent); outline-offset: -4px; }
.day-cell.outside { background: #0A0A0A; }
.day-cell.outside .day-number, .day-cell.outside .calendar-item { opacity: .35; }
.day-cell.past:not(.today) { background: #0A0A0A; }
.day-cell.past:not(.today) .day-number { opacity: .42; }
.day-cell.past:not(.today) .calendar-item:not(.overdue) { opacity: .5; }
.day-cell.outside.past .calendar-item:not(.overdue) { opacity: .3; }
.day-cell.past .calendar-item.overdue { opacity: 1; }
.day-cell.today { background: rgba(229, 57, 53, .065); }
.day-cell.today .day-number { color: #fff; background: var(--hos-accent); }

.day-number { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--hos-text); font-size: 15px; font-weight: 700; cursor: pointer; }
.day-number:hover { background: var(--hos-surface-hover); }

.day-items { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; margin-top: 5px; pointer-events: none; }
.day-items > * { pointer-events: auto; }
.calendar-item { display: block; width: 100%; max-width: 100%; min-height: 40px; border: 1px solid color-mix(in srgb, var(--entry-color) 72%, var(--hos-border)); border-radius: 9px; background: color-mix(in srgb, var(--entry-color) 32%, var(--hos-surface-hover)); padding: 8px 9px; color: var(--hos-text); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.calendar-item:hover { border-color: var(--entry-color); background: color-mix(in srgb, var(--entry-color) 43%, var(--hos-surface-hover)); transform: translateY(-1px); }
.calendar-item.completed { opacity: .55; }
.calendar-item.completed .item-title { text-decoration: line-through; }

.item-topline { width: 100%; max-width: 100%; min-width: 0; display: flex; justify-content: flex-start; align-items: center; gap: 7px; }
.item-type-badge { display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--hos-border); border-radius: 5px; background: transparent; color: var(--hos-text-muted); font-size: 9px; line-height: 1; }
.item-type-badge i { font-style: normal; }
.item-time { flex: 0 0 auto; color: #C6BFC1; font-size: clamp(11px, .72vw, 13px); font-weight: 650; font-variant-numeric: tabular-nums; }
.item-separator { flex: 0 0 auto; color: #746E70; }
.item-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--hos-text); font-size: clamp(13px, .92vw, 16px); font-weight: 750; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overdue-badge { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: 0 0 auto; margin-left: auto; border-radius: 50%; background: var(--hos-accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.item-owner { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--hos-text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-items { display: block; width: 100%; border: 0; background: none; padding: 1px 9px; color: var(--hos-accent-ink); font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.more-items:hover { text-decoration: underline; }

.member-dots { display: flex; }
.member-dots i { width: 9px; height: 9px; border: 2px solid var(--hos-surface); border-radius: 50%; background: var(--member-color); margin-right: -2px; }

/* ============ Ownership indicator & filter ============ */
.ownership-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ownership-mark { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--owner-color); color: #fff; font-style: normal; font-weight: 800; font-size: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.ownership-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hos-text-muted); font-size: 13px; }

.ownership-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.ownership-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); padding: 0 18px 0 10px; cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ownership-chip:hover { border-color: var(--accent); color: var(--text); }
.ownership-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.ownership-chip-mark { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--owner-color, #3A3A3A); color: #fff; font-style: normal; font-weight: 800; font-size: 11px; }
.ownership-chip-mark-all { background: #3A3A3A; font-size: 14px; }

.ownership-filter-bar { display: flex; align-items: center; gap: 12px; }
.wall-filter { grid-column: 1 / -1; }
.agenda-meta .ownership-mark { width: 16px; height: 16px; font-size: 8px; }
.agenda-meta .ownership-label { font-size: 12px; }
.rail-entry-copy .ownership-label { font-size: 12px; }

.item-owner .ownership-mark { width: 16px; height: 16px; font-size: 8px; }
.item-owner .ownership-label { font-size: 10px; }

@media (min-width: 801px) {
    .touch-device .ownership-chip { min-height: 56px; padding: 0 22px 0 12px; font-size: 16px; }
    .touch-device .ownership-chip-mark { width: 32px; height: 32px; font-size: 13px; }
    .wall-device .ownership-chip { min-height: 64px; padding: 0 26px 0 14px; font-size: 18px; gap: 12px; }
    .wall-device .ownership-chip-mark { width: 40px; height: 40px; font-size: 15px; }
    .wall-device .ownership-badge { gap: 10px; }
    .wall-device .ownership-mark { width: 40px; height: 40px; font-size: 16px; }
    .wall-device .ownership-label { font-size: 15px; }
}

.day-items, .calendar-item { width: 100%; max-width: 100%; min-width: 0; }
.day-cell.has-multiple-items { padding: 8px; }
.day-cell.has-multiple-items .day-number { width: 30px; height: 30px; font-size: 13px; }
.day-cell.has-multiple-items .day-items { gap: 4px; margin-top: 4px; }
.day-cell.has-multiple-items .calendar-item { min-height: 36px; border-radius: 8px; padding: 6px 8px; }
.day-cell.has-multiple-items .item-topline { line-height: 1.2; }
.day-cell.has-multiple-items .item-title { font-size: clamp(12px, .8vw, 15px); }
.day-cell.has-multiple-items .item-time { font-size: clamp(10px, .68vw, 12px); }
.day-cell.is-packed .day-items { gap: 2px; margin-top: 1px; }
.day-cell.is-packed .calendar-item { min-height: 34px; padding-block: 5px; }
.day-cell.is-packed .more-items { padding-block: 0; font-size: 9px; line-height: 1.1; }

.calendar-state-overlay { position: absolute; z-index: 9; top: 205px; right: 8%; bottom: 70px; left: 8%; inset: 205px 8% 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 18px; background: rgba(14, 12, 12, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; }
.calendar-state-overlay p { max-width: 440px; margin: 0 0 4px; color: var(--hos-text-muted); }
.calendar-state-overlay button, .page-state button { min-height: 56px; border: 0; border-radius: 12px; background: var(--hos-accent); color: white; padding: 0 22px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px var(--hos-accent-glow); }

.add-button { position: fixed; right: max(32px, calc(env(safe-area-inset-right) + 24px)); bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); z-index: 12; height: 68px; min-width: 160px; border: 1px solid var(--hos-accent-hover); border-radius: 16px; background: var(--hos-accent); color: #fff; box-shadow: 0 14px 34px var(--hos-accent-glow); padding: 0 26px; font: 700 17px "Manrope", "DM Sans", system-ui, sans-serif; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.add-button span { margin-right: 8px; font-size: 26px; font-weight: 400; }
.add-button:hover { background: var(--hos-accent-hover); transform: translateY(-2px); }
.add-button:active { transform: translateY(0) scale(.98); }

.header-add-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 24px; border: 1px solid var(--hos-accent-hover); border-radius: 14px; background: var(--hos-accent); color: #fff; box-shadow: 0 12px 28px var(--hos-accent-glow); font: 700 17px "Manrope", "DM Sans", system-ui, sans-serif; cursor: pointer; }
.header-add-button span { font-size: 26px; font-weight: 400; line-height: 1; }
.header-add-button:hover { background: var(--hos-accent-hover); }

.wall-date { margin-top: 7px; color: var(--hos-text-muted); font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.wall-status-copy .sync-state { margin-top: 4px; }

.wall-overview { min-width: 0; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--hos-border); border-radius: 18px; background: linear-gradient(180deg, #151313 0%, #0f0e0e 100%); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.rail-section { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.rail-section + .rail-section { border-top: 1px solid var(--hos-border); }
.rail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rail-header h2 { margin: 0; font: 700 17px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.rail-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--hos-accent-ink); font-weight: 800; font-size: 13px; }
.rail-header-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; color: var(--hos-accent-ink); font-size: 13px; font-weight: 700; text-decoration: none; border-radius: 10px; }
.rail-header-link:hover { text-decoration: underline; }

.rail-entry { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 1px solid color-mix(in srgb, var(--entry-color) 45%, var(--hos-border)); border-radius: 13px; background: color-mix(in srgb, var(--entry-color) 16%, var(--hos-surface)); padding: 10px 14px; color: var(--hos-text); text-align: left; cursor: pointer; }
.rail-entry:hover, .rail-entry:active { border-color: var(--entry-color); background: color-mix(in srgb, var(--entry-color) 24%, var(--hos-surface)); }
.rail-entry-time { color: var(--hos-text); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rail-entry-date { display: flex; flex-direction: column; gap: 2px; }
.rail-entry-date strong { color: var(--hos-text); font-size: 14px; text-transform: capitalize; }
.rail-entry-date small { color: var(--hos-text-muted); font-size: 12px; }
.rail-entry-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rail-entry-copy strong { overflow: hidden; color: var(--hos-text); font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.rail-entry-copy small { color: var(--hos-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-member { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--member-color); color: #fff; font-size: 14px; font-weight: 800; }

.rail-task { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 1px solid var(--hos-border); border-radius: 13px; background: var(--hos-surface-2); padding: 10px 14px; }
.rail-task.is-overdue { border-left: 4px solid var(--hos-accent); border-color: color-mix(in srgb, var(--hos-accent) 55%, var(--hos-border)); border-left-color: var(--hos-accent); background: color-mix(in srgb, var(--hos-accent) 12%, var(--hos-surface)); }
.rail-task-toggle { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--hos-border); border-radius: 50%; background: var(--hos-surface); color: var(--hos-text-muted); cursor: pointer; font-size: 20px; line-height: 1; }
.rail-task-toggle:hover { border-color: var(--hos-accent); color: var(--hos-accent-hover); }
.rail-task.is-overdue .rail-task-toggle { border-color: var(--hos-accent); color: var(--hos-accent-ink); }
.rail-note { margin: 2px 6px 6px; color: var(--hos-text-muted); font-size: 13px; }

.rail-weather-card { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--hos-border); border-radius: 13px; background: rgba(255, 255, 255, .02); color: var(--hos-text); text-decoration: none; }
.rail-weather-card:hover { border-color: var(--border-strong); }
.rail-weather-icon { font-size: 40px; line-height: 1; }
.rail-weather-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-weather-copy strong { font: 700 26px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.03em; }
.rail-weather-copy span { color: var(--hos-text); font-size: 14px; }
.rail-weather-copy small { color: var(--hos-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-weather-warning { color: var(--hos-accent-ink); font-size: 12px; font-weight: 700; }
.rail-weather-empty .rail-weather-icon { font-size: 36px; }

.wall-clock-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.header-overdue-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; background: var(--hos-accent); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.header-overdue-badge:hover { background: var(--hos-accent-hover); }
.rail-section#wall-overdue { scroll-margin-top: 16px; }
.has-overdue .wall-overview { display: flex; }

@media (max-width: 1799px) {
    .wall-page.has-overdue { height: auto; overflow: visible; }
    .has-overdue .wall-content-grid { gap: 18px; }
    .has-overdue .wall-overview { grid-row: 1; max-height: 40vh; }
}

@media (max-width: 800px) {
    .wall-page.has-overdue .wall-status { display: flex; grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
}

/* ============ Drawers (editor + agenda) ============ */
.drawer-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0, 0, 0, .74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 50; animation: fade-in .18s ease-out; }
.task-drawer { position: fixed; top: 0; right: 0; bottom: 0; inset: 0 0 0 auto; width: 640px; width: min(640px, 100%); z-index: 51; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-card); box-shadow: -18px 0 60px rgba(0, 0, 0, .42); animation: slide-in .24s ease-out; }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 34px 40px 24px; border-bottom: 1px solid var(--border); }
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 700; }
.drawer-header h2 { margin: 0; font: 700 30px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.035em; }
.drawer-header h2.editor-heading { font-size: 24px; letter-spacing: .1em; text-transform: uppercase; }
.close-button { font-size: 30px; line-height: 1; padding: 0 0 3px; border-radius: 50%; }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 28px 40px 34px; }
.field-label, .field-group legend { display: block; margin: 0 0 8px; color: var(--hos-text-muted); font-size: 14px; font-weight: 700; }
.field-label em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.field-group legend em { font-style: normal; font-weight: 400; color: var(--text-faint); }
.text-input { width: 100%; min-height: 60px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text); padding: 12px 16px; }
.text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); outline: 0; }
.title-input { min-height: 64px; font-size: 19px; font-weight: 600; }
textarea.text-input { resize: vertical; }
.field-group { border: 0; padding: 0; margin: 28px 0 0; }
.segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segmented-control button { min-height: 56px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); font-weight: 600; cursor: pointer; font-size: 14px; }
.segmented-control button span { display: inline-grid; place-items: center; margin-right: 4px; width: 20px; height: 20px; }
.segmented-control button.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.member-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.member-chip { min-height: 64px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface); display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 10px; padding: 8px 14px; text-align: left; cursor: pointer; }
.member-chip i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--member-color); color: #fff; font-style: normal; font-weight: 700; }
.member-chip b { color: transparent; font-size: 20px; }
.member-chip.selected { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.member-chip.selected b { color: var(--accent-ink); }
.date-field { margin-top: 24px; }
.toggle-row { display: flex; align-items: center; margin-top: 20px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface); padding: 8px 18px; }
.toggle-row .hos-toggle { width: 100%; min-height: 56px; flex-direction: row-reverse; justify-content: space-between; }
.time-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px; margin-top: 20px; }
.time-row > span { display: grid; place-items: center; min-height: 60px; color: var(--text-muted); }
.time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.drawer-body > .field-label { margin-top: 26px; }
.inline-error { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid #694039; background: var(--danger-surface); color: var(--danger-ink); font-size: 14px; font-weight: 600; }
.drawer-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 20px 40px 28px; border-top: 1px solid var(--border); background: var(--bg-card); }
.secondary-drawer-button { min-height: 64px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface); color: var(--text-muted); padding: 0 22px; font-size: 15px; font-weight: 700; cursor: pointer; }
.secondary-drawer-button:hover { border-color: var(--accent); color: var(--text); }
.quick-time-fields { grid-template-columns: 1fr; }
.save-button, .delete-button { min-height: 64px; border-radius: 14px; padding: 0 26px; font-weight: 700; cursor: pointer; font-size: 16px; }
.save-button { flex: 1; border: 0; background: var(--accent); color: #fff; box-shadow: 0 12px 30px var(--accent-glow); }
.save-entry-button { letter-spacing: .09em; text-transform: uppercase; }
.save-button:hover { background: var(--accent-hover); }
.save-button:disabled { opacity: .62; cursor: wait; }
.delete-button { border: 1px solid #71453d; background: #2d1d1a; color: #efa08e; }
.complete-drawer-button { min-height: 64px; border: 1px solid #62363b; border-radius: 14px; background: #2b181b; color: #ff9da6; padding: 0 20px; font-weight: 700; cursor: pointer; font-size: 16px; }

.agenda-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); padding: 12px 14px; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.agenda-item:hover { border-color: #6d3035; background: var(--bg-hover); }
.agenda-item.completed { opacity: .55; }
.agenda-item.completed .agenda-title { text-decoration: line-through; }
.agenda-color { width: 4px; align-self: stretch; border-radius: 4px; background: var(--hos-accent); flex: 0 0 auto; }
.agenda-copy { flex: 1; min-width: 0; }
.agenda-title { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.agenda-meta .item-type-badge { width: 14px; height: 14px; }
.agenda-actions { display: flex; gap: 8px; }
.agenda-actions button { min-height: 48px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--accent-ink); padding: 0 14px; cursor: pointer; font-size: 13px; font-weight: 700; }
.agenda-actions button:hover { border-color: #7f292e; background: #281719; }
.agenda-actions button.complete { color: var(--hos-accent-ink); }
.agenda-summary { margin: 0; border-top: 1px solid var(--border); padding: 16px 40px 0; color: var(--text-muted); font-size: 14px; font-weight: 700; }

.toast-message { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px; min-height: 50px; border: 1px solid #5a2930; border-radius: 14px; background: #2b1216; color: white; padding: 0 22px; box-shadow: 0 14px 35px rgba(0, 0, 0, .4); font-weight: 700; animation: toast-in .24s ease-out; }
.toast-message span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }

@keyframes slide-in { from { transform: translateX(30px); opacity: .4; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { transform: translate(-50%, -8px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .25; } }

/* ============ Quick Add ============ */
.quick-add-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.quick-add-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 190px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-surface); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.quick-add-action:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.quick-add-action:active { transform: scale(.98); }
.quick-add-action-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 42px; line-height: 1; }
.quick-add-action-label { font: 700 22px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.quick-add-loading { margin: 0; color: var(--text-muted); font-size: 14px; }

.today-header-actions { display: flex; align-items: center; gap: 20px; }
.page-heading-actions { display: flex; align-items: center; gap: 12px; }

@media (min-width: 801px) {
    .touch-device .quick-add-action { min-height: 250px; border-radius: 22px; }
    .touch-device .quick-add-action-icon { width: 112px; height: 112px; font-size: 56px; }
    .touch-device .quick-add-action-label { font-size: 26px; }

    .wall-device .quick-add-action { min-height: 340px; border-radius: 26px; }
    .wall-device .quick-add-action-icon { width: 150px; height: 150px; font-size: 72px; }
    .wall-device .quick-add-action-label { font-size: 34px; }
}

@media (max-width: 800px) {
    .quick-add-actions { grid-template-columns: 1fr; }
    .quick-add-action { flex-direction: row; justify-content: flex-start; min-height: 96px; padding: 0 26px; gap: 20px; }
    .quick-add-action-icon { width: 60px; height: 60px; font-size: 30px; }
}

/* ============ Application shell ============ */
.app-shell { min-height: 100vh; background: var(--bg); }
.app-header { position: sticky; top: 0; z-index: 25; height: 82px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 28px; padding: 0 clamp(22px, 4vw, 68px); background: rgba(12, 11, 11, .95); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.app-brand { display: flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; }
.app-brand strong, .app-brand small { display: block; }
.app-brand strong { font: 700 21px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.03em; }
.app-brand small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.desktop-navigation { display: flex; align-items: center; gap: 4px; }
.desktop-navigation a { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 0 14px; color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.desktop-navigation a span { font-size: 17px; }
.desktop-navigation a:hover { background: var(--bg-hover); color: var(--text); }
.desktop-navigation a.active { background: var(--accent-soft); color: var(--accent-ink); }
.desktop-navigation .wall-link { margin-left: 8px; border: 1px solid var(--border); color: var(--accent-ink); }
.account-menu { justify-self: end; display: grid; grid-template-columns: 38px auto auto; align-items: center; gap: 10px; }
.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.account-avatar.large { width: 50px; height: 50px; }
.account-copy strong, .account-copy small { display: block; white-space: nowrap; }
.account-copy strong { font-size: 13px; }
.account-copy small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.account-menu button { min-height: 48px; border: 0; background: transparent; color: var(--text-muted); padding: 0 8px; cursor: pointer; font-size: 12px; font-weight: 700; }
.account-menu button:hover { color: var(--accent-ink); }
.app-main { min-height: calc(100vh - 82px); }
.session-banner { min-height: 48px; display: grid; place-items: center; background: var(--danger-surface); border-bottom: 1px solid #694039; color: var(--danger-ink); padding: 8px 20px; font-size: 14px; }
.session-banner a { font-weight: 700; }
.mobile-navigation { display: none; }

.content-page { width: calc(100% - 48px); max-width: 1180px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: clamp(38px, 5vw, 72px) 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.page-heading h1 { margin: 7px 0 8px; font: 700 44px/1.05 "Manrope", "DM Sans", system-ui, sans-serif; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.055em; }
.page-heading p { margin: 0; color: var(--text-muted); font-size: 16px; }
.primary-action, .secondary-action, .settings-save { min-height: 56px; border-radius: 14px; padding: 0 22px; cursor: pointer; font-weight: 700; }
.primary-action { border: 0; background: var(--accent); color: #fff; box-shadow: 0 12px 30px var(--accent-glow); font-size: 16px; }
.primary-action span, .secondary-action span { margin-right: 7px; font-size: 21px; font-weight: 400; }
.secondary-action { border: 1px solid var(--border); background: var(--bg-surface); color: var(--accent-ink); font-size: 15px; }
.page-state { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); box-shadow: 0 18px 55px rgba(0, 0, 0, .22); text-align: center; padding: 30px; }
.page-state p { max-width: 460px; margin: 0; color: var(--text-muted); }
.state-spinner { width: 34px; height: 34px; border: 4px solid var(--hos-border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.state-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #38221e; color: #efa08d; font-size: 24px; font-weight: 700; }

/* ============ Tasks ============ */
.task-sections { display: grid; gap: 34px; }
.task-section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.task-section > header h2 { margin: 0; font: 700 20px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.025em; }
.task-section > header > span { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 20px; background: #281719; color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.task-list { display: grid; gap: 9px; }
.task-row { min-height: 92px; display: grid; grid-template-columns: 42px minmax(260px, 1fr) 160px auto; align-items: center; gap: 18px; border: 1px solid var(--border); border-radius: 17px; background: var(--bg-card); padding: 15px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.complete-toggle { width: 48px; height: 48px; border: 2px solid var(--hos-border); border-radius: 50%; background: var(--bg-surface); color: white; cursor: pointer; font-weight: 700; }
.complete-toggle:hover { border-color: var(--accent); }
.is-completed .complete-toggle { border-color: var(--accent); background: var(--accent); }
.task-copy { min-width: 0; }
.task-type-line { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.task-type-line b { border-radius: 6px; background: #38221e; color: #efa08d; padding: 3px 6px; font-size: 9px; }
.task-row.is-overdue { border-left: 4px solid #E53935; }
.task-copy h3 { display: flex; align-items: center; gap: 8px; margin: 4px 0 5px; font: 700 16px "Manrope", "DM Sans", system-ui, sans-serif; }
.task-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row.is-overdue .overdue-badge { margin-left: 0; background: #E53935; }
.is-completed .task-copy h3 { color: #81797b; text-decoration: line-through; }
.task-copy p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-muted); font-size: 12px; }
.task-date { justify-self: start; border-left: 2px solid var(--hos-border); padding-left: 15px; }
.task-date strong, .task-date small { display: block; }
.task-date strong { font-size: 13px; }
.task-date small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.task-date.unscheduled { color: #a06555; }
.task-actions { display: flex; gap: 4px; justify-content: flex-end; }
.task-actions button { min-height: 48px; border: 0; border-radius: 10px; background: transparent; color: var(--accent-ink); padding: 0 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.task-actions button:hover { background: var(--bg-hover); }
.danger-link { color: #a34b3a !important; }
.danger-link.confirm-delete { background: #E53935; color: #fff !important; box-shadow: 0 4px 14px rgba(229, 57, 53, .4); animation: confirm-pulse 1s ease-in-out infinite; }
.danger-link.confirm-delete:hover { background: #c62828; }
@keyframes confirm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.empty-section { min-height: 80px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--border-strong); border-radius: 15px; color: var(--text-muted); background: rgba(26, 23, 24, .6); }
.empty-section p { margin: 0; }
.empty-section > span { color: var(--accent-bright); }
.form-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface-soft); padding: 14px 16px; }
.form-switch-row strong, .form-switch-row small { display: block; }
.form-switch-row strong { font-size: 14px; }
.form-switch-row small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.form-switch-row .hos-toggle { min-height: 48px; }

/* ============ Shopping ============ */
.shopping-page { max-width: 900px; }
.shopping-add-form { margin-bottom: 42px; }
.shopping-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.shopping-add-input { min-height: 64px; }
.shopping-add-button { min-height: 64px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; padding: 0 30px; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 12px 30px var(--accent-glow); }
.shopping-add-button:hover { background: var(--accent-hover); }
.shopping-add-button:disabled { opacity: .62; cursor: wait; }
.shopping-section { margin-top: 34px; }
.shopping-section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.shopping-section > header h2 { margin: 0; font: 700 20px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.025em; }
.shopping-section > header > span { display: grid; place-items: center; min-width: 27px; height: 27px; border-radius: 20px; background: #281719; color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.shopping-list { display: grid; gap: 9px; }
.shopping-row { min-height: 84px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: 17px; background: var(--bg-card); padding: 14px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.shopping-toggle { width: 56px; height: 56px; border: 2px solid var(--hos-border); border-radius: 50%; background: var(--bg-surface); color: white; cursor: pointer; font-weight: 700; font-size: 20px; line-height: 1; }
.shopping-toggle:hover { border-color: var(--accent); color: var(--accent-hover); }
.shopping-row.completed { opacity: .72; }
.shopping-row.completed .shopping-toggle { border-color: var(--accent); background: var(--accent); }
.shopping-row.completed .shopping-name { color: #81797b; text-decoration: line-through; }
.shopping-name { min-width: 0; font: 600 18px/1.2 "DM Sans", system-ui, sans-serif; overflow-wrap: anywhere; }
.shopping-completed-section .shopping-row { min-height: 60px; grid-template-columns: 44px minmax(0, 1fr); padding: 9px 14px; }
.shopping-completed-section .shopping-toggle { width: 44px; height: 44px; font-size: 16px; }
.shopping-completed-section .shopping-name { font-size: 15px; }
.empty-section.compact { min-height: 56px; }

/* ============ Recurrence ============ */
.recurrence-select {
    width: 100%; min-height: 60px; border: 1px solid var(--border-strong); border-radius: 12px;
    background: var(--bg-surface); color: var(--text); padding: 12px 44px 12px 16px; font-size: 15px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8f92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.recurrence-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); outline: 0; }
.recurrence-interval-row { display: grid; grid-template-columns: auto 96px auto; align-items: end; gap: 12px; margin-top: 18px; }
.recurrence-interval-row .field-label { margin: 0 0 10px; }
.recurrence-interval-input { min-height: 60px; text-align: center; }
.recurrence-interval-unit { display: grid; place-items: center; min-height: 60px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.task-recurrence { color: var(--text-muted); font-size: 12px; }
.wall-recurrence { color: var(--text-muted); font-size: 12px; }

/* ============ Settings ============ */
.settings-grid { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); grid-template-areas: "side members"; align-items: start; gap: 18px; }
.settings-column { grid-area: side; display: grid; gap: 18px; min-width: 0; }
.settings-card { border: 1px solid var(--border); border-radius: 19px; background: var(--bg-card); box-shadow: 0 8px 25px rgba(0, 0, 0, .16); }
.settings-card.members-card { grid-area: members; align-self: stretch; }
.settings-card > header { min-height: 62px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 12px 18px; }
.settings-card > header h2 { margin: 0; font: 700 17px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.settings-card > header p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.settings-card > header .secondary-action { margin-left: auto; min-height: 52px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.settings-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; background: #32171b; color: #ff8490; font-size: 20px; font-weight: 700; }
.settings-icon.blue { background: #2a181c; color: #ef6b78; font-size: 14px; }
.settings-icon.sand { background: #391b20; color: #ff9aa3; }
.settings-card-body { padding: 18px; }
.large-setting-input { font-size: 17px; font-weight: 600; }
.settings-hint { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.settings-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; min-height: 48px; }
.settings-form-footer .inline-error { flex: 1; }
.settings-save { min-height: 56px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; box-shadow: 0 10px 24px var(--accent-glow); white-space: nowrap; font-size: 15px; }
.settings-save:not(:disabled):hover { background: var(--accent-hover); }
.settings-save:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.inline-error.compact { margin-top: 0; }
.saved-note { display: inline-flex; align-items: center; gap: 8px; color: #6FBF8A; font-size: 13px; font-weight: 700; }
.saved-note i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(111, 191, 138, .16); font-size: 11px; font-style: normal; }
.saved-note.member-note { padding: 2px 4px; }

/* --- Members --- */
.member-list { display: grid; gap: 10px; }
.member-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); padding: 10px 12px; transition: border-color .15s ease, background .15s ease; }
.member-row:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.member-row.inactive-member { opacity: .6; }
.member-row.editing { align-items: flex-start; border-color: #5a2a2f; background: var(--bg-surface-soft); }
.member-row.editing:hover { border-color: #5a2a2f; background: var(--bg-surface-soft); }
.member-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--member-color); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 2px var(--bg-card); }
.member-identity { flex: 1; min-width: 0; }
.member-identity strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-color-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text-faint); font-size: 11px; letter-spacing: .05em; }
.member-color-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--member-color); box-shadow: 0 0 0 1px var(--border-strong); }
.member-status-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 0 10px; color: var(--text-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.member-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #555555; }
.member-status-pill.active { border-color: #5a2930; background: var(--accent-soft); color: var(--accent-ink); }
.member-status-pill.active::before { background: var(--accent); }
.member-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.member-row-actions > button { min-height: 48px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); padding: 0 16px; cursor: pointer; font-size: 13px; font-weight: 700; }
.member-row-actions > button:hover { border-color: #7f292e; background: #281719; color: var(--accent-ink); }
.member-row-actions .member-menu-button { min-width: 48px; padding: 0; font-size: 16px; }
.member-menu-wrap { position: relative; }
.member-menu-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 32; background: transparent; }
.member-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 33; min-width: 190px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); padding: 6px; animation: fade-in .14s ease-out; }
.member-menu button { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: transparent; padding: 0 12px; color: var(--danger-ink); cursor: pointer; font-size: 13px; font-weight: 700; text-align: left; }
.member-menu button:hover { background: var(--danger-surface); }
.member-edit-fields { flex: 1; min-width: 0; display: grid; gap: 10px; }
.member-edit-fields .text-input { min-height: 48px; padding: 9px 12px; }
.member-edit-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.member-edit-actions button { min-height: 48px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); padding: 0 16px; cursor: pointer; font-size: 13px; font-weight: 700; white-space: nowrap; }
.member-edit-actions button:hover { background: var(--bg-hover); }
.member-edit-actions button.is-save { border-color: transparent; background: var(--accent); color: #fff; box-shadow: 0 8px 20px var(--accent-glow); }
.member-edit-actions button.is-save:not(:disabled):hover { background: var(--accent-bright); }
.member-edit-actions button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.empty-members { display: flex; align-items: center; gap: 12px; min-height: 90px; color: var(--text-muted); }
.empty-members > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px dashed var(--hos-border); border-radius: 50%; font-size: 23px; }
.empty-members strong { color: var(--text); }
.empty-members p { margin: 4px 0 0; font-size: 12px; }

/* --- Waste collection --- */
.waste-schedule-list { display: grid; gap: 10px; }
.waste-schedule-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) auto; align-items: center; gap: 12px; min-height: 66px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); padding: 10px 12px; transition: border-color .15s ease, background .15s ease; }
.waste-schedule-row:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.waste-schedule-row.disabled { opacity: .55; }
.waste-type-name { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-card); font-size: 22px; }
.waste-type-title { font-size: 15px; white-space: nowrap; }
.waste-day-select { width: 100%; min-height: 46px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-surface); color: var(--text); padding: 8px 36px 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a8f92' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.waste-day-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); outline: 0; }
.waste-day-select:disabled { cursor: not-allowed; opacity: .6; }

/* ============ Hos components (modal, toggle, pickers) ============ */
.hos-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 18px; }
.hos-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 71; background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in .16s ease-out; }
.hos-modal-panel { position: relative; z-index: 72; display: flex; flex-direction: column; width: 560px; max-width: 100%; max-height: 100%; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--bg-card); box-shadow: 0 26px 80px rgba(0, 0, 0, .55); animation: fade-in .18s ease-out; overflow: hidden; }
.hos-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 18px 24px; }
.hos-modal-header h3 { margin: 0; font: 700 20px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.hos-modal-close { flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-surface); color: var(--text); font-size: 28px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.hos-modal-close:hover { border-color: var(--accent); color: var(--accent-ink); }
.hos-modal-body { overflow-y: auto; padding: 22px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hos-modal-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding: 16px 24px 22px; }
.hos-modal-spacer { flex: 1; }
.hos-modal-button { min-height: 56px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text); padding: 0 22px; cursor: pointer; font-size: 15px; font-weight: 700; }
.hos-modal-button:hover { border-color: var(--accent); }
.hos-modal-button.primary { border-color: transparent; background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--accent-glow); }
.hos-modal-button.primary:hover { background: var(--accent-hover); }
.hos-modal-button.subtle { color: var(--text-muted); }
.hos-modal-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.hos-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.hos-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hos-toggle-track { flex: 0 0 auto; display: flex; align-items: center; width: 64px; height: 36px; border-radius: 40px; background: #3A3A3A; padding: 4px; transition: background .15s ease; }
.hos-toggle-track i { display: block; width: 28px; height: 28px; border-radius: 50%; background: #f2eeee; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.hos-toggle input:checked + .hos-toggle-track { background: var(--accent); }
.hos-toggle input:checked + .hos-toggle-track i { transform: translateX(28px); }
.hos-toggle input:focus-visible + .hos-toggle-track { box-shadow: 0 0 0 3px rgba(255, 77, 77, .4); }
.hos-toggle-label { font-size: 15px; font-weight: 600; }
.hos-toggle.disabled { opacity: .5; cursor: not-allowed; }

.hos-time-picker, .hos-date-picker { position: relative; width: 100%; }
.hos-color-picker { position: relative; justify-self: start; }
.hos-picker-trigger { display: flex; align-items: center; gap: 10px; min-height: 60px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface); color: var(--text); padding: 0 16px; cursor: pointer; font-size: 16px; }
.hos-time-picker-trigger, .hos-date-picker-trigger { width: 100%; }
.hos-color-picker-trigger { width: auto; min-width: 128px; }
.hos-picker-trigger:hover { border-color: var(--accent); }
.hos-time-picker-value { flex: 1; text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.hos-date-picker-value { flex: 1; text-align: left; font-weight: 700; }
.hos-time-picker-value.placeholder, .hos-date-picker-value.placeholder { color: var(--text-faint); font-weight: 400; font-size: 15px; }
.hos-time-picker-clock, .hos-date-picker-calendar { display: inline-flex; color: var(--text-muted); }
.hos-picker-trigger:hover .hos-time-picker-clock, .hos-picker-trigger:hover .hos-date-picker-calendar { color: var(--accent-ink); }
.hos-picker-section-label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.hos-time-picker-grid { display: grid; gap: 16px; }
.hos-time-picker-hours, .hos-time-picker-minutes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hos-picker-option { min-height: 56px; border: 1px solid transparent; border-radius: 11px; background: var(--bg-surface); color: var(--text); cursor: pointer; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hos-picker-option:hover { background: var(--bg-hover); }
.hos-picker-option.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }

.hos-date-picker-nav { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 8px; margin-bottom: 16px; }
.hos-date-picker-arrow { height: 56px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-surface); color: var(--text); font-size: 32px; line-height: 1; padding: 0 0 3px; cursor: pointer; }
.hos-date-picker-arrow:hover { border-color: var(--accent); color: var(--accent-ink); }
.hos-date-picker-heading { min-height: 56px; border: 0; background: transparent; cursor: pointer; padding: 0 10px; }
.hos-date-picker-heading strong { font: 700 20px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.hos-date-picker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.hos-date-picker-weekdays span { display: grid; place-items: center; min-height: 32px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.hos-date-picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hos-date-picker-day { min-height: 56px; border: 1px solid transparent; border-radius: 12px; background: var(--bg-surface); color: var(--text); cursor: pointer; font-size: 16px; font-weight: 600; }
.hos-date-picker-day:hover { background: var(--bg-hover); }
.hos-date-picker-day.outside { color: var(--text-faint); background: transparent; }
.hos-date-picker-day.today { border-color: var(--accent); }
.hos-date-picker-day.selected { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 8px 20px var(--accent-glow); }

.hos-color-picker-swatch { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--picker-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.hos-color-picker-hex { color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .05em; font-size: 15px; }
.hos-color-picker-caret { color: var(--text-faint); font-size: 12px; }
.hos-color-picker-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hos-color-picker-option { min-height: 56px; border: 0; border-radius: 12px; background: var(--picker-color); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); display: grid; place-items: center; }
.hos-color-picker-option span { color: rgba(255, 255, 255, .92); font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.hos-color-picker-option.selected { box-shadow: inset 0 0 0 3px var(--bg-card), 0 0 0 2px var(--accent); }
.hos-color-picker-hex-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.hos-color-picker-hex-field span { color: var(--text-muted); font-size: 13px; font-weight: 700; }
.hos-color-picker-hex-field input { width: 140px; min-height: 52px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--bg-surface); color: var(--text); padding: 0 12px; font-size: 15px; letter-spacing: .05em; }
.hos-color-picker-hex-field input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); }
.hos-color-picker-hex-field input.invalid { border-color: #a34838; }
.hos-color-picker-hex-error { margin: 8px 0 0; color: #efa08d; font-size: 12px; font-weight: 600; }

/* --- Shared color & account --- */
.shared-color-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.shared-color-dot { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--shared-color); box-shadow: inset 0 0 0 3px var(--bg-card), 0 0 0 1px #5d4f51; }
.account-row { display: flex; align-items: center; gap: 12px; }
.account-copy { flex: 1; min-width: 0; }
.account-copy strong { display: block; font-size: 15px; }
.account-copy small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-note { margin: 14px 0 0; border-top: 1px solid var(--border); padding-top: 12px; color: var(--text-faint); font-size: 11px; }

/* --- Confirm dialog --- */
.confirm-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 51; width: 420px; max-width: calc(100% - 32px); width: min(420px, calc(100% - 32px)); border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg-card); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); padding: 24px; animation: fade-in .18s ease-out; }
.confirm-dialog h2 { margin: 0; font: 700 20px "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.confirm-dialog p { margin: 10px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm-dialog-actions button { min-height: 52px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--bg-surface); color: var(--text); padding: 0 18px; cursor: pointer; font-size: 14px; font-weight: 700; }
.confirm-dialog-actions button:hover { background: var(--bg-hover); }
.confirm-dialog-actions button.danger { border-color: #71453d; background: #2d1d1a; color: #efa08e; }
.confirm-dialog-actions button.danger:hover { background: #38241f; }
.confirm-dialog-actions button:disabled { opacity: .55; cursor: wait; }

/* ============ Authentication ============ */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(470px, 1.05fr) minmax(480px, .95fr); background: var(--bg-card); }
.auth-story { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: clamp(32px, 5vw, 72px); background: radial-gradient(circle at 18% 20%, rgba(229, 57, 53, .24), transparent 36%), linear-gradient(145deg, #170d0f, #080808 68%); color: #fff; }
.auth-story::before, .auth-story::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%; pointer-events: none; }
.auth-story::before { width: 680px; height: 680px; left: -370px; top: 140px; }
.auth-story::after { width: 520px; height: 520px; right: -250px; bottom: -130px; }
.auth-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; width: max-content; color: white; text-decoration: none; }
.auth-brand .brand-mark { background: #f7f3f3; box-shadow: none; border: 0; }
.auth-brand .brand-mark i { background: var(--accent); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font: 700 24px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: .04em; }
.auth-brand small { margin-top: 5px; color: rgba(255, 255, 255, .65); font-size: 11px; }
.auth-story-copy { position: relative; z-index: 2; margin: auto 0 30px; max-width: 670px; }
.eyebrow.light { color: var(--accent-ink); }
.auth-story h1 { margin: 15px 0 22px; font: 600 clamp(42px, 5.5vw, 78px)/1.06 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.06em; }
.auth-story-copy p { max-width: 530px; margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
.auth-mini-calendar { position: relative; z-index: 2; width: 390px; max-width: 78%; width: min(390px, 78%); display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; transform: rotate(-2deg); padding: 15px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 17px; background: rgba(255, 255, 255, .08); box-shadow: 0 20px 55px rgba(0, 0, 0, .35); }
.auth-mini-calendar span, .auth-mini-calendar i { display: grid; place-items: center; height: 31px; font-size: 10px; font-style: normal; }
.auth-mini-calendar span { color: rgba(255, 255, 255, .52); font-weight: 700; }
.auth-mini-calendar i { border-radius: 8px; background: rgba(255, 255, 255, .07); }
.auth-mini-calendar i.marked { background: var(--accent); color: white; font-weight: 700; }
.auth-privacy { position: absolute; right: clamp(32px, 4vw, 68px); bottom: 37px; color: rgba(255, 255, 255, .45); }
.auth-content { display: grid; place-items: center; padding: 42px clamp(28px, 6vw, 92px); }
.auth-form-wrap { width: 100%; max-width: 470px; width: min(100%, 470px); }
.auth-form-wrap h2 { margin: 9px 0 10px; font: 700 clamp(32px, 3.4vw, 46px)/1.13 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.045em; }
.auth-lead { margin: 0 0 30px; color: var(--text-muted); }
.demo-note { display: flex; align-items: center; gap: 11px; margin: -9px 0 22px; border: 1px solid #573036; border-radius: 12px; background: #241417; padding: 11px 13px; }
.demo-note > span { color: var(--accent-bright); font-size: 11px; }
.demo-note strong, .demo-note small { display: block; }
.demo-note strong { font-size: 12px; }
.demo-note small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin: 16px 0 8px; color: #b8afb1; font-size: 13px; font-weight: 700; }
.auth-form input { width: 100%; min-height: 60px; border: 1px solid var(--border-strong); border-radius: 13px; padding: 0 15px; background: var(--bg-surface); color: var(--text); }
.auth-form input:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.label-row label { margin-bottom: 8px; }
.label-row a { color: var(--accent); font-size: 12px; font-weight: 700; }
.validation-message { margin-top: 5px; color: #a34838; font-size: 12px; }
.form-error { margin-top: 14px; border-radius: 10px; border: 1px solid #694039; background: var(--danger-surface); color: var(--danger-ink); padding: 12px 14px; font-size: 13px; font-weight: 600; }
.auth-form .hos-toggle { margin-top: 18px; }
.auth-submit { min-height: 64px; display: flex; justify-content: space-between; align-items: center; margin-top: 25px; border: 0; border-radius: 14px; background: var(--accent); color: white; padding: 0 22px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px var(--accent-glow); }
.auth-submit:hover { background: var(--accent-hover); }
.auth-submit:disabled { opacity: .62; cursor: wait; }
.auth-submit span { font-size: 24px; font-weight: 400; }
.auth-switch { margin: 24px 0 0; color: var(--text-muted); text-align: center; font-size: 13px; }
.auth-switch a { color: var(--accent); font-weight: 700; }
.link-btn { display: inline; background: none; border: 0; padding: 0 2px 1px; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 6px; text-decoration: none; }
.link-btn:hover { color: var(--accent-bright); text-decoration: underline; }
.forgot-banner { display: flex; align-items: center; gap: 11px; margin: -9px 0 22px; border: 1px solid #573036; border-radius: 12px; background: #241417; padding: 11px 13px; }
.forgot-banner-body strong, .forgot-banner-body small { display: block; }
.forgot-banner-body strong { font-size: 12px; }
.forgot-banner-body small { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.forgot-close { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.forgot-close:hover { background: rgba(255, 255, 255, .16); color: var(--text); }
.prod-hint { margin: -9px 0 22px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface-soft); color: var(--text-muted); padding: 11px 13px; font-size: 12.5px; font-weight: 600; }
.form-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============ Not found ============ */
.not-found-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.not-found-page > span { color: var(--hos-text-muted); font: 700 clamp(70px, 12vw, 150px)/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.08em; }
.not-found-page h1 { margin: 10px 0; font: 700 32px "Manrope", "DM Sans", system-ui, sans-serif; }
.not-found-page p { margin: 0 0 22px; color: var(--text-muted); }
.not-found-page a { min-height: 56px; display: inline-flex; align-items: center; border-radius: 13px; background: var(--accent); color: white; padding: 0 22px; text-decoration: none; font-weight: 700; box-shadow: 0 12px 30px var(--accent-glow); }

/* ============ Embedded calendar (inside shell) ============ */
.embedded-calendar-page { position: fixed; z-index: 1; top: 82px; right: 0; bottom: 0; left: 0; height: auto; overflow: hidden; }
.embedded-calendar-page .wall-page { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: clamp(12px, 2vh, 24px) clamp(22px, 3.5vw, 58px) clamp(12px, 2vh, 24px); overflow: hidden; }
.embedded-calendar-page .wall-header { min-height: clamp(58px, 8vh, 74px); grid-template-columns: 1fr auto; }
.embedded-calendar-page .brand-lockup { display: none; }
.embedded-calendar-page .month-nav { justify-self: start; }
.embedded-calendar-page .month-heading { text-align: left; min-width: 205px; }
.embedded-calendar-page .wall-status { grid-column: 2; }
.embedded-calendar-page .calendar-toolbar { min-height: clamp(54px, 7vh, 68px); }
.embedded-calendar-page .calendar-card { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.embedded-calendar-page .weekday-row { min-height: clamp(36px, 5vh, 49px); }
.embedded-calendar-page .month-grid { min-height: 0; grid-template-rows: repeat(var(--calendar-week-count), minmax(0, 1fr)); }
.embedded-calendar-page .calendar-state-overlay { top: 165px; right: 8%; bottom: 70px; left: 8%; inset: 165px 8% 70px; }

/* Dynamic viewport heights — applied only where the engine supports them */
@supports (height: 100dvh) {
    .wall-shell, .wall-page { min-height: 100dvh; }
    .month-grid { min-height: 0; }
    .app-shell { min-height: 100dvh; }
    .app-main { min-height: calc(100dvh - 82px); }
    .auth-shell, .auth-story { min-height: 100dvh; }
    .not-found-page { min-height: 60dvh; }
    .embedded-calendar-page .wall-page { padding: clamp(12px, 2dvh, 24px) clamp(22px, 3.5vw, 58px) clamp(12px, 2dvh, 24px); }
    .embedded-calendar-page .wall-header { min-height: clamp(58px, 8dvh, 74px); }
    .embedded-calendar-page .calendar-toolbar { min-height: clamp(54px, 7dvh, 68px); }
    .embedded-calendar-page .weekday-row { min-height: clamp(36px, 5dvh, 49px); }
}

/* ============ Responsive ============ */
@media (min-width: 1800px) {
    .wall-page { padding-left: 3.2vw; padding-right: 3.2vw; }
    .wall-header { min-height: 96px; }
    .wall-content-grid.with-overview { grid-template-columns: minmax(0, 1fr) clamp(400px, 22vw, 540px); gap: clamp(18px, 1.3vw, 30px); }
    .wall-content-grid.with-overview .wall-overview { display: flex; }
    .wall-content-grid.with-overview .calendar-card { min-width: 0; }
    .nav-arrow { min-width: 56px; height: 56px; font-size: 36px; }
    .today-button { height: 56px; min-width: 110px; font-size: 16px; }
    .exit-wall-button { min-height: 56px; padding: 0 22px; font-size: 16px; }
    .month-heading span { font-size: clamp(28px, 2vw, 36px); }
    .calendar-toolbar { height: 58px; }
    .month-grid { min-height: 0; }
    @supports (height: 100dvh) {
        .month-grid { min-height: 0; }
    }
    .day-cell { padding: 16px; }
    .day-number { width: 40px; height: 40px; font-size: 19px; }
    .calendar-item { padding: 10px 12px; border-radius: 10px; }
    .item-title { font-size: clamp(14px, .82vw, 19px); }
    .item-time { font-size: 13px; }
    .task-drawer { width: 680px; }
    .day-cell.today { background: linear-gradient(180deg, rgba(229, 57, 53, .14), rgba(229, 57, 53, .07)); box-shadow: inset 0 0 0 2px rgba(255, 90, 103, .42); }
}

@media (max-width: 1050px) {
    .app-header { grid-template-columns: auto 1fr; }
    .desktop-navigation { justify-self: end; }
    .account-menu { display: none; }
    .task-row { grid-template-columns: 42px minmax(210px, 1fr) 130px; }
    .task-actions { grid-column: 2 / -1; justify-content: flex-start; margin-top: -8px; }
    .settings-grid { grid-template-columns: 1fr; grid-template-areas: none; }
    .settings-column { grid-area: auto; }
    .settings-card.members-card { grid-area: auto; }
}

@media (max-width: 800px) {
    .wall-page { height: auto; min-height: 100vh; display: block; overflow: visible; padding: 14px 12px 88px; }
    .wall-header { min-height: 62px; grid-template-columns: 1fr auto; gap: 8px; }
    .brand-mark { width: 39px; height: 39px; border-radius: 13px; padding: 10px 8px; }
    .brand-lockup { gap: 9px; }
    .brand-lockup strong { font-size: 22px; }
    .brand-lockup small { display: none; }
    .wall-status { display: none; }
    .month-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 6px; padding: 4px 0 9px; }
    .month-heading { min-width: 165px; }
    .month-heading span { font-size: 20px; }
    .calendar-toolbar { min-height: 54px; gap: 8px; padding: 5px 0; }
    .legend { gap: 9px; overflow: hidden; }
    .legend-person { gap: 5px; font-size: 11px; }
    .today-button { min-width: 72px; height: 44px; padding: 0 10px; }
    .calendar-card { border-radius: 15px; }
    .weekday-row { min-height: 38px; }
    .weekday-row div { font-size: 11px; }
    .month-grid { min-height: 600px; grid-template-rows: repeat(var(--calendar-week-count), 100px); }
    .month-grid.weeks-4 { min-height: 400px; }
    .month-grid.weeks-5 { min-height: 500px; }
    .day-cell { padding: 5px 3px; }
    .day-number { width: 24px; height: 24px; font-size: 12px; }
    .calendar-item { padding: 4px; }
    .item-topline { gap: 3px; }
    .item-type-badge { width: 12px; height: 12px; font-size: 7px; }
    .item-title, .item-time { font-size: 8px; }
    .item-owner { display: none; }
    .more-items { padding: 0 3px; font-size: 9px; }
    .add-button { right: 18px; bottom: 18px; min-width: 54px; width: 54px; height: 54px; border-radius: 50%; padding: 0; font-size: 0; }
    .add-button span { margin: 0; font-size: 26px; }
    .drawer-header { padding: 24px 20px 18px; }
    .drawer-body { padding: 22px 20px 26px; }
    .drawer-footer { padding: 14px 20px 20px; }
    .segmented-control { grid-template-columns: 1fr; }
    .member-picker { grid-template-columns: 1fr; }
    .hos-modal { padding: 10px; }
    .hos-modal-panel { width: 100%; }
    .hos-time-picker-hours, .hos-time-picker-minutes { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
    .app-header { position: static; height: 67px; padding: 0 18px; }
    .desktop-navigation { display: none; }
    .app-main { min-height: calc(100vh - 67px); padding-bottom: 68px; }
    @supports (height: 100dvh) {
        .app-main { min-height: calc(100dvh - 67px); }
    }
    .mobile-navigation { position: fixed; z-index: 24; top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0; height: 68px; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--border); background: rgba(12, 11, 11, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    .mobile-navigation a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); text-decoration: none; font-size: 10px; font-weight: 700; }
    .mobile-navigation a span { font-size: 19px; }
    .mobile-navigation a.active { color: var(--accent); }
    .content-page { width: min(100% - 28px, 1180px); padding: 32px 0 40px; }
    .page-heading { align-items: flex-start; margin-bottom: 28px; }
    .page-heading h1 { font-size: 36px; }
    .page-heading p { font-size: 14px; }
    .primary-action { min-width: 54px; font-size: 0; padding: 0 17px; }
    .primary-action span { margin: 0; font-size: 28px; }
    .task-row { grid-template-columns: 37px 1fr; gap: 12px; padding: 14px; }
    .task-date { grid-column: 2; border: 0; padding: 0; display: flex; gap: 8px; align-items: center; }
    .task-date small { margin: 0; }
    .task-actions { grid-column: 2; margin: -3px 0 0 -8px; flex-wrap: wrap; }
    .settings-card > header { padding: 12px 14px; }
    .settings-card-body { padding: 14px; }
    .member-row { flex-wrap: wrap; row-gap: 8px; }
    .member-row .member-row-actions { flex-basis: 100%; justify-content: flex-end; margin-left: 56px; }
    .member-row-actions > button { min-height: 48px; }
    .member-row.editing .member-edit-fields { flex-basis: 100%; }
    .member-row.editing .member-edit-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width: 100%; margin-left: 56px; }
    .member-edit-actions button { min-height: 48px; }
    .settings-form-footer { flex-wrap: wrap; }
    .settings-form-footer .inline-error, .settings-form-footer .saved-note { flex: 1 1 100%; }
    .auth-shell { grid-template-columns: 1fr; background: var(--bg-card); }
    .auth-story { display: none; }
    .auth-content { min-height: 100vh; padding: 34px 22px; }
    @supports (height: 100dvh) {
        .auth-content { min-height: 100dvh; }
    }
    .form-two-columns { grid-template-columns: 1fr; gap: 0; }
    .embedded-calendar-page { position: static; z-index: auto; top: auto; right: auto; bottom: auto; left: auto; height: auto; overflow: visible; }
    .embedded-calendar-page .wall-page { height: auto; display: block; padding: 18px 10px 75px; overflow: visible; }
    .embedded-calendar-page .wall-header { display: block; }
    .embedded-calendar-page .month-nav { display: flex; }
    .embedded-calendar-page .wall-status { display: none; }
    .embedded-calendar-page .month-heading { text-align: center; }
    .embedded-calendar-page .month-grid { min-height: 600px; }
    .embedded-calendar-page .month-grid.weeks-4 { min-height: 400px; }
    .embedded-calendar-page .month-grid.weeks-5 { min-height: 500px; }
    .calendar-state-overlay { top: 150px; right: 18px; bottom: 50px; left: 18px; inset: 150px 18px 50px; }
}

@media (max-width: 460px) {
    .time-row { grid-template-columns: 1fr 16px 1fr; }
    .task-drawer { width: 100%; }
}

@media (max-width: 520px) {
    .time-fields { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ Samsung Flip / Tizen compatibility fallbacks ============ */
/* The UI above is written against stable CSS (flex, grid, border-radius, box-shadow,
   opacity, transform). These overrides only pin down effects that older
   Chromium/Tizen engines may not support, so the app still looks correct
   when backdrop-filter, dvh or newer shorthands are unavailable.
   .tizen-browser comes from user-agent detection, .no-glass from a
   CSS.supports(backdrop-filter) capability check - they share the same
   solid-background fallbacks. */

.tizen-browser .app-header,
.no-glass .app-header,
.tizen-browser .mobile-navigation,
.no-glass .mobile-navigation {
    background: #0c0b0b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tizen-browser .drawer-backdrop,
.no-glass .drawer-backdrop,
.tizen-browser .hos-modal-backdrop,
.no-glass .hos-modal-backdrop {
    background: rgba(0, 0, 0, .84);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tizen-browser .calendar-state-overlay,
.no-glass .calendar-state-overlay {
    background: #0e0c0c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tizen-browser .toast-message,
.no-glass .toast-message {
    background: #2b1216;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ============ Touch / kiosk sizing (Samsung Flip Pro 55", 3840x2160 @ DPR 1) ============ */
/* At 4K with DPR 1 every CSS px is physically half the size of a desktop px,
   so interactive controls need larger footprints for comfortable finger use.
   The >=801px scope keeps compact phone layouts untouched. */

/* Safe on any viewport (wall route) */
.wall-device .more-items { min-height: 44px; padding: 5px 12px; font-size: 13px; }
.wall-device .legend-person { font-size: 16px; }
.wall-device .exit-wall-button { min-height: 60px; font-size: 16px; }
.wall-device .hos-picker-trigger { min-height: 64px; }
.wall-device .hos-modal-button { min-height: 60px; }

@media (min-width: 801px) {
    /* Shared touch targets (any coarse-pointer device: Flip everywhere) */
    .touch-device :focus-visible { outline-width: 3px; }

    .touch-device .desktop-navigation { gap: 10px; }
    .touch-device .desktop-navigation a { min-height: 56px; font-size: 16px; }
    .touch-device .account-menu button,
    .touch-device .task-actions button,
    .touch-device .agenda-actions button,
    .touch-device .member-row-actions > button,
    .touch-device .member-edit-actions button,
    .touch-device .member-menu button,
    .touch-device .confirm-dialog-actions button { min-height: 56px; }
    .touch-device .task-actions { gap: 12px; }
    .touch-device .agenda-actions { gap: 12px; }
    .touch-device .member-row-actions { gap: 12px; }
    .touch-device .account-menu button { padding: 0 12px; }
    .touch-device .member-menu-button { min-width: 56px; }

    .touch-device .text-input { min-height: 64px; }
    .touch-device .title-input { min-height: 72px; }
    .touch-device .auth-form input { min-height: 64px; }
    .touch-device .hos-color-picker-hex-field input { min-height: 60px; }

    .touch-device .segmented-control button { min-height: 64px; font-size: 16px; }
    .touch-device .member-chip { min-height: 72px; grid-template-columns: 48px 1fr 24px; }
    .touch-device .member-chip i { width: 48px; height: 48px; }
    .touch-device .hos-toggle { min-height: 64px; }
    .touch-device .hos-toggle-track { width: 72px; height: 40px; }
    .touch-device .hos-toggle-track i { width: 32px; height: 32px; }
    .touch-device .hos-toggle input:checked + .hos-toggle-track i { transform: translateX(32px); }
    .touch-device .form-switch-row .hos-toggle { min-height: 56px; }
    .touch-device .complete-toggle { width: 56px; height: 56px; }
    .touch-device .shopping-toggle { width: 64px; height: 64px; font-size: 24px; }
    .touch-device .shopping-row { min-height: 96px; }
    .touch-device .shopping-add-button { min-height: 72px; font-size: 18px; }
    .touch-device .shopping-completed-section .shopping-toggle { width: 52px; height: 52px; }

    .touch-device .hos-picker-option { min-height: 64px; font-size: 17px; }
    .touch-device .hos-time-picker-hours, .touch-device .hos-time-picker-minutes { gap: 8px; }
    .touch-device .hos-date-picker-heading { min-height: 64px; }
    .touch-device .hos-date-picker-day { min-height: 64px; font-size: 18px; }
    .touch-device .hos-date-picker-nav { grid-template-columns: 64px 1fr 64px; }
    .touch-device .hos-date-picker-arrow { height: 64px; }
    .touch-device .hos-color-picker-option { min-height: 64px; }
    .touch-device .hos-modal-button { min-height: 64px; font-size: 16px; }
    .touch-device .hos-modal-close { width: 64px; height: 64px; }

    .touch-device .task-row { min-height: 104px; grid-template-columns: 56px minmax(280px, 1fr) 170px auto; }
    .touch-device .member-row { min-height: 80px; }
    .touch-device .member-avatar { width: 56px; height: 56px; }
    .touch-device .member-menu { min-width: 220px; }

    .touch-device .settings-save,
    .touch-device .primary-action,
    .touch-device .secondary-action { min-height: 60px; }
    .touch-device .settings-card > header .secondary-action { min-height: 60px; }
    .touch-device .auth-submit { min-height: 72px; }
    .touch-device .save-button,
    .touch-device .delete-button,
    .touch-device .complete-drawer-button { min-height: 72px; }

    .touch-device .day-number { width: 56px; height: 56px; font-size: 17px; }
    .touch-device .day-cell.has-multiple-items .day-number { width: 44px; height: 44px; font-size: 14px; }
    .touch-device .more-items { min-height: 48px; font-size: 13px; }
    .touch-device .day-cell.has-multiple-items .calendar-item { min-height: 32px; }
    .touch-device .nav-arrow { min-width: 60px; height: 60px; }
    .touch-device .close-button { min-width: 64px; height: 64px; }
    .touch-device .today-button { min-height: 60px; }
    .touch-device .exit-wall-button { min-height: 64px; }
    .touch-device .app-brand { min-height: 56px; }
    .touch-device .embedded-calendar-page .month-heading { min-height: 56px; }
    .touch-device .page-state button, .touch-device .calendar-state-overlay button { min-height: 64px; }
    .touch-device .not-found-page a { min-height: 64px; }
    .touch-device .session-banner { min-height: 64px; }
    .touch-device .session-banner a { display: inline-flex; align-items: center; min-height: 56px; padding: 0 10px; }
    .touch-device .label-row a, .touch-device .label-row .link-btn, .touch-device .auth-switch a { display: inline-flex; align-items: center; min-height: 56px; padding: 0 10px; vertical-align: middle; }
    .touch-device .label-row label { margin-bottom: 0; }
    .touch-device .confirm-dialog { width: min(480px, calc(100% - 32px)); }

    /* Wall / kiosk readability extras (dedicated display route) */
    .wall-device .wall-header { min-height: 110px; }
    .wall-device .brand-lockup strong { font-size: clamp(26px, 2vw, 38px); }
    .wall-device .month-heading { min-height: 64px; }
    .wall-device .month-heading span { font-size: clamp(26px, 2vw, 42px); }
    .wall-device .clock { font-size: clamp(28px, 2.4vw, 44px); }
    .wall-device .weekday-row div { font-size: clamp(13px, 1vw, 18px); }
    .wall-device .legend-person { font-size: 18px; }
    .wall-device .legend-person i { width: 32px; height: 32px; font-size: 14px; }

    .wall-device .day-number { width: 48px; height: 48px; font-size: 19px; }
    .wall-device .day-cell.has-multiple-items .day-number { width: 42px; height: 42px; font-size: 16px; }
    .wall-device .more-items { min-height: 56px; font-size: 15px; padding: 6px 12px; }
    .wall-device .nav-arrow { min-width: 64px; height: 64px; }
    .wall-device .today-button { min-height: 64px; min-width: 130px; font-size: 17px; }
    .wall-device .exit-wall-button { min-height: 64px; font-size: 17px; }
    .wall-device .add-button { height: 80px; min-width: 200px; font-size: 20px; }
    .wall-device .header-overdue-badge { min-height: 56px; padding: 0 18px; font-size: 16px; }

    .wall-device .calendar-item { min-height: 48px; padding: 10px 12px; }
    .wall-device .item-title { font-size: clamp(15px, .95vw, 19px); }
    .wall-device .item-time { font-size: clamp(13px, .75vw, 15px); }
    .wall-device .item-owner { font-size: 12px; }
    .wall-device .day-cell.has-multiple-items .calendar-item { min-height: 42px; padding: 7px 10px; }
    .wall-device .day-cell.is-packed .calendar-item { min-height: 40px; }
    .wall-device .day-cell.has-multiple-items .item-title,
    .wall-device .day-cell.has-multiple-items .item-time { font-size: clamp(11px, .8vw, 15px); }

    .wall-device .task-drawer { width: 900px; width: min(900px, 100%); }
    .wall-device .drawer-body { padding: 32px 40px 40px; }
    .wall-device .drawer-footer { padding: 24px 40px 34px; }
    .wall-device .drawer-header h2 { font-size: 36px; }
    .wall-device .drawer-header h2.editor-heading { font-size: 30px; }
    .wall-device .field-label, .wall-device .field-group legend { font-size: 17px; margin-bottom: 10px; }
    .wall-device .title-input { min-height: 84px; font-size: 24px; }
    .wall-device .text-input { min-height: 76px; font-size: 18px; }
    .wall-device .segmented-control button { min-height: 76px; font-size: 18px; }
    .wall-device .member-chip { min-height: 84px; grid-template-columns: 56px 1fr 24px; font-size: 17px; }
    .wall-device .member-chip i { width: 56px; height: 56px; }
    .wall-device .toggle-row { padding: 14px 22px; border-radius: 16px; }
    .wall-device .toggle-row .hos-toggle { min-height: 60px; }
    .wall-device .hos-toggle-label { font-size: 18px; }
    .wall-device .hos-toggle-track { width: 84px; height: 46px; border-radius: 46px; }
    .wall-device .hos-toggle-track i { width: 38px; height: 38px; }
    .wall-device .hos-toggle input:checked + .hos-toggle-track i { transform: translateX(38px); }
    .wall-device .save-button, .wall-device .delete-button, .wall-device .complete-drawer-button, .wall-device .secondary-drawer-button { min-height: 84px; font-size: 18px; }
    .wall-device .hos-picker-trigger { min-height: 80px; font-size: 19px; }
    .wall-device .hos-time-picker-value { font-size: 26px; }
    .wall-device .hos-date-picker-value { font-size: 19px; }
    .wall-device .hos-picker-option { min-height: 72px; font-size: 19px; }
    .wall-device .hos-time-picker-hours, .wall-device .hos-time-picker-minutes { gap: 10px; }
    .wall-device .hos-picker-section-label { font-size: 15px; }
    .wall-device .hos-date-picker-nav { grid-template-columns: 72px 1fr 72px; }
    .wall-device .hos-date-picker-arrow { height: 72px; }
    .wall-device .hos-date-picker-heading { min-height: 72px; }
    .wall-device .hos-date-picker-heading strong { font-size: 24px; }
    .wall-device .hos-date-picker-day { min-height: 72px; font-size: 20px; }
    .wall-device .hos-date-picker-weekdays span { font-size: 14px; }
    .wall-device .hos-modal-button { min-height: 72px; font-size: 18px; }
    .wall-device .hos-modal-close { width: 72px; height: 72px; }
    .wall-device .hos-modal-panel { width: 860px; }
    .wall-device .hos-modal-header { padding: 20px 28px; }
    .wall-device .hos-modal-body { padding: 26px 28px; }
    .wall-device .hos-modal-footer { padding: 20px 28px 26px; }

    .wall-device .rail-section { padding: 18px 20px; }
    .wall-device .rail-header h2 { font-size: 20px; }
    .wall-device .rail-count { min-width: 32px; height: 32px; font-size: 15px; }
    .wall-device .rail-header-link { min-height: 56px; padding: 0 16px; font-size: 15px; }
    .wall-device .rail-entry, .wall-device .rail-task { min-height: 64px; border-radius: 15px; }
    .wall-device .rail-entry { grid-template-columns: 76px minmax(0, 1fr); }
    .wall-device .rail-task { grid-template-columns: 60px minmax(0, 1fr); }
    .wall-device .rail-entry-copy strong { font-size: 17px; }
    .wall-device .rail-entry-copy small { font-size: 14px; }
    .wall-device .rail-member { width: 48px; height: 48px; font-size: 16px; }
    .wall-device .rail-task-toggle { width: 56px; height: 56px; font-size: 24px; }
    .wall-device .rail-weather-card { min-height: 84px; }
    .wall-device .rail-weather-icon { font-size: 48px; }
    .wall-device .rail-weather-copy strong { font-size: 30px; }
    .wall-device .rail-weather-copy span { font-size: 16px; }
    .wall-device .rail-weather-copy small { font-size: 14px; }

    /* Heavy blur over a 4K surface is wasteful on the embedded GPU */
    .wall-device .calendar-state-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(14, 12, 12, .97);
    }
}


/* Weather */
.weather-location-bar { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.weather-search { position: relative; flex: 1; min-width: 0; }
.weather-search form { display: flex; gap: 10px; }
.weather-search input { flex: 1; min-width: 0; }
.weather-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: 8px 0 0; padding: 6px; list-style: none; background: var(--hos-surface); border: 1px solid var(--hos-border); border-radius: 14px; box-shadow: 0 18px 40px #0008; }
.weather-search-results button { width: 100%; min-height: 48px; padding: 12px; text-align: left; color: var(--hos-text); border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.weather-search-results button:hover { background: var(--hos-surface-hover); }
.weather-geo { white-space: nowrap; }
.weather-current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: 32px; margin-bottom: 30px; border: 1px solid var(--hos-border); border-radius: 20px; background: radial-gradient(ellipse at top left, var(--hos-accent-muted), transparent 65%), var(--hos-surface); }
.weather-now { display: flex; align-items: center; gap: 24px; min-width: 0; }
.weather-icon { font-size: 80px; }
.weather-temperature { display: block; font-size: 64px; line-height: 1.2; letter-spacing: -.05em; }
.weather-now h2 { margin: 8px 0 0; font-size: 20px; overflow-wrap: anywhere; }
.weather-now p { margin: 0; color: var(--hos-text-muted); }
.weather-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
.weather-metric dt { color: var(--hos-text-muted); font-size: 13px; }
.weather-metric dd { margin: 8px 0 0; font-size: 24px; font-weight: 700; }
.weather-metric small { font-size: 13px; }
.weather-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.weather-day { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; border: 1px solid var(--hos-border); border-radius: 16px; background: var(--hos-surface); text-align: center; }
.weather-day > span, .weather-day small, .weather-day div > span { color: var(--hos-text-muted); }
.weather-day-icon { font-size: 36px; margin: 8px 0; }
.weather-day small { flex: 1; }
.weather-credit { margin-top: 24px; color: var(--hos-text-muted); font-size: 12px; }
.weather-credit a { color: inherit; }
@media (max-width: 800px) {
    .weather-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather-location-bar { flex-wrap: wrap; }
    .weather-search { flex-basis: 100%; }
    .weather-current { padding: 24px; }
    .weather-icon { font-size: 56px; }
    .weather-temperature { font-size: 52px; }
}
.weather-hourly-section { margin-bottom: 30px; }
.weather-hourly-note { color: var(--hos-text-muted); font-size: 13px; }
.weather-hours { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.weather-hour { flex: 0 0 110px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--hos-border); border-radius: 16px; background: var(--hos-surface); }
.weather-hour > span:first-child { color: var(--hos-text-muted); font-size: 12px; }
.calendar-weather { position: absolute; z-index: 1; top: 15px; right: 9px; max-width: calc(100% - 48px); font-size: clamp(9px, 1vw, 13px); white-space: nowrap; pointer-events: none; }
@media (max-width: 600px) { .calendar-weather { position: relative; display: block; top: auto; right: auto; max-width: 100%; font-size: 9px; white-space: normal; } }

/* ============ Today ============ */
.today-page { width: min(1560px, calc(100% - 48px)); margin: 0 auto; padding: clamp(30px, 3.4vw, 56px) 0 80px; }

.today-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.today-heading { min-width: 0; }
.today-heading h1 { margin: 10px 0 0; font: 700 clamp(38px, 4.4vw, 62px)/1.05 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.05em; text-transform: capitalize; }
.today-clock { flex: 0 0 auto; color: var(--hos-text); font: 700 clamp(42px, 4.4vw, 60px)/1 "Manrope", "DM Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.today-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: 20px; align-items: start; }
.today-main { display: grid; gap: 20px; min-width: 0; }
.today-side { display: grid; gap: 20px; min-width: 0; }

.today-card { border: 1px solid var(--hos-border); border-radius: 20px; background: var(--hos-surface); box-shadow: 0 18px 55px rgba(0, 0, 0, .22); overflow: hidden; }
.today-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--hos-border); padding: 14px 22px; }
.today-card > header h2 { margin: 0; font: 700 20px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.today-card > header > span { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; background: var(--hos-accent-muted); color: var(--hos-accent-ink); font-weight: 800; font-size: 14px; }

.today-list { display: grid; gap: 10px; padding: 18px; }

.today-event, .today-next-entry { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 78px; border: 1px solid color-mix(in srgb, var(--entry-color) 45%, var(--hos-border)); border-radius: 14px; background: color-mix(in srgb, var(--entry-color) 14%, var(--hos-surface)); padding: 12px 16px; }
.today-next-entry { grid-template-columns: 86px minmax(0, 1fr); }

.today-filter-row { display: flex; align-items: center; gap: 12px; margin: -8px 0 20px; }
.task-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }

.today-time { color: var(--hos-text); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-next-date { display: flex; flex-direction: column; gap: 3px; }
.today-next-date strong { color: var(--hos-text); font-size: 16px; text-transform: capitalize; }
.today-next-date small { color: var(--hos-text-muted); font-size: 13px; }

.today-entry-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.today-entry-copy strong { overflow: hidden; color: var(--hos-text); font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.today-entry-copy small { color: var(--hos-text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-entry-copy small.today-location { color: var(--hos-text-muted); }

.today-member-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--member-color); color: #fff; font-size: 17px; font-weight: 800; }

.today-task-group + .today-task-group { border-top: 1px solid var(--hos-border); }
.today-task-group-title { margin: 0; padding: 16px 22px 6px; color: var(--hos-text-muted); font: 700 13px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.today-task-group-title.overdue { color: var(--hos-accent-ink); }

.today-task { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; border: 1px solid var(--hos-border); border-radius: 14px; background: var(--hos-surface-2); padding: 12px 16px; }
.today-task.is-overdue { border-left: 4px solid var(--hos-accent); border-color: color-mix(in srgb, var(--hos-accent) 55%, var(--hos-border)); border-left-color: var(--hos-accent); background: color-mix(in srgb, var(--hos-accent) 12%, var(--hos-surface)); }
.today-complete { width: 56px; height: 56px; border: 2px solid var(--hos-border); border-radius: 50%; background: var(--hos-surface); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
.today-complete:hover { border-color: var(--hos-accent); color: var(--hos-accent-hover); }
.today-task.is-overdue .today-complete { border-color: var(--hos-accent); }

.today-overdue-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; background: var(--hos-accent); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }

.today-empty { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px; border: 1px dashed var(--hos-border); border-radius: 14px; color: var(--hos-text-muted); background: rgba(255, 255, 255, .015); padding: 14px; text-align: center; }
.today-empty > span { color: var(--hos-accent-ink); font-size: 22px; }
.today-empty p { margin: 0; }
.today-empty.compact { flex-direction: column; min-height: 120px; }
.today-empty a { display: inline-flex; align-items: center; min-height: 56px; padding: 0 18px; border-radius: 12px; background: var(--hos-accent); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px var(--hos-accent-glow); }

.today-weather { display: flex; align-items: center; gap: 22px; padding: 26px; }
.today-weather-icon { font-size: 72px; line-height: 1; }
.today-weather-main { min-width: 0; }
.today-weather-main strong { display: block; font: 700 58px/1.05 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.04em; }
.today-weather-main span { display: block; margin-top: 4px; color: var(--hos-text); font-size: 18px; }
.today-weather-main small { display: block; margin-top: 4px; color: var(--hos-text-muted); font-size: 14px; overflow-wrap: anywhere; }
.today-weather-main small.today-weather-range { color: var(--hos-text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.today-weather-main small.today-weather-precip { color: var(--hos-accent-ink); font-size: 13px; }

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

@media (max-width: 760px) {
    .today-page { width: min(100% - 28px, 1560px); padding: 28px 0 40px; }
    .today-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .today-clock { font-size: 40px; }
    .today-event, .today-next-entry { grid-template-columns: 70px minmax(0, 1fr); }
    .today-member-mark { width: 44px; height: 44px; }
    .today-weather-icon { font-size: 56px; }
    .today-weather-main strong { font-size: 48px; }
}

/* ============ Calendar view selector + week view ============ */
.view-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--hos-border); border-radius: 13px; background: var(--hos-surface); }
.view-tab { min-height: 48px; padding: 0 20px; border: 0; border-radius: 9px; background: transparent; color: var(--hos-text-muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.view-tab:hover { color: var(--hos-text); }
.view-tab.selected { background: var(--hos-accent); color: #fff; box-shadow: 0 8px 20px var(--hos-accent-glow); }

.calendar-card.week-card, .embedded-calendar-page .calendar-card.week-card { grid-template-rows: minmax(0, 1fr); }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 0; height: 100%; }
.week-day { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--hos-border); background: var(--hos-surface-2); overflow: hidden; }
.week-day:nth-child(7n) { border-right: 0; }
.week-day.past { background: #0A0A0A; }
.week-day.today { background: rgba(229, 57, 53, .07); box-shadow: inset 0 0 0 2px rgba(255, 90, 103, .38); }

.week-day-header { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--hos-border); background: var(--hos-surface); }
.week-day-name { color: var(--hos-text-muted); font-size: clamp(11px, .8vw, 13px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.week-day-number { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--hos-text); font-size: 17px; font-weight: 700; cursor: pointer; }
.week-day-number:hover { background: var(--hos-surface-hover); }
.week-day.today .week-day-number { background: var(--hos-accent); color: #fff; }
.week-today-badge { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: var(--hos-accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.week-day-weather { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-bottom: 1px solid var(--hos-border); }
.week-weather { font-size: clamp(11px, .8vw, 13px); color: var(--hos-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-weather-missing { color: #5A5557; }

.week-day-items { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.week-item { min-height: 56px; padding: 10px 12px; border-radius: 10px; }
.week-item .item-title { white-space: normal; }
.week-item .item-topline { flex-wrap: wrap; }
.week-empty-hint { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 72px; border: 1px dashed var(--hos-border); border-radius: 10px; background: transparent; color: var(--hos-text-muted); font-size: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.week-empty-hint:hover { border-color: var(--hos-accent); color: var(--hos-text); background: rgba(255, 255, 255, .02); }
.week-empty-hint > span { color: var(--hos-accent-ink); font-size: 20px; }

@media (min-width: 801px) {
    .touch-device .view-tab { min-height: 60px; font-size: 16px; padding: 0 26px; }
    .touch-device .week-day-header { min-height: 68px; }
    .touch-device .week-day-number { width: 56px; height: 56px; font-size: 20px; }
    .touch-device .week-day-weather { min-height: 48px; }
    .touch-device .week-weather { font-size: clamp(13px, .85vw, 16px); }
    .touch-device .week-item { min-height: 68px; padding: 12px 14px; }
    .touch-device .week-empty-hint { min-height: 68px; font-size: 15px; }
}

@media (max-width: 800px) {
    .view-tabs { gap: 2px; padding: 3px; }
    .view-tab { min-height: 40px; padding: 0 12px; font-size: 12px; }
    .week-grid { grid-template-columns: 1fr; height: auto; }
    .week-day { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--hos-border); }
    .week-day:last-child { border-bottom: 0; }
}

/* ============ Routines ============ */
.routines-page { max-width: 1100px; }
.routines-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.routine-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 116px; border: 1px solid var(--border); border-radius: 19px; background: var(--bg-card); padding: 18px 20px; text-align: left; cursor: pointer; box-shadow: 0 8px 25px rgba(0, 0, 0, .16); transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.routine-card:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-1px); }
.routine-card:active { transform: scale(.99); }
.routine-card.is-complete { border-color: #2c5a3c; background: #131f17; }
.routine-card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); font-size: 28px; line-height: 1; }
.routine-card.is-complete .routine-card-icon { background: rgba(111, 191, 138, .16); color: #6FBF8A; }
.routine-card-copy { min-width: 0; }
.routine-card-name { display: block; font: 700 20px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.routine-card-copy small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.routine-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.routine-progress b { font: 700 20px/1 "Manrope", "DM Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.routine-progress-bar { width: 96px; height: 8px; border-radius: 999px; background: #2a2526; overflow: hidden; }
.routine-progress-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s ease; }
.routine-card.is-complete .routine-progress-bar i { background: #6FBF8A; }
.routine-completed-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; background: rgba(111, 191, 138, .16); color: #6FBF8A; font-size: 13px; }

.routine-checklist-heading { align-items: center; }
.routine-checklist-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.routine-back { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.routine-back:hover { border-color: var(--accent); color: var(--accent-ink); }

.routine-checklist { display: grid; gap: 10px; }
.routine-all-done { display: flex; align-items: center; gap: 10px; min-height: 64px; border: 1px solid #2c5a3c; border-radius: 15px; background: #131f17; padding: 12px 18px; color: #6FBF8A; font-size: 17px; }
.routine-all-done span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #6FBF8A; color: #08120b; font-weight: 800; }
.routine-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 92px; border: 1px solid var(--border); border-radius: 17px; background: var(--bg-card); padding: 14px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.routine-item-toggle { width: 56px; height: 56px; border: 2px solid var(--hos-border); border-radius: 14px; background: var(--bg-surface); color: white; cursor: pointer; font-size: 24px; line-height: 1; font-weight: 700; }
.routine-item-toggle:hover { border-color: var(--accent); color: var(--accent-hover); }
.routine-item.is-done .routine-item-toggle { border-color: #6FBF8A; background: #6FBF8A; color: #08120b; }
.routine-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.routine-item-title { font: 600 20px/1.2 "DM Sans", system-ui, sans-serif; overflow-wrap: anywhere; }
.routine-item.is-done .routine-item-title { color: #81797b; text-decoration: line-through; }
.routine-item-member { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 13px; }
.routine-item-member i { width: 12px; height: 12px; border-radius: 50%; background: var(--member-color); box-shadow: 0 0 0 1px var(--border-strong); }
.routine-item-member.anyone { color: var(--text-faint); }

.routine-drawer { width: 720px; width: min(720px, 100%); }
.routine-item-list { display: grid; gap: 10px; margin-top: 12px; }
.routine-item-editor-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto auto; align-items: center; gap: 10px; }
.routine-item-editor-row .text-input { min-height: 56px; }
.routine-member-select { min-height: 56px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text); padding: 0 14px; font-size: 14px; cursor: pointer; }
.routine-member-select:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(229, 57, 53, .18); }
.routine-item-move { display: flex; gap: 6px; }
.routine-item-move button { width: 48px; height: 48px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; }
.routine-item-move button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.routine-item-move button:disabled { opacity: .35; cursor: not-allowed; }
.routine-add-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; align-items: start; }

@media (max-width: 800px) {
    .routines-grid { grid-template-columns: 1fr; }
    .routine-item-editor-row { grid-template-columns: minmax(0, 1fr) auto; }
    .routine-item-editor-row .text-input { grid-column: 1 / -1; }
    .routine-add-item-row { grid-template-columns: 1fr; }
    .routine-add-item-row .secondary-action { justify-self: start; }
}

@media (min-width: 801px) {
    .touch-device .routine-card { min-height: 128px; }
    .touch-device .routine-card-icon { width: 64px; height: 64px; font-size: 32px; }
    .touch-device .routine-item { min-height: 104px; }
    .touch-device .routine-item-toggle { width: 64px; height: 64px; }
    .touch-device .routine-back { width: 64px; height: 64px; }
    .touch-device .routine-item-move button { width: 56px; height: 56px; }
    .touch-device .routine-member-select { min-height: 64px; }
}

/* ============ Household status widgets ============ */
.status-widget-host {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.status-widget {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 14px;
    border: 1px solid var(--hos-border);
    border-radius: 16px;
    background: var(--hos-surface);
    padding: 14px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.status-widget.has-warning {
    border-color: rgba(229, 57, 53, .38);
}

.status-widget-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hos-accent-muted);
    color: var(--hos-accent-ink);
    font-size: 22px;
    line-height: 1;
}

.status-widget-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-widget-title {
    color: var(--hos-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-widget-primary {
    font: 700 18px/1.2 "Manrope", "DM Sans", system-ui, sans-serif;
    color: var(--hos-text);
    overflow-wrap: anywhere;
}

.status-widget-secondary {
    color: var(--hos-text-muted);
    font-size: 13px;
}

.status-widget-warning {
    color: var(--hos-accent-ink);
    font-size: 12px;
    font-weight: 600;
}

.status-widget-action {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
    border: 1px solid var(--hos-border);
    border-radius: 10px;
    background: transparent;
    color: var(--hos-text);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.status-widget-action:hover {
    border-color: var(--hos-accent);
    color: var(--hos-accent-ink);
}

.today-side .status-widget-host,
.wall-overview .status-widget-host {
    grid-template-columns: 1fr;
}

/* ============ Day view ============ */
.day-view-page { width: min(1560px, calc(100% - 48px)); margin: 0 auto; padding: clamp(30px, 3.4vw, 56px) 0 80px; }

.day-view-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.day-view-heading { display: flex; align-items: center; gap: 20px; min-width: 0; }
.day-view-back { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--hos-border); border-radius: 16px; background: var(--hos-surface); color: var(--hos-text); font-size: 34px; line-height: 1; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.day-view-back:hover { border-color: var(--hos-accent); color: var(--hos-accent-ink); background: var(--hos-surface-hover); }
.day-view-heading h1 { margin: 8px 0 0; font: 700 clamp(40px, 4.6vw, 66px)/1.05 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.05em; text-transform: capitalize; }
.day-view-heading p { margin: 6px 0 0; color: var(--hos-text-muted); font-size: clamp(16px, 1.4vw, 20px); }

.day-view-weather { display: flex; align-items: center; gap: 18px; min-width: 0; border: 1px solid var(--hos-border); border-radius: 18px; background: radial-gradient(ellipse at top left, var(--hos-accent-muted), transparent 65%), var(--hos-surface); padding: 16px 22px; }
.day-view-weather-icon { font-size: 56px; line-height: 1; }
.day-view-weather-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.day-view-weather-copy strong { color: var(--hos-text); font-size: 20px; line-height: 1.2; }
.day-view-weather-copy span { color: var(--hos-text); font: 700 30px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.03em; }
.day-view-weather-copy small { color: var(--hos-text-muted); font-size: 14px; }

.day-view-actions { display: flex; align-items: center; gap: 14px; }
.day-view-action { display: inline-flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 26px; border: 0; border-radius: 16px; background: var(--hos-accent); color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px var(--hos-accent-glow); transition: background .15s ease, transform .12s ease; }
.day-view-action:hover { background: var(--hos-accent-hover); }
.day-view-action:active { transform: scale(.98); }
.day-view-action span { font-size: 24px; font-weight: 400; }

.day-view-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

.day-view-card { border: 1px solid var(--hos-border); border-radius: 20px; background: var(--hos-surface); box-shadow: 0 18px 55px rgba(0, 0, 0, .22); overflow: hidden; }
.day-view-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--hos-border); padding: 14px 22px; }
.day-view-card > header h2 { margin: 0; font: 700 20px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.day-view-card > header > span { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; background: var(--hos-accent-muted); color: var(--hos-accent-ink); font-weight: 800; font-size: 14px; }

.day-view-list { display: grid; gap: 10px; padding: 18px; }

.day-view-event { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 84px; border: 1px solid color-mix(in srgb, var(--entry-color) 45%, var(--hos-border)); border-left: 5px solid var(--entry-color); border-radius: 14px; background: color-mix(in srgb, var(--entry-color) 12%, var(--hos-surface)); padding: 14px 18px; text-align: left; cursor: pointer; }
.day-view-event:hover { background: color-mix(in srgb, var(--entry-color) 20%, var(--hos-surface)); }
.day-view-event.is-completed { opacity: .62; }
.day-view-event-time { color: var(--hos-text); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-view-event-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.day-view-event-copy strong { overflow: hidden; color: var(--hos-text); font-size: 19px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.day-view-event-copy small { color: var(--hos-text-muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.day-view-task-group-title { margin: 0; padding: 16px 22px 6px; color: var(--hos-text-muted); font: 700 13px/1.2 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.day-view-task-group-title.overdue { color: var(--hos-accent-ink); }

.day-view-task { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 84px; border: 1px solid var(--hos-border); border-radius: 14px; background: var(--hos-surface-2); padding: 12px 16px; }
.day-view-task.is-overdue { border-left: 4px solid var(--hos-accent); border-color: color-mix(in srgb, var(--hos-accent) 55%, var(--hos-border)); border-left-color: var(--hos-accent); background: color-mix(in srgb, var(--hos-accent) 12%, var(--hos-surface)); }
.day-view-complete { width: 56px; height: 56px; border: 2px solid var(--hos-border); border-radius: 50%; background: var(--hos-surface); color: #fff; cursor: pointer; font-size: 22px; line-height: 1; }
.day-view-complete:hover { border-color: var(--hos-accent); color: var(--hos-accent-hover); }
.day-view-task.is-overdue .day-view-complete { border-color: var(--hos-accent); }
.day-view-task-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.day-view-task-copy strong { overflow: hidden; color: var(--hos-text); font-size: 19px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.day-view-task-copy small { color: var(--hos-accent-ink); font-size: 13px; font-weight: 700; }

.day-view-empty { min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px; border: 1px dashed var(--hos-border); border-radius: 14px; color: var(--hos-text-muted); background: rgba(255, 255, 255, .015); padding: 14px; text-align: center; }
.day-view-empty > span { color: var(--hos-accent-ink); font-size: 24px; }
.day-view-empty p { margin: 0; }

.day-details-drawer { width: 720px; width: min(720px, 100%); }
.day-details-meta { display: grid; gap: 12px; margin-bottom: 20px; }
.day-details-meta span { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; color: var(--hos-text); font-size: 17px; }
.day-details-meta strong { color: var(--hos-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.day-details-owner { margin-bottom: 18px; }
.day-details-description { margin: 0; color: var(--hos-text); font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.day-details-recurrence { margin: 14px 0 0; color: var(--hos-text-muted); font-size: 15px; }

@media (max-width: 1050px) {
    .day-view-header { flex-wrap: wrap; }
    .day-view-actions { margin-left: auto; }
    .day-view-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .day-view-page { width: min(100% - 28px, 1560px); padding: 28px 0 40px; }
    .day-view-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .day-view-actions { margin-left: 0; }
    .day-view-weather { width: 100%; }
    .day-view-back { width: 56px; height: 56px; }
    .day-view-event { grid-template-columns: 76px minmax(0, 1fr); }
}

@media (min-width: 801px) {
    .touch-device .day-view-back { width: 72px; height: 72px; font-size: 40px; }
    .touch-device .day-view-action { min-height: 84px; padding: 0 32px; font-size: 22px; }
    .touch-device .day-view-event { min-height: 96px; padding: 16px 20px; }
    .touch-device .day-view-task { min-height: 96px; padding: 14px 18px; }
    .touch-device .day-view-complete { width: 64px; height: 64px; font-size: 26px; }
    .touch-device .day-view-event-time { font-size: 22px; }
    .touch-device .day-view-event-copy strong, .touch-device .day-view-task-copy strong { font-size: 21px; }
    .touch-device .day-view-weather-icon { font-size: 68px; }
    .touch-device .day-details-drawer { width: 780px; width: min(780px, 100%); }
}