:root {
    --ink: #2d1308;
    --wood: #38180c;
    --paper: #ffe8bd;
    --paper-soft: #fff3d6;
    --gold: #ffb019;
    --green: #12b653;
    --blue: #1599e6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: Figtree, system-ui, sans-serif;
    background:
        radial-gradient(circle at 66% 8%, rgba(255,255,255,.88) 0 5%, transparent 15%),
        linear-gradient(180deg, #34bef5 0 24%, #0c9ccb 24% 30%, #e7c06b 30% 35%, #104c2a 35% 100%);
}

button { font: inherit; cursor: pointer; }

.app-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px 14px;
    overflow-y: auto;
    color: #fff7da;
    background:
        linear-gradient(90deg, rgba(0,0,0,.28), transparent 16px),
        repeating-linear-gradient(180deg, #4a2110 0 54px, #351509 55px 58px);
    box-shadow: 10px 0 22px rgba(0,0,0,.35);
}

.brand {
    display: block;
    margin: -6px -6px 10px;
}

.brand img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.35));
}

.profile-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.profile-card strong { display: block; font-size: 1.1rem; }
.profile-card span, .profile-card small { display: block; }

.child-switcher {
    display: grid;
    gap: 7px;
    padding: 0 12px 14px;
    color: #fff7da;
}

.child-switcher select,
.child-switcher button,
.child-create-form input,
.child-create-form button,
.child-journey button {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(45,19,8,.4);
    border-radius: 5px;
    font: inherit;
}

