:root {
  --bg: #f3f3ef;
  --card: #fff;
  --text: #181818;
  --muted: #74746f;
  --border: #deded8;
  --soft: #efefe9;
  --danger: #9a3939;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }

#app { min-height: 100vh; }

.welcome-screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e9e9e3;
}
.welcome-cloud {
  position: absolute;
  inset: -3vh -3vw;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: .25em .5em;
  opacity: .10;
  transform: rotate(-5deg) scale(1.08);
  pointer-events: none;
}
.welcome-cloud span {
  font-size: clamp(2.2rem, 8vw, 8rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .82;
  white-space: nowrap;
  color: var(--word-color, #777);
}
.welcome-logo {
  position: relative;
  z-index: 1;
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -.08em;
}

.onboarding-shell,
.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}
.onboarding-card {
  width: min(660px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 22px 70px rgba(0,0,0,.05);
}
.wide-card { width: min(820px, 100%); }

.card-top,
.page-header,
.section-heading,
.actions,
.inline-controls,
.check-row,
.editor-row,
.info-row,
.dashboard-top,
.manual-budget,
.user-summary {
  display: flex;
  align-items: center;
}
.card-top { justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.step-label, .eyebrow, .section-kicker {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.055em; line-height: 1; }
h2 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -.03em; }
h3 { margin-bottom: 8px; font-size: 1rem; }
.subtext { color: var(--muted); margin-bottom: 0; line-height: 1.55; }

.language-picker { position: relative; }
.flag-button {
  width: 48px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  font-size: 1.4rem;
}
.language-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
  z-index: 10;
}
.language-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  text-align: left;
}
.language-menu button:hover { background: var(--soft); }
.hidden { display: none !important; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 650; color: var(--muted); }
.field input, .field select, .editor-row input, .manual-controls input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}
.field input:focus, .field select:focus, .editor-row input:focus, .manual-controls input:focus { border-color: #92928d; }

.actions { justify-content: flex-end; gap: 9px; margin-top: 26px; flex-wrap: wrap; }
.primary-btn, .secondary-btn, .danger-btn, .icon-btn {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 17px;
  border: 1px solid var(--border);
  transition: transform .1s ease, background .1s ease;
}
button:active { transform: scale(.98); }
.primary-btn { background: var(--text); color: white; border-color: var(--text); }
.secondary-btn { background: white; color: var(--text); }
.danger-btn { background: white; color: var(--danger); }
.icon-btn { width: 43px; padding: 0; background: white; font-size: 1.2rem; }
.full-width { width: 100%; margin-top: 12px; }

.setup-lists { display: grid; gap: 24px; }
.setup-block {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.setup-block .section-heading { justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.editor-rows { display: grid; gap: 9px; }
.editor-row { gap: 8px; }
.editor-row .name-input { flex: 1; min-width: 0; }
.editor-row .value-input { width: 112px; }
.remove-row {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 1.25rem;
}

.summary-box {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.info-row { justify-content: space-between; gap: 20px; padding: 13px 16px; border-top: 1px solid var(--border); }
.info-row:first-child { border-top: 0; }
.info-row span:first-child { color: var(--muted); font-size: .85rem; }
.info-row strong { text-align: right; }
.summary-list { margin-top: 18px; }
.summary-list ul { margin: 10px 0 0; padding-left: 20px; }
.summary-list li { margin: 5px 0; }

.app {
  width: min(940px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 30px;
}
.dashboard-top { justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.brand h1 { margin-bottom: 0; font-size: clamp(2.5rem, 7vw, 4.5rem); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.user-button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  display: grid;
  place-items: center;
  padding: 0;
}
.user-button svg { width: 21px; height: 21px; }

.date-card, .card, .budget-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
}
.date-card { padding: 15px 18px; min-width: 180px; display: grid; gap: 4px; }
.date-card span { color: var(--muted); font-size: .78rem; }
.date-card strong { font-size: .95rem; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.budget-card { padding: 22px; }
.budget-card-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.budget-card-head span { color: var(--muted); font-size: .8rem; font-weight: 650; }
.budget-value { margin: 8px 0 2px; font-size: clamp(2.2rem, 7vw, 3.5rem); font-weight: 760; letter-spacing: -.06em; }
.budget-meta { color: var(--muted); font-size: .82rem; }

.card { padding: 22px; margin-bottom: 16px; }
.manual-budget { justify-content: space-between; gap: 18px; }
.manual-budget p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.manual-controls { display:flex; gap:8px; align-items:center; }
.manual-controls input { width: 120px; }
.square-btn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: white; font-size: 1.35rem; }
.square-btn.add { background: var(--text); color:white; border-color: var(--text); }

.section-heading { justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.checklist { display: grid; }
.check-row { min-height: 58px; gap: 13px; border-top: 1px solid var(--border); }
.check-row:first-child { border-top: 0; }
.check-row input[type="checkbox"] {
  appearance: none;
  width: 21px; height: 21px; flex: 0 0 21px;
  border: 1.5px solid #9d9d97; border-radius: 6px;
  display: grid; place-content: center;
}
.check-row input[type="checkbox"]::before {
  content:""; width:9px; height:5px; border-left:2px solid white; border-bottom:2px solid white;
  transform: rotate(-45deg) scale(0); transition: transform .1s ease;
}
.check-row input[type="checkbox"]:checked { background: var(--text); border-color: var(--text); }
.check-row input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.check-label { flex: 1; line-height: 1.35; }
.check-row.checked .check-label { color:#999; text-decoration: line-through; }
.item-value { min-width: 80px; text-align: right; font-weight: 700; }
.list-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.bonus-section { margin-top: 28px; }
.empty-state { padding: 16px 0; color: var(--muted); font-size:.9rem; }

.page-shell { place-items: start center; }
.page-wrap { width: min(820px, 100%); }
.page-header { justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-card { background:white; border:1px solid var(--border); border-radius:20px; padding:24px; }
.user-summary { justify-content: space-between; gap: 20px; }

.status { margin-top: 12px; color: var(--muted); font-size: .78rem; text-align: right; min-height: 1.2em; }
.error { color: var(--danger); font-size: .82rem; margin-top: 12px; }

@media (max-width: 700px) {
  .onboarding-card { padding: 20px; border-radius: 18px; }
  .form-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .app { width: min(100% - 20px, 940px); padding-top: 22px; }
  .dashboard-top { align-items: flex-end; }
  .date-card { min-width: 145px; }
  .manual-budget { align-items: flex-start; flex-direction: column; }
  .manual-controls { width: 100%; }
  .manual-controls input { flex: 1; width: auto; }
  .editor-row { flex-wrap: wrap; }
  .editor-row .name-input { flex-basis: 100%; }
  .editor-row .value-input { flex: 1; width:auto; }
}

.suggestion-hint,.edit-hint{max-width:620px;margin:5px 0 14px}.edit-hint{margin-bottom:18px}.explanation-card{width:min(720px,100%)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-card{min-height:120px;border:1px solid var(--border);border-radius:16px;background:white;padding:18px;text-align:left;display:flex;flex-direction:column;justify-content:space-between}.choice-card.primary-choice{background:var(--text);color:white;border-color:var(--text)}.choice-icon{font-size:1.5rem}.explanation-copy{font-size:1.05rem;line-height:1.75}.concept-flow{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:30px 0 8px}.concept-flow span{padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--soft);font-weight:700}.long-copy{line-height:1.75}.long-copy p{margin-bottom:18px}
.help-button{width:45px;height:45px;border-radius:50%;border:1px solid var(--border);background:white;font-size:1.15rem;font-weight:800}.reminder-summary{font-size:1.15rem;font-weight:700;margin:14px 0 8px}.reminder-page-intro{margin-bottom:22px}.reminder-option{border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px}.toggle-line{display:flex;align-items:center;gap:10px}.toggle-line input{width:19px;height:19px}.reminder-fields{display:grid;gap:14px;margin-top:16px}.field textarea,.forum-compose textarea{width:100%;border:1px solid var(--border);border-radius:11px;background:white;color:var(--text);padding:11px 12px;outline:none;resize:vertical;font:inherit}.field textarea:focus,.forum-compose textarea:focus{border-color:#92928d}.mini-actions{display:flex;gap:8px;flex-wrap:wrap}.reminder-limit{margin:16px 0 0}.forum-compose{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin:22px 0 10px}.forum-note{font-size:.82rem;color:var(--muted);line-height:1.5;background:var(--soft);padding:11px 13px;border-radius:10px}.forum-list{display:grid;gap:10px;margin-top:18px}.forum-post{border:1px solid var(--border);border-radius:14px;padding:16px}.forum-post-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.forum-post-head span{font-size:.75rem;color:var(--muted)}.forum-post p{margin:0;line-height:1.5}
@media(max-width:700px){.choice-grid{grid-template-columns:1fr}.forum-compose{grid-template-columns:1fr}.top-actions{flex-wrap:wrap;justify-content:flex-end}}

.ai-forum-banner{display:flex;align-items:center;gap:12px;margin:18px 0 4px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:var(--soft)}.ai-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:white;font-weight:800;font-size:.78rem;flex:0 0 auto}.ai-avatar.small{width:32px;height:32px;font-size:.68rem}.ai-forum-banner>div:last-child,.ai-reply-head>div:last-child{display:grid;gap:2px}.ai-forum-banner span,.ai-reply-head span{font-size:.74rem;color:var(--muted)}.forum-thread{display:grid;gap:8px}.forum-ai-reply{margin-left:28px;border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--soft)}.ai-reply-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}.forum-ai-reply p{margin:0;line-height:1.55}.forum-post{background:white}@media(max-width:700px){.forum-ai-reply{margin-left:12px}}

.danger-zone{margin-top:28px;padding-top:22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:18px}.danger-zone strong{display:block;margin-bottom:5px}.danger-zone p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5;max-width:520px}.danger-btn{border:1px solid var(--danger);background:white;color:var(--danger);padding:10px 14px;border-radius:10px;font-weight:700;white-space:nowrap}.danger-btn:hover{background:#fff4f4}@media(max-width:700px){.danger-zone{align-items:flex-start;flex-direction:column}.danger-btn{width:100%}}

/* ===== Routine v7 visual themes ===== */
.welcome-cloud { opacity: .24; gap: .32em .55em; }
.welcome-cloud span { color: var(--word-color, #555); text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.welcome-logo { padding: .14em .24em .18em; border-radius: .2em; background: rgba(255,255,255,.7); backdrop-filter: blur(12px); box-shadow: 0 18px 70px rgba(0,0,0,.08); }

.profile-theme-shell { background: radial-gradient(circle at 10% 10%, #e7efff 0, transparent 32%), radial-gradient(circle at 90% 80%, #f7e5ef 0, transparent 34%), var(--bg); }
.wide-profile-card { width: min(1040px,100%); }
.wide-profile-page { width:min(1040px,100%); }

.budget-theme-shell {
  position: relative;
  background-image: linear-gradient(rgba(17,26,34,.36),rgba(17,26,34,.46)), url('assets/budget-uploaded-bg.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.budget-theme-shell .page-wrap, .budget-theme-shell .onboarding-card { position:relative; z-index:1; }
.budget-theme-shell .page-header { padding:12px 15px; border-radius:16px; background:rgba(255,255,255,.9); backdrop-filter:blur(9px); }
.budget-glass-card { background:rgba(255,255,255,.94); backdrop-filter:blur(9px); box-shadow:0 26px 80px rgba(0,0,0,.2); }
.budget-form { align-items:start; }
.time-field { position:relative; }
.time-mood { min-height:64px; margin-top:8px; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:13px; border:1px solid var(--border); background:rgba(255,255,255,.75); }
.time-mood span { font-size:2rem; line-height:1; }
.time-mood small { font-size:.76rem; font-weight:750; color:var(--muted); }
.time-mood.night { background:#edf0fa; }
.time-mood.day { background:#fff7d9; }
.money-rain { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
.money-rain span { position:absolute; top:-70px; animation:moneyFall 3s cubic-bezier(.2,.65,.35,1) forwards; filter:drop-shadow(0 5px 4px rgba(0,0,0,.15)); }
@keyframes moneyFall { 0%{transform:translateY(-10vh) rotate(0deg);opacity:0} 12%{opacity:1} 100%{transform:translateY(115vh) rotate(420deg);opacity:.9} }

.checklist-theme-shell {
  position:relative;
  background-image: linear-gradient(rgba(252,248,251,.58),rgba(248,251,255,.7)), url('assets/daily-scenes.svg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.checklist-theme-shell .onboarding-card,.checklist-theme-shell .page-wrap { position:relative;z-index:1; }
.checklist-theme-shell .page-header { padding:12px 15px;border-radius:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(9px); }
.scenic-card { background:rgba(255,255,255,.93); backdrop-filter:blur(8px); box-shadow:0 22px 70px rgba(73,62,44,.12); }

.motivation-theme-shell { position:relative; overflow:hidden; background:linear-gradient(135deg,#eef1f8,#f8f0e8 50%,#ecf5ef); }
.motivation-wall { position:fixed; inset:0; display:grid; grid-template-columns:repeat(3,1fr); align-content:space-around; gap:7vh 4vw; padding:6vh 4vw; pointer-events:none; transform:rotate(-4deg) scale(1.08); }
.motivation-wall span { font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-weight:600; font-size:clamp(1.05rem,2.1vw,2rem); line-height:1.25; color:hsl(calc(var(--q) * 31) 30% 34% / .20); text-align:center; }
.motivation-theme-shell .onboarding-card,.motivation-page-wrap { position:relative; z-index:2; }
.motivation-theme-shell .page-header { padding:12px 15px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px); }
.motivation-card,.motivation-theme-shell .page-card { background:rgba(255,255,255,.93); backdrop-filter:blur(10px); box-shadow:0 25px 80px rgba(56,58,65,.12); }

/* ===== Avatar builder ===== */
.avatar-builder { margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.avatar-builder-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:18px; }
.avatar-toggle { display:flex; gap:9px; align-items:center; min-height:42px; padding:0 12px; border:1px solid var(--border); border-radius:11px; font-size:.82rem; font-weight:700; background:#fff; white-space:nowrap; }
.avatar-toggle input { width:18px;height:18px; }
.avatar-builder-content { display:grid; grid-template-columns:330px 1fr; gap:24px; padding:18px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,#fafbfd,#f5f1eb); transition:opacity .2s; }
.avatar-builder-content.is-disabled { opacity:.42; pointer-events:none; filter:grayscale(.4); }
.avatar-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
.avatar-field { display:grid; gap:6px; }
.avatar-field>span,.preview-label,.rotation-control>span { font-size:.75rem; font-weight:700; color:var(--muted); }
.avatar-field select { width:100%; border:1px solid var(--border); border-radius:10px; background:#fff; padding:9px 10px; }
.avatar-preview-column { display:grid; gap:10px; align-content:start; }
.rotation-control { display:grid; gap:8px; }
.rotation-control input { width:100%; accent-color:#252525; }

.avatar-stage { position:relative; height:355px; display:grid; place-items:center; perspective:850px; overflow:hidden; border-radius:18px; background:radial-gradient(circle at 50% 34%,#fff 0 30%,#e8edf3 72%,#dce2e8 100%); border:1px solid #d9dee3; }
.avatar-ground { position:absolute; bottom:25px; width:170px; height:34px; border-radius:50%; background:rgba(67,78,90,.15); filter:blur(2px); }
.avatar-person { --body-width:1; --height-scale:1; position:relative; width:170px; height:305px; transform-style:preserve-3d; transform:rotateY(var(--avatar-rotation)) scaleY(var(--height-scale)) scaleX(var(--body-width)); transform-origin:center 65%; transition:transform .12s linear; }
.avatar-front,.avatar-back { position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; }
.avatar-front { transform:translateZ(16px); }
.avatar-back { transform:rotateY(180deg) translateZ(16px); }
.height-veryShort{--height-scale:.82}.height-short{--height-scale:.91}.height-average{--height-scale:1}.height-tall{--height-scale:1.08}.height-veryTall{--height-scale:1.16}
.body-slim{--body-width:.78}.body-lean{--body-width:.88}.body-average{--body-width:1}.body-athletic{--body-width:1.1}.body-broad{--body-width:1.22}

.avatar-head,.back-head { position:absolute; left:50%; top:26px; width:86px; height:96px; transform:translateX(-50%); background:#e9b58f; border-radius:46% 46% 44% 44%; box-shadow:inset 0 -7px 0 rgba(174,105,76,.08); }
.female .avatar-head,.female .back-head { width:82px; height:94px; border-radius:48% 48% 45% 45%; }
.avatar-hair,.back-hair { position:absolute; z-index:3; left:50%; top:16px; width:94px; height:52px; transform:translateX(-50%); background:var(--hair); border-radius:52px 52px 20px 20px; }
.back-hair { top:18px; height:80px; }
.hair-short .avatar-hair{height:44px}.hair-short .back-hair{height:52px}
.hair-medium .avatar-hair{height:56px}.hair-medium .back-hair{height:92px;border-radius:48px 48px 36px 36px}
.hair-long .avatar-hair{height:62px}.hair-long .back-hair{height:130px;border-radius:48px 48px 42px 42px}
.hair-long .avatar-hair:after{content:"";position:absolute;left:-4px;right:-4px;top:34px;height:76px;border-radius:18px 18px 42px 42px;background:var(--hair);z-index:-1}
.hair-curly .avatar-hair,.hair-curly .back-hair{height:62px;border-radius:50%;box-shadow:-19px 11px 0 -7px var(--hair),19px 11px 0 -7px var(--hair),-11px -7px 0 -6px var(--hair),12px -8px 0 -6px var(--hair)}
.hair-bun .avatar-hair:before,.hair-bun .back-hair:before{content:"";position:absolute;width:43px;height:43px;border-radius:50%;background:var(--hair);left:50%;top:-26px;transform:translateX(-50%)}
.hair-bun .back-hair{height:65px}

.avatar-eye { position:absolute; top:72px; width:12px; height:8px; border-radius:50%; background:var(--eyes); z-index:5; box-shadow:0 0 0 2px rgba(255,255,255,.8); }
.avatar-eye.left{left:54px}.avatar-eye.right{right:54px}
.eyes-round .avatar-eye{width:11px;height:11px}.eyes-almond .avatar-eye{width:14px;height:7px}.eyes-narrow .avatar-eye{width:15px;height:4px}.eyes-large .avatar-eye{width:15px;height:12px}.eyes-soft .avatar-eye{width:13px;height:8px;transform:rotate(7deg)}
.avatar-nose{position:absolute;left:50%;top:83px;width:6px;height:9px;border-right:2px solid rgba(123,78,58,.3);transform:translateX(-50%)}
.avatar-smile{position:absolute;left:50%;top:99px;width:20px;height:8px;border-bottom:2px solid #9c5d59;border-radius:50%;transform:translateX(-50%)}
.avatar-neck{position:absolute;left:50%;top:112px;width:30px;height:31px;background:#e9b58f;transform:translateX(-50%);border-radius:8px}
.avatar-torso,.back-torso{position:absolute;left:50%;top:135px;width:118px;height:103px;transform:translateX(-50%);background:var(--shirt);border-radius:24px 24px 16px 16px;box-shadow:inset 0 -12px 0 rgba(0,0,0,.04)}
.female .avatar-torso,.female .back-torso{width:108px;border-radius:27px 27px 20px 20px}
.shirt-hoodie .avatar-torso:before,.shirt-hoodie .back-torso:before{content:"";position:absolute;left:50%;top:-15px;width:65px;height:34px;border:8px solid var(--shirt);border-bottom:0;border-radius:35px 35px 0 0;transform:translateX(-50%)}
.shirt-shirt .avatar-torso:before{content:"";position:absolute;left:50%;top:0;width:2px;height:92px;background:rgba(0,0,0,.16)}
.shirt-shirt .avatar-torso:after{content:"⌄";position:absolute;left:50%;top:-2px;transform:translateX(-50%);font-size:28px;color:rgba(0,0,0,.22)}
.shirt-tank .avatar-torso{width:94px;border-radius:14px 14px 18px 18px}
.shirt-sweater .avatar-torso{box-shadow:inset 0 -13px rgba(0,0,0,.06),inset 0 8px rgba(255,255,255,.15)}
.avatar-arm{position:absolute;top:148px;width:27px;height:99px;background:#e9b58f;border-radius:18px;z-index:-1}.avatar-arm.left{left:18px;transform:rotate(4deg)}.avatar-arm.right{right:18px;transform:rotate(-4deg)}
.avatar-leg{position:absolute;top:225px;width:47px;height:66px;background:var(--pants);border-radius:5px 5px 16px 16px}.avatar-leg.left{left:36px}.avatar-leg.right{right:36px}
.pants-joggers .avatar-leg{border-radius:8px 8px 22px 22px}.pants-shorts .avatar-leg{height:40px;border-radius:6px 6px 12px 12px}.pants-shorts .avatar-leg:after{content:"";position:absolute;top:35px;left:8px;width:31px;height:38px;background:#e9b58f;border-radius:0 0 13px 13px}.pants-cargo .avatar-leg:before{content:"";position:absolute;width:20px;height:18px;top:20px;left:3px;border:2px solid rgba(0,0,0,.15);border-radius:3px}.pants-formal .avatar-leg{background:var(--pants);border-radius:2px 2px 10px 10px}
.avatar-shoe{position:absolute;top:284px;width:53px;height:17px;background:#f5f5f4;border:1px solid #cfd2d5;border-radius:15px 15px 8px 8px}.avatar-shoe.left{left:30px}.avatar-shoe.right{right:30px}
.back-legs{position:absolute;left:50%;top:225px;width:98px;height:68px;transform:translateX(-50%);background:linear-gradient(90deg,var(--pants) 0 46%,transparent 46% 54%,var(--pants) 54%);border-radius:8px 8px 15px 15px}

.summary-avatar { height:190px; overflow:hidden; margin:-5px auto 18px; max-width:260px; }
.summary-avatar .avatar-stage { height:260px; transform:scale(.74); transform-origin:top center; }

.user-button { overflow:hidden; }
.user-button .avatar-face-mini { width:100%; height:100%; }
.avatar-face-mini { position:relative; display:block; background:#e9b58f; border-radius:50%; overflow:hidden; }
.avatar-face-mini .mini-hair{position:absolute;left:0;right:0;top:0;height:42%;background:var(--hair);border-radius:50% 50% 18% 18%;z-index:2}
.avatar-face-mini.hair-long .mini-hair{height:60%}.avatar-face-mini.hair-curly .mini-hair{height:48%;border-radius:45%;}.avatar-face-mini.hair-bun .mini-hair:before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--hair);top:-7px;left:50%;transform:translateX(-50%)}
.mini-eye{position:absolute;top:46%;width:5px;height:4px;background:var(--eyes);border-radius:50%;z-index:3}.mini-eye.left{left:27%}.mini-eye.right{right:27%}.mini-smile{position:absolute;left:50%;top:65%;width:12px;height:5px;border-bottom:1.5px solid #9c5d59;border-radius:50%;transform:translateX(-50%)}

@media(max-width:820px){
  .avatar-builder-content{grid-template-columns:1fr}.avatar-preview-column{max-width:360px;width:100%;margin:auto}.avatar-controls{grid-template-columns:1fr 1fr}.motivation-wall{grid-template-columns:1fr 1fr}.wide-profile-card{padding:20px}.avatar-builder-head{flex-direction:column}.avatar-toggle{white-space:normal}
}
@media(max-width:520px){.avatar-controls{grid-template-columns:1fr}.avatar-stage{height:320px}.motivation-wall{grid-template-columns:1fr}.motivation-wall span:nth-child(even){display:none}}
.avatar-person::before{content:"";position:absolute;left:50%;top:28px;width:34px;height:266px;transform:translateX(-50%) rotateY(90deg);transform-origin:center;background:linear-gradient(to bottom,var(--hair) 0 25%,#e9b58f 25% 38%,var(--shirt) 38% 72%,var(--pants) 72% 100%);border-radius:20px 20px 12px 12px;opacity:.96;box-shadow:inset 0 0 9px rgba(0,0,0,.08)}


/* ----- v8 avatar aesthetic upgrade ----- */
.profile-theme-shell .page-card,
.onboarding-card.wide-card,
.wide-profile-page .page-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,252,.97));
}
.avatar-builder {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid #e7e8ef;
  border-radius: 24px;
  background: linear-gradient(145deg,#ffffff,#f8fafc 45%,#f4f0ff);
  box-shadow: 0 22px 60px rgba(66,72,88,.06);
}
.avatar-builder-head h2 { margin-bottom: 6px; }
.avatar-builder-head { margin-bottom: 20px; }
.avatar-builder-content {
  grid-template-columns: 350px 1fr;
  gap: 26px;
  padding: 22px;
  border: 1px solid #ececf2;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(244,247,251,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.avatar-preview-column {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg,#f9fbff,#f3f6fb);
  border: 1px solid #ebeff6;
}
.preview-label { letter-spacing: .08em; text-transform: uppercase; }
.avatar-stage {
  height: 390px;
  background:
    radial-gradient(circle at 52% 18%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,.45) 19% 22%, transparent 23%),
    radial-gradient(circle at 50% 34%, #fbfdff 0 28%, #e8f0f8 67%, #d9e4ef 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px rgba(60,76,96,.08);
}
.avatar-stage::after {
  content:"";
  position:absolute; inset:auto 18px 18px 18px; height:70px;
  border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%);
}
.avatar-ground { width: 190px; height: 38px; background: rgba(79,97,112,.14); filter: blur(5px); }
.avatar-person { width: 184px; height: 320px; }
.avatar-head,.back-head { background: linear-gradient(180deg,#efc7aa,#e7b18a); }
.avatar-hair,.back-hair { box-shadow: inset 0 -6px 0 rgba(255,255,255,.08), 0 8px 16px rgba(33,26,24,.12); }
.avatar-torso,.back-torso { box-shadow: inset 0 -12px 0 rgba(0,0,0,.06), inset 0 6px 10px rgba(255,255,255,.08), 0 10px 18px rgba(67,79,92,.08); }
.avatar-leg { box-shadow: inset 0 -10px 0 rgba(0,0,0,.05); }
.avatar-shoe { box-shadow: 0 6px 10px rgba(36,46,55,.08); }
.rotation-control input[type="range"] {
  width: 100%;
  appearance:none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,#cdd8f8,#ffd8ca,#cfeadf);
  outline:none;
}
.rotation-control input[type="range"]::-webkit-slider-thumb {
  appearance:none; width:20px; height:20px; border-radius:50%;
  background:#171717; border:3px solid white; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.rotation-control input[type="range"]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; background:#171717; border:3px solid white;
}
.avatar-controls { grid-template-columns: 1fr; gap: 14px; }
.avatar-field { gap: 8px; }
.avatar-field > span {
  font-size: .8rem;
  font-weight: 800;
  color: #61616a;
  letter-spacing: .01em;
}
.avatar-choice-group {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}
.avatar-choice {
  min-height: 78px;
  padding: 8px 6px 10px;
  border: 1px solid #dde2ea;
  border-radius: 16px;
  background: linear-gradient(180deg,#fff,#f8fafc);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  color: #2b2f36;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 6px 16px rgba(85,96,113,.05);
}
.avatar-choice:hover { transform: translateY(-1px); border-color:#cfd6e2; }
.avatar-choice.is-selected {
  border-color: #0f172a;
  background: linear-gradient(180deg,#ffffff,#eef4ff);
  box-shadow: 0 10px 24px rgba(42,77,153,.12), inset 0 0 0 1px rgba(255,255,255,.8);
}
.avatar-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--swatch);
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(43,55,76,.12), 0 6px 10px rgba(48,58,78,.10);
}
.avatar-glyph { position: relative; display:block; }
.avatar-glyph.head { width: 34px; height: 28px; background:#f1c8a9; border-radius: 44% 44% 46% 46%; box-shadow: inset 0 -3px 0 rgba(181,118,82,.12); }
.avatar-glyph.head > span,
.avatar-glyph.head::before,
.avatar-glyph.head::after { content:""; position:absolute; background:#4a3c34; }
.avatar-glyph.head > span { left: 4px; right: 4px; top: 1px; height: 10px; border-radius: 12px 12px 6px 6px; }
.avatar-glyph.head.short > span { height: 9px; }
.avatar-glyph.head.medium > span { height: 11px; }
.avatar-glyph.head.long > span { top: 0; height: 12px; }
.avatar-glyph.head.long::after { left: 3px; right: 3px; top: 8px; height: 15px; border-radius: 8px 8px 12px 12px; z-index:-1; }
.avatar-glyph.head.curly > span { inset: 2px 5px auto 5px; height: 10px; border-radius: 16px; box-shadow: -6px 3px 0 #4a3c34, 6px 3px 0 #4a3c34; }
.avatar-glyph.head.bun > span { left:4px; right:4px; top:4px; height:10px; border-radius:12px; }
.avatar-glyph.head.bun::before { width: 10px; height: 10px; border-radius: 50%; top: -5px; left: 50%; transform: translateX(-50%); }
.avatar-glyph.eye { width: 32px; height: 18px; }
.avatar-glyph.eye::before,
.avatar-glyph.eye::after { content:""; position:absolute; top:6px; width:11px; background:#4e80b8; left:4px; border-radius:999px; box-shadow: 14px 0 0 #4e80b8; }
.avatar-glyph.eye.round::before,.avatar-glyph.eye.round::after { height: 10px; }
.avatar-glyph.eye.almond::before,.avatar-glyph.eye.almond::after { height: 7px; }
.avatar-glyph.eye.narrow::before,.avatar-glyph.eye.narrow::after { height: 4px; top:8px; }
.avatar-glyph.eye.large::before,.avatar-glyph.eye.large::after { height: 12px; top:4px; }
.avatar-glyph.eye.soft::before,.avatar-glyph.eye.soft::after { height: 8px; top:6px; transform: rotate(7deg); }
.avatar-glyph.top { width: 34px; height: 26px; background:#6e8ec7; border-radius: 10px 10px 8px 8px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.avatar-glyph.top.hoodie::before { content:""; position:absolute; left:50%; top:-6px; width:18px; height:10px; border:4px solid #6e8ec7; border-bottom:0; border-radius:12px 12px 0 0; transform:translateX(-50%); }
.avatar-glyph.top.shirt::before { content:""; position:absolute; left:50%; top:1px; bottom:1px; width:2px; background:rgba(0,0,0,.18); transform:translateX(-50%); }
.avatar-glyph.top.shirt::after { content:""; position:absolute; left:50%; top:0; width:10px; height:8px; border-left:2px solid rgba(0,0,0,.15); border-right:2px solid rgba(0,0,0,.15); transform:translateX(-50%); }
.avatar-glyph.top.tank { width: 28px; }
.avatar-glyph.top.sweater { box-shadow: inset 0 4px 0 rgba(255,255,255,.14), inset 0 -4px 0 rgba(0,0,0,.06); }
.avatar-glyph.bottom { width: 30px; height: 28px; }
.avatar-glyph.bottom::before,.avatar-glyph.bottom::after { content:""; position:absolute; top:2px; width:12px; height:24px; background:#5d769f; border-radius: 4px 4px 7px 7px; }
.avatar-glyph.bottom::before { left:2px; }
.avatar-glyph.bottom::after { right:2px; }
.avatar-glyph.bottom.shorts::before,.avatar-glyph.bottom.shorts::after { height: 14px; }
.avatar-glyph.bottom.cargo::before,.avatar-glyph.bottom.cargo::after { box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.avatar-glyph.bottom.formal::before,.avatar-glyph.bottom.formal::after { border-radius: 2px 2px 5px 5px; }
.avatar-glyph.body { width: 28px; height: 40px; border-radius: 14px; background: linear-gradient(180deg,#8fa2c6,#6d80a3); }
.avatar-glyph.body.slim { transform: scaleX(.82); }
.avatar-glyph.body.lean { transform: scaleX(.92); }
.avatar-glyph.body.average { transform: scaleX(1); }
.avatar-glyph.body.athletic { transform: scaleX(1.08); border-radius: 13px 13px 10px 10px; }
.avatar-glyph.body.broad { transform: scaleX(1.16); }
.avatar-glyph.height { width: 26px; border-radius: 10px; background: linear-gradient(180deg,#a5b8da,#7f93b7); }
.avatar-glyph.height.veryShort { height: 24px; margin-top: 12px; }
.avatar-glyph.height.short { height: 30px; margin-top: 8px; }
.avatar-glyph.height.average { height: 36px; margin-top: 4px; }
.avatar-glyph.height.tall { height: 42px; }
.avatar-glyph.height.veryTall { height: 48px; margin-top: -4px; }
.summary-avatar .avatar-stage { height: 300px; }
.checklist-theme-shell .page-card.scenic-card,
.checklist-theme-shell .onboarding-card.wide-card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 28px 70px rgba(67,86,78,.12);
}
.checklist-theme-shell { background: linear-gradient(180deg,#f4fbf8,#eff7f1); }
.page-shell.checklist-theme-shell::before,
.checklist-theme-shell::before {
  content:""; position:fixed; inset:0;
  background-image: linear-gradient(rgba(252,248,251,.5),rgba(247,251,255,.74)), url('assets/daily-scenes.svg');
  background-size: cover; background-position: center;
  z-index:0; pointer-events:none;
}
.checklist-theme-shell > * { position: relative; z-index: 1; }
@media(max-width: 920px){
  .avatar-builder-content { grid-template-columns: 1fr; }
  .avatar-choice-group { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media(max-width: 560px){
  .avatar-choice-group { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .avatar-stage { height: 340px; }
}

/* ===== v9 kawaii / colorful restyle ===== */
:root {
  --bg: #fff7fb;
  --card: rgba(255,255,255,.94);
  --text: #413746;
  --muted: #817588;
  --border: #ecd9ea;
  --soft: #fff1f8;
}
html, body { background: linear-gradient(180deg,#fff8fc 0%,#f8fbff 48%,#fffdf5 100%); }
body { position: relative; color: var(--text); }
body::before,
body::after {
  content: "";
  position: fixed;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
}
body::before { left: -8vw; top: -8vw; background: rgba(255,173,210,.6); }
body::after { right: -8vw; bottom: -10vw; background: rgba(169,218,255,.6); }

.welcome-screen {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,191,220,.75), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(173,225,255,.8), transparent 25%),
    radial-gradient(circle at 30% 80%, rgba(255,226,179,.75), transparent 20%),
    linear-gradient(145deg, #fff8fc 0%, #f5fbff 52%, #fffced 100%);
}
.welcome-cloud { opacity: .16; }
.welcome-logo {
  padding: .22em .34em;
  border-radius: 1em;
  background: rgba(255,255,255,.52);
  box-shadow: 0 20px 60px rgba(131,116,144,.14);
  color: transparent;
  background-image: linear-gradient(90deg, #ff77ad, #ff9c7f, #8a88ff, #5fcab7);
  -webkit-background-clip: text;
  background-clip: text;
}
.onboarding-card,
.page-card,
.date-card,
.budget-card,
.card {
  border-radius: 26px !important;
  border: 1px solid rgba(238, 217, 233, .95) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,254,.93)) !important;
  box-shadow: 0 22px 70px rgba(121,108,130,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.card-top h1,
.page-header h1,
.brand h1 { color: #4d3d5c; }
.page-header,
.card-top { gap: 16px; }
.section-kicker,
.eyebrow,
.step-label { color: #ff7fae; letter-spacing: .13em; }
.subtext { color: #7e7484; }

.primary-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.square-btn,
.flag-button,
.user-button,
.help-button,
.avatar-toggle,
.remove-row {
  border-radius: 14px !important;
}
.primary-btn {
  border: 0;
  background: linear-gradient(135deg,#ff8cbc,#ffb27d);
  color: white;
  box-shadow: 0 12px 24px rgba(255,141,181,.28);
}
.primary-btn:hover { filter: brightness(1.02); }
.secondary-btn,
.icon-btn,
.flag-button,
.user-button,
.help-button,
.square-btn,
.avatar-toggle,
.remove-row {
  background: linear-gradient(180deg,#ffffff,#fff6fb) !important;
  color: #5d4b66;
  border-color: #ecd8eb !important;
  box-shadow: 0 8px 18px rgba(120,108,133,.08);
}
.secondary-btn:hover,
.icon-btn:hover,
.square-btn:hover,
.user-button:hover,
.help-button:hover { background: linear-gradient(180deg,#fff,#fff0f9) !important; }
.danger-btn {
  background: linear-gradient(180deg,#fff,#fff5f5) !important;
  border-color: #f0c5cd !important;
  color: #c0566d;
}
button:active { transform: translateY(1px) scale(.985); }
.user-button,
.help-button { width: 48px; height: 48px; border-radius: 50% !important; }
.help-button {
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.1rem;
  color: #7c5ea9;
}
.flag-button { width: 50px; height: 44px; }
.field input,
.field select,
.editor-row input,
.manual-controls input,
textarea {
  border-radius: 14px !important;
  border-color: #ead9ea !important;
  background: rgba(255,255,255,.92);
}
.field input:focus,
.field select:focus,
.editor-row input:focus,
.manual-controls input:focus,
textarea:focus {
  border-color: #d99ec3 !important;
  box-shadow: 0 0 0 4px rgba(244,167,204,.16);
}
.setup-block,
.summary-box,
.summary-list,
.forum-thread,
.ai-forum-banner,
.reminder-option,
.danger-zone,
.empty-state {
  border-radius: 22px !important;
}
.setup-block,
.summary-box,
.reminder-option,
.danger-zone,
.ai-forum-banner {
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,247,252,.86));
}
.date-card { min-width: 190px; }
.budget-card-head span,
.date-card span,
.field label { color: #8a758c; }
.budget-value {
  color: #5d3f6c;
  text-shadow: 0 8px 20px rgba(255,165,194,.22);
}
.check-row {
  padding: 10px 4px;
  border-top-color: #f0e1ef !important;
  border-radius: 16px;
}
.check-row:hover { background: rgba(255,244,250,.75); }
.check-row.checked {
  background: linear-gradient(90deg, rgba(255,234,244,.95), rgba(242,245,255,.96));
}
.check-row input[type="checkbox"] {
  width: 24px; height: 24px; border-radius: 8px;
  border-color: #d7b7cf !important;
  background: #fff;
}
.check-row input[type="checkbox"]:checked {
  background: linear-gradient(135deg,#ff8dbc,#ffb17e) !important;
  border-color: transparent !important;
}
.item-value {
  color: #7d5a85;
  font-weight: 750;
  background: #fff5fb;
  border: 1px solid #f4d8ea;
  border-radius: 999px;
  padding: 6px 10px;
}
.list-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.status {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,243,250,.88), rgba(242,248,255,.9));
  border: 1px solid #efddeb;
  color: #785b7a;
}
.language-menu {
  border-radius: 16px;
  border-color: #ebd7e8;
}
.language-menu button { border-radius: 12px; }

/* cute avatar */
.kawaii-avatar-stage {
  position: relative;
  height: 420px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #ece3f6;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,200,227,.75), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(191,228,255,.8), transparent 24%),
    radial-gradient(circle at 50% 88%, rgba(255,244,192,.9), transparent 22%),
    linear-gradient(180deg,#fcfdff 0%,#f6f8ff 48%,#fffaf7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 16px 34px rgba(108,116,144,.12);
}
.kawaii-avatar-stage::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 16px; height: 18px;
  background: radial-gradient(circle,#fff 22%,transparent 24%) 0 0/44px 18px repeat-x;
  opacity: .55;
}
.avatar-glow { position:absolute; border-radius:50%; filter: blur(16px); opacity:.6; }
.avatar-glow.one { width: 120px; height: 120px; left: 26px; top: 58px; background: rgba(255,183,208,.45); }
.avatar-glow.two { width: 130px; height: 130px; right: 26px; bottom: 90px; background: rgba(181,223,255,.45); }
.kawaii-avatar-stage .avatar-ground {
  position: absolute;
  left: 50%; bottom: 36px; transform: translateX(-50%);
  width: 170px; height: 34px; border-radius: 50%;
  background: rgba(114,130,149,.16); filter: blur(6px);
}
.avatar-figure-3d {
  position: absolute;
  left: 50%; top: 52%;
  width: 180px; height: 300px;
  transform-style: preserve-3d;
  transform: translate(-50%,-50%) rotateY(var(--avatar-rotation)) scaleX(var(--avatar-body-scale)) scaleY(var(--avatar-height-scale));
  transition: transform .16s linear;
}
.avatar-view {
  position: absolute;
  left: 10px; top: 0;
  width: 160px; height: 300px;
  display: grid; place-items: center;
  backface-visibility: hidden;
}
.avatar-front-view { transform: translateZ(42px); }
.avatar-back-view { transform: rotateY(180deg) translateZ(42px); }
.avatar-right-view { transform: rotateY(90deg) translateZ(42px); }
.avatar-left-view { transform: rotateY(-90deg) translateZ(42px); }
.avatar-left-view svg { transform: scaleX(-1); }
.avatar-svg {
  width: 160px; height: 300px;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(86,90,110,.11));
}
.avatar-sparkles span {
  position: absolute;
  font-size: 1.25rem;
  animation: sparkleFloat 4s ease-in-out infinite;
}
.avatar-sparkles span:nth-child(1) { left: 22px; top: 88px; }
.avatar-sparkles span:nth-child(2) { right: 22px; top: 110px; animation-delay: .7s; }
.avatar-sparkles span:nth-child(3) { right: 34px; bottom: 82px; animation-delay: 1.4s; }
@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: .7; }
  50% { transform: translateY(-8px) rotate(8deg); opacity: 1; }
}
.kawaii-face-mini {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 35%, #fff, #fff4f8);
  overflow: hidden;
}
.mini-avatar-svg { width: 40px; height: 40px; }
.summary-avatar { margin-bottom: 6px; }
.summary-avatar .kawaii-avatar-stage {
  width: 270px;
  margin: 0 auto;
  height: 320px;
}
.summary-avatar .avatar-figure-3d {
  top: 55%;
  transform: translate(-50%,-50%) rotateY(0deg) scale(.82);
}

.forum-compose textarea,
.reminder-fields textarea { min-height: 94px; }
.forum-post,
.forum-ai-reply {
  border-radius: 20px;
  padding: 16px;
}
.forum-post { background: linear-gradient(180deg,#fff,#fff7fb); }
.forum-ai-reply { background: linear-gradient(180deg,#f5f9ff,#fff7fc); }
.ai-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center; font-weight:800;
  background: linear-gradient(135deg,#8cc8ff,#c897ff);
  color:white;
}
.time-mood {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(255,247,252,.95), rgba(244,248,255,.95));
  border: 1px solid #efdeed;
}
.time-mood small { color: #856f88; }
.motivation-theme-shell .page-card,
.motivation-theme-shell .onboarding-card { background: rgba(255,255,255,.92) !important; }
.motivation-wall span { color: hsl(calc(var(--q) * 29) 48% 45% / .18) !important; }
.budget-theme-shell .budget-glass-card,
.checklist-theme-shell .scenic-card,
.profile-theme-shell .page-card { backdrop-filter: blur(10px); }

@media (max-width: 700px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .card-top, .page-header, .dashboard-top { flex-direction: column; align-items: stretch; }
  .top-actions { justify-content: space-between; }
  .kawaii-avatar-stage { height: 380px; }
  .avatar-figure-3d { transform: translate(-50%,-50%) rotateY(var(--avatar-rotation)) scale(.92); }
}

/* ===== v10 Mii-inspired modern avatar ===== */
.mii-modern-stage {
  position: relative;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.4) 35%, transparent 55%),
    radial-gradient(circle at 14% 22%, rgba(255,196,222,.63), transparent 21%),
    radial-gradient(circle at 86% 27%, rgba(184,226,255,.72), transparent 23%),
    linear-gradient(180deg,#fcfdff 0%,#f6f4ff 53%,#fff8f3 100%);
  border: 1px solid #eadff2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 42px rgba(105,100,125,.13);
}
.mii-modern-stage.is-dragging { cursor: grabbing; }
.mii-modern-stage::before {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.74),rgba(255,255,255,.15) 58%,transparent 70%);
}
.avatar-room-orb { position:absolute; border-radius:50%; filter:blur(8px); opacity:.65; }
.avatar-room-orb.orb-a { width:125px; height:125px; left:24px; top:65px; background:rgba(255,184,216,.42); }
.avatar-room-orb.orb-b { width:140px; height:140px; right:20px; bottom:90px; background:rgba(174,220,255,.48); }
.mii-modern-stage .avatar-ground {
  position:absolute;
  left:50%;
  bottom:42px;
  transform:translateX(-50%);
  width:190px;
  height:34px;
  border-radius:50%;
  background:rgba(92,99,121,.17);
  filter:blur(7px);
}
.avatar-floor-ring {
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:220px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(211,196,224,.55);
  background:radial-gradient(ellipse,rgba(255,255,255,.72),rgba(255,255,255,.08) 68%,transparent 70%);
}
.avatar-turntable {
  position:absolute;
  inset:0;
}
.avatar-sprite {
  position:absolute;
  left:50%;
  top:51%;
  width:190px;
  height:330px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity .10s linear, transform .10s linear;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.avatar-sprite .avatar-svg {
  width:186px;
  height:330px;
  overflow:visible;
  filter:drop-shadow(0 13px 16px rgba(86,82,106,.14));
}
.avatar-sprite .mirror-wrap {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transform:scaleX(-1);
}
.avatar-sprite .mirrored-svg { transform:scaleX(-1); transform-origin:center; }
.avatar-drag-hint {
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  min-width:52px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#927f9d;
  font-size:1.15rem;
  font-weight:800;
  box-shadow:0 7px 20px rgba(108,94,119,.10);
  border:1px solid rgba(231,213,232,.88);
  backdrop-filter:blur(8px);
}
.mii-modern-stage:hover .avatar-drag-hint { color:#ff83b0; }
.avatar-preview-column .rotation-control {
  padding:13px 14px;
  background:rgba(255,255,255,.86);
  border:1px solid #eadfea;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(116,103,126,.06);
}
.avatar-preview-column .rotation-control > span { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.avatar-preview-column .rotation-control strong { color:#7e6189; }

/* cleaner, rounder editor to match the new character */
.avatar-builder {
  border-radius:30px;
  background:
    radial-gradient(circle at 0 0, rgba(255,231,241,.78), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(225,241,255,.8), transparent 25%),
    linear-gradient(160deg,#fff,#fbfaff 48%,#fffaf7);
}
.avatar-builder-content {
  grid-template-columns:minmax(330px,360px) 1fr;
  border-radius:26px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(14px);
}
.avatar-choice {
  border-radius:18px;
  min-height:82px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.avatar-choice:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(95,83,112,.10); }
.avatar-choice.is-selected {
  border-color:#d58bb3;
  background:linear-gradient(180deg,#fff,#fff1f8);
  box-shadow:0 10px 25px rgba(223,126,176,.16),inset 0 0 0 1px rgba(255,255,255,.9);
}

/* profile thumbnail */
.user-button .mini-avatar-svg { width:44px; height:44px; }

/* summary uses same polished stage but slightly smaller */
.summary-avatar .mii-modern-stage {
  width:min(310px,100%);
  height:350px;
  margin:0 auto 18px;
}
.summary-avatar .avatar-sprite { top:53%; transform:translate(-50%,-50%) scale(.84); }
.summary-avatar .avatar-drag-hint { display:none; }

@media(max-width:920px){
  .avatar-builder-content{grid-template-columns:1fr;}
  .avatar-preview-column{max-width:390px;width:100%;margin:0 auto;}
}
@media(max-width:560px){
  .mii-modern-stage{height:390px;}
  .avatar-sprite{top:52%;}
}

/* ===== v11 true Three.js avatar ===== */
.three-avatar-stage {
  position: relative;
  height: 440px !important;
  min-height: 440px;
  overflow: hidden;
  border-radius: 30px !important;
  border: 1px solid #eadff1 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,198,225,.78), transparent 24%),
    radial-gradient(circle at 83% 22%, rgba(183,222,255,.82), transparent 26%),
    radial-gradient(circle at 52% 92%, rgba(255,239,190,.80), transparent 24%),
    linear-gradient(180deg,#fffafd 0%,#f6f9ff 52%,#fffdf8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 42px rgba(113,101,131,.13) !important;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.three-avatar-stage.is-dragging { cursor: grabbing; }
.three-avatar-stage::before {
  content:"";
  position:absolute;
  inset:16px 18px auto;
  height:18px;
  background: radial-gradient(circle,#fff 22%,transparent 25%) 0 0/42px 18px repeat-x;
  opacity:.58;
  pointer-events:none;
  z-index:2;
}
.three-avatar-stage::after {
  content:"";
  position:absolute;
  left:50%; bottom:22px;
  width:230px; height:46px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(104,113,133,.16),rgba(104,113,133,0) 70%);
  filter:blur(2px);
  pointer-events:none;
  z-index:1;
}
.three-avatar-canvas {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  z-index:1;
}
.three-avatar-fallback,
.three-avatar-error {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:8px;
  color:#8c7b93;
  z-index:0;
}
.three-avatar-fallback span { font-size:2.2rem; }
.three-avatar-fallback small { font-weight:800; letter-spacing:.12em; }
.three-avatar-error {
  padding:28px;
  text-align:center;
  line-height:1.55;
  z-index:4;
  background:rgba(255,255,255,.8);
}
.three-avatar-stage .avatar-drag-hint {
  position:absolute;
  right:16px;
  bottom:15px;
  z-index:3;
  min-width:42px;
  height:30px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#7e688a;
  font-weight:850;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(231,211,231,.9);
  box-shadow:0 7px 18px rgba(88,73,98,.09);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.three-avatar-note {
  margin:0;
  color:#95839a;
  font-size:.72rem;
  text-align:center;
}
.avatar-preview-column { align-self:start; }
.avatar-builder-content { align-items:start; }
.rotation-control { margin-top:4px; }
.summary-avatar .three-avatar-stage {
  width:min(330px,100%);
  height:360px !important;
  min-height:360px;
  margin:0 auto 10px;
}

/* Make the whole product more illustrated and cuddly without losing readability */
.app::before {
  content:"";
  position:fixed;
  left:2vw; top:18vh;
  width:90px; height:90px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 15%,#ffd2e5 16% 100%);
  opacity:.18;
  pointer-events:none;
  filter:blur(.2px);
  z-index:-1;
}
.app::after {
  content:"";
  position:fixed;
  right:3vw; bottom:12vh;
  width:110px; height:110px;
  border-radius:38% 62% 58% 42%;
  background:linear-gradient(145deg,#ccecff,#e8ddff);
  opacity:.24;
  pointer-events:none;
  transform:rotate(17deg);
  z-index:-1;
}
.brand h1,
.welcome-logo,
.page-header h1,
.card-top h1 {
  letter-spacing:-.055em;
}
.card,
.budget-card,
.date-card,
.onboarding-card,
.page-card {
  backdrop-filter:blur(10px);
}
.card:hover,
.budget-card:hover {
  box-shadow:0 26px 72px rgba(126,104,137,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.budget-card:first-child {
  background:
    radial-gradient(circle at 90% 12%,rgba(255,222,159,.34),transparent 23%),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,249,236,.93)) !important;
}
.budget-card:nth-child(2) {
  background:
    radial-gradient(circle at 90% 12%,rgba(188,220,255,.35),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(244,249,255,.94)) !important;
}
.bonus-section {
  background:
    radial-gradient(circle at 94% 8%,rgba(255,201,224,.32),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,247,252,.94)) !important;
}
.check-row { transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }
.check-row:hover { transform:translateX(2px); box-shadow:0 8px 18px rgba(128,111,139,.05); }
.avatar-choice { transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.avatar-choice:hover { transform:translateY(-2px) scale(1.015); }
.avatar-choice.is-selected { box-shadow:0 12px 26px rgba(191,118,168,.16), inset 0 0 0 1px rgba(255,255,255,.85); }

@media(max-width:700px){
  .three-avatar-stage { height:390px !important; min-height:390px; }
  .summary-avatar .three-avatar-stage { height:330px !important; min-height:330px; }
}

.summary-box,.summary-list{background:rgba(255,255,255,.84);backdrop-filter:blur(8px);}

/* ===== v13 checklist scenery + avatar refinements ===== */
.checklist-theme-shell {
  background-image:
    linear-gradient(rgba(255,250,253,.34), rgba(248,252,255,.48)),
    url('assets/daily-scenes.svg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.checklist-theme-shell::before,
.page-shell.checklist-theme-shell::before {
  display: none !important;
}
.checklist-theme-shell .onboarding-card,
.checklist-theme-shell .page-card {
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}
.checklist-theme-shell .setup-block,
.checklist-theme-shell .summary-box,
.checklist-theme-shell .summary-list {
  background: rgba(255,255,255,.74) !important;
}

.avatar-choice-group {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.avatar-choice {
  min-height: 74px;
}
.avatar-glyph.head.bob > span { height: 10px; }
.avatar-glyph.head.bob::after { left: 2px; right: 2px; top: 8px; height: 14px; border-radius: 8px 8px 12px 12px; z-index:-1; }
.avatar-glyph.head.ponytail > span { left:4px; right:4px; top:3px; height:10px; border-radius:12px; }
.avatar-glyph.head.ponytail::after { width:9px; height:18px; border-radius:6px; right:-7px; left:auto; top:7px; }
.avatar-glyph.eye.upturned::before,
.avatar-glyph.eye.upturned::after { height:7px; transform: rotate(-10deg); }
.avatar-glyph.eye.downturned::before,
.avatar-glyph.eye.downturned::after { height:7px; transform: rotate(10deg); }
.avatar-glyph.top.polo::before { content:""; position:absolute; left:50%; top:1px; width:12px; height:7px; border:2px solid rgba(255,255,255,.65); border-top:0; transform:translateX(-50%); }
.avatar-glyph.top.jacket::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(255,255,255,.58); transform:translateX(-50%); }
.avatar-glyph.bottom.wide::before,
.avatar-glyph.bottom.wide::after { width:14px; }
.avatar-glyph.bottom.chinos::before,
.avatar-glyph.bottom.chinos::after { border-radius:3px 3px 8px 8px; background:#9a8b73; }

.three-avatar-stage canvas {
  filter: saturate(1.035) contrast(1.01);
}

@media(max-width: 920px){
  .avatar-choice-group { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media(max-width: 560px){
  .avatar-choice-group { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .checklist-theme-shell { background-size: auto 100% !important; }
}


/* ===== v14 checklist background visibility + avatar framing ===== */
.onboarding-shell.checklist-theme-shell,
.page-shell.checklist-theme-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg,#fff8fc 0%, #f5fbff 100%);
}
.checklist-scenery-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,248,252,.26), rgba(246,251,255,.40)),
    url('assets/daily-scenes.svg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
}
.onboarding-shell.checklist-theme-shell > .onboarding-card,
.page-shell.checklist-theme-shell > .page-wrap {
  position: relative;
  z-index: 1;
}
.checklist-theme-shell .onboarding-card,
.checklist-theme-shell .page-card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(10px) saturate(1.05);
}
.checklist-theme-shell .setup-block,
.checklist-theme-shell .summary-box,
.checklist-theme-shell .summary-list {
  background: rgba(255,255,255,.80) !important;
}
.three-avatar-stage {
  height: 520px !important;
  min-height: 520px;
}
.three-avatar-stage::before { display: none !important; }
.summary-avatar {
  height: auto;
  overflow: visible;
  margin: 0 auto 20px;
  max-width: 340px;
}
.summary-avatar .avatar-stage,
.summary-avatar .three-avatar-stage {
  width: min(340px,100%);
  height: 420px !important;
  min-height: 420px;
  transform: none !important;
  margin: 0 auto;
}
.avatar-preview-column {
  max-width: 430px;
}
.avatar-drag-hint {
  bottom: 18px !important;
}
.money-rain span {
  animation-duration: 3s !important;
}
@media(max-width:700px){
  .three-avatar-stage { height: 460px !important; min-height: 460px; }
  .summary-avatar .three-avatar-stage { height: 380px !important; min-height: 380px; }
}


/* ===== v15 dynamic collage backgrounds ===== */
.dynamic-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,209,228,.42), transparent 26%),
    radial-gradient(circle at 82% 20%, rgba(192,228,255,.38), transparent 28%),
    radial-gradient(circle at 60% 86%, rgba(255,239,190,.38), transparent 24%),
    linear-gradient(180deg,#fffafd,#f7fbff 54%,#fffdf6);
}
.dynamic-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.32));
  pointer-events:none;
}
.floating-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz);
  max-width: 28vw;
  margin: 0;
  padding: 10px;
  transform: translate(var(--x),var(--y)) rotate(var(--rot));
  animation: driftDiagonal var(--dur) linear var(--delay) infinite;
  will-change: transform;
  opacity: .72;
  filter: drop-shadow(0 12px 18px rgba(91,78,100,.12));
}
.floating-piece img {
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.78);
}
.scene-piece img {
  box-shadow:0 10px 30px rgba(86,100,120,.10);
}
.quote-piece {
  opacity:.66;
}
.quote-piece img {
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 30px rgba(84,73,91,.10);
}
@keyframes driftDiagonal {
  0% { transform: translate(var(--x),var(--y)) rotate(var(--rot)); }
  100% { transform: translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(calc(var(--rot) + 6deg)); }
}
.checklist-theme-shell {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fffafc !important;
  background-image:none !important;
}
.checklist-theme-shell::before,
.checklist-theme-shell::after,
.checklist-scenery-bg { display:none !important; }
.checklist-theme-shell > .dynamic-backdrop { position:absolute; z-index:0; }
.checklist-theme-shell > .onboarding-card,
.checklist-theme-shell > .page-wrap { position:relative; z-index:2; }
.checklist-theme-shell .onboarding-card,
.checklist-theme-shell .page-card {
  background:rgba(255,255,255,.89) !important;
  backdrop-filter:blur(9px) saturate(1.05);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
}
.dynamic-content {
  position:relative;
  z-index:2;
}
body:has(.dynamic-content) {
  overflow-x:hidden;
}
body:has(.dynamic-content) .card,
body:has(.dynamic-content) .budget-card,
body:has(.dynamic-content) .date-card {
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
}
@media(max-width:700px){
  .floating-piece { max-width:42vw; opacity:.52; }
  .dynamic-backdrop .floating-piece:nth-child(n+13){ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .floating-piece { animation:none; }
}


/* ===== Routine v16 appearance themes + ordered articulated backgrounds ===== */
body[data-ui-theme="white"] {
  --bg:#ffffff;
  --card:#ffffff;
  --soft:#f6f6f4;
  --border:#e7e6e2;
}
body[data-ui-theme="blush"] {
  --bg:#fff7fb;
  --card:#fffdfd;
  --soft:#fff1f7;
  --border:#ead8e5;
}
body[data-ui-theme="sky"] {
  --bg:#f4f9ff;
  --card:#ffffff;
  --soft:#eef6ff;
  --border:#dce7f2;
}
body[data-ui-theme="mint"] {
  --bg:#f4fbf7;
  --card:#ffffff;
  --soft:#edf8f1;
  --border:#d9e9de;
}
body[data-ui-theme="rich"] {
  --bg:#faf8fc;
  --card:#ffffff;
  --soft:#f7f2f8;
  --border:#eadfec;
}
body[data-ui-theme] .welcome-screen,
body[data-ui-theme] .onboarding-shell,
body[data-ui-theme] .page-shell,
body[data-ui-theme] #app,
body[data-ui-theme] .app {
  background-color: var(--bg);
}
body[data-ui-theme] .onboarding-card,
body[data-ui-theme] .page-card,
body[data-ui-theme] .card,
body[data-ui-theme] .budget-card,
body[data-ui-theme] .date-card {
  border-color: var(--border);
}

.dynamic-backdrop {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,206,225,.20), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(194,224,255,.18), transparent 26%),
    radial-gradient(circle at 68% 86%, rgba(248,239,183,.18), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,251,255,.88));
}
.dynamic-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.24));
}
.floating-piece {
  position:absolute;
  left:0;
  top:0;
  width:var(--sz);
  max-width:18vw;
  margin:0;
  opacity:var(--pieceOpacity,.7);
  transform:translate(var(--startX),var(--startY)) rotate(var(--rot));
  animation:orderedDrift var(--dur) linear infinite;
  will-change:transform;
  filter:drop-shadow(0 12px 20px rgba(85,79,96,.10));
}
.floating-piece img,
.symbol-glyph {
  display:block;
  width:100%;
  height:auto;
}
.floating-piece img {
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 24px rgba(100,92,115,.08);
}
.quote-piece img {
  background:rgba(255,255,255,.86);
}
.symbol-piece {
  width:calc(var(--sz) + 12px);
}
.symbol-glyph {
  display:grid;
  place-items:center;
  width:calc(var(--sz) + 12px);
  height:calc(var(--sz) + 12px);
  border-radius:22px;
  background:rgba(255,255,255,.52);
  color:rgba(84,69,104,.52);
  font-size:calc(var(--sz) * .55);
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 20px rgba(91,78,100,.08);
}
@keyframes orderedDrift {
  0% { transform:translate(var(--startX),var(--startY)) rotate(var(--rot)); }
  100% { transform:translate(calc(var(--startX) + var(--dx)), calc(var(--startY) + var(--dy))) rotate(var(--rot)); }
}
.community-theme-shell .dynamic-backdrop {
  background:
    radial-gradient(circle at 10% 12%, rgba(255,222,233,.20), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(206,232,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(255,250,253,.82), rgba(248,251,255,.92));
}
.community-theme-shell .symbol-piece .symbol-glyph {
  background:rgba(255,255,255,.44);
  color:rgba(81,62,101,.46);
}
.checklist-theme-shell .onboarding-card,
.checklist-theme-shell .page-card,
.community-theme-shell .page-card,
.community-theme-shell .page-header {
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}
body[data-ui-theme="rich"] .app.dynamic-content .card,
body[data-ui-theme="rich"] .app.dynamic-content .budget-card,
body[data-ui-theme="rich"] .app.dynamic-content .date-card,
body[data-ui-theme="rich"] .app.dynamic-content .status {
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}
body[data-ui-theme="white"] .dynamic-backdrop,
body[data-ui-theme="blush"] .dynamic-backdrop,
body[data-ui-theme="sky"] .dynamic-backdrop,
body[data-ui-theme="mint"] .dynamic-backdrop {
  display:none !important;
}
@media (max-width: 1100px){
  .floating-piece{max-width:24vw;}
}
@media (max-width: 700px){
  .floating-piece{max-width:32vw;}
  .dynamic-backdrop .floating-piece:nth-child(n+19){display:none;}
}
@media (prefers-reduced-motion: reduce){
  .floating-piece{animation:none;}
}

/* ===== Routine v17 — global coherent appearance themes ===== */
body[data-ui-theme="white"] {
  --theme-bg:#ffffff;
  --theme-bg-alt:#f7f7f8;
  --theme-panel:#ffffff;
  --theme-panel-soft:#fafafa;
  --theme-input:#ffffff;
  --theme-text:#29282d;
  --theme-muted:#77727a;
  --theme-border:#e3e1e5;
  --theme-accent:#3f3d46;
  --theme-accent-2:#6e6876;
  --theme-accent-soft:#f1f0f3;
  --theme-shadow:rgba(45,42,50,.08);
  --theme-danger:#b94f61;
}
body[data-ui-theme="blush"] {
  --theme-bg:#fff4f9;
  --theme-bg-alt:#ffeaf4;
  --theme-panel:#fffafd;
  --theme-panel-soft:#fff0f7;
  --theme-input:#fffafd;
  --theme-text:#5f4055;
  --theme-muted:#987c8e;
  --theme-border:#efcfe0;
  --theme-accent:#e478a6;
  --theme-accent-2:#f3a184;
  --theme-accent-soft:#ffe3f0;
  --theme-shadow:rgba(160,93,128,.12);
  --theme-danger:#c45770;
}
body[data-ui-theme="sky"] {
  --theme-bg:#f1f8ff;
  --theme-bg-alt:#e5f2ff;
  --theme-panel:#fafdff;
  --theme-panel-soft:#edf6ff;
  --theme-input:#fbfdff;
  --theme-text:#36566e;
  --theme-muted:#7893a8;
  --theme-border:#cfe2f0;
  --theme-accent:#66a9d5;
  --theme-accent-2:#8f99df;
  --theme-accent-soft:#dcefff;
  --theme-shadow:rgba(78,130,166,.12);
  --theme-danger:#c35e72;
}
body[data-ui-theme="mint"] {
  --theme-bg:#f1faf5;
  --theme-bg-alt:#e3f4e9;
  --theme-panel:#fbfefc;
  --theme-panel-soft:#eaf7ef;
  --theme-input:#fbfefc;
  --theme-text:#3d5f54;
  --theme-muted:#7d9b91;
  --theme-border:#cfe5d7;
  --theme-accent:#65aa8f;
  --theme-accent-2:#9ec776;
  --theme-accent-soft:#dcf1e5;
  --theme-shadow:rgba(78,129,108,.12);
  --theme-danger:#bc5d6e;
}
body[data-ui-theme="rich"] {
  --theme-bg:#fbf7fc;
  --theme-bg-alt:#f3effb;
  --theme-panel:rgba(255,255,255,.92);
  --theme-panel-soft:rgba(255,247,252,.92);
  --theme-input:#fffafd;
  --theme-text:#55405f;
  --theme-muted:#907c95;
  --theme-border:#ead7e8;
  --theme-accent:#ec82af;
  --theme-accent-2:#f3a379;
  --theme-accent-soft:#ffe5f0;
  --theme-shadow:rgba(114,83,121,.13);
  --theme-danger:#c45a72;
}

body[data-ui-theme] {
  --bg:var(--theme-bg);
  --card:var(--theme-panel);
  --text:var(--theme-text);
  --muted:var(--theme-muted);
  --border:var(--theme-border);
  --soft:var(--theme-panel-soft);
  --danger:var(--theme-danger);
  background:var(--theme-bg) !important;
  color:var(--theme-text) !important;
}

/* Every non-articulated theme replaces every special page background. */
body:not([data-ui-theme="rich"]) .welcome-screen,
body:not([data-ui-theme="rich"]) .profile-theme-shell,
body:not([data-ui-theme="rich"]) .budget-theme-shell,
body:not([data-ui-theme="rich"]) .checklist-theme-shell,
body:not([data-ui-theme="rich"]) .community-theme-shell,
body:not([data-ui-theme="rich"]) .motivation-theme-shell,
body:not([data-ui-theme="rich"]) .onboarding-shell,
body:not([data-ui-theme="rich"]) .page-shell,
body:not([data-ui-theme="rich"]) .app {
  background:linear-gradient(145deg,var(--theme-bg) 0%,var(--theme-bg-alt) 100%) !important;
  background-image:none !important;
  background-attachment:initial !important;
}
body:not([data-ui-theme="rich"]) .motivation-wall,
body:not([data-ui-theme="rich"]) .dynamic-backdrop,
body:not([data-ui-theme="rich"]) .checklist-scenery-bg {
  display:none !important;
}

/* Rich mode intentionally keeps all special artwork. */
body[data-ui-theme="rich"] .budget-theme-shell {
  background-image:linear-gradient(rgba(28,22,32,.30),rgba(28,22,32,.42)),url('assets/budget-uploaded-bg.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important;
}
body[data-ui-theme="rich"] .profile-theme-shell {
  background:
    radial-gradient(circle at 10% 10%,#e8f0ff 0,transparent 32%),
    radial-gradient(circle at 90% 80%,#fae7f1 0,transparent 34%),
    var(--theme-bg) !important;
}
body[data-ui-theme="rich"] .motivation-theme-shell {
  background:linear-gradient(135deg,#eef3fb,#fbf1eb 50%,#edf7f0) !important;
}

/* Adapt panels and readable surfaces to the selected palette. */
body[data-ui-theme] .onboarding-card,
body[data-ui-theme] .page-card,
body[data-ui-theme] .card,
body[data-ui-theme] .budget-card,
body[data-ui-theme] .date-card,
body[data-ui-theme] .setup-block,
body[data-ui-theme] .summary-box,
body[data-ui-theme] .summary-list,
body[data-ui-theme] .reminder-option,
body[data-ui-theme] .ai-forum-banner,
body[data-ui-theme] .forum-thread,
body[data-ui-theme] .forum-post,
body[data-ui-theme] .forum-ai-reply,
body[data-ui-theme] .danger-zone,
body[data-ui-theme] .status,
body[data-ui-theme] .manual-budget,
body[data-ui-theme] .time-mood,
body[data-ui-theme] .choice-card {
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}
body[data-ui-theme] .onboarding-card,
body[data-ui-theme] .page-card,
body[data-ui-theme] .card,
body[data-ui-theme] .budget-card,
body[data-ui-theme] .date-card {
  background:var(--theme-panel) !important;
  box-shadow:0 20px 55px var(--theme-shadow) !important;
}
body[data-ui-theme] .setup-block,
body[data-ui-theme] .summary-box,
body[data-ui-theme] .summary-list,
body[data-ui-theme] .reminder-option,
body[data-ui-theme] .ai-forum-banner,
body[data-ui-theme] .forum-ai-reply,
body[data-ui-theme] .status,
body[data-ui-theme] .manual-budget,
body[data-ui-theme] .time-mood {
  background:var(--theme-panel-soft) !important;
}
body[data-ui-theme] .forum-post {
  background:var(--theme-panel) !important;
}

body[data-ui-theme] h1,
body[data-ui-theme] h2,
body[data-ui-theme] h3,
body[data-ui-theme] strong,
body[data-ui-theme] .brand h1,
body[data-ui-theme] .page-header h1,
body[data-ui-theme] .card-top h1,
body[data-ui-theme] .budget-value {
  color:var(--theme-text) !important;
}
body[data-ui-theme] .subtext,
body[data-ui-theme] .budget-meta,
body[data-ui-theme] .forum-note,
body[data-ui-theme] .field > label,
body[data-ui-theme] .info-row span:first-child,
body[data-ui-theme] .date-card span,
body[data-ui-theme] .budget-card-head span,
body[data-ui-theme] .reminder-limit,
body[data-ui-theme] .three-avatar-note {
  color:var(--theme-muted) !important;
}
body[data-ui-theme] .eyebrow,
body[data-ui-theme] .section-kicker,
body[data-ui-theme] .step-label {
  color:var(--theme-accent) !important;
}

/* Inputs inherit the chosen visual language. */
body[data-ui-theme] input,
body[data-ui-theme] select,
body[data-ui-theme] textarea,
body[data-ui-theme] .editor-row input,
body[data-ui-theme] .manual-controls input {
  background:var(--theme-input) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}
body[data-ui-theme] input:focus,
body[data-ui-theme] select:focus,
body[data-ui-theme] textarea:focus,
body[data-ui-theme] .editor-row input:focus,
body[data-ui-theme] .manual-controls input:focus {
  border-color:var(--theme-accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-accent) 18%,transparent) !important;
}
body[data-ui-theme] input[type="checkbox"] {
  accent-color:var(--theme-accent);
}

/* Buttons and small controls follow the same accent palette. */
body[data-ui-theme] .primary-btn,
body[data-ui-theme] .square-btn.add,
body[data-ui-theme] .choice-card.primary-choice,
body[data-ui-theme] .ai-avatar {
  background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--theme-accent) 28%,transparent) !important;
}
body[data-ui-theme] .secondary-btn,
body[data-ui-theme] .icon-btn,
body[data-ui-theme] .square-btn,
body[data-ui-theme] .flag-button,
body[data-ui-theme] .user-button,
body[data-ui-theme] .help-button,
body[data-ui-theme] .remove-row,
body[data-ui-theme] .avatar-toggle,
body[data-ui-theme] .choice-card:not(.primary-choice) {
  background:var(--theme-panel) !important;
  color:var(--theme-text) !important;
  border-color:var(--theme-border) !important;
}
body[data-ui-theme] .secondary-btn:hover,
body[data-ui-theme] .icon-btn:hover,
body[data-ui-theme] .square-btn:hover,
body[data-ui-theme] .flag-button:hover,
body[data-ui-theme] .user-button:hover,
body[data-ui-theme] .help-button:hover {
  background:var(--theme-accent-soft) !important;
}
body[data-ui-theme] .danger-btn {
  background:var(--theme-panel) !important;
  color:var(--theme-danger) !important;
  border-color:color-mix(in srgb,var(--theme-danger) 45%,var(--theme-border)) !important;
}

/* Routine/Bonus rows and values also adapt. */
body[data-ui-theme] .check-row {
  border-top-color:var(--theme-border) !important;
}
body[data-ui-theme] .check-row:hover,
body[data-ui-theme] .check-row.checked {
  background:var(--theme-accent-soft) !important;
}
body[data-ui-theme] .item-value {
  color:var(--theme-text) !important;
  background:var(--theme-accent-soft) !important;
  border-color:var(--theme-border) !important;
}
body[data-ui-theme] .info-row {
  border-color:var(--theme-border) !important;
}
body[data-ui-theme] .forum-note {
  background:var(--theme-panel-soft) !important;
}

/* Theme-specific subtle page decoration (without replacing the user's requested simple backgrounds). */
body[data-ui-theme="white"]::before,
body[data-ui-theme="white"]::after { display:none !important; }
body[data-ui-theme="blush"]::before { background:rgba(255,177,210,.50) !important; }
body[data-ui-theme="blush"]::after { background:rgba(255,217,191,.42) !important; }
body[data-ui-theme="sky"]::before { background:rgba(164,215,255,.52) !important; }
body[data-ui-theme="sky"]::after { background:rgba(191,190,255,.40) !important; }
body[data-ui-theme="mint"]::before { background:rgba(166,224,199,.52) !important; }
body[data-ui-theme="mint"]::after { background:rgba(217,235,166,.42) !important; }

/* Budget details should no longer force yellow/blue boxes in simple themes. */
body:not([data-ui-theme="rich"]) .time-mood.day,
body:not([data-ui-theme="rich"]) .time-mood.night {
  background:var(--theme-panel-soft) !important;
}
body[data-ui-theme] .time-mood span {
  filter:saturate(.85);
}

/* Rich mode remains translucent enough for artwork to remain visible. */
body[data-ui-theme="rich"] .checklist-theme-shell .onboarding-card,
body[data-ui-theme="rich"] .checklist-theme-shell .page-card,
body[data-ui-theme="rich"] .community-theme-shell .page-card,
body[data-ui-theme="rich"] .budget-glass-card,
body[data-ui-theme="rich"] .motivation-card,
body[data-ui-theme="rich"] .motivation-theme-shell .page-card {
  background:rgba(255,255,255,.89) !important;
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
}


/* v18 forum articulated background: static symbols only */
.community-theme-shell .floating-piece { animation: none !important; }
.community-theme-shell .symbol-piece { opacity: .92; }
.community-theme-shell .symbol-glyph { background: rgba(255,255,255,.38); color: rgba(81,62,101,.42); box-shadow: 0 8px 18px rgba(91,78,100,.06); }


/* ===== Be Better v19 branding + mode choice ===== */
.welcome-cloud { gap: .32em .62em !important; opacity: .18 !important; }
.welcome-cloud span { font-size: clamp(1.15rem, 3.4vw, 3.8rem) !important; letter-spacing: -.035em !important; line-height: .92 !important; }
.welcome-logo { letter-spacing: -.055em !important; }
.mode-choice-card { width:min(790px,100%); }
.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
.mode-card { min-height:205px; border:1px solid var(--border); border-radius:24px; padding:24px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; gap:26px; background:rgba(255,255,255,.88); color:var(--text); box-shadow:0 16px 34px rgba(83,71,94,.08); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.mode-card:hover { transform:translateY(-3px); box-shadow:0 22px 44px rgba(83,71,94,.13); }
.mode-card h2 { margin:0 0 8px; font-size:1.75rem; }
.mode-card p { margin:0; color:var(--muted); line-height:1.55; }
.mode-badge { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:1.7rem; background:var(--soft); border:1px solid var(--border); }
.chill-mode { background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(235,248,255,.93)); }
.chill-mode .mode-badge { background:linear-gradient(145deg,#e3f5ff,#f5efff); }
.competitive-mode { background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(255,241,235,.93)); }
.competitive-mode .mode-badge { background:linear-gradient(145deg,#fff1d9,#ffe0e3); }
.mode-message { margin-top:18px; padding:14px 18px; border-radius:16px; border:1px dashed var(--border); background:var(--soft); text-align:center; font-weight:800; color:var(--text); }
@media(max-width:700px){.mode-grid{grid-template-columns:1fr}.mode-card{min-height:170px}.welcome-cloud span{font-size:clamp(1rem,5.2vw,2.1rem)!important;}}

/* ===== Be Better v21 ===== */
.time-mood { display:none !important; }

.forum-static-backdrop {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,220,234,.18), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(205,231,255,.16), transparent 26%),
    linear-gradient(180deg, rgba(255,250,253,.88), rgba(248,251,255,.94));
}
.forum-static-symbol {
  position:absolute;
  left:0;
  top:0;
  transform:translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%)) rotate(var(--fr));
  font-size:var(--fs);
  line-height:1;
  font-weight:800;
  color:rgba(88,68,108,var(--fo));
  text-shadow:0 7px 16px rgba(95,78,112,.05);
  user-select:none;
  white-space:nowrap;
}
.community-theme-shell > .forum-static-backdrop { z-index:0; }
.community-theme-shell > .page-wrap { position:relative; z-index:2; }
body[data-ui-theme="white"] .forum-static-backdrop,
body[data-ui-theme="blush"] .forum-static-backdrop,
body[data-ui-theme="sky"] .forum-static-backdrop,
body[data-ui-theme="mint"] .forum-static-backdrop {
  display:none !important;
}

/* ===== Be Better + Supabase authentication ===== */
.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 16px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,207,228,.50), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(195,226,255,.52), transparent 25%),
    radial-gradient(circle at 65% 88%, rgba(224,244,219,.48), transparent 26%),
    linear-gradient(180deg,#fffafd,#f8fbff 54%,#fffdf8);
}
.auth-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.55;}
.auth-orb.orb-one{width:240px;height:240px;left:-80px;bottom:8vh;background:linear-gradient(135deg,#ffd5e7,#f1ddff);}
.auth-orb.orb-two{width:290px;height:290px;right:-100px;top:7vh;background:linear-gradient(135deg,#d8efff,#ddf5df);}
.auth-card{
  position:relative;
  z-index:1;
  width:min(650px,100%);
  border:1px solid var(--border);
  border-radius:28px;
  padding:30px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  box-shadow:0 28px 80px rgba(85,70,97,.13);
}
.auth-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;}
.auth-top h1{margin:.18rem 0 .55rem;font-size:clamp(2.1rem,5vw,3.35rem);line-height:.98;letter-spacing:-.055em;}
.auth-form{display:grid;gap:15px;}
.auth-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin-top:4px;}
.auth-actions button{min-height:48px;}
.auth-message{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--soft);line-height:1.45;font-size:.9rem;}
.auth-security{margin:18px 0 0;text-align:center;color:var(--muted);font-size:.75rem;}
.auth-loading{text-align:center;display:grid;place-items:center;gap:16px;max-width:420px;}
.auth-logo{font-weight:900;font-size:2.35rem;letter-spacing:-.06em;}
.sync-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--text);animation:syncSpin .85s linear infinite;}
@keyframes syncSpin{to{transform:rotate(360deg)}}
.readonly-input{background:var(--soft)!important;color:var(--muted)!important;cursor:not-allowed;}
@media(max-width:650px){
  .auth-top{flex-direction:column;}
  .auth-actions{grid-template-columns:1fr;}
  .auth-card{padding:22px;border-radius:22px;}
}