/* nibs — design language (direction D): warm off-white, chunky type, ink pills, pastel tone cards. Loads after app.css. */
:root {
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --round: "Gabarito", "Onest", -apple-system, sans-serif;
  --text: #1E2124; --text2: #6B6F76; --text3: #A3A6AB; --on-ink: #FFFFFF;
  --glass: #FFFFFF; --glass2: #EFEFEC; --glass-strong: #FFFFFF; --stroke: #E8E8E4; --sep: #EFEFEC; --field: #FFFFFF;
  --shadow: none; --blur: none; --r: 24px;
  --accent: #1E2124; --green: #2F8A63; --red: #C8452A; --orange: #C9731C; --purple: #6A5AE0; --teal: #1F8E9A; --yellow: #C99A12;
  --wallbase: #F6F6F4; --tone: #F27856; --tone-soft: #FDE6DE;
  --nb-bg: #F6F6F4; --nb-card: #FFFFFF; --nb-chip: #ECECE9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #F2F2EF; --text2: #A3A6AB; --text3: #6B6F76; --on-ink: #151618;
    --glass: #1C1D20; --glass2: #26272B; --glass-strong: #2C2D31; --stroke: #2A2B2F; --sep: #2A2B2F; --field: #1C1D20;
    --accent: #F2F2EF; --green: #5FB894; --red: #F07A5E; --orange: #E9A04F; --purple: #9C8FF5; --yellow: #E9B52E;
    --wallbase: #121314; --tone-soft: #3A2620;
    --nb-bg: #121314; --nb-card: #1C1D20; --nb-chip: #26272B;
  }
}
html, body { font-family: var(--font); letter-spacing: 0; }
body { background: var(--wallbase); }
body::before, body::after { display: none; }
.glass, .card, .list, .widget, .cal .day, .chip, .seg, .composer, nav.side, nav.tabs { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

/* living nibs */
.nib.live { animation: nb-breathe 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.nib.live .eye { animation: nb-blink 4.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nb-breathe { 50% { transform: scale(1.04) translateY(-1px); } }
@keyframes nb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- app shell ---------- */
h1.big { font-family: var(--round); font-weight: 800; letter-spacing: -.02em; }
h2 { font-family: var(--round); font-weight: 800; letter-spacing: -.01em; }
.stat .value, .widget .big, .ring text, #lock .time { font-family: var(--round); font-weight: 800; letter-spacing: -.02em; }
nav.side { background: var(--glass); border: 1px solid var(--stroke); }
nav.side .logo { font-family: var(--round); font-size: 24px; font-weight: 800; letter-spacing: -.03em; gap: 8px; }
nav.side button { color: var(--text2); font-weight: 500; }
nav.side button:hover { background: var(--glass2); }
nav.side button.on { background: var(--accent); color: var(--on-ink); box-shadow: none; }
.ic { background: none !important; box-shadow: none; width: 26px; height: 26px; color: inherit; }
.topbar .inner { background: var(--wallbase); border-bottom: 1px solid var(--stroke); }
.card, .list, .widget { background: var(--glass); border: 1px solid var(--stroke); }
.widget.hero { background: var(--tone-soft); color: var(--text); border-color: transparent; }
.widget.hero .wh { color: var(--text2); }
.widget.hero .mini { background: var(--glass); border: 0; }
.widget .wh .dot { background: none !important; width: 22px; height: 22px; }
.btn { background: var(--accent); color: var(--on-ink); box-shadow: none; font-weight: 600; }
.btn.ghost { background: var(--glass2); color: var(--text); border: 0; }
.btn.red { background: var(--red); color: #fff; box-shadow: none; } .btn.green { background: var(--green); color: #fff; box-shadow: none; }
input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(30,33,36,.10); }
.seg { background: var(--glass2); border: 0; }
.seg button.on { background: var(--glass); box-shadow: none; }
.pill { background: var(--glass2); border: 0; }
.bar { background: var(--glass2); border: 0; } .bar > div { background: var(--tone); }
.check.done { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.bubble.me { background: var(--accent); color: var(--on-ink); }
.bubble.ai { background: var(--glass); border: 1px solid var(--stroke); }
.chip { background: var(--glass); border: 1px solid var(--stroke); }
.status { background: var(--glass2) !important; color: var(--text); }
.askbar { background: var(--glass); border: 1px solid var(--stroke); border-radius: 26px; }
.askbar .bfly { display: flex; }
.weekstrip div.today { background: var(--accent); color: var(--on-ink); }
.cal .day.today .n { background: var(--accent); color: var(--on-ink); }
#sheet { background: var(--glass); backdrop-filter: none; -webkit-backdrop-filter: none; }
#sheet .hd button { color: var(--text); }
.toast { background: var(--accent); color: var(--on-ink); border: 0; backdrop-filter: none; }
.vorb { background: radial-gradient(circle at 35% 30%, #fff 0%, #FDE6DE 18%, var(--tone) 60%, #8A3A22 100%); box-shadow: 0 0 60px rgba(242,120,86,.45); }
@media (max-width: 860px) {
  nav.tabs { background: #1E2124; border: 0; border-radius: 34px; padding: 6px; }
  nav.tabs button { color: #9EA2A8; font-weight: 500; }
  nav.tabs button.on { background: #34373B; color: #fff; }
  nav.tabs button .e { display: flex; }
}

/* ---------- lock screen (owner) ---------- */
#lock { background: var(--nb-bg); color: var(--text); }
#lock::before { display: none; }
#lock .brand { font-family: var(--round); font-size: 22px; letter-spacing: -.02em; font-weight: 800; text-transform: lowercase; opacity: 1; }
#lock .lockicon { display: none; }
#lock .time { text-shadow: none; }
#lock .date { color: var(--text2); }
#lock input { background: var(--nb-card); border: 1px solid var(--stroke); color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none; }
#lock input::placeholder { color: var(--text3); }
#lock input:focus { background: var(--nb-card); border-color: var(--text); }
#lock button, .lock-google { background: var(--accent); color: var(--on-ink); border-radius: 999px; height: 54px; padding: 0 18px; font-weight: 600; }
#lock .msg { color: var(--red); }
#lock .hint { color: var(--text2); opacity: 1; }
.lock-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--nb-card) !important; color: var(--text) !important; border: 1px solid var(--stroke); text-decoration: none; }

/* ---------- nibs full-screen layer: welcome, waitlist, code, onboarding ---------- */
#nb { position: fixed; inset: 0; z-index: 70; background: var(--nb-bg); color: var(--text); overflow-y: auto; font-family: var(--font); }
.nb-screen { min-height: 100%; display: flex; justify-content: center; position: relative; }
.nb-enter { animation: nb-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nb-in { from { opacity: 0; transform: translateY(14px); } }
.nb-col { width: min(440px, 100%); box-sizing: border-box; padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; min-height: 100dvh; }
.nb-center { justify-content: center; }
.nb-word { font-family: var(--round); font-weight: 800; font-size: 24px; letter-spacing: -.03em; text-align: center; }
.nb-h { margin: 0; font-family: var(--round); font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; text-align: center; }
.nb-h span { color: var(--text3); }
.nb-h.sm { font-size: 28px; }
.nb-h2 { margin: 0; font-family: var(--round); font-weight: 700; font-size: 23px; text-align: center; }
.nb-p { margin: -6px 0 0; font-size: 15px; line-height: 1.45; color: var(--text2); }
.nb-p.c { text-align: center; margin-top: -12px; }
.nb-cta { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.nb-btn { width: 100%; height: 56px; border-radius: 28px; border: 0; background: var(--accent); color: var(--on-ink); font: 600 16px var(--font); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: transform .15s cubic-bezier(.2,.9,.25,1.1); }
.nb-btn:active { transform: scale(.97); } .nb-btn:disabled { opacity: .4; cursor: default; }
.nb-google { background: var(--nb-card); color: var(--text); border: 1px solid var(--stroke); }
.nb-under { font-size: 13px; color: var(--text2); text-align: center; }
.nb-link { align-self: center; border: 0; background: none; color: var(--text2); font: 500 14px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.nb-back { position: absolute; left: max(14px, calc(50% - 214px)); top: calc(22px + env(safe-area-inset-top)); width: 44px; height: 44px; border: 0; background: none; color: var(--text); cursor: pointer; z-index: 2; }
.nb-err { color: var(--red); font-size: 14px; text-align: center; min-height: 18px; }
.nb-steps { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.nb-steps span { width: 22px; height: 5px; border-radius: 3px; background: var(--nb-chip); }
.nb-steps span.on { background: var(--accent); }

/* welcome */
.nb-welcome { gap: 18px; }
.nb-notes { position: relative; height: 170px; margin: 0 -8px; }
.note { position: absolute; padding: 12px 14px 14px; font: 600 15px/1.15 var(--round); transform: rotate(var(--r)); box-shadow: 0 6px 14px rgba(30,33,36,.10); color: #1E2124; animation: nb-float 6s ease-in-out infinite; }
.note.y { background: #FBEDB0; } .note.w { background: #FFFFFF; } .note.g { background: #E3F3EA; animation-delay: -2s; }
.note.stamp { background: #FDE6DE; text-align: center; font: 500 11px/1.25 var(--font); color: #6B6F76; animation-delay: -4s; }
.note.stamp b { display: block; font: 800 24px var(--round); color: #D85B3B; }
@keyframes nb-float { 50% { transform: rotate(var(--r)) translateY(-5px); } }
.nb-hero { display: flex; justify-content: center; }

/* cards */
.nb-card { background: var(--soft, var(--nb-chip)); border-radius: 32px; padding: 0 18px 20px; margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (prefers-color-scheme: dark) { .nb-card, .nb-tone, .nb-tile { background: var(--nb-card) !important; } }
.nb-float { margin-top: -58px; position: relative; display: flex; justify-content: center; }
.nb-bubble { position: absolute; left: calc(100% - 6px); top: 14px; background: var(--nb-card); border-radius: 14px 14px 14px 4px; padding: 7px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* goal pills */
.nb-pills { display: flex; flex-direction: column; gap: 12px; }
.nb-pill { position: relative; height: 62px; border-radius: 20px; border: 0; background: var(--nb-chip); color: var(--text); display: flex; align-items: center; padding: 0 20px; font: 500 16px var(--font); cursor: pointer; text-align: left; transition: background .2s, transform .15s; }
.nb-pill.on { background: var(--c); color: #fff; }
.nb-pill:active { transform: scale(.98); }
.nb-pill i { position: absolute; right: 12px; top: 8px; display: flex; }

/* tone carousel */
.nb-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 64px 40px 6px; margin: 0 -24px; scrollbar-width: none; }
.nb-carousel::-webkit-scrollbar { display: none; }
.nb-tone { flex: none; width: 78%; scroll-snap-align: center; background: var(--soft); border-radius: 34px; padding: 0 22px 26px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: .55; transform: scale(.94); transition: opacity .25s, transform .25s; }
.nb-tone.on { opacity: 1; transform: none; }
.nb-tone .nb-float { margin-top: -66px; }
.nb-tag { background: var(--nb-card); border-radius: 12px; padding: 7px 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.nb-tone p { margin: 0; text-align: center; font: 600 20px/1.25 var(--round); }
.nb-tname { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nb-tname b { font: 800 26px var(--round); } .nb-tname span { font-size: 14px; color: var(--text2); }
.nb-dots { display: flex; gap: 8px; justify-content: center; }
.nb-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--text3); cursor: pointer; transition: width .25s; }
.nb-dots button.on { width: 24px; background: var(--c); }

/* rhythm */
.nb-dialrow { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text); }
.nb-dial { width: min(260px, 64vw); height: auto; }
.nb-dial .d1 { font: 800 62px var(--round); fill: var(--text); } .nb-dial .d2 { font: 600 11px var(--font); letter-spacing: 1.5px; fill: var(--text2); }
.nb-round { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--nb-chip); color: var(--text); font: 600 22px var(--font); cursor: pointer; flex: none; }
.nb-two { display: flex; gap: 10px; }
.nb-tile { flex: 1; background: var(--soft, var(--nb-chip)); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text2); }
.nb-tile b, .nb-select { font: 800 20px var(--round); color: var(--text); }
.nb-select { border: 0; background: none; padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
.nb-row { background: var(--nb-card); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.nb-row span { flex: 1; display: flex; flex-direction: column; } .nb-row b { font-weight: 500; font-size: 15px; } .nb-row small { font-size: 12px; color: var(--text2); }
.nb-switch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--text3); position: relative; cursor: pointer; margin: 0; transition: background .2s; flex: none; }
.nb-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 11px; background: #fff; transition: transform .25s cubic-bezier(.2,.9,.25,1.1); }
.nb-switch:checked { background: #5FB894; } .nb-switch:checked::after { transform: translateX(18px); }

/* about you */
.nb-field { width: 100%; background: var(--nb-card); border-radius: 20px; padding: 14px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.nb-field > span { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--text2); }
.nb-field small { text-align: right; font-size: 12px; color: var(--text3); }
.nb-input { border: 0; outline: 0; background: none; font: 400 16px/1.4 var(--font); color: var(--text); resize: none; padding: 0; width: 100%; }
.nb-input.code { background: var(--nb-card); border-radius: 18px; padding: 16px; text-align: center; font-size: 24px; letter-spacing: .4em; }
.nb-form { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.nb-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nb-chip { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--nb-card); color: var(--text); font: 500 13px var(--font); cursor: pointer; }

/* stamp */
.nb-stamp { align-self: center; transform: rotate(-4deg); filter: drop-shadow(0 12px 24px rgba(216,91,59,.22)); animation: nb-stamp .7s cubic-bezier(.2,1.4,.3,1) both .15s; display: flex; }
@keyframes nb-stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .nib.live, .nib.live .eye, .note, .nb-stamp, .nb-enter { animation: none; } }

/* desktop: give the welcome some room */
@media (min-width: 900px) {
  .nb-col { width: 460px; }
  .nb-welcome .nb-h { font-size: 40px; }
}

.dock { background: var(--glass); border: 1px solid var(--stroke); }
.dock .ic { width: 54px; height: 54px; border-radius: 18px; background: var(--glass2) !important; display: grid; place-items: center; }
.widget .wh .dot { display: grid; place-items: center; color: var(--text2); }
.bell { display: inline-flex; align-items: center; }

/* ---------- tone carousel v2 (transform-based) ---------- */
.nb-car { position: relative; margin: 0 -24px; outline: none; }
.nb-car:focus-visible { box-shadow: inset 0 0 0 2px var(--text); border-radius: 24px; }
.nb-car-view { overflow: hidden; padding: 70px 0 8px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.nb-car-view:active { cursor: grabbing; }
.nb-car-track { display: flex; gap: 14px; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.nb-car-track.drag { transition: none; }
.nb-car .nb-tone { width: min(260px, 68vw); flex: none; opacity: .5; transform: scale(.92); transition: opacity .3s, transform .3s; cursor: pointer; }
.nb-car .nb-tone[aria-selected="true"] { opacity: 1; transform: none; cursor: default; }
.nb-car .nb-tone .nb-float { pointer-events: none; }
.nb-arrow { position: absolute; top: calc(50% + 30px); transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--stroke); background: var(--nb-card); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(30,33,36,.10); }
.nb-arrow.l { left: 10px; } .nb-arrow.r { right: 10px; } .nb-arrow.r svg { transform: scaleX(-1); }
@media (hover: none) { .nb-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .nb-car-track, .nb-car .nb-tone { transition: none; } }

/* ---------- tours: ring + tip card (no full-screen overlay) ---------- */
.nb-ring { position: fixed; z-index: 80; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 3px var(--c, #F27856), 0 0 0 9px color-mix(in srgb, var(--c, #F27856) 22%, transparent); transition: all .35s cubic-bezier(.2,.8,.2,1); }
.nb-tip { position: fixed; z-index: 81; background: var(--nb-card); color: var(--text); border: 1px solid var(--stroke); border-radius: 22px; padding: 14px 16px 12px; box-shadow: 0 18px 44px rgba(30,33,36,.18); font-family: var(--font); animation: nb-in .3s cubic-bezier(.2,.8,.2,1) both; transition: top .35s cubic-bezier(.2,.8,.2,1), left .35s cubic-bezier(.2,.8,.2,1); }
.nb-tip-hd { display: flex; align-items: center; gap: 8px; } .nb-tip-hd b { font: 800 17px var(--round); letter-spacing: -.01em; }
.nb-tip p { margin: 8px 0 12px; font-size: 14px; line-height: 1.45; color: var(--text2); }
.nb-tip-ft { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3); }
.nb-tip-ft span { margin-right: auto; }
.nb-tip-skip { border: 0; background: none; color: var(--text2); font: 500 13px var(--font); cursor: pointer; padding: 6px; }
.nb-tip-next { border: 0; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--accent); color: var(--on-ink); font: 600 14px var(--font); cursor: pointer; }
.nb-help { position: fixed; z-index: 35; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--stroke); background: var(--glass); color: var(--text); font: 800 18px var(--round); cursor: pointer; box-shadow: 0 8px 20px rgba(30,33,36,.10); }
@media (max-width: 860px) { .nb-help { bottom: calc(92px + env(safe-area-inset-bottom)); right: 14px; width: 40px; height: 40px; } }
#app.hidden ~ .nb-help, #nb:not(.hidden) ~ .nb-help { display: none; }

/* ---------- nibs roster + audit ---------- */
.nb-roster { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 12px; margin: 4px 0 4px; scrollbar-width: none; }
.nb-roster::-webkit-scrollbar { display: none; }
.nb-rcard { flex: none; width: 132px; position: relative; border: 2px solid transparent; background: var(--soft, var(--glass2)); border-radius: 22px; padding: 12px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--text); font-family: var(--font); transition: transform .15s cubic-bezier(.2,.9,.25,1.1), border-color .2s; }
@media (prefers-color-scheme: dark) { .nb-rcard { background: var(--glass); } }
.nb-rcard:active { transform: scale(.97); }
.nb-rcard.on { border-color: var(--text); }
.nb-rcard b { font: 800 16px var(--round); margin-top: 4px; } .nb-rcard small { font-size: 11px; color: var(--text2); text-align: center; line-height: 1.25; }
.nb-rcard i { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 600; background: var(--glass); border-radius: 10px; padding: 2px 8px; }
.nb-rnib { height: 56px; display: grid; place-items: center; }
.nb-new { background: transparent !important; border: 2px dashed var(--stroke); } .nb-new .nb-rnib { font: 800 30px var(--round); color: var(--text2); }
.nb-auditcard { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; background: var(--tone-soft); border-color: transparent; }
.nb-auditcard .grow { flex: 1; min-width: 220px; } .nb-auditcard b { font: 800 18px var(--round); }
.nb-areas { display: flex; flex-wrap: wrap; gap: 6px; } .nb-areas span { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: var(--glass); color: var(--text2); }
.nb-areas span.mid { color: var(--text); } .nb-areas span.ok { background: var(--accent); color: var(--on-ink); }
.bubble.thinking { color: var(--text2); animation: nb-pulse 1.4s ease-in-out infinite; }
@keyframes nb-pulse { 50% { opacity: .55; } }

/* ---------- paywall ---------- */
.nb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-plan { border: 2px solid var(--stroke); background: var(--nb-card); color: var(--text); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; font-family: var(--font); text-align: left; transition: border-color .2s, transform .15s; }
.nb-plan:active { transform: scale(.98); }
.nb-plan.on { border-color: var(--text); }
.nb-plan span { display: flex; align-items: center; gap: 8px; } .nb-plan b { font-weight: 600; font-size: 15px; }
.nb-plan em { font-style: normal; font-size: 11px; font-weight: 600; background: #E3F3EA; color: #2F7A58; padding: 2px 8px; border-radius: 8px; }
.nb-plan strong { font: 800 26px var(--round); letter-spacing: -.02em; } .nb-plan small { font: 500 13px var(--font); color: var(--text2); margin-left: 2px; }
.nb-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nb-perks li { padding-left: 28px; position: relative; font-size: 14px; color: var(--text2); }
.nb-perks li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 10px; background: #E3F3EA; color: #2F7A58; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* ---------- notifications + activity ---------- */
.nb-reach { min-height: 0; background: var(--tone-soft); border-color: transparent; }
.nb-reach-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nb-reach-in .grow { flex: 1; min-width: 220px; } .nb-reach-in b { font: 800 18px var(--round); } .nb-reach-in .s { color: var(--text2); font-size: 14px; margin-top: 2px; }
.nb-install { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nb-steps-list { text-align: left; margin: 0; padding-left: 22px; line-height: 2; font-size: 15px; }
.nb-kbd { display: inline-block; border: 1px solid var(--stroke); border-radius: 6px; padding: 0 6px; font-size: 13px; }
.nb-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--tone); flex: none; }