:root { /* Calanthe orchid theme — serene orchid pinks, leaf-green accents, soft white */ --bg: #f7f2f6; /* soft orchid-white */ --bg2: #efe6ee; /* deeper wash for the page gradient */ --panel: #ffffff; --ink: #3b2f3a; /* deep plum-grey text */ --muted: #8c7e8a; /* mauve-grey */ --line: #ece0ea; /* pale orchid hairline */ --green: #b5569f; /* PRIMARY brand accent = orchid (name kept to avoid churn) */ --green-soft: #f5e7f2; /* soft orchid tint (chips, active states) */ --orchid-deep: #7e3470; /* deep magenta for gradients/hover */ --pos: #5e9b56; /* leaf-green — financial & health positives */ --pos-soft: #e8f0e5; --amber: #bf894a; /* warm gold — warnings */ --rose: #c25d72; /* rose — negatives/alerts */ --blue: #6f86b3; /* periwinkle — info */ --field-bg: #ffffff; /* inputs, chips, secondary surfaces */ --hover: #f3eaf1; /* nav/list hover */ --sidebar-bg: linear-gradient(180deg, #fdfafc, #f7eef5); --subtab-bg: #f0e6ee; --radius: 18px; --shadow: 0 1px 2px rgba(60,30,55,.05), 0 10px 30px rgba(120,52,112,.07); --shadow-lg: 0 16px 48px rgba(120,52,112,.18); --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --serif: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-family: var(--body-font); } /* ===== Theme palettes (set on ) ===== */ html[data-theme="sunset"] { --green:#e0795f; --green-soft:#fbe6dd; --orchid-deep:#b8472f; --bg:#fbf4ef; --bg2:#f6e7dd; --hover:#f6e7df; --sidebar-bg:linear-gradient(180deg,#fefaf7,#f8e9df); --subtab-bg:#f3e3d9; } html[data-theme="matcha"] { --green:#6fa85f; --green-soft:#e8f1e1; --orchid-deep:#4f7d44; --bg:#f4f6ef; --bg2:#e9efe0; --hover:#eaf1e3; --sidebar-bg:linear-gradient(180deg,#fbfdf8,#edf3e4); --subtab-bg:#e7efde; } html[data-theme="midnight"] { --green:#7b6ce0; --green-soft:#eae7fb; --orchid-deep:#4b3fa0; --bg:#f5f4fb; --bg2:#ebe8f7; --hover:#ece9fa; --sidebar-bg:linear-gradient(180deg,#fbfafe,#eeeafb); --subtab-bg:#e9e6f8; } html[data-theme="cottoncandy"] { --green:#ef79a7; --green-soft:#fce6f0; --orchid-deep:#c64f86; --bg:#fbf3f8; --bg2:#f7e8f2; --hover:#f9e8f1; --sidebar-bg:linear-gradient(180deg,#fffafd,#f9e9f3); --subtab-bg:#f6e6ef; } /* ===== Dark mode (orthogonal to palette; keeps the palette accent) ===== */ html[data-mode="dark"] { --bg:#181320; --bg2:#120e18; --panel:#241c2b; --ink:#f0e8ef; --muted:#a99fb0; --line:#362c40; --green-soft:#33263b; --orchid-deep:#e6b0db; --field-bg:#2b2233; --hover:#2c2333; --sidebar-bg:linear-gradient(180deg,#1d1726,#15101d); --subtab-bg:#2a2133; --pos-soft:#22301f; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 16px 48px rgba(0,0,0,.5); } /* ===== Font + text-size preferences ===== */ html[data-font="rounded"] { --body-font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", -apple-system, system-ui, sans-serif; --serif: var(--body-font); } html[data-font="system"] { --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } html[data-size="cozy"] .app, html[data-size="cozy"] .lock { zoom: .92; } html[data-size="large"] .app, html[data-size="large"] .lock { zoom: 1.14; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); background-attachment: fixed; color: var(--ink); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } /* ---------- Lock screen ---------- */ .lock { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: linear-gradient(180deg, rgba(247,242,246,.86), rgba(239,230,238,.92)), url('/orchid-spray.jpg') center/cover no-repeat fixed; } .lock-card { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 40px 34px; border-radius: 24px; box-shadow: var(--shadow-lg); width: 320px; text-align: center; border: 1px solid rgba(255,255,255,.6); } .lock-bloom { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; box-shadow: 0 6px 20px rgba(120,52,112,.22); background: #fff; } .lock-card h1 { margin: 0 0 4px; font-size: 24px; font-family: var(--serif); font-weight: 600; } .lock-card p { margin: 0 0 18px; color: var(--muted); } .lock-card input { width: 100%; padding: 13px; font-size: 18px; text-align: center; letter-spacing: 1px; border: 1px solid var(--line); border-radius: 13px; } .lock-card button { margin-top: 14px; width: 100%; } .lock-error { color: var(--rose); margin-top: 10px; min-height: 18px; font-size: 14px; } /* ---------- Layout ---------- */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 19px; padding: 6px 10px 20px; font-family: var(--serif); letter-spacing: .3px; } .brand-dot { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: url('/orchid-bloom.jpg') center/118% no-repeat, #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--green-soft), 0 4px 12px rgba(120,52,112,.18); } #nav { display: flex; flex-direction: column; gap: 3px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; cursor: pointer; color: var(--ink); font-size: 15px; border: none; background: none; text-align: left; width: 100%; transition: background .15s, color .15s; } .nav-item .ico { font-size: 17px; width: 20px; text-align: center; } .nav-item:hover { background: var(--hover); } .nav-item.active { background: var(--green-soft); color: var(--orchid-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--green); } .sidebar-foot { color: var(--muted); font-size: 11px; padding: 10px; } .main { padding: 34px 40px 90px; max-width: 920px; } .page-head { margin: 0 0 6px; font-size: 30px; font-family: var(--serif); font-weight: 600; letter-spacing: .2px; } .page-sub { color: var(--muted); margin: 0 0 26px; font-size: 15px; } /* ---------- Cards & grid ---------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; } .card h2 { margin: 0 0 14px; font-size: 17px; } .card h2 .count { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 6px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .row { display: flex; align-items: center; gap: 12px; } .spread { justify-content: space-between; } .muted { color: var(--muted); } .empty { color: var(--muted); font-style: italic; padding: 8px 0; } /* ---------- Hero (sober counter) ---------- */ .hero { position: relative; overflow: hidden; color: #fff; border: none; background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green), #000 48%)); box-shadow: var(--shadow-lg); } .hero::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 220px; height: 220px; background: url('/orchid-bloom.jpg') center/contain no-repeat; opacity: .16; mix-blend-mode: screen; pointer-events: none; } .hero h2 { color: rgba(255,255,255,.85); } .hero .big { font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -1px; } .hero .big small { font-size: 18px; font-weight: 500; opacity: .85; } .hero .sub { opacity: .92; margin-top: 6px; } .hero button { background: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(4px); } .hero button:hover { background: rgba(255,255,255,.34); } /* ---------- Buttons & forms ---------- */ button { font: inherit; cursor: pointer; border: none; border-radius: 11px; padding: 10px 17px; background: var(--green); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(120,52,112,.18); transition: filter .15s, transform .05s, box-shadow .15s; } button:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(120,52,112,.26); } button:active { transform: translateY(1px); } button.ghost { background: transparent; color: var(--orchid-deep); border: 1px solid var(--line); box-shadow: none; } button.ghost:hover { background: var(--green-soft); filter: none; box-shadow: none; } button.danger { background: transparent; color: var(--rose); padding: 4px 8px; font-weight: 500; box-shadow: none; } button.danger:hover { filter: none; box-shadow: none; background: #f7ebee; } button.sm { padding: 5px 11px; font-size: 13px; box-shadow: none; } input, select, textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field-bg); color: var(--ink); width: 100%; } textarea { resize: vertical; min-height: 64px; } label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 4px; } .field { margin-bottom: 12px; } .form-row { display: flex; gap: 10px; } .form-row .field { flex: 1; } /* ---------- Lists ---------- */ .list-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .list-item:first-child { border-top: none; } .list-item .body { flex: 1; } .list-item .title { font-weight: 600; } .list-item .meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer; flex-shrink: 0; padding: 0; } .check.on { background: var(--green); border-color: var(--green); position: relative; } .check.on::after { content: "✓"; color: #fff; font-size: 13px; position: absolute; inset: 0; display: grid; place-items: center; } .done .title { text-decoration: line-through; color: var(--muted); } .pill { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 600; text-transform: capitalize; } .pill.recovery { background: #f6e4e8; color: var(--rose); } .pill.baby { background: #e9eef5; color: var(--blue); } .pill.school { background: #f3ecdd; color: var(--amber); } .pill.legal { background: #ece9f2; color: #6c5b8a; } .pill.money { background: var(--pos-soft); color: var(--pos); } /* ---------- Progress ---------- */ .bar { height: 9px; background: var(--line); border-radius: 999px; overflow: hidden; } .bar > span { display: block; height: 100%; background: linear-gradient(90deg, #c569b0, var(--green)); border-radius: 999px; } /* ---------- Goal blocks ---------- */ .goal { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; } .goal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .goal-steps { margin-top: 12px; } .step { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .step .title { font-size: 14px; } /* ---------- Resources ---------- */ .resource { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; } .resource .num { font-size: 20px; font-weight: 700; color: var(--green); } .disclaimer { font-size: 13px; color: var(--muted); background: var(--green-soft); padding: 12px 14px; border-radius: 12px; } /* ---------- Scale inputs ---------- */ .scale { display: flex; gap: 8px; } .scale button { flex: 1; background: var(--field-bg); color: var(--ink); border: 1px solid var(--line); font-weight: 600; } .scale button.sel { background: var(--green); color: #fff; border-color: var(--green); } /* ---------- Modal ---------- */ .modal-bg { position: fixed; inset: 0; background: rgba(58,28,52,.42); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 40; padding: 20px; } .modal { background: var(--panel); border-radius: 22px; padding: 26px; width: 460px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); } .modal h3 { margin: 0 0 16px; font-family: var(--serif); font-weight: 600; font-size: 20px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* ---------- Money ---------- */ .money-summary { display: flex; gap: 24px; flex-wrap: wrap; } .money-summary .stat { flex: 1; min-width: 120px; } .money-summary .stat .n { font-size: 28px; font-weight: 800; font-family: var(--serif); } .money-summary .stat .l { color: var(--muted); font-size: 13px; } .pos { color: var(--pos); } .neg { color: var(--rose); } /* ---------- Money: inner tabs ---------- */ .subtabs { display: inline-flex; background: var(--subtab-bg); border-radius: 13px; padding: 3px; gap: 2px; } .subtab { background: transparent; color: var(--muted); padding: 7px 16px; border-radius: 10px; font-size: 14px; } .subtab.on { background: var(--panel); color: var(--orchid-deep); font-weight: 600; box-shadow: var(--shadow); } /* ---------- Money: budget plan rows ---------- */ .plan-row { padding: 14px 0; border-top: 1px solid var(--line); } .plan-row:first-child { border-top: none; } .bar.over > span { background: var(--rose); } /* ---------- Money: receipts ---------- */ .thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); cursor: pointer; background: var(--field-bg); } .thumb.pdf { display: grid; place-items: center; font-size: 20px; padding: 0; } .lightbox { position: fixed; inset: 0; background: rgba(15,16,15,.85); display: grid; place-items: center; z-index: 70; padding: 24px; cursor: zoom-out; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } /* ---------- Money: approval sign-off ---------- */ .approval { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .sig { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; } .sig.done { background: var(--green-soft); color: var(--green); } .sig.wait { background: #f3ecdd; color: var(--amber); } /* ---------- Nav badge ---------- */ .badge { margin-left: auto; background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; } /* ---------- Chat ---------- */ .chat { height: 58vh; min-height: 320px; overflow-y: auto; padding: 18px 18px 8px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; } .chat-day { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 6px; } .bubble-row { display: flex; margin: 2px 0; } .bubble-row.mine { justify-content: flex-end; } .bubble { max-width: 74%; padding: 9px 13px; border-radius: 18px; box-shadow: var(--shadow); } .bubble-row.theirs .bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .bubble-row.mine .bubble { background: var(--green); color: #fff; border-bottom-right-radius: 5px; } .bubble-body { white-space: pre-wrap; word-break: break-word; line-height: 1.35; } .bubble-time { font-size: 10px; opacity: .65; margin-top: 3px; text-align: right; } .chat-bar { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); align-items: flex-end; } .chat-input { flex: 1; max-height: 120px; min-height: 42px; } .chat-bar button { height: 42px; } /* ---------- Chat: media, reactions, controls ---------- */ .chat-photo { max-width: 220px; max-height: 260px; border-radius: 12px; display: block; cursor: zoom-in; } .bubble { cursor: pointer; } .reacts { align-self: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; font-size: 13px; margin-top: -8px; box-shadow: var(--shadow); } .bubble-row.theirs .reacts { align-self: flex-start; } .icon-btn { background: var(--field-bg); color: var(--ink); border: 1px solid var(--line); padding: 0; width: 38px; height: 42px; font-size: 18px; box-shadow: none; flex-shrink: 0; } .icon-btn.recording { background: var(--rose); color: #fff; border-color: var(--rose); animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .55; } } .emoji-tray { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); } .emoji-btn { background: transparent; border: none; font-size: 22px; padding: 4px 6px; box-shadow: none; cursor: pointer; border-radius: 8px; } .emoji-btn:hover { background: var(--hover); } .emoji-btn.on { background: var(--green-soft); } .react-pop { background: var(--panel); border-radius: 999px; padding: 8px 12px; display: flex; gap: 4px; box-shadow: var(--shadow-lg); } /* ---------- Identity picker ---------- */ .id-pick { display: flex; gap: 12px; margin-top: 16px; } .id-pick button { flex: 1; padding: 18px; font-size: 16px; } /* ---------- Toast ---------- */ .toast-host { position: fixed; top: 18px; right: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 60; } .toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; max-width: 300px; animation: slidein .25s ease; } .toast-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; } .toast-body { font-size: 14px; opacity: .92; } @keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- Routine schedule day-picker ---------- */ .daypick { display: flex; gap: 6px; } .daypick button { flex: 1; padding: 9px 0; background: var(--field-bg); color: var(--muted); border: 1px solid var(--line); border-radius: 9px; font-weight: 600; } .daypick button.on { background: var(--green); color: #fff; border-color: var(--green); } /* ---------- Kudos (Dad's thumbs up) ---------- */ .kudos { margin-top: 6px; } .kudos.got { background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 9px; display: inline-block; } .kudos.give button { background: var(--field-bg); color: var(--amber); border: 1px dashed var(--amber); } .kudos.give button:hover { background: #f3ecdd; } /* ---------- Today: bills-due hint ---------- */ .bills-due { margin-top: 12px; background: #f3ecdd; color: var(--amber); padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } /* ---------- Polish ---------- */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } ::selection { background: var(--green-soft); color: var(--orchid-deep); } .card { transition: box-shadow .2s ease; } .hero .card, .card.hero { } .empty { font-style: normal; } /* ---------- Credit chart ---------- */ .credit-chart { width: 100%; height: auto; display: block; } /* ---------- Today: affirmation + header photo ---------- */ .affirm { background: linear-gradient(135deg, var(--green-soft), var(--bg2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--orchid-deep); line-height: 1.4; } .today-photo { width: 100%; height: 170px; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow); } /* ---------- Personalize controls ---------- */ .swatches { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-shadow: var(--shadow); position: relative; } .swatch.on { border-color: var(--ink); } .swatch.on::after { content: "✓"; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .seg { display: inline-flex; background: var(--subtab-bg); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; } .seg button { background: transparent; color: var(--muted); padding: 8px 15px; border-radius: 10px; font-size: 14px; box-shadow: none; } .seg button.on { background: var(--panel); color: var(--orchid-deep); font-weight: 600; box-shadow: var(--shadow); } .reorder-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); } .reorder-row:first-child { border-top: none; } .reorder-row .ico { font-size: 17px; width: 22px; text-align: center; } .reorder-row .grow { flex: 1; } .reorder-row.off { opacity: .45; } /* ---------- Milestone badges ---------- */ .badges { display: flex; gap: 10px; flex-wrap: wrap; } .mbadge { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; text-align: center; } .mbadge .disc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--green-soft); border: 2px solid var(--green); } .mbadge.locked .disc { background: var(--line); border-color: var(--line); filter: grayscale(1); opacity: .5; } .mbadge .lbl { font-size: 11px; color: var(--muted); font-weight: 600; } /* ---------- Mood faces ---------- */ .moodpick { display: flex; gap: 8px; justify-content: space-between; } .moodpick button { flex: 1; background: var(--field-bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 0; font-size: 26px; } .moodpick button.sel { background: var(--green-soft); border-color: var(--green); transform: scale(1.06); } /* ---------- "From Dad" attribution badge ---------- */ .from-dad { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--green-soft); color: var(--orchid-deep); white-space: nowrap; } /* ---------- Weekly kudos ---------- */ .weekly-kudos { background: linear-gradient(135deg, var(--green-soft), var(--bg2)); border: 1px solid var(--green); text-align: center; } .weekly-kudos h2 { color: var(--orchid-deep); } .received-kudos { background: linear-gradient(135deg, var(--green-soft), var(--bg2)); border: 1px solid var(--green); border-radius: 14px; padding: 16px; text-align: center; } .rk-from { font-weight: 700; color: var(--orchid-deep); margin: 4px 0; } /* ---------- Coping toolkit ---------- */ .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tool-grid button { padding: 16px; font-size: 15px; } .breathe-circle { width: 160px; height: 160px; border-radius: 50%; margin: 20px auto; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 18px; background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green), #000 40%)); transform: scale(.72); transition: transform 4s ease; } .breathe-circle[data-phase="in"] { transform: scale(1.12); transition-duration: 4s; } .breathe-circle[data-phase="hold"] { transition-duration: .3s; } .breathe-circle[data-phase="out"] { transform: scale(.72); transition-duration: 6s; } .halt-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; } .halt-row:first-child { border-top: none; } .halt-row input { width: auto; margin-top: 3px; } /* ---------- My reasons ---------- */ .reason-card { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); } .reason-card:first-child { border-top: none; } .reason-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .reason-card .grow { flex: 1; line-height: 1.4; } /* ---------- Memories / inspo grid ---------- */ .mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .mem-tile { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--field-bg); } .mem-tile img { width: 100%; height: 130px; object-fit: cover; display: block; cursor: zoom-in; } .mem-noimg { height: 130px; display: grid; place-items: center; font-size: 34px; } .mem-cap { padding: 8px 10px 2px; font-weight: 600; font-size: 14px; } .mem-meta { padding: 2px 10px 8px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; align-items: center; } /* ---------- Flashcards ---------- */ .flashcard { flex: 1; min-height: 84px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; background: var(--field-bg); display: grid; align-content: center; } .flashcard .fc-back { display: none; color: var(--orchid-deep); white-space: pre-wrap; } .flashcard.flipped .fc-front { display: none; } .flashcard.flipped .fc-back { display: block; } .fc-front { font-weight: 600; } /* ---------- Confetti ---------- */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; } .confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .9; } } /* ---------- User chip + Log out (top-right) ---------- */ #userchip { position: fixed; top: 16px; right: 18px; z-index: 25; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 11px; box-shadow: var(--shadow); } .uc-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: url('/orchid-bloom.jpg') center/120% no-repeat, #fff; box-shadow: 0 0 0 2px var(--green-soft); } .uc-name { font-size: 13px; font-weight: 600; } .uc-out { font-size: 12px; padding: 4px 11px; background: var(--green-soft); color: var(--orchid-deep); box-shadow: none; border-radius: 999px; } .uc-out:hover { background: var(--green); color: #fff; filter: none; } /* ---------- Mobile (iPhone) ---------- */ @media (max-width: 720px) { .app { grid-template-columns: 1fr; } /* bottom tab bar, with home-indicator safe area */ .sidebar { position: fixed; bottom: 0; top: auto; height: auto; width: 100%; flex-direction: row; border-right: none; border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); overflow-x: auto; -webkit-overflow-scrolling: touch; z-index: 30; } .brand, .sidebar-foot { display: none; } #nav { flex-direction: row; gap: 2px; } .nav-item { position: relative; flex-direction: column; gap: 2px; font-size: 10px; padding: 6px 11px; white-space: nowrap; border-radius: 10px; } .nav-item .ico { font-size: 21px; width: auto; } .nav-item.active { box-shadow: none; } /* drop the left accent bar in the vertical chip */ .badge { position: absolute; top: 1px; right: 7px; margin: 0; min-width: 17px; height: 17px; font-size: 10px; padding: 0 5px; } .main { padding: 56px 16px calc(98px + env(safe-area-inset-bottom)); } /* extra top clears the user chip */ #userchip { top: calc(9px + env(safe-area-inset-top)); right: 12px; padding: 4px 5px 4px 9px; } .uc-name { font-size: 12px; } .page-head { font-size: 24px; } .page-sub { font-size: 14px; } .grid2 { grid-template-columns: 1fr; } .card { padding: 16px; } /* let header rows (title + action button) wrap instead of squashing */ .row.spread { flex-wrap: wrap; gap: 10px; } /* horizontally scroll the inner tab/segment rows */ .subtabs, .seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .subtab, .seg button { white-space: nowrap; } .hero .big { font-size: 46px; } .today-photo { height: 130px; } .money-summary { gap: 14px; } .moodpick button { font-size: 22px; padding: 8px 0; } .mem-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } /* compact chat composer so it fits a phone width */ .chat { height: 52vh; } .chat-bar { gap: 6px; padding: 8px; } .icon-btn { width: 34px; height: 38px; font-size: 16px; } .chat-input { min-height: 38px; } .chat-photo { max-width: 70vw; } .modal { padding: 20px; border-radius: 18px; } .toast-host { top: calc(8px + env(safe-area-inset-top)); right: 10px; left: 10px; } .toast { max-width: none; } } /* When launched from the Home Screen (standalone PWA), clear the status bar */ @media (display-mode: standalone) { .main { padding-top: calc(58px + env(safe-area-inset-top)); } #userchip { top: calc(9px + env(safe-area-inset-top)); } }