@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-member-avatar { display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 1.7rem; place-items: center; border-radius: 999px; background: #fff0f4; font-size: .8rem; }
.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; } }
.room-spaces-layer, .shared-room-create-layer { z-index: 86; align-items: flex-end; padding: 0; background: rgba(15,23,42,.54); }
.room-spaces-card, .shared-room-create-card { width: min(100%, 28rem); max-height: 90dvh; overflow-y: auto; border-radius: 2rem 2rem 0 0; background: #fff; padding: 1.35rem; }
.room-spaces-card > header, .shared-room-create-card > header { display: flex; align-items: center; gap: .7rem; }
.room-spaces-card > header > div, .shared-room-create-card > header > div { min-width: 0; flex: 1; }
.room-spaces-card header p, .shared-room-create-card header p { color: #df4771; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.room-spaces-card header h2, .shared-room-create-card header h2 { margin-top: .1rem; font-size: 1.35rem; font-weight: 900; }
.room-spaces-card header > button, .shared-room-create-card header > button { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; place-items: center; border-radius: 999px; background: #f4f6f5; color: #64748b; }
.shared-room-create-card header > span { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: .9rem; background: #fff0f4; color: #e34672; }
.room-space-list { display: grid; gap: .55rem; margin-top: 1.15rem; }
.room-space-row { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; border: 1px solid #e8eeeb; border-radius: 1rem; padding: .72rem; text-align: left; }
.room-space-row.is-current { border-color: #f2b5c6; background: #fff7f9; }
.room-space-row > span { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .78rem; background: #f3f7f5; color: #168457; }
.room-space-row.is-current > span { background: #ffe6ed; color: #df4771; }
.room-space-row strong, .room-space-row small { display: block; }
.room-space-row strong { overflow: hidden; font-size: .86rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.room-space-row small { margin-top: .1rem; color: #89968f; font-size: .67rem; font-weight: 800; }
.room-space-row > i { color: #c1cac5; font-size: .72rem; }
.room-space-row.is-current > i { color: #df4771; }
.create-shared-room { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; margin-top: .85rem; border-radius: 1rem; background: #ffeaf0; padding: .85rem; color: #bc3159; text-align: left; }
.create-shared-room > i:first-child { font-size: 1.1rem; }
.create-shared-room strong, .create-shared-room small { display: block; }
.create-shared-room strong { font-size: .82rem; font-weight: 900; }
.create-shared-room small { margin-top: .1rem; color: #aa6980; font-size: .66rem; font-weight: 800; }
.join-shared-room { display: grid; width: 100%; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; margin-top: .55rem; border-radius: 1rem; background: #eef8f4; padding: .8rem .85rem; color: #087a57; text-align: left; }
.join-shared-room > i:first-child { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: .65rem; background: #d9f1e8; font-size: .88rem; }
.join-shared-room strong, .join-shared-room small { display: block; }
.join-shared-room strong { font-size: .82rem; font-weight: 900; }
.join-shared-room small { margin-top: .1rem; color: #668c7e; font-size: .66rem; font-weight: 800; }
.join-shared-room > i:last-child { font-size: .7rem; }
.share-current-room { width: 100%; margin-top: .55rem; border-radius: .9rem; padding: .75rem; color: #64748b; font-size: .75rem; font-weight: 900; }
.room-spaces-empty { border-radius: 1rem; background: #f7faf8; padding: 1rem; color: #89968f; font-size: .75rem; font-weight: 800; text-align: center; }
.shared-room-create-copy { margin-top: 1rem; border-radius: 1rem; background: #fff7f9; padding: .8rem; color: #8e6471; font-size: .78rem; font-weight: 700; line-height: 1.45; }
.shared-room-create-card > label { display: block; margin-top: 1rem; color: #334155; font-size: .78rem; font-weight: 900; }
.shared-room-create-card input, .shared-room-create-card select, .shared-room-create-card textarea { width: 100%; margin-top: .45rem; border: 1px solid #eadce1; border-radius: .9rem; background: #fff; padding: .8rem; font-weight: 800; outline: none; }
.shared-room-create-card textarea { resize: vertical; }
.shared-room-create-card input:focus, .shared-room-create-card select:focus, .shared-room-create-card textarea:focus { border-color: #e45d83; box-shadow: 0 0 0 3px rgba(228,93,131,.12); }
.shared-room-create-card label[hidden] { display: none; }
.shared-room-create-card > label > small { display: block; margin-top: .35rem; color: #94a3b8; font-size: .65rem; font-weight: 800; }
.shared-room-create-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: .6rem; margin-top: 1rem; }
.shared-room-create-actions button { border-radius: .9rem; background: #f2f5f3; padding: .8rem .6rem; color: #64748b; font-size: .78rem; font-weight: 900; }
.shared-room-create-actions button[type="submit"] { background: #df4771; color: #fff; }
.shared-room-create-actions button:disabled { opacity: .65; }
.shared-room-error { min-height: 1rem; margin-top: .5rem; color: #e11d48; font-size: .68rem; font-weight: 800; text-align: center; }
.challenge-habit-picker { display: grid; gap: .45rem; margin-top: 1rem; border: 0; }
.challenge-habit-picker legend { margin-bottom: .2rem; color: #334155; font-size: .78rem; font-weight: 900; }
.challenge-habit-picker > p { border-radius: .8rem; background: #f7faf8; padding: .75rem; color: #89968f; font-size: .72rem; font-weight: 800; }
.challenge-habit-choice { display: grid !important; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: .6rem; margin: 0 !important; border: 1px solid #e8eeeb; border-radius: .85rem; padding: .65rem .75rem; cursor: pointer; }
.challenge-habit-choice input { width: 1.1rem !important; height: 1.1rem; margin: 0 !important; accent-color: #df4771; }
.challenge-habit-choice span { font-size: 1.05rem; }
.challenge-habit-choice strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.shared-room-strip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; margin-top: .7rem; border: 1px solid #f5c4d2; border-radius: 1rem; background: #fff4f7; padding: .65rem .75rem; color: #bd3159; }
.shared-room-strip > i { font-size: .9rem; }
.shared-room-strip strong, .shared-room-strip small { display: block; }
.shared-room-strip strong { font-size: .72rem; font-weight: 900; }
.shared-room-strip small { margin-top: .05rem; color: #a66a7c; font-size: .62rem; font-weight: 800; }
.shared-room-strip button { border-radius: .7rem; background: #fff; padding: .45rem .6rem; font-size: .66rem; font-weight: 900; }
.together-progress { color: #d83d68; font-weight: 900; white-space: nowrap; }
.linked-challenges { margin-top: 1.2rem; }
.linked-challenges > header p { color: #c73561; font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.linked-challenges > header h2 { font-size: 1rem; font-weight: 900; }
.linked-challenges > div { display: grid; gap: .65rem; margin-top: .55rem; }
.linked-challenge-card { position: relative; border: 1px solid #f2cfda; border-radius: 1.2rem; background: linear-gradient(145deg,#fff7fa,#fff); padding: .85rem; box-shadow: 0 8px 24px rgba(102,31,55,.06); transition: transform .16s ease, box-shadow .16s ease; }
.linked-challenge-card:active { transform: scale(.985); }
.linked-challenge-card-hit { position: absolute; z-index: 2; inset: 0; width: 100%; border-radius: inherit; background: transparent; }
.linked-challenge-card-hit:focus-visible { outline: 3px solid rgba(223,71,113,.35); outline-offset: 2px; }
.linked-challenge-card.is-complete { border-color: #f1d37a; background: linear-gradient(145deg,#fff9df,#fffdf6); }
.linked-challenge-card > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; }
.linked-challenge-card > header > span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .75rem; background: #ffe6ee; color: #cf3864; }
.linked-challenge-card.is-complete > header > span { background: #fff1bd; color: #a66e08; }
.linked-challenge-card header small { display: block; color: #c73561; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.linked-challenge-card header h3 { overflow: hidden; font-size: .8rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.linked-challenge-card header > strong { color: #c73561; font-size: .83rem; }
.linked-challenge-progress, .challenge-focus-progress { height: .4rem; margin-top: .65rem; overflow: hidden; border-radius: 999px; background: #f3dfe5; }
.linked-challenge-progress span, .challenge-focus-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#df4771,#f08ba7); transition: width .35s ease; }
.linked-challenge-people { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.linked-challenge-people span { border-radius: 999px; background: #fff; padding: .22rem .45rem; color: #8f6370; font-size: .55rem; font-weight: 800; }
.linked-challenge-card > footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .55rem; }
.linked-challenge-card > footer > span { min-width: 0; overflow: hidden; color: #7d5964; font-size: .6rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.linked-challenge-card > footer > i { color: #d65a7d; font-size: .62rem; }
.linked-challenge-note { position: relative; z-index: 3; flex: 0 0 auto; border-radius: .6rem; background: #fff0f5; padding: .38rem .55rem; color: #bd315a; font-size: .58rem; font-weight: 900; }
.challenge-focus { position: relative; margin-top: 1rem; border: 1px solid #f2cfda; border-radius: 1.6rem; background: linear-gradient(160deg,#fff4f8,#fff 58%); padding: 1.35rem; text-align: center; box-shadow: 0 16px 40px rgba(102,31,55,.08); }
.challenge-focus.is-complete { border-color: #efd171; background: linear-gradient(160deg,#fff7d8,#fff); }
.challenge-focus-icon { display: grid; width: 4rem; height: 4rem; margin: auto; place-items: center; border-radius: 1.25rem; background: #ffe1ea; color: #d63867; font-size: 1.45rem; }
.challenge-focus > p { margin-top: .8rem; color: #c73561; font-size: .62rem; font-weight: 900; letter-spacing: .13em; }
.challenge-focus > h2 { margin-top: .18rem; font-size: 1.35rem; font-weight: 900; }
.challenge-member-count { display: inline-block; margin-top: .4rem; border-radius: 999px; background: #fff; padding: .3rem .55rem; color: #9d6576; font-size: .62rem; font-weight: 900; }
.challenge-focus > strong { display: block; margin-top: .8rem; color: #cf3864; font-size: 2rem; font-weight: 900; }
.challenge-focus > strong small { color: #95717c; font-size: .72rem; }
.challenge-focus-progress { height: .65rem; margin-top: .45rem; }
.challenge-focus-members { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.challenge-focus-members span { border-radius: 999px; background: #fff; padding: .35rem .6rem; color: #7d5964; font-size: .68rem; font-weight: 800; box-shadow: 0 3px 10px rgba(80,36,51,.06); }
.challenge-reward { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; border-radius: 1rem; background: #fff; padding: .8rem; text-align: left; }
.challenge-reward > i { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .75rem; background: #fff1c2; color: #a66e08; }
.challenge-reward span { min-width: 0; }
.challenge-reward small, .challenge-reward strong { display: block; }
.challenge-reward small { color: #a48243; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.challenge-reward strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.challenge-focus > button { width: 100%; margin-top: .8rem; border-radius: .9rem; background: #df4771; padding: .75rem; color: #fff; font-size: .72rem; font-weight: 900; }
.challenge-focus > button.challenge-secondary { margin-top: .45rem; background: #ffe5ed; color: #b72d55; }
.challenge-focus > button.challenge-copy-host { background: linear-gradient(135deg,#6d28d9,#8b5cf6); color: #fff; box-shadow: 0 7px 18px rgba(109,40,217,.2); }
.challenge-focus > button.challenge-edit-icon { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2rem; height: 2rem; margin: 0; place-items: center; border: 1px solid #e8e2f5; border-radius: .7rem; background: rgba(255,255,255,.82); padding: 0; color: #7c6c93; font-size: .68rem; box-shadow: 0 3px 10px rgba(74,56,93,.07); }
.challenge-focus > button:disabled { cursor: not-allowed; opacity: .58; }
.challenge-focus > button.challenge-back { margin-top: .35rem; background: transparent; color: #687a70; }
.challenge-focus.is-timed { background: linear-gradient(160deg,#f3efff,#fff 58%); }
.challenge-focus.is-timed .challenge-focus-icon { background: #e9ddff; color: #6d28d9; }
.challenge-time-status { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: 1rem; border-radius: 1rem; background: #fff; padding: .75rem .85rem; color: #6d28d9; text-align: left; }
.challenge-time-status span { font-size: .68rem; font-weight: 800; }
.challenge-time-status strong { font-size: .85rem; font-weight: 900; white-space: nowrap; }
.challenge-winner { margin-top: 1rem; border-radius: 1.1rem; background: linear-gradient(135deg,#5b21b6,#7c3aed); padding: 1rem; color: #fff; }
.challenge-winner small, .challenge-winner strong, .challenge-winner span { display: block; }
.challenge-winner small { font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.challenge-winner strong { margin-top: .25rem; font-size: 1.15rem; font-weight: 900; }
.challenge-winner span { margin-top: .15rem; color: #ddd6fe; font-size: .7rem; font-weight: 800; }
.challenge-leaderboard { display: grid; gap: .65rem; margin-top: 1rem; text-align: left; }
.challenge-leader-row { border-radius: .9rem; background: #fff; padding: .7rem .75rem; }
.challenge-leader-row summary { cursor: pointer; list-style: none; }
.challenge-leader-row summary::-webkit-details-marker { display: none; }
.challenge-leader-name { display: flex; align-items: center; gap: .48rem; }
.challenge-leader-name strong { min-width: 0; flex: 1; overflow: hidden; color: #4b5563; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.challenge-leader-name span { color: #7c3aed; font-size: .68rem; font-weight: 900; white-space: nowrap; }
.challenge-leader-name span i, .challenge-member-habits b i { margin-left: .12rem; color: #e3a008; filter: drop-shadow(0 0 3px rgba(250,204,21,.38)); }
.challenge-leader-name > i { color: #a78bfa; font-size: .58rem; transition: transform .2s ease; }
.challenge-leader-name em { border-radius: 999px; background: #fff4c2; padding: .18rem .38rem; color: #a16207; font-size: .52rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.challenge-leader-row[open] .challenge-leader-name > i { transform: rotate(180deg); }
.challenge-leader-bar { height: .48rem; margin-top: .4rem; overflow: hidden; border-radius: 999px; background: #ede9fe; }
.challenge-leader-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b5cf6,#c084fc); transition: width .35s ease; }
.challenge-leader-row.is-leading { outline: 2px solid #c4b5fd; }
.challenge-leader-row.is-streaking { border: 1px solid #f4cf5d; background: linear-gradient(135deg,#fffdf5,#fff8d7); box-shadow: 0 0 18px rgba(234,179,8,.24); }
.challenge-leader-row.is-streaking .challenge-leader-bar { background: #fef3c7; }
.challenge-leader-row.is-streaking .challenge-leader-bar span { background: linear-gradient(90deg,#d79a08,#facc15); box-shadow: 0 0 10px rgba(250,204,21,.7); }
.challenge-member-habits { display: grid; gap: .42rem; margin-top: .7rem; border-top: 1px solid #eee9f7; padding-top: .65rem; }
.challenge-my-note { display: flex; width: calc(100% - 1.3rem); align-items: center; justify-content: center; gap: .35rem; margin: .65rem .65rem 0; border-radius: .65rem; background: #ede9fe; padding: .5rem; color: #6d28d9; font-size: .62rem; font-weight: 900; }
.challenge-member-actions { display: flex; gap: .45rem; margin: .65rem .65rem 0; }
.challenge-member-actions:empty { display: none; }
.challenge-member-actions .challenge-my-note { width: auto; flex: 1; margin: 0; }
.challenge-remove-member { display: flex; flex: 1; align-items: center; justify-content: center; gap: .35rem; border: 1px solid #fecdd3; border-radius: .65rem; background: #fff1f2; padding: .5rem; color: #be123c; font-size: .6rem; font-weight: 900; }
.challenge-update-date { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; border-radius: .75rem; background: #f5f3ff; padding: .65rem .8rem; color: #6d28d9; font-size: .72rem; font-weight: 900; }
.challenge-member-habits > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: .48rem; border-radius: .7rem; background: #f8f7fc; padding: .52rem; }
.challenge-member-habits > div > span { display: grid; width: 1.6rem; height: 1.6rem; grid-row: span 2; place-items: center; border-radius: .52rem; background: #ede9fe; color: #7c3aed; font-size: .62rem; }
.challenge-member-habits strong { overflow: hidden; color: #4b5563; font-size: .65rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.challenge-member-habits small { color: #94a3b8; font-size: .54rem; font-weight: 800; }
.challenge-member-habits b { grid-column: 3; grid-row: 1 / span 2; color: #7c3aed; font-size: .64rem; font-weight: 900; white-space: nowrap; }
.challenge-member-habits > div.is-streaking { background: linear-gradient(135deg,#fff7cf,#fffdf5); box-shadow: inset 0 0 0 1px #f4cf5d, 0 0 12px rgba(250,204,21,.18); }
.challenge-member-habits > div.is-streaking > span { background: #facc15; color: #7c4a03; box-shadow: 0 0 12px rgba(250,204,21,.55); }
.challenge-member-habits > p { margin: 0; color: #94a3b8; font-size: .62rem; font-weight: 800; text-align: center; }
.challenge-update-measure { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.challenge-update-measure label { display: block; margin-top: 1rem; color: #334155; font-size: .78rem; font-weight: 900; }
.challenge-member-timeline { margin-top: .75rem; border-top: 1px solid #eee9f7; padding-top: .7rem; }
.challenge-member-timeline > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.challenge-member-timeline > header small, .challenge-member-timeline > header strong { display: block; }
.challenge-member-timeline > header small { color: #a78bfa; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.challenge-member-timeline > header strong { margin-top: .08rem; color: #4b5563; font-size: .68rem; font-weight: 900; }
.challenge-member-timeline > header button { border-radius: .6rem; background: #ede9fe; padding: .38rem .52rem; color: #6d28d9; font-size: .56rem; font-weight: 900; }
.challenge-timeline-scroll { position: relative; display: flex; gap: .55rem; margin-top: .6rem; overflow-x: auto; padding: .2rem .1rem .55rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #c4b5fd transparent; }
.challenge-timeline-scroll::before { position: absolute; top: .45rem; right: .4rem; left: .4rem; height: 2px; background: #ddd6fe; content: ''; }
.challenge-timeline-scroll article { position: relative; z-index: 1; min-width: 8.6rem; max-width: 10.5rem; flex: 0 0 auto; border: 1px solid #eee9f7; border-radius: .8rem; background: #fff; padding: .7rem; padding-top: 1rem; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(76,55,110,.05); }
.challenge-timeline-scroll article > i { position: absolute; top: -.05rem; left: .75rem; width: .72rem; height: .72rem; border: 2px solid #fff; border-radius: 999px; background: #8b5cf6; box-shadow: 0 0 0 2px #c4b5fd; }
.challenge-timeline-scroll article small, .challenge-timeline-scroll article strong { display: block; }
.challenge-timeline-scroll article small { color: #9ca3af; font-size: .48rem; font-weight: 900; }
.challenge-timeline-scroll article strong { margin-top: .22rem; color: #6d28d9; font-size: .82rem; font-weight: 950; }
.challenge-timeline-scroll article p { margin-top: .3rem; color: #64748b; font-size: .58rem; font-weight: 750; line-height: 1.35; }
.challenge-timeline-empty { position: relative; z-index: 1; width: 100%; border-radius: .7rem; background: #f8f7fc; padding: .7rem; color: #94a3b8; font-size: .58rem; font-weight: 800; text-align: center; }
.host-habit-copy-list { display: grid; gap: .55rem; margin-top: 1rem; }
.host-habit-copy-list > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; border: 1px solid #ece7f6; border-radius: .9rem; background: #faf8ff; padding: .7rem; text-align: left; }
.host-habit-copy-list > div > span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .72rem; background: #ede9fe; font-size: 1rem; }
.host-habit-copy-list strong, .host-habit-copy-list small { display: block; }
.host-habit-copy-list strong { overflow: hidden; color: #374151; font-size: .75rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.host-habit-copy-list small { margin-top: .12rem; color: #8b7ca5; font-size: .56rem; font-weight: 800; }
.host-habit-copy-list > div > i { color: #7c3aed; font-size: .72rem; }
@media (min-width: 640px) { .room-spaces-layer, .shared-room-create-layer { align-items: center; padding: 1rem; } .room-spaces-card, .shared-room-create-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; }
#app-update-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; color: #17231d; padding: 1.5rem; text-align: center; }
#app-update-overlay section { width: auto; }
.app-update-icon { display: grid; width: 4.8rem; height: 4.8rem; place-items: center; border-radius: 1.6rem; background: #167a54; color: #fff; font-size: 2rem; box-shadow: 0 12px 28px rgba(22,122,84,.18); animation: appIconPulse 1.1s ease-in-out infinite alternate; }
@keyframes appIconPulse { to { transform: scale(1.07); box-shadow: 0 16px 36px rgba(22,122,84,.25); } }
.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(4, 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; flex: 1 1 auto; align-items: center; gap: .75rem; overflow: hidden; }
.app-header > div > div { min-width: 0; }
.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; flex: 0 0 auto; 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-header aside .room-heart-button { background: #fff0f4; color: #df4771; }
.app-header.is-shared-room > div > span { background: #fff0f4; }
.app-main { padding: 0 1.15rem; }

/* Avances: mapa de categorías y comparación diaria */
.progress-game-hero { margin-top: 1.35rem; border-radius: 1.6rem; background: linear-gradient(135deg, #182c24, #285943); padding: 1.25rem; color: #fff; }
.progress-game-hero > p { color: #a7f3d0; font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.progress-game-hero h2 { margin-top: .15rem; font-size: 1.55rem; font-weight: 950; }
.progress-game-hero span { display: block; margin-top: .2rem; color: rgba(255,255,255,.72); font-size: .875rem; font-weight: 700; }
.skill-radar-card, .recent-progress, .skill-levels { margin-top: 1rem; border: 1px solid #e7eee9; border-radius: 1.6rem; background: #fff; padding: 1rem; box-shadow: 0 8px 24px rgba(22,62,42,.045); }
.skill-radar-card > header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.skill-radar-card > header p { color: #168457; font-size: .75rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.skill-radar-card > header h2, .recent-progress > header h2, .skill-levels > header h2 { margin-top: .1rem; font-size: 1.05rem; font-weight: 950; }
.skill-radar-card > header > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .85rem; background: #eefbf4; color: #168457; }
.skill-radar { display: block; width: 100%; max-width: 20rem; margin: .25rem auto -.2rem; overflow: visible; }
.skill-radar-grid polygon { fill: none; stroke: #dce8e1; stroke-width: 1; }
.skill-radar-grid line { stroke: #e7eee9; stroke-width: 1; }
.skill-radar-value { fill: rgba(32,191,130,.28); stroke: #149866; stroke-width: 2.2; stroke-linejoin: round; }
.skill-radar-points circle { fill: #fff; stroke: #149866; stroke-width: 2.5; }
.skill-radar-labels text { fill: #516258; font-family: inherit; font-size: 10px; font-weight: 900; }
.skill-radar-note { display: flex; align-items: center; justify-content: center; gap: .35rem; color: #819087; font-size: .75rem; font-weight: 750; text-align: center; }
.skill-radar-note i { color: #20a975; }
.recent-progress > header p, .skill-levels > header p { margin-top: .1rem; color: #94a3b8; font-size: .75rem; font-weight: 750; }
.recent-progress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .85rem; }
.recent-day { position: relative; min-width: 0; border: 1px solid #e8efeb; border-radius: 1rem; background: #f8fbf9; padding: .7rem .6rem; text-align: center; }
.recent-day.is-today { border-color: #aee6cd; background: #edfaf4; }
.recent-day > span, .recent-day > small, .recent-day > strong, .recent-day > p, .recent-day > b { display: block; }
.recent-day > span { color: #5f6f66; font-size: .75rem; font-weight: 900; }
.recent-day > small { margin-top: .05rem; color: #a1aaa5; font-size: .7rem; font-weight: 800; }
.recent-day > strong { margin-top: .45rem; color: #17231d; font-size: 1.2rem; font-weight: 950; }
.recent-day > p { color: #87948c; font-size: .7rem; font-weight: 800; }
.recent-day > div { height: .28rem; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: #dfe9e3; }
.recent-day > div > span { display: block; height: 100%; border-radius: inherit; background: #20b87c; }
.recent-day > b { margin-top: .3rem; color: #168457; font-size: .72rem; font-weight: 950; }
.skill-levels { margin-bottom: .5rem; }
.skill-levels > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; margin-top: .9rem; }
.skill-level-card { display: flex; min-width: 0; min-height: 8rem; flex-direction: column; align-items: center; border-radius: 1rem; background: #f7faf8; padding: .75rem .7rem; text-align: center; }
.skill-level-card > span { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: .7rem; background: #e7f7ef; color: #15815a; font-size: .82rem; }
.skill-level-card > div { width: 100%; min-width: 0; }
.skill-level-card h3 { min-height: 1.8rem; margin-top: .45rem; color: #17231d; font-size: .78rem; font-weight: 950; line-height: 1.15; }
.skill-level-card p { margin-top: .15rem; overflow: visible; color: #64748b; font-size: .7rem; font-weight: 800; line-height: 1.25; text-overflow: clip; white-space: normal; }
.skill-level-card > div > p:last-child { display: none; }
.skill-level-card div > div { height: .32rem; margin-top: .55rem; overflow: hidden; border-radius: 999px; background: #dfe9e3; }
.skill-level-card div > div > span { display: block; height: 100%; border-radius: inherit; background: #20b87c; }
.skill-level-card > strong { display: none; }
.skill-level-card > strong small, .map-level small { display: block; margin-bottom: .3rem; font-size: .55rem; font-weight: 950; letter-spacing: .08em; }
.map-level { min-width: 4.4rem; color: #6d28d9; font-size: 2rem; font-weight: 950; line-height: .9; text-align: center; }
.skill-radar-card, .skill-levels { --level-accent: #6d28d9; --radar-fill: rgba(32,191,130,.28); --radar-stroke: #149866; }
.skill-radar-card.level-tone-1, .skill-levels.level-tone-1 { --level-accent: #2563eb; --radar-fill: rgba(59,130,246,.25); --radar-stroke: #2563eb; }
.skill-radar-card.level-tone-2, .skill-levels.level-tone-2 { --level-accent: #0f766e; --radar-fill: rgba(20,184,166,.25); --radar-stroke: #0f766e; }
.skill-radar-card.level-tone-3, .skill-levels.level-tone-3 { --level-accent: #b45309; --radar-fill: rgba(245,158,11,.24); --radar-stroke: #b45309; }
.skill-radar-card.level-tone-4, .skill-levels.level-tone-4 { --level-accent: #c2410c; --radar-fill: rgba(249,115,22,.24); --radar-stroke: #c2410c; }
.skill-radar-card.level-tone-5, .skill-levels.level-tone-5 { --level-accent: #be123c; --radar-fill: rgba(244,63,94,.22); --radar-stroke: #be123c; }
.skill-radar-card .skill-radar-value { fill: var(--radar-fill); stroke: var(--radar-stroke); }
.skill-radar-card .skill-radar-points circle.trend-steady { stroke: var(--radar-stroke); }
.skill-radar-card .map-level, .skill-levels .skill-level-card > strong { color: var(--level-accent); }
.skill-levels .skill-level-card div > div > span { background: #20b87c; }
.skill-level-card > strong small { display: block; margin-bottom: .2rem; font-size: .55rem; letter-spacing: .02em; }
.skill-level-card.is-complete { border: 1px solid #9ed7b8; background: #f0fbf5; }
@media (max-width: 370px) {
  .app-bottom-nav button { font-size: .61rem; }
  .skill-levels > div { grid-template-columns: 1fr; }
}
.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 #e8efeb; border-radius: 1.7rem; background: #fff; padding: 1.05rem; box-shadow: 0 12px 30px rgba(22,62,42,.07); }
.calendar-card > header { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.calendar-card > header h2 { font-size: 1.25rem; font-weight: 950; letter-spacing: -.025em; }
.calendar-card > header p { margin-top: .1rem; color: #8b96ad; font-size: .7rem; font-weight: 800; }
.calendar-card > header > div:last-child { display: flex; flex-shrink: 0; gap: .35rem; }
.calendar-card > header button { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .8rem; background: #ebf8f2; color: #087453; font-size: .85rem; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 1rem; color: #7f8aa1; text-align: center; font-size: .65rem; font-weight: 900; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .32rem; margin-top: .85rem; }
.calendar-weekdays + .calendar-grid { margin-top: .4rem; }
.calendar-grid .calendar-day, .calendar-day-spacer { min-width: 0; min-height: 4.55rem; border-radius: .8rem; }
.calendar-grid .calendar-day { display: grid; grid-template-rows: auto auto 1fr auto; place-items: center; border: 1px solid transparent; background: #f5f7f9; padding: .38rem .08rem .42rem; color: #102332; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.calendar-grid .calendar-day:active { transform: scale(.97); }
.calendar-grid .calendar-day > .calendar-weekday { display: block; color: #748096; font-size: .58rem; font-weight: 900; }
.calendar-grid .calendar-day > strong { display: block; width: auto; height: auto; margin: .05rem 0 .22rem; background: none; color: inherit; font-size: .77rem; font-weight: 950; box-shadow: none; }
.calendar-grid .calendar-day > i { display: grid; width: 1.5rem; height: 1.5rem; margin: 0; place-items: center; border-radius: 999px; font-size: .58rem; }
.calendar-grid .calendar-day > small { margin-top: .22rem; color: #748096; font-size: .56rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.calendar-grid .calendar-day.is-complete { background: #eefaf5; }
.calendar-grid .calendar-day.is-complete > i { background: linear-gradient(145deg,#35d18a,#059669); color: #fff; }
.calendar-grid .calendar-day.is-complete > small { color: #087a55; }
.calendar-grid .calendar-day.is-progress { background: #eef5f7; }
.calendar-grid .calendar-day.is-progress > i { background: linear-gradient(145deg,#7fa8b5,#527b89); color: #fff; }
.calendar-grid .calendar-day.is-progress > small { color: #52717d; }
.calendar-grid .calendar-day.is-partial { background: #fff9ed; }
.calendar-grid .calendar-day.is-partial > i { background: linear-gradient(145deg,#ffc44d,#f59e0b); color: #fff; }
.calendar-grid .calendar-day.is-partial > small { color: #d97706; }
.calendar-grid .calendar-day.is-missed { background: #fff3f2; }
.calendar-grid .calendar-day.is-missed > i { background: linear-gradient(145deg,#ff8b82,#ef4444); color: #fff; }
.calendar-grid .calendar-day.is-missed > small { color: #ef4444; }
.calendar-grid .calendar-day.is-pending > i { background: #e3e8ee; color: #aeb8c6; }
.calendar-grid .calendar-day.is-selected { border-color: #087a55; box-shadow: 0 0 0 2px rgba(8,122,85,.12); }
.calendar-grid .calendar-day.is-today > strong { text-decoration: underline; text-decoration-color: #087a55; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.calendar-grid .calendar-day.is-today.is-complete { background: linear-gradient(145deg,#11a66f,#087a55); color: #fff; box-shadow: 0 8px 18px rgba(8,122,85,.2); }
.calendar-grid .calendar-day.is-today.is-complete > .calendar-weekday, .calendar-grid .calendar-day.is-today.is-complete > small, .calendar-grid .calendar-day.is-today.is-complete > strong { background: none; color: #fff; box-shadow: none; text-decoration-color: #fff; }
.calendar-grid .calendar-day.is-today.is-complete > i { background: #fff; color: #087a55; }
.calendar-card.is-expanded .calendar-day > .calendar-weekday { display: none; }
.calendar-card.is-expanded .calendar-day { grid-template-rows: auto 1fr auto; min-height: 4.25rem; }
.calendar-card.is-expanded .calendar-day > strong { margin-top: 0; justify-self: start; padding-left: .36rem; }
.calendar-day-spacer { background: linear-gradient(145deg,#fafcfc,#f5f8f7); }
.calendar-summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; margin-top: .9rem; border-radius: 1.15rem; background: linear-gradient(135deg,#f1faf6,#f8fbfa); padding: .8rem; }
.calendar-progress-ring { position: relative; display: grid; width: 3.55rem; height: 3.55rem; place-items: center; border-radius: 999px; background: conic-gradient(#10b981 var(--calendar-progress),#dceee6 0); }
.calendar-progress-ring::after { position: absolute; inset: .38rem; border-radius: inherit; background: #f8fcfa; content: ''; }
.calendar-progress-ring strong { z-index: 1; color: #102332; font-size: .86rem; font-weight: 950; }
.calendar-summary-copy { min-width: 0; }
.calendar-summary-copy > span { display: block; color: #758198; font-size: .62rem; font-weight: 900; }
.calendar-summary-copy > strong { display: block; margin-top: .12rem; color: #102332; font-size: .76rem; font-weight: 950; line-height: 1.2; }
.calendar-summary-copy > small { display: block; margin-top: .18rem; color: #8b96aa; font-size: .55rem; font-weight: 800; }
.calendar-streak { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .38rem; border-left: 1px solid #d7eae1; padding-left: .7rem; }
.calendar-streak > i { display: grid; width: 2rem; height: 2rem; grid-row: span 2; place-items: center; border-radius: 999px; background: #dcf6e9; color: #078157; font-size: .85rem; }
.calendar-streak > span { color: #758198; font-size: .53rem; font-weight: 850; white-space: nowrap; }
.calendar-streak > strong { color: #078157; font-size: .78rem; font-weight: 950; white-space: nowrap; }
.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-card.is-locked, .independent-habit.is-locked { border-color: #e5eae7; background: #f7f9f8; box-shadow: none; }
.day-routine-card.is-resting, .independent-habit.is-resting { border-color: #d9c8a2; background: linear-gradient(145deg,#fffaf0,#fff); box-shadow: inset 4px 0 #c18a35, 0 6px 18px rgba(131,91,31,.07); opacity: 1; }
.day-routine-card.is-locked .day-routine-icon, .independent-habit.is-locked > span { filter: grayscale(.75); opacity: .6; }
.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; }
.day-routine-card.is-resting .day-routine-progress span { width: 100% !important; background: #d5b06d; }
.routine-rest-button { width: calc(100% - 1.4rem); margin: 0 .7rem .55rem; border-radius: .7rem; background: #fff6df; padding: .48rem .65rem; color: #95631d; font-size: .61rem; font-weight: 900; }
.routine-rest-button.is-resting { background: #eaf8f1; color: #167a54; }
.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.is-locked { background: #f5f7f6; color: #7e8b84; }
.routine-activity.is-group-linked { border: 1px solid #c4b5fd; background: linear-gradient(135deg,#f4f0ff,#faf8ff); box-shadow: inset 4px 0 #7c3aed, 0 5px 15px rgba(109,40,217,.08); }
.routine-activity.is-group-linked .routine-activity-type { background: #ddd6fe; color: #5b21b6; }
.routine-activity.is-resting { border-color: transparent; background: #fff8e8; box-shadow: none; color: #7d6847; }
.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.has-progress { display: flex; width: 2.25rem; height: 2.25rem; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; line-height: 1; }
.activity-check.has-progress i { font-size: .55rem; }
.activity-check.has-progress b { font-size: .58rem; font-weight: 900; }
.activity-check.is-done { border-color: #fde68a; background: #fef3c7; color: #d97706; }
.activity-check.is-readonly { border-color: #dce3df; background: #edf1ef; color: #98a49d; cursor: not-allowed; }
.habit-row-actions { display: flex; align-items: center; gap: .35rem; }
.habit-edit-button { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid #e5e7eb; border-radius: .62rem; background: #fff; color: #64748b; font-size: .62rem; }
.habit-edit-button:active { background: #f3efff; color: #6d28d9; }
.habit-rest-button, .resting-badge { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid #ead7ac; border-radius: .62rem; background: #fff8e8; color: #a06b22; font-size: .62rem; }
.habit-rest-button.is-resting { border-color: #bde4d1; background: #eaf8f1; color: #168457; }
.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.is-group-linked { border-color: #b8a5f4; background: linear-gradient(145deg,#f2edff,#fff); box-shadow: inset 4px 0 #7c3aed, 0 8px 22px rgba(109,40,217,.1); }
.independent-habit.is-group-linked > span { background: #ddd6fe; color: #5b21b6; }
.independent-habit.is-resting > span { background: #f7e5bb; color: #8a5b1e; filter: none; opacity: 1; }
.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; }
.group-linked-label { display: inline-flex; align-items: center; gap: .18rem; border-radius: 999px; background: #ddd6fe; padding: .12rem .38rem; color: #5b21b6; font-weight: 900; }
.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; }
.habit-editor-layer { overflow-y: auto; padding-top: max(1rem, env(safe-area-inset-top)); }
.habit-editor { width: min(100%, 28rem); max-height: calc(100dvh - max(1rem, env(safe-area-inset-top))); overflow-y: auto; border-radius: 2rem 2rem 0 0; background: #fff; padding: 1.35rem; }
.habit-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.habit-editor > header p { color: #6d28d9; font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.habit-editor > header h2 { margin-top: .1rem; font-size: 1.25rem; font-weight: 900; }
.habit-editor > header button { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; background: #f4f4f5; color: #64748b; }
.habit-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; margin-top: 1.2rem; }
.habit-editor label, .habit-editor legend { color: #334155; font-size: .68rem; font-weight: 900; }
.habit-editor input:not([type="checkbox"]), .habit-editor select { display: block; width: 100%; margin-top: .38rem; border: 1px solid #ede9fe; border-radius: .8rem; background: #faf8ff; padding: .72rem; color: #3b2767; font-size: .75rem; font-weight: 800; outline: none; }
.habit-editor input:focus, .habit-editor select:focus { border-color: #a78bfa; box-shadow: 0 0 0 2px #ede9fe; }
.habit-editor-name { grid-column: 1 / -1; }
.habit-editor .habit-editor-emoji { text-align: center; font-size: 1rem; }
.habit-editor-days { display: flex; justify-content: space-between; gap: .25rem; margin-top: .9rem; }
.habit-editor-days[hidden] { display: none; }
.habit-editor-days legend { width: 100%; margin-bottom: .45rem; }
.habit-editor-days label { flex: 1; }
.habit-editor-days input { position: absolute; opacity: 0; pointer-events: none; }
.habit-editor-days span { display: grid; height: 2rem; place-items: center; border-radius: .65rem; background: #f5f3ff; color: #8b7aaa; font-size: .64rem; }
.habit-editor-days input:checked + span { background: #7c3aed; color: #fff; }
.habit-editor-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; border-radius: 1rem; background: #f8fafc; padding: .85rem; }
.habit-editor-toggle strong, .habit-editor-toggle small { display: block; }
.habit-editor-toggle small { margin-top: .1rem; color: #94a3b8; font-size: .58rem; }
.habit-editor-toggle input { width: 1.3rem; height: 1.3rem; accent-color: #7c3aed; }
.habit-editor-reminders { margin-top: .75rem; border-radius: 1rem; background: #faf8ff; padding: .8rem; }
.habit-editor-reminders[hidden] { display: none; }
.habit-editor-reminders small { display: block; margin-top: .45rem; color: #94a3b8; font-size: .56rem; font-weight: 700; }
.habit-editor-error { min-height: .8rem; margin-top: .5rem; color: #e11d48; font-size: .62rem; font-weight: 800; text-align: center; }
.habit-editor-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: .65rem; margin-top: .7rem; }
.habit-editor-actions button { border-radius: .9rem; padding: .8rem .65rem; font-size: .7rem; font-weight: 900; }
.habit-editor-actions button:first-child { background: #fff1f2; color: #e11d48; }
.habit-editor-actions button:last-child { background: #7c3aed; color: #fff; }
@media (min-width: 640px) { .habit-editor { margin: auto; border-radius: 2rem; } }
.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; }
.routine-block-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: 1rem; }
.routine-block-picker legend { grid-column: 1 / -1; margin-bottom: .1rem; font-size: .72rem; font-weight: 900; }
.routine-block-picker label { cursor: pointer; }
.routine-block-picker > label > input { position: absolute; opacity: 0; pointer-events: none; }
.routine-block-picker > label > span { display: grid; min-height: 5rem; place-items: center; align-content: center; gap: .12rem; border: 1px solid #e6ede9; border-radius: .9rem; background: #fafcfb; text-align: center; }
.routine-block-picker b { font-size: 1.15rem; }
.routine-block-picker strong { font-size: .66rem; }
.routine-block-picker small { color: #91a098; font-size: .5rem; font-weight: 800; }
.routine-block-picker input:checked + span { border-color: #77cda4; background: #e7f8ef; color: #126e4a; box-shadow: 0 4px 12px rgba(22, 132, 87, .08); }
.trophy-preview { position: relative; margin-top: 1rem; overflow: hidden; border: 1px solid #f5df9d; border-radius: 1.25rem; background: linear-gradient(135deg, #fffaf0, #fff4cc); padding: .9rem; }
.trophy-preview::after { content: '✦'; position: absolute; top: -.6rem; right: .35rem; color: rgba(217, 154, 20, .16); font-size: 4.6rem; }
.trophy-preview > div:first-child { display: flex; align-items: center; gap: .65rem; }
.trophy-preview > div:first-child > span { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .8rem; background: #fff; font-size: 1.25rem; }
.trophy-preview p { color: #9a6812; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trophy-preview strong { display: block; margin-top: .08rem; font-size: .78rem; }
.trophy-preview-progress { height: .28rem; margin-top: .7rem; overflow: hidden; border-radius: 999px; background: rgba(180, 126, 17, .14); }
.trophy-preview-progress span { display: block; height: 100%; border-radius: inherit; background: #e2a51e; }
.trophy-next-row { display: flex; gap: .35rem; margin-top: .6rem; }
.trophy-next-row > span { display: flex; align-items: center; gap: .22rem; border-radius: .55rem; background: rgba(255,255,255,.72); padding: .25rem .42rem; }
.trophy-next-row b { font-size: .75rem; }
.trophy-next-row small { color: #9a6812; font-size: .52rem; font-weight: 900; }
.trophy-preview > button { position: absolute; right: .8rem; bottom: .7rem; z-index: 1; color: #9a6812; font-size: .6rem; font-weight: 900; }
.trophy-hero { position: relative; border-radius: 1.5rem; background: linear-gradient(145deg, #fff7d6, #f8e3a0); padding: 1.35rem 1rem 1rem; text-align: center; }
.trophy-hero > button { position: absolute; top: .8rem; left: .8rem; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: rgba(255,255,255,.7); color: #8d6517; }
.trophy-hero > span { display: block; font-size: 2.4rem; animation: trophyFloat 2.5s ease-in-out infinite; }
.trophy-hero > p { margin-top: .25rem; color: #9a6812; font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.trophy-hero h2 { font-size: 1.25rem; font-weight: 900; }
.trophy-hero > small { color: #8a7345; font-size: .64rem; font-weight: 800; }
.trophy-hero > div { display: inline-flex; align-items: baseline; gap: .35rem; margin-top: .65rem; border-radius: 999px; background: rgba(255,255,255,.66); padding: .4rem .75rem; }
.trophy-hero > div strong { color: #a66e08; font-size: 1rem; }
.trophy-hero > div span { color: #8a7345; font-size: .58rem; font-weight: 900; }
.trophy-next, .trophy-family { margin-top: 1.25rem; }
.trophy-next > header, .trophy-family > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: .6rem; }
.trophy-next h2, .trophy-family h2 { font-size: .9rem; font-weight: 900; }
.trophy-next header p { color: #9aa59f; font-size: .58rem; font-weight: 800; }
.trophy-family header span { border-radius: 999px; background: #f3efff; padding: .22rem .48rem; color: #6d28d9; font-size: .55rem; font-weight: 900; }
.trophy-next > div, .trophy-family > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
.trophy-card { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .55rem; border: 1px solid #edf0ee; border-radius: .9rem; background: #fff; padding: .65rem; }
.trophy-card > span { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .7rem; background: #fff5d6; font-size: 1.05rem; }
.trophy-card.is-locked { background: #f8faf9; opacity: .72; }
.trophy-card.is-locked > span { background: #edf1ef; color: #a3aca7; font-size: .7rem; }
.trophy-card small { display: block; overflow: hidden; color: #a87a20; font-size: .45rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.trophy-card h3 { overflow: hidden; margin-top: .06rem; font-size: .65rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.trophy-card p { color: #95a099; font-size: .49rem; font-weight: 800; }
.trophy-card div > div { height: .2rem; margin-top: .3rem; overflow: hidden; border-radius: 999px; background: #edf1ef; }
.trophy-card div > div span { display: block; height: 100%; border-radius: inherit; background: #e2a51e; }
@keyframes trophyFloat { 50% { transform: translateY(-4px) rotate(4deg); } }
.trophy-unlock-toast { position: fixed; right: 1rem; bottom: 5.4rem; left: 1rem; z-index: 70; display: grid; max-width: 25rem; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .7rem; margin: auto; border: 1px solid #f2d27a; border-radius: 1.1rem; background: #fff9df; padding: .75rem .85rem; color: #26342c; text-align: left; box-shadow: 0 12px 34px rgba(109, 79, 10, .2); animation: trophyToastIn .35s ease both; }
.trophy-unlock-toast > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .8rem; background: #fff; font-size: 1.35rem; }
.trophy-unlock-toast small, .trophy-unlock-toast strong, .trophy-unlock-toast p { display: block; }
.trophy-unlock-toast small { color: #a56e0a; font-size: .54rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trophy-unlock-toast strong { margin-top: .05rem; font-size: .78rem; font-weight: 900; }
.trophy-unlock-toast p { color: #8d7a50; font-size: .54rem; font-weight: 800; }
.trophy-unlock-toast > i { color: #b47d15; font-size: .7rem; }
@keyframes trophyToastIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.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); } }
html, body, #app, #app * { touch-action: pan-x pan-y; }
input, select, textarea { font-size: max(16px, 1em); }

.habit-result { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .45rem .65rem; border-radius: .8rem; background: #edf8f2; color: #176644; font-size: .8rem; font-weight: 800; border: 1px solid #c9e3d4; }
.habit-result.is-improved { background: #eef4ff; color: #315788; border-color: #cddcf0; }
.habit-result.is-setback { background: #fff3e8; color: #885017; border-color: #eed4bb; }
.habit-outcome-layer { align-items: flex-end; background: rgba(10,31,22,.55); padding: 1rem; }
.habit-outcome-dialog { width: min(100%,430px); max-height: 90dvh; overflow-y: auto; margin: auto auto 0; padding: 1.25rem; border: 0; border-radius: 1.5rem; color: #173226; background: white; box-shadow: 0 24px 60px rgba(12,45,31,.25); }
.habit-outcome-dialog > header { display: flex; align-items: center; justify-content: space-between; }
.habit-outcome-dialog > header > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; background: #eaf8f1; font-size: 1.35rem; }
.habit-outcome-dialog [data-close] { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .85rem; background: #f1f5f3; color: #718078; }
.habit-outcome-dialog > p:first-of-type { margin-top: 1rem; color: #12805a; font-size: .63rem; font-weight: 950; letter-spacing: .12em; }
.habit-outcome-dialog h2 { margin-top: .18rem; font-size: 1.45rem; font-weight: 950; }
.habit-outcome-dialog h3 { margin-top: .3rem; color: #718078; font-size: .82rem; font-weight: 800; }
.habit-outcome-options { display: grid; gap: .65rem; margin: 1.15rem 0 .9rem; }
.habit-outcome-options button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid #dcebe3; border-radius: 1rem; text-align: left; background: #f7fbf9; }
.habit-outcome-options button > i:first-child { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .8rem; background: #e5f6ee; color: #078157; }
.habit-outcome-options button[data-outcome="improved"] > i:first-child { background: #fff3d8; color: #d47b00; }
.habit-outcome-options button[data-outcome="setback"] > i:first-child { background: #fff0ed; color: #db554b; }
.habit-outcome-options button > span, .habit-outcome-options strong, .habit-outcome-options small { display: block; }
.habit-outcome-options strong { font-size: .85rem; font-weight: 950; }
.habit-outcome-options small { margin-top: .1rem; color: #86928c; font-size: .63rem; font-weight: 750; }
.habit-outcome-options button > i:last-child { color: #aeb9b3; font-size: .65rem; }
.habit-outcome-options button:disabled { opacity: .55; }
.habit-outcome-help { display: block; color: #8a9690; font-size: .64rem; font-weight: 750; line-height: 1.4; }
.habit-outcome-dialog [data-outcome-error] { min-height: 1rem; margin-top: .5rem; color: #d94841; font-size: .7rem; font-weight: 850; }
.habit-outcome-toast { position: fixed; z-index: 90; right: 1rem; bottom: 5.6rem; left: 1rem; display: flex; max-width: 24rem; align-items: center; gap: .7rem; margin: auto; border-radius: 1rem; background: #123c2b; padding: .75rem .9rem; color: white; box-shadow: 0 14px 35px rgba(12,45,31,.25); }
.habit-outcome-toast > i { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: #21a876; }
.habit-outcome-toast small, .habit-outcome-toast strong { display: block; }
.habit-outcome-toast small { color: #b9d8ca; font-size: .58rem; font-weight: 800; }
.habit-outcome-toast strong { font-size: .78rem; font-weight: 950; }
.habit-outcome-dialog button:focus-visible, .habit-result:focus-visible { outline: 3px solid #21794e; outline-offset: 3px; }
.skill-radar-note { line-height: 1.5; margin-top: .65rem; }

.development-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .8rem; font-size: .75rem; font-weight: 750; margin: .8rem 0; }
.trend-steady { color: #168457; }
.trend-down { color: #ad560b; }
.trend-declining { color: #bb303b; }
.skill-radar-points circle.trend-down { stroke: #e58222; fill: #fff0dd; }
.skill-radar-points circle.trend-declining { stroke: #cf3546; fill: #ffe1e6; }
.development-details { margin-top: 1rem; border-top: 1px solid #e5eee8; padding-top: .8rem; font-size: .875rem; }
.development-details summary { cursor: pointer; font-weight: 800; color: #38634e; padding: .4rem 0; }
.development-details p { color: #65786d; margin-top: .8rem; line-height: 1.5; }
.development-history > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid #edf2ef; }
.development-history strong { text-align: right; white-space: nowrap; }
.development-history small { display: block; font-size: .75rem; font-weight: 500; }