:root {
    --bg: #f7f3ed;
    --ink: #172026;
    --muted: #64717a;
    --line: #e4ded5;
    --panel: #fffdf9;
    --blue: #2563eb;
    --green: #0f9f84;
    --coral: #ef5b4a;
    --amber: #d97706;
    --shadow: 0 22px 50px rgba(23, 32, 38, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button {
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    background: #ece5db;
    color: var(--ink);
    cursor: pointer;
    min-height: 44px;
}
button:hover { filter: brightness(.97); }
.primary { background: var(--blue); color: white; }
.soft { background: #dff3ed; color: #08715f; }
.danger-soft { background: #fee2e2; color: #991b1b; }
.ghost { background: transparent; color: var(--muted); text-align: left; }
#app { min-height: 100vh; display: block; }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px;
    border-right: 1px solid var(--line);
    background: rgba(255, 253, 249, .78);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.sidebar[hidden] { display: none !important; }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ink);
    color: white;
    font-weight: 800;
}
.brand small { display: block; color: var(--muted); margin-top: 2px; }
.nav { display: grid; gap: 8px; }
.nav button {
    text-align: left;
    background: transparent;
    color: var(--muted);
}
.nav button.active { background: var(--ink); color: white; }
.shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 20px 24px 34px;
    min-width: 0;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin: -20px -24px 22px;
    padding: 14px 24px;
    background: rgba(247,243,237,.88);
    border-bottom: 1px solid rgba(228,222,213,.76);
    backdrop-filter: blur(18px);
}
.top-title { min-width: 0; flex: 1; }
.topbar h1 {
    margin: 2px 0 0;
    font-size: clamp(24px, 4vw, 38px);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eyebrow {
    margin: 0;
    color: var(--coral);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.top-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.modern-topbar {
    border-bottom: 1px solid rgba(228,222,213,.82);
    background: rgba(255,253,249,.84);
}
.nav-context {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.nav-context > div { min-width: 0; }
.nav-context h1.top-family-name {
    margin: 1px 0 2px;
    max-width: min(52vw, 560px);
    font-size: clamp(21px, 3vw, 31px);
    color: var(--ink);
}
.nav-view-label {
    display: block;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}
.nav-family-mark,
.account-initial {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--ink);
    color: white;
    font-weight: 900;
}
.account-menu {
    position: relative;
}
.account-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 5px 9px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 20px rgba(23,32,38,.07);
}
.account-badge:hover,
.account-badge[aria-expanded="true"] {
    filter: none;
    background: #fff;
    border-color: color-mix(in srgb, var(--green) 32%, var(--line));
}
.account-copy {
    display: grid;
    min-width: 0;
    text-align: left;
}
.account-copy strong {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.account-copy small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}
.account-badge svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.modern-topbar .top-actions {
    flex-wrap: nowrap;
}
.modern-topbar .account-copy,
.modern-topbar .account-badge > svg,
.modern-topbar .nav-view-label,
.modern-topbar .nav-family-mark {
    display: none;
}
.modern-topbar .account-badge {
    width: 48px;
    min-width: 48px;
    padding: 3px;
}
.modern-topbar .account-initial {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}
.nav-date {
    color: var(--muted);
    text-transform: none;
    font-size: 13px;
}
.account-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid rgba(228,222,213,.9);
    border-radius: 18px;
    background: rgba(255,253,249,.98);
    box-shadow: var(--shadow);
}
.account-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.account-initial.large {
    width: 50px;
    height: 50px;
    border-radius: 16px;
}
.account-panel-head strong,
.account-panel-head small {
    display: block;
    min-width: 0;
}
.account-panel-head small {
    max-width: 210px;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-panel dl {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}
.account-panel dl div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}
.account-panel dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.account-panel dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 800;
}
.settings-card {
    display: grid;
    gap: 9px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.settings-card > strong {
    font-size: 14px;
}
.settings-card label {
    display: grid;
    gap: 5px;
}
.settings-card label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.settings-card select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f3ed;
    padding: 6px 8px;
    font-weight: 800;
}
.account-logout {
    width: 100%;
    justify-content: center;
    font-weight: 900;
}
.install-button { display: none; }
.can-install .install-button { display: inline-flex; align-items: center; }
.notification-button { display: none; }
.is-standalone .notification-button { display: inline-flex; align-items: center; }
.app-error {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff1f2;
    color: #991b1b;
    font-weight: 800;
}
.back-button,
.icon-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 16px;
    background: rgba(255,253,249,.92);
    border: 1px solid var(--line);
    box-shadow: 0 8px 20px rgba(23,32,38,.07);
}
.back-button svg,
.icon-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.back-button {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity .18s ease, transform .18s ease;
}
.is-subview .back-button {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.view { display: none; }
.view.active { display: block; }
.hero, .home-hero {
    min-height: 230px;
    border-radius: 8px;
    padding: 32px;
    color: white;
    background:
        linear-gradient(120deg, rgba(23, 32, 38, .9), rgba(15, 159, 132, .55)),
        url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1600&q=80") center/cover;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 18px;
}
.hero h2 { max-width: 780px; margin: 8px 0 0; font-size: clamp(30px, 5vw, 62px); line-height: 1.02; letter-spacing: 0; }
.home-hero {
    min-height: 170px;
    padding: 26px;
    background:
        linear-gradient(120deg, rgba(20, 184, 166, .96), rgba(37, 99, 235, .78)),
        url("https://images.unsplash.com/photo-1609220136736-443140cffec6?auto=format&fit=crop&w=1500&q=80") center/cover;
    align-items: center;
}
.home-hero h2 {
    margin: 5px 0 4px;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
    letter-spacing: 0;
}
.home-hero p:not(.eyebrow) {
    margin: 0;
    color: rgba(255,255,255,.86);
    font-weight: 700;
}
.hero-stat {
    min-width: 160px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
}
.hero-stat span { display: block; font-size: 24px; font-weight: 900; }
.family-code-card {
    display: grid;
    gap: 3px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(20,184,166,.14), rgba(37,99,235,.1)), #fff;
}
.family-code-card span {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .06em;
}
.family-code-card small {
    color: var(--muted);
    font-weight: 800;
}
.toddler-dashboard {
    display: none;
}
.is-toddler #dashboard > .home-hero,
.is-toddler #dashboard > .module-grid,
.is-toddler #dashboard > .grid.two {
    display: none;
}
.is-toddler .toddler-dashboard {
    display: grid;
    gap: 16px;
    min-height: calc(100dvh - 150px);
    align-items: center;
    padding: 10px 0 24px;
}
.toddler-dashboard[hidden] {
    display: none;
}
.toddler-points-card,
.toddler-goal-card {
    display: grid;
    gap: clamp(18px, 4vw, 28px);
    padding: clamp(22px, 6vw, 40px);
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,247,255,.94)),
        #fff;
    box-shadow: 0 18px 40px rgba(66,90,112,.12);
    text-align: center;
}
.toddler-simple-card {
    width: min(100%, 540px);
    min-height: min(560px, calc(100dvh - 190px));
    margin: 0 auto;
    align-content: center;
}
.toddler-icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 3vw, 16px);
}
.toddler-icon-row svg {
    width: clamp(34px, 9vw, 52px);
    height: clamp(34px, 9vw, 52px);
    padding: 8px;
    border-radius: 18px;
    background: #fff8db;
    fill: none;
    stroke: #f4a900;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    box-shadow: 0 8px 20px rgba(251,188,5,.18);
    transform: rotate(-5deg);
}
.toddler-icon-row svg:nth-child(2) {
    width: clamp(48px, 13vw, 72px);
    height: clamp(48px, 13vw, 72px);
    padding: 10px;
    border-radius: 24px;
    background: #e9f7ef;
    stroke: #1e8e3e;
    box-shadow: 0 10px 24px rgba(52,168,83,.18);
    transform: rotate(0);
}
.toddler-icon-row svg:nth-child(3) {
    transform: rotate(5deg);
}
.toddler-chore-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 3vw, 18px);
    min-height: 0;
}
.toddler-chore-icons:empty {
    display: none;
}
.toddler-task-icon {
    position: relative;
    width: clamp(82px, 24vw, 120px);
    height: clamp(82px, 24vw, 120px);
    display: grid;
    place-items: center;
    border-radius: 30px;
    border: 5px solid #fff;
    box-shadow: 0 14px 28px rgba(66,90,112,.14);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.toddler-task-icon:active:not(:disabled) {
    transform: scale(.94);
}
.toddler-task-icon:disabled {
    cursor: default;
}
.toddler-task-icon svg {
    width: 64%;
    height: 64%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.custom-chore-icon-img,
.toddler-task-icon .custom-chore-icon-img {
    width: 64%;
    height: 64%;
    object-fit: contain;
    display: block;
}
.toddler-task-icon.open {
    background: #fee7e3;
    color: #c5221f;
}
.toddler-task-icon.done {
    background: #e6f4ea;
    color: #188038;
}
.toddler-task-icon.open svg {
    stroke: var(--icon-color, currentColor);
}
.toddler-task-icon.done svg {
    stroke: var(--icon-color, currentColor);
}
.toddler-task-icon::after {
    content: "";
    position: absolute;
}
.toddler-points-card strong {
    font-size: clamp(82px, 18vw, 150px);
    line-height: .9;
    color: #1a73e8;
}
.toddler-points-card p,
.toddler-goal-card p {
    margin: 0;
    color: #3c4043;
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 900;
}
.toddler-badge {
    justify-self: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: #fff;
    color: #1967d2;
    font-size: 14px;
    font-weight: 900;
}
.toddler-goal-card h2 {
    margin: 0;
    color: #172026;
    font-size: clamp(30px, 7vw, 54px);
    line-height: 1.05;
}
.toddler-progress {
    height: clamp(26px, 7vw, 38px);
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 3px;
    border-radius: 18px;
    background: #eef3f8;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(60,64,67,.1);
}
.toddler-progress span {
    display: block;
    height: 100%;
    border-radius: 9px;
    background: #dbe4ee;
    transition: background .2s ease, transform .2s ease;
}
.toddler-progress span.filled {
    background: linear-gradient(180deg, #ffd45c, #46c27a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}
.toddler-missing {
    width: fit-content;
    justify-self: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: #e9f7ef;
    color: #1e8e3e;
    font-size: clamp(20px, 5vw, 30px);
    font-weight: 950;
}
.toddler-goal-card > strong {
    width: fit-content;
    justify-self: center;
    padding: 10px 18px;
    border-radius: 24px;
    background: #fff;
    color: #1967d2;
    font-size: clamp(42px, 13vw, 84px);
    line-height: 1;
    box-shadow: 0 10px 28px rgba(25,103,210,.12);
}
.toddler-action {
    justify-self: center;
    min-width: min(100%, 220px);
    min-height: 62px;
    border-radius: 999px;
    background: #1967d2;
    color: white;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(25,103,210,.24);
}
.toddler-action:disabled {
    background: #d5dce5;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}
.module-card {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-height: 132px;
    padding: 16px 10px 14px;
    border: 1px solid rgba(228,222,213,.78);
    border-radius: 22px;
    background: rgba(255,253,249,.92);
    box-shadow: 0 12px 28px rgba(23,32,38,.08);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.72), transparent 62%);
    pointer-events: none;
}
.module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(23,32,38,.12);
    border-color: rgba(23,32,38,.12);
}
.module-card strong,
.module-card small,
.module-icon { position: relative; z-index: 1; }
.module-card strong { font-size: 15px; }
.module-card small { color: var(--muted); font-size: 12px; font-weight: 800; }
.module-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 19px;
    color: white;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 22px rgba(23,32,38,.14);
}
.module-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.module-card.calendar .module-icon { background: linear-gradient(135deg, #2f80ed, #56ccf2); }
.module-card.lists .module-icon { background: linear-gradient(135deg, #0f9f84, #62d7bd); }
.module-card.household .module-icon { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.module-card.points .module-icon { background: linear-gradient(135deg, #f59e0b, #f97316); }
.module-card.rewards .module-icon { background: linear-gradient(135deg, #db2777, #f59e0b); }
.module-card.rewards.active { border-color: rgba(219,39,119,.45); box-shadow: 0 16px 32px rgba(219,39,119,.14); }
.module-card.meals .module-icon { background: linear-gradient(135deg, #f97316, #facc15); }
.module-card.budget .module-icon { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.module-card.memories .module-icon { background: linear-gradient(135deg, #ec4899, #fb7185); }
.module-card.documents .module-icon { background: linear-gradient(135deg, #334155, #94a3b8); }
.module-card.family .module-icon { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.module-card.location .module-icon { background: linear-gradient(135deg, #22c55e, #84cc16); }
.module-card.chat .module-icon { background: linear-gradient(135deg, #ef4444, #fb923c); }
.module-card.contacts .module-icon { background: linear-gradient(135deg, #14b8a6, #6366f1); }
.rewards-panel {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 28px rgba(23,32,38,.05);
}
.rewards-head {
    align-items: flex-start;
    margin-bottom: 12px;
}
.reward-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reward-add {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.reward-add.active {
    background: #fff;
    color: var(--ink);
}
.reward-add.active svg { transform: rotate(45deg); }
.reward-form[hidden],
.rewards-panel:not(.is-reward-form-open) .reward-form { display: none; }
.rewards-head h3 {
    margin: 2px 0 0;
    font-size: 22px;
}
.reward-balance {
    padding: 8px 11px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
}
.member-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 12px;
}
.member-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 5px 11px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-weight: 900;
}
.member-tab .avatar {
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 999px;
}
.member-tab.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.reward-form {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(120px, .55fr) minmax(160px, .75fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(228,222,213,.82);
    border-radius: 16px;
    background: rgba(255,255,255,.62);
}
.reward-form .wide { grid-column: 1 / -1; }
.reward-form textarea { min-height: 72px; }
.reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.reward-card {
    display: grid;
    grid-template-rows: 140px minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(23,32,38,.05);
}
.reward-card.redeemed { opacity: .72; }
.reward-image {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eef6ff, #e5f7f1);
    overflow: hidden;
}
.reward-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reward-image svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: var(--green);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.reward-body {
    display: grid;
    gap: 8px;
    padding: 12px;
}
.reward-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}
.reward-points {
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.reward-card > button {
    margin: 0 12px 12px;
    border-radius: 12px;
    font-weight: 900;
}
button:disabled {
    cursor: not-allowed;
    opacity: .55;
}
.grid { display: grid; gap: 18px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.stats article, .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(23, 32, 38, .05);
}
.stats article { padding: 20px; }
.stats strong { display: block; font-size: 28px; }
.stats span { color: var(--muted); }
.panel { padding: 20px; min-width: 0; }
.points-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 24px;
    border-radius: 18px;
    color: white;
    background:
        linear-gradient(120deg, rgba(245,158,11,.96), rgba(239,91,74,.82)),
        url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1400&q=80") center/cover;
}
.points-hero h2 {
    margin: 4px 0;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
    letter-spacing: 0;
}
.points-hero p:not(.eyebrow) {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-weight: 700;
}
.chore-board {
    display: grid;
    gap: 12px;
}
.chore-card {
    position: relative;
    display: grid;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(6,182,212,.1), transparent 30%),
        #fff;
    box-shadow: 0 8px 18px rgba(23,32,38,.04);
}
.chore-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 14px 0 0 14px;
    background: #06b6d4;
}
.chore-card.overdue::before { background: #ef4444; }
.chore-card.today::before { background: #f59e0b; }
.chore-card.completed-today::before { background: #0f9f84; }
.chore-card.mine {
    border-color: rgba(37,99,235,.28);
    background:
        linear-gradient(90deg, rgba(37,99,235,.12), transparent 38%),
        #fff;
}
.chore-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    min-width: 0;
}
.chore-main .avatar {
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 13px;
}
.chore-content {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.chore-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}
.chore-title-row strong {
    display: block;
    min-width: 0;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.chore-meta, .chore-history {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
}
.chore-history {
    color: #64717a;
}
.chore-visible-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.chore-details {
    border-top: 1px solid rgba(31,41,55,.08);
    padding-top: 5px;
}
.chore-details summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    list-style: none;
}
.chore-details summary::-webkit-details-marker { display: none; }
.chore-details summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}
.chore-details[open] summary::before {
    transform: rotate(45deg);
}
.chore-detail-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 10px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}
.chore-detail-grid strong {
    min-width: 0;
    color: #172026;
    font-size: 12px;
    overflow-wrap: anywhere;
}
.chore-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.chore-status.overdue { background: #fee2e2; color: #b91c1c; }
.chore-status.today { background: #fff7ed; color: #c2410c; }
.chore-status.completed-today { background: #e5f7f1; color: #08715f; }
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}
.tag.warn { background: #fff7ed; color: #c2410c; }
.tag.ok { background: #e5f7f1; color: #08715f; }
.tag.mine-tag { background: #eef6ff; color: #1d4ed8; }
.chore-actions {
    display: grid;
    gap: 6px;
    align-self: stretch;
}
.chore-icon-action {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 10px;
    background: #f7f3ed;
    color: #172026;
}
.chore-icon-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chore-icon-action.done {
    background: #0f9f84;
    color: white;
}
.chore-icon-action.danger {
    background: #fee2e2;
    color: #991b1b;
}
.chore-controls {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: -4px 0 14px;
}
.chore-filter-trigger {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #172026;
    text-align: left;
}
.chore-filter-trigger svg {
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #2563eb;
}
.chore-filter-trigger span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}
.chore-filter-trigger strong {
    min-width: 0;
    color: #172026;
    font-size: 12px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chore-filter-trigger[aria-expanded="true"] {
    border-color: #2563eb;
    background: #eef6ff;
}
.chore-filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: min(320px, 100%);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23,32,38,.18);
}
.chore-add-button {
    width: 100%;
    min-height: 42px;
    margin: -4px 0 12px;
    border-radius: 14px;
    background: #172026;
    color: white;
    font-weight: 900;
}
.popover-title {
    padding: 2px 4px 9px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.popover-options {
    display: grid;
    gap: 6px;
}
.popover-options button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 11px;
    background: #f7f3ed;
    color: #172026;
    font-size: 13px;
    font-weight: 850;
    text-align: left;
}
.popover-options button.active {
    background: #172026;
    color: white;
}
.fairness-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.fairness-row .avatar { margin: 0; width: 42px; height: 42px; border-radius: 13px; }
.mini-bar {
    height: 8px;
    border-radius: 999px;
    background: #ece5db;
    overflow: hidden;
    margin-top: 6px;
}
.mini-bar span { display: block; height: 100%; background: #06b6d4; }
.points-list {
    display: grid;
    gap: 10px;
}
.points-row {
    display: grid;
    grid-template-columns: 34px 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(245,158,11,.12), transparent 36%),
        #fff;
}
.points-row .avatar {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 16px;
}
.rank {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 900;
}
.points-balance {
    padding: 8px 10px;
    border-radius: 999px;
    background: #172026;
    color: white;
    white-space: nowrap;
}
.points-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.points-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.points-form .primary { grid-column: 1 / -1; }
.banking-panel {
    margin-bottom: 18px;
}
.bank-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.bank-method-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
}
.bank-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 0;
}
.fints-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.fints-form .wide,
.fints-form .form-submit {
    grid-column: 1 / -1;
}
.bank-results,
.bank-connections {
    display: grid;
    gap: 10px;
}
.bank-results { margin-bottom: 12px; }
.bank-result,
.bank-connection {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
.bank-connection {
    grid-template-columns: minmax(0, 1fr) auto;
    background: linear-gradient(90deg, rgba(20,184,166,.12), transparent 38%), #fff;
}
.bank-result img,
.bank-logo-fallback {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}
.bank-result img { object-fit: contain; background: #f7f3ed; }
.bank-logo-fallback {
    display: grid;
    place-items: center;
    background: #172026;
    color: white;
    font-weight: 900;
}
.panel-head, .page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.panel-head.compact-actions {
    justify-content: flex-end;
    margin-bottom: 10px;
}
.panel-head.compact-actions:empty {
    display: none;
}
.panel h3, .panel-head h3 { margin: 0; font-size: 20px; }
.stack { display: grid; gap: 10px; }
.item {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meta { color: var(--muted); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.timeline { display: grid; gap: 12px; }
.timeline .item { border-left: 5px solid var(--blue); }
.calendar-shell {
    display: grid;
    gap: 12px;
}
.calendar-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e8eaed;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 8px 24px rgba(60,64,67,.06);
}
.calendar-toolbar h2 {
    margin: 0;
    color: #3c4043;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0;
}
.calendar-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}
.calendar-nav button:not(.icon-button) {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid #dadce0;
    border-radius: 999px;
    background: #fff;
    color: #3c4043;
    font-size: 13px;
    font-weight: 750;
}
.calendar-nav .icon-button {
    background: #fff;
    color: #5f6368;
    box-shadow: none;
}
.calendar-nav .icon-button:hover,
.calendar-nav button:not(.icon-button):hover {
    background: #f1f3f4;
}
.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.calendar-view-switch {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 2px;
    padding: 3px;
    border: 1px solid #dadce0;
    border-radius: 20px;
    background: #fff;
}
.calendar-view-switch button {
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 16px;
    background: transparent;
    color: #3c4043;
    font-size: 13px;
    font-weight: 700;
}
.calendar-view-switch button.active {
    background: #e8f0fe;
    color: #1967d2;
}
.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.calendar-month,
.calendar-agenda {
    border: 1px solid #e8eaed;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 8px 24px rgba(60,64,67,.05);
    overflow: hidden;
}
.calendar-agenda {
    padding: 16px;
    max-height: none;
    overflow: visible;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid #e8eaed;
    background: #fff;
}
.calendar-weekdays.day-weekdays {
    grid-template-columns: minmax(0, 1fr);
}
.calendar-weekdays span {
    padding: 12px 10px;
    color: #5f6368;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.calendar-weekday-button {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 54px;
    border-radius: 0;
    background: #fff;
    color: #3c4043;
    border-right: 1px solid #e8eaed;
}
.calendar-weekday-button:last-child { border-right: 0; }
.calendar-weekday-button strong {
    color: #5f6368;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.calendar-weekday-button span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    color: #3c4043;
    font-size: 14px;
}
.calendar-weekday-button.today span {
    background: #1a73e8;
    color: white;
}
.calendar-weekday-button.selected {
    background: #f8fbff;
}
.calendar-weekday-button.selected span {
    box-shadow: inset 0 0 0 2px #1a73e8;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 128px;
    padding: 9px;
    border-radius: 0;
    border-right: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    background: #fff;
    text-align: left;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover { background: #f8fafd; filter: none; }
.calendar-day.selected {
    position: relative;
    z-index: 1;
    background: #f8fbff;
    box-shadow: inset 0 0 0 2px #1a73e8;
}
.calendar-day.selected .day-number {
    background: #1a73e8;
    color: white;
}
.calendar-day.muted {
    background: #fafafa;
    color: #9aa0a6;
}
.day-number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #3c4043;
    font-weight: 500;
}
.calendar-day.today .day-number {
    background: #1a73e8;
    color: white;
}
.day-events {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.calendar-chip {
    display: block;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--event-color, #1a73e8) 16%, white);
    border-left: 0;
    color: #3c4043;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-chip span {
    margin-right: 5px;
    color: var(--event-color, #1a73e8);
}
.more-events {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.calendar-time-grid {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 952px;
    background: #fff;
}
.calendar-all-day-label {
    min-height: 44px;
    padding: 13px 8px 8px 0;
    border-right: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    color: #70757a;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}
.calendar-all-day-columns {
    display: grid;
    min-height: 44px;
    border-bottom: 1px solid #e8eaed;
    background: #fff;
}
.calendar-all-day-column {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 5px;
    border-right: 1px solid #e8eaed;
}
.calendar-all-day-column:last-child {
    border-right: 0;
}
.calendar-all-day-event {
    min-width: 0;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--event-color, #1a73e8) 18%, white);
    color: #3c4043;
    font-size: 11px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.calendar-time-labels {
    display: grid;
    grid-template-rows: repeat(17, 56px);
    border-right: 1px solid #e8eaed;
    background: #fff;
}
.calendar-time-labels span {
    padding: 6px 8px 0 0;
    color: #70757a;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}
.calendar-time-columns {
    display: grid;
}
.calendar-time-column {
    position: relative;
    min-width: 0;
    border-right: 1px solid #e8eaed;
}
.calendar-time-column:last-child { border-right: 0; }
.calendar-hour-line {
    height: 56px;
    border-bottom: 1px solid #e8eaed;
}
.calendar-time-event {
    position: absolute;
    left: 5px;
    right: 5px;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 12px;
    border-left: 0;
    background: color-mix(in srgb, var(--event-color, #1a73e8) 18%, white);
    color: #3c4043;
    text-align: left;
    overflow: hidden;
}
.calendar-time-event strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.calendar-time-event span {
    color: var(--event-color, #1a73e8);
    font-size: 11px;
    font-weight: 900;
}
.agenda-head {
    align-items: flex-start;
    margin-bottom: 14px;
}
.agenda-head h3 { margin: 0 0 2px; }
.agenda-card {
    display: grid;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e8eaed;
    border-left: 5px solid var(--event-color, #1a73e8);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60,64,67,.08);
}
.agenda-card strong {
    display: block;
    margin-bottom: 4px;
}
.agenda-card p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.45;
}
.agenda-time {
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--event-color, #1a73e8) 14%, white);
    color: var(--event-color, #1a73e8);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.list-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.list-card h3 { margin: 0 0 12px; }
.check-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
.check-row.done { color: var(--muted); text-decoration: line-through; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.join-family-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin: 0 0 14px;
}
.person { display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.member-role-field {
    display: grid;
    gap: 5px;
}
.member-role-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.member-role-field select {
    width: 100%;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #f7f3ed;
    padding: 6px 8px;
    font-weight: 800;
}
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 900;
    margin-bottom: 10px;
    overflow: hidden;
}
.avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.media-grid a {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #ece5db;
    display: block;
}
.media-grid img { width: 100%; height: 100%; object-fit: cover; }
.bar { height: 9px; background: #ece5db; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--green); }
.chat-panel { height: calc(100vh - 150px); display: grid; grid-template-rows: 1fr auto; }
.chat-list { overflow: auto; display: flex; flex-direction: column-reverse; gap: 10px; padding-right: 4px; }
.bubble { max-width: 720px; padding: 12px 14px; border-radius: 8px; background: #eef6ff; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    background: white;
    color: var(--ink);
    min-height: 46px;
}
textarea { min-height: 110px; resize: vertical; }
.auth-screen {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    overflow: auto;
    background:
        radial-gradient(circle at 12% 18%, rgba(239,91,74,.28), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(37,99,235,.24), transparent 30%),
        linear-gradient(120deg, rgba(23,32,38,.72), rgba(15,159,132,.38)),
        url("https://images.unsplash.com/photo-1609220136736-443140cffec6?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.is-auth .auth-screen { display: grid; }
.is-auth .sidebar, .is-auth .shell { filter: blur(4px); pointer-events: none; }
.auth-card {
    width: min(480px, 100%);
    padding: 30px;
    background: rgba(255,253,249,.9);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
}
.auth-card h1 { font-size: 40px; line-height: 1.02; margin: 22px 0 8px; letter-spacing: 0; }
.auth-card p { color: var(--muted); line-height: 1.45; }
.auth-card form { display: grid; gap: 12px; margin-top: 14px; }
.auth-card label { display: grid; gap: 6px; }
.auth-card label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.tabs {
    position: relative;
    z-index: 5;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(236,229,219,.64);
}
.tabs button {
    position: relative;
    z-index: 6;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
}
.tabs button.active { background: var(--ink); color: white; box-shadow: 0 8px 18px rgba(23,32,38,.18); }
.auth-visual {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.auth-visual span {
    padding: 8px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}
.auth-visual span:nth-child(2) { background: #e5f7f1; color: #08715f; }
.auth-visual span:nth-child(3) { background: #fff0e9; color: #c2410c; }
.google-login-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}
.google-login-wrap .meta {
    margin: 0;
    text-align: center;
}
.google-configured #googleLoginHint { display: none; }
.error { color: #b91c1c; min-height: 20px; }
dialog {
    border: 0;
    padding: 0;
    border-radius: 24px;
    box-shadow: var(--shadow);
    width: min(640px, calc(100vw - 28px));
    max-height: min(86dvh, 820px);
    overflow: visible;
    background: transparent;
}
dialog::backdrop { background: rgba(23,32,38,.42); backdrop-filter: blur(8px); }
.modal-card {
    position: relative;
    max-height: min(86dvh, 820px);
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 24px;
    background: rgba(255,253,249,.96);
}
.modal-card h2 { margin: 0 48px 14px 0; font-size: 28px; letter-spacing: 0; }
.modal-card .form-grid { display: grid; gap: 12px; }
.icon-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.input-field {
    min-width: 0;
}
.input-field span {
    display: flex;
    align-items: center;
    gap: 7px;
}
.input-field svg,
.quick-add-grid svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.input-control {
    position: relative;
    min-width: 0;
}
.input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--green);
    transform: translateY(-50%);
    pointer-events: none;
}
.input-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.input-control:has(textarea) .input-icon {
    top: 16px;
    transform: none;
}
.chore-icon-field > .input-control {
    display: none;
}
.chore-icon-field {
    position: relative;
}
.chore-icon-trigger {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid #dde6ef;
    background: #fff;
    color: #172026;
    font-weight: 900;
}
.chore-icon-preview {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--icon-bg, #e8f0fe);
    color: var(--icon-color, #1967d2);
}
.chore-icon-preview svg,
.chore-icon-trigger svg,
.chore-icon-preview .custom-chore-icon-img,
.chore-icon-trigger .custom-chore-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.chore-icon-preview svg,
.chore-icon-trigger svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chore-icon-modal {
    position: fixed;
    inset: auto 16px 16px 16px;
    z-index: 80;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(221,230,239,.9);
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(23,32,38,.22);
}
.chore-icon-modal[hidden] {
    display: none;
}
.chore-icon-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.chore-icon-modal-head strong {
    font-size: 16px;
}
.chore-icon-modal-head button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f4f8;
    color: #3c4043;
    font-size: 24px;
    line-height: 1;
}
.chore-icon-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 18px;
    background: #f8fafc;
}
.chore-icon-upload-form input {
    min-width: 0;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #dde6ef;
    background: #fff;
    padding: 0 10px;
}
.chore-icon-upload-form input[type="file"] {
    padding: 8px;
    font-size: 12px;
}
.chore-icon-upload-form button {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    background: #1a73e8;
    color: #fff;
    font-weight: 900;
}
.chore-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 10px;
    max-height: min(55dvh, 420px);
    overflow: auto;
    padding: 2px;
}
.chore-icon-picker button {
    min-height: 72px;
    display: grid;
    place-items: center;
    gap: 5px;
    border-radius: 16px;
    background: var(--icon-bg, #f5f8fb);
    color: var(--icon-color, #64717a);
    border: 1px solid #dde6ef;
    font-size: 13px;
    font-weight: 900;
}
.chore-icon-picker button svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.chore-icon-picker button .custom-chore-icon-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.chore-icon-picker button span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}
.chore-icon-picker button.active {
    background: #e8f0fe;
    border-color: #1a73e8;
    color: #1967d2;
    box-shadow: 0 8px 18px rgba(26,115,232,.12);
}
.input-control input,
.input-control select,
.input-control textarea {
    border-radius: 12px;
    border-color: #ded6cc;
    background: rgba(255,255,255,.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    padding-left: 44px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input-control select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64717a 50%), linear-gradient(135deg, #64717a 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}
.assignee-control select {
    padding-right: 172px;
}
.assignee-preview {
    position: absolute;
    right: 34px;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 132px;
    padding: 4px 8px 4px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(228,222,213,.82);
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    transform: translateY(-50%);
    pointer-events: none;
}
.assignee-preview > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assignee-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: white;
    font-size: 11px;
    font-weight: 900;
    overflow: hidden;
}
.assignee-avatar.empty {
    background: #d8d0c7;
    color: #64717a;
}
.assignee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.input-control input:focus,
.input-control select:focus,
.input-control textarea:focus {
    outline: 0;
    border-color: var(--green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20,184,166,.14);
}
.input-control input[type="color"] {
    height: 46px;
    padding: 6px 6px 6px 44px;
    cursor: pointer;
}
.input-control input[type="file"] {
    padding: 9px 10px;
    background: #fff;
}
.input-field small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.form-submit {
    grid-column: 1 / -1;
    min-height: 50px;
    margin-top: 2px;
    border-radius: 12px;
}
.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}
.quick-add-grid button {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 10px;
    min-height: 104px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
    text-align: left;
}
.quick-add-grid svg {
    width: 22px;
    height: 22px;
    color: var(--green);
}
.quick-add-grid button:hover {
    background: #f8fbff;
    filter: none;
}
.modal-hero {
    margin: -8px -8px 16px;
    padding: 20px;
    border-radius: 20px;
    color: white;
    background: linear-gradient(135deg, #0891b2, #14b8a6);
}
.modal-hero h2 { margin: 8px 42px 6px 0; }
.modal-hero p { margin: 0; color: rgba(255,255,255,.84); font-weight: 700; }
.modal-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 900;
}
.smart-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field {
    display: grid;
    gap: 6px;
}
.field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}
.wide { grid-column: 1 / -1; }
.toggle-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    color: var(--muted);
    font-weight: 800;
}
.toggle-line input {
    width: 20px;
    min-height: 20px;
}
.close {
    position: sticky;
    z-index: 5;
    float: right;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -4px -4px 0 10px;
    padding: 0;
    border-radius: 15px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(228,222,213,.9);
    box-shadow: 0 10px 22px rgba(23,32,38,.12);
}
.close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.sheet-handle { display: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

@media (max-width: 980px) {
    #app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nav button { text-align: center; white-space: nowrap; }
    .hero { flex-direction: column; align-items: flex-start; }
    .home-hero { flex-direction: column; align-items: flex-start; }
    .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calendar-layout { grid-template-columns: 1fr; }
    .calendar-agenda { max-height: none; }
    .two, .three, .stats { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
    body { background: #fffdf9; }
    #app { display: block; padding-bottom: 0; }
    .is-auth { padding-bottom: 0; }
    .sidebar { display: none; }
    .brand { min-height: 48px; }
    .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
    .brand small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav { display: none; }
    .shell { padding: 12px 14px 24px; }
    .topbar {
        align-items: center;
        gap: 8px;
        margin: -12px -14px 14px;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    }
    .topbar h1 { font-size: 24px; }
    .top-actions {
        display: flex;
        gap: 6px;
        width: auto;
        flex: 0 0 auto;
    }
    .nav-context {
        gap: 8px;
    }
    .nav-family-mark {
        display: none;
    }
    .nav-context h1.top-family-name {
        max-width: 58vw;
        font-size: 20px;
    }
    .nav-date {
        font-size: 12px;
    }
    .account-copy,
    .account-badge > svg {
        display: none;
    }
    .account-badge {
        width: 48px;
        min-width: 48px;
        padding: 3px;
        border-radius: 16px;
    }
    .account-initial {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }
    
.modern-topbar .top-actions {
    flex-wrap: nowrap;
}
.modern-topbar .account-copy,
.modern-topbar .account-badge > svg,
.modern-topbar .nav-view-label,
.modern-topbar .nav-family-mark {
    display: none;
}
.modern-topbar .account-badge {
    width: 48px;
    min-width: 48px;
    padding: 3px;
}
.modern-topbar .account-initial {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}
.nav-date {
    color: var(--muted);
    text-transform: none;
    font-size: 13px;
}
.account-panel {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 64px);
        right: 12px;
        left: 12px;
        width: auto;
    }
    .top-actions .soft { display: none; }
    .is-standalone .top-actions .notification-button {
        display: grid;
        place-items: center;
        width: 48px;
        min-width: 48px;
        padding: 0;
        font-size: 0;
        border-radius: 16px;
    }
    .is-standalone .top-actions .notification-button::before {
        content: "!";
        font-size: 18px;
        font-weight: 900;
    }
    .can-install .top-actions .install-button { display: none; }
    .top-actions .primary {
        width: 48px;
        min-width: 48px;
        padding: 0;
        font-size: 0;
        border-radius: 16px;
    }
    .top-actions .primary::before {
        content: "+";
        font-size: 25px;
        line-height: 1;
        font-weight: 800;
    }
    .back-button,
    .icon-button {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        box-shadow: none;
    }
    .hero, .home-hero {
        min-height: 180px;
        padding: 18px;
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
    }
    .hero h2 { font-size: 30px; line-height: 1.08; }
    .home-hero h2 { font-size: 36px; }
    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .module-card {
        min-height: 118px;
        border-radius: 18px;
        padding: 13px 8px;
    }
    .rewards-panel {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -14px;
        margin-right: -14px;
        padding: 16px 14px;
        box-shadow: none;
    }
    .reward-form {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .reward-grid {
        grid-template-columns: 1fr;
    }
    .reward-card {
        grid-template-rows: 132px minmax(0, 1fr) auto;
    }
    .calendar-toolbar {
        grid-template-columns: 1fr auto;
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
        border-left: 0;
        border-right: 0;
    }
    .calendar-nav {
        grid-column: 1;
        grid-row: 1;
    }
    .calendar-toolbar-actions {
        display: contents;
    }
    .calendar-toolbar-actions > .primary {
        grid-column: 2;
        grid-row: 1;
        min-width: 96px;
    }
    .calendar-view-switch {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .calendar-month,
    .calendar-agenda {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -14px;
        margin-right: -14px;
        box-shadow: none;
    }
    .calendar-weekdays span {
        padding: 9px 2px;
        font-size: 11px;
    }
    .calendar-day {
        min-height: 86px;
        padding: 5px;
        gap: 4px;
    }
    .day-number {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .calendar-chip {
        padding: 3px 5px;
        border-left-width: 3px;
        font-size: 10px;
    }
    .calendar-chip span { display: none; }
    .calendar-time-grid {
        grid-template-columns: 48px minmax(0, 1fr);
        overflow-x: auto;
    }
    .calendar-time-labels span {
        font-size: 10px;
        padding-right: 5px;
    }
    .calendar-time-columns {
        min-width: calc(var(--day-count) * 136px);
    }
    .calendar-time-column {
        min-width: 136px;
    }
    .day-view .calendar-time-columns,
    .day-view .calendar-time-column {
        min-width: 0;
    }
    .calendar-time-event {
        left: 4px;
        right: 4px;
        padding: 5px 6px;
    }
    .agenda-card {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    .agenda-time {
        justify-self: start;
    }
    .points-hero {
        flex-direction: column;
        align-items: flex-start;
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
        padding: 20px 14px;
    }
    .points-form { grid-template-columns: 1fr; }
    .bank-methods,
    .fints-form,
    .bank-search { grid-template-columns: 1fr; }
    .bank-method-card {
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
        border-left: 0;
        border-right: 0;
    }
    .bank-result,
    .bank-connection {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .bank-result button,
    .bank-connection button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .bank-connection { grid-template-columns: 1fr; }
    .points-row {
        grid-template-columns: 34px 44px minmax(0, 1fr);
    }
    .points-row .avatar { width: 44px; height: 44px; border-radius: 14px; }
    .points-balance {
        grid-column: 3;
        justify-self: start;
    }
    .chore-card { border-radius: 0; border-right: 0; margin-left: -14px; margin-right: -14px; padding-right: 14px; }
    .chore-card::before { border-radius: 0; }
    .chore-main { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
    .chore-main .avatar { width: 40px; height: 40px; border-radius: 12px; }
    .chore-title-row { grid-template-columns: minmax(0, 1fr); }
    .chore-status { justify-self: start; }
    .chore-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chore-filter-popover {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        width: auto;
    }
    .module-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px;
    }
    .hero-stat {
        width: 100%;
        min-width: 0;
        padding: 12px;
    }
    .stats article, .panel, .list-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        margin-left: -14px;
        margin-right: -14px;
        box-shadow: none;
    }
    .panel, .list-card { padding: 16px 14px; }
    .item-row { align-items: flex-start; flex-direction: column; gap: 6px; }
    .check-row { grid-template-columns: 28px 1fr; }
    .check-row small { grid-column: 2; }
    .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .join-family-form { grid-template-columns: 1fr; }
    .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-panel {
        height: calc(100dvh - 184px);
        min-height: 460px;
    }
    .composer { grid-template-columns: 1fr; }
    dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
    }
    .modal-card {
        max-height: 92dvh;
        padding: 12px 14px max(18px, env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
    .sheet-handle {
        display: block;
        width: 44px;
        height: 5px;
        margin: 0 auto 10px;
        border-radius: 999px;
        background: #d8d0c7;
    }
    .modal-card h2 { font-size: 24px; }
    .icon-form,
    .smart-form {
        grid-template-columns: 1fr;
    }
    .assignee-control select {
        padding-right: 54px;
    }
    .assignee-preview {
        right: 34px;
        max-width: 28px;
        padding: 3px;
        border: 0;
        background: transparent;
    }
    .assignee-preview > span:last-child {
        display: none;
    }
    .quick-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-add-grid button {
        min-height: 88px;
        padding: 13px;
    }
    .modal-hero {
        margin: 0 0 14px;
        padding: 18px;
        border-radius: 18px;
    }
    .smart-form { grid-template-columns: 1fr; }
    .close {
        top: 12px;
        width: 44px;
        height: 44px;
        margin-right: 0;
    }
    .auth-screen {
        display: none;
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        background:
            linear-gradient(180deg, rgba(255,253,249,.92), rgba(255,253,249,1) 42%),
            url("https://images.unsplash.com/photo-1609220136736-443140cffec6?auto=format&fit=crop&w=900&q=80") center top/cover;
    }
    .is-auth .auth-screen { display: grid; }
    .is-auth .sidebar, .is-auth .shell { display: none; }
    .auth-card {
        width: 100%;
        min-height: 100dvh;
        min-height: 100svh;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0;
        padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
        background: transparent;
        border: 0;
        backdrop-filter: none;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-brand { margin-bottom: 10px; }
    .auth-card h1 {
        font-size: 34px;
        margin: 18px 0 8px;
    }
    .auth-card p { margin: 0; }
    .auth-visual { margin-top: 16px; }
    .tabs { margin-top: 16px; }
    .tabs button { min-height: 48px; }
    .auth-card form { gap: 10px; }
    .auth-card input {
        min-height: 50px;
        font-size: 16px;
        border-radius: 10px;
    }
    .auth-card .primary {
        min-height: 52px;
        margin-top: 4px;
        border-radius: 10px;
        font-weight: 800;
    }
    .error {
        margin: 10px 0 0;
        padding-bottom: 4px;
        line-height: 1.35;
    }
}

@media (max-width: 580px) and (max-height: 700px) {
    .auth-card {
        justify-content: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    }
    .auth-brand { margin-bottom: 6px; }
    .auth-card h1 {
        font-size: 28px;
        margin: 10px 0 4px;
    }
    .auth-card p {
        font-size: 14px;
        line-height: 1.3;
    }
    .auth-visual { display: none; }
    .tabs {
        gap: 6px;
        margin-top: 10px;
        padding: 4px;
    }
    .tabs button { min-height: 42px; }
    .google-login-wrap {
        gap: 6px;
        margin-top: 10px;
        padding: 8px;
    }
    .google-login-wrap .meta { font-size: 12px; }
    .auth-card form {
        gap: 8px;
        margin-top: 10px;
    }
    .auth-card label { gap: 4px; }
    .auth-card input {
        min-height: 44px;
        padding: 9px 10px;
    }
    .auth-card .primary {
        min-height: 46px;
        margin-top: 2px;
    }
    .error { margin-top: 8px; }
}

@media (max-width: 580px) {
    .auth-screen {
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        background:
            radial-gradient(circle at 18% 8%, rgba(20,184,166,.18), transparent 34%),
            radial-gradient(circle at 88% 0%, rgba(37,99,235,.14), transparent 30%),
            linear-gradient(180deg, #f8fbff 0%, #fffdf9 42%, #f7f3ed 100%);
    }
    .auth-card {
        position: relative;
        width: 100%;
        min-height: 100svh;
        max-height: 100dvh;
        padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
        overflow-y: auto;
        background: transparent;
        display: grid;
        align-content: start;
        gap: 0;
    }
    .auth-card::before {
        content: "";
        position: fixed;
        inset: auto 18px max(18px, env(safe-area-inset-bottom));
        height: min(58svh, 490px);
        border: 1px solid rgba(228,222,213,.82);
        border-radius: 28px;
        background: rgba(255,255,255,.72);
        box-shadow: 0 22px 54px rgba(23,32,38,.10);
        backdrop-filter: blur(18px);
        pointer-events: none;
    }
    .auth-brand,
    .auth-card h1,
    .auth-card > p,
    .auth-visual,
    .tabs,
    .google-login-wrap,
    .auth-card form,
    .auth-card .error {
        position: relative;
        z-index: 1;
    }
    .auth-brand {
        width: fit-content;
        gap: 10px;
        margin: 0 0 28px;
        padding: 6px 10px 6px 6px;
        border: 1px solid rgba(228,222,213,.76);
        border-radius: 18px;
        background: rgba(255,255,255,.74);
        box-shadow: 0 10px 26px rgba(23,32,38,.06);
    }
    .auth-brand .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }
    .auth-brand strong {
        font-size: 14px;
        letter-spacing: 0;
    }
    .auth-card h1 {
        max-width: 350px;
        margin: 0 0 9px;
        font-size: clamp(34px, 10vw, 42px);
        line-height: .96;
    }
    .auth-card > p {
        max-width: 320px;
        margin: 0;
        color: #596874;
        font-size: 16px;
        line-height: 1.42;
    }
    .auth-visual {
        gap: 7px;
        margin-top: 18px;
    }
    .auth-visual span {
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(37,99,235,.10);
        font-size: 12px;
    }
    .tabs {
        margin-top: 20px;
        padding: 4px;
        gap: 4px;
        border-radius: 18px;
        border-color: rgba(228,222,213,.88);
        background: rgba(255,255,255,.72);
        box-shadow: 0 10px 24px rgba(23,32,38,.07);
    }
    .tabs button {
        min-height: 48px;
        border-radius: 14px;
        color: #64717a;
        font-size: 15px;
        letter-spacing: 0;
    }
    .tabs button.active {
        background: #172026;
        color: #fff;
        box-shadow: 0 12px 28px rgba(23,32,38,.22);
    }
    .google-login-wrap {
        margin-top: 12px;
        padding: 10px;
        border-radius: 18px;
        border-color: rgba(228,222,213,.86);
        background: rgba(255,255,255,.74);
        box-shadow: 0 10px 26px rgba(23,32,38,.06);
    }
    .auth-card form {
        gap: 12px;
        margin-top: 12px;
    }
    .auth-card label {
        gap: 7px;
    }
    .auth-card label span {
        color: #586672;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0;
    }
    .auth-card input {
        min-height: 50px;
        border-radius: 15px;
        border-color: rgba(228,222,213,.9);
        background: rgba(255,255,255,.88);
        padding: 12px 14px;
        font-size: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }
    .auth-card input:focus {
        outline: 0;
        border-color: var(--green);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(20,184,166,.14);
    }
    .auth-card .primary {
        min-height: 52px;
        margin-top: 2px;
        border-radius: 15px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 16px 32px rgba(37,99,235,.24);
        font-size: 16px;
        font-weight: 900;
    }
    .auth-card .primary:hover { filter: none; }
    .error {
        min-height: 18px;
        margin: 8px 0 0;
        font-size: 13px;
    }
}

@media (max-width: 580px) and (max-height: 700px) {
    .auth-card {
        padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    }
    .auth-card::before {
        inset: auto 14px max(12px, env(safe-area-inset-bottom));
        height: min(64svh, 430px);
        border-radius: 24px;
    }
    .auth-brand {
        margin-bottom: 18px;
        transform: scale(.96);
        transform-origin: left center;
    }
    .auth-card h1 {
        font-size: clamp(29px, 9vw, 34px);
        margin-bottom: 6px;
    }
    .auth-card > p {
        font-size: 14px;
        line-height: 1.32;
    }
    .auth-visual {
        display: flex;
        margin-top: 12px;
    }
    .auth-visual span {
        padding: 6px 9px;
        font-size: 11px;
    }
    .tabs {
        margin-top: 14px;
    }
    .tabs button {
        min-height: 42px;
    }
    .google-login-wrap {
        margin-top: 9px;
        padding: 8px;
    }
    .auth-card form {
        gap: 8px;
        margin-top: 9px;
    }
    .auth-card input {
        min-height: 44px;
        padding: 9px 12px;
    }
    .auth-card .primary {
        min-height: 46px;
    }
}

/* Modern auth refresh */
.is-auth {
    min-height: 100dvh;
    background: #f5f7fa;
}
.auth-screen {
    place-items: center;
    padding: 20px;
    background: #f5f7fa;
}
.auth-card {
    position: relative;
    display: grid;
    align-content: start;
    width: min(398px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid #e5e9ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(17,24,39,.10);
    backdrop-filter: none;
}
.auth-card::before { display: none; }
.auth-brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 9px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.auth-brand .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 15px;
}
.auth-brand strong {
    color: #172026;
    font-size: 15px;
    font-weight: 900;
}
.auth-card h1 {
    max-width: 310px;
    margin: 0 0 7px;
    color: #172026;
    font-size: 30px;
    line-height: 1.03;
    letter-spacing: 0;
}
.auth-card > p {
    max-width: 320px;
    margin: 0;
    color: #65727c;
    font-size: 14px;
    line-height: 1.42;
}
.auth-visual { display: none; }
.auth-card .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
    padding: 3px;
    gap: 3px;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    background: #f8fafc;
    box-shadow: none;
}
.auth-card .tabs button {
    min-height: 40px;
    border-radius: 11px;
    color: #66737e;
    font-size: 14px;
    font-weight: 900;
}
.auth-card .tabs button.active {
    background: #172026;
    color: #fff;
    box-shadow: 0 8px 18px rgba(17,24,39,.15);
}
.google-login-wrap {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}
.google-login-wrap .meta {
    font-size: 12px;
    line-height: 1.3;
}
.auth-card form.auth-form-modern {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.auth-field {
    display: grid;
    gap: 5px;
}
.auth-field > span {
    color: #5e6b75;
    font-size: 12px;
    font-weight: 900;
}
.auth-input {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid #dfe5eb;
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
}
.auth-input:focus-within {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20,184,166,.12);
}
.auth-input svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #7a8791;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.auth-input input {
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #172026;
    font-size: 15px;
}
.auth-input input:focus {
    outline: 0;
    box-shadow: none;
}
.auth-input input::placeholder { color: #8a949d; }
.auth-card .primary {
    min-height: 48px;
    margin-top: 2px;
    border-radius: 13px;
    background: #2563eb;
    box-shadow: 0 12px 24px rgba(37,99,235,.20);
    font-size: 15px;
    font-weight: 900;
}
.auth-card .error {
    min-height: 18px;
    margin: 8px 0 0;
    color: #b91c1c;
    font-size: 13px;
}

@media (max-width: 580px) {
    .auth-screen {
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        background: #ffffff;
    }
    .auth-card {
        width: 100%;
        min-height: 100svh;
        max-height: 100dvh;
        padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-brand { margin-bottom: 14px; }
    .auth-card h1 {
        max-width: 300px;
        font-size: 28px;
    }
    .auth-card > p { font-size: 14px; }
    .auth-card .tabs { margin-top: 16px; }
    .google-login-wrap { margin-top: 9px; }
    .auth-card form.auth-form-modern { margin-top: 10px; gap: 9px; }
    .auth-input {
        min-height: 46px;
        border-radius: 12px;
        grid-template-columns: 17px minmax(0, 1fr);
    }
    .auth-input svg {
        width: 15px;
        height: 15px;
    }
    .auth-input input {
        min-height: 44px;
        font-size: 15px;
    }
}

@media (max-width: 580px) and (max-height: 720px) {
    .auth-card {
        justify-content: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    }
    .auth-brand {
        margin-bottom: 10px;
    }
    .auth-brand .brand-mark {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }
    .auth-card h1 {
        max-width: 280px;
        margin-bottom: 4px;
        font-size: 24px;
        line-height: 1.05;
    }
    .auth-card > p {
        font-size: 13px;
        line-height: 1.3;
    }
    .auth-card .tabs {
        margin-top: 10px;
    }
    .auth-card .tabs button {
        min-height: 38px;
        font-size: 13px;
    }
    .google-login-wrap {
        margin-top: 7px;
        padding: 6px;
    }
    .auth-card form.auth-form-modern {
        gap: 7px;
        margin-top: 8px;
    }
    .auth-field { gap: 4px; }
    .auth-field > span { font-size: 11px; }
    .auth-input {
        min-height: 42px;
        padding: 0 11px;
        border-radius: 11px;
    }
    .auth-input input { min-height: 40px; }
    .auth-card .primary {
        min-height: 42px;
        border-radius: 11px;
    }
}