/*
 * 欣&恺 × 星桥的设计语言（2026-10-17，主人：「把那个 Air 的所有东西都搬过来……把白色改成粉色」）
 *
 * 星桥（Air 上的中转站，moon-web-v2 的 styles/moon/tokens.css、components/ui/*）是这套的出处：
 *   纯黑底；卡片 #0a0a0b 加一条 9% 白的细线、圆角 16；浮层 #121214、圆角 20；输入框 3% 白底、15% 白边、圆角 10；
 *   按钮一律胶囊：主按钮实心（星桥是白底黑字，这里是粉底黑字）、次要 8% 白、描边款 18% 白线；
 *   选中的分段、标签、开关和主按钮同色；字是 #f2f2f2 / 62% / #8e8e93 三档；数字 Geist、等宽数字；
 *   按下 100 ms 缩到 0.98，松手用按钮弹簧（600/30）回弹。没有渐变字、没有光晕、没有内高光。
 * 这一层排在 product-shell.css 之后，只改样子，不改结构；聊天保持微信深色。
 */
:root {
  --pink: #ff9db5;
  --pink-ink: #000000;
  --ground: #000000; --page: #000000; --status-bar: #000000;
  --ink: #f2f2f2;
  --ink-2: rgb(255 255 255 / .62);
  --ink-3: #8e8e93;
  --ink-4: rgb(255 255 255 / .26);
  --body: rgb(255 255 255 / .86);
  --card: #0a0a0b; --tile: #0a0a0b; --w-bg: #0a0a0b;
  --card-edge: inset 0 0 0 1px rgb(255 255 255 / .09);
  --sheet: #121214;
  --sep: rgb(255 255 255 / .1);
  --fill: rgb(255 255 255 / .08); --fill-2: rgb(255 255 255 / .13);
  --primary-bg: var(--pink); --primary-ink: var(--pink-ink); --btn: var(--pink); --btn-ink: var(--pink-ink);
  --rose: var(--pink); --ok: var(--pink); --k-love: var(--pink);
  /* our colour is one solid pink now: everything that painted the gradient paints the pink */
  --love: linear-gradient(var(--pink), var(--pink));
  --love-tilt: linear-gradient(var(--pink), var(--pink));
  --r-s: 10px; --r-img: 12px; --r-card: 16px; --r-sheet: 20px;
  --h-s: 32px; --h-m: 36px; --h-l: 44px;
  --sb-line: rgb(255 255 255 / .1);
  --sb-line-strong: rgb(255 255 255 / .18);
  --sb-field: rgb(255 255 255 / .03);
  --sb-field-line: rgb(255 255 255 / .15);
  --sb-raised: #1c1c1f;
  --ease-spring-press: cubic-bezier(.34, 1.3, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  /* 星桥的按钮弹簧 600/30/1（改编自 open-claude-ui，MIT）：超调 8.8%，370 ms 收敛 */
  :root { --ease-spring-press: linear(0, .0165 2.1%, .0608 4.2%, .1257 6.3%, .205 8.3%, .2932 10.4%, .5685 16.7%, .6538 18.8%, .7325 20.8%, .8034 22.9%, .8659 25%, .9197 27.1%, .965 29.2%, 1.0021 31.3%, 1.0314 33.3%, 1.0537 35.4%, 1.0696 37.5%, 1.0801 39.6%, 1.0859 41.7%, 1.0864 45.8%, 1.0701 52.1%, 1.0238 64.6%, 1.0032 72.9%, .9954 79.2%, .9925 85.4%, .9945 97.9%, 1); }
}
html, body { background: #000; }
body, .product-shell, .auth-shell { font-family: "Geist", -apple-system, "PingFang SC", system-ui, sans-serif; }

/* ---- 按钮：胶囊。主 = 粉底黑字；次要 = 8% 白；描边 = 18% 白线 ------------------------------------------ */
.product-primary, .hero-say, .call-go, .detail-send.glass, .auth-card .product-primary, .trip-unplan {
  min-height: var(--h-l); height: auto; padding: 0 22px; border: 0; border-radius: 999px;
  color: var(--pink-ink); background: var(--pink); box-shadow: none; font: 600 15px/1 "Geist", var(--zh);
  transition: transform .37s var(--ease-spring-press), opacity .2s;
}
.product-primary:disabled, .detail-send.glass:disabled, .call-go:disabled { opacity: .35 !important; color: var(--pink-ink); background: var(--pink); box-shadow: none; }
:is(.product-primary, .hero-say, .call-go, .detail-send, .pill, .answer, .product-secondary, .keep, .round, .compose-kind span, .now-state span):active:not(:disabled) { transform: scale(.98); transition-duration: .1s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); }
.pill, .answer, .answers.is-away .answer.is-wide, .product-secondary, .detail-bar .memory-favorite.keep, .draft-foot .memory-favorite.keep,
.round.glass, .glass, .detail-back, .product-story-detail .detail-back, :is(.product-savings, .product-savings-detail) .detail-back, .product-profile .detail-back,
.home-hero.is-heart .hero-countdown, .hero-countdown, .trip-pick, .pill.trip-write, .story-media .product-image-picker, .content-search-go {
  border: 0; color: var(--ink); background: var(--fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pill, .answer, .product-secondary { border-radius: 999px; transition: transform .37s var(--ease-spring-press), background .15s; }
.answer { border-radius: 16px; }
.pill.is-quiet { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--sb-line-strong); }
.product-link-button { color: var(--ink-2); }
.detail-more .detail-delete, .product-danger { color: #ff453a; }

/* ---- 选中：和主按钮同一个粉 -------------------------------------------------------------------------- */
.compose-kind input:checked + span, .now-state input:checked + span, .onboarding-ideas button[aria-pressed="true"],
.wardrobe-grid button[aria-pressed="true"], .content-search-field:has(input:not(:placeholder-shown)) .content-search-go { color: var(--pink-ink); background: var(--pink); box-shadow: none; }
.compose-kind span, .now-state span, .onboarding-ideas button { background: var(--fill); box-shadow: none; }
.product-shell input[type="checkbox"]:checked, .auth-shell input[type="checkbox"]:checked, .auth-shell .auth-remember input[type="checkbox"]:checked { background: var(--pink); }
.product-shell input[type="checkbox"]::after, .auth-shell input[type="checkbox"]::after { box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.product-shell input[type="checkbox"]:checked::after, .auth-shell input[type="checkbox"]:checked::after { background: #000; }
/* 回忆的「全部 · 足迹 · 珍藏」是星桥的分段：一条 7% 白的胶囊轨道，选中的那段粉底黑字 */
.story-view-tabs { gap: 0; height: 36px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .07); }
.story-view-tabs button { height: 30px; padding: 0 14px; border-radius: 999px; color: var(--ink-3); font: 500 13px/30px var(--zh); }
.story-view-tabs button[aria-pressed="true"] { color: var(--pink-ink); background: var(--pink); font-weight: 600; }
.story-view-tabs button[aria-pressed="true"]::after { display: none; }

/* ---- 卡片：#0a0a0b + 9% 白细线，圆角 16 ------------------------------------------------------------------ */
.card, .we-card, .glasscard, .product-card, .compose-rows, .push-card, .together-card, .memory-box-empty, .story-empty, .jar-empty, .invite-card,
.trip-card, .call-row, .story-month.is-ahead .story-record, .content-reveal, .daily-card, .question-card, .product-onboarding .onboarding-day:not(.is-compact) {
  border-radius: var(--r-card); background-color: var(--card); box-shadow: var(--card-edge);
}
.compose-rows > .compose-row, .compose-rows > .day-field { box-shadow: inset 0 1px 0 var(--sb-line); }
.compose-rows > :first-child { box-shadow: none; }
.compose-rows .content-reveal { box-shadow: inset 0 1px 0 var(--sb-line); background: none; border-radius: 0; }
.we-card > * + *, .we-edit + .we-row, .days-row + .days-row, .trip-li + .trip-li { box-shadow: inset 0 1px 0 var(--sb-line); }

/* ---- 输入框：3% 白底 + 15% 白边，圆角 10；聚焦时边框提亮 ------------------------------------------------- */
.auth-field, .auth-card .auth-field.is-join, .onboarding-form.is-photo .onboarding-field, .onboarding-field, .content-search-field,
.day-field.is-compact, .we-selects.is-day, .time-face, .daily-field, .product-shell .content-form-grid input, .product-shell .content-form-grid textarea {
  border-radius: var(--r-s); background-color: var(--sb-field); box-shadow: inset 0 0 0 1px var(--sb-field-line);
}
.auth-field, .onboarding-form.is-photo .onboarding-field, .onboarding-field { height: 46px; }
.auth-field:focus-within, .content-search-field:focus-within, .onboarding-field:focus, .daily-field:focus-within { box-shadow: inset 0 0 0 1px #666; }
.product-shell .story-compose .content-form-title input, .product-shell .story-compose .content-form-body textarea { background: none; box-shadow: none; }
.time-face b { font-family: "Geist", var(--zh); }

/* ---- 浮层（底部弹窗）：#121214，圆角 20，顶上一条细线 -------------------------------------------------- */
.sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--sheet); box-shadow: inset 0 1px 0 var(--sb-line); }
.sheet-close { background: var(--fill); box-shadow: none; }

/* ---- 字：页面大标题、卡片标题、次要字三档 -------------------------------------------------------------- */
.page-head h1, .product-profile > h1 { font: 600 26px/1.25 var(--zh); letter-spacing: 0; }
.page-head .page-sub { color: var(--ink-3); font: 400 13px/1.4 "Geist", var(--zh); }
.card h2, .we-group > h2, .product-card h2 { font-weight: 600; }
.we-group > h2, .story-month-title small, .meta { color: var(--ink-3); }

/* ---- 底栏：纯黑、顶上一条细线；当前那一格粉色 ------------------------------------------------------------ */
.product-bottom-nav { background: #000; box-shadow: inset 0 1px 0 var(--sb-line); }
.dock-offline { background: #000; }
.dock-tabs .product-nav-button { color: var(--ink-3); }
.dock-tabs .product-nav-button.selected { color: var(--pink); }
.product-nav-button .nav-face { fill: #000; }
.product-nav-button.selected .nav-cut { stroke: #000; }
.product-nav-button.selected .nav-dot { fill: #000; }
.product-topline::before { background: rgb(0 0 0 / .92); }

/* ---- 数字：Geist、等宽 ------------------------------------------------------------------------------------ */
.num, .hero-num, .detail-day b, .jar-amount strong, .we-days b, .time-face b { font-family: "Geist", var(--zh); font-variant-numeric: tabular-nums; }

/* ---- 头像：实色圆，鹅卵石铺满，不套环 -------------------------------------------------------------------- */
.face, .is-pebble { background-color: var(--sb-raised); box-shadow: none; }

/* ---- 提示条（没网）：星桥的浮卡 #1c1c1f + 12% 白边 ---------------------------------------------------------- */
.product-main > [data-offline-note] { background: #1c1c1f; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }

/* The meeting's hero has no buttons of its own now (the card under it has them): 看心跳倒计时 stands centred on its own. */
.home-hero.is-heart .hero-countdown { display: flex; width: max-content; max-width: calc(100% - 32px); margin: 22px auto 0; justify-self: center; align-self: center; }

/* 我们是谁: tap your own picture to change it; a small camera says so. The photo just chosen shows at once, and the one
   button to keep it sits right under the two of you. */
.we-art.is-pick { position: relative; display: block; cursor: pointer; }
.we-art-badge { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); background: #1c1c1f; box-shadow: 0 0 0 2px #000; }
.we-art-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.we-art.is-pick:active { transform: scale(.98); }
.we-photo-confirm { display: flex; justify-content: center; margin-top: 16px; }