/* NiMo Yoga — design tokens ported 1:1 from Color.kt, plus the component styles for the five screens + Settings + video setup. Theme is pure CSS: flipping [data-theme] on re-colours everything (so the in-session theme toggle never remounts the player). */ @font-face { font-family: "Figtree"; src: url("fonts/figtree.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg: #f1ede4; --surface: #ffffff; --surface2: #f6f3ec; --inset: #ece8de; --fg: #2b2a25; --fg2: #6c675c; --fg3: #a8a293; --line: #e7e2d6; --accent: #6f7f60; --accent-strong: #5e6d51; --accent-fg: #ffffff; --accent-soft: #e7ece0; --accent-ink: #52643f; --accent-line: #dde4d2; --accent-glow: rgba(111, 127, 96, 0.2); --ph-a: #ece9de; --ph-b: #e2dfd0; --node-muted: #dcd7cb; --page-bg: #e3ded1; --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace; } [data-theme="dark"] { --bg: #181711; --surface: #221f18; --surface2: #2a2720; --inset: #1d1b14; --fg: #efece2; --fg2: #a39d8e; --fg3: #6f6a5a; --line: #322e24; --accent: #9cae83; --accent-strong: #aebd95; --accent-fg: #191811; --accent-soft: #2b3123; --accent-ink: #bccba2; --accent-line: #39402e; --accent-glow: rgba(156, 174, 131, 0.16); --ph-a: #262318; --ph-b: #201e14; --node-muted: #39362a; --page-bg: #100f0b; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--page-bg); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } img { display: block; } /* App frame: a phone-width column centred on the page background. */ #app { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--bg); overflow: hidden; /* iOS safe areas */ padding-top: env(safe-area-inset-top); } @media (min-width: 481px) { #app { box-shadow: 0 0 60px rgba(0, 0, 0, 0.18); min-height: 100dvh; } } #view { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; } .scroll { flex: 1 1 auto; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ---- Bottom nav ---------------------------------------------------------- */ #nav { flex: 0 0 auto; } .bottomnav { display: flex; justify-content: space-around; align-items: flex-end; background: var(--surface); padding: 9px 28px calc(11px + env(safe-area-inset-bottom)) 28px; border-top: 1px solid var(--line); } .navitem { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fg3); font-size: 11px; font-weight: 600; } .navitem.active { color: var(--accent-strong); font-weight: 800; } .navitem svg { width: 23px; height: 23px; } /* ---- Shared atoms --------------------------------------------------------- */ .screen { padding: 10px 18px 20px; } .row { display: flex; align-items: center; } .between { display: flex; align-items: center; justify-content: space-between; } .spacer { flex: 1 1 auto; } .eyebrow { color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .muted { color: var(--fg2); } .faint { color: var(--fg3); } .mono { font-family: var(--mono); } .chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600; padding: 5px 11px; } .badge-level { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--fg2); font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 4px 9px; text-transform: uppercase; } .pill-badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; } .pill-badge.soft { background: var(--accent-soft); color: var(--accent-ink); } .pill-badge.outline { border: 1px solid var(--line); color: var(--fg3); } .bar { position: relative; height: 6px; border-radius: 999px; background: var(--inset); overflow: hidden; } .bar > i { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px; background: var(--accent); display: block; } .thumb { position: relative; overflow: hidden; border-radius: 14px; background-image: repeating-linear-gradient(135deg, var(--ph-a) 0 9px, var(--ph-b) 9px 18px); } .thumb img { width: 100%; height: 100%; object-fit: cover; } .toggle-theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--fg); flex: 0 0 auto; } .toggle-theme svg { width: 18px; height: 18px; } /* sun shows in dark mode, moon in light mode — purely CSS, no JS re-render needed */ .toggle-theme .i-sun { display: none; } .toggle-theme .i-moon { display: block; } [data-theme="dark"] .toggle-theme .i-sun { display: block; } [data-theme="dark"] .toggle-theme .i-moon { display: none; } .toggle-theme.overlay { background: rgba(20, 19, 16, 0.5); border: none; color: #f3efe4; width: 36px; height: 36px; } .iconsquare { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); } .iconsquare svg { width: 18px; height: 18px; } .streak-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); padding: 7px 12px; } .streak-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .streak-pill b { font-size: 13px; font-weight: 800; } .streak-pill span { font-size: 12px; font-weight: 600; color: var(--fg2); } /* ---- Path screen ---------------------------------------------------------- */ .app-title { font-size: 27px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; } .hero { margin-top: 18px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10); overflow: hidden; cursor: pointer; } .hero .cover { width: 100%; height: 150px; border-radius: 0; } .hero .cover .min { position: absolute; right: 13px; bottom: 13px; background: var(--surface); color: var(--fg); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 5px 11px; } .hero .body { padding: 15px 16px 17px; } .continue-btn { margin-top: 14px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 800; width: 100%; } .continue-btn svg { width: 18px; height: 18px; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; } .section-head h2 { font-size: 16px; font-weight: 800; } /* Journey timeline */ .journey-row { display: flex; gap: 14px; } .journey-rail { width: 26px; display: flex; flex-direction: column; align-items: center; } .node { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .node .circle { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .node .circle.done { background: var(--accent); color: var(--accent-fg); } .node .circle.done svg { width: 13px; height: 13px; } .node .circle.outline { background: var(--surface); border: 2px solid var(--node-muted); } .node .current-ring { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; } .node .current-ring .inner { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; } .node .current-ring .inner .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-fg); } .connector { width: 2.5px; flex: 1 1 auto; margin: 3px 0; border-radius: 2px; min-height: 24px; background: var(--line); } .connector.done { background: var(--accent); } .connector.current { background: linear-gradient(var(--accent), var(--line)); } .journey-content { flex: 1 1 auto; padding-bottom: 16px; } .journey-content .title-row { display: flex; align-items: center; gap: 8px; } .journey-content .jtitle { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--fg2); } .journey-content .jtitle.current { color: var(--fg); font-weight: 800; } .journey-content .jsub { font-size: 13px; font-weight: 500; color: var(--fg3); margin-top: 3px; } .journey-content .jsub.current { color: var(--fg2); } .browse-cta { margin-top: 16px; height: 48px; border-radius: 15px; background: var(--surface2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; width: 100%; color: var(--fg); } .browse-cta svg { width: 16px; height: 16px; } /* ---- Series screen -------------------------------------------------------- */ .series-head { display: flex; align-items: center; gap: 12px; padding: 8px 18px 2px; } .series-title { font-size: 29px; font-weight: 800; letter-spacing: -0.5px; margin-top: 3px; } .daycard { display: flex; align-items: center; gap: 13px; width: 100%; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; text-align: left; } .daycard.today { border: 1.5px solid var(--accent); padding: 11px 12px; } .daycard .cover { width: 72px; height: 54px; border-radius: 12px; flex: 0 0 auto; } .daycard .cover .ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(25, 24, 19, 0.25); } .badge-check { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; } .badge-check svg { width: 11px; height: 11px; } .daycard .meta { flex: 1 1 auto; min-width: 0; } .daycard .meta .t { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .daycard.today .meta .t { font-weight: 800; } .daycard .meta .m { font-size: 12.5px; font-weight: 600; color: var(--fg3); margin-top: 2px; } .tag-today { background: var(--accent); color: var(--accent-fg); font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; flex: 0 0 auto; } .play-circle { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .play-circle svg { width: 13px; height: 13px; } .empty-circle { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--node-muted); flex: 0 0 auto; } /* ---- Browse screen -------------------------------------------------------- */ .goalbar { display: flex; gap: 9px; overflow-x: auto; padding: 12px 18px; scrollbar-width: none; } .goalbar::-webkit-scrollbar { display: none; } .goalchip { flex: 0 0 auto; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--fg2); white-space: nowrap; } .goalchip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 700; } .browsecard { display: flex; gap: 13px; width: 100%; text-align: left; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 11px; } .browsecard .cover { width: 78px; height: 78px; border-radius: 14px; flex: 0 0 auto; } .browsecard .cover .badge-check { position: absolute; top: 6px; right: 6px; } .browsecard .b { flex: 1 1 auto; min-width: 0; } .browsecard .b .t { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Progress screen ------------------------------------------------------ */ .streak-card { margin-top: 16px; border-radius: 24px; background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 18px 18px 16px; } .streak-card .big { font-size: 48px; font-weight: 800; color: var(--accent-ink); line-height: 1; } .weekdots { display: flex; justify-content: space-between; margin-top: 18px; } .weekdot { display: flex; flex-direction: column; align-items: center; gap: 6px; } .weekdot .lbl { font-size: 11px; font-weight: 700; color: var(--accent-ink); opacity: 0.5; } .weekdot.done .lbl { opacity: 0.7; } .weekdot.today .lbl { opacity: 1; font-weight: 800; } .weekdot .mark { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); } .weekdot.done .mark { background: var(--accent); border: none; } .weekdot.today .mark { width: 15px; height: 15px; background: var(--accent); border: 2.5px solid var(--accent-fg); } .statgrid { display: flex; gap: 11px; margin-top: 13px; } .statcard { flex: 1 1 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 15px 16px; } .statcard .n { font-size: 26px; font-weight: 800; } .statcard .l { font-size: 12.5px; font-weight: 600; color: var(--fg2); margin-top: 2px; } .calcard { margin-top: 13px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 16px; } .calhead { display: flex; justify-content: space-between; align-items: center; } .dow { display: flex; margin: 14px 0 4px; } .dow span { flex: 1 1 0; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--fg3); } .calscroll { height: 272px; overflow-y: auto; scrollbar-width: thin; } .calmonth-label { position: sticky; top: 0; background: var(--surface); font-size: 12.5px; font-weight: 800; color: var(--fg2); padding: 8px 0; } .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .calcell { aspect-ratio: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .calcell.today { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 800; } .callegend { display: flex; gap: 15px; margin-top: 13px; } .callegend .item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg2); } .callegend .swatch { width: 12px; height: 12px; border-radius: 4px; } .recap { margin-top: 13px; display: flex; align-items: center; gap: 13px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 14px 15px; } .recap .num { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; flex: 0 0 auto; } /* ---- Session screen ------------------------------------------------------- */ .session { display: flex; flex-direction: column; height: 100%; } .player-wrap { position: relative; margin: 10px 14px 0; height: 228px; border-radius: 24px; overflow: hidden; background: #191813; flex: 0 0 auto; } .player-wrap video, .player-wrap iframe, .player-wrap .yt-host { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .player-wrap video { object-fit: contain; background: #000; } .coming-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: rgba(243, 239, 228, 0.5); font-size: 11px; font-family: var(--mono); } .coming-soon svg { width: 30px; height: 30px; } .overlay-btn { position: absolute; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 19, 16, 0.5); color: #f3efe4; display: flex; align-items: center; justify-content: center; z-index: 5; } .overlay-btn svg { width: 18px; height: 18px; } .overlay-btn.back { left: 12px; } .overlay-toggle { position: absolute; top: 12px; right: 12px; z-index: 5; } .video-controls { position: absolute; inset: 0; z-index: 3; } .video-tap { position: absolute; inset: 0; } .video-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,19,16,0.5) 0%, rgba(20,19,16,0) 30%, rgba(20,19,16,0) 58%, rgba(20,19,16,0.6) 100%); } .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .play-badge .b { width: 66px; height: 66px; border-radius: 50%; background: rgba(243, 239, 228, 0.95); color: #191813; display: flex; align-items: center; justify-content: center; } .play-badge .b svg { width: 26px; height: 26px; } .video-controls.playing .play-badge { display: none; } .scrubber { position: absolute; left: 16px; right: 16px; bottom: 13px; display: flex; align-items: center; gap: 10px; } .scrubber .lab { color: #f3efe4; font-size: 11px; font-family: var(--mono); width: 34px; flex: 0 0 auto; } .scrubber .lab.dur { color: rgba(243, 239, 228, 0.6); } .scrubber .track { position: relative; flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(243, 239, 228, 0.25); cursor: pointer; } .scrubber .fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 999px; background: #f3efe4; } .scrubber .knob { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #f3efe4; transform: translate(-50%, -50%); } .watch-yt { position: absolute; inset: 0; z-index: 4; background: rgba(25, 24, 19, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .watch-yt .pic { width: 54px; height: 54px; border-radius: 50%; background: #ff3b30; color: #fff; display: flex; align-items: center; justify-content: center; } .watch-yt .pic svg { width: 26px; height: 26px; } .watch-yt .cap { color: rgba(243, 239, 228, 0.7); font-size: 12px; font-family: var(--mono); } .watch-yt .go { background: #f3efe4; color: #191813; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 9px 16px; } .session-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 18px; } .session-title { font-size: 25px; font-weight: 800; letter-spacing: -0.5px; margin-top: 4px; } .session-desc { color: var(--fg2); font-size: 14px; font-weight: 500; margin-top: 14px; } .steps-head { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 12px; } .steps-head h3 { font-size: 16px; font-weight: 800; } .steprow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 10px; margin-bottom: 9px; } .steprow.active { background: var(--accent-soft); border: 1.5px solid var(--accent); } .steprow .frame { position: relative; width: 62px; height: 40px; border-radius: 9px; flex: 0 0 auto; } .steprow .frame .ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(25,24,19,0.2); border-radius: 9px; } .steprow .frame .ov .pp { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; } .steprow .frame .ov .pp svg { width: 11px; height: 11px; } .steprow .stitle { flex: 1 1 auto; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; } .steprow.active .stitle { font-weight: 800; } .steprow .stime { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--fg2); background: var(--inset); border-radius: 9px; padding: 7px 10px; flex: 0 0 auto; } .steprow.active .stime { background: var(--accent); color: var(--accent-fg); } .donecard { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 15px 16px; } .donecard .t { font-size: 15px; font-weight: 700; } .donecard .s { font-size: 12.5px; font-weight: 500; color: var(--fg3); margin-top: 2px; } .donetoggle { width: 50px; height: 30px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line); position: relative; flex: 0 0 auto; } .donetoggle .k { position: absolute; top: 2.5px; left: 2.5px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); transition: left 0.15s; } .donetoggle.on { background: var(--accent); border-color: var(--accent); } .donetoggle.on .k { left: 22.5px; background: #fff; } .downloaded-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; } /* ---- Auth / sign-in / denied --------------------------------------------- */ .center-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 28px calc(32px + env(safe-area-inset-bottom)); gap: 14px; } .brand-mark { width: 76px; height: 76px; border-radius: 22px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; } .center-screen h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; } .center-screen p { color: var(--fg2); font-size: 14.5px; font-weight: 500; max-width: 300px; } .gbtn { display: inline-flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 20px; font-size: 15px; font-weight: 700; color: var(--fg); margin-top: 8px; } .gbtn svg { width: 19px; height: 19px; } .linkbtn { color: var(--accent-ink); font-weight: 700; font-size: 14px; } /* ---- Settings / video setup ---------------------------------------------- */ .settings-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px 4px; } .settings-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; } .card { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); padding: 16px; margin-top: 13px; } .card h3 { font-size: 15px; font-weight: 800; } .card .sub { font-size: 13px; color: var(--fg2); font-weight: 500; margin-top: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; padding: 12px 16px; font-size: 14px; font-weight: 700; } .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .btn.primary { background: var(--accent); color: var(--accent-fg); } .btn.ghost { background: var(--surface2); border: 1px solid var(--line); color: var(--fg); } .btn.danger { background: transparent; border: 1px solid var(--line); color: #c0524a; } .btn.full { width: 100%; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .progress-import { margin-top: 14px; } .progress-import .bar { height: 8px; } .progress-import .pct { font-size: 12px; font-weight: 700; color: var(--fg2); margin-top: 6px; } .bignum { font-size: 15px; font-weight: 800; } .kv { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; } .kv:first-of-type { border-top: none; } .kv .v { color: var(--fg2); font-weight: 600; } .missing-list { max-height: 120px; overflow-y: auto; font-family: var(--mono); font-size: 11px; color: var(--fg3); margin-top: 8px; line-height: 1.5; } .setup-hero { text-align: center; padding: 28px 24px 8px; } .setup-hero .ic { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .setup-hero .ic svg { width: 30px; height: 30px; } .setup-hero h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.4px; } .setup-hero p { color: var(--fg2); font-size: 14px; font-weight: 500; margin: 8px auto 0; max-width: 320px; } .nudge { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 13px 15px; font-size: 13px; color: var(--accent-ink); font-weight: 600; margin-top: 14px; } .banner { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 11px 14px; margin: 10px 18px 0; font-size: 13px; font-weight: 600; color: var(--accent-ink); } .banner .spacer { flex: 1 1 auto; } .toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 999px; z-index: 50; opacity: 0; transition: opacity 0.2s; pointer-events: none; max-width: 90%; } .toast.show { opacity: 0.95; } .loading { min-height: 100dvh; display: flex; align-items: center; justify-content: center; color: var(--fg3); font-size: 14px; font-weight: 600; }