/* Page-level layouts that sit on top of the theme. 记忆 = 「拾日眼中的你」. */
/* Colour tokens for these pages. Light by default; dark when the system is dark (and 浅色 not picked), or 深色 picked. */
:root { --brand: #ee6a24; --brand-soft: rgba(238, 106, 36, 0.10); --brand-ink: #b84b12;
  --glass: rgba(252, 252, 252, 0.88); --glass-edge: rgba(0, 0, 0, 0.07); --glass-shadow: rgba(0, 0, 0, 0.25); --pill: rgba(0, 0, 0, 0.06);
  --auto-bg: rgba(74, 85, 196, 0.10); --auto-fg: #4a55c4; --lift: rgba(0, 0, 0, 0.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --brand-soft: rgba(238, 106, 36, 0.18); --brand-ink: #ff9a5c;
  --glass: rgba(34, 34, 38, 0.88); --glass-edge: rgba(255, 255, 255, 0.10); --glass-shadow: rgba(0, 0, 0, 0.6); --pill: rgba(255, 255, 255, 0.10);
  --auto-bg: rgba(124, 134, 240, 0.18); --auto-fg: #a3abff; --lift: rgba(0, 0, 0, 0.55); } }
:root[data-theme="dark"] {
  --brand-soft: rgba(238, 106, 36, 0.18); --brand-ink: #ff9a5c;
  --glass: rgba(34, 34, 38, 0.88); --glass-edge: rgba(255, 255, 255, 0.10); --glass-shadow: rgba(0, 0, 0, 0.6); --pill: rgba(255, 255, 255, 0.10);
  --auto-bg: rgba(124, 134, 240, 0.18); --auto-fg: #a3abff; --lift: rgba(0, 0, 0, 0.55); }

.mem-page { display: flex; flex-direction: column; }
.mem-page .section-heading { margin: 28px 2px 10px; }
.mem-page .section-heading .small-link { font-size: 13px; color: var(--ink-3); }

/* Portrait */
.mem-portrait { background: var(--surface); border-radius: 22px; padding: 20px 20px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px var(--lift); }
.mem-portrait-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mem-portrait-head .seal { width: 46px; height: 46px; flex: none; }
.mem-portrait-head .seal svg { width: 100%; height: 100%; }
.mem-portrait-title h2 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.mem-portrait-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.mem-portrait-empty { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 4px; }
.mem-tier { padding: 12px 0; border-top: 0.5px solid var(--line); }
.mem-tier:first-of-type { border-top: 0; padding-top: 2px; }
.mem-tier-label { font-size: 12px; font-weight: 600; color: var(--brand-ink); margin-bottom: 4px; }
.mem-tier-text { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0; }
.mem-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mem-btn { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; background: var(--sunken); color: var(--ink); transition: transform .12s ease, background .15s ease; }
.mem-btn:active { transform: scale(0.96); }
.mem-btn.primary { background: var(--ink); color: var(--surface); }
.mem-btn.ghost { background: transparent; color: var(--ink-3); }
@media (hover: hover) { .mem-btn:hover { background: var(--line-soft); } .mem-btn.primary:hover { background: var(--ink); opacity: .88; } }

/* Questions it wants to ask */
.mem-questions { display: flex; flex-direction: column; gap: 8px; }
.mem-question { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 0.5px var(--line); transition: transform .12s ease; }
.mem-question:active { transform: scale(0.985); }
.mem-question-text { flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.mem-question-go { flex: none; font-size: 13px; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 5px 11px; border-radius: 999px; }

/* Guesses */
.mem-guess-wrap { position: relative; }
.mem-guess { position: relative; background: var(--surface); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -18px var(--lift); transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease, box-shadow .2s ease; touch-action: pan-y; }
.mem-guess[data-lean="yes"] { box-shadow: inset 0 0 0 2px #34c759, 0 12px 28px -18px var(--lift); }
.mem-guess[data-lean="no"] { box-shadow: inset 0 0 0 2px #ff6b5a, 0 12px 28px -18px var(--lift); }
.mem-guess.out-right { transform: translateX(120%) rotate(8deg); opacity: 0; }
.mem-guess.out-left { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.mem-guess.out-down { transform: translateY(16px); opacity: 0; }
.mem-guess-label { display: inline-block; font-size: 12px; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; }
.mem-guess-text { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0 0 10px; }
.mem-guess-count { font-size: 12px; color: var(--ink-3); }
.mem-guess-actions { display: flex; gap: 8px; margin-top: 14px; }
.mem-guess-actions .mem-btn.primary { margin-left: auto; padding: 0 22px; }

/* Watching */
.mem-watch { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.mem-watch::-webkit-scrollbar { display: none; }
.mem-watch-card { flex: 0 0 156px; scroll-snap-align: start; text-align: left; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 0.5px var(--line); display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; transition: transform .12s ease; }
.mem-watch-card:active { transform: scale(0.97); }
.mem-watch-topic { font-size: 14px; font-weight: 550; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mem-watch-meta { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.mem-watch-meta.fresh { color: var(--brand-ink); }

/* Shelf */
.mem-shelf { background: var(--surface); border-radius: 18px; box-shadow: inset 0 0 0 0.5px var(--line); overflow: hidden; }
.mem-shelf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px 0 16px; text-align: left; border-top: 0.5px solid var(--line); transition: background .15s ease; }
.mem-shelf-row:first-child { border-top: 0; }
.mem-shelf-row:active { background: var(--sunken); }
@media (hover: hover) { .mem-shelf-row:hover { background: var(--sunken); } }
.mem-shelf-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.mem-shelf-icon svg { width: 16px; height: 16px; }
.mem-shelf-title { flex: 1; font-size: 15px; color: var(--ink); }
.mem-shelf-meta { font-size: 13px; color: var(--ink-3); }
.mem-shelf-go { color: var(--ink-4); display: grid; }
.mem-shelf-go svg { width: 14px; height: 14px; }

/* 任务 */
.task-group { background: var(--surface); border-radius: 18px; box-shadow: inset 0 0 0 0.5px var(--line); overflow: hidden; }
.task-group.attention { box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px -18px rgba(238,106,36,.5); }
.task-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left; border-top: 0.5px solid var(--line); transition: background .15s ease; }
.task-row:first-child { border-top: 0; }
.task-row:active { background: var(--sunken); }
@media (hover: hover) { .task-row:hover { background: var(--sunken); } }
.task-row-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sunken); color: var(--ink-2); }
.task-row-icon svg { width: 16px; height: 16px; }
.task-row-icon.k-automation { background: var(--auto-bg); color: var(--auto-fg); }
.task-row-icon.k-heartbeat { background: var(--brand-soft); color: var(--brand-ink); }
.task-row-icon.k-brief { background: rgba(232, 105, 44, 0.10); color: #c9561d; }
.task-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-row-title { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row.unread .task-row-title { color: var(--ink); font-weight: 600; }
.task-row-preview { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.task-row-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.task-row.unread .task-row-time { color: var(--brand-ink); font-weight: 600; }
.task-row-state { font-size: 11.5px; color: var(--ink-3); }
.task-row-state.warn { color: var(--brand-ink); font-weight: 600; }
.task-row-state.bad { color: #d4523f; }
.task-row-side .spinner { width: 12px; height: 12px; }

.auto-card { background: var(--surface); border-radius: 18px; box-shadow: inset 0 0 0 0.5px var(--line); padding: 14px 14px 10px; margin-bottom: 10px; }
.auto-card.paused { opacity: .72; }
.auto-card-head { display: flex; align-items: center; gap: 12px; }
.auto-card-title { flex: 1; min-width: 0; }
.auto-card-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.auto-card-when { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.auto-card-last { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: var(--sunken); font-size: 13px; color: var(--ink-2); text-align: left; }
.auto-card-last > span:nth-child(2) { flex: 1; }
.auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: none; }
.auto-dot.ok { background: #34c759; }
.auto-dot.bad { background: #ff6b5a; }
.auto-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.mem-btn.danger { color: #d4523f; margin-left: auto; }

/* ---- Motion (phone) ---- */
.nav-ghost { position: fixed; left: 0; right: 0; overflow: hidden; pointer-events: none; will-change: transform; }
.nav-ghost.under { z-index: 1; }
.nav-ghost.over { z-index: 30; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.10); }
.nav-ghost > .page { will-change: transform; }
.page-scroll.nav-layer { position: relative; z-index: 2; will-change: transform; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.10); }
.main:has(.nav-ghost) .page-scroll.nav-layer { background: inherit; }
.back-round { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin: 2px 0 12px -2px; color: var(--ink);
  background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 0.5px var(--line); transition: transform .12s ease; }
.back-round svg { width: 18px; height: 18px; }
.back-round:active { transform: scale(0.9); }
@media (max-width: 760px) {
  .shell.in-sub .mobile-nav, .shell.in-sub .askbar { display: none; }
  .shell.in-sub .page-scroll { padding-bottom: 40px; }
  /* Pressed states for everything tappable */
  button { -webkit-tap-highlight-color: transparent; }
  .mobile-item { transition: transform .15s ease; }
  .mobile-item:active { transform: scale(0.9); }
  .card:active, .push-card:active, .thread-row:active, .ready-row:active, .diary-card:active, .template-row:active { transform: scale(0.985); transition: transform .12s ease; }
  /* Sheets rise from the bottom */
  dialog#modal { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 94dvh; padding-bottom: env(safe-area-inset-bottom); }
  dialog#modal[open] { animation: sheet-in .44s cubic-bezier(0.32, 0.72, 0, 1); }
  dialog#modal.closing { animation: sheet-out .24s cubic-bezier(0.4, 0, 1, 1) forwards; }
  dialog#modal[open]::backdrop { animation: backdrop-in .3s ease; }
  dialog#modal.closing::backdrop { animation: backdrop-out .24s ease forwards; }
  dialog#modal .modal-body { padding: 10px 20px 24px; max-height: 90dvh; }
  .sheet-grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 8px auto 2px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
.loading-dots { display: flex; gap: 6px; justify-content: center; padding: 48px 0; }
.loading-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: dot-bounce 1s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* ---- Phone chrome after Today AI / iOS 26: a floating glass tab bar with a pill that slides ---- */
@media (max-width: 760px) {
  :root[data-ui] .shell .mobile-nav {
    left: 14px; right: 14px; bottom: calc(6px + env(safe-area-inset-bottom)); height: 62px; padding: 4px;
    border: 0; border-radius: 31px; justify-content: stretch; gap: 0;
    background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 0 0 0.5px var(--glass-edge), 0 12px 32px -12px var(--glass-shadow);
  }
  :root[data-ui] .shell .mobile-item { flex: 1; min-width: 0; position: relative; z-index: 1; justify-content: center; gap: 2px; padding: 0; border-radius: 27px; font-size: 10.5px; color: var(--ink-3); }
  :root[data-ui] .shell .mobile-item.active { color: var(--brand-ink); font-weight: 600; }
  :root[data-ui] .shell .mobile-item.active svg { color: var(--brand); }
  .nav-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 27px; background: var(--pill);
    transition: transform .46s cubic-bezier(0.32, 0.72, 0, 1), width .46s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; }
  :root[data-ui] .shell .main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  :root[data-ui] .shell .askbar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  :root[data-ui] .shell.in-sub .main { padding-bottom: env(safe-area-inset-bottom); }
  #toast { bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* Chat header: who it is and what it is doing now, in a glass capsule; round buttons on the right */
  :root[data-ui] .shell.on-chat .topbar { background: transparent; height: calc(58px + env(safe-area-inset-top)); min-height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0 14px; }
  .shell.on-chat .topbar-title { gap: 8px; padding: 4px 14px 4px 4px; border-radius: 24px; max-width: 70%;
    background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 0 0 0.5px var(--glass-edge), 0 6px 18px -10px var(--glass-shadow); }
  .shell.on-chat .topbar-title .seal { --s: 32px; width: 32px; height: 32px; }
  .topbar-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .shell.on-chat .topbar-name { display: block; font-size: 14.5px; font-weight: 650; }
  .shell.on-chat .topbar-meta { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shell.on-chat .topbar-meta.busy { color: var(--brand-ink); }
  .shell.on-chat .top-actions .icon-button { width: 40px; height: 40px; border-radius: 50%;
    background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 0 0 0.5px var(--glass-edge), 0 6px 18px -10px var(--glass-shadow); }
}

/* Its diary: tilted cards you swipe through, like pages from a notebook */
.diary-deck { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 18px 18px; margin: 0 -18px; scrollbar-width: none; }
.diary-deck::-webkit-scrollbar { display: none; }
:root[data-ui] .page-assistant .diary-deck .diary-card { display: flex; margin: 0; background: var(--surface); flex: 0 0 72%; scroll-snap-align: center; transform: rotate(var(--tilt, 0deg)); flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 210px; padding: 16px; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -18px var(--lift); transition: transform .2s ease; }
:root[data-ui] .page-assistant .diary-deck .diary-card:active { transform: rotate(var(--tilt, 0deg)) scale(0.97); }
.diary-deck .diary-preview { -webkit-line-clamp: 5; }
:root[data-ui] .page-assistant .diary-deck .diary-badge { align-self: flex-start; width: 46px; flex: none; }
@media (max-width: 760px) {
  /* Pages scroll under the floating bar (only the chat keeps its composer above it). */
  :root[data-ui] .shell:not(.on-chat):not(.in-sub) .main { padding-bottom: 0; }
  :root[data-ui] .shell:not(.on-chat):not(.in-sub) .page-scroll { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
}

/* 「先问我」 confirmation card in the chat */
.decision-card { margin: 14px 0 6px; padding: 14px 16px 12px; border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--brand), 0 10px 26px -18px rgba(238, 106, 36, 0.55); animation: decision-in .32s cubic-bezier(0.32, 0.72, 0, 1); }
.decision-card.deciding { opacity: .55; pointer-events: none; }
.decision-head { display: flex; align-items: center; gap: 8px; }
.decision-from { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.decision-what { margin: 8px 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.decision-actions { display: flex; gap: 8px; justify-content: flex-end; }
.decision-actions .mem-btn.primary { padding: 0 22px; }
@keyframes decision-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* Light / dark switch in Settings: a three-way segmented control */
.theme-row { cursor: default; flex-wrap: wrap; gap: 10px; }
.theme-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--sunken); margin-left: auto; }
.theme-opt { height: 30px; padding: 0 12px; border-radius: 9px; font-size: 13px; color: var(--ink-2); transition: background .2s ease, color .2s ease; white-space: nowrap; }
.theme-opt.on { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
/* While switching, colours fade instead of snapping */
html.theme-switching, html.theme-switching * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }
/* The old chooser dialog (kept as a fallback) */
.style-list { display: grid; gap: 8px; margin-top: 14px; }
.style-choice { display: flex; align-items: center; width: 100%; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); text-align: left; }
.style-choice.active { box-shadow: inset 0 0 0 2px var(--ink); }

/* Dark: a card's colour on its small first line and icon is lifted so it reads on dark (buttons keep the full colour). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .story .brief-cat-icon, :root:not([data-theme="light"]) .story .story-cat,
  :root:not([data-theme="light"]) .story .brief-category { color: color-mix(in srgb, var(--card-accent, var(--accent)) 62%, #ffffff) !important; } }
:root[data-theme="dark"] .story .brief-cat-icon, :root[data-theme="dark"] .story .story-cat,
:root[data-theme="dark"] .story .brief-category { color: color-mix(in srgb, var(--card-accent, var(--accent)) 62%, #ffffff) !important; }
/* The tab bar sits over busy content: nearly solid, a hint of what is behind. */
:root { --bar-glass: rgba(252, 252, 252, 0.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar-glass: rgba(30, 30, 34, 0.95); } }
:root[data-theme="dark"] { --bar-glass: rgba(30, 30, 34, 0.95); }
@media (max-width: 760px) { :root[data-ui] .shell .mobile-nav { background: var(--bar-glass); } }

/* ---- 今天 · the sky band (0.6.7): 拾日's big head rising across the whole width, the sky following the clock ---- */
.sky-hero { --top: 14px; --band: 150px; --sun-d: min(118%, 540px); position: relative; height: calc(var(--top) + var(--band)); overflow: hidden; margin: 0 0 14px;
  border-radius: 26px; z-index: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  --sky-1: #6aa6ea; --sky-2: #cfe5fb; --hero-ink: #1f3352; --chip: rgba(255, 255, 255, 0.55); }
:root[data-phase="dawn"] .sky-hero { --sky-1: #9cbfe9; --sky-2: #ffd3b0; --hero-ink: #3a2c2a; }
:root[data-phase="dusk"] .sky-hero { --sky-1: #5458b4; --sky-2: #ee9f80; --hero-ink: #fff; --chip: rgba(255, 255, 255, 0.2); }
:root[data-phase="night"] .sky-hero { --sky-1: #161c48; --sky-2: #34449a; --hero-ink: #fff; --chip: rgba(255, 255, 255, 0.16); }
.sky-hero-sky { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%); }
.sky-hero-sky::after { content: ""; position: absolute; inset: 0; background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sky-hero-sky::after { background: rgba(8, 8, 22, 0.24); } }
:root[data-theme="dark"] .sky-hero-sky::after { background: rgba(8, 8, 22, 0.24); }
/* stars at night (a few already at dusk), soft clouds by day */
.sky-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: sky-twinkle var(--tw, 3.6s) ease-in-out var(--dl, 0s) infinite; }
.sky-star.big { width: 3px; height: 3px; box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.6); }
.sky-star { visibility: hidden; }
:root[data-phase="night"] .sky-star, :root[data-phase="dusk"] .sky-star.big { visibility: visible; }
@keyframes sky-twinkle { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.45); opacity: 0.35; } }
.sky-cloud { position: absolute; left: 0; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.62); opacity: 0; filter: blur(7px);
  animation: sky-drift var(--dur, 60s) linear var(--dl, 0s) infinite; }
.sky-cloud::after { content: ""; position: absolute; left: 22%; bottom: 30%; width: 46%; height: 150%; border-radius: 50%; background: inherit; }
:root[data-phase="day"] .sky-cloud, :root[data-phase="dawn"] .sky-cloud { opacity: 1; }
:root[data-phase="dawn"] .sky-cloud { background: rgba(255, 236, 224, 0.7); }
@keyframes sky-drift { from { transform: translateX(-140px); } to { transform: translateX(110vw); } }
/* the head: the icon's sun, as wide as the screen; only its top rises above the band's lower edge */
.sky-sun { position: absolute; left: 50%; top: calc(var(--top) + 30px); width: var(--sun-d); aspect-ratio: 1; z-index: 1;
  transform: translate(-50%, var(--sun-y, 0px)) scale(var(--sun-sx, 1), var(--sun-sy, 1)); transform-origin: 50% 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sky-sun-body { position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 20%;
  background: radial-gradient(40% 24% at 43% 5%, #fff0c4 0%, #ffc864 42%, #ff9d45 78%, #ff8a3a 100%);
  box-shadow: inset 0 2.5px 1px rgba(255, 248, 226, 0.9), 0 0 60px 18px rgba(255, 170, 80, 0.38);
  animation: sun-breathe 4.6s ease-in-out var(--d-breathe, 0s) infinite; }
@keyframes sun-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.012); } }
.sky-face { position: absolute; left: 50%; top: 4.2%; width: 22%; transform: translate(calc(-50% + var(--look-x, 0px)), var(--look-y, 0px)); transition: transform .5s cubic-bezier(0.25, 1, 0.3, 1); }
.sky-face svg { display: block; width: 100%; height: auto; aspect-ratio: 306 / 220; overflow: visible; stroke: none; }
.sky-hero.tracking .sky-face { transition: transform .12s ease-out; }
.sky-hero.is-reading:not(.tracking) .sky-face { transform: translate(-50%, 7px); }
.sky-face .f-open { transform-box: fill-box; transform-origin: 50% 60%; animation: f-blink 5.4s var(--d-blink, 0s) infinite; }
@keyframes f-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(0.1); } }
.sky-face .f-happy, .sky-face .f-asleep, .sky-face .f-brows { opacity: 0; }
.sky-face .f-happy { transition: opacity .12s ease; }
.sky-hero.is-happy .f-open, .sky-hero.is-patted .f-open, .sky-hero.is-asleep .f-open { opacity: 0; }
.sky-hero.is-happy .f-happy, .sky-hero.is-patted .f-happy { opacity: 1; }
.sky-hero.is-asleep:not(.is-patted) .f-asleep { opacity: 1; }
.sky-hero.is-worried:not(.is-patted) .f-brows { opacity: 1; }
.sky-hero.is-thinking .sky-face, .sky-hero.is-working:not(.tracking) .sky-face { animation: face-glance 3.2s ease-in-out infinite; }
@keyframes face-glance { 0%, 30%, 100% { translate: 0 0; } 40%, 55% { translate: -10px -3px; } 65%, 80% { translate: 10px -2px; } }
.sky-hero.is-surprised .f-open { animation: none; transform: scale(1.14); transition: transform .15s ease; }
/* asleep: z's float up beside the head */
.sky-zzz { position: absolute; left: calc(50% + 46px); top: calc(var(--top) + 4px); z-index: 2; display: none; pointer-events: none; }
.sky-hero.is-asleep:not(.is-patted) .sky-zzz { display: block; }
.sky-zzz span { position: absolute; font: 700 13px/1 ui-rounded, -apple-system, system-ui; color: rgba(255, 255, 255, 0.85); opacity: 0; animation: zzz 3.6s ease-out infinite; }
.sky-zzz span:nth-child(2) { animation-delay: 1.2s; font-size: 16px; }
.sky-zzz span:nth-child(3) { animation-delay: 2.4s; font-size: 11px; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 18px) rotate(-8deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -26px) rotate(10deg); } }
/* working: the glow breathes faster */
.sky-hero.is-working .sky-sun-body { animation: sun-breathe 4.6s ease-in-out var(--d-breathe, 0s) infinite, sun-work 1.8s ease-in-out var(--d-work, 0s) infinite; }
@keyframes sun-work { 0%, 100% { box-shadow: inset 0 2.5px 1px rgba(255, 248, 226, 0.9), 0 0 60px 18px rgba(255, 170, 80, 0.38); }
  50% { box-shadow: inset 0 2.5px 1px rgba(255, 248, 226, 0.9), 0 0 86px 32px rgba(255, 170, 80, 0.55); } }
/* a pat: squash, spring up, settle */
.sky-sun.petted .sky-sun-body { animation: sun-pat 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1; }
.sky-sun.petted .sky-face { animation: face-pat 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1; }
@keyframes sun-pat { 0% { transform: scale(1, 1); } 22% { transform: scale(1.04, 0.9); } 55% { transform: translateY(-16px) scale(0.98, 1.04); } 80% { transform: translateY(2px) scale(1.01, 0.99); } 100% { transform: none; } }
@keyframes face-pat { 0% { translate: 0 0; } 22% { translate: 0 6px; } 55% { translate: 0 -16px; } 80% { translate: 0 2px; } 100% { translate: 0 0; } }
.sky-heart { position: fixed; width: 12px; height: 12px; z-index: 30; pointer-events: none; transform: rotate(45deg); background: #ff7a59; border-radius: 3px 0 3px 0; opacity: 0; animation: sky-heart 1.3s ease-out forwards; }
.sky-heart::before, .sky-heart::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: inherit; }
.sky-heart::before { left: -6px; top: 0; }
.sky-heart::after { left: 0; top: -6px; }
@keyframes sky-heart { 0% { opacity: 0; transform: translate(0, 10px) rotate(45deg) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift, 0), -56px) rotate(45deg) scale(1); } }
/* what it says: a bubble just above its head */
.sky-say { position: absolute; z-index: 3; left: 50%; top: calc(var(--top) - 4px); max-width: 62%; padding: 7px 13px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.95); color: #2b2018; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; white-space: pre-line;
  box-shadow: 0 8px 22px -10px rgba(20, 20, 60, 0.45); opacity: 0; transform: translate(-50%, 6px) scale(0.9); transform-origin: 50% 100%; pointer-events: none;
  transition: opacity .2s ease, transform .34s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sky-say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.sky-say.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sky-say:empty { display: none; }
/* corners: what it is doing (left), brief settings (right) */
.sky-chip { position: absolute; z-index: 3; top: calc(var(--top) + 2px); left: 14px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px;
  border-radius: 15px; background: var(--chip); color: var(--hero-ink); font-size: 12.5px; font-weight: 600; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sky-chip[hidden] { display: none; }
.sky-chip.is-failed { padding-left: 12px; }
.sky-chip i { width: 7px; height: 7px; border-radius: 50%; background: #ffb25a; animation: chip-ping 1.6s ease-out infinite; }
@keyframes chip-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 90, 0.75); } 100% { box-shadow: 0 0 0 8px rgba(255, 178, 90, 0); } }
:root[data-ui] .sky-hero .sky-tool { position: absolute; z-index: 3; top: var(--top); right: 14px; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: var(--chip); color: var(--hero-ink); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-ui] .sky-hero .sky-tool svg { width: 18px; height: 18px; }
.sky-hero .sky-chip:active, .sky-hero .sky-tool:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .sky-hero *, .sky-hero *::before, .sky-hero *::after { animation: none !important; } }
/* the cards' time, on the right of their first line */
.story .brief-category { display: flex; align-items: center; min-width: 0; }
.story .brief-category .story-cat { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .story-when { flex: none; margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0; }

@media (max-width: 760px) {
  /* 今天: the band starts at the very top of the screen, under the status bar, edge to edge */
  :root[data-ui] .shell.on-today .page-scroll { padding-top: 0; }
  .shell.on-today .sky-hero { --top: env(safe-area-inset-top, 20px); --band: 156px; margin: 0 -16px 14px; border-radius: 0 0 30px 30px; }
  /* phone pages (not the chat): no bar of their own at the top, only the status bar; content gets a soft edge under it once scrolled */
  :root[data-ui] .shell:not(.on-chat) .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 12; height: env(safe-area-inset-top, 0px); min-height: 0; padding: 0;
    background: transparent !important; border: 0; pointer-events: none; }
  :root[data-ui] .shell:not(.on-chat) .topbar > * { display: none; }
  :root[data-ui] .shell:not(.on-chat) .topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 24px);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 66%, color-mix(in srgb, var(--bg) 70%, transparent) 84%, transparent 100%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
    opacity: 0; transition: opacity .25s ease; }
  :root[data-ui] .shell.scrolled:not(.on-chat) .topbar::before { opacity: 1; }
  :root[data-ui] .shell:not(.on-chat):not(.on-today):not(.on-assistant) .page-scroll { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  /* the floating tab bar sits low like iOS 26 (the home indicator just under it); the ask bar rides right above it */
  :root { --nav-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 10px)); }
  :root[data-ui] .shell .mobile-nav { bottom: var(--nav-bottom); }
  :root[data-ui] .shell .askbar { bottom: calc(var(--nav-bottom) + 72px); }
  :root[data-ui] .shell .main { padding-bottom: calc(var(--nav-bottom) + 70px); }
  :root[data-ui] .shell:not(.on-chat):not(.in-sub) .page-scroll { padding-bottom: calc(var(--nav-bottom) + 150px); }
  #toast { bottom: calc(var(--nav-bottom) + 136px); }
  /* below the bars, the page fades out instead of showing through sharp (the chat has its own input card instead) */
  .shell:not(.in-sub):not(.on-chat) .main::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
    height: calc(var(--nav-bottom) + 158px);
    background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 60%, color-mix(in srgb, var(--bg) 80%, transparent) 76%, transparent 100%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(0deg, #000 72%, transparent); mask-image: linear-gradient(0deg, #000 72%, transparent); }
  /* typing in the chat: the tab bar steps aside and the input card sits right on the keyboard */
  :root[data-ui] body.chat-typing .shell .main { padding-bottom: 6px; }
  /* 助理: its banner also starts under the status bar */
  :root[data-ui] .shell.on-assistant .page-scroll { padding-top: 0; }
  :root[data-ui] .shell.on-assistant .pet-hero { margin-top: 0; height: calc(212px + env(safe-area-inset-top, 0px)); }
  :root[data-ui] .shell.on-assistant .pet-tools { top: calc(env(safe-area-inset-top, 0px) + 2px); }
}
/* 任务: the list starts right under its switch */
.page-tasks .segments + .section-heading { margin-top: 14px; }
/* the header chip when something waits for him */
.sky-chip.is-needs i { background: #ff6b4a; animation: chip-ping-red 1.6s ease-out infinite; }
@keyframes chip-ping-red { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0.75); } 100% { box-shadow: 0 0 0 8px rgba(255, 107, 74, 0); } }
/* the chat: the send button pops in when there is something to send; his message rises from the input card */
body .db-composer.has-text .send-button { animation: send-in .28s cubic-bezier(0.3, 1.5, 0.5, 1); }
body .db-composer .send-button:active { transform: scale(0.88); }
@keyframes send-in { from { opacity: 0; transform: scale(0.4) rotate(-30deg); } to { opacity: 1; transform: none; } }
.message.user.appear { animation: msg-rise .42s cubic-bezier(0.2, 0.9, 0.25, 1.05); transform-origin: 100% 100%; }
@keyframes msg-rise { 0% { opacity: 0; transform: translateY(34px) scale(0.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.message.assistant.appear { animation: msg-in .32s ease-out; }
/* the reply on its way: its status words shimmer (as in ChatGPT / Claude) instead of a spinner */
.live-status .spinner { display: none; }
.live-status .live-label { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: label-shimmer 1.8s linear infinite; font-size: 13.5px; }
@keyframes label-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.live-status .live-label { animation-delay: calc(var(--shimmer-sync, 0) * 1s); }
/* a round that did not finish: why, and one button to run it again */
.thread-error { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 14px 14px 14px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--bad, #d9534f) 8%, var(--surface)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--bad, #d9534f) 22%, transparent); }
.thread-error-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.thread-error-text strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.thread-error-text span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.thread-retry { flex: none; height: 34px; padding: 0 16px; border-radius: 17px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; }
.thread-retry:active { transform: scale(0.95); }
:root[data-ui] .thread-composer .send-button:disabled { background: var(--sunken, rgba(120, 120, 130, 0.16)); color: var(--ink-4); box-shadow: none; }
/* iOS action sheet */
.action-shade { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.32); animation: backdrop-in .22s ease; }
.action-shade.out { opacity: 0; transition: opacity .22s ease; }
.action-sheet { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 96; display: flex; flex-direction: column; gap: 8px;
  animation: action-in .34s cubic-bezier(0.32, 0.72, 0, 1); }
.action-sheet.out { transform: translateY(110%); transition: transform .24s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes action-in { from { transform: translateY(110%); } }
.action-group { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--surface-2, #fff) 90%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.action-title { padding: 14px 18px 12px; font-size: 13px; line-height: 1.45; color: var(--ink-3); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.action-item { min-height: 56px; padding: 0 16px; font-size: 18px; color: var(--brand-ink, var(--accent)); text-align: center; background: transparent; border-top: 0.5px solid var(--line); }
.action-group > .action-title + .action-item, .action-group > .action-item:first-child { border-top-color: var(--line); }
.action-group > .action-item:first-child { border-top: 0; }
.action-item:active { background: rgba(120, 120, 130, 0.14); }
.action-item.danger { color: #e5484d; }
.action-cancel { border-radius: 16px; border-top: 0; font-weight: 600; background: var(--surface-2, #fff); color: var(--brand-ink, var(--accent)); }
.memory-row { cursor: pointer; }
.memory-row:active { background: rgba(120, 120, 130, 0.08); }
/* the app's tint (sunrise orange), not system blue, for 查看更多 */
.push-more { color: var(--brand-ink, #c4561c); }
@media (max-width: 760px) {
  /* the chat: messages fade out at the top and bottom edges of their area instead of being cut by a hard line */
  .shell.on-chat .chat-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 14px), transparent 100%); }
}
/* the app's own chrome is not text: a long press on a chip, a time, a button or a bar does not start selecting words */
.origin-line, .msg-time, .reaction-chip, .live-status, .topbar, .mobile-nav, .askbar, .segments, .page-head, .section-heading,
.sky-hero, .pet-hero, .brief-category, .rating-row, .buttons, button, .back-round, .theme-seg, .setting-row, .row-meta, .story-when {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* a chat message that got no reply: one quiet line with 重试 */
.run-error { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin: 2px 0 16px 0; padding: 6px 6px 6px 12px; border-radius: 16px;
  background: color-mix(in srgb, #e5484d 9%, var(--surface)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #e5484d 24%, transparent); width: fit-content; max-width: 100%; }
.run-error-dot { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; flex: none; }
.run-error-text { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.run-error-retry { flex: none; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600; }
.run-error-retry:active { transform: scale(0.94); }
.message.user + .run-error { margin-left: auto; }

/* ---- 今天 cards (0.6.36): colour stays a mark, not a surface (the 10-29 rule, direction B): white glass cards from
   sky.css untouched; only the first line and one button carry 晨报 orange / 晚报 dusk blue; 关注更新 stays black-white-grey. ---- */
/* one screen per card: summary to three lines, first chart only; the rest behind 展开 */
:root[data-ui] .page-today .story:not(.open) .story-more { display: none; }
:root[data-ui] .page-today .story:not(.open) .brief-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
:root[data-ui] .page-today .story .brief-summary { font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
:root[data-ui] .page-today .story .brief-headline { font-size: 18px; line-height: 1.38; }
:root[data-ui] .page-today .story .brief-block { margin-top: 12px; }
:root[data-ui] .page-today .story .brief-metric, :root[data-ui] .page-today .story .brief-metric + .brief-metric { padding: 9px 12px; border-radius: 12px; }
:root[data-ui] .page-today .story .brief-metric-value { font-size: 18px; line-height: 1.25; }
:root[data-ui] .page-today .story .brief-actions { margin-top: 12px; }
:root[data-ui] .page-today .story .brief-actions button { height: 36px; padding: 0 15px; font-size: 14px; }
.story-toggle { display: block; margin: 10px 0 -4px auto; height: 28px; min-height: 0; padding: 0 2px; border: 0; background: none; box-shadow: none;
  color: var(--card-accent, var(--ink-3)); font-size: 13px; font-weight: 600; -webkit-user-select: none; user-select: none; }
.story-toggle::after { content: " ›"; display: inline-block; transition: transform .2s ease; }
.story.open .story-toggle::after { transform: rotate(-90deg); }
.story.open .story-more { animation: more-in .24s ease both; }
@keyframes more-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* table: several things side by side; bars: a few numbers to compare at a glance */
.brief-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; background: rgba(120, 110, 130, 0.07); font-size: 13.5px; }
.brief-table th { padding: 8px 10px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.brief-table td { padding: 7px 10px; border-top: 0.5px solid rgba(120, 110, 130, 0.16); color: var(--ink); font-variant-numeric: tabular-nums; }
.brief-table td:first-child { font-weight: 600; }
.brief-bar-row { display: grid; grid-template-columns: minmax(0, 34%) 1fr auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.brief-bar-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.brief-bar-track { height: 8px; border-radius: 4px; background: rgba(120, 110, 130, 0.1); overflow: hidden; }
.brief-bar-row .brief-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--card-accent, var(--accent)); }
.brief-bar-row.tone-bad .brief-bar-fill { background: #e5484d; } .brief-bar-row.tone-good .brief-bar-fill { background: #30a46c; }
.brief-bar-value { font-weight: 650; font-variant-numeric: tabular-nums; }
/* 10-31: 关注更新 shares 晚报's dusk blue (his pick) — still two colours, still only the first line and the main button */
:root[data-ui] .page-today .story.edition-push .brief-actions .primary { background: var(--card-accent); color: #fff; }
/* 10-31 (his pick after the Today AI / Muse study): 关注更新 take orange or dusk blue by topic; red only for
   a real problem — one small label in the first line (max one a screen) and falling numbers in tables. */
.story-alert { flex: none; margin-left: 2px; padding: 1px 7px; border-radius: 6px; background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.brief-category .story-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-table td.neg { color: #e5484d; }
/* 10-31: no text selection / copy menu on the 今天 cards (a long press while scrolling kept popping 「拷贝」) */
:root[data-ui] .page-today .story, :root[data-ui] .page-today .story * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root[data-ui] .page-today .story input { -webkit-user-select: text; user-select: text; }
/* the last line of a card: 展开 left; 👍 👎 ⊘ 分享 right */
.story-foot { display: flex; align-items: center; gap: 2px; margin: 10px -8px -8px 0; }
.story-foot .story-toggle { margin: 0; }
.story-foot-gap { flex: 1; }
:root[data-ui] .story-foot .icon-button.story-act { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
  display: grid; place-items: center; color: var(--ink-4, #a9a6ae); transition: color .15s ease, transform .15s ease; }
.story-foot .story-act svg { width: 19px; height: 19px; stroke-width: 1.8; }
.story-foot .story-act:active { transform: scale(0.86); }
:root[data-ui] .story-foot .story-act.on { color: var(--card-accent, var(--accent)); }
.story-foot .story-act.on svg { fill: color-mix(in srgb, var(--card-accent, #e8692c) 18%, transparent); }
.story-note { display: flex; gap: 8px; margin-top: 10px; animation: more-in .2s ease both; }
.story-note input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: rgba(120, 110, 130, 0.09); font-size: 15px; color: var(--ink); }
.story-note-send { height: 38px; min-height: 0; padding: 0 16px; border: 0; border-radius: 19px; background: var(--card-accent, var(--accent)); color: #fff; font-size: 14px; font-weight: 600; box-shadow: none; }
/* 10-31: on the phone the chat never starts a system text selection (a long press beside a bubble selected the whole
   screen); long-press a message for 复制 / 引用回复 instead. Inputs stay selectable. */
@media (hover: none) {
  .chat-scroll, .chat-scroll * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .chat-scroll input, .chat-scroll textarea { -webkit-user-select: text; user-select: text; }
}
/* 10-31: the keyboard, driven by the app (html.native-kb): the content above it moves on the keyboard's own timing and
   curve, and the tab bar fades instead of popping back. Older apps without the signal keep the chat-typing rules. */
@media (max-width: 760px) {
  html.native-kb[data-ui] .shell .main { transition: padding-bottom var(--kb-dur, .25s) cubic-bezier(0.38, 0.7, 0.125, 1); }
  html.native-kb.kb-open[data-ui] .shell .main, html.native-kb.kb-open[data-ui] body.chat-typing .shell .main { padding-bottom: calc(var(--kb) + 6px); }
  html.native-kb[data-ui] body.chat-typing .mobile-nav { display: flex; opacity: 0; transform: translateY(24px); pointer-events: none; }
  html.native-kb .mobile-nav { transition: opacity var(--kb-dur, .25s) ease, transform var(--kb-dur, .25s) cubic-bezier(0.38, 0.7, 0.125, 1); }
  html.native-kb.kb-open .mobile-nav { opacity: 0; transform: translateY(24px); pointer-events: none; }
  html.native-kb dialog#modal { transition: margin-bottom var(--kb-dur, .25s) cubic-bezier(0.38, 0.7, 0.125, 1); }
  html.native-kb.kb-open dialog#modal { margin-bottom: var(--kb); }
}

/* 10-31: let go after pulling the 今天 page down — the stretched head springs back (boing); pulled hard, it looks surprised */
.sky-sun.boing .sky-sun-body { animation: sun-boing 0.75s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }
.sky-sun.boing .sky-face { animation: face-pat 0.75s cubic-bezier(0.3, 1.4, 0.5, 1) 1; }
@keyframes sun-boing { 0% { transform: scale(0.95, 1.1); } 30% { transform: scale(1.06, 0.9); } 55% { transform: scale(0.98, 1.04); } 80% { transform: scale(1.01, 0.99); } 100% { transform: none; } }
.sky-hero.is-pulled .sky-face { transition: transform .12s ease-out; }
/* 10-31: the choice card asks instead of guessing — the recommended option first, marked; one tap answers */
.choice-chip.recommended { box-shadow: inset 0 0 0 1.5px var(--brand, #e8692c); font-weight: 600; }
.choice-chip .choice-rec { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--brand, #e8692c); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
/* 10-31: first meeting — it asks for a name and what to call him */
.intro-card { margin: 28px auto 12px; max-width: 420px; padding: 26px 22px 22px; border-radius: 26px; background: var(--surface-2, #fff);
  box-shadow: 0 1px 2px rgba(60, 40, 80, .05), 0 18px 40px -26px rgba(60, 40, 80, .35); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.intro-card .seal { align-self: center; margin-bottom: 6px; }
.intro-title { margin: 0; text-align: center; font-size: 22px; font-weight: 700; }
.intro-lede { margin: 0 0 10px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.intro-label { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.intro-card input { height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(120, 110, 130, .08); font-size: 17px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.intro-card input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand, #e8692c); }
.intro-card .primary { margin-top: 14px; height: 48px; border-radius: 24px; font-size: 16px; font-weight: 600; }
.name-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.name-ideas .round-chip { height: 30px; padding: 0 12px; font-size: 13.5px; }
/* 助理 page: the name is a button (pencil beside it), the line under it says what it calls him */
.assistant-name-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; min-height: 0; }
.assistant-name-btn svg { width: 17px; height: 17px; color: var(--ink-3); }
button.assistant-since { display: block; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; text-align: center; }

/* ---- 设置 (10-31): after iOS 设置 — you on top, short groups of one-line rows with small coloured icons ---- */
.page-settings .settings-title { margin-bottom: 14px; }
.pref-me { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 0; padding: 14px 16px; border: 0; border-radius: 18px;
  background: var(--surface-2, #fff); box-shadow: 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); text-align: left; color: var(--ink); }
.pref-me .seal { flex: none; }
.pref-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pref-me-name { font-size: 19px; font-weight: 700; }
.pref-me-sub { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pref-me > svg, .pref-row > svg:last-child { flex: none; width: 15px; height: 15px; color: var(--ink-4, #b9b6be); }
.pref-title { margin: 26px 16px 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pref-note { margin: 8px 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.pref-group { border-radius: 18px; overflow: hidden; background: var(--surface-2, #fff); box-shadow: 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); }
.pref-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px 0 14px; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-align: left; color: var(--ink); }
.pref-row:active { background: rgba(120, 110, 130, .08); }
.pref-row + .pref-row::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 0.5px; background: var(--line, rgba(0,0,0,.08)); }
.pref-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.pref-icon svg { width: 17px; height: 17px; stroke-width: 2; color: #fff; }
.pref-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pref-label { font-size: 16px; }
.pref-sub { font-size: 12.5px; color: var(--ink-3); }
.pref-value { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ink-3); }
.pref-theme { padding: 10px; }
.pref-theme .theme-seg { display: flex; width: 100%; }
.pref-theme .theme-opt { flex: 1; }
/* settings sheets (10-31): labels, fields and the one 保存 button laid out the same everywhere */
.pref-theme .theme-opt { justify-content: center; text-align: center; }
@media (max-width: 760px) {
  dialog#modal .modal-body > label { display: block; margin: 18px 2px 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
  dialog#modal .modal-body > .modal-header + label { margin-top: 6px; }
  dialog#modal .modal-body > input, dialog#modal .modal-body > select { width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 14px;
    background: rgba(120, 110, 130, .08); box-shadow: none; font-size: 16px; color: var(--ink); }
  dialog#modal .modal-body > textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(120, 110, 130, .08); box-shadow: none; font-size: 16px; line-height: 1.5; color: var(--ink); }
  dialog#modal .modal-body > input:focus, dialog#modal .modal-body > select:focus, dialog#modal .modal-body > textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand, #e8692c); }
  dialog#modal .modal-body > .name-ideas { margin: 10px 0 2px; }
  dialog#modal .modal-body > .modal-copy { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
  dialog#modal .modal-body > .buttons:last-child { margin-top: 22px; }
  dialog#modal .modal-body > .buttons:last-child > .primary:only-child { width: 100%; height: 50px; border-radius: 25px; font-size: 16px; font-weight: 600; }
}
/* 模型 list: tap to use, ⓘ to edit, delete inside */
dialog#modal .model-list { margin: 14px 0 6px; }
.model-row { padding-right: 6px; }
.model-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; color: inherit; }
.model-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-4, #c7c4cc); }
.model-radio.on { box-shadow: inset 0 0 0 7px var(--brand, #e8692c); }
.model-row .pref-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-info { flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--ink-3); display: grid; place-items: center; }
.model-info svg { width: 18px; height: 18px; }
.model-add { min-height: 52px; color: var(--brand, #e8692c); }
.model-add-plus { width: 22px; text-align: center; font-size: 20px; font-weight: 500; }
.model-add .pref-label { color: var(--brand, #e8692c); font-weight: 600; }
.pref-danger { display: block; width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 24px; background: rgba(229, 72, 77, .1); box-shadow: none; color: #e5484d; font-size: 16px; font-weight: 600; }
/* rows that save at once: a switch, a time or number on the right, an action in the brand colour */
dialog#modal .pref-title:first-of-type { margin-top: 6px; }
.pref-switch, .pref-field { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }
.pref-switch .switch { flex: none; }
.pref-field { cursor: text; }
.pref-field .pref-label { flex: 1; }
.pref-field input { flex: none; width: auto; max-width: 52%; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(120, 110, 130, .1);
  box-shadow: none; font-size: 15px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.pref-field input[type="number"] { width: 72px; }
.pref-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand, #e8692c); }
.pref-action { min-height: 50px; }
.pref-action .pref-label { color: var(--brand, #e8692c); font-weight: 500; }
.pref-group .model-info { margin-right: 4px; }
.brief-def-form { display: grid; grid-template-columns: 1fr 96px; gap: 8px; padding: 12px 14px 14px; border-top: 0.5px solid var(--line, rgba(0,0,0,.08)); }
.brief-def-form input { height: 40px; padding: 0 12px; border: 0; border-radius: 11px; background: rgba(120, 110, 130, .08); box-shadow: none; font-size: 15px; color: var(--ink); min-width: 0; }
.brief-def-form input:nth-child(3) { grid-column: 1 / -1; }
.brief-def-form .primary { grid-column: 1 / -1; height: 40px; border-radius: 20px; }
.pref-group:empty + .pref-note, .brief-def-form:only-child { border-top: 0; }
.pref-field, .pref-field .pref-label { font-weight: 400; font-size: 16px; color: var(--ink); letter-spacing: 0; margin: 0; }
.pref-field input[type="text"] { max-width: 62%; min-width: 0; flex: 1; }
.brief-def-form { grid-template-columns: 1fr 112px; }
.brief-def-form .primary { background: color-mix(in srgb, var(--brand, #e8692c) 12%, transparent); color: var(--brand, #e8692c); box-shadow: none; font-weight: 600; }
.pref-inline { flex: none; height: 30px; min-height: 0; padding: 0 12px; border: 0; border-radius: 15px; background: rgba(120, 110, 130, .1); box-shadow: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pref-inline.danger { color: #e5484d; background: rgba(229, 72, 77, .1); }
.pref-row > .pref-label:first-child { flex: 1; }
/* 工作记录 */
dialog#modal .run-list { margin-top: 6px; }
.run-row { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.run-row .pref-label { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-state { flex: none; font-size: 13px; color: var(--ink-3); }
.run-state.bad { color: #e5484d; } .run-state.good { color: var(--ink-4, #a9a6ae); }
.device-row { min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
.device-dot { flex: none; width: 10px; height: 10px; margin: 0 4px 0 6px; border-radius: 50%; background: var(--ink-4, #c7c4cc); }
.device-dot.on { background: #30a46c; box-shadow: 0 0 0 4px rgba(48, 164, 108, .15); }
.device-row .pref-sub { white-space: normal; line-height: 1.4; }
.source-row { min-height: 62px; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
.source-row .pref-inline + .pref-inline { margin-left: -4px; }
dialog#modal .connector-grid { margin-top: 2px; }
.pref-more { width: 36px; padding: 0; font-size: 18px; letter-spacing: 1px; }
dialog.action-layer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
dialog.action-layer::backdrop { background: transparent; }
/* 10-31: a sheet scrolls up and down only — never sideways, and never the frame and its content both (felt like dragging a picture) */
@media (max-width: 760px) {
  dialog#modal { overflow: hidden; overscroll-behavior: contain; }
  dialog#modal .modal-body { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  dialog#modal .modal-body * { max-width: 100%; }
  dialog#modal .modal-body img, dialog#modal .modal-body table { max-width: 100%; }
  .usage-kind-top { gap: 10px; } .usage-kind-top > span:first-child { flex: none; } .usage-kind-top .row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
dialog#modal .usage-rows { margin: 4px 0 8px; }

/* ---- 11-01 chat feel: the work as it happens, the answer once, the row that is there the moment he sends, 回到最新 ---- */
/* The live row: the face, the steps so far (they only ever grow, newest slides in), and one shimmering status line that
   streams the sentence being written. No draft answer: the answer shows once, when it is final. */
.live-row .bubble-column { gap: 0; min-width: 0; }
.live-steps { display: flex; flex-direction: column; gap: 5px; margin: 3px 0 8px; min-width: 0; max-width: 100%; }
.live-steps:empty { display: none; }
.live-step { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.live-step::before { content: ""; position: absolute; left: 2px; top: 0.36em; width: 8px; height: 4px; border-left: 1.6px solid var(--ink-4); border-bottom: 1.6px solid var(--ink-4); transform: rotate(-45deg); }
.live-step.fresh { animation: step-in .34s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } }
.live-step-more { padding-left: 18px; font-size: 12px; color: var(--ink-4); }
.live-status { min-width: 0; max-width: 100%; }
.live-status .live-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row.appear { animation: live-in .3s ease-out .1s both; }
@keyframes live-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes live-text-in { from { opacity: 0; } }
/* The answer in: it takes the live row's place; how it got there folds into one line above it (tap to open). */
.message.landed { animation: live-text-in .24s ease-out; }
.msg-steps { margin: 0 0 8px; }
.msg-steps-head { display: inline-flex; align-items: center; gap: 3px; min-height: 0; padding: 2px 0; font-size: 12.5px; color: var(--ink-3); }
.msg-steps-head svg { width: 13px; height: 13px; stroke-width: 2; transition: transform .2s ease; }
.msg-steps.open .msg-steps-head svg { transform: rotate(90deg); }
.msg-steps-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.msg-steps-list .live-step { white-space: normal; }
/* A reply still being revealed keeps its files, choices and notes back; they come in once the text is all there. */
.message.revealing .bubble-column > :not(.bubble):not(.msg-steps) { display: none; }
.message.revealed .bubble-column > :not(.bubble):not(.msg-tools):not(.msg-steps) { animation: live-text-in .28s ease-out; }
/* 回到最新: shows once he is half a screen up; a dot when something new came in below. */
.composer-wrap > .to-bottom { position: absolute; right: max(18px, calc((100% - 740px) / 2)); bottom: calc(100% + 10px); z-index: 6; width: 40px; height: 40px;
  min-height: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2);
  background: color-mix(in srgb, var(--surface-2, #fff) 84%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 0.5px var(--line-strong), 0 6px 18px rgba(0, 0, 0, 0.1);
  opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; transition: opacity .2s ease, transform .26s cubic-bezier(0.32, 0.72, 0, 1); }
.composer-wrap > .to-bottom.show { opacity: 1; transform: none; pointer-events: auto; }
.composer-wrap > .to-bottom.show:active { transform: scale(0.9); transition-duration: .08s; }
.composer-wrap > .to-bottom svg { width: 20px; height: 20px; stroke-width: 2; }
.composer-wrap > .to-bottom.fresh::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand, #ee6a24); box-shadow: 0 0 0 2px var(--surface-2, #fff); }

/* ---- 11-01: the phone app draws the chat's input bar itself, on the keyboard (app 0.4.12+, html.native-bar) ----
   The page's own input row steps aside (the hidden textarea stays as the draft); the attachments above it and 回到最新
   stay. While the app's bar is up (bar-on), the messages end at its top edge: the app tells where (--nb), on the
   keyboard's own timing (--nb-dur), and the tab bar / keyboard padding of the page's own bar do not apply. */
html.native-bar .shell.on-chat .db-composer .composer-row { display: none; }
html.native-bar .shell.on-chat .composer.db-composer { background: transparent; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; }
html.native-bar .shell.on-chat .composer-wrap { padding-top: 0; padding-bottom: 0; }
html.native-bar.bar-on .shell.on-chat .composer-wrap::after { content: ""; display: block; height: var(--nb, 112px);
  transition: height var(--nb-dur, .25s) cubic-bezier(0.38, 0.7, 0.125, 1); }
html.native-bar.bar-on[data-ui] .shell.on-chat .main,
html.native-bar.bar-on.native-kb.kb-open[data-ui] .shell.on-chat .main { padding-bottom: 0 !important; }

/* ---- 11-01 连接应用: a page with 本机 / 云端 / 其他设备, rows with app-like tiles, a small 「连接」 that opens the system prompt ---- */
.conn-lead { margin: -6px 0 16px; font-size: 14px; color: var(--ink-3); }
.conn-tabs { display: flex; gap: 8px; margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.conn-tabs::-webkit-scrollbar { display: none; }
.conn-tab { flex: none; height: 36px; min-height: 0; padding: 0 16px; border: 0; border-radius: 18px; background: var(--pill, rgba(0,0,0,.06)); box-shadow: none;
  font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.conn-tab.on { background: var(--surface-2, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); font-weight: 600; }
.conn-group { border-radius: 20px; overflow: hidden; background: var(--surface-2, #fff); box-shadow: 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); }
.conn-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 16px; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-align: left; color: var(--ink); }
button.conn-row:active { background: rgba(120, 110, 130, .08); }
.conn-row + .conn-row::before { content: ""; position: absolute; top: 0; left: 74px; right: 0; height: 0.5px; background: var(--line, rgba(0,0,0,.08)); }
.conn-row > svg { flex: none; width: 16px; height: 16px; color: var(--ink-3); stroke-width: 2; }
.conn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conn-name { display: flex; align-items: center; gap: 6px; font-size: 16.5px; font-weight: 500; }
.conn-glyph svg { width: 13px; height: 13px; color: var(--ink-3); stroke-width: 1.8; display: block; }
.conn-desc { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-desc.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #2f9e66; vertical-align: 1px; }
.conn-pill { flex: none; height: 32px; min-height: 0; padding: 0 16px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--brand, #e8692c) 13%, transparent); box-shadow: none;
  font-size: 15px; font-weight: 600; color: var(--brand, #e8692c); }
.conn-pill:active { background: color-mix(in srgb, var(--brand, #e8692c) 24%, transparent); }
.conn-elsewhere { flex: none; font-size: 12.5px; color: var(--ink-3); }
/* tiles: the look of the app each one stands for, drawn here (no borrowed artwork) */
.conn-tile { flex: none; position: relative; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, #8a8893, #6d6b75); box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.08); }
.conn-tile svg { width: 23px; height: 23px; stroke-width: 2; color: #fff; }
.conn-tile.big { width: 76px; height: 76px; border-radius: 19px; }
.conn-tile.big svg { width: 38px; height: 38px; }
.conn-calendar { background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0; color: #1c1c1e; }
.conn-calendar i { font-style: normal; font-size: 9px; font-weight: 600; color: #ff3b30; line-height: 1.2; }
.conn-calendar b { font-size: 21px; font-weight: 400; line-height: 1; letter-spacing: -0.5px; }
.conn-calendar.big i { font-size: 15px; } .conn-calendar.big b { font-size: 36px; }
.conn-reminders { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; padding: 0 9px; }
.conn-reminders i { position: relative; height: 2px; margin-left: 9px; background: #e3e3e8; border-radius: 1px; }
.conn-reminders i::before { content: ""; position: absolute; left: -10px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.conn-reminders.big { gap: 9px; padding: 0 15px; } .conn-reminders.big i { height: 3px; margin-left: 16px; }
.conn-reminders.big i::before { left: -17px; top: -4.5px; width: 12px; height: 12px; }
.conn-health { background: #fff; } .conn-health svg { color: #ff2d55; fill: #ff2d55; stroke: #ff2d55; }
.conn-location { background: linear-gradient(160deg, #5d8fd6, #2f5fa8); }
.conn-notes { background: linear-gradient(160deg, #ffd85e, #f7b500); }
.conn-contacts { background: linear-gradient(160deg, #b9b9be, #8e8e93); }
.conn-apps { background: linear-gradient(160deg, #6f7cf0, #4a55c4); }
.conn-file { background: linear-gradient(160deg, #5ac8fa, #1f8fe0); }
.conn-mail { background: linear-gradient(160deg, #4aa3ff, #0a6fe0); }
.conn-mcp { background: linear-gradient(160deg, #4b4b52, #232327); }
.conn-search { background: linear-gradient(160deg, #39c07a, #2f9e66); }
.conn-upload { background: linear-gradient(160deg, #ff9a5c, #f0651f); }
/* detail page */
.conn-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 4px; padding: 26px 20px 22px; border-radius: 24px;
  background: var(--surface-2, #fff); box-shadow: 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); text-align: center; }
.conn-hero h2 { margin: 10px 0 0; font-size: 22px; font-weight: 600; color: var(--ink); }
.conn-hero p { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.conn-status { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.conn-try { margin-top: 12px; height: 38px; min-height: 0; padding: 0 22px; border: 0; border-radius: 19px; background: var(--pill, rgba(0,0,0,.06)); box-shadow: none;
  font-size: 15px; font-weight: 600; color: var(--ink); }
.conn-device { min-height: 64px; }
.conn-device-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.conn-device-icon svg { width: 22px; height: 22px; color: var(--ink-2); stroke-width: 1.8; }
.conn-device + .conn-device::before { left: 66px; }
.conn-badge { padding: 1px 6px; border-radius: 5px; background: var(--pill, rgba(0,0,0,.06)); font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.conn-actions { margin-top: 22px; }
.conn-action { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 16px; border: 0;
  border-radius: 0; background: none; box-shadow: none; font-size: 16px; color: var(--ink); text-align: left; }
.conn-action:active { background: rgba(120, 110, 130, .08); }
.conn-action + .conn-action::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line, rgba(0,0,0,.08)); }
.conn-action svg { width: 16px; height: 16px; color: var(--ink-3); stroke-width: 2; }
.conn-action.danger { color: #e5484d; }
/* 整台 Mac */
.conn-whole { background: linear-gradient(160deg, #3a4aa0, #1e2558); }
.conn-whole svg { color: #ffd27a; }
.conn-perm { min-height: 64px; }
.conn-perm-dot { flex: none; width: 10px; height: 10px; margin: 0 4px 0 6px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.14); }
.conn-perm-dot.on { background: #2f9e66; box-shadow: 0 0 0 4px rgba(47,158,102,.14); }
.approval-command { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(30, 37, 88, .06); }
.approval-command code { display: block; white-space: pre-wrap; word-break: break-all; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.approval-command small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* 11-01 连接应用, 拾日's own: a night-sky band with the sun peeking in, the three places as one control inside it,
   apps as a two-column grid of cards (国内 first); orange (the sun) for 连接 instead of system blue. */
.conn-band { position: relative; overflow: hidden; margin: 6px 0 4px; padding: 22px 18px 16px; border-radius: 26px; color: #fff;
  background: radial-gradient(120% 90% at 100% 110%, rgba(255, 166, 77, .55) 0%, rgba(255, 166, 77, 0) 55%), linear-gradient(160deg, #1e2558 0%, #2f3a8a 60%, #4a55c4 100%);
  box-shadow: 0 10px 30px -14px rgba(30, 37, 88, .55); }
.conn-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 34% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 58% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 46%, #fff 50%, transparent 51%); }
.conn-band-sun { position: absolute; right: -10px; top: -22px; width: 128px; height: 128px; pointer-events: none; }
.conn-band-sun svg { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 92%); mask-image: linear-gradient(to bottom, #000 58%, transparent 92%); }
.conn-band-sun .m-sky { display: none; }
.conn-band-sun .m-halo { opacity: .55; }
.conn-band-title { position: relative; margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 650; letter-spacing: -0.01em; color: #fff; }
.conn-band-lead { position: relative; max-width: 68%; margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.conn-seg { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.conn-seg-item { flex: 1; min-width: 0; min-height: 0; height: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 0; border-radius: 12px;
  background: none; box-shadow: none; color: rgba(255, 255, 255, .82); transition: background .2s, color .2s; }
.conn-seg-item span { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.conn-seg-item small { font-size: 11.5px; opacity: .75; }
.conn-seg-item.on { background: #fff; color: #1e2558; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.conn-seg-item.on small { color: #7a7f9e; opacity: 1; }
.conn-mark { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.conn-tile.big .conn-mark { font-size: 34px; }
.conn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conn-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 0; height: auto; padding: 14px 14px 12px; border: 0;
  border-radius: 20px; background: var(--surface-2, #fff); box-shadow: 0 0 0 0.5px var(--line, rgba(0,0,0,.06)); text-align: left; color: var(--ink); transition: transform .15s; }
.conn-card:active { transform: scale(.97); }
.conn-card .conn-tile { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 8px; }
.conn-card .conn-mark { font-size: 18px; }
.conn-card strong { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.conn-card small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conn-card-go { position: absolute; top: 14px; right: 12px; font-size: 13px; font-weight: 600; color: var(--brand, #e8692c); }
.conn-card-custom { box-shadow: none; border: 1.5px dashed var(--line, rgba(0,0,0,.14)); background: transparent; }
.conn-custom-plus { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; color: var(--ink-3); background: var(--pill, rgba(0,0,0,.06)); }