:root { --ink:#171717; --charcoal:#20201f; --paper:#f6f6f4; --line:#e7e7e4; --muted:#777774; --soft:#ecece8; --lime:#d8ff5f; --coral:#ff7059; --radius:18px; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans","Noto Sans KR",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid rgba(109,152,255,.45); outline-offset:2px; }
.hidden { display:none !important; }
.brand { display:inline-flex; gap:9px; align-items:center; color:var(--ink); font-size:20px; font-weight:700; letter-spacing:-1.15px; text-decoration:none; }
.brand-symbol { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--ink); color:white; font:500 16px/1 "DM Mono",monospace; }
.eyebrow { margin:0 0 7px; color:#8d8d88; font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.08em; }
.workspace { min-height:100vh; display:flex; }
.sidebar { position:fixed; z-index:10; inset:0 auto 0 0; width:242px; display:flex; flex-direction:column; padding:30px 20px 20px; border-right:1px solid var(--line); background:#fafaf8; }
.side-nav { display:grid; gap:4px; margin-top:60px; }
.nav-item { border:0; border-radius:10px; display:flex; align-items:center; gap:13px; width:100%; padding:12px 11px; color:#777774; background:transparent; text-align:left; font-size:14px; font-weight:500; transition:.18s ease; }
.nav-item:hover { color:var(--ink); background:#f0f0ed; }.nav-item.active { color:var(--ink); background:#e7e7e2; font-weight:700; }
.nav-icon { display:inline-grid; place-items:center; width:19px; color:inherit; font-size:20px; line-height:1; }
.sidebar-bottom { margin-top:auto; }.streak-mini { display:flex; align-items:center; gap:10px; padding:13px 10px 15px; border-bottom:1px solid var(--line); }.streak-fire { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e9ffb2; color:#596c18; font-size:10px; }.streak-mini div { display:grid; gap:1px; }.streak-mini strong { font-size:12px; }.streak-mini span:not(.streak-fire) { color:var(--muted); font-size:11px; }
.quiet-button { display:flex; justify-content:space-between; width:100%; margin-top:16px; padding:0 9px; border:0; background:none; color:#898986; font-size:12px; }.quiet-button:hover { color:var(--ink); }
.main-content { width:min(100%,1450px); margin-left:242px; padding:29px 45px 70px; }.topbar { display:flex; justify-content:space-between; align-items:center; min-height:55px; margin-bottom:44px; }.topbar h1 { margin:0; font-size:25px; letter-spacing:-1.4px; }.topbar-user { display:flex; align-items:center; gap:11px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border:0; border-radius:10px; font-size:13px; font-weight:700; transition:transform .16s,box-shadow .16s,background .16s; }.button:hover { transform:translateY(-1px); }.button:active { transform:translateY(0); }.button-dark { color:white; background:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.12); }.button-dark:hover { background:#343432; }.button-primary { color:#243000; background:var(--lime); box-shadow:0 8px 18px rgba(166,212,56,.24); }.button-small { min-height:38px; padding:0 13px; font-size:12px; }.user-chip { display:flex; align-items:center; gap:8px; height:38px; padding:3px 9px 3px 4px; border:1px solid var(--line); border-radius:21px; background:white; font-size:12px; font-weight:600; }.user-chip img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#dfdfda; }.chevron { color:#a0a09b; font-size:15px; }
.view { display:none; animation:fadeIn .25s ease; }.view.active-view { display:block; } @keyframes fadeIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.dashboard-grid { display:grid; grid-template-columns:minmax(420px,1.7fr) minmax(275px,.8fr); gap:20px; }.panel { border:1px solid var(--line); border-radius:var(--radius); background:#fff; }.timer-panel { position:relative; overflow:hidden; min-height:523px; padding:27px 31px 21px; background:#20201f; color:white; border:0; }.panel-top { display:flex; justify-content:space-between; align-items:flex-start; }.panel h2 { margin:0; font-size:18px; letter-spacing:-.9px; }.timer-panel .eyebrow { color:#999993; }.icon-button { display:grid; place-items:center; padding:0; width:33px; height:33px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:inherit; font-size:17px; }.icon-button:hover { background:rgba(255,255,255,.18); }.timer-stage { position:relative; display:grid; place-items:center; height:265px; isolation:isolate; }.timer-orbit { position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; }.orbit-one { width:220px; height:220px; }.orbit-two { width:174px; height:174px; border-color:rgba(216,255,95,.6); box-shadow:0 0 0 7px rgba(216,255,95,.035); }.timer-display { display:grid; place-items:center; gap:10px; z-index:1; }.timer-time { font:500 clamp(54px,7vw,76px)/.9 "DM Mono",monospace; letter-spacing:-.09em; }.timer-caption { color:#a9a9a2; font:500 10px/1 "DM Mono",monospace; letter-spacing:.13em; }.timer-tabs { display:flex; justify-content:center; gap:8px; margin:-2px auto 18px; }.timer-tab { display:flex; gap:5px; align-items:center; min-height:31px; padding:0 11px; border:1px solid transparent; border-radius:18px; color:#969691; background:transparent; font-size:12px; }.timer-tab span { color:#6e6e69; font:10px "DM Mono",monospace; }.timer-tab.active { color:#fff; border-color:#5d5d58; background:#30302e; }.timer-tab.active span { color:#c9c9c1; }.timer-actions { display:flex; justify-content:center; align-items:center; gap:14px; }.round-button { width:42px; height:42px; border:1px solid #52524e; border-radius:50%; color:#d6d6cf; background:transparent; font-size:24px; line-height:1; }.round-button:hover { color:white; background:#343431; }.button-timer { min-width:174px; min-height:51px; font-size:14px; }.timer-settings { position:absolute; z-index:3; right:26px; bottom:82px; display:grid; grid-template-columns:100px 1fr; gap:8px 15px; width:290px; padding:16px; border:1px solid #454540; border-radius:12px; background:#2b2b28; box-shadow:0 15px 35px rgba(0,0,0,.3); font-size:12px; }.timer-settings > span { align-self:center; color:#bcbcb4; }.timer-settings div { display:flex; gap:5px; }.timer-settings button { border:1px solid #50504b; border-radius:6px; padding:5px 8px; color:#adada6; background:transparent; font:10px "DM Mono",monospace; }.timer-settings button.active { border-color:#d8ff5f; color:#e5ff9d; background:rgba(216,255,95,.08); }
.today-side { display:grid; grid-template-rows:1fr .69fr; gap:20px; }.goal-card { display:flex; flex-direction:column; padding:27px 26px 21px; }.text-button { border:0; padding:0; color:#777774; background:none; font-size:12px; text-decoration:underline; text-underline-offset:3px; }.text-button:hover { color:var(--ink); }.progress-track { height:8px; margin:31px 0 13px; border-radius:7px; overflow:hidden; background:#efefeb; }.progress-track span { display:block; width:0%; height:100%; border-radius:inherit; background:var(--ink); transition:width .4s ease; }.muted { margin:0; color:var(--muted); font-size:12px; }.goal-stat-row { display:flex; justify-content:space-between; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); color:#858581; font-size:11px; }.goal-stat-row strong { margin-left:3px; color:var(--ink); font:500 11px "DM Mono",monospace; }.focus-tip { position:relative; display:flex; gap:12px; padding:25px 26px; overflow:hidden; background:#eeede8; }.focus-tip:after { content:""; position:absolute; right:-22px; bottom:-48px; width:130px; height:130px; border:1px solid #d5d4cd; border-radius:50%; }.tip-dot { color:#97bc24; font-size:12px; }.focus-tip .eyebrow { margin-bottom:8px; }.focus-tip p:not(.eyebrow) { margin:0; font-size:16px; font-weight:600; letter-spacing:-.7px; line-height:1.4; }.tip-index { position:absolute; right:24px; top:28px; color:#9a9a94; font:10px "DM Mono",monospace; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-top:43px; margin-bottom:15px; }.section-heading.compact { margin-top:41px; }.section-heading h2 { margin:0; font-size:18px; letter-spacing:-.9px; }.section-meta { color:#84847f; font:11px "DM Mono",monospace; }.weekly-card { min-height:187px; padding:21px 24px 19px; }.weekly-chart { display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:15px; height:144px; }.chart-day { display:grid; grid-template-rows:1fr auto; gap:9px; height:100%; text-align:center; }.chart-bar-wrap { display:flex; align-items:flex-end; justify-content:center; height:100%; }.chart-bar { width:min(40px,70%); min-height:4px; border-radius:6px 6px 2px 2px; background:#e5e5e1; transition:height .3s ease; }.chart-day.today .chart-bar { background:var(--ink); }.chart-label { color:#999994; font:10px "DM Mono",monospace; }.chart-day.today .chart-label { color:var(--ink); font-weight:700; }.activity-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.activity-empty { grid-column:1/-1; display:grid; place-items:center; min-height:112px; border:1px dashed #d7d7d2; border-radius:14px; color:#90908c; font-size:13px; }.activity-card { display:flex; gap:11px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:13px; background:white; }.activity-card img { flex:0 0 auto; width:34px; height:34px; border-radius:50%; object-fit:cover; background:#e5e5df; }.activity-card div { min-width:0; }.activity-card strong { display:block; overflow:hidden; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }.activity-card p { display:-webkit-box; overflow:hidden; margin:3px 0 0; color:#777774; font-size:11px; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.page-intro { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }.page-intro h2 { margin:0 0 7px; font-size:31px; letter-spacing:-1.7px; }.page-intro p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; }.feed-filter { display:flex; align-items:center; gap:8px; padding:10px 13px; margin-bottom:15px; }.filter { min-height:31px; padding:0 10px; border:0; border-radius:6px; color:#777774; background:transparent; font-size:12px; }.filter.active { color:var(--ink); background:#efefeb; font-weight:700; }.feed-filter span { margin-left:auto; color:#a0a09b; font-size:11px; }.feed-list { display:grid; gap:12px; max-width:820px; }.feed-card { display:grid; grid-template-columns:auto 1fr; gap:13px; padding:20px; border:1px solid var(--line); border-radius:14px; background:white; }.feed-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#e8e8e3; }.feed-head { display:flex; align-items:baseline; gap:8px; }.feed-head strong { font-size:13px; }.feed-head time { color:#999994; font-size:11px; }.feed-body { min-width:0; }.feed-body p { margin:8px 0 0; font-size:14px; line-height:1.65; white-space:pre-wrap; }.feed-image { display:block; width:100%; max-height:360px; margin-top:13px; border-radius:10px; object-fit:cover; }.feed-tag { display:inline-block; margin-top:12px; padding:5px 7px; border-radius:5px; color:#667221; background:#eff7d7; font:10px "DM Mono",monospace; }.empty-state { display:grid; justify-items:center; gap:10px; padding:66px 20px; border:1px dashed #d9d9d3; border-radius:14px; color:#777774; text-align:center; font-size:13px; }.empty-state span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#5d641d; background:#edfac6; }.empty-state .button { margin-top:7px; }
.ranking-week { display:grid; justify-items:end; gap:3px; color:#969691; font:10px "DM Mono",monospace; }.ranking-week strong { color:var(--ink); font-weight:500; }.ranking-hero { display:flex; justify-content:space-between; min-height:173px; padding:29px 34px; margin-bottom:17px; color:white; background:var(--ink); border:0; }.ranking-summary { display:flex; align-items:center; gap:17px; }.ranking-mark { display:grid; place-items:center; width:55px; height:55px; border-radius:15px; color:#253000; background:var(--lime); font-size:30px; }.ranking-hero .eyebrow { color:#aaa9a1; }.ranking-hero h3 { margin:0 0 7px; font-size:16px; }.ranking-hero h3 strong { font:500 36px/.8 "DM Mono",monospace; }.ranking-hero p:not(.eyebrow) { margin:0; color:#b3b3ad; font-size:12px; }.rank-quote { align-self:flex-end; padding-bottom:2px; color:#c6c6c0; font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.75px; }.rank-quote em { color:#e0ff7c; font-style:normal; }.ranking-table { overflow:hidden; }.table-head,.rank-row { display:grid; grid-template-columns:58px 1fr 125px; align-items:center; }.table-head { padding:12px 24px; color:#a0a09b; border-bottom:1px solid var(--line); font:10px "DM Mono",monospace; }.table-head span:last-child { text-align:right; }.rank-row { min-height:64px; padding:0 24px; border-bottom:1px solid #f0f0ed; }.rank-row:last-child { border:0; }.rank-row.me { margin:0 10px; padding:0 14px; min-height:54px; border-radius:9px; background:#f3f5ea; }.rank-number { font:500 14px "DM Mono",monospace; }.rank-number.top { color:#92b221; }.rank-person { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }.rank-person img { width:30px; height:30px; border-radius:50%; object-fit:cover; background:#e4e4df; }.rank-time { text-align:right; font:500 12px "DM Mono",monospace; }.rank-empty { padding:48px; color:#898984; text-align:center; font-size:13px; }
.growth-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.metric-card { display:grid; gap:10px; padding:22px 23px; border:1px solid var(--line); border-radius:14px; background:white; }.metric-card span,.metric-card small { color:#8b8b85; font-size:11px; }.metric-card strong { font-size:25px; letter-spacing:-1.2px; }.metric-card small { padding-top:10px; border-top:1px solid var(--line); }.attendance-calendar { padding:19px 23px 23px; }.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }.calendar-weekdays { margin-bottom:10px; color:#a0a09b; font:10px "DM Mono",monospace; text-align:center; }.calendar-day { aspect-ratio:1; max-width:48px; justify-self:center; width:100%; border:1px solid #eeeeea; border-radius:7px; background:#fafaf8; }.calendar-day.empty { visibility:hidden; }.calendar-day.level-1 { border-color:#dceba9; background:#eff8d0; }.calendar-day.level-2 { border-color:#c9e579; background:#dcefa7; }.calendar-day.level-3 { border-color:#a8c84b; background:#bad65f; }.calendar-day.level-4 { border-color:#7e9c2c; background:#91af35; }.badge-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:13px; }.badge-card { display:grid; justify-items:center; gap:11px; min-height:176px; padding:20px 12px 17px; border:1px solid var(--line); border-radius:14px; background:white; text-align:center; }.badge-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; color:#5a6c16; background:#e6f4b6; font-size:25px; }.badge-card.locked { filter:grayscale(1); }.badge-card.locked .badge-icon { color:#a6a6a1; background:#eeeeea; }.badge-card strong { font-size:12px; }.badge-card p { margin:0; color:#888883; font-size:11px; line-height:1.45; }
.button-ghost { color:var(--ink); background:white; border:1px solid var(--line); box-shadow:none; }.button-ghost:hover { background:#f6f6f3; }.friend-search-card { padding:20px 22px; }.friend-search-card label { display:block; margin-bottom:8px; font-size:12px; font-weight:700; }.friend-search-card input { width:100%; min-height:45px; padding:0 14px; border:1px solid #deded9; border-radius:8px; background:white; font-size:13px; }.friend-search-card input::placeholder { color:#afafa9; }.friend-results { display:grid; gap:0; margin-top:6px; }.friend-results:not(:empty) { margin-top:12px; border-top:1px solid var(--line); }.friend-panel { overflow:hidden; }.friend-row { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 20px; border-bottom:1px solid #f0f0ed; }.friend-row:last-child { border:0; }.friend-row img { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#e4e4df; }.friend-meta { flex:1; min-width:0; }.friend-meta strong { display:block; overflow:hidden; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }.friend-meta small { display:block; margin-top:2px; color:#8b8b85; font-size:11px; }.friend-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.friend-actions .button { min-height:34px; padding:0 12px; font-size:11px; }.friend-status { color:#667221; font-size:11px; font-weight:700; }.friend-empty { margin:0; padding:48px 20px; color:#898984; text-align:center; font-size:13px; }
.dialog { width:min(550px,calc(100% - 32px)); padding:0; border:0; border-radius:16px; background:white; box-shadow:0 20px 80px rgba(0,0,0,.22); }.dialog::backdrop { background:rgba(20,20,18,.48); backdrop-filter:blur(2px); }.dialog form { padding:25px; }.dialog-head { display:flex; justify-content:space-between; margin-bottom:20px; }.dialog h2 { margin:0; font-size:20px; letter-spacing:-1px; }.dialog .icon-button { color:#777773; background:#f0f0ed; }.dialog textarea { resize:vertical; width:100%; min-height:130px; padding:14px; border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:14px; line-height:1.5; }.dialog textarea::placeholder { color:#aaa9a4; }.dialog-foot { display:flex; align-items:center; gap:11px; margin-top:15px; }.upload-label { display:inline-flex; align-items:center; gap:6px; color:#61615d; font-size:12px; font-weight:600; }.upload-label span { font-size:17px; }.upload-label input { display:none; }.dialog-foot > span { margin-left:auto; color:#999994; font:10px "DM Mono",monospace; }.upload-preview { position:relative; margin-top:12px; }.upload-preview img { display:block; width:100%; max-height:250px; border-radius:10px; object-fit:cover; }.upload-preview button { position:absolute; top:8px; right:8px; width:27px; height:27px; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.55); }.small-dialog { width:min(400px,calc(100% - 32px)); }.field { display:grid; gap:7px; margin-bottom:14px; }.field label { font-size:12px; font-weight:700; }.label-row { display:flex; justify-content:space-between; }.label-row span { color:#999994; font-size:10px; }.field input,.field select { min-height:45px; width:100%; padding:0 12px; border:1px solid #deded9; border-radius:8px; background:white; font-size:13px; }.field input::placeholder { color:#afafa9; }.full { width:100%; margin-top:6px; }.toast { position:fixed; z-index:30; left:50%; bottom:30px; max-width:calc(100% - 32px); padding:12px 16px; border-radius:9px; color:white; background:#292927; box-shadow:0 8px 20px rgba(0,0,0,.16); font-size:13px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.23s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }
.auth-screen { display:grid; grid-template-columns:minmax(420px,1.12fr) minmax(460px,.88fr); min-height:100vh; background:#fff; }.auth-aside { position:relative; display:flex; flex-direction:column; min-height:100vh; padding:45px clamp(42px,6vw,95px); overflow:hidden; color:white; background:#20201f; }.auth-aside:before,.auth-aside:after { position:absolute; border:1px solid rgba(216,255,95,.3); border-radius:50%; content:""; }.auth-aside:before { right:-200px; bottom:-200px; width:680px; height:680px; }.auth-aside:after { right:-91px; bottom:-91px; width:460px; height:460px; border-color:rgba(255,255,255,.12); }.brand-light { position:relative; z-index:1; color:white; }.brand-light .brand-symbol { color:#2b310e; background:var(--lime); }.auth-copy { position:relative; z-index:1; margin:auto 0; max-width:450px; }.eyebrow-light { color:#b8bf9f; }.auth-copy h1 { margin:0 0 21px; font-size:clamp(39px,4.4vw,62px); font-weight:600; letter-spacing:-3.3px; line-height:1.18; }.auth-copy p:not(.eyebrow) { max-width:375px; margin:0; color:#b9b9b3; font-size:15px; line-height:1.75; }.auth-proof { position:relative; z-index:1; display:flex; gap:24px; padding-top:29px; border-top:1px solid rgba(255,255,255,.13); }.auth-proof div { display:grid; gap:7px; }.auth-proof strong { color:var(--lime); font:500 11px "DM Mono",monospace; }.auth-proof span { color:#c2c2bd; font-size:11px; }.auth-footer { position:relative; z-index:1; margin:28px 0 0; color:#7d7d77; font:10px "DM Mono",monospace; }.auth-main { display:grid; place-items:center; padding:35px; }.auth-card { width:min(390px,100%); }.mobile-brand { display:none; }.auth-heading { margin-bottom:27px; }.auth-heading h2 { margin:0 0 8px; font-size:26px; letter-spacing:-1.5px; }.auth-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:13px; }.button-google { width:100%; border:1px solid #deded9; color:#333331; background:white; }.button-google svg { width:18px; height:18px; }.button-google:hover { background:#f8f8f6; }.divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#a5a5a0; font-size:10px; }.divider:before,.divider:after { flex:1; height:1px; background:#e6e6e1; content:""; }.auth-card .button-dark { width:100%; margin-top:5px; }.auth-switch { margin:18px 0 0; color:#858580; font-size:12px; text-align:center; }.auth-switch button { padding:0; border:0; color:var(--ink); background:none; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }.form-error { min-height:16px; margin:11px 0 0; color:#c74435; font-size:11px; text-align:center; }.terms { margin:22px auto 0; max-width:320px; color:#aaa9a4; font-size:10px; line-height:1.6; text-align:center; }.terms a { color:#7d7d78; }.mobile-nav { display:none; }
@media (max-width:1000px) { .main-content { padding-right:28px; padding-left:28px; }.dashboard-grid { grid-template-columns:1.35fr .82fr; }.activity-preview { grid-template-columns:1fr 1fr; }.activity-card:last-child { display:none; }.badge-grid { grid-template-columns:repeat(3,1fr); }.auth-screen { grid-template-columns:1fr .9fr; }.auth-aside { padding:40px; } .auth-copy h1 { font-size:42px; } }
@media (max-width:760px) { body { padding-bottom:68px; }.sidebar { display:none; }.workspace { display:block; }.main-content { width:100%; margin:0; padding:22px 16px 28px; }.topbar { margin-bottom:29px; }.topbar h1 { font-size:23px; }.topbar-user .button { display:none; }.user-chip { padding-right:5px; }.user-chip #header-name,.user-chip .chevron { display:none; }.dashboard-grid { grid-template-columns:1fr; gap:14px; }.timer-panel { min-height:473px; padding:23px 22px 19px; }.timer-stage { height:244px; }.today-side { grid-template-columns:1fr 1fr; grid-template-rows:none; gap:14px; }.goal-card,.focus-tip { min-height:202px; padding:20px 17px; }.goal-card h2 { font-size:16px; }.goal-card .panel-top .text-button { display:none; }.goal-stat-row { display:grid; gap:5px; }.focus-tip p:not(.eyebrow) { font-size:14px; }.focus-tip:after { display:none; }.section-heading { margin-top:34px; }.weekly-card { padding:14px 12px; }.weekly-chart { gap:6px; }.activity-preview { grid-template-columns:1fr; }.activity-card:last-child { display:flex; }.mobile-nav { position:fixed; z-index:20; inset:auto 0 0; display:grid; grid-template-columns:repeat(5,1fr); height:65px; padding:5px 8px 4px; border-top:1px solid var(--line); background:rgba(255,255,253,.96); backdrop-filter:blur(12px); }.mobile-nav-item { display:grid; justify-items:center; align-content:center; gap:3px; border:0; color:#969691; background:transparent; font-size:10px; }.mobile-nav-item span { font-size:18px; }.mobile-nav-item.active { color:var(--ink); font-weight:700; }.page-intro { align-items:flex-start; margin-bottom:21px; }.page-intro h2 { font-size:26px; }.page-intro .button { min-height:38px; padding:0 12px; white-space:nowrap; font-size:11px; }.feed-filter span { display:none; }.ranking-hero { min-height:142px; padding:22px; }.rank-quote { display:none; }.table-head,.rank-row { grid-template-columns:42px 1fr 88px; }.table-head { padding:12px 16px; }.rank-row { padding:0 16px; }.friend-row { padding:10px 16px; }.growth-summary { gap:9px; }.metric-card { padding:16px 12px; }.metric-card strong { font-size:20px; }.metric-card small { font-size:10px; }.calendar-weekdays,.calendar-days { gap:4px; }.badge-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.badge-card { min-height:150px; }.timer-settings { right:15px; bottom:72px; }.auth-screen { display:block; }.auth-aside { display:none; }.auth-main { min-height:100vh; padding:32px 24px; align-items:start; }.auth-card { margin-top:34px; }.mobile-brand { display:flex; margin-bottom:60px; }.auth-heading h2 { font-size:25px; } }
@media (max-width:430px) { .today-side { grid-template-columns:1fr; }.focus-tip { min-height:142px; }.timer-time { font-size:62px; }.timer-orbit.orbit-one { width:205px; height:205px; }.timer-orbit.orbit-two { width:160px; height:160px; }.topbar .eyebrow { font-size:9px; }.ranking-week { display:none; }.page-intro > div p:not(.eyebrow) { font-size:12px; }.metric-card span { font-size:10px; }.metric-card strong { font-size:18px; }.metric-card small { display:none; } }