.child-switcher select { color: var(--ink); background: #fff3d6; }
.child-switcher button, .child-journey button { color: var(--ink); background: #ffcf55; font-weight: 700; }

.child-create-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 18px;
}

.child-create-form label { grid-column: 1 / -1; font-weight: 700; }
.child-create-form input { width: 100%; }

.child-journey-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.child-journey { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid rgba(45,19,8,.16); }
.child-journey div span { display: block; margin-top: 4px; }
.child-journey[data-active="true"] { background: rgba(255,176,25,.16); }

.avatar-face {
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #30baf4;
    font-size: 2.2rem;
}

.mini-progress, .progress {
    height: 24px;
    overflow: hidden;
    border: 1px solid rgba(100,55,19,.35);
    border-radius: 999px;
    background: #dcc399;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.14);
}

.mini-progress { height: 12px; margin-top: 6px; background: #1b110c; }
.mini-progress span, .progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(#18df70, #0aa44a); }
.progress.blue span { background: linear-gradient(#22baf4, #0b7fd4); }
.progress.orange span { background: linear-gradient(#ffc52b, #fa9700); }
.progress.brown span { background: linear-gradient(#9c7357, #744b32); }

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

.nav-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    color: white;
    text-align: left;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: .98rem;
    font-weight: 800;
}

.nav-item span { font-size: 1.45rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.nav-item.active { color: #1d0d06; background: linear-gradient(#ffe9b6, #ffc96b); box-shadow: inset 0 2px #fff4cf, 0 3px 0 #5e2b10; }

.wood-sign {
    width: 150px;
    padding: 10px;
    margin: 28px auto 0;
    color: #2b1307;
    text-align: center;
    border: 3px solid #55220b;
    border-radius: 8px;
    background: linear-gradient(#d98a39, #bb6729);
    font-weight: 900;
    transform: rotate(-5deg);
}

.content {
    min-width: 0;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 260px),
        radial-gradient(circle at 96% 0, rgba(14,79,38,.7), transparent 22%),
        radial-gradient(circle at 2% 100%, rgba(13,83,38,.88), transparent 22%);
}

.screen { display: none; }
.screen.active { display: block; }

.flash {
    position: sticky;
    top: 12px;
    z-index: 5;
    width: min(720px, 100%);
    margin: 0 auto 18px;
    padding: 14px 18px;
    color: white;
    text-align: center;
    border-radius: 8px;
    background: linear-gradient(#17d663, #08a649);
    box-shadow: 0 5px 0 rgba(8,113,46,.7);
    font-weight: 900;
}
.flash.error { background: linear-gradient(#f2544b, #d21f18); box-shadow: 0 5px 0 rgba(126,25,18,.7); }
.flash.achievement { background: linear-gradient(#ffcb35, #f19a00); box-shadow: 0 5px 0 rgba(133,82,0,.7); }
.flash.level { background: linear-gradient(#25b8ff, #087fd0); box-shadow: 0 5px 0 rgba(6,80,132,.7); }

.hero {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 90px;
    align-items: center;
    gap: 20px;
    min-height: 160px;
    padding: 14px 24px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(130,219,255,.7), rgba(255,255,255,.08) 58%, rgba(244,190,82,.34)),
        linear-gradient(90deg, rgba(32,122,62,.68), transparent 20% 80%, rgba(18,87,45,.8));
}

.hero h1, .title-banner h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.9rem);
    line-height: 1;
    font-weight: 900;
}

.hero p { margin: 6px 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 900; }
.hero span { font-size: 1rem; font-weight: 700; }
.hero-kid { font-size: 6.5rem; line-height: 1; text-align: center; filter: drop-shadow(0 8px 0 rgba(0,0,0,.15)); }
.hero-ship { align-self: start; margin-top: 20px; font-size: 3.4rem; }

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

.guardian-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 10px 0 22px;
    color: #fff7da;
}

.guardian-heading > div:first-child > span { font-size: .8rem; font-weight: 900; }
.guardian-heading h1 { margin: 6px 0; font-size: 2rem; }
.guardian-heading p { margin: 0; }
.guardian-active-child { display: grid; gap: 4px; padding: 12px 16px; border-left: 3px solid #ffcf55; text-align: right; }

.guardian-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.guardian-metric { display: grid; gap: 8px; align-content: start; min-width: 0; }
.guardian-metric > span { font-weight: 900; }
.guardian-metric > b { font-size: 1.5rem; }
.guardian-metric small { min-height: 2.5em; }
.guardian-metric a { color: #145c36; font-weight: 900; }
.guardian-approvals .section-title { flex: 1; }
.guardian-approvals > header { align-items: center; }
.guardian-approval-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.guardian-approval-list > li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(45,19,8,.16); }
.guardian-approval-list > li > div:first-child { display: grid; gap: 4px; }
.guardian-approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guardian-approval-empty { color: rgba(45,19,8,.72); }

.main-stack, .right-stack { display: grid; gap: 18px; align-content: start; }

.parchment {
    padding: 18px;
    border: 2px solid #b87531;
    border-radius: 8px;
    background:
        radial-gradient(circle at 94% 11%, rgba(132,79,29,.1), transparent 16%),
        linear-gradient(135deg, var(--paper-soft), var(--paper));
    box-shadow: 0 8px 0 rgba(79,31,9,.35), inset 0 2px rgba(255,255,255,.6);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.section-title > span { font-size: 2.3rem; }
.section-title h2, .goal-card h2, .parchment h2 { margin: 0; font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.05; font-weight: 900; }
.section-title p, .goal-card p { margin: 4px 0 0; font-size: .98rem; }
.section-title.compact { margin-bottom: 12px; }
.section-title.compact > span { font-size: 2rem; }

.treasure-map { min-height: 320px; }
.island-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}

.island {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 8px;
    min-height: 230px;
    text-align: center;
}

.island b { font-size: 1.05rem; line-height: 1.1; }
.island span {
    min-width: 112px;
    padding: 6px 12px;
    color: white;
    border-radius: 8px;
    background: linear-gradient(#17da61, #06a946);
    font-size: 1.35rem;
    font-weight: 900;
}
.island.current span { color: #1d0d06; background: linear-gradient(#ffd43b, #f79c05); }
.island.locked span { background: linear-gradient(#9b7257, #704a34); }
.island i { font-style: normal; font-size: 3.8rem; }
.island em { font-style: normal; font-size: 2rem; }
.island button {
    min-width: 130px;
    padding: 10px 18px;
    color: white;
    border: 0;
    border-radius: 8px;
    background: var(--green);
    font-weight: 900;
}
.island.current button { color: #221006; background: var(--gold); }
.island.locked button { color: #2c2019; background: #b9aaa0; }

.reward-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 14px;
}

.reward, .badge, .metric {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-height: 150px;
    padding: 14px;
    text-align: center;
    border: 1px solid #d6a063;
    border-radius: 8px;
    background: linear-gradient(#fff7df, #f7dca7);
}
.reward span { font-size: 2.4rem; }
.reward form { width: 100%; margin: 0; }
.reward .primary { width: 100%; min-height: 42px; border-radius: 8px; }
.reward em {
    padding: 5px 18px;
    color: #4a2106;
    border: 1px solid #b36b00;
    border-radius: 999px;
    background: linear-gradient(#ffd94c, #ff9d00);
    font-style: normal;
    font-weight: 900;
}
.reward.locked-reward { opacity: .76; }
.primary.unavailable {
    color: #5f4c35;
    background: linear-gradient(#e7d8bd, #cdb894);
    box-shadow: inset 0 2px rgba(255,255,255,.3), 0 3px 0 #8a7558;
    cursor: default;
}

.coin-widget small { display: block; text-align: center; font-size: 1.05rem; font-weight: 800; }
.coin-widget strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 10px 0;
    font-size: clamp(2.3rem, 3.2vw, 3.2rem);
    line-height: 1;
}
.coin-widget strong span { font-size: 2.8rem; }
.coin-widget p { margin: 12px 0 0; text-align: center; font-size: 1rem; font-weight: 700; line-height: 1.4; }

.mini-list { padding: 0; margin: 0; list-style: none; }
.mini-list li {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid rgba(121,72,23,.18);
    font-weight: 800;
}
.mini-list li span {
    width: 34px;
    aspect-ratio: 1;
    border: 3px solid #caa270;
    border-radius: 50%;
}
.mini-list .check { display: grid; place-items: center; color: white; border-color: #159541; background: var(--green); }
.approval-list li {
    grid-template-columns: 42px 1fr auto;
    gap: 8px;
    padding: 8px 0;
}
.approval-list form { margin: 0; }
.approval-list button {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    color: white;
    background: linear-gradient(#17d663, #08a649);
    font-size: .78rem;
    font-weight: 900;
}
.approval-list form + form button { background: linear-gradient(#f07163, #c74335); }
.progress-card p { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(121,72,23,.18); }

.tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.wide-tabs { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.tabs button, .tabs a {
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: linear-gradient(#fff6df, #f8dfad);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}
.tabs .selected { color: white; border-color: #06923d; background: linear-gradient(#18c85d, #07a347); }
.tabs.slim { grid-template-columns: repeat(3, minmax(90px, 120px)); justify-content: end; }

.mission-list { display: grid; gap: 10px; }
.mission-create-form {
    display: grid;
    grid-template-columns: 72px minmax(150px, 1fr) minmax(220px, 1.4fr) 92px 170px;
    gap: 10px;
    margin-bottom: 16px;
}
.reward-create-form {
    display: grid;
    grid-template-columns: 72px minmax(180px, 1fr) 120px 210px;
    gap: 10px;
    margin-bottom: 16px;
}
.mission-create-form input,
.reward-create-form input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.62);
    font-weight: 800;
}
.mission {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) 72px 160px;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 18px;
    border: 1px solid #d4a06a;
    border-radius: 8px;
    background: rgba(255,255,255,.48);
}
.mission.empty-state {
    grid-template-columns: 64px minmax(0, 1fr) 72px;
}
.mission > span { text-align: center; font-size: 2.2rem; }
.mission b { font-size: 1.1rem; }
.mission p { margin: 4px 0 0; }
.mission em { font-size: 1.1rem; font-style: normal; font-weight: 900; }
.mission form { margin: 0; }
.mission form button { width: 100%; }
.mission button, .primary {
    display: inline-grid;
    place-items: center;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #f2e0be;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}
.mission .inline-delete { grid-column: 4; }
.inline-delete button {
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    color: #7c170f;
    border: 1px solid #d89186;
    border-radius: 8px;
    background: linear-gradient(#ffe4df, #ffc3ba);
    font-weight: 900;
}
.mission button.done, .primary { color: white; background: linear-gradient(#17d663, #08a649); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 3px 0 #08712e; }
.mission button.doing { color: white; background: linear-gradient(#22aeea, #087ece); }
.mission button:disabled { cursor: default; opacity: 1; }

.goal-card { display: grid; gap: 12px; }
.goal-card form { margin: 0; }
.goal-card form .primary { width: 100%; border-radius: 8px; }
.goal-card .as-button { width: 100%; border-radius: 8px; }
.tip { font-size: 1.05rem; }
.tip b { font-size: 1.3rem; }

.wide-map { margin-bottom: 18px; }
.island-row.big .island { min-height: 230px; }
.three-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; }
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.stats h2 { grid-column: 1 / -1; }
.stats div { padding: 16px; border: 1px solid #d6a063; border-radius: 8px; background: rgba(255,255,255,.4); }
.stats b { display: block; font-size: 1.5rem; }
.chart .bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 20px;
    height: 210px;
    padding: 20px 20px 0;
    border-bottom: 2px solid #c4935e;
}
.bars span { display: grid; align-items: start; justify-items: center; color: #190b05; border-radius: 8px 8px 0 0; background: linear-gradient(#14d365, #09a34a); font-weight: 900; }
.bars span:nth-child(2) { background: linear-gradient(#ffc333, #f39a05); }
.bars span:nth-child(3) { color: white; background: linear-gradient(#a98265, #7d5238); }
.bars span:nth-child(4) { background: #d7c8ae; }
.bar-labels { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 8px; text-align: center; }
.road { display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 8px; margin: 24px 0; }
.road span {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 112px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid rgba(111,68,25,.28);
    border-radius: 8px;
    background: rgba(255,255,255,.35);
    font-size: 2rem;
    font-weight: 800;
}
.road span.current { color: #1d0d06; background: linear-gradient(#ffe25b, #ffb01a); box-shadow: 0 4px 0 rgba(121,72,23,.35); }
.road span.locked { color: #806550; background: rgba(151,124,93,.2); }
.road small { font-size: .9rem; }

.title-banner, .profile-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
}
.title-banner {
    width: min(860px, 100%);
    min-height: 110px;
    padding: 16px 24px;
    border: 2px solid #b87531;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2cf, #ffd999);
    box-shadow: 0 8px 0 rgba(79,31,9,.35);
}
.title-banner > span { font-size: 3.4rem; }
.title-banner p { margin: 6px 0 0; font-size: 1.1rem; }
.profile-layout { justify-content: space-between; }
.coin-mini { min-width: 250px; text-align: center; }
.coin-mini b { display: block; font-size: 2.3rem; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.badge { min-height: 180px; }
.badge > span {
    display: grid;
    place-items: center;
    width: 68px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(#16bff4, #0472ac);
    font-size: 2.3rem;
}
.badge p { margin: 0; }
.badge em { color: #0a9845; font-style: normal; font-weight: 900; }
.badge.locked { color: #8b7660; }
.badge.locked > span { color: #f1dfc7; background: #8c7b70; }

.avatar-panel { min-width: 0; }
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: 10px;
}
.avatar-grid button {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid #d6a063;
    border-radius: 8px;
    background: linear-gradient(#ffeec8, #f5cf91);
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
}
.avatar-grid button.selected { outline: 5px solid var(--green); background: #43c8fa; }
.avatar-preview { display: grid; align-content: start; justify-items: center; gap: 18px; }
.avatar-save-form { width: 100%; margin: 0; }
.big-avatar {
    display: grid;
    place-items: center;
    width: min(220px, 80%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #31baf6;
    font-size: 7rem;
}
.shuffle {
    width: 100%;
    min-height: 60px;
    border: 1px solid #d6a063;
    border-radius: 8px;
    background: linear-gradient(#fff0cb, #ffd798);
    font-weight: 900;
}
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches button {
    width: 44px;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
}
.swatches .selected { outline: 5px solid white; box-shadow: 0 0 0 4px var(--green); }
.primary.large { width: 100%; min-height: 54px; border-radius: 8px; font-size: 1.15rem; }

.summary-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.metric { grid-template-columns: 64px 1fr; justify-items: start; min-height: 88px; text-align: left; font-size: 2.4rem; }
.metric b { font-size: 2.1rem; line-height: 1; }
.metric span { grid-column: 2; font-size: 1rem; }
.history { padding: 0; margin: 0; list-style: none; }
.history li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 130px 100px;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid rgba(121,72,23,.18);
    font-weight: 700;
}
.history b { color: #078f3c; text-align: right; font-size: 1.1rem; }
.history .negative { color: #d21f18; }
.negative { color: #d21f18; }
.objectives header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.coin-flow-forms {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
.coin-entry-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 120px 190px;
    gap: 10px;
}
.primary.danger { background: linear-gradient(#f2544b, #d21f18); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 3px 0 rgba(126,25,18,.7); }
.objective-form {
    display: grid;
    grid-template-columns: 72px minmax(150px, 1fr) 120px 140px;
    gap: 10px;
    margin-bottom: 16px;
}
.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.settings-form label {
    display: grid;
    gap: 6px;
    font-weight: 900;
}
.settings-form input {
    width: 100%;
    min-height: 50px;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.62);
    font-weight: 800;
}
.settings-form button { grid-column: 1 / -1; }
.logout-form { margin-top: 10px; }
.logout-button { width: 100%; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff8e6; }
.mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
}
.mode-switch a {
    min-height: 38px;
    display: grid;
    place-items: center;
    color: #fff8e6;
    border-radius: 6px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 900;
}
.mode-switch a.selected {
    color: var(--ink);
    background: #ffd04a;
}
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.auth-shell {
    display: grid;
    gap: 22px;
    width: min(440px, 100%);
}
.auth-brand {
    width: min(360px, 100%);
    margin: 0 auto -8px;
}
.auth-panel {
    display: grid;
    gap: 18px;
    padding: 28px;
}
.auth-heading { text-align: center; }
.auth-heading span { font-size: 2.6rem; line-height: 1; }
.auth-heading h1 { margin: 6px 0 0; font-size: 2rem; font-weight: 900; line-height: 1.1; }
.auth-heading p { margin: 6px 0 0; color: rgba(45,19,8,.75); font-weight: 700; }
.auth-panel .flash { position: static; width: 100%; margin: 0; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; font-weight: 900; }
.auth-form input:not([type="checkbox"]) {
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    color: var(--ink);
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.7);
    font: inherit;
    font-weight: 700;
}
.auth-form input:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 1px;
    border-color: #b87531;
}
.auth-form .checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    cursor: pointer;
}
.checkbox-line input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--green);
}
.auth-form .pin-input {
    text-align: center;
    letter-spacing: .6em;
    font-size: 1.4rem;
}
.auth-form .primary.large { margin-top: 4px; min-height: 58px; font-size: 1.25rem; }
.auth-link {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(121,72,23,.22);
    font-weight: 700;
    text-align: center;
}
.auth-link a, .auth-link .link-button { color: #8f4f21; font-weight: 900; }
.auth-link .link-button {
    padding: 0;
    border: 0;
    background: none;
    text-decoration: underline;
}
@media (max-width: 480px) {
    .auth-page { align-items: flex-start; }
    .auth-panel { padding: 20px; }
}
.coin-entry-form input, .objective-form input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    color: var(--ink);
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.62);
    font-weight: 800;
}
.primary.small { min-height: 42px; border-radius: 8px; }
.week-list { display: grid; gap: 14px; padding: 0; margin: 14px 0 0; list-style: none; }
.week-list li { display: grid; grid-template-columns: 120px 1fr 86px; align-items: center; gap: 10px; font-weight: 900; }

@media (max-width: 1260px) {
    .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .guardian-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .right-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .hero { grid-template-columns: 140px 1fr 70px; }
    .hero-kid { font-size: 5rem; }
}

@media (max-width: 920px) {
    .app-shell { display: block; }
    .sidebar {
        position: static;
        height: auto;
        padding: 10px;
        overflow: visible;
    }
    .brand { width: 180px; margin: 0 auto 10px; }
    .profile-card, .wood-sign { display: none; }
    .nav-list {
        grid-auto-flow: column;
        grid-auto-columns: minmax(92px, 1fr);
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .nav-item {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 78px;
        padding: 8px;
        text-align: center;
        font-size: .82rem;
    }
    .nav-item span { font-size: 1.8rem; }
    .content { padding: 12px; }
    .guardian-heading { align-items: flex-start; flex-direction: column; }
    .guardian-active-child { text-align: left; }
    .hero {
        grid-template-columns: 110px 1fr;
        min-height: 175px;
        padding: 14px;
    }
    .hero-ship { display: none; }
    .hero-kid { font-size: 5rem; }
    .right-stack, .three-grid, .summary-row { grid-template-columns: 1fr; }
    .island-row { grid-template-columns: repeat(2, 1fr); }
    .reward-grid, .badge-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tabs {
        display: flex;
        overflow-x: auto;
    }
    .tabs button { min-width: 150px; }
    .mission { grid-template-columns: 58px 1fr; }
    .mission.empty-state { grid-template-columns: 58px 1fr; }
    .mission em, .mission button, .mission form { grid-column: 2; }
    .mission-create-form { grid-template-columns: 72px 1fr; }
    .mission-create-form input[name="description"], .mission-create-form button { grid-column: 1 / -1; }
    .reward-create-form { grid-template-columns: 72px 1fr; }
    .reward-create-form button { grid-column: 1 / -1; }
    .avatar-grid { grid-template-columns: repeat(4, minmax(64px,1fr)); }
    .profile-layout { display: block; }
    .coin-mini { min-width: 0; margin-bottom: 18px; }
    .history li { grid-template-columns: 38px 1fr; gap: 4px; padding: 8px 0; }
    .history time, .history b { grid-column: 2; text-align: left; }
    .week-list li { grid-template-columns: 1fr; }
    .guardian-approval-list > li { align-items: flex-start; flex-direction: column; }
    .coin-entry-form { grid-template-columns: 1fr 100px; }
    .coin-entry-form button { grid-column: 1 / -1; }
    .objective-form { grid-template-columns: 72px 1fr; }
    .objective-form button { grid-column: 1 / -1; }
    .settings-form { grid-template-columns: 1fr; }
    .settings-form button { grid-column: auto; }
    .child-create-form { grid-template-columns: 1fr; }
    .child-create-form label { grid-column: auto; }
    .child-journey { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .guardian-metrics { grid-template-columns: 1fr; }
    .guardian-heading h1 { font-size: 1.8rem; }
    .guardian-approvals .section-title { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .hero { grid-template-columns: 1fr; text-align: center; }
    .hero-kid { display: none; }
    .title-banner { min-height: 0; padding: 16px; }
    .title-banner > span { font-size: 3rem; }
    .island-row, .reward-grid, .badge-grid, .stats { grid-template-columns: 1fr; }
    .island { min-height: 190px; }
    .avatar-grid { grid-template-columns: repeat(3, minmax(64px,1fr)); }
    .avatar-grid button { font-size: 3rem; }
    .big-avatar { font-size: 6rem; }
    .metric { grid-template-columns: 58px 1fr; font-size: 2.3rem; }
    .metric b { font-size: 2rem; }
    .mission-create-form { grid-template-columns: 1fr; }
    .mission-create-form input[name="description"], .mission-create-form button { grid-column: auto; }
    .reward-create-form { grid-template-columns: 1fr; }
    .reward-create-form button { grid-column: auto; }
    .coin-entry-form { grid-template-columns: 1fr; }
    .coin-entry-form button { grid-column: auto; }
    .objective-form { grid-template-columns: 1fr; }
    .objective-form button { grid-column: auto; }
    .settings-form { grid-template-columns: 1fr; }
}

.plan-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px dashed #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.45);
    font-size: .92rem;
    font-weight: 700;
}
.plan-note a, .flash a { color: inherit; font-weight: 900; }
.mission.plan-locked, .avatar-grid button.plan-locked { opacity: .55; }
.mission button.locked { cursor: default; }
.avatar-grid button.plan-locked { cursor: not-allowed; }
.plan-upsell p { margin: 12px 0; }
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.plan-card { display: grid; justify-items: center; gap: 6px; text-align: center; }
.plan-card.current { outline: 4px solid var(--green); }
.plan-icon { font-size: 2.4rem; }
.plan-card h2 { margin: 0; }
.plan-price { margin: 4px 0 0; font-size: 1.05rem; }
.plan-price b { font-size: 1.8rem; }
.plan-annual { margin: 0 0 8px; color: rgba(45,19,8,.75); font-weight: 700; }
.plan-card s { color: rgba(45,19,8,.5); font-weight: 700; }
.plan-card .primary { width: 100%; min-height: 44px; border-radius: 8px; }
.plan-comparison { overflow-x: auto; }
.plan-comparison table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.plan-comparison th, .plan-comparison td { padding: 8px 10px; border-bottom: 1px solid rgba(121,72,23,.18); text-align: center; }
.plan-comparison th[scope="row"], .plan-comparison thead th:first-child { text-align: left; }
.plan-comparison thead th { font-weight: 900; }
.plan-subscribe { display: grid; gap: 8px; width: 100%; margin: 0; }
.subscription-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.subscription-card p { margin: 4px 0 0; font-weight: 700; }
.subscription-card form { margin: 0; }
.expired-shell { width: min(640px, 100%); }
.expired-plans { margin: 0; }
.expired-plans .plan-card {
    padding: 16px;
    border: 1px solid #d6a063;
    border-radius: 8px;
    background: rgba(255,255,255,.5);
}
.auth-panel .primary.large.as-button { display: grid; place-items: center; text-decoration: none; }
.plan-buy { display: grid; gap: 12px; width: 100%; }
.plan-subscribe small { font-weight: 800; color: rgba(45,19,8,.75); }
.plan-subscribe.pix .primary { background: linear-gradient(#35c6b8, #0f9e91); box-shadow: inset 0 2px rgba(255,255,255,.28), 0 3px 0 #0b6d64; }
.pix-panel { text-align: center; }
.pix-qr { justify-self: center; width: 220px; height: 220px; border-radius: 8px; background: #fff; padding: 8px; }
.pix-code { display: grid; gap: 6px; font-weight: 900; text-align: left; }
.pix-code textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #c9995d;
    border-radius: 8px;
    background: rgba(255,255,255,.7);
    font: inherit;
    font-size: .85rem;
    resize: none;
    word-break: break-all;
}
.pix-status { margin: 0; font-weight: 700; }