@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

* { box-sizing: border-box; }
body { font-family: Nunito, ui-sans-serif, system-ui, sans-serif; }
#app { width: 100%; margin-inline: auto; }
.app-bottom-nav { position: fixed; z-index: 30; right: 50%; bottom: 0; display: grid; width: min(100%, 34rem); grid-template-columns: repeat(2, 1fr); transform: translateX(50%); border-top: 1px solid #e6eee9; background: rgba(255,255,255,.96); box-shadow: 0 -10px 26px rgba(22, 62, 42, .08); backdrop-filter: blur(12px); }
.app-bottom-nav button { display: flex; min-height: 4.65rem; flex-direction: column; align-items: center; justify-content: center; gap: .32rem; color: #94a39b; font-size: .7rem; font-weight: 900; }
.app-bottom-nav button i { font-size: 1.18rem; }
.app-bottom-nav button.is-active { color: #167a54; }
.app-bottom-nav button.is-active i { transform: translateY(-1px); }
.modal-layer { position: fixed; inset: 0; z-index: 50; display: flex; width: 100%; align-items: flex-end; justify-content: center; }
.modal-layer > form { width: min(100%, 28rem); }
.join-device-screen { min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem; background: linear-gradient(145deg, #edf9f2, #f7f5ff); }
.join-device-card, .device-approval-card { width: min(100%, 25rem); border-radius: 2rem; background: #fff; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 24px 60px rgba(22,62,42,.13); }
.join-device-icon, .device-approval-icon { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1rem; place-items: center; border-radius: 1.4rem; background: #e8f8ef; color: #168457; font-size: 1.55rem; }
.join-device-kicker, .device-approval-kicker { color: #168457; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.join-device-card h1, .device-approval-card h2 { margin-top: .35rem; color: #102019; font-size: 1.55rem; font-weight: 900; }
.join-device-card > p:not(.join-device-kicker), .device-approval-card > p:not(.device-approval-kicker) { margin-top: .65rem; color: #64748b; font-size: .86rem; font-weight: 700; line-height: 1.5; }
.join-device-code { margin: 1.35rem 0 .65rem; color: #102019; font-size: 2.3rem; font-weight: 900; letter-spacing: .22em; }
.join-device-card small { display: block; color: #94a3b8; font-size: .7rem; font-weight: 800; }
.join-device-card button { width: 100%; margin-top: 1.4rem; border-radius: 1rem; background: #168457; padding: .85rem; color: #fff; font-weight: 900; }
.join-device-card footer { margin-top: 1.25rem; color: #b0bbb5; font-size: .65rem; font-weight: 800; }
.device-approval-layer { z-index: 90; align-items: center; padding: 1rem; background: rgba(15,23,42,.58); }
.device-approval-card label { display: block; margin-top: 1.25rem; color: #334155; font-size: .78rem; font-weight: 900; text-align: left; }
.device-approval-card input { width: 100%; margin-top: .5rem; border: 1px solid #dbe6df; border-radius: 1rem; padding: .8rem; color: #102019; font-size: 1.5rem; font-weight: 900; letter-spacing: .25em; text-align: center; outline: none; }
.device-approval-card input:focus { border-color: #22a56f; box-shadow: 0 0 0 3px rgba(34,165,111,.13); }
.device-approval-error { min-height: 1.2rem; color: #e11d48 !important; font-size: .72rem !important; }
.device-approval-error.is-success { color: #168457 !important; }
.device-approval-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem; }
.device-approval-card button { border-radius: 1rem; padding: .85rem .6rem; background: #eef2f0; color: #64748b; font-size: .82rem; font-weight: 900; }
.device-approval-card button[type="submit"] { background: #168457; color: #fff; }
.device-approval-card button:disabled { cursor: wait; opacity: .65; }
.room-share-layer { z-index: 85; align-items: flex-end; padding: 0; background: rgba(15,23,42,.52); }
.room-share-card { width: min(100%, 28rem); max-height: 88dvh; overflow-y: auto; border-radius: 2rem 2rem 0 0; background: #fff; padding: 1.4rem; }
.room-share-card header { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.room-share-card header p { color: #168457; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.room-share-card header h2 { margin-top: .2rem; font-size: 1.35rem; font-weight: 900; }
.room-share-card header button { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 999px; background: #f1f5f3; color: #64748b; }
.room-share-card > label { display: block; margin-top: 1.3rem; color: #475569; font-size: .74rem; font-weight: 900; text-align: left; }
.room-share-link { display: flex; gap: .5rem; margin-top: .45rem; }
.room-share-link input { min-width: 0; flex: 1; border: 1px solid #dfe8e3; border-radius: .9rem; background: #f8faf9; padding: .75rem .8rem; color: #64748b; font-size: .72rem; font-weight: 700; }
.room-share-link button { width: 2.8rem; flex: 0 0 2.8rem; border-radius: .9rem; background: #168457; color: #fff; }
.room-code-row { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; border-radius: 1rem; background: #f3efff; padding: .85rem 1rem; text-align: left; }
.room-code-row span { display: flex; flex-direction: column; }
.room-code-row small { color: #7c6aa8; font-size: .65rem; font-weight: 900; }
.room-code-row strong { color: #5b21b6; font-size: 1.2rem; letter-spacing: .13em; }
.room-code-row button { border-radius: .75rem; background: #fff; padding: .55rem .7rem; color: #6d28d9; font-size: .72rem; font-weight: 900; }
.room-devices { margin-top: 1.25rem; text-align: left; }
.room-devices-title { display: flex; align-items: center; justify-content: space-between; color: #334155; font-size: .78rem; font-weight: 900; }
.room-devices-title small { color: #94a3b8; font-size: .65rem; }
.room-device-list { display: grid; gap: .5rem; margin-top: .65rem; }
.room-device-list article { display: flex; align-items: center; gap: .7rem; border: 1px solid #edf2ef; border-radius: 1rem; padding: .7rem .8rem; }
.room-device-list article > div { min-width: 0; flex: 1; }
.room-device-list strong, .room-device-list small { display: block; }
.room-device-list strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.room-device-list small { margin-top: .1rem; color: #94a3b8; font-size: .63rem; font-weight: 800; }
.room-device-list article > i { color: #22a56f; font-size: .8rem; }
.room-device-list > p { border-radius: 1rem; background: #f8faf9; padding: .9rem; color: #94a3b8; font-size: .72rem; font-weight: 800; text-align: center; }
.room-device-dot { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.room-share-feedback { min-height: 1rem; margin-top: .65rem; color: #168457; font-size: .68rem; font-weight: 900; text-align: center; }
@media (min-width: 640px) { .room-share-layer { align-items: center; padding: 1rem; } .room-share-card { border-radius: 2rem; } }
.habit-intent { min-height: 8.7rem; box-shadow: 0 8px 24px rgba(67, 49, 116, .06); }
.habit-icon { min-height: 5.4rem; }
.routine-icon-slider { display: grid !important; height: 5.7rem; grid-template-rows: repeat(2, 2.55rem) !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 2.55rem !important; align-content: start; gap: .45rem; overflow-x: auto; overflow-y: hidden; padding: .15rem 0 .55rem; scrollbar-width: thin; scrollbar-color: #a7d9c2 transparent; scroll-snap-type: x proximity; }
.routine-icon-slider::-webkit-scrollbar { height: .35rem; }
.routine-icon-slider::-webkit-scrollbar-thumb { border-radius: 999px; background: #a7d9c2; }
.routine-icon-choice { height: 2.55rem; width: 2.55rem; scroll-snap-align: start; background: #f1f8f4; }
.routine-icon-choice.is-selected { background: #d9f6e7; box-shadow: inset 0 0 0 2px #168457; }
.habit-icon-slider { display: grid; height: 7rem; grid-template-rows: repeat(2, 3.15rem); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 3.15rem; align-content: start; gap: .55rem; overflow-x: auto; overflow-y: hidden; padding: .15rem 0 .6rem; scroll-snap-type: x proximity; }
.habit-icon-slider .habit-icon { height: 3.15rem; min-height: 0; width: 3.15rem; scroll-snap-align: start; }
.home-progress-card { background: linear-gradient(135deg, #ccebd7 0%, #bfe4ce 100%); border: 0; }
.home-progress-wrap { margin-top: 1.5rem !important; }
.home-progress-card { position: relative; min-height: 12.7rem; overflow: hidden; padding: 2.35rem 1rem 3.85rem !important; background-color: #cbed8f; }
.progress-illustration { position: absolute; right: -.2rem; bottom: 2.2rem; width: 10.75rem; height: 10.75rem; pointer-events: none; }
.progress-illustration img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.home-progress-card > p:first-of-type, .home-progress-card > h2, .home-progress-card > p:nth-of-type(2) { position: relative; z-index: 1; max-width: 62%; text-align: left; }
.home-progress-card > p:first-of-type { font-size: .7rem !important; }
.home-progress-card > h2 { font-size: 1.35rem !important; line-height: 1.08 !important; white-space: nowrap; }
.home-progress-card > p:nth-of-type(2) { font-size: .75rem !important; line-height: 1.35; color: #263a27 !important; }
.progress-ring { display: none !important; }
.progress-ring::before { content: none; }
.progress-ring strong { display: none; }
.progress-action { position: absolute; z-index: 2; right: .8rem; bottom: .75rem; left: .8rem; border-radius: .9rem; background: rgba(255,255,255,.96); padding: .6rem .8rem; color: #253b2b; }
@media (max-width: 420px) { .home-progress-card { min-height: 12.7rem; } .progress-illustration { right: -.2rem; bottom: 2.2rem; width: 10.75rem; height: 10.75rem; } }
.first-habit-onboarding { position: fixed !important; inset: 0 !important; z-index: 60 !important; display: flex !important; align-items: flex-end; justify-content: center; padding: 1rem 1rem calc(5.65rem + env(safe-area-inset-bottom)); background: rgba(15, 23, 42, .62) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.first-habit-guide { width: min(100%, 24rem); border-radius: 1.75rem; background: white; padding: 1.15rem; text-align: center; box-shadow: 0 18px 50px rgba(15, 23, 42, .22); }
.first-habit-arrow { display: inline-grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: 999px; background: #f3e8ff; color: #7c3aed; animation: pointToHabit 1.2s ease-in-out infinite; }
.first-habit-guide button { margin-top: .8rem; width: 100%; border-radius: 1rem; background: #7c3aed; padding: .9rem 1rem; color: white; font-size: .9rem; font-weight: 900; }
.first-habit-guide .first-habit-refresh { margin-top: .45rem; border: 0; background: transparent; padding: .5rem; color: #64748b; font-size: .7rem; }
@keyframes pointToHabit { 50% { transform: translateY(4px); } }
.app-build-footer { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 1.75rem auto 5.5rem; color: #94a3b8; font-size: .68rem; font-weight: 800; }
.app-build-footer button { border: 1px solid #dfe7e2; border-radius: 999px; background: rgba(255,255,255,.88); padding: .45rem .7rem; color: #64748b; }
.app-build-footer button:disabled { cursor: wait; opacity: .65; }
.active-timers-tray { position: fixed; z-index: 42; right: 50%; bottom: calc(5.15rem + env(safe-area-inset-bottom)); display: flex; width: min(calc(100% - 1.5rem), 26rem); transform: translateX(50%); flex-direction: column; gap: .5rem; pointer-events: none; }
.mini-timer-chip { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; border: 1px solid #cce9dc; border-radius: 1.2rem; background: rgba(255,255,255,.97); padding: .65rem .8rem; color: #17231d; text-align: left; box-shadow: 0 12px 30px rgba(22, 62, 42, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: auto; }
.mini-timer-ring { display: grid; height: 2.65rem; width: 2.65rem; place-items: center; border-radius: 999px; background: conic-gradient(#20bf82 var(--mini-progress, 0%), #dff3e9 0); }
.mini-timer-ring::after { content: '\f04b'; display: grid; height: 2rem; width: 2rem; place-items: center; border-radius: inherit; background: white; color: #168457; font-family: "Font Awesome 6 Free"; font-size: .65rem; font-weight: 900; }
.mini-timer-chip.is-complete .mini-timer-ring::after { content: '\f00c'; }
.mini-timer-chip.is-paused .mini-timer-ring::after { content: '\f04c'; color: #7c3aed; }
.mini-timer-chip.is-paused { border-color: #ddd0f7; }
.mini-timer-chip strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.notifications-settings-layer { z-index: 80; background: rgba(15, 23, 42, .58); }
.notification-status-dot { height: .7rem; width: .7rem; border-radius: 999px; background: #f59e0b; }
.notification-status-dot.is-active { background: #10b981; box-shadow: 0 0 0 5px rgba(16,185,129,.12); }
.notification-status-dot.is-blocked { background: #ef4444; }
.calendar-day strong { transition: background .2s ease, color .2s ease; }
.calendar-day.is-today strong { background: #167a54; color: white; box-shadow: 0 6px 14px rgba(22,122,84,.22); }
.calendar-day.is-selected:not(.is-today) strong { background: #ede9fe; color: #5b21b6; }
.calendar-day > span:first-child { display: none; }
.calendar-day strong { margin-top: 0; }
.routine-timer-ring { background: conic-gradient(#34d399 0deg, #34d399 65deg, rgba(255,255,255,.10) 65deg); box-shadow: 0 0 0 10px rgba(255,255,255,.03); }
.routine-timer-panel { display: flex; flex-direction: column; align-items: center; }
.routine-timer-panel { margin: auto; justify-self: center; align-self: center; }
.routine-timer-panel > p, .routine-timer-panel > h2, .routine-timer-panel .timer-actions { width: 100%; }
.routine-timer-panel { width: min(100%, 20rem); padding: 1.5rem; background: #ffffff !important; color: #17231d !important; box-shadow: 0 20px 50px rgba(18, 38, 28, .18); }
.routine-timer-panel > span, .routine-timer-panel > p, .routine-timer-panel > h2, .routine-timer-panel [data-timer-note] { display: none; }
.routine-timer-panel > h2 { display: block; margin-top: 0; margin-bottom: 1.25rem; color: #17231d; font-size: 1.2rem; line-height: 1.3; }
.routine-timer-panel .routine-timer-ring { margin-top: 0; height: 11.5rem; width: 11.5rem; background: conic-gradient(#34d399 0deg, #34d399 65deg, #dceee5 65deg); }
.routine-timer-panel .timer-display { height: 9.75rem; width: 9.75rem; background: #ffffff; color: #17231d; }
.routine-timer-panel .timer-actions { margin-top: 2rem; }
.routine-timer-panel [data-timer-close] { border-color: #dbe5df; background: #ffffff; color: #536259; }
.routine-timer-panel [data-timer-finish] { background: #d7f7e8; color: #167a54; }
.routine-timer-panel [data-timer-finish]:disabled { background: #edf2ef; color: #9aa9a0; }
.routine-timer-panel .timer-actions { display: flex; align-items: center; justify-content: center; }
.routine-timer-panel [data-timer-close], .routine-timer-panel [data-timer-finish] { position: relative; flex: 0 0 auto; height: 3.4rem; width: 3.4rem; padding: 0; font-size: 0; border-radius: 1.15rem; }
.routine-timer-panel [data-timer-close]::before, .routine-timer-panel [data-timer-finish]::before { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Font Awesome 6 Free"; font-size: 1.05rem; font-weight: 900; line-height: 1; }
.routine-timer-panel [data-timer-close]::before { content: "\f422"; }
.routine-timer-panel [data-timer-finish]::before { content: "\f00c"; }
.routine-timer-panel [data-timer-finish] { background: #d7f7e8; color: #128052; }
.timer-design-card { max-height: calc(100dvh - 2rem); overflow: hidden; }
.timer-orbit { background: conic-gradient(#22c98d var(--timer-progress, 0%), #dff4e9 0); box-shadow: 0 14px 34px rgba(22, 122, 84, .13); transition: background .7s ease; }
.timer-orbit-inner { box-shadow: inset 0 0 0 12px white; }
.timer-round-control { display: grid; height: 3.8rem; width: 3.8rem; place-items: center; border: 1px solid #dfe9e3; border-radius: 999px; color: #506158; font-size: 1.1rem; }
.timer-start-button { min-width: 10.5rem; border-radius: 999px; background: #18b978; padding: 1rem 1.5rem; color: white; font-weight: 900; box-shadow: 0 10px 22px rgba(24, 185, 120, .22); }
.timer-start-button:disabled { cursor: not-allowed; opacity: .75; }
.timer-start-button.is-paused { background: #7c3aed; box-shadow: 0 10px 22px rgba(124, 58, 237, .2); }
.timer-card-expanded { max-width: 620px; }
.timer-design-card header { position: relative; display: block; padding: 0 3.25rem; }
.timer-design-card header > span { display: none; }
.timer-design-card header::before { content: ''; display: block; }
.timer-design-card header h2 { font-size: 1.35rem; line-height: 1.2; }
.timer-design-card .timer-close { position: absolute; top: -.35rem; right: -.35rem; }
.timer-design-card .timer-orbit-inner .fa-sparkles { font-size: 1.25rem; }
.timer-design-card .timer-orbit-inner p { margin-top: .75rem; font-size: .62rem; letter-spacing: .13em; }
.timer-design-card [data-timer-note] { margin-top: .8rem; padding: .38rem .75rem; font-size: .68rem; opacity: .58; }
.timer-design-card .timer-round-control:first-child i { display: none; }
.timer-design-card .timer-round-control:first-child::before { content: "\f0f3"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.timer-design-card .timer-round-control:last-child i { display: none; }
.timer-design-card .timer-round-control:last-child::before { content: "\f066"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.timer-design-card aside { padding: 1rem 1.1rem; }
.timer-design-card aside i { font-size: 1.2rem; }
.timer-design-card aside p { font-size: .75rem; line-height: 1.35rem; }
.timer-design-card aside strong { font-size: .88rem; }
.habit-completing { animation: habitComplete .26s ease forwards; pointer-events: none; }
@keyframes habitComplete { to { opacity: 0; transform: translateX(20px) scale(.96); } }
.habits-celebration i { animation: happyCheck 1.05s ease-in-out infinite; }
@keyframes happyCheck { 50% { transform: translateY(-5px) scale(1.12) rotate(8deg); } }
.timer-design-card .timer-orbit { height: clamp(11rem, 36vh, 20rem) !important; width: clamp(11rem, 36vh, 20rem) !important; }
.timer-design-card .timer-start-button { min-width: 0; flex: 1; max-width: 10rem; padding: .85rem 1rem; font-size: .86rem; }
.timer-design-card .timer-round-control { height: 3.25rem; width: 3.25rem; flex: 0 0 3.25rem; }
@media (max-height: 720px) {
  .timer-design-card { padding: 1.5rem; }
  .timer-design-card .timer-orbit { margin-top: 1.3rem; height: min(38vh, 16rem) !important; width: min(38vh, 16rem) !important; }
  .timer-design-card .timer-orbit + div { margin-top: 1.4rem; }
  .timer-design-card aside { margin-top: 1.5rem; padding: .8rem 1rem; }
}
.calendar-view-active { background: white; color: #167a54; box-shadow: 0 2px 8px rgba(22, 62, 42, .08); }
@media (min-width: 640px) {
  .modal-layer { align-items: center; padding: 1rem; }
  .modal-layer > form { border-radius: 2rem; }
}

/* Jerarquía ligera: objetivos → rutinas → acciones y hábitos */
.app-bottom-nav { grid-template-columns: repeat(3, 1fr); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; background: #fff; padding: 1.5rem 1.25rem 1rem; }
.app-header > div { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.app-header > div > span { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; border-radius: .9rem; background: #e8f7ef; font-size: 1.2rem; }
.app-header p { color: #167a54; font-size: .67rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.app-header h1 { overflow: hidden; margin-top: .15rem; font-size: 1.15rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.app-header aside { display: flex; gap: .4rem; }
.app-header aside button { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .85rem; background: #f2f6f4; color: #64748b; }
.app-header aside button:first-child { background: #f3efff; color: #6d28d9; }
.app-header aside button:nth-child(2) { background: #eaf9f1; color: #168457; }
.app-main { padding: 0 1.15rem; }
.home-progress-card .progress-action > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 900; }
.home-progress-card .progress-action > div:last-child { height: .35rem; margin-top: .5rem; overflow: hidden; border-radius: 999px; background: #d9f5e7; }
.home-progress-card .progress-action > div:last-child span { display: block; height: 100%; border-radius: inherit; background: #168457; }
.calendar-card { margin-top: 1.3rem; border: 1px solid #edf1ef; border-radius: 1.6rem; background: #fff; padding: 1rem; box-shadow: 0 8px 24px rgba(22,62,42,.05); }
.calendar-card > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendar-card > header h2 { font-size: 1rem; font-weight: 900; }
.calendar-card > header p { margin-top: .1rem; color: #94a3b8; font-size: .68rem; font-weight: 800; }
.calendar-card > header > div:last-child { display: flex; gap: .3rem; }
.calendar-card > header button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .7rem; background: #ebfaf3; color: #168457; font-size: .75rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; margin-top: .9rem; }
.calendar-grid .calendar-day { display: grid; min-width: 0; place-items: center; padding: .2rem 0; color: #334155; }
.calendar-grid .calendar-day > span { display: block; color: #a0aca5; font-size: .52rem; font-weight: 900; }
.calendar-grid .calendar-day > strong { display: grid; width: 1.85rem; height: 1.85rem; margin-top: .2rem; place-items: center; border-radius: 999px; font-size: .73rem; }
.calendar-grid .calendar-day.is-selected > strong { background: #168457; color: #fff; }
.calendar-grid .calendar-day > i { display: block; width: .3rem; height: .3rem; margin-top: .25rem; border-radius: 999px; }
.calendar-grid .calendar-day.is-complete > i, .calendar-card footer i.is-complete { background: #22c55e; }
.calendar-grid .calendar-day.is-partial > i, .calendar-card footer i.is-partial { background: #f59e0b; }
.calendar-grid .calendar-day.has-plan > i, .calendar-card footer i.has-plan { background: #cbd5e1; }
.calendar-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; border-radius: .9rem; background: #f7faf8; padding: .65rem .75rem; }
.calendar-summary > div { display: flex; align-items: baseline; gap: .35rem; }
.calendar-summary strong { color: #168457; font-size: .95rem; }
.calendar-summary span, .calendar-summary small { color: #7d8c84; font-size: .61rem; font-weight: 800; }
.calendar-summary small { text-align: right; }
.calendar-card > footer { display: flex; gap: .8rem; margin-top: .65rem; color: #94a3b8; font-size: .56rem; font-weight: 800; }
.calendar-card > footer span { display: flex; align-items: center; gap: .25rem; }
.calendar-card > footer i { width: .35rem; height: .35rem; border-radius: 999px; }
.day-agenda { margin-top: 1.7rem; }
.day-agenda > header h2 { font-size: 1.15rem; font-weight: 900; }
.day-agenda > header p { margin-top: .1rem; color: #94a3b8; font-size: .72rem; font-weight: 800; }
.day-moment { margin-top: 1.15rem; }
.day-moment > header { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.day-moment > header > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: #f5f7f6; font-size: .95rem; }
.day-moment > header h2 { font-size: .87rem; font-weight: 900; }
.day-moment > header p { color: #a0aaa4; font-size: .6rem; font-weight: 800; }
.day-moment > div, .manage-section > div, .goals-space > div { display: grid; gap: .65rem; }
.day-routine-card, .independent-habit { border: 1px solid #e8efeb; border-radius: 1.1rem; background: #fff; box-shadow: 0 6px 18px rgba(22,62,42,.045); }
.day-routine-card.is-done, .independent-habit.is-done { background: #effaf4; opacity: .72; }
.day-routine-head { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: .65rem; padding: .75rem; text-align: left; }
.day-routine-icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .8rem; background: #eaf8f1; font-size: 1.1rem; }
.day-routine-head h3 { overflow: hidden; font-size: .82rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.day-routine-head p { margin-top: .12rem; color: #94a3b8; font-size: .61rem; font-weight: 800; }
.day-routine-head p b { color: #7c3aed; }
.day-routine-head > strong { color: #168457; font-size: .7rem; }
.day-routine-head > i { color: #a7b2ac; font-size: .68rem; }
.day-routine-progress { height: .25rem; overflow: hidden; background: #edf4f0; }
.day-routine-progress span { display: block; height: 100%; background: #22b879; }
.routine-activity-list { display: grid; gap: .35rem; border-top: 1px solid #edf2ef; padding: .55rem .7rem .7rem; }
.routine-activity { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem; border-radius: .75rem; padding: .45rem .35rem; }
.routine-activity.is-done { opacity: .52; }
.routine-activity-type { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; background: #f5f7f6; font-size: .85rem; }
.routine-activity strong, .routine-activity small { display: block; }
.routine-activity strong { font-size: .73rem; }
.routine-activity small { margin-top: .08rem; color: #9aa59f; font-size: .55rem; font-weight: 800; }
.activity-check { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid #bde4d1; border-radius: .62rem; color: #168457; font-size: .68rem; }
.activity-check.is-done { border-color: #fde68a; background: #fef3c7; color: #d97706; }
.postpone-routine, .add-routine-activity, .delete-routine { justify-self: start; border-radius: .65rem; background: #f4efff; padding: .45rem .65rem; color: #6d28d9; font-size: .6rem; font-weight: 900; }
.add-routine-activity { background: #e8f8f0; color: #167a54; }
.delete-routine { background: #fff1f2; color: #e11d48; }
.routine-empty, .empty-soft { border-radius: .9rem; background: #f7faf8; padding: .9rem; color: #94a3b8; font-size: .7rem; font-weight: 800; text-align: center; }
.independent-habit { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .75rem; }
.independent-habit > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .8rem; background: #f3efff; }
.independent-habit h3 { overflow: hidden; font-size: .8rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.independent-habit p { margin-top: .1rem; color: #94a3b8; font-size: .6rem; font-weight: 800; }
.home-gentle-empty { margin-top: 1rem; border: 1px dashed #cfe2d8; border-radius: 1.3rem; background: #f8fcfa; padding: 1.2rem; text-align: center; }
.home-gentle-empty > span { font-size: 1.5rem; }
.home-gentle-empty h2 { margin-top: .4rem; font-size: .95rem; font-weight: 900; }
.home-gentle-empty p { margin: .25rem auto 0; max-width: 18rem; color: #84938b; font-size: .68rem; font-weight: 700; }
.home-gentle-empty > div { display: flex; justify-content: center; gap: .5rem; margin-top: .8rem; }
.home-gentle-empty button, .manage-section > header button, .goals-space > header button { border-radius: .7rem; background: #168457; padding: .55rem .75rem; color: #fff; font-size: .66rem; font-weight: 900; }
.home-gentle-empty button:last-child { background: #f0eaff; color: #6d28d9; }
.organize-hero { border-radius: 1.4rem; background: #eaf8f1; padding: 1.1rem; }
.organize-hero.goals { background: #f3efff; }
.organize-hero > p { color: #168457; font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.organize-hero.goals > p { color: #6d28d9; }
.organize-hero h2 { margin-top: .15rem; font-size: 1.25rem; font-weight: 900; }
.organize-hero > span { display: block; margin-top: .3rem; color: #5f7569; font-size: .68rem; font-weight: 700; }
.manage-section, .goals-space { margin-top: 1.5rem; }
.manage-section > header, .goals-space > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.manage-section > header h2, .goals-space > header h2 { font-size: .95rem; font-weight: 900; }
.manage-section > header p, .goals-space > header p { color: #94a3b8; font-size: .62rem; font-weight: 800; }
.goal-purpose-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: .65rem; border: 1px solid #ece7f8; border-radius: 1.1rem; background: #fff; padding: .8rem; }
.goal-purpose-card > span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .75rem; background: #f3efff; }
.goal-purpose-card h3 { font-size: .8rem; font-weight: 900; }
.goal-purpose-card p, .goal-purpose-card small { color: #9185aa; font-size: .57rem; font-weight: 800; }
.goal-purpose-card div > div { height: .28rem; margin: .45rem 0 .3rem; overflow: hidden; border-radius: 999px; background: #eee9fa; }
.goal-purpose-card div > div span { display: block; height: 100%; background: #7c3aed; }
.goal-purpose-card button { border-radius: .65rem; background: #f3efff; padding: .45rem .55rem; color: #6d28d9; font-size: .6rem; font-weight: 900; }
.routine-composer { max-height: 94dvh; overflow-y: auto; }
.routine-activity-row { position: relative; border: 1px solid #e7eee9; border-radius: 1rem; background: #fafcfb; padding: .75rem 2.4rem .75rem .75rem; }
.routine-activity-row > input { width: 100%; border: 0; background: transparent; font-size: .82rem; font-weight: 900; outline: none; }
.routine-activity-row label { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; color: #728078; font-size: .62rem; font-weight: 800; }
.routine-activity-row label input { width: 1rem; height: 1rem; accent-color: #168457; }
.routine-activity-row > button { position: absolute; top: .7rem; right: .65rem; display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: .5rem; color: #94a3b8; }
.routine-weekdays { grid-column: 1 / -1; margin-top: .7rem; }
.routine-weekdays:not([hidden]) { display: flex; justify-content: space-between; gap: .25rem; }
.routine-weekdays legend { width: 100%; margin-bottom: .45rem; color: #64748b; font-size: .65rem; font-weight: 900; }
.routine-weekdays label { flex: 1; cursor: pointer; }
.routine-weekdays input { position: absolute; opacity: 0; pointer-events: none; }
.routine-weekdays span { display: grid; height: 1.85rem; place-items: center; border-radius: .6rem; background: #f5f7f6; color: #7a8981; font-size: .62rem; font-weight: 900; }
.routine-weekdays input:checked + span { background: #dff6ea; color: #167a54; }
.habit-change-block { margin-top: 1rem; }
.habit-change-block > p { margin-bottom: .5rem; color: #64748b; font-size: .68rem; font-weight: 900; }
.habit-change-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.habit-change-grid button { display: grid; min-width: 0; place-items: center; gap: .18rem; border: 1px solid #e7e1f4; border-radius: .75rem; background: #fff; padding: .5rem .15rem; color: #718078; font-size: .53rem; font-weight: 900; }
.habit-change-grid button span { font-size: .92rem; }
.habit-change-grid button.is-active { border-color: #9b7bea; background: #f3efff; color: #6424c8; box-shadow: 0 4px 12px rgba(109, 40, 217, .1); }
.habit-moment-field { display: block; margin-top: 1rem; border-radius: 1rem; background: #fff; padding: 1rem; font-size: .8rem; font-weight: 900; }
.habit-moment-field select { width: 100%; margin-top: .7rem; border: 0; border-radius: .75rem; background: #f5f1ff; padding: .75rem; color: #4c1d95; font-weight: 800; outline: none; }
button { transition: transform .16s ease, box-shadow .16s ease; }
button:active { transform: scale(.98); }
.habit-card { box-shadow: 0 10px 28px rgba(22, 62, 42, .07); }
.progress-fill { transition: width .4s ease; }
.first-routine { transform: rotate(-2.2deg); transition: transform .2s ease; }
.first-routine:hover { transform: rotate(0deg) translateY(-2px); }
.progress-orb { animation: breathe 2.8s ease-in-out infinite; }
.progress-orb.steady { animation-name: sway; }
.progress-orb.bloom { animation-name: celebrate; }
@keyframes breathe { 50% { transform: scale(.94); filter: saturate(.78); } }
@keyframes sway { 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes celebrate { 40% { transform: translateY(-9px) rotate(-7deg) scale(1.12); } 70% { transform: rotate(6deg) scale(1); } }