@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#17211f; --muted:#82908c; --line:#dde5df; --cream:#f3f5ee; --paper:#fbfcf7; --lime:#cbf156; --orange:#ff8e52; --blue:#8bd2fa; --mint:#a8e6cf; --purple:#cab5f7; --shadow:0 20px 45px rgba(23,33,31,.08); --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:'Manrope','PingFang SC','Microsoft YaHei',sans-serif; }
button,a { font:inherit; }
button { border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; top:12px; left:12px; z-index:20; padding:10px 14px; background:var(--lime); transform:translateY(-160%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.app-shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:38px 22px 24px; background:#1b2825; color:#f7f8f1; }
.brand-lockup { display:flex; align-items:center; gap:12px; padding:0 10px; }
.brand-mark { display:flex; align-items:end; gap:3px; height:26px; width:24px; }
.brand-mark span { display:block; width:5px; border-radius:5px 5px 1px 1px; background:var(--lime); transform:skew(-8deg); }
.brand-mark span:nth-child(1) { height:12px; opacity:.65; }.brand-mark span:nth-child(2) { height:21px; }.brand-mark span:nth-child(3) { height:16px; opacity:.82; }
.brand-name { margin:0; font-size:20px; font-weight:800; letter-spacing:.16em; }.brand-subtitle,.eyebrow,.date-label,.photo-count,.camera-help { font-family:'DM Mono',monospace; }.brand-subtitle { margin:3px 0 0; color:#8ea09a; font-size:8px; letter-spacing:.16em; }
.side-rule { height:1px; margin:42px 10px 24px; background:rgba(255,255,255,.11); }
.nav-stack { display:grid; gap:7px; }.nav-item { display:flex; align-items:center; gap:12px; padding:13px 12px; color:#91a09b; border-radius:12px; transition:color .2s,background .2s,transform .2s; }.nav-item:hover,.nav-item.is-active { color:var(--ink); background:var(--lime); transform:translateX(2px); }.nav-icon { width:18px; font-size:17px; line-height:1; text-align:center; }.nav-item span:nth-child(2) { flex:1; font-size:13px; font-weight:700; }.nav-count { color:var(--ink); background:#f8f9f0; border-radius:99px; padding:2px 7px; font-size:10px; font-weight:800; }
.sidebar-spacer { flex:1; }.side-challenge { padding:18px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.04); }.side-challenge .eyebrow { margin:0 0 12px; color:var(--lime); }.challenge-copy { margin:0 0 21px; font-size:18px; line-height:1.18; font-weight:800; }.mini-progress { overflow:hidden; height:5px; border-radius:10px; background:#35443f; }.mini-progress span { display:block; width:0; height:100%; border-radius:10px; background:var(--lime); transition:width .25s ease; }.challenge-meta { display:flex; justify-content:space-between; margin-top:9px; color:#8ea09a; font:10px 'DM Mono',monospace; }.profile-switcher { display:flex; align-items:center; gap:10px; width:100%; margin-top:28px; padding:9px 8px; color:#f7f8f1; text-align:left; border-radius:12px; background:transparent; }.profile-switcher:hover { background:rgba(255,255,255,.07); }.profile-copy { display:grid; gap:3px; flex:1; }.profile-copy strong { font-size:12px; }.profile-copy small { color:#8ea09a; font-size:9px; }.profile-arrow { color:var(--lime); }
.avatar { display:inline-grid; flex:0 0 auto; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--ink); font-size:13px; font-weight:800; }.small-avatar { width:24px; height:24px; font-size:10px; }.avatar-you { background:var(--lime); }.avatar-orange { background:var(--orange); }.avatar-mint { background:var(--mint); }.avatar-blue { background:var(--blue); }.avatar-purple { background:var(--purple); }.avatar-yellow { background:#ffe17b; }
.main-content { max-width:1500px; width:100%; margin:0 auto; padding:44px clamp(28px,5vw,84px) 30px; overflow:hidden; }.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:42px; }.date-label,.eyebrow { margin:0; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.12em; }.topbar h1 { margin:10px 0 0; font-size:clamp(30px,3.4vw,54px); letter-spacing:-.07em; line-height:.98; }.topbar-actions { display:flex; align-items:center; gap:12px; }.icon-button { position:relative; display:grid; place-items:center; width:40px; height:40px; color:var(--ink); border:1px solid var(--line); border-radius:50%; background:transparent; }.icon-button i { position:absolute; top:8px; right:8px; width:5px; height:5px; border:1px solid var(--cream); border-radius:50%; background:var(--orange); }.streak-pill { display:flex; align-items:center; gap:8px; padding:10px 13px; color:var(--ink); border-radius:99px; background:var(--lime); font-size:11px; }.streak-pill strong { font-size:16px; }.streak-fire { font-size:18px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.72fr); gap:18px; }.mission-card,.ranking-panel { border-radius:var(--radius); box-shadow:var(--shadow); }.mission-card { overflow:hidden; background:var(--paper); }.mission-heading { display:flex; justify-content:space-between; padding:33px 36px 22px; }.accent-eyebrow { color:#7c921f; }.accent-eyebrow span { color:var(--orange); }.mission-heading h2 { margin:14px 0 8px; font-size:clamp(27px,3vw,42px); letter-spacing:-.07em; }.mission-description { max-width:390px; margin:0; color:var(--muted); font-size:13px; line-height:1.7; }.mission-stamp { width:53px; height:53px; padding-top:8px; color:var(--ink); text-align:center; font:800 18px/1 'DM Mono',monospace; border:2px solid var(--ink); border-radius:50%; transform:rotate(9deg); }.mission-stamp span { font-size:9px; }.mission-body { display:grid; grid-template-columns:minmax(250px,1.1fr) minmax(205px,.9fr); gap:28px; padding:0 36px 28px; }.mission-figure { position:relative; min-height:250px; overflow:hidden; border-radius:18px; background:#ffdfaa; isolation:isolate; }.figure-sun { position:absolute; top:25px; left:25px; width:106px; height:106px; border-radius:50%; background:#ff8e52; opacity:.8; }.figure-floor { position:absolute; bottom:-10%; left:-5%; width:120%; height:37%; border-radius:50%; background:#e7af72; transform:rotate(-3deg); }.figure-label { position:absolute; left:16px; bottom:13px; color:#6e4327; font:11px 'DM Mono',monospace; letter-spacing:.1em; }.figure-person { position:absolute; right:27%; bottom:23%; width:106px; height:145px; transform:rotate(-4deg); }.figure-head { position:absolute; left:43px; top:0; width:25px; height:25px; border-radius:50%; background:#1b2825; }.figure-torso { position:absolute; left:37px; top:24px; width:38px; height:58px; border-radius:18px 18px 9px 9px; background:#1b2825; transform:skew(-7deg); }.figure-leg,.figure-arm { position:absolute; display:block; width:13px; border-radius:12px; background:#1b2825; transform-origin:top center; }.leg-a { left:41px; top:70px; height:78px; transform:rotate(34deg); }.leg-b { left:58px; top:71px; height:78px; transform:rotate(-54deg); }.arm-a { left:38px; top:29px; height:57px; transform:rotate(48deg); }.arm-b { left:66px; top:29px; height:54px; transform:rotate(-65deg); }.mission-stats { display:flex; flex-direction:column; justify-content:center; gap:0; }.stat-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }.stat-row strong { color:var(--ink); font-size:13px; }.difficulty { display:flex; gap:4px; }.difficulty i { width:13px; height:6px; border-radius:4px; background:var(--orange); }.difficulty i.muted { background:#e5ebe1; }.primary-button,.secondary-button { display:flex; justify-content:center; align-items:center; gap:10px; min-height:46px; padding:0 17px; border-radius:12px; font-weight:800; font-size:12px; transition:transform .2s,box-shadow .2s,background .2s; }.primary-button { color:var(--ink); background:var(--lime); box-shadow:0 8px 0 #a9c840; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 10px 0 #a9c840; }.primary-button:active { transform:translateY(3px); box-shadow:0 3px 0 #a9c840; }.primary-button:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }.button-record-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); }.button-arrow { margin-left:auto; font-size:16px; }.mission-stats .primary-button { width:100%; margin-top:20px; }.mission-footer { display:flex; gap:9px; align-items:center; padding:14px 36px; color:var(--muted); border-top:1px solid var(--line); font:10px 'DM Mono',monospace; }.mission-footer b { color:var(--ink); font-weight:500; }.footer-dot { color:var(--orange); font-size:16px; }
.ranking-panel { padding:26px 26px 23px; color:#f7f8f1; background:#2a3b37; }.panel-topline { display:flex; justify-content:space-between; align-items:center; }.ranking-panel .eyebrow { color:var(--lime); }.live-dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(203,241,86,.13); }.ranking-panel h2 { margin:19px 0 7px; font-size:26px; letter-spacing:-.06em; }.panel-note { margin:0; color:#a8b4af; font-size:11px; line-height:1.6; }.podium { display:flex; justify-content:center; align-items:flex-end; height:186px; margin:10px -6px 7px; }.podium-person { position:relative; display:flex; flex-direction:column; align-items:center; width:31%; gap:6px; }.podium-person .avatar { width:40px; height:40px; border:3px solid #2a3b37; box-shadow:0 0 0 2px rgba(255,255,255,.13); }.podium-person.first .avatar { width:52px; height:52px; border-color:var(--lime); }.podium-person strong { font-size:10px; }.podium-person small { color:#a8b4af; font:9px 'DM Mono',monospace; }.podium-person em { display:grid; place-items:center; width:100%; height:43px; margin-top:5px; color:#2a3b37; font:800 14px 'DM Mono',monospace; background:#82918b; border-radius:5px 5px 0 0; font-style:normal; }.podium-person.first em { height:70px; color:var(--ink); background:var(--lime); }.podium-person.third em { height:28px; background:#64756e; }.podium-person.first { z-index:1; }.rank-list { display:grid; gap:5px; padding:13px 0 16px; border-top:1px solid rgba(255,255,255,.12); }.rank-row { display:grid; grid-template-columns:20px 24px 1fr auto; gap:8px; align-items:center; padding:7px 7px; color:#a8b4af; font-size:10px; }.rank-row strong { color:#f7f8f1; font-size:10px; }.rank-row.is-you { border-radius:8px; color:var(--lime); background:rgba(203,241,86,.1); }.rank-row.is-you strong { color:var(--lime); }.text-button { padding:0; color:var(--lime); background:transparent; font-size:11px; font-weight:700; }.text-button span { margin-left:5px; font-size:16px; }
.community-section { margin-top:52px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }.section-heading h2 { margin:11px 0 0; font-size:27px; letter-spacing:-.06em; }.feed-controls { display:flex; gap:5px; padding:4px; border:1px solid var(--line); border-radius:99px; }.filter-button { padding:7px 11px; color:var(--muted); border-radius:99px; background:transparent; font-size:10px; }.filter-button.is-selected { color:var(--ink); background:#fff; box-shadow:0 2px 7px rgba(23,33,31,.06); }.feed-grid { display:grid; grid-template-columns:1.23fr 1fr 1fr; gap:14px; }.feed-card { overflow:hidden; border:1px solid rgba(219,227,220,.86); border-radius:18px; background:var(--paper); }.feed-image { position:relative; height:193px; overflow:hidden; }.photo-one { background:linear-gradient(140deg,#9fcac2 0%,#c6dfc4 42%,#ecbc86 43%,#e77b55 100%); }.photo-one:before,.photo-two:before,.photo-three:before { content:''; position:absolute; left:14%; bottom:-7%; width:60%; height:98%; border-radius:45% 45% 10% 10%; background:linear-gradient(145deg,rgba(24,42,38,.98),rgba(48,67,59,.9)); transform:rotate(12deg); }.photo-one:after { content:'SWEAT'; position:absolute; right:18%; top:30%; color:rgba(255,255,255,.75); font:800 18px/1 'DM Mono',monospace; transform:rotate(-8deg); }.photo-two { background:linear-gradient(145deg,#dce7d0 0 42%,#f7c467 43% 67%,#32473c 68%); }.photo-two:before { left:32%; bottom:-12%; width:36%; height:87%; border-radius:45% 45% 0 0; background:#f4f2de; transform:rotate(-10deg); }.photo-two:after { content:''; position:absolute; left:42%; top:22%; width:44px; height:44px; border-radius:50%; background:#32473c; box-shadow:33px 50px 0 -10px #32473c; }.photo-three { background:linear-gradient(155deg,#b5c6dc 0 48%,#e9aa79 49% 78%,#1d3330 79%); }.photo-three:before { left:24%; width:31%; height:87%; border-radius:50% 50% 0 0; background:#e8d6be; transform:rotate(8deg); }.photo-three:after { content:''; position:absolute; left:35%; top:27%; width:31px; height:31px; border-radius:50%; background:#2f443e; box-shadow:-45px 77px 0 17px #2f443e, 63px 84px 0 10px #2f443e; }.image-tag { position:absolute; z-index:1; top:12px; left:12px; padding:5px 7px; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:4px; background:rgba(0,0,0,.18); font:9px 'DM Mono',monospace; }.image-sticker { position:absolute; z-index:1; right:14px; bottom:16px; display:grid; place-items:center; width:72px; height:72px; color:var(--ink); border-radius:50%; background:var(--lime); font:800 10px/1.05 'DM Mono',monospace; text-align:center; transform:rotate(10deg); }.small-sticker { width:61px; height:61px; font-size:9px; background:var(--orange); transform:rotate(-11deg); }.feed-card-body { padding:16px 17px 15px; }.feed-author { display:flex; align-items:center; gap:9px; }.feed-author > div { display:grid; gap:3px; flex:1; }.feed-author strong { font-size:11px; }.feed-author small { color:var(--muted); font-size:9px; }.more-button { padding:0; color:var(--muted); background:transparent; letter-spacing:2px; }.feed-caption { min-height:34px; margin:15px 0 16px; color:#52625c; font-size:11px; line-height:1.55; }.feed-actions { display:flex; justify-content:space-between; align-items:center; }.like-button { padding:0; color:#a0aaa5; background:transparent; font-size:11px; }.like-button span { margin-right:5px; color:#a0aaa5; font-size:17px; vertical-align:-1px; }.like-button:hover span,.like-button.is-liked span { color:var(--orange); }.like-button.is-liked { color:var(--ink); }.photo-count { color:#9ba8a3; font-size:9px; }.page-footer { display:flex; justify-content:space-between; margin-top:58px; padding-top:17px; color:#a3afaa; border-top:1px solid var(--line); font:9px 'DM Mono',monospace; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:24px; background:rgba(21,31,28,.72); opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }.modal-backdrop.is-open { opacity:1; visibility:visible; }.camera-modal { position:relative; width:min(620px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:28px; border-radius:24px; background:var(--paper); box-shadow:0 35px 80px rgba(0,0,0,.25); transform:translateY(16px); transition:transform .25s; }.modal-backdrop.is-open .camera-modal { transform:translateY(0); }.modal-close { position:absolute; top:20px; right:20px; z-index:2; width:33px; height:33px; color:var(--ink); border-radius:50%; background:#eef1e9; font-size:22px; line-height:1; }.camera-header { padding-right:42px; }.camera-header h2 { margin:10px 0 7px; font-size:26px; letter-spacing:-.06em; }.camera-header p:last-child { margin:0 0 18px; color:var(--muted); font-size:11px; line-height:1.6; }.camera-stage { position:relative; min-height:300px; overflow:hidden; border-radius:17px; background:#192622; }.camera-stage video { display:block; width:100%; height:300px; object-fit:cover; transform:scaleX(-1); }.camera-placeholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; color:#eef4dc; text-align:center; }.camera-placeholder-icon { display:grid; place-items:center; width:55px; height:55px; margin-bottom:6px; color:var(--ink); border-radius:50%; background:var(--lime); font-size:26px; }.camera-placeholder strong { font-size:14px; }.camera-placeholder small { color:#a8b9b1; font-size:10px; }.camera-overlay { position:absolute; z-index:1; inset:15px 16px auto; display:flex; justify-content:space-between; color:#fff; font:10px 'DM Mono',monospace; }.recording-status { display:flex; align-items:center; gap:7px; }.recording-status i { width:7px; height:7px; border-radius:50%; background:#879791; }.recording-status.is-recording i { background:var(--orange); animation:pulse 1s infinite; }.camera-grid-lines { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.12) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.12) 50%,transparent 50.2%); opacity:.45; }.camera-controls { display:flex; gap:9px; margin-top:17px; }.camera-controls button { flex:1; }.secondary-button { color:var(--ink); border:1px solid var(--line); background:#eef1e9; }.secondary-button:hover { background:#e2e8df; }.camera-help { min-height:14px; margin:12px 0 0; color:var(--muted); text-align:center; font-size:9px; }.frame-picker { display:grid; grid-template-columns:1fr 1.4fr; gap:13px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }.frame-picker strong,.frame-picker small { display:block; }.frame-picker strong { font-size:12px; }.frame-picker small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; }.frame-list { display:flex; gap:8px; }.frame-thumb { position:relative; width:63px; height:48px; overflow:hidden; cursor:pointer; border:2px solid transparent; border-radius:7px; background:linear-gradient(135deg,#98c7ba,#ef9a59); }.frame-thumb:before { content:''; position:absolute; left:29%; bottom:-11%; width:30%; height:90%; border-radius:50% 50% 0 0; background:#20342e; transform:rotate(8deg); }.frame-thumb.is-selected { border-color:var(--orange); }.frame-thumb.is-selected:after { content:'✓'; position:absolute; top:3px; right:4px; display:grid; place-items:center; width:15px; height:15px; color:var(--ink); border-radius:50%; background:var(--lime); font-size:9px; }.is-hidden { display:none !important; }.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.7); } }
@media (max-width:1100px) { .app-shell { grid-template-columns:210px minmax(0,1fr); }.sidebar { padding-inline:16px; }.main-content { padding-inline:34px; }.dashboard-grid { grid-template-columns:1fr; }.ranking-panel { min-height:0; }.podium { height:168px; }.feed-grid { grid-template-columns:1fr 1fr; }.featured-post { grid-column:1 / -1; }.featured-post .feed-image { height:230px; } }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { position:static; height:auto; padding:18px 20px; }.brand-lockup { padding:0; }.side-rule,.sidebar-spacer,.side-challenge,.profile-switcher { display:none; }.nav-stack { display:flex; gap:4px; margin-top:22px; overflow:auto; }.nav-item { flex:0 0 auto; padding:9px 11px; }.nav-item span:nth-child(2) { font-size:11px; }.main-content { padding:28px 18px 25px; }.topbar { align-items:flex-start; margin-bottom:30px; }.topbar h1 { font-size:34px; }.topbar-actions { gap:6px; }.icon-button { width:34px; height:34px; }.streak-pill { padding:8px 9px; font-size:9px; }.streak-pill strong { font-size:13px; }.mission-heading { padding:25px 22px 18px; }.mission-heading h2 { font-size:29px; }.mission-body { grid-template-columns:1fr; padding:0 22px 22px; }.mission-figure { min-height:210px; }.mission-footer { padding:13px 22px; font-size:8px; flex-wrap:wrap; }.ranking-panel { padding:22px; }.community-section { margin-top:38px; }.section-heading { display:block; }.section-heading h2 { font-size:25px; }.feed-controls { width:max-content; margin-top:16px; }.feed-grid { grid-template-columns:1fr; }.featured-post { grid-column:auto; }.featured-post .feed-image { height:193px; }.page-footer { display:grid; gap:9px; margin-top:42px; }.camera-modal { padding:22px 18px; }.camera-stage,.camera-stage video { min-height:240px; height:240px; }.camera-controls { flex-wrap:wrap; }.camera-controls button { min-width:calc(50% - 5px); }.camera-controls #publish-checkin { min-width:100%; }.frame-picker { grid-template-columns:1fr; }.frame-list { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
.demo-button { display:block; margin:11px auto 0; padding:0; color:#81908a; background:transparent; font:10px 'DM Mono',monospace; text-decoration:underline; text-underline-offset:3px; }
.demo-button:hover { color:var(--ink); }
.camera-stage.is-demo { background:linear-gradient(135deg,#32473c 0%,#8db9a7 46%,#ef9a59 47%,#e8c87b 100%); }
.camera-stage.is-demo video { display:none; }
.camera-stage.is-demo:after { content:'体验演示模式'; position:absolute; right:16px; bottom:14px; padding:5px 7px; color:var(--ink); border-radius:4px; background:var(--lime); font:9px 'DM Mono',monospace; }

/* V2 visual direction: tighter editorial grid, sharper club energy, less empty space. */
:root { --ink:#14201d; --muted:#72817a; --line:#d4dcd3; --cream:#e9ebe5; --paper:#f8f9f3; --lime:#d7ff3f; --orange:#ff765a; --radius:18px; --shadow:0 18px 34px rgba(20,32,29,.07); }
body { background:var(--cream); }
.sidebar { background:#111d1a; border-right:1px solid rgba(255,255,255,.06); }
.main-content { max-width:1460px; padding-top:32px; }
.topbar { padding-bottom:24px; border-bottom:1px solid var(--line); }
.topbar h1 { letter-spacing:-.085em; }
.mission-card,.ranking-panel { border:1px solid rgba(20,32,29,.06); box-shadow:var(--shadow); }
.mission-card { border-radius:18px; }
.mission-heading { padding:28px 30px 18px; }
.mission-heading h2 { font-size:clamp(28px,2.7vw,38px); }
.mission-body { gap:20px; padding:0 30px 24px; }
.mission-figure { min-height:224px; background:linear-gradient(135deg,#1d312b 0%,#27483c 58%,#d7ff3f 59%,#ff765a 100%); }
.mission-figure:after { content:'MOVE / PROVE / REPEAT'; position:absolute; top:18px; right:18px; color:rgba(248,249,243,.75); font:9px 'DM Mono',monospace; letter-spacing:.12em; }
.figure-sun { top:22px; left:auto; right:24px; width:82px; height:82px; background:var(--orange); opacity:1; }
.figure-floor { background:#4e7565; }
.figure-person,.figure-person * { background:#f6f2df; }
.figure-person { background:transparent; }
.figure-person .figure-head,.figure-person .figure-torso,.figure-person .figure-leg,.figure-person .figure-arm { background:#f6f2df; }
.figure-person { right:29%; bottom:21%; }
.figure-head { background:#f6f2df; }
.figure-label { color:#d7ff3f; }
.mission-footer { padding:12px 30px; }
.ranking-panel { background:#1b302a; }
.community-section { margin-top:38px; }
.section-heading { margin-bottom:17px; }
.feed-card { border-radius:15px; box-shadow:0 8px 18px rgba(20,32,29,.035); }
.feed-image { height:176px; }
.community-empty { grid-column:1 / -1; min-height:160px; display:grid; place-content:center; justify-items:center; padding:30px; color:var(--muted); text-align:center; border:1px dashed #c9d2c8; border-radius:15px; background:rgba(255,255,255,.34); }
.community-empty span { color:#84918b; font:9px 'DM Mono',monospace; letter-spacing:.1em; }
.community-empty strong { margin-top:12px; color:var(--ink); font-size:17px; }
.community-empty p { margin:7px 0 0; font-size:10px; }
.feed-card + .community-empty { display:none; }
.auth-area { display:flex; align-items:center; gap:8px; margin-right:3px; }
.auth-link-button,.auth-join-button { min-height:38px; padding:0 13px; border-radius:10px; font-size:11px; font-weight:800; }
.auth-link-button { color:var(--ink); background:transparent; }
.auth-link-button:hover { background:#fff; }
.auth-join-button { color:var(--ink); background:var(--lime); box-shadow:0 4px 0 #a9ca34; }
.auth-join-button:hover { transform:translateY(-1px); }
.profile-switcher.is-authenticated { background:rgba(215,255,63,.09); }
.profile-switcher.is-authenticated .profile-arrow { color:var(--lime); }
.auth-modal { display:grid; grid-template-columns:.78fr 1.22fr; width:min(760px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:0; border-radius:22px; background:var(--paper); box-shadow:0 35px 80px rgba(0,0,0,.28); transform:translateY(16px); transition:transform .25s; }
.modal-backdrop.is-open .auth-modal { transform:translateY(0); }
.auth-art { position:relative; min-height:500px; overflow:hidden; padding:28px; color:var(--lime); background:#172a25; }
.auth-art:before,.auth-art:after { content:''; position:absolute; border:1px solid rgba(215,255,63,.45); border-radius:50%; }
.auth-art:before { width:300px; height:300px; right:-125px; top:74px; }.auth-art:after { width:460px; height:460px; right:-235px; top:-4px; }
.auth-art span { position:absolute; z-index:1; left:28px; bottom:30px; font:800 55px/.84 'Manrope',sans-serif; letter-spacing:-.08em; }.auth-art i { color:var(--orange); font:13px 'DM Mono',monospace; font-style:normal; letter-spacing:.18em; }
.auth-content { padding:39px 42px 30px; }.auth-content h2 { margin:13px 0 12px; color:var(--ink); font-size:35px; letter-spacing:-.08em; line-height:.98; }.auth-content h2 em { color:#82961d; font-style:normal; }.auth-intro { max-width:310px; margin:0 0 23px; color:var(--muted); font-size:11px; line-height:1.7; }.auth-tabs { display:flex; gap:20px; margin-bottom:18px; border-bottom:1px solid var(--line); }.auth-tab { position:relative; padding:0 0 10px; color:#9ba7a1; background:transparent; font-size:12px; font-weight:800; }.auth-tab.is-selected { color:var(--ink); }.auth-tab.is-selected:after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange); }.form-field { display:grid; gap:6px; margin-bottom:13px; }.form-field span { color:#65736d; font:9px 'DM Mono',monospace; letter-spacing:.08em; }.form-field input { width:100%; height:42px; padding:0 12px; color:var(--ink); outline:0; border:1px solid var(--line); border-radius:9px; background:#fff; font-size:12px; }.form-field input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,118,90,.14); }.auth-submit { width:100%; margin-top:5px; }.auth-submit span { margin-left:auto; font-size:16px; }.auth-help { min-height:15px; margin:11px 0 0; color:var(--muted); font:9px 'DM Mono',monospace; line-height:1.5; }.auth-help.is-error { color:#c5533f; }.auth-help.is-success { color:#769218; }.auth-switch { margin-top:16px; padding:0; color:var(--muted); background:transparent; font-size:10px; }.auth-switch u { color:var(--ink); text-underline-offset:3px; font-weight:800; }.is-complete { color:#677a16; background:#ecf2c7; box-shadow:none; }
@media (max-width:920px) { .auth-area { margin-right:0; }.auth-link-button,.auth-join-button { padding-inline:9px; }.topbar-actions { flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width:720px) { .topbar { padding-bottom:18px; }.auth-area { order:3; width:100%; justify-content:flex-end; margin-top:5px; }.auth-modal { grid-template-columns:1fr; }.auth-art { min-height:130px; padding:20px; }.auth-art span { left:20px; bottom:18px; font-size:34px; }.auth-art:before { width:210px; height:210px; top:-74px; right:-45px; }.auth-art:after { display:none; }.auth-content { padding:27px 22px 24px; }.auth-content h2 { font-size:30px; } }
.goal-modal { width:min(790px,100%); padding:36px 40px 31px; border-radius:24px; background:var(--paper); box-shadow:0 35px 80px rgba(0,0,0,.28); transform:translateY(16px); transition:transform .25s; }.modal-backdrop.is-open .goal-modal { transform:translateY(0); }.goal-kicker { display:flex; align-items:center; gap:10px; color:#7b9215; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.goal-kicker .brand-mark { width:20px; height:20px; }.goal-kicker .brand-mark span { background:var(--orange); }.goal-modal h2 { margin:20px 0 8px; color:var(--ink); font-size:42px; letter-spacing:-.08em; }.goal-intro { max-width:440px; margin:0 0 25px; color:var(--muted); font-size:12px; line-height:1.7; }.goal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.goal-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:116px; padding:15px; overflow:hidden; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:14px; background:#fff; transition:transform .2s,border-color .2s,box-shadow .2s; }.goal-card:nth-child(5),.goal-card:nth-child(6),.goal-card:nth-child(7) { grid-column:span 1; }.goal-card:hover,.goal-card:focus-visible { border-color:var(--ink); outline:0; transform:translateY(-3px); box-shadow:0 10px 0 rgba(20,32,29,.12); }.goal-icon { display:grid; place-items:center; width:30px; height:30px; margin-bottom:18px; color:var(--ink); border-radius:9px; background:var(--lime); font-size:18px; }.goal-card strong { font-size:15px; letter-spacing:-.04em; }.goal-card small { margin-top:4px; color:var(--muted); font-size:9px; }.goal-shoulders .goal-icon { background:var(--orange); }.goal-legs .goal-icon { background:var(--blue); }.goal-abs .goal-icon { background:var(--purple); }.goal-chest .goal-icon { background:var(--mint); }.goal-back .goal-icon { background:#ffe17b; }.goal-run .goal-icon { background:#b9a6ff; }.goal-help { min-height:14px; margin:18px 0 0; color:var(--muted); font:9px 'DM Mono',monospace; }.goal-help.is-success { color:#769218; }
@media (max-width:720px) { .goal-modal { padding:26px 20px 23px; }.goal-modal h2 { font-size:34px; }.goal-grid { grid-template-columns:repeat(2,1fr); }.goal-card { min-height:106px; padding:12px; }.goal-card:nth-child(7) { grid-column:1 / -1; }.goal-icon { margin-bottom:14px; } }
.plan-modal { width:min(860px,100%); max-height:calc(100vh - 48px); overflow:auto; padding:34px 38px 27px; border-radius:24px; background:var(--paper); box-shadow:0 35px 80px rgba(0,0,0,.28); transform:translateY(16px); transition:transform .25s; }.modal-backdrop.is-open .plan-modal { transform:translateY(0); }.plan-heading { display:flex; justify-content:space-between; gap:25px; align-items:flex-start; padding-right:40px; }.plan-heading h2 { margin:15px 0 8px; color:var(--ink); font-size:34px; letter-spacing:-.08em; }.plan-heading p:last-child { max-width:430px; margin:0; color:var(--muted); font-size:11px; line-height:1.7; }.plan-mode { display:flex; flex:0 0 auto; gap:4px; padding:4px; border:1px solid var(--line); border-radius:99px; background:#edf0e9; }.plan-mode-button { padding:8px 12px; color:var(--muted); border-radius:99px; background:transparent; font-size:10px; font-weight:800; }.plan-mode-button.is-selected { color:var(--ink); background:#fff; box-shadow:0 2px 8px rgba(20,32,29,.08); }.plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:25px; }.plan-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:133px; padding:15px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:14px; background:#fff; transition:transform .2s,border-color .2s,box-shadow .2s,background .2s; }.plan-card:hover,.plan-card:focus-visible { outline:0; transform:translateY(-3px); border-color:var(--ink); box-shadow:0 10px 0 rgba(20,32,29,.12); }.plan-card.is-selected { border:2px solid var(--ink); background:#eff9c9; box-shadow:0 6px 0 var(--lime); transform:translateY(-2px); }.plan-card-icon { display:grid; place-items:center; width:31px; height:31px; margin-bottom:19px; color:var(--ink); border-radius:9px; background:var(--lime); font-size:18px; }.plan-card strong { font-size:15px; letter-spacing:-.04em; }.plan-card small { margin-top:4px; color:var(--muted); font-size:9px; }.plan-card i { position:absolute; top:15px; right:15px; color:#a5b1aa; font:9px 'DM Mono',monospace; font-style:normal; }.plan-card.is-selected i { color:var(--ink); }.plan-card.goal-shoulders .plan-card-icon { background:var(--orange); }.plan-card.goal-legs .plan-card-icon { background:var(--blue); }.plan-card.goal-abs .plan-card-icon { background:var(--purple); }.plan-card.goal-chest .plan-card-icon { background:var(--mint); }.plan-card.goal-back .plan-card-icon { background:#ffe17b; }.plan-card.goal-run .plan-card-icon { background:#b9a6ff; }.plan-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:23px; padding-top:17px; border-top:1px solid var(--line); }.plan-help { min-height:15px; margin:0; color:var(--muted); font:9px 'DM Mono',monospace; }.plan-help.is-success { color:#769218; }.plan-footer .primary-button { min-width:185px; }.plan-footer .primary-button span { margin-left:auto; font-size:16px; }
@media (max-width:720px) { .plan-modal { padding:26px 20px 22px; }.plan-heading { display:block; padding-right:24px; }.plan-heading h2 { font-size:29px; }.plan-mode { width:max-content; margin-top:17px; }.plan-grid { grid-template-columns:repeat(2,1fr); margin-top:20px; }.plan-card { min-height:116px; padding:12px; }.plan-card-icon { margin-bottom:15px; }.plan-footer { align-items:stretch; flex-direction:column; gap:12px; }.plan-footer .primary-button { width:100%; } }

.subplan-panel { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.subplan-heading { display:flex; justify-content:space-between; gap:14px; align-items:end; margin-bottom:12px; }
.subplan-heading strong { display:block; margin-top:7px; font-size:14px; }
.subplan-heading > span { color:var(--muted); font:9px 'DM Mono',monospace; }
.subplan-meta { display:flex; align-items:center; gap:9px; color:var(--muted); font:9px 'DM Mono',monospace; }
.motion-toggle { min-height:28px; padding:0 10px; color:var(--ink); border:1px solid var(--line); border-radius:99px; background:#fff; font:8px 'DM Mono',monospace; }
.motion-toggle:hover,.motion-toggle:focus-visible { outline:0; border-color:var(--ink); background:var(--lime); }
.subplan-sections { display:grid; gap:14px; }
.subplan-section { padding:13px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.subplan-section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.subplan-section-title strong { font-size:12px; }
.subplan-section-title small { color:var(--muted); font:9px 'DM Mono',monospace; }
.exercise-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.exercise-card { position:relative; min-height:120px; padding:12px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:11px; background:#f8f9f3; transition:transform .2s,border-color .2s,box-shadow .2s,background .2s; }
.exercise-card:hover,.exercise-card:focus-visible { outline:0; border-color:var(--ink); transform:translateY(-2px); box-shadow:0 7px 0 rgba(20,32,29,.11); }
.exercise-card.is-selected { border:2px solid var(--ink); background:#eff9c9; box-shadow:0 5px 0 var(--lime); }
.exercise-index { position:absolute; top:10px; right:10px; color:#9ca8a1; font:9px 'DM Mono',monospace; }
.exercise-card strong { display:block; padding-right:24px; font-size:12px; }
.exercise-card small { display:block; margin-top:5px; color:var(--muted); font-size:9px; }
.exercise-card em { display:block; margin-top:12px; color:#7b9215; font:9px 'DM Mono',monospace; font-style:normal; }
.exercise-card p { margin:6px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
@media (max-width:720px) { .subplan-heading { display:block; }.subplan-meta { margin-top:9px; }.exercise-grid { grid-template-columns:repeat(2,1fr); } }

.exercise-visual { position:relative; display:block; height:62px; margin:-4px -4px 12px; overflow:hidden; border-radius:9px; color:#183c32; background:linear-gradient(135deg,#eef4d6 0%,#e5edc8 54%,#d7ff3f 55%,#b9d944 100%); isolation:isolate; }
.exercise-visual:after { content:''; position:absolute; z-index:-1; right:-15px; bottom:-31px; width:88px; height:88px; border:1px solid rgba(20,32,29,.13); border-radius:50%; }
.exercise-card.is-selected .exercise-visual { background:linear-gradient(135deg,#f5f8dc 0%,#ecf3c8 54%,#d7ff3f 55%,#b4d23b 100%); }
.exercise-motion-label { position:absolute; z-index:2; top:6px; left:7px; color:rgba(20,32,29,.52); font:7px 'DM Mono',monospace; letter-spacing:.08em; }
.exercise-motion-loop { position:absolute; z-index:2; right:7px; bottom:5px; color:rgba(20,32,29,.55); font:12px 'DM Mono',monospace; }
.exercise-visual svg { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.visual-floor { fill:none; stroke:rgba(20,32,29,.25); stroke-width:1.5; stroke-linecap:round; }
.visual-person { fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; transform-box:fill-box; transform-origin:center; }
.visual-head { fill:currentColor; stroke:none; }
.visual-equipment { fill:none; stroke:var(--orange); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform-box:fill-box; transform-origin:center; }
.visual-bar,.visual-band,.visual-weight { opacity:0; }
.visual-weight { fill:var(--orange); stroke:none; }
.exercise-visual--curl .visual-equipment,.exercise-visual--pushdown .visual-equipment,.exercise-visual--press .visual-equipment,.exercise-visual--raise .visual-equipment,.exercise-visual--facepull .visual-equipment,.exercise-visual--bench .visual-equipment,.exercise-visual--pulldown .visual-equipment,.exercise-visual--row .visual-equipment,.exercise-visual--bandpull .visual-equipment,.exercise-visual--fly .visual-equipment,.exercise-visual--squat .visual-equipment,.exercise-visual--hinge .visual-equipment { opacity:1; }
.exercise-visual--curl .visual-weight,.exercise-visual--press .visual-weight,.exercise-visual--raise .visual-weight,.exercise-visual--bench .visual-weight,.exercise-visual--fly .visual-weight,.exercise-visual--squat .visual-weight,.exercise-visual--hinge .visual-weight { opacity:1; }
.exercise-visual--bench .visual-bar,.exercise-visual--press .visual-bar,.exercise-visual--pulldown .visual-bar,.exercise-visual--hinge .visual-bar { opacity:1; }
.exercise-visual--pushdown .visual-band,.exercise-visual--facepull .visual-band,.exercise-visual--row .visual-band,.exercise-visual--bandpull .visual-band { opacity:1; }
.exercise-visual--curl .visual-arm { animation:visual-curl 1.3s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--pushdown .visual-arm-right { animation:visual-pushdown 1.15s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--press .visual-person { animation:visual-press 1.35s ease-in-out infinite alternate; }
.exercise-visual--raise .visual-arm { animation:visual-raise 1.35s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--facepull .visual-arm { animation:visual-facepull 1.25s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--bench .visual-person,.exercise-visual--fly .visual-person { transform:translate(1px,7px) rotate(86deg) scale(.84); }
.exercise-visual--bench .visual-equipment { animation:visual-bench 1.25s ease-in-out infinite alternate; }
.exercise-visual--pulldown .visual-arm { animation:visual-pulldown 1.35s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--row .visual-person { animation:visual-row 1.45s ease-in-out infinite alternate; }
.exercise-visual--bandpull .visual-arm { animation:visual-bandpull 1.3s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--fly .visual-arm { animation:visual-fly 1.4s ease-in-out infinite alternate; transform-origin:55px 28px; }
.exercise-visual--squat .visual-person { animation:visual-squat 1.35s ease-in-out infinite; }
.exercise-visual--lunge .visual-leg-left { animation:visual-lunge 1.45s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--hinge .visual-person { animation:visual-hinge 1.45s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--pushup .visual-person { animation:visual-pushup 1.25s ease-in-out infinite; transform-origin:55px 42px; }
.exercise-visual--plank .visual-person { transform:translate(-2px,5px) rotate(69deg) scale(.9); }
.exercise-visual--deadbug .visual-person,.exercise-visual--bicycle .visual-person { transform:translate(0,8px) rotate(88deg) scale(.88); }
.exercise-visual--mountain .visual-person { transform:translate(-2px,5px) rotate(69deg) scale(.9); }
.exercise-visual--deadbug .visual-leg-left,.exercise-visual--deadbug .visual-arm-left { animation:visual-deadbug 1.15s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--mountain .visual-leg-left,.exercise-visual--mountain .visual-leg-right { animation:visual-mountain .75s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--bicycle .visual-leg-left,.exercise-visual--bicycle .visual-leg-right { animation:visual-bike .85s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--run .visual-person { animation:visual-run-bob .55s ease-in-out infinite alternate; }
.exercise-visual--run .visual-leg-left { animation:visual-run .55s ease-in-out infinite alternate; transform-origin:55px 42px; }
.exercise-visual--run .visual-leg-right { animation:visual-run .55s ease-in-out -.27s infinite alternate; transform-origin:55px 42px; }
@keyframes visual-curl { to { transform:rotate(-27deg); } }
@keyframes visual-pushdown { to { transform:rotate(28deg); } }
@keyframes visual-press { to { transform:translateY(-5px); } }
@keyframes visual-raise { to { transform:rotate(-21deg); } }
@keyframes visual-facepull { to { transform:rotate(19deg) translateX(-3px); } }
@keyframes visual-bench { to { transform:translateY(6px); } }
@keyframes visual-pulldown { to { transform:rotate(18deg) translateY(3px); } }
@keyframes visual-row { to { transform:translateX(-5px) rotate(-8deg); } }
@keyframes visual-bandpull { to { transform:rotate(-23deg); } }
@keyframes visual-fly { to { transform:rotate(32deg); } }
@keyframes visual-squat { 50% { transform:translateY(9px) scaleY(.86); } }
@keyframes visual-lunge { to { transform:rotate(-23deg); } }
@keyframes visual-hinge { to { transform:rotate(24deg); } }
@keyframes visual-pushup { 0%,100% { transform:translate(-2px,5px) rotate(69deg) scale(.9); } 50% { transform:translate(4px,9px) rotate(69deg) scale(.86); } }
@keyframes visual-deadbug { to { transform:rotate(28deg); } }
@keyframes visual-mountain { to { transform:rotate(-31deg); } }
@keyframes visual-bike { to { transform:rotate(35deg); } }
@keyframes visual-run { to { transform:rotate(36deg); } }
@keyframes visual-run-bob { to { transform:translateY(-2px); } }
@media (max-width:720px) { .exercise-visual { height:58px; } }
html:not(.exercise-motion-enabled) .exercise-visual * { animation-play-state:paused !important; }

.account-task-progress { margin:0 30px 18px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#f1f4ea; }
.account-task-progress-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.account-task-progress-head strong { display:block; margin-top:7px; font-size:14px; }
.account-task-progress-head > span { color:var(--ink); font:800 12px 'DM Mono',monospace; }
.account-task-progress-bar { height:6px; margin:13px 0; overflow:hidden; border-radius:99px; background:#dce4d5; }
.account-task-progress-bar span { display:block; width:0; height:100%; border-radius:inherit; background:var(--lime); transition:width .25s ease; }
.account-task-list { display:grid; gap:7px; }
.account-task-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 11px; border-radius:10px; background:#fff; }
.account-task-copy { display:flex; align-items:center; gap:10px; min-width:0; }
.account-task-index { display:grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:8px; background:#e8eddf; font:9px 'DM Mono',monospace; }
.account-task-row.is-complete .account-task-index { background:var(--lime); }
.account-task-copy div { display:grid; gap:3px; min-width:0; }
.account-task-copy strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.account-task-copy small { color:var(--muted); font-size:9px; }
.account-task-status { padding:5px 8px; color:#7b867f; border-radius:99px; background:#edf0e9; font:8px 'DM Mono',monospace; }
.account-task-row.is-complete .account-task-status { color:#496015; background:#e7f5a8; }
.account-task-empty { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
@media (max-width:720px) {
  .account-task-progress { margin:0 22px 16px; padding:14px; }
  .account-task-row { grid-template-columns:1fr; }
  .account-task-status { width:max-content; margin-left:35px; }
}

@media (prefers-reduced-motion:reduce) {
  html.exercise-motion-enabled .exercise-visual .visual-person,
  html.exercise-motion-enabled .exercise-visual .visual-arm,
  html.exercise-motion-enabled .exercise-visual .visual-leg,
  html.exercise-motion-enabled .exercise-visual .visual-equipment { animation-duration:1.2s !important; animation-iteration-count:infinite !important; }
  html:not(.exercise-motion-enabled) .exercise-visual * { animation:none !important; }
}

/* Data-first mission and live ranking. */
#today,#community,#ranking { scroll-margin-top:24px; }
.dashboard-grid { align-items:start; }
.mission-body { display:block; padding:0 36px 28px; }
.mission-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:12px; }
.mission-stats .stat-row { display:grid; gap:7px; }
.mission-stats .primary-button { grid-column:1 / -1; margin-top:8px; }
.ranking-overview { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; margin:22px 0 14px; }
.ranking-overview > div { display:grid; gap:5px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.045); }
.ranking-overview span { color:#94a59f; font-size:9px; }
.ranking-overview strong { color:#f7f8f1; font:800 18px 'DM Mono',monospace; }
.ranking-overview strong b { color:var(--lime); font:inherit; }
.ranking-empty { margin:25px 0 8px; padding:22px 15px; color:#91a29c; text-align:center; border:1px dashed rgba(255,255,255,.14); border-radius:11px; font-size:10px; line-height:1.7; }
.dynamic-ranking-list { display:grid; gap:8px; }
.dynamic-rank-row { display:grid; grid-template-columns:24px 32px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 9px; border-radius:11px; background:rgba(255,255,255,.045); }
.dynamic-rank-row.is-you { background:rgba(203,241,86,.11); }
.dynamic-rank-position { color:#91a29c; font:9px 'DM Mono',monospace; }
.dynamic-rank-row:first-child .dynamic-rank-position { color:var(--lime); }
.dynamic-rank-row .avatar { width:30px; height:30px; color:var(--ink); background:#b7e7d8; font-size:10px; }
.dynamic-rank-copy { min-width:0; }
.dynamic-rank-copy strong { display:block; overflow:hidden; color:#f7f8f1; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.dynamic-rank-copy strong em { margin-left:5px; color:var(--lime); font-size:8px; font-style:normal; }
.dynamic-rank-copy small { display:block; margin-top:4px; overflow:hidden; color:#91a29c; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.dynamic-rank-bar { display:block; height:3px; margin-top:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.1); }
.dynamic-rank-bar i { display:block; height:100%; border-radius:inherit; background:var(--lime); }
.dynamic-rank-volume { color:var(--lime); font:800 11px 'DM Mono',monospace; white-space:nowrap; }
.dynamic-rank-volume small { color:#91a29c; font-size:7px; }
.publish-caption-field { position:relative; display:grid; gap:7px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.publish-caption-field > span { color:var(--ink); font-size:11px; font-weight:800; }
.publish-caption-field textarea { width:100%; min-height:76px; resize:vertical; padding:11px 13px 22px; color:var(--ink); border:1px solid var(--line); border-radius:11px; outline:0; background:#f7f8f2; font:11px/1.6 inherit; }
.publish-caption-field textarea:focus { border-color:#8da62f; box-shadow:0 0 0 3px rgba(203,241,86,.24); }
.publish-caption-field small { position:absolute; right:11px; bottom:7px; color:#8c9993; font:8px 'DM Mono',monospace; }
.publish-caption-field small b { font:inherit; }
.feed-image img { display:block; width:100%; height:100%; object-fit:cover; }
.feed-image-demo { display:grid; place-items:center; color:#9aaba4; background:#243b35; font:9px 'DM Mono',monospace; letter-spacing:.08em; }
.plan-duration { margin:16px 0 0; padding:14px; border:1px solid var(--line); border-radius:14px; }
.plan-duration legend { display:flex; align-items:center; gap:12px; padding:0 8px; }
.plan-duration legend strong { font-size:12px; }
.plan-duration-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.plan-duration-options button { display:grid; gap:4px; padding:12px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:11px; background:#f7f8f2; }
.plan-duration-options button strong { font-size:13px; }
.plan-duration-options button small { color:var(--muted); font-size:9px; }
.plan-duration-options button.is-selected { border-color:var(--ink); background:#effac6; box-shadow:0 4px 0 var(--lime); }
.plan-page { width:100%; }
.plan-page .plan-modal { width:100%; max-height:none; overflow:visible; padding:0; border-radius:0; background:transparent; box-shadow:none; transform:none; }
.plan-page .plan-heading { padding-right:0; }
.is-content-hidden { display:none !important; }
.dashboard-grid.is-today-only { grid-template-columns:minmax(0,1fr); }
.dashboard-grid.is-today-only .ranking-panel { display:none; }
.dashboard-grid.is-ranking-only { grid-template-columns:minmax(0,1fr); }
.dashboard-grid.is-ranking-only .mission-card { display:none; }
.dashboard-grid.is-ranking-only .ranking-panel { min-height:420px; }
.community-section.is-active-view { margin-top:0; }
@media (max-width:720px) {
  .mission-stats { grid-template-columns:1fr 1fr; }
  .ranking-overview { grid-template-columns:1fr 1fr; }
  .plan-duration-options { grid-template-columns:1fr 1fr; }
}