:root { --ink:#303143; --muted:#7d7c8a; --paper:#fffdf9; --cream:#fff5e8; --coral:#ff785d; --coral-deep:#e95d47; --yellow:#ffc950; --mint:#8ddcc5; --line:#eee8df; --shadow:0 12px 30px rgba(83,58,31,.09); font-family:'Hiragino Sans','Yu Gothic',Meiryo,sans-serif; color:var(--ink); background:#f5efe7; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:linear-gradient(140deg,#fff8ef,#f7f1ff 72%,#edf9f5); } button,input,textarea,select { font:inherit; } button { border:0; cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; }
#app { min-height:100vh; max-width:540px; margin:auto; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 0 50px rgba(65,45,20,.08); } .page { min-height:100vh; padding:16px 20px 30px; } .with-nav { padding-bottom:104px; }
h1,h2,h3,p { margin:0; } h1 { font-size:27px; line-height:1.48; letter-spacing:-.05em; } h1 em { font-style:normal; color:var(--coral); position:relative; z-index:0; } h1 em::after { content:''; position:absolute; height:8px; background:#ffe4a7; opacity:.85; left:-2px; right:-2px; bottom:1px; z-index:-1; border-radius:99px; } h2 { font-size:17px; } h3 { font-size:16px; line-height:1.55; } p { color:var(--muted); font-size:13px; line-height:1.8; }.eyebrow { display:block; color:var(--coral-deep); font-size:11px; letter-spacing:.08em; font-weight:700; margin-bottom:6px; }.muted { color:var(--muted); font-size:11px; }
.topbar { height:47px; display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; }.topbar strong { font-size:14px; }.brand { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:900; }.brand b { width:25px; height:25px; display:grid; place-items:center; color:white; background:var(--coral); border-radius:9px; transform:rotate(-10deg); }.round-btn { width:34px; height:34px; border-radius:50%; background:#fff4e9; color:var(--ink); font-size:27px; line-height:1; }.spacer { width:34px; }
.bottom-nav { position:absolute; z-index:10; height:75px; bottom:0; left:0; right:0; border-top:1px solid var(--line); background:rgba(255,253,249,.95); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom); }.nav-item { min-width:0; flex:1; height:58px; background:transparent; color:#a9a3a0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:9px; font-weight:700; white-space:nowrap; }.nav-item i { font-style:normal; font-family:'DM Sans',sans-serif; font-size:20px; line-height:21px; }.nav-item.active { color:var(--coral); }.nav-item.active i { background:#ffebe4; padding:3px 8px; border-radius:12px; }
.hero { padding:18px 2px 16px; }.hero h1 { font-size:29px; }.hero p,.page-intro p { margin-top:9px; }.filter-row { display:flex; gap:8px; overflow-x:auto; padding:5px 0 17px; scrollbar-width:none; }.filter { flex:0 0 auto; min-width:55px; padding:7px 8px; border-radius:12px; background:#f7f4f0; color:#7e7975; display:grid; gap:1px; place-items:center; font-size:10px; font-weight:700; }.filter:first-letter { font-size:17px; }.filter.selected { background:var(--coral); color:white; box-shadow:0 5px 12px #ffc2b5; }.section-row { display:flex; justify-content:space-between; align-items:center; margin:2px 1px 11px; }.sort { background:transparent; color:var(--coral-deep); font-size:11px; font-weight:700; }.dream-list,.match-list { display:grid; gap:11px; }.dream-card { padding:14px; border:1px solid #f0eae1; background:#fff; border-radius:18px; box-shadow:0 5px 16px rgba(91,60,25,.045); transition:.2s transform; }.dream-card:active { transform:scale(.985); }.card-top,.card-bottom { display:flex; align-items:center; }.card-top { justify-content:space-between; }.chip { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:99px; background:#fff0e9; color:#d86650; font-size:10px; font-weight:700; }.chip.mint { background:#e4f8f1; color:#3b9e83; }.chip.sky { background:#e7f4ff; color:#5386ba; }.chip.lavender { background:#f0ebff; color:#7b66c2; }.chip.sun { background:#fff5d7; color:#c18b23; }.cheer-count { font:11px 'DM Sans',sans-serif; color:#9d9997; }.dream-card h3 { margin:10px 0 5px; }.dream-card p { font-size:11px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.tags { display:flex; gap:4px; flex-wrap:wrap; margin:9px 0 11px; }.tags span { background:#faf7f3; color:#9b9088; border-radius:5px; padding:2px 5px; font-size:9px; }.card-bottom { gap:6px; color:#847e78; font-size:10px; }.avatar { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#8a5042; background:#ffe0d5; font-size:10px; font-weight:900; }.avatar.mint,.detail-cover.mint { background:#d9f4ea; color:#338d74; }.avatar.sky,.detail-cover.sky { background:#ddecfa; color:#467aa8; }.avatar.lavender,.detail-cover.lavender { background:#e9e0fb; color:#7051aa; }.avatar.sun,.detail-cover.sun { background:#fff0bf; color:#ab7520; }.avatar.coral,.detail-cover.coral { background:#ffdcd2; color:#b35a45; }.avatar.white { background:rgba(255,255,255,.75); color:inherit; }.progress { display:block; width:40px; height:4px; overflow:hidden; margin-left:auto; border-radius:99px; background:#eee9e4; }.progress i { display:block; height:100%; border-radius:99px; background:var(--mint); }
.onboard { padding:52px 23px 32px; position:relative; overflow:hidden; }.sun-shape { position:absolute; top:-44px; right:-32px; width:155px; height:155px; display:grid; place-items:center; border-radius:47% 53% 46% 54%; transform:rotate(18deg); background:#ffca55; color:#fff4c5; font-size:50px; }.onboard-heading { position:relative; margin-bottom:25px; }.onboard-heading h1 { font-size:26px; letter-spacing:-.065em; }.onboard-heading p { margin-top:10px; }.onboard-note { display:block; margin-top:10px; color:#aa9488; font-size:10px; }.onboard .form-card { padding:19px 15px 15px; }.onboard .form-card textarea { min-height:97px; line-height:1.7; }.later-settings { margin:-1px 0 15px; padding:9px 10px; border-radius:10px; background:#fff7e9; color:#9e7b55; font-size:10px; line-height:1.55; }.change-later { display:block; margin-top:8px; color:#a59a91; text-align:center; font-size:10px; }.primary:disabled { background:#d9d3ce; color:#fff; box-shadow:none; }.complete { display:flex; flex-direction:column; min-height:100vh; }.complete-orbit { position:relative; z-index:1; width:75px; height:75px; margin:66px auto 18px; display:grid; place-items:center; border-radius:50%; background:#ff8a70; border:8px solid #fff0e4; color:#fff; font-size:30px; font-weight:900; box-shadow:0 10px 20px #ffc7b7; }.complete-message { position:relative; text-align:center; }.complete-message h1 { font-size:28px; }.complete-message p { max-width:340px; margin:11px auto 0; }.complete-card { display:flex; align-items:center; gap:10px; margin:27px 0; padding:13px; border:1px solid #f4e8dc; border-radius:16px; background:#fff; box-shadow:var(--shadow); }.complete-card > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#e9f6e9; font-size:20px; }.complete-card b,.complete-card small { display:block; }.complete-card b { font-size:12px; line-height:1.55; }.complete-card small { margin-top:3px; color:#9e948b; font-size:9px; }.complete .primary { margin-top:auto; }.form-card { border:1px solid #f0e9de; background:#fff; border-radius:22px; padding:18px 15px; box-shadow:var(--shadow); }.form-card label { display:block; font-size:12px; font-weight:700; margin-bottom:14px; }.form-card input,.form-card textarea,.form-card select { display:block; width:100%; margin-top:6px; border:1px solid #e7e0d7; border-radius:10px; background:#fffcf8; color:var(--ink); padding:10px 11px; font-size:13px; outline-color:#ffad9c; }.form-card textarea { min-height:61px; resize:vertical; }.form-card fieldset { margin:0 0 15px; padding:0; border:0; }.form-card legend { font-size:12px; font-weight:700; margin-bottom:8px; }.form-card legend small { color:var(--muted); font-size:9px; font-weight:400; }.category-picker { display:flex; gap:6px; flex-wrap:wrap; }.select-chip { border:1px solid #eee7dd; background:#fff; border-radius:99px; padding:6px 8px; color:#827b74; font-size:10px; }.select-chip.selected { background:#fff0e9; border-color:#ffc8b9; color:#d8624c; }.choice-stack { display:grid; gap:6px; }.radio { margin:0!important; display:flex!important; align-items:center; gap:8px; padding:8px 10px; border:1px solid #eee7dd; border-radius:10px; color:#706a65; font-size:11px!important; font-weight:500!important; }.radio input { display:inline!important; width:auto!important; margin:0!important; accent-color:var(--coral); }.primary,.secondary { min-height:47px; padding:10px 14px; border-radius:14px; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:space-between; }.primary { color:#fff; background:linear-gradient(130deg,#ff886f,#f66b53); box-shadow:0 8px 16px rgba(242,109,84,.27); }.secondary { color:var(--coral-deep); background:#fff0e9; }.wide { width:100%; }.page-intro { padding:10px 2px 18px; }.post-card { box-shadow:none; }.post-card textarea { min-height:53px; }
.match-hero { text-align:center; padding:8px 12px 19px; }.match-orbit { width:68px; height:68px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 65% 30%,#ffe89f 0 14%,transparent 15%),#ffece4; position:relative; }.match-orbit::before,.match-orbit::after { content:''; position:absolute; border:1px dashed #f6b4a4; border-radius:50%; }.match-orbit::before { inset:-7px; }.match-orbit::after { inset:-14px; border-color:#fbd49c; }.match-orbit span { z-index:1; color:var(--coral); font-size:29px; }.match-hero h1 { font-size:23px; }.highlight-match { background:linear-gradient(145deg,#fff6e8,#fff); border:1px solid #f9e3c6; border-radius:20px; padding:12px; margin-bottom:22px; }.dream-card.compact { padding:0; box-shadow:none; background:transparent; border:0; }.compact .tags,.compact .card-bottom { margin-bottom:0; }.why-match { display:flex; gap:8px; margin:13px 0; padding:9px 10px; border-radius:11px; background:#fff; color:#746a62; font-size:10px; line-height:1.65; }.why-match b { color:#d76650; white-space:nowrap; }.match-list .dream-card { padding:11px 12px; }.match-list .dream-card h3 { font-size:13px; }.match-list .dream-card p { display:none; }
.dream-detail { margin:0 -20px; }.detail-cover { padding:25px 20px 17px; background:#ffe5de; color:#9c594a; }.detail-cover > div:first-child { display:flex; justify-content:space-between; }.detail-cover h1 { margin:17px 0; font-size:25px; line-height:1.48; }.detail-cover .chip { background:rgba(255,255,255,.65); }.detail-orb { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.6); color:white; font-size:22px; }.owner-row { display:flex; align-items:center; gap:7px; font-size:11px; }.owner-row > span:last-child { margin-left:auto; }.detail-body { padding:20px; }.detail-body section { margin-bottom:19px; }.detail-body section h2 { font-size:12px; margin-bottom:6px; }.detail-body section p { font-size:13px; color:#625e5b; }.progress-box { background:#faf6f1; border-radius:13px; padding:10px 12px; margin:20px 0; }.progress-box > div:first-child { display:flex; justify-content:space-between; font-size:11px; }.progress-box b { color:var(--coral-deep); }.progress.large { width:100%; height:7px; margin-top:8px; }.supported-state { display:flex; gap:9px; align-items:center; margin:19px 0 11px; padding:11px; background:#effaf5; border-radius:13px; }.supported-state > span { display:grid; place-items:center; width:27px; height:27px; color:white; background:#54b797; border-radius:50%; }.supported-state b,.supported-state small { display:block; }.supported-state b { font-size:11px; }.supported-state small { color:#688479; font-size:9px; margin-top:2px; }
.support-head { display:flex; align-items:flex-start; gap:10px; padding:3px 2px 18px; }.support-head .avatar { width:37px; height:37px; font-size:14px; }.support-head h2 { font-size:14px; line-height:1.45; margin-top:2px; }.support-types { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.support-type { min-height:70px; display:flex; flex-direction:column; justify-content:center; gap:3px; border-radius:11px; border:1px solid #eee8df; background:#fffcf9; color:#7f7972; font-size:10px; }.support-type i { font-style:normal; font-size:19px; }.support-type.selected { border:2px solid #ff9d88; background:#fff2ec; color:#d65e49; }.point-note { display:flex; gap:7px; padding:10px; margin:-2px 0 14px; background:#fff7dd; border-radius:10px; }.point-note span { color:#eea82c; font-size:17px; }.point-note p { color:#8a7654; font-size:9px; line-height:1.6; }.point-note b { color:#815d34; }
.evaluation-head { padding:10px 4px 19px; }.evaluation-head h1 { font-size:25px; }.evaluation-head p { margin-top:8px; }.outcomes { display:grid; gap:9px; }.outcome { padding:12px; text-align:left; display:flex; align-items:center; gap:10px; border:1px solid #eee8df; border-radius:15px; background:white; color:#5f5a56; }.outcome i { width:35px; height:35px; display:grid; place-items:center; background:#fff6e8; border-radius:10px; font-style:normal; font-size:18px; }.outcome span { display:grid; gap:2px; }.outcome b { font-size:13px; }.outcome small { color:#999089; font-size:10px; }.outcome em { margin-left:auto; color:#e26750; font-style:normal; font:700 13px 'DM Sans',sans-serif; }.outcome.selected { border:2px solid #ff987e; background:#fff5f0; }.dedupe-note { display:flex; align-items:center; gap:7px; color:#837b74; font-size:10px; line-height:1.55; padding:11px 2px 16px; }.dedupe-note span { color:#55a88d; }
.my-intro { padding-bottom:14px; }.new-notice { width:100%; display:flex; align-items:center; gap:10px; padding:12px; margin-bottom:20px; text-align:left; color:#7e554a; background:linear-gradient(130deg,#fff0e8,#fff8db); border:1px solid #ffe0c6; border-radius:16px; }.new-notice .notice-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#ff8870; color:white; }.new-notice b,.new-notice small { display:block; }.new-notice b { font-size:12px; }.new-notice small { margin-top:2px; color:#a18170; font-size:9px; }.new-notice em { margin-left:auto; color:#e5775f; font-style:normal; }.my-dream-wrap { position:relative; }.inline-support { position:relative; z-index:1; width:calc(100% - 20px); margin:-5px 10px 0; padding:9px 11px; display:flex; justify-content:space-between; border-radius:0 0 12px 12px; background:#fff0e9; color:#d3614d; font-size:10px; font-weight:700; }.inline-support.done { color:#73a996; background:#eff8f2; cursor:default; }.small-footnote { margin:17px 2px 0; color:#a09790; font-size:9px; line-height:1.65; }.received-for { padding:4px 2px 14px; }.received-for > span { margin-bottom:8px; display:block; }.received-for small { display:block; color:#9b938c; font-size:10px; }.received-for h2 { margin-top:3px; font-size:15px; line-height:1.55; }.received-card { padding:14px; background:#fff; border:1px solid #eee7df; border-radius:18px; box-shadow:var(--shadow); }.received-person { display:flex; align-items:center; gap:8px; }.received-person .avatar { width:33px; height:33px; font-size:13px; }.received-person b,.received-person small { display:block; }.received-person b { font-size:12px; }.received-person small { color:#9b938d; margin-top:2px; font-size:9px; }.type-label { margin-left:auto; padding:4px 7px; border-radius:99px; background:#fff0e9; color:#cf694f; font-size:9px; font-weight:700; }.received-message { margin-top:12px; padding:11px; border-radius:11px; background:#faf7f2; color:#595651; font-size:12px; line-height:1.75; }.received-evaluation { margin-top:22px; }.received-evaluation h2 { margin-bottom:10px; font-size:15px; }.received-options { display:grid; gap:7px; }.received-option { display:flex; align-items:center; gap:9px; padding:10px; text-align:left; background:white; border:1px solid #eee8df; border-radius:13px; color:#615c57; }.received-option i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#fff5e8; font-style:normal; }.received-option span { display:grid; gap:1px; }.received-option b { font-size:11px; }.received-option small { color:#9b9189; font-size:8px; }.received-option em { margin-left:auto; color:#e36750; font:700 11px 'DM Sans'; font-style:normal; }.received-option.selected { border:2px solid #ff9b85; background:#fff6f1; }.action-callout,.plan-summary,.reported-state,.supporter-points,.plan-recap { display:flex; align-items:center; gap:9px; padding:11px; margin-top:16px; border-radius:13px; }.action-callout { background:#fff4df; }.action-callout > span,.plan-summary > span,.reported-state > span,.supporter-points > span,.plan-recap > span { font-size:20px; }.action-callout div,.plan-summary div,.reported-state div,.supporter-points div,.plan-recap div { display:grid; gap:2px; }.action-callout b,.plan-summary b,.reported-state b,.supporter-points b,.plan-recap b { font-size:11px; }.action-callout small,.plan-summary small,.reported-state small,.supporter-points small,.plan-recap small { color:#8b8277; font-size:9px; }.action-callout button,.plan-summary button { margin-left:auto; padding:7px 8px; border-radius:9px; background:#f48669; color:white; font-size:9px; font-weight:700; }.plan-summary { background:#eef9f4; }.plan-summary > span { color:#4bab89; }.reported-state { background:#eef9f4; }.supporter-points { background:#f8f5f0; }.supporter-points.earned { background:#fff3df; }.supporter-points strong { margin-left:auto; color:#df654e; font:700 16px 'DM Sans'; }.report-head { padding:8px 3px 15px; }.report-head h1 { font-size:25px; }.report-head p { margin-top:7px; }.plan-recap { margin:0 0 16px; background:#f7f5f2; }.report-buttons { display:grid; gap:9px; }.report-button { display:flex; align-items:center; gap:10px; padding:13px; text-align:left; border:1px solid #eee7de; border-radius:15px; background:#fff; color:#5e5a56; }.report-button i { display:grid; place-items:center; width:37px; height:37px; border-radius:11px; background:#fff4df; font-style:normal; font-size:19px; }.report-button span { display:grid; gap:2px; }.report-button b { font-size:13px; }.report-button small { color:#9b9189; font-size:9px; }.report-button.selected { border:2px solid #ff9b85; background:#fff6f1; }
.contribution-hero { display:flex; align-items:center; gap:14px; margin:11px 2px 16px; padding:17px 15px; border-radius:19px; background:linear-gradient(135deg,#ffe4d8,#fff1c9); }.profile-avatar { width:55px; height:55px; border-radius:50%; display:grid; place-items:center; background:white; color:#db694f; font-size:23px; font-weight:900; box-shadow:0 4px 11px #e7ba96; }.contribution-hero span { font-size:11px; color:#936d5e; }.contribution-hero h1 { line-height:1.1; font:700 29px 'DM Sans',sans-serif; }.contribution-hero h1 em { font-style:normal; color:#e65f48; }.contribution-hero h1 em::after { display:none; }.contribution-hero p { font-size:10px; color:#8a756b; }.impact-banner { display:flex; gap:9px; align-items:center; padding:10px 12px; background:#edfaf3; border-radius:14px; margin-bottom:17px; }.impact-banner > span { font-size:22px; }.impact-banner div { display:grid; gap:2px; }.impact-banner b { color:#3e816c; font-size:11px; }.impact-banner small { color:#6e988a; font-size:9px; }.impact-banner strong { margin-left:auto; color:#3b9c7c; font:700 15px 'DM Sans'; }.impact-banner.quiet { background:#fff7e6; }.impact-banner.quiet b { color:#9f7950; }.impact-banner.quiet small { color:#a58b69; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:22px; }.metrics div { min-height:74px; padding:10px 4px; text-align:center; border-radius:12px; background:#faf7f2; }.metrics b { display:block; color:#e7664f; font:700 20px 'DM Sans'; }.metrics span { display:block; color:#837c75; font-size:8px; line-height:1.45; }.contribution-section { margin-bottom:19px; }.contribution-section h2 { margin-bottom:9px; font-size:14px; }.skill-pills { display:flex; flex-wrap:wrap; gap:7px; }.skill-pills span { padding:6px 9px; background:#fff2ed; border-radius:99px; color:#a46355; font-size:10px; }.badges { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.badge { min-height:102px; padding:9px 5px; text-align:center; border:1px solid #f0e9df; border-radius:14px; background:#fff; }.badge i { display:block; font-style:normal; font-size:23px; margin-bottom:4px; }.badge b,.badge small { display:block; }.badge b { font-size:9px; }.badge small { color:#918a83; margin-top:3px; font-size:7px; line-height:1.35; }.badge.locked { opacity:.4; filter:grayscale(1); }.toast { position:fixed; z-index:100; bottom:87px; left:50%; transform:translateX(-50%); max-width:88vw; padding:10px 15px; border-radius:99px; background:#413e43; color:white; font-size:11px; box-shadow:0 7px 18px #0002; }
.contribution-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:16px; border-radius:13px; background:#f4eee7; }.contribution-tabs button { padding:9px 5px; border-radius:10px; background:transparent; color:#8b817a; font-size:11px; font-weight:700; }.contribution-tabs button.active { background:#fff; color:#d9654f; box-shadow:0 2px 8px #9a744015; }.contribution-tabs span { margin-left:3px; font-size:9px; }.metrics.interactive button { min-height:74px; padding:10px 4px; border-radius:12px; background:#faf7f2; color:inherit; }.metrics.interactive button:active { background:#fff0e9; }.history-list { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:10px; }.history-list-head { display:flex; justify-content:space-between; align-items:flex-start; margin:4px 1px 11px; }.history-list-head h2 { font-size:15px; }.history-list-head p { margin-top:3px; font-size:10px; }.history-list-head > span { padding:4px 7px; border-radius:99px; background:#fff0e9; color:#d4654e; font-size:10px; }.history-card { position:relative; width:100%; min-width:0; padding:12px; border:1px solid #eee7de; border-radius:17px; background:#fff; box-shadow:0 5px 15px rgba(91,60,25,.04); }.history-card-top { display:flex; align-items:flex-start; gap:7px; }.history-card-top .avatar { width:28px; height:28px; font-size:11px; }.history-card-top div { flex:1; min-width:0; }.history-card-top small { color:#958c85; font-size:9px; }.history-card-top h3 { margin-top:2px; font-size:12px; line-height:1.45; }.stage-label { display:inline-block; padding:4px 6px; border-radius:99px; white-space:nowrap; font-size:8px; font-weight:700; }.stage-label.sent { background:#f2efeb; color:#89817b; }.stage-label.helpful { background:#fff4d9; color:#b47b25; }.stage-label.try { background:#eaf3ff; color:#4d83b7; }.stage-label.action { background:#e8f8ee; color:#4c9b76; }.stage-label.result { background:#ffe8e1; color:#d65e48; }.history-comment { margin:10px 0; padding:8px 9px; border-radius:10px; background:#faf7f3; }.history-comment small { color:#9c9189; font-size:8px; }.history-comment p { display:-webkit-box; overflow:hidden; margin-top:3px; color:#625c57; font-size:10px; line-height:1.6; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.history-card-bottom { display:flex; align-items:center; gap:6px; color:#998f87; font-size:9px; }.history-latest { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7c9588; }.history-card-bottom b { color:#df654e; font:700 12px 'DM Sans'; }.history-more { display:block; margin-top:9px; color:#d56550; text-align:right; font-size:9px; font-weight:700; }.history-list.mini .history-card { padding:10px; }.history-list.mini .history-card:nth-child(n+2) { display:none; }.history-empty { padding:46px 18px; text-align:center; }.history-empty > span { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 13px; border-radius:50%; background:#fff0e9; color:#ef765e; font-size:22px; }.history-empty h2 { font-size:16px; }.history-empty p { margin:7px 0 20px; font-size:11px; }.history-detail-hero { display:flex; gap:10px; align-items:flex-start; padding:6px 1px 16px; }.history-detail-hero .avatar { width:42px; height:42px; font-size:16px; }.history-detail-hero span { color:#9a9088; font-size:10px; }.history-detail-hero h1 { margin-top:2px; font-size:19px; line-height:1.45; }.history-detail-comment { padding:13px; border-radius:15px; background:#fff8f2; }.history-detail-comment p { color:#58534f; font-size:13px; line-height:1.85; }.history-detail-comment > small { display:block; margin-top:9px; color:#999088; font-size:9px; }.history-status-box { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:5px; margin:14px 0 20px; }.history-status-box div { padding:9px 7px; border-radius:11px; background:#f8f5f0; }.history-status-box span,.history-status-box b,.history-status-box strong { display:block; }.history-status-box span { color:#958c85; font-size:8px; }.history-status-box b,.history-status-box strong { margin-top:3px; color:#d9654e; font:700 12px 'DM Sans'; }.history-status-box .stage-label { font-family:inherit; font-size:8px; }.timeline-section h2 { margin-bottom:12px; font-size:15px; }.timeline { list-style:none; margin:0; padding:0 0 0 9px; }.timeline li { position:relative; padding:0 0 15px 18px; border-left:1px solid #eadfd5; }.timeline li:last-child { padding-bottom:0; }.timeline li > span { position:absolute; top:2px; left:-5px; width:9px; height:9px; border-radius:50%; background:#dbcfc4; }.timeline li.latest > span { background:#ff7e62; box-shadow:0 0 0 4px #fff0e9; }.timeline small,.timeline b,.timeline p { display:block; }.timeline small { color:#a19790; font-size:9px; }.timeline b { margin-top:2px; color:#5e5853; font-size:11px; }.timeline p { margin-top:2px; font-size:10px; line-height:1.55; }.latest-change { display:flex; gap:8px; margin:20px 0; padding:11px; border-radius:13px; background:#eef9f4; }.latest-change > span { color:#4da88a; font-size:20px; }.latest-change small,.latest-change b { display:block; }.latest-change small { color:#799688; font-size:9px; }.latest-change b { margin-top:2px; color:#477b68; font-size:11px; line-height:1.55; }.detail-actions { display:grid; grid-template-columns:1fr 1.1fr; gap:8px; }.detail-actions button { justify-content:center; font-size:11px; }
@media (min-width:541px) { body { padding:20px; } #app { border-radius:24px; min-height:calc(100vh - 40px); } .bottom-nav { position:fixed; left:50%; right:auto; width:540px; transform:translateX(-50%); bottom:20px; border-radius:0 0 24px 24px; } }
.history-list.mini .history-card:nth-child(n+2) { display:block; }
.demo-switch-note { margin:8px 4px 0; color:#9d938b; font-size:9px; line-height:1.55; text-align:center; }
.nav-badge { display:inline-grid; min-width:13px; height:13px; margin-left:2px; padding:0 3px; place-items:center; border-radius:99px; background:#ff735a; color:#fff; font-size:8px; line-height:1; vertical-align:top; }
.new-change-label { position:absolute; z-index:2; top:-7px; right:10px; padding:3px 7px; border-radius:99px; background:#ff785d; color:#fff; font-size:8px; font-weight:700; box-shadow:0 3px 8px rgba(239,103,78,.24); }
.owner-return-button { margin-top:14px; }
.received-empty { display:flex; align-items:center; gap:10px; margin-bottom:20px; padding:12px; border:1px dashed #e6ddd4; border-radius:16px; background:#faf7f3; }.received-empty > span { display:grid; width:34px; height:34px; place-items:center; border-radius:12px; background:#fff; color:#c0aaa0; font-size:18px; }.received-empty b,.received-empty small { display:block; }.received-empty b { color:#756d67; font-size:11px; }.received-empty small { margin-top:2px; color:#9b9189; font-size:9px; }.inline-support.waiting { color:#9a8f87; background:#f6f2ed; }
.settings-intro { padding-top:2px; }.settings-intro h1 { font-size:24px; }.settings-form { box-shadow:none; }.settings-form textarea { min-height:82px; line-height:1.7; }.settings-form .select-chip { min-height:34px; padding:7px 10px; }.skill-picker { max-height:158px; overflow-y:auto; padding:2px 1px; }.involvement-picker { grid-template-columns:repeat(2,1fr); }.involvement-picker .support-type:last-child { grid-column:1 / -1; min-height:57px; }.settings-actions { display:grid; grid-template-columns:.8fr 1.4fr; gap:8px; margin-top:5px; }.settings-actions button { justify-content:center; text-align:center; }
.profile-settings-summary { margin:0 1px 16px; padding:13px; border:1px solid #eee7de; border-radius:17px; background:#fff; }.profile-settings-summary .section-row { align-items:flex-start; margin-bottom:9px; }.profile-settings-summary .eyebrow { margin-bottom:2px; font-size:8px; }.profile-settings-summary h2 { font-size:14px; }.profile-settings-summary .sort { min-height:34px; padding:5px 0 5px 8px; }.profile-summary-grid { display:grid; gap:9px; padding-top:8px; border-top:1px solid #f1ebe4; }.profile-summary-grid small { display:block; margin-bottom:3px; color:#998f87; font-size:8px; }.profile-summary-grid p { color:#5f5a56; font-size:10px; line-height:1.6; }.profile-summary-pills { display:flex; flex-wrap:wrap; gap:5px; }.profile-summary-pills span { padding:4px 7px; border-radius:99px; background:#fff2ed; color:#a46355; font-size:9px; }.profile-summary-empty { padding-top:8px; border-top:1px solid #f1ebe4; font-size:10px; line-height:1.6; }
.profile-match-hint { width:100%; display:flex; align-items:center; gap:8px; margin:0 0 13px; padding:10px 11px; border:1px solid #f3dfc8; border-radius:13px; background:#fff8eb; color:#876f58; text-align:left; }.profile-match-hint span { flex:1; font-size:9px; line-height:1.55; }.profile-match-hint b { flex:0 0 auto; color:#d76750; font-size:9px; }.matched-dream { border-radius:18px; background:#fff; }.match-reason-tags { margin:-7px 10px 2px; padding:8px 9px; border-radius:0 0 10px 10px; background:#fff4e9; color:#bb6652; font-size:9px; line-height:1.45; }
.skill-pills .unset-skill { background:#f6f2ed; color:#978e87; }
@media (max-width:359px) { .page { padding-left:15px; padding-right:15px; }.dream-detail { margin-left:-15px; margin-right:-15px; }.settings-actions { grid-template-columns:1fr; }.involvement-picker { gap:5px; }.profile-settings-summary .section-row { gap:6px; }.profile-settings-summary .sort { max-width:118px; line-height:1.35; } }
.demo-role-banner { position:sticky; z-index:40; top:0; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:8px 15px; border-bottom:1px solid #f4d9bf; background:#fff6df; box-shadow:0 4px 12px rgba(91,60,25,.08); }.demo-role-banner div { display:grid; gap:1px; }.demo-role-banner span { color:#a1815d; font-size:8px; }.demo-role-banner b { color:#765441; font-size:11px; }.demo-role-banner button { min-height:38px; padding:7px 10px; border-radius:10px; background:#fff; color:#d4644e; font-size:9px; font-weight:800; }
.post-card label > small { margin-left:4px; color:#a0968e; font-size:8px; font-weight:400; }.post-card textarea[name="description"] { min-height:86px; }.post-methods { grid-template-columns:repeat(2,minmax(0,1fr)); }.post-methods .support-type { min-width:0; min-height:58px; }.post-methods .support-type:last-child { grid-column:1 / -1; }.post-tags { max-height:172px; overflow-y:auto; padding:2px 1px; }.post-tags .select-chip { min-height:34px; padding:7px 10px; }.post-error { display:block; margin:6px 2px 0; color:#d94e3f!important; font-size:9px!important; font-weight:700!important; line-height:1.5; }.post-error:focus { outline:2px solid #ffb19f; outline-offset:2px; }
.confirm-intro { padding-bottom:14px; }.post-confirm-card { display:grid; gap:0; padding:4px 14px; border:1px solid #eee6dc; border-radius:18px; background:#fff; box-shadow:var(--shadow); }.post-confirm-card > div { min-width:0; padding:12px 0; border-bottom:1px solid #f2ece5; }.post-confirm-card > div:last-child { border-bottom:0; }.post-confirm-card small { display:block; margin-bottom:4px; color:#a0968e; font-size:8px; }.post-confirm-card p { overflow-wrap:anywhere; color:#5d5854; font-size:11px; line-height:1.7; }.post-confirm-actions { display:grid; grid-template-columns:.8fr 1.4fr; gap:8px; margin-top:14px; }.post-confirm-actions button { justify-content:center; text-align:center; }
.post-complete { display:flex; min-height:100vh; flex-direction:column; }.post-complete .complete-orbit { margin-top:24px; }.post-complete-actions { display:grid; gap:9px; margin-top:4px; }.post-complete-actions button { min-width:0; line-height:1.4; }
.owner-dream-state { display:flex; align-items:center; gap:9px; margin:19px 0 11px; padding:12px; border:1px dashed #e4d9cf; border-radius:14px; background:#faf7f3; }.owner-dream-state > span { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border-radius:10px; background:#fff; color:#b79f92; font-size:17px; }.owner-dream-state div { min-width:0; }.owner-dream-state b,.owner-dream-state small { display:block; }.owner-dream-state b { color:#675f5a; font-size:11px; }.owner-dream-state small { margin-top:2px; color:#958b84; font-size:9px; line-height:1.5; }.owner-dream-state.received { border-style:solid; border-color:#d9eee5; background:#eff9f4; }.owner-dream-state.received > span { color:#49a585; }
@media (max-width:359px) { .post-confirm-actions { grid-template-columns:1fr; }.post-confirm-actions .primary { order:-1; }.demo-role-banner { padding-left:10px; padding-right:10px; }.demo-role-banner button { max-width:116px; line-height:1.3; }.post-card { padding-left:12px; padding-right:12px; } }
.test-release-note { position:relative; z-index:1; display:flex; align-items:center; gap:8px; width:100%; margin-bottom:18px; padding:9px 11px; border:1px solid rgba(218,109,82,.16); border-radius:14px; background:rgba(255,255,255,.72); color:#8f8178; font-size:10px; line-height:1.45; }.test-release-note b { flex:0 0 auto; padding:3px 7px; border-radius:99px; background:#fff0e9; color:var(--coral-deep); font-size:9px; }