:root {
  color-scheme: light;
  --bg: #f4f2eb;
  --surface: #fbfaf6;
  --surface-2: #f0efe8;
  --surface-3: #e4e8df;
  --panel: rgba(251, 250, 246, .96);
  --text: #253d43;
  --text-primary: #253d43;
  --text-secondary: #667477;
  --text-tertiary: #667477;
  --accent: #294c53;
  --accent-hover: #203c43;
  --accent-soft: #e1eae4;
  --border: rgba(50, 73, 76, .16);
  --gold: #94723e;
  --gold-light: #f3e5bd;
  --danger: #a6443d;
  --success: #367451;
  --warning: #8a622b;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 20px;
  --nav-h: 80px;
  --control-h: 46px;
  --control-h-sm: 44px;
  --shadow: 0 12px 36px rgba(40, 59, 53, .045);
  --font-display: "STZhongsong", "Songti SC", "STSong", "SimSun", serif;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1b24;
  --surface: #142832;
  --surface-2: #1c323c;
  --surface-3: #2a424b;
  --panel: rgba(20, 40, 50, .97);
  --text: #f1eee3;
  --text-primary: #f1eee3;
  --text-secondary: #adbdc2;
  --text-tertiary: #a2b4bb;
  --accent: #e4c995;
  --accent-hover: #f1dcaf;
  --accent-soft: #2b424b;
  --border: rgba(181, 202, 207, .18);
  --gold: #dbc08c;
  --gold-light: #fff0c9;
  --danger: #f3ada2;
  --success: #b1d5ab;
  --warning: #e6c28e;
  --shadow: 0 16px 60px rgba(6, 21, 30, .18);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 100px; scroll-padding-bottom: 112px; }
body { margin: 0; color: var(--text); font-size: 14px; line-height: 1.65; min-height: 100svh; padding-bottom: 116px; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: var(--accent); text-underline-offset: 4px; }
button:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
[hidden] { display: none !important; }
svg, img { vertical-align: middle; }
i[data-lucide] { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; align-items: center; justify-content: center; font-style: normal; }
i[data-lucide] svg { width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 200; padding: 12px 20px; border-radius: 12px; background: var(--surface); }
.skip-link:focus { top: 12px; }
.sky-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(155deg, #eef3e7 0%, #dce9e5 30%, #bad4d4 64%, #e1e5cf 100%); transition: background .8s var(--ease); }
/* Season artwork stays below a theme veil; only the active image is visible. */
.sky-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #f8f6effa 0%, #f1f2eefa 48%, #eaf0e5e0 100%); }
html[data-theme="dark"] .sky-scene::after { background: radial-gradient(ellipse at 89% 20%, #22336b30, transparent 52%), linear-gradient(145deg, #0b142efc, #101c3ff5 55%, #16234dec); }
html[data-sky-season="valley"]:not([data-theme="dark"]) .sky-scene::after { background: linear-gradient(155deg, #faf5edfa, #f5efe7f7 55%, #edece8e6); }
html[data-sky-season="valley"][data-theme="dark"] .sky-scene::after { background: radial-gradient(ellipse at 88% 28%, #77545d24, transparent 48%), linear-gradient(145deg, #101c3ffc, #16234df5 55%, #1a2a5cec); }
.sky-landscape { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .8s var(--ease); }
.sky-sun { position: absolute; width: 740px; height: 740px; right: -120px; top: -280px; border-radius: 50%; background: radial-gradient(circle, #ffffe7 0%, #fffae299 20%, #fffde333 42%, transparent 69%); }
.sky-sun::after { content: ""; position: absolute; width: 70px; height: 70px; top: 300px; left: 280px; border-radius: 50%; background: #fffbe1; opacity: .7; box-shadow: 0 0 70px 30px #fff8d380; }
.sky-mist { position: absolute; width: 90vw; height: 22vh; left: -20vw; bottom: 6vh; border-radius: 50%; background: radial-gradient(ellipse, #fffef4a6, #fffef44d 40%, transparent 72%); animation: mist-drift 24s ease-in-out infinite alternate; }
.sky-mist.second { width: 75vw; left: 55vw; bottom: 15vh; opacity: .6; animation-delay: -13s; }
.sky-stars { position: absolute; z-index: 1; inset: 0; opacity: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #f8f1d2 80%, transparent), radial-gradient(1px 1px at 32% 8%, #f8f1d2 80%, transparent), radial-gradient(1px 1px at 72% 34%, #f8f1d2 80%, transparent), radial-gradient(1.5px 1.5px at 84% 14%, #f8f1d2 80%, transparent), radial-gradient(1px 1px at 95% 44%, #f8f1d2 80%, transparent), radial-gradient(1px 1px at 42% 27%, #f8f1d2 80%, transparent); background-size: 650px 500px; }
html[data-theme="dark"] .sky-scene { background: linear-gradient(150deg, #0b142e 0%, #101c3f 55%, #22336b 100%); }
html[data-theme="dark"] .sky-landscape { filter: brightness(.65) saturate(.7); }
html[data-theme="dark"] .sky-sun { opacity: .18; }
html[data-theme="dark"] .sky-mist { opacity: .12; }
html[data-theme="dark"] .sky-stars { opacity: .44; }
html:not([data-sky-season]) .sky-landscape-haven, html[data-sky-season="haven"] .sky-landscape-haven, html[data-sky-season="valley"] .sky-landscape-valley, html[data-sky-season="prince"] .sky-landscape-prince { opacity: 1; }
html[data-sky-season="valley"] .sky-scene { background: linear-gradient(150deg, #f5d7b5 0%, #d99baa 42%, #8791ab 73%, #d7c5a2 100%); }
html[data-sky-season="valley"] .sky-sun { background: radial-gradient(circle, #fff4cf 0%, #ffd99b99 19%, #f4b28b3d 43%, transparent 70%); }
html[data-sky-season="valley"] .sky-stars { opacity: .32; }
html[data-sky-season="valley"] .sky-mist { background: radial-gradient(ellipse, #fff3e6a6, #ffe5d54d 40%, transparent 72%); }
html[data-sky-season="prince"] .sky-scene { background: linear-gradient(150deg, #0d1d2b 0%, #1b314a 48%, #524968 78%, #b17f83 100%); }
html[data-sky-season="prince"] .sky-sun { width: 360px; height: 360px; right: 12vw; top: 7vh; background: radial-gradient(circle, #fff8d9 0%, #f5e7bd88 18%, #d7b9c533 44%, transparent 70%); }
html[data-sky-season="prince"] .sky-stars { opacity: .5; }
html[data-sky-season="prince"] .sky-mist { background: radial-gradient(ellipse, #dbe4ff35, #c7d1f014 40%, transparent 72%); }
html[data-sky-season="prince"]:not([data-theme="dark"]) .sky-scene::after { background: linear-gradient(155deg, #f6f5f0fc, #eef1eff7 58%, #f0ede5eb); }
html[data-reduced-motion="true"] .sky-landscape { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sky-landscape { transition: none !important; } }
.sky-particles { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.nav { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--nav-h); padding: 16px max(40px, calc((100% - 1240px) / 2)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 44%, transparent); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--accent); }
.brand-mark i { width: 33px; height: 33px; }
.brand-mark > svg { width: 34px; height: 43px; }
.brand-name { font-family: var(--font-display); font-size: 23px; font-weight: 400; letter-spacing: 3px; line-height: 1.2; }
.nav-center { font-size: 12px; color: var(--text-secondary); display: flex; gap: 12px; align-items: center; }
.nav-center span:first-child { color: var(--text); }
.nav-actions { display: flex; gap: 7px; align-items: center; min-width: 0; }
.icon-btn, .theme-toggle, .auth-pw-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex: 0 0 auto; border: 1px solid transparent; background: transparent; border-radius: 50%; color: var(--text-secondary); }
.icon-btn:hover, .theme-toggle:hover { background: #ffffff40; border-color: var(--border); color: var(--text); }
.theme-toggle .moon, .theme-toggle .auto { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: inline-flex; }
html[data-theme-pref="system"] .theme-toggle .sun, html[data-theme-pref="system"] .theme-toggle .moon { display: none; }
html[data-theme-pref="system"] .theme-toggle .auto { display: inline-flex !important; }
.avatar-chip { display: inline-flex; align-items: center; gap: 8px; border-left: 1px solid var(--border); padding-left: 15px; margin-left: 7px; }
.avatar-dot { display: grid; place-items: center; overflow: hidden; width: 33px; height: 33px; border-radius: 50%; background: #d1ddc9; color: #41605a; font-size: 12px; font-weight: 600; }
.avatar-dot img { width: 100%; height: 100%; object-fit: cover; }
#userName { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#logout { min-height: 44px; }
#main { position: relative; z-index: 2; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 42px 40px 0; }
.pane { display: none; }
.pane.active { display: block; }
.sky-home.active { display: flex; flex-direction: column; gap: 48px; position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }
.sky-admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto 26px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.sky-admin-label { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.sky-admin-label i { width: 17px; height: 17px; color: var(--gold); }
.sky-admin-actions { display: flex; align-items: center; gap: 8px; }
.sky-admin-actions .btn { white-space: nowrap; }
.sky-admin-actions .btn i { width: 16px; height: 16px; }
.sky-welcome { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr); align-items: center; gap: 76px; padding: 12px 0 30px; }
.sky-welcome-copy { min-width: 0; }
.sky-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); letter-spacing: 1.4px; margin: 0 0 24px; }
.sky-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.sky-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 4.5vw, 64px); line-height: 1.3; letter-spacing: 2px; margin: 0 0 27px; }
.sky-title span { color: var(--gold); }
.sky-intro { color: var(--text-secondary); line-height: 2; font-size: 14px; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-actions .btn { min-height: 52px; padding: 13px 25px; border-radius: 15px; font-size: 14px; }
.hero-actions .btn-ghost { font-size: 13px; padding-left: 10px; padding-right: 10px; }
.sky-companion-note { display: flex; align-items: start; gap: 7px; margin: 20px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.9; }
.sky-companion-note i { width: 13px; height: 13px; margin-top: 3px; }
.sky-encounter { position: relative; width: 100%; max-width: 456px; margin: 0; padding: 9px 9px 0; justify-self: end; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 220px 220px 24px 24px; background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: 0 24px 48px -30px #253d4345; }
.sky-encounter::before { content: ""; position: absolute; z-index: 1; width: 6px; height: 6px; top: -4px; left: calc(50% - 3px); transform: rotate(45deg); background: var(--gold); }
.sky-encounter img { display: block; width: 100%; height: auto; aspect-ratio: 1.23; object-fit: cover; object-position: center bottom; border-radius: 212px 212px 15px 15px; }
.sky-encounter figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 65px; padding: 14px 12px; color: var(--text-secondary); text-align: left; }
.sky-encounter figcaption i { width: 20px; height: 20px; color: var(--gold); }
.sky-encounter figcaption strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 400; letter-spacing: 1px; }
.sky-encounter figcaption small { display: block; font-size: 8px; letter-spacing: 1.5px; opacity: .85; margin-top: 4px; }
html[data-theme="dark"] .sky-encounter { border-color: #dbc08c40; background: #152b34a6; box-shadow: 0 24px 55px -30px #030c1580; }
html[data-theme="dark"] .sky-encounter img, html[data-theme="dark"] .sky-login-story img { filter: saturate(.9); }
.sky-stats { display: flex; align-items: center; gap: 0; margin-top: 18px; }
.sky-stat { flex: 1; min-width: 0; padding: 0 17px; border-right: 1px solid var(--border); }
.sky-stat:first-child { padding-left: 0; }
.sky-stat:last-child { border: 0; }
.sky-stat strong { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 24px; color: var(--accent); line-height: 1.3; }
.sky-stat span { color: var(--text-secondary); font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
.sky-data-status { margin: 11px 0 0; font-size: 10px; color: var(--text-tertiary); }
.sky-journey { position: relative; padding-top: 27px; border-top: 1px solid var(--border); }
.sky-map-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0; }
.sky-map-heading h2 { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 20px; font-weight: 500; margin: 0; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.sky-map-description { font-size: 11px; color: var(--text-secondary); margin: 7px 0 0; line-height: 1.8; }
.sky-star-mosaic { margin: 24px 0 0; padding: 8px 8px 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 18px 40px -28px #152d454d; }
.sky-star-mosaic img { display: block; width: 100%; height: auto; aspect-ratio: 3.4; object-fit: cover; object-position: 50% 26%; border-radius: 12px; background: #10233e; }
.sky-star-mosaic figcaption { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 45px; padding: 11px 12px; color: var(--text-secondary); font-family: var(--font-display); font-size: 13px; letter-spacing: 1.4px; text-align: center; }
.sky-star-mosaic figcaption i { width: 15px; height: 15px; flex: 0 0 15px; color: var(--gold); }
.sky-journey-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 46px; margin-top: 27px; align-items: start; }
.sky-map-field { min-width: 0; }
.sky-journey-aside { min-width: 0; padding: 6px 0 0 29px; border-left: 1px solid var(--border); }
.sky-aside-title { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin: 0; font-size: 12px; letter-spacing: 1px; }
.sky-aside-title span { color: var(--text-secondary); font-size: 8px; letter-spacing: 1.2px; }
.sky-map-heading span { font-size: 10px; color: var(--text-secondary); letter-spacing: 2px; }
.sky-map-heading-actions { display: flex; align-items: center; gap: 14px; }
.sky-map-heading-actions > span { font-size: 10px; color: var(--text-secondary); letter-spacing: 2px; }
.sky-map-open { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 14px; background: #ffffff36; color: var(--accent); font-size: 10px; letter-spacing: 1px; }
/* 后代选择器 .sky-map-heading span 会把按钮内的「展开星图」也染成 --text-secondary，
   而按钮底色是 #ffffff36（提亮后的藏青），实测该组合仅 4.06:1（AA 需 4.5:1）。
   这里让按钮内文字回到 .sky-map-open 自己的强调色（金），实测 ≈5.2:1。 */
.sky-map-open span { color: inherit; }
.sky-map-open i { width: 15px; height: 15px; }
.sky-map-open:hover, .sky-map-open:focus-visible { background: #fff9d878; border-color: var(--gold); }
.sky-constellation { position: relative; height: 288px; margin-top: 12px; }
.sky-constellation > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-constellation > svg path { fill: none; stroke: var(--accent); stroke-width: .22; stroke-dasharray: 1.2 1.4; opacity: .3; }
.sky-constellation > svg circle { fill: var(--gold); opacity: .6; }
.sky-star { position: absolute; left: var(--star-x); top: var(--star-y); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 85px; min-height: 78px; padding: 5px; background: transparent; border: 0; border-radius: 14px; font-size: 12px; white-space: nowrap; color: var(--text); }
.sky-star-orb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff80; background: radial-gradient(circle, #faffedb0, #eef5e85c); box-shadow: 0 0 0 6px #ffffff18; transition: transform .3s var(--ease), box-shadow .3s; color: var(--accent); }
.sky-star-orb i { width: 21px; height: 21px; }
.sky-star.featured .sky-star-orb { width: 58px; height: 58px; border-color: #ffffffbd; background: radial-gradient(circle, #ffffe7, #f1edcd73); box-shadow: 0 0 0 8px #fffce430, 0 0 32px #fffae480; }
.sky-star.featured .sky-star-orb i { width: 27px; height: 27px; }
.sky-star:hover .sky-star-orb, .sky-star:focus-visible .sky-star-orb { transform: translateY(-3px); box-shadow: 0 0 0 7px #fff5ca60, 0 0 34px #fff2b6a6; }
.sky-star-label { padding: 2px 7px; border-radius: 8px; background: #eef3e35e; letter-spacing: 1px; }
html[data-theme="dark"] .sky-star-orb { background: radial-gradient(circle, #75998b55, #557b7c26); border-color: #bad3ba50; }
html[data-theme="dark"] .sky-star.featured .sky-star-orb { background: radial-gradient(circle, #ffe9b733, #9aa6851a); box-shadow: 0 0 0 8px #ecdca915, 0 0 32px #ffebb62e; }
html[data-theme="dark"] .sky-star-label { background: #233d4480; }
.sky-star.active .sky-star-orb, .sky-star.last-visited .sky-star-orb { border-color: var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent), 0 0 28px color-mix(in srgb, var(--gold) 25%, transparent); }
.sky-chart-layer { --text-secondary: #4f696a; position: fixed; inset: 0; z-index: 38; overflow: hidden; background: #d1e2df; color: var(--text); }
.sky-chart-layer.is-open { display: block; }
.sky-chart-backdrop { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #ffffec70, transparent 52%), linear-gradient(160deg, #dae9e5 4%, #aecdd0 57%, #e1e6ce); cursor: pointer; }
.sky-chart-backdrop::before { content: ""; position: absolute; inset: 0; opacity: .85; background-image: radial-gradient(1.5px 1.5px at 14% 29%, #fffce4 90%, transparent), radial-gradient(1px 1px at 33% 11%, #fffce4 90%, transparent), radial-gradient(2px 2px at 76% 21%, #fffce4 90%, transparent), radial-gradient(1px 1px at 89% 61%, #fffce4 90%, transparent), radial-gradient(1.5px 1.5px at 21% 77%, #fffce4 90%, transparent), radial-gradient(1px 1px at 66% 85%, #fffce4 90%, transparent); background-size: 640px 580px; }
.sky-chart-backdrop::after { content: ""; position: absolute; inset: 28% -25% -35%; background: radial-gradient(ellipse at 18% 80%, #fffbedb8, transparent 46%), radial-gradient(ellipse at 82% 78%, #f8f8e97a, transparent 44%); pointer-events: none; }
.sky-chart-shell { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; height: 100%; padding: calc(var(--nav-h) + 16px) 0 calc(116px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.sky-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 0 40px; pointer-events: auto; }
.sky-chart-head > div:first-child { min-width: 0; }
.sky-chart-kicker { margin: 0 0 6px; color: var(--text-secondary); font-size: 10px; letter-spacing: 3px; }
.sky-chart-head h2 { margin: 0; font-family: "STZhongsong", "Songti SC", "SimSun", serif; font-size: clamp(30px, 3vw, 40px); font-weight: 400; line-height: 1.3; letter-spacing: 8px; }
.sky-chart-head p:last-child { margin: 7px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.sky-chart-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sky-chart-head-actions .icon-btn { border-color: #ffffff75; background: #f9fff029; }
.sky-chart-head-actions .icon-btn:hover { border-color: var(--gold); background: #fffce773; }
.sky-chart-page { min-width: 56px; color: var(--text-secondary); font-family: Georgia, serif; font-size: 13px; letter-spacing: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.sky-chart-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; pointer-events: auto; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
.sky-chart-viewport:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.sky-chart-viewport.is-dragging { cursor: grabbing; }
.sky-chart-surface { --chart-x: 0px; position: relative; display: flex; width: 100%; height: 100%; transform: translate3d(var(--chart-x), 0, 0); transition: transform .48s cubic-bezier(.22, .75, .2, 1); will-change: transform; }
.sky-chart-surface.is-dragging { transition: none; }
.sky-chart-pages { display: contents; }
.sky-chart-page-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; padding: 8px clamp(16px, 5vw, 72px) 16px; }
.sky-chart-group-heading { position: relative; text-align: center; pointer-events: none; }
.sky-chart-group-heading h3 { margin: 0; font-family: "STZhongsong", "Songti SC", "SimSun", serif; font-size: 23px; font-weight: 400; line-height: 1.4; letter-spacing: 6px; }
.sky-chart-group-heading h3::before, .sky-chart-group-heading h3::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 16px 4px 10px; transform: rotate(45deg); background: var(--gold); opacity: .7; }
.sky-chart-group-heading p { margin: 6px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.7; letter-spacing: 1.5px; }
.sky-chart-constellation { position: relative; align-self: center; width: min(100%, 920px); height: 100%; max-height: 480px; min-height: 0; }
.sky-chart-halo { position: absolute; left: 50%; top: 48%; width: min(70%, 480px); height: 85%; transform: translate(-50%, -50%) rotate(-18deg); border: 1px solid color-mix(in srgb, var(--gold) 45%, #fff9df38); border-radius: 50%; background: radial-gradient(ellipse, rgba(235, 208, 148, .22), transparent 67%); box-shadow: 0 0 85px rgba(235, 208, 148, .25), inset 0 0 55px rgba(235, 208, 148, .18); pointer-events: none; animation: chart-halo-breathe 7s ease-in-out infinite; }
.sky-chart-halo::before { content: ""; position: absolute; inset: 10%; border: 1px dashed color-mix(in srgb, var(--gold) 55%, #fffce040); border-radius: 50%; }
.sky-chart-halo::after { content: ""; position: absolute; top: 8%; left: 21%; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 20px 6px rgba(235, 208, 148, .75); }
.sky-chart-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sky-chart-lines polyline { fill: none; stroke: #fff9dd; stroke-width: 1; stroke-dasharray: 3 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .82; }
.sky-chart-lines circle { fill: #fffce1; opacity: .85; }
.sky-chart-node { --chart-orb-size: 56px; position: absolute; left: var(--chart-left); top: var(--chart-top); z-index: 1; display: grid; place-items: center; width: var(--chart-orb-size); height: var(--chart-orb-size); min-width: 44px; min-height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; color: #36534f; }
.sky-chart-node-orb { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #fffdeac9; border-radius: 50%; background: radial-gradient(circle, #ffffeca8, #ecf3d85c 59%, #ecf3d826); box-shadow: 0 0 0 7px #fff9db21, 0 0 27px #fff4ba59; transition: transform .3s var(--ease), box-shadow .3s, background .3s; color: #4e736a; }
.sky-chart-node-orb i, .sky-chart-node-orb svg { width: 25px; height: 25px; }
.sky-chart-node-label { position: absolute; z-index: 1; top: calc(100% + 11px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border: 1px solid #fffdf27a; border-radius: 9px; background: #f0f4e8d9; box-shadow: 0 3px 16px #2e51410a; font-size: 12px; line-height: 1.6; letter-spacing: 1.5px; white-space: nowrap; }
.sky-chart-node.featured { --chart-orb-size: 74px; }
.sky-chart-node.featured .sky-chart-node-orb { border-color: #fffbe3; background: radial-gradient(circle, #fffff2, #ffefbba8 53%, #fff5d845); box-shadow: 0 0 0 11px #fff8d532, 0 0 60px #fff1ad8c; color: #6c795e; }
.sky-chart-node.featured .sky-chart-node-orb i, .sky-chart-node.featured .sky-chart-node-orb svg { width: 32px; height: 32px; }
.sky-chart-node.featured .sky-chart-node-orb::before, .sky-chart-node.featured .sky-chart-node-orb::after { content: ""; position: absolute; top: 17%; width: 20px; height: 29px; border-top: 1px solid #fff9d9bf; border-bottom: 1px solid #fff9d954; border-radius: 75% 0; pointer-events: none; }
.sky-chart-node.featured .sky-chart-node-orb::before { left: -18px; transform: rotate(-25deg); }
.sky-chart-node.featured .sky-chart-node-orb::after { right: -18px; transform: scaleX(-1) rotate(-25deg); }
.sky-chart-node:hover .sky-chart-node-orb, .sky-chart-node:focus-visible .sky-chart-node-orb { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 10px #fff5c947, 0 0 42px #fff4bdad; }
.sky-chart-node.is-selected .sky-chart-node-orb { border-color: var(--gold); box-shadow: 0 0 0 9px #fff1b43b, 0 0 42px #fff0a6a6; }
.sky-chart-node.is-selected::after { content: ""; position: absolute; top: -17px; left: calc(50% - 3px); width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 14px #ffe6a380; }
.sky-chart-node.is-selected .sky-chart-node-label { border-bottom-color: var(--gold); }
.sky-chart-footer { display: grid; justify-items: center; gap: 8px; padding: 8px 24px 0; }
.sky-chart-controls { display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: auto; }
.sky-chart-controls .icon-btn { width: 46px; min-height: 46px; border-color: #ffffff75; background: #f9fff03d; color: var(--text); }
.sky-chart-controls .icon-btn:hover:not(:disabled) { border-color: var(--gold); background: #fffce799; }
.sky-chart-controls .icon-btn:disabled { opacity: .35; }
.sky-chart-groups { display: flex; align-items: center; gap: 6px; }
.sky-chart-group-button { position: relative; min-width: 66px; min-height: 44px; padding: 6px 13px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-secondary); font-size: 12px; letter-spacing: 2px; }
.sky-chart-group-button::after { content: ""; position: absolute; left: calc(50% - 2px); bottom: 4px; width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; opacity: .35; }
.sky-chart-group-button:hover { background: #fffce635; color: var(--text); }
.sky-chart-group-button[aria-current="page"] { color: var(--text); }
.sky-chart-group-button[aria-current="page"]::after { background: var(--gold); opacity: 1; box-shadow: 0 0 12px 3px #fff3c78c; }
.sky-chart-hint { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.6; letter-spacing: 1.2px; text-align: center; pointer-events: none; }
.sky-chart-empty { align-self: center; flex: 0 0 100%; padding: 24px; color: var(--text-secondary); text-align: center; }
html[data-theme="dark"] .sky-chart-layer { --text-secondary: #b4c2cf; background: #0b1422; }
html[data-theme="dark"] .sky-chart-backdrop { background: radial-gradient(ellipse at 50% 40%, #b69c7021, transparent 50%), linear-gradient(155deg, #0b1422, #1d3047 58%, #303449); }
html[data-theme="dark"] .sky-chart-backdrop::before { opacity: .72; }
html[data-theme="dark"] .sky-chart-backdrop::after { opacity: .1; }
html[data-theme="dark"] .sky-chart-halo { border-color: #dac69c59; background: radial-gradient(ellipse, #fff0ad0d, transparent 67%); box-shadow: 0 0 65px #fff4cc0c, inset 0 0 45px #fff9dc0a; }
html[data-theme="dark"] .sky-chart-lines polyline { opacity: .45; }
html[data-theme="dark"] .sky-chart-node { color: #f7f4dd; }
html[data-theme="dark"] .sky-chart-node-orb { border-color: #d8eddaa8; background: radial-gradient(circle, #d4edda57, #719f9342 58%, #719f9314); color: #e5eed4; box-shadow: 0 0 0 7px #fff9db10, 0 0 27px #fff4ba21; }
html[data-theme="dark"] .sky-chart-node-label { border-color: #d7c49c38; background: #142439ed; }
html[data-theme="dark"] .sky-chart-node.featured .sky-chart-node-orb { border-color: #fff1bdd4; background: radial-gradient(circle, #fff3c175, #b1ae7659 53%, #8f95672b); color: #fff8dd; box-shadow: 0 0 0 11px #fff8d51c, 0 0 52px #fff1ad42; }
html[data-theme="dark"] .sky-chart-node:hover .sky-chart-node-orb, html[data-theme="dark"] .sky-chart-node:focus-visible .sky-chart-node-orb, html[data-theme="dark"] .sky-chart-node.is-selected .sky-chart-node-orb { border-color: #ffe4a4; box-shadow: 0 0 0 9px #fff1b42b, 0 0 42px #fff0a655; }
html[data-theme="dark"] .sky-chart-node.is-selected .sky-chart-node-label { border-bottom-color: var(--gold); }
html[data-theme="dark"] .sky-chart-head-actions .icon-btn, html[data-theme="dark"] .sky-chart-controls .icon-btn { border-color: #d4e8da38; background: #91afac14; }
html[data-theme="dark"] .sky-chart-head-actions .icon-btn:hover, html[data-theme="dark"] .sky-chart-controls .icon-btn:hover:not(:disabled), html[data-theme="dark"] .sky-chart-group-button:hover { background: #cbe0bd14; }
@keyframes chart-halo-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.sky-map-note { text-align: center; font-size: 10px; letter-spacing: 1px; color: var(--text-secondary); margin: 9px 0 0; }
.sky-play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; margin-top: 27px; padding: 0; }
.sky-rest-note { padding: 0; color: var(--text-secondary); }
.sky-rest-note p { font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 14px; letter-spacing: 2px; margin: 0 0 4px; }
.sky-rest-note span { font-size: 8px; letter-spacing: 1.1px; opacity: .8; }
.sky-call { display: flex; align-items: center; flex-direction: column; gap: 10px; background: transparent; border: 0; padding: 10px 4px; border-radius: 24px; font-size: 10px; letter-spacing: 1px; justify-self: center; }
.sky-call-orb { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; background: #f8f7e53d; border: 1px solid #ffffdd9e; box-shadow: 0 0 0 7px #ffffff12, 0 0 20px rgba(235, 208, 148, .22); color: var(--accent); transition: background .25s, box-shadow .25s, transform .25s; }
.sky-call-orb i { width: 29px; height: 29px; }
.sky-call:hover .sky-call-orb { background: #fdfbe57a; box-shadow: 0 0 0 10px #fff7d733, 0 0 28px rgba(235, 208, 148, .45); transform: scale(1.05); }
.sky-echo { position: fixed; z-index: 5; pointer-events: none; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(255, 245, 204, .9); box-shadow: 0 0 20px rgba(255, 249, 218, .75), inset 0 0 16px rgba(255, 249, 218, .45); animation: echo-expand 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.sky-echo::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(255, 238, 175, .65); box-shadow: 0 0 26px rgba(255, 235, 160, .45); animation: echo-expand-secondary 1.6s cubic-bezier(.22, 1, .36, 1) .09s both; }
.sky-home.is-calling .sky-star-orb { box-shadow: 0 0 26px 8px #fff4b8b8, 0 0 45px rgba(255, 235, 160, .5); }
.sky-home.is-calling .sky-call-orb { background: #fff4cf80; }
.sky-home.is-calling .sky-star-plate { filter: brightness(1.18); transition: filter .3s ease; }
.sky-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding: 0 5px; font-size: 10px; letter-spacing: 2px; color: var(--text-secondary); }
.sky-footer > span { display: flex; align-items: center; gap: 9px; }
.sky-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #759983; box-shadow: 0 0 9px #b9d5a8; }
.night-text { display: none; }
html[data-theme="dark"] .day-text { display: none; }
html[data-theme="dark"] .night-text { display: inline; }
.sky-dock { position: fixed; z-index: 41; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 3px; padding: 7px; border: 1px solid var(--border); border-radius: 20px; background: rgba(251, 250, 246, .94); box-shadow: 0 14px 36px #243c431a, inset 0 1px #ffffff80; backdrop-filter: blur(20px); max-width: calc(100% - 36px); }
.sky-dock button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 87px; min-height: 58px; background: transparent; border: 0; border-radius: 13px; font-size: 11px; color: var(--text-secondary); letter-spacing: .3px; transition: color .2s, background .2s; }
.sky-dock button i { width: 21px; height: 21px; }
.sky-dock button.active { background: var(--accent-soft); color: var(--accent); }
.sky-dock button:hover:not(.active) { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); color: var(--text); }
.sky-dock .mobile-more { display: none; }
html[data-theme="dark"] .sky-dock { background: rgba(16, 28, 63, .96); border-color: #e8c76a33; box-shadow: 0 14px 36px #050b1e66, inset 0 1px #ffffff08; }
html[data-theme="dark"] .sky-dock button.active { background: #e8c76a1e; color: #e8c76a; }
html[data-theme="dark"] .sky-dock button:hover:not(.active) { background: #e8c76a0d; }
body:not([data-auth="authenticated"]) .sky-dock, body:not([data-auth="authenticated"]) .signed-only { display: none; }
body:not([data-current-pane="home"]) .sky-footer { display: none; }
body:not([data-current-pane="home"]) .sky-mist, body.sky-paused .sky-mist { animation-play-state: paused !important; }
@keyframes mist-drift { to { transform: translateX(7vw); } }
@keyframes echo-expand { from { opacity: .9; transform: translate(-50%, -50%) scale(.5); } to { opacity: 0; transform: translate(-50%, -50%) scale(7); } }
@keyframes echo-expand-secondary { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(6.2); } }
.work-heading { display: flex; gap: 18px; align-items: center; max-width: 1080px; margin: 8px auto 26px; }
.work-heading h1 { font-family: var(--font-display); font-size: 32px; font-weight: 400; letter-spacing: 2px; margin: 0 0 6px; }
.work-heading p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.work-heading .icon-btn { border-color: var(--border); background: var(--panel); }
body[data-current-pane="home"] .work-heading { display: none; }
.pane:not(.sky-home) { max-width: 1080px; margin: 0 auto; }
.card { padding: 30px; margin-bottom: 22px; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
.card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
h2, h3, h4 { overflow-wrap: anywhere; }
.card-head h2 { font-size: 20px; font-weight: 500; margin: 0 0 8px; letter-spacing: .4px; }
.card-desc, .desc, .editor-help, .hint, .sub, .muted, .m-meta, .meta-line, .modal-meta { color: var(--text-secondary); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.card-desc { margin: 0; max-width: 800px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border-radius: 12px; border: 1px solid transparent; padding: 9px 16px; font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; flex-shrink: 0; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #edf0f7; box-shadow: 0 3px 8px #050b1e30; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
html[data-theme="dark"] .btn-primary { color: #0a1128; }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.btn-sm { min-height: 44px; padding: 8px 12px; font-size: 12px; border-radius: 10px; }
.btn-lg { min-height: 49px; }
.btn-label-idle { display: inline-flex; align-items: center; gap: 8px; }
.btn-label-busy { display: none; }
.btn.is-loading .btn-label-idle { display: none; }
.btn.is-loading .btn-label-busy { display: inline-flex; gap: 8px; align-items: center; }
.toolbar, .row-actions, .row, .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar { margin-bottom: 20px; }
.toolbar > input { flex: 1 1 220px; min-width: 0 !important; }
.toolbar > select { flex: 0 1 180px; }
.row-actions { gap: 8px; }
.between { justify-content: space-between; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-width: 0; min-height: 46px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 11px 13px; font-size: 14px; line-height: 1.55; transition: border-color .15s; }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: .85; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
input:disabled, select:disabled, textarea:disabled { opacity: .65; }
textarea { min-height: 220px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button { border: 0; border-radius: 7px; color: var(--text); background: var(--surface-2); padding: 7px 11px; margin-right: 12px; font: inherit; }
.form-grid { display: grid; gap: 18px; }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field, .auth-form > label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 18px; }
.form-actions, .vis-seg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vis-seg { padding: 4px; background: var(--surface-2); border-radius: 11px; gap: 0; }
.vis-seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 12px; font-size: 12px; cursor: pointer; }
.check-row, .peer-pro, .pro-switch { display: flex; align-items: center; min-height: 44px; gap: 9px; font-size: 13px; }
.field-label { display: block; margin-bottom: 10px; font-weight: 500; font-size: 13px; }
.var-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.var-chip { min-height: 44px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.editor-help { margin: 8px 0; }
code { font-family: "Cascadia Code", Consolas, monospace; font-size: .9em; border-radius: 5px; padding: 2px 5px; background: var(--surface-2); overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.8 "Cascadia Code", Consolas, monospace; background: var(--surface-2); padding: 18px; border-radius: 12px; }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; text-align: left; }
th { background: var(--surface-2); color: var(--text-secondary); font-weight: 500; white-space: nowrap; padding: 12px; }
td { border-top: 1px solid var(--border); padding: 14px 12px; vertical-align: top; overflow-wrap: anywhere; }
.peers-table { min-width: 800px; }
.peers-table select { min-width: 120px; font-size: 12px; }
.peers-table .row-actions { min-width: 116px; }
.mobile-cards { display: none; }
#pane-bots > .card:first-child .table-desktop { display: none; }
#botsCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mcard { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; min-width: 0; }
.m-title { font-size: 17px; font-weight: 600; margin: 0 0 7px; }
.m-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1px solid var(--gold); border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.m-meta { margin: 8px 0 15px; }
.name-edit { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.name-edit input { flex: 1; }
.name-edit button { flex-shrink: 0; }
.badge, .tag, .pro-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border-radius: 6px; padding: 3px 8px; color: var(--text-secondary); background: var(--surface-2); line-height: 1.65; margin: 2px 3px 2px 0; overflow-wrap: anywhere; }
.badge.ok, .pro-pill.on { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.badge.warn, .pro-note.warn { color: var(--warning); background: color-mix(in srgb, var(--gold) 11%, var(--surface)); }
.badge.err, .badge.off { color: var(--danger); }
.pro-pill { font-size: 10px; padding: 1px 5px; margin: 0; }
.pro-open-btn { gap: 5px; }
.pro-open-btn i { width: 16px; height: 16px; }
.pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pro-grid label { font-size: 12px; }
.pro-grid .hint { display: block; font-size: 10px; margin: 4px 0 7px; }
.pro-note { padding: 12px; border-radius: 10px; font-size: 12px; background: var(--surface-2); color: var(--text-secondary); }
.persona-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.persona-card { position: relative; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); display: flex; flex-direction: column; align-items: stretch; }
.persona-glyph { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: #e6ecda; color: #74835f; margin-bottom: 17px; }
.persona-card:nth-child(3n+2) .persona-glyph { background: #eee5d7; color: #9c805c; }
.persona-card:nth-child(3n) .persona-glyph { background: #e0e9e8; color: #69888a; }
html[data-theme="dark"] .persona-glyph { background: var(--accent-soft); color: var(--accent); }
.persona-card h4 { margin: 0 0 9px; font-weight: 600; font-size: 16px; }
.persona-card .desc { margin: 9px 0 12px; font-size: 12px; }
.persona-card .meta, .persona-card .meta-line { font-size: 10px; color: var(--text-tertiary); margin: 0 0 10px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 3px; margin: 5px 0 17px; }
.tag { font-size: 10px; background: var(--surface-2); }
.persona-card .row-actions, .persona-card .card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 5px; }
.persona-card .btn { padding: 8px 10px; font-size: 11px; }
.card-links { margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.card-links button, .card-links a { min-height: 44px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 24px; font-size: 12px; color: var(--text-secondary); }
.sticker-thumb { width: 100%; height: 130px; object-fit: contain; background: var(--surface-2); border-radius: 10px; }
.sticker-row { display: flex; flex-direction: column; gap: 14px; }
.sticker-body { flex: 1; min-width: 0; }
.llm-prov-list { display: grid; gap: 14px; }
.llm-prov-card, .invite-row { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow-wrap: anywhere; }
.llm-prov-card h4 { margin: 0 0 9px; }
.invite-list { display: grid; gap: 12px; }
.invite-meta, .invite-exp { font-size: 12px; color: var(--text-secondary); }
.invite-code-line, .invite-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.invite-url { color: var(--text-secondary); font-size: 12px; }
.invite-quota { border-radius: 10px; padding: 12px 15px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.list-panel { display: grid; gap: 12px; }
.list-panel > .row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.qr-panel { display: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 24px; text-align: center; margin: 14px 0 22px; }
.qr-panel.show { display: block; }
.qr-status { font-size: 13px; color: var(--text); margin: 0 0 14px; }
.qr-panel img { display: block; margin: 14px auto; background: #fff; padding: 10px; border-radius: 8px; width: 220px; height: 220px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-link { font-size: 12px; overflow-wrap: anywhere; }
.qr-skel { width: 200px; height: 200px; margin: auto; }
.empty { grid-column: 1 / -1; padding: 35px 18px; text-align: center; color: var(--text-secondary); font-size: 13px; border: 1px dashed var(--border); border-radius: 13px; }
.empty .btn { margin-top: 12px; }
.empty-title { color: var(--text); font-size: 15px; }
.sk-rows { display: grid; gap: 12px; width: 100%; }
.skeleton { border-radius: 8px; background: linear-gradient(100deg, var(--surface-2) 25%, var(--surface-3) 45%, var(--surface-2) 65%); background-size: 200% 100%; animation: skeleton-shift 1.8s ease infinite; }
.sk-rows .skeleton { height: 34px; }
.sk-tile { height: 240px; }
@keyframes skeleton-shift { to { background-position: -200% 0; } }
.modal-backdrop, .confirm-backdrop { display: none; position: fixed; inset: 0; z-index: 90; background: #162e3b73; backdrop-filter: blur(5px); padding: 24px; align-items: center; justify-content: center; }
.modal-backdrop.show, .confirm-backdrop.show { display: flex; }
.confirm-backdrop { z-index: 110; }
#tryChatModal { z-index: 100; }
.modal, .confirm-card { width: min(730px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 28px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: 0 22px 80px #1029222e; }
.confirm-card { width: min(440px, 100%); }
.modal h3, .confirm-card h3 { margin: 0 0 13px; font-size: 22px; font-weight: 500; }
.modal > .row-actions, .confirm-card .row-actions { justify-content: flex-end; margin-top: 22px; }
.modal-handle { display: none; }
#tryChatModal { --chat-cape: #efe1ba; --chat-cape-shade: #b8aa86; --chat-realm: #9dbcaa; }
.try-chat-modal { display: flex; flex-direction: column; width: min(760px, 100%); height: min(800px, calc(100dvh - 56px)); min-height: 0; overflow: hidden; padding: 28px 32px 18px; border: 1px solid color-mix(in srgb, var(--gold) 25%, var(--border)); border-radius: 26px; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--chat-realm) 7%, transparent), transparent 45%), var(--surface); box-shadow: 0 32px 90px #0e283040; }
.try-chat-head { display: flex; flex-shrink: 0; gap: 16px; align-items: center; margin-bottom: 0; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.try-chat-avatar { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 72px; border: 1px solid color-mix(in srgb, var(--chat-cape) 45%, var(--border)); border-radius: 32px 32px 18px 18px; background: color-mix(in srgb, var(--chat-cape) 14%, var(--surface)); }
.try-chat-avatar svg { width: 52px; height: 60px; }
.try-chat-heading { flex: 1; min-width: 0; }
.try-chat-head h3 { margin: 4px 0; font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: 1.5px; line-height: 1.35; overflow-wrap: anywhere; }
.try-chat-head p { margin: 0; }
.try-chat-head .desc { color: var(--text-secondary); font-size: 11px; line-height: 1.7; }
.try-chat-place { display: flex; align-items: center; gap: 7px; color: var(--gold); font-size: 10px; letter-spacing: 2px; }
.try-chat-place::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }
#tryChatClose { flex: 0 0 44px; align-self: flex-start; width: 44px; padding: 0; border-radius: 50%; }
.try-chat-log { flex: 1 1 auto; min-height: 100px; height: auto; overflow: auto; overscroll-behavior: contain; background: transparent; border: 0; border-radius: 0; padding: 26px 2px 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.try-chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 4px 0 12px; text-align: center; }
.try-chat-empty-art { width: min(216px, 80%); height: auto; border-radius: 110px 110px 15px 15px; opacity: .95; }
.try-chat-empty-kicker { margin: 22px 0 8px; font-family: var(--font-display); font-size: 25px; letter-spacing: 2px; }
.try-chat-empty-copy { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.85; }
.try-chat-starters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; }
.try-chat-starter { min-height: 44px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.try-chat-starter:hover { border-color: var(--gold); background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .try-chat-empty-art { filter: saturate(.9); opacity: 1; }
.try-chat-log .msg, .try-chat-msg { border-radius: 14px; padding: 10px 14px; background: var(--surface); margin: 10px 0; max-width: 90%; overflow-wrap: anywhere; white-space: pre-wrap; }
.try-chat-log .user, .try-chat-log [data-role="user"] { margin-left: auto; background: var(--accent-soft); }
.try-chat-quota { color: var(--text-secondary); font-size: 11px; margin: 10px 3px; }
.try-chat-bubble { width: fit-content; max-width: 88%; padding: 12px 2px; margin-bottom: 22px; border: 0; border-radius: 0; background: transparent; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px; line-height: 1.95; }
.try-chat-bubble::before { content: attr(data-speaker); display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }
.try-chat-bubble.me { margin-left: auto; padding: 15px 20px; background: var(--accent-soft); border-radius: 18px 18px 4px 18px; }
.try-chat-bubble.is-error { padding: 12px 16px; color: var(--danger); border: 1px dashed color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 12px; }
.p2p-off .star-path-chat { display: none; }
.try-chat-compose { flex-wrap: nowrap; margin: 0; }
.try-chat-compose input { min-width: 0; }
.try-chat-modal > .try-chat-actions { flex-shrink: 0; gap: 8px; margin-top: 9px; }
.try-chat-actions .btn { min-height: 44px; padding: 8px 11px; border-color: transparent; background: transparent; color: var(--text-secondary); font-size: 12px; }
.try-chat-actions .btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.try-chat-actions .btn svg, .try-chat-actions .btn i { width: 15px; height: 15px; }
.try-chat-session-note { flex: 1; margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.8; }
.try-chat-compose { flex-shrink: 0; gap: 8px; padding: 7px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-2); }
.try-chat-compose:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 9%, transparent); }
.try-chat-compose input { flex: 1; padding: 12px 10px; border-radius: 12px; background: transparent; border-color: transparent; }
.try-chat-compose input:focus-visible { outline: none; }
.try-chat-compose .btn { min-width: 76px; min-height: 46px; border-radius: 11px; }
.mem-group h4 { font-size: 13px; }
.mem-list { list-style: none; padding: 0; }
.mem-item { display: flex; gap: 10px; align-items: start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mem-text { flex: 1; overflow-wrap: anywhere; }
.mem-del { min-height: 44px; }
.toast { position: fixed; z-index: 160; top: 90px; left: 50%; transform: translate(-50%, -10px); max-width: min(480px, calc(100% - 32px)); padding: 13px 22px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.offline-banner { display: none; position: sticky; top: 0; z-index: 60; padding: 12px; background: #f0dfbd; color: #6d4a19; text-align: center; font-size: 12px; }
.offline-banner.show { display: block; }
.load-bar { position: fixed; z-index: 170; inset: 0 0 auto; height: 2px; pointer-events: none; }
.load-bar.on::after { content: ""; display: block; width: 35%; height: 100%; background: var(--gold); animation: load-shift 1s ease-in-out infinite; }
@keyframes load-shift { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
.fab-refresh { position: fixed; right: 26px; bottom: 31px; z-index: 40; display: grid; place-items: center; width: 48px; min-height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
body[data-current-pane="home"] .fab-refresh, body:not([data-auth="authenticated"]) .fab-refresh { display: none; }
#bootSplash { position: fixed; inset: 0; z-index: 180; display: grid; place-content: center; justify-items: center; gap: 15px; background: var(--bg); color: var(--text-secondary); }
#bootSplash .brand-mark { color: var(--gold); }
#bootSplash p { font-size: 12px; letter-spacing: 2px; }
#loginGate { max-width: 1150px; margin: 0 auto; padding: 50px 36px 16px; align-items: flex-start; justify-content: center; gap: clamp(36px, 6vw, 90px); position: relative; z-index: 3; }
/* 登录页：整页马赛克星空背景（第二张马赛克图：金框/土星/罗盘/银河/地球，2026-09-10 用户提供）+ 明暗罩（设计交付 · 备注 3）。背景比首页更轻，让马赛克充分透出。 */
#loginGate::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/sky/star-mosaic-earth.webp") center / cover no-repeat; }
#loginGate::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(16, 28, 63, .78) 0%, rgba(16, 28, 63, .56) 25%, rgba(16, 28, 63, .50) 50%, rgba(16, 28, 63, .60) 75%, rgba(16, 28, 63, .78) 100%); }
#loginGate .hero { flex: 0 1 448px; min-width: 0; width: min(448px, 100%); border: 1px solid rgba(232, 199, 106, .35); background: rgba(26, 42, 92, .72); padding: 36px; border-radius: 24px; box-shadow: 0 24px 60px -28px #050b1ecc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* 登录页：顶部栏与登录容器自身无填充，让整页马赛克充分透出（设计交付 · 备注 3）。 */
body:not([data-auth="authenticated"]) .nav { background: transparent; border-bottom-color: transparent; }
#loginGate .brand-mark { margin-bottom: 16px; }
#loginGate h1 { margin: 0 0 12px; font-family: var(--font-display); font-size: 31px; font-weight: 400; letter-spacing: 2px; }
.sky-login-story { flex: 1 1 410px; min-width: 0; max-width: 460px; padding-top: 12px; }
.sky-login-story h2 { font-family: var(--font-display); font-size: clamp(34px, 3.3vw, 46px); font-weight: 400; line-height: 1.5; letter-spacing: 1px; margin: 0 0 22px; }
.sky-login-story > p:not(.sky-eyebrow) { color: var(--text-secondary); font-size: 14px; line-height: 2; margin: 0; }
.sky-login-story img { display: block; width: 100%; height: auto; max-width: 430px; margin-top: 28px; border: 1px solid var(--border); border-radius: 120px 120px 18px 18px; }
.sky-login-story > p.sky-login-note { margin-top: 14px; font-size: 10px; line-height: 1.9; }
.hero-sub { color: var(--text-secondary); font-size: 13px; line-height: 1.85; margin-bottom: 22px; }
.auth-tabs { display: flex; gap: 5px; background: var(--surface-2); padding: 5px; border-radius: 11px; margin: 20px 0; }
.auth-tabs button { flex: 1; min-height: 44px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; }
.auth-tabs button.active { color: var(--accent); background: var(--surface); box-shadow: 0 2px 5px #315f4b0a; }
.auth-form { display: flex; flex-direction: column; gap: 17px; }
.auth-field { position: relative; }
.auth-field > .field-icon { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; color: var(--text-secondary); pointer-events: none; }
.auth-field input:not([type="checkbox"]):not([type="radio"]) { padding-left: 41px; }
.auth-field.has-toggle input:not([type="checkbox"]):not([type="radio"]) { padding-right: 48px; }
.auth-pw-toggle { position: absolute; top: 1px; right: 3px; border-radius: 8px; }
.auth-error { padding: 12px; color: var(--danger); font-size: 12px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.auth-hint, .auth-footer-note { font-size: 11px; color: var(--text-secondary); margin: 0; }
.auth-divider { text-align: center; font-size: 11px; color: var(--text-secondary); margin: 20px 0 12px; }
.auth-footer-note { text-align: center; margin: 17px 0 0; }
.invite-banner { display: none; padding: 14px; gap: 12px; background: var(--accent-soft); border-radius: 11px; margin: 15px 0; }
.invite-banner.show { display: flex; }
.invite-banner-title { margin: 0 0 4px; font-size: 13px; }
.invite-banner-meta { margin: 0; color: var(--text-secondary); font-size: 11px; }
.sky-dialog { border: 1px solid var(--border); border-radius: 24px; width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 26px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.sky-dialog::backdrop { background: #18333d73; backdrop-filter: blur(5px); }
.sky-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sky-dialog h2 { font-size: 20px; font-weight: 500; margin: 0; }
.sky-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; border-bottom: 1px solid var(--border); padding: 14px 0; cursor: pointer; }
.sky-setting strong { display: block; font-size: 13px; font-weight: 500; }
.sky-setting small { display: block; color: var(--text-secondary); font-size: 11px; margin-top: 3px; }
.sky-setting input { width: 20px; height: 20px; }
.sky-settings-note { font-size: 11px; color: var(--text-secondary); margin: 18px 0; }
.sky-settings-links { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.sky-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sky-more-grid button, .sky-more-grid a { min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; color: var(--text); font-size: 12px; text-decoration: none; }
.sky-more-grid a[data-admin-only] { grid-column: 1 / -1; flex-direction: row; min-height: 56px; color: var(--accent); }
@media (min-width: 1500px) { .wrap { padding-top: 43px; } .sky-welcome { padding-top: 24px; padding-bottom: 24px; } }
@media (max-width: 1100px) { .nav-center { display: none; } .nav { padding: 16px 26px; } .wrap { padding: 30px 28px 0; } .sky-home.active { gap: 36px; } .sky-title { font-size: 48px; letter-spacing: 2px; } .sky-welcome { gap: 38px; padding-top: 12px; } .sky-journey { padding-top: 25px; } .sky-journey-body { gap: 30px; } .sky-journey-aside { padding-left: 24px; } .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sky-dock button { width: 75px; } .fab-refresh { bottom: 116px; right: 16px; } }
@media (max-width: 780px) {
  :root { --nav-h: 68px; }
  body { padding-bottom: calc(101px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .nav { height: 68px; padding: 10px 18px; gap: 8px; }
  .brand { gap: 6px; }
  .brand-mark { width: 29px; }
  .brand-mark i { width: 28px; height: 28px; }
  .brand-mark > svg { width: 27px; height: 35px; }
  .brand-name { font-size: 19px; letter-spacing: 1.7px; }
  .nav-actions { gap: 1px; }
  .nav-actions .desktop-utility, .avatar-chip { display: none; }
  #userBar { gap: 0 !important; flex-wrap: nowrap !important; }
  .wrap { padding: 24px 22px 0; }
  .sky-home.active { gap: 32px; }
  .sky-welcome { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); padding: 6px 0 16px; gap: 28px; }
  .sky-eyebrow { font-size: 11px; margin-bottom: 18px; letter-spacing: 1px; }
  .sky-title { font-size: 40px; line-height: 1.38; letter-spacing: 1px; margin-bottom: 20px; }
  .sky-intro { font-size: 13px; line-height: 1.9; margin-bottom: 22px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { min-height: 48px; font-size: 13px; padding: 11px 19px; }
  .hero-actions .btn-ghost { padding-left: 3px; padding-right: 3px; font-size: 12px; }
  .sky-companion-note { font-size: 11px; margin-top: 16px; max-width: none; }
  .sky-encounter { padding: 6px 6px 0; border-radius: 120px 120px 18px 18px; }
  .sky-encounter img { border-radius: 114px 114px 12px 12px; }
  .sky-encounter figcaption { min-height: 57px; padding: 11px 4px; gap: 7px; }
  .sky-encounter figcaption strong { font-size: 11px; letter-spacing: .5px; }
  .sky-encounter figcaption small { display: none; }
  .sky-encounter figcaption i { width: 17px; height: 17px; }
  .sky-stats { margin-top: 16px; }
  .sky-stat { min-width: 0; padding: 0 11px; }
  .sky-stat strong { font-size: 22px; }
  .sky-stat span { font-size: 11px; }
  .sky-data-status { font-size: 11px; margin-top: 8px; }
  .sky-journey { padding: 22px 0 0; }
  .sky-star-mosaic { margin-top: 20px; padding: 6px 6px 0; border-radius: 16px; }
  .sky-star-mosaic img { aspect-ratio: 2.6; border-radius: 10px; }
  .sky-journey-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 23px; margin-top: 23px; }
  .sky-journey-aside { padding: 4px 0 0 20px; }
  .sky-map-heading { padding: 0; }
  .sky-map-heading h2 { font-size: 18px; }
  .sky-map-description { font-size: 11px; max-width: 250px; }
  .sky-map-heading-actions { gap: 5px; }
  .sky-map-heading-actions > span { display: none; }
  .sky-map-open { padding: 5px 8px; font-size: 11px; }
  /* 后代选择器 .sky-map-heading span（0,1,1）会连按钮里的「展开星图」一起命中，故在此按同级覆盖到 11px */
  .sky-map-heading span { font-size: 11px; }
  .sky-constellation { height: 258px; margin-top: 8px; }
  .sky-star { font-size: 11px; min-width: 76px; min-height: 70px; gap: 5px; }
  .sky-star-orb { width: 38px; height: 38px; }
  .sky-star-orb i { width: 18px; height: 18px; }
  .sky-star.featured .sky-star-orb { width: 48px; height: 48px; }
  .sky-star.featured .sky-star-orb i { width: 24px; height: 24px; }
  .sky-star-label { padding: 2px 4px; }
  .sky-map-note { margin: 15px 0 0; font-size: 11px; }
  .sky-play { gap: 12px; margin-top: 23px; padding: 0; }
  .sky-rest-note { display: none; }
  .sky-call { padding: 9px 3px; font-size: 11px; }
  .sky-call-orb { width: 57px; height: 57px; }
  /* 小屏可读下限：页脚/装饰小字不再低于 10px（拉丁装饰 9px 见 guides.css） */
  .sky-aside-title span { font-size: 10px; }
  .sky-footer { padding: 0; font-size: 11px; letter-spacing: 1px; margin-top: 25px; }
  .sky-footer > span { gap: 5px; }
  .sky-chart-shell { padding-top: calc(var(--nav-h) + 12px); padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .sky-chart-head { gap: 12px; padding: 0 18px; }
  .sky-chart-kicker { margin-bottom: 5px; font-size: 9px; letter-spacing: 2px; }
  .sky-chart-head h2 { font-size: 30px; letter-spacing: 6px; }
  .sky-chart-head p:last-child { max-width: 205px; margin-top: 6px; font-size: 11px; line-height: 1.6; }
  .sky-chart-head-actions { gap: 7px; }
  .sky-chart-page { min-width: 43px; font-size: 11px; }
  .sky-chart-page-panel { padding: 8px 16px 12px; }
  .sky-chart-group-heading h3 { font-size: 21px; letter-spacing: 5px; }
  .sky-chart-group-heading h3::before, .sky-chart-group-heading h3::after { margin-right: 12px; margin-left: 8px; }
  .sky-chart-group-heading p { margin-top: 5px; font-size: 10px; letter-spacing: 1px; }
  .sky-chart-constellation { max-width: 620px; max-height: 470px; }
  .sky-chart-halo { width: 74%; height: 78%; }
  .sky-chart-node { --chart-orb-size: 48px; }
  .sky-chart-node-orb i, .sky-chart-node-orb svg { width: 22px; height: 22px; }
  .sky-chart-node.featured { --chart-orb-size: 64px; }
  .sky-chart-node.featured .sky-chart-node-orb i, .sky-chart-node.featured .sky-chart-node-orb svg { width: 28px; height: 28px; }
  .sky-chart-node-label { top: calc(100% + 9px); padding: 3px 7px; font-size: 11px; letter-spacing: 1px; }
  .sky-chart-footer { gap: 7px; padding: 6px 16px 0; }
  .sky-chart-controls { gap: 8px; }
  .sky-chart-controls .icon-btn { width: 44px; min-height: 44px; }
  .sky-chart-groups { gap: 0; }
  .sky-chart-group-button { min-width: 60px; padding-right: 10px; padding-left: 10px; font-size: 11px; }
  .sky-chart-hint { font-size: 9px; letter-spacing: 1px; }
  .sky-dock { width: calc(100% - 24px); max-width: 520px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 5px; gap: 0; border-radius: 18px; }
  .sky-dock button { flex: 1; width: auto; min-width: 0; min-height: 57px; font-size: 11px; border-radius: 12px; gap: 5px; }
  .sky-dock .desktop-dock { display: none; }
  .sky-dock .mobile-more { display: flex; }
  .sky-landscape { object-position: 64% bottom; width: 180%; max-width: none; left: -65%; }
  .sky-sun { width: 600px; height: 600px; top: -260px; right: -280px; }
  .sky-scene { background: linear-gradient(160deg, #edf2e7, #dce9e3 43%, #bcd4d0 75%, #e1e5cf); }
  .work-heading { margin: 0 auto 20px; gap: 12px; }
  .work-heading h1 { font-size: 26px; }
  .work-heading p { font-size: 12px; }
  .card { padding: 20px 17px; border-radius: 18px; margin-bottom: 16px; }
  .card-head { margin-bottom: 19px; }
  .card-head h2 { font-size: 19px; }
  .card-desc { font-size: 13px; }
  .toolbar { gap: 9px; }
  .toolbar > select { flex: 1 1 160px; }
  .toolbar > input { flex-basis: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .form-fields { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-actions { justify-content: flex-end; }
  #botsCards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .table-desktop { display: none; }
  .mobile-cards { display: grid; gap: 12px; }
  .mcard { padding: 17px 14px; }
  .m-title { font-size: 16px; }
  .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .persona-card { padding: 17px; }
  .persona-card .row-actions .btn { flex-grow: 1; }
  .modal-backdrop, .confirm-backdrop { padding: 16px; }
  .modal, .confirm-card { padding: 22px 18px; max-height: calc(100dvh - 32px); border-radius: 20px; }
  .modal h3, .confirm-card h3 { font-size: 20px; }
  .pro-grid { gap: 12px; }
  .try-chat-compose { flex-wrap: nowrap; }
  .try-chat-compose input { flex-basis: auto; }
  .try-chat-modal { height: calc(100dvh - 32px); padding: 22px 19px 12px; }
  .try-chat-head { gap: 12px; margin-bottom: 0; padding-bottom: 18px; }
  .try-chat-head h3 { font-size: 23px; }
  .try-chat-head .desc { font-size: 10px; }
  .try-chat-avatar { flex-basis: 48px; width: 48px; height: 59px; }
  .try-chat-avatar svg { width: 43px; height: 49px; }
  .try-chat-place { font-size: 9px; letter-spacing: 1px; }
  .try-chat-log { min-height: 90px; height: auto; padding: 20px 1px 8px; }
  .try-chat-empty-art { width: min(178px, 80%); }
  .try-chat-empty-kicker { font-size: 22px; margin-top: 18px; }
  .try-chat-starters { gap: 6px; margin-top: 14px; }
  .try-chat-starter { padding: 9px 10px; }
  .try-chat-session-note { flex-basis: 100%; }
  .try-chat-modal > .try-chat-actions { gap: 3px 6px; margin-top: 8px; }
  .try-chat-actions .btn { flex: 1; }
  .try-chat-bubble { max-width: 94%; padding: 9px 2px; font-size: 14px; }
  .try-chat-bubble.me { padding: 12px 15px; }
  .fab-refresh { right: 16px; bottom: calc(91px + env(safe-area-inset-bottom, 0px)); width: 44px; min-height: 44px; }
  #loginGate { padding: 24px 18px; }
  .sky-login-story { display: none; }
  #loginGate .hero { padding: 28px 24px; }
  #loginGate h1 { font-size: 29px; }
  .toast { top: 78px; font-size: 12px; }
}
@media (max-width: 560px) {
  .sky-admin-bar { gap: 8px; margin-bottom: 23px; padding: 8px 10px; }
  .sky-admin-label { gap: 5px; font-size: 11px; }
  .sky-admin-label i { width: 14px; height: 14px; }
  .sky-admin-actions { gap: 4px; }
  .sky-admin-actions .btn { min-height: 44px; padding: 8px 10px; gap: 5px; font-size: 11px; }
  .sky-admin-actions .btn i { width: 14px; height: 14px; }
  .sky-home.active { gap: 29px; }
  .sky-welcome { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 0 18px; padding-top: 2px; padding-bottom: 5px; }
  .sky-welcome-copy { display: contents; }
  .sky-welcome .sky-eyebrow { grid-column: 1 / -1; margin: 0 0 18px; }
  .sky-title { grid-column: 1; grid-row: 2; align-self: center; max-width: none; margin: 0; font-size: 36px; line-height: 1.4; letter-spacing: .6px; }
  .sky-intro { grid-column: 1 / -1; font-size: 13px; line-height: 1.9; margin: 18px 0 22px; }
  .sky-welcome .hero-actions, .sky-welcome .sky-companion-note { grid-column: 1 / -1; }
  .sky-encounter { grid-column: 2; grid-row: 2; align-self: center; width: 108px; height: 122px; padding: 4px; border-radius: 58px 58px 17px 17px; }
  .sky-encounter img { height: 100%; aspect-ratio: auto; object-position: center bottom; border-radius: 54px 54px 12px 12px; }
  .sky-encounter figcaption { display: none; }
  .sky-map-heading-actions { flex-shrink: 0; }
  .sky-star-mosaic img { aspect-ratio: 1672 / 941; object-position: center; }
  .sky-star-mosaic figcaption { min-height: 41px; padding: 10px 6px; font-size: 12px; letter-spacing: 1px; }
  .sky-journey-body { display: block; }
  .sky-journey-aside { border-left: 0; border-top: 1px solid var(--border); margin-top: 26px; padding: 22px 0 0; }
  .sky-constellation { height: 252px; }
  .sky-stats { max-width: 380px; }
  .sky-stat { padding: 0 18px; }
  .sky-stat span { font-size: 11px; }
  .sky-play { max-width: 360px; margin-top: 15px; }
}
@media (max-width: 520px) { .persona-grid { grid-template-columns: minmax(0, 1fr); } .persona-card { padding: 20px; } .persona-glyph { margin-bottom: 14px; } .persona-card .row-actions .btn { flex-grow: 0; } .persona-card .desc { font-size: 13px; } .sky-rest-note { display: none; } }
@media (max-width: 374px) { .wrap { padding-left: 16px; padding-right: 16px; } .nav { padding-left: 14px; padding-right: 12px; } .sky-title { font-size: 32px; letter-spacing: .5px; } .hero-actions { gap: 7px; } .hero-actions .btn { padding-left: 15px; padding-right: 15px; } .hero-actions .btn-ghost { padding-left: 0; padding-right: 0; } .sky-stat { min-width: 0; padding: 0 15px; } }
@media (max-height: 650px) {
  .try-chat-head { padding-bottom: 13px; }
  .try-chat-empty { min-height: 0; padding: 0 0 8px; }
  .try-chat-empty-art { display: none; }
  .try-chat-empty-kicker { margin-top: 2px; font-size: 20px; }
  .try-chat-starters { margin-top: 12px; }
  .sky-chart-shell { padding-top: calc(var(--nav-h) + 8px); }
  .sky-chart-kicker { display: none; }
  .sky-chart-head h2 { font-size: 27px; }
  .sky-chart-head p:last-child { margin-top: 4px; font-size: 10px; }
  .sky-chart-page-panel { padding-top: 4px; padding-bottom: 8px; }
  .sky-chart-group-heading h3 { font-size: 18px; }
  .sky-chart-group-heading p { margin-top: 4px; font-size: 10px; }
  .sky-chart-node { --chart-orb-size: 44px; }
  .sky-chart-node.featured { --chart-orb-size: 56px; }
  .sky-chart-node-label { top: calc(100% + 7px); padding: 2px 7px; font-size: 10px; }
  .sky-chart-footer { gap: 4px; padding-top: 4px; }
}
@media (max-height: 520px) {
  .sky-chart-shell { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
  .sky-chart-head h2 { font-size: 26px; }
  .sky-chart-head p:last-child, .sky-chart-group-heading, .sky-chart-hint { display: none; }
  .sky-chart-page-panel { grid-template-rows: minmax(0, 1fr); padding-top: 0; padding-bottom: 0; }
  .sky-chart-constellation { max-width: 700px; }
  .sky-chart-node.featured { --chart-orb-size: 52px; }
  .sky-chart-node-label { top: calc(100% + 2px); padding: 1px 6px; line-height: 1.4; }
}
@media (max-height: 520px) and (max-width: 780px) { .sky-chart-shell { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } }
html[data-reduced-motion="true"] { scroll-behavior: auto; }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
html[data-reduced-motion="true"] .sky-particles { display: none; }
html[data-reduced-motion="true"] .sky-star:hover .sky-star-orb { transform: none; }
html[data-reduced-motion="true"] .sky-chart-node:hover .sky-chart-node-orb, html[data-reduced-motion="true"] .sky-chart-node:focus-visible .sky-chart-node-orb { transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } .sky-particles { display: none; } .sky-star:hover .sky-star-orb { transform: none; } }
@media (prefers-contrast: more) { :root { --text-secondary: #365450; --border: #658478; --panel: #fbfcf6; } html[data-theme="dark"] { --text-secondary: #d1e6db; --border: #a2c0b4; --panel: #233b43; } }
@media (forced-colors: active) {
  .sky-scene, .sky-particles, .sky-chart-halo { display: none; }
  .try-chat-compose input:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  .sky-dock button.active, .sky-chart-group-button[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .sky-chart-node.is-selected .sky-chart-node-orb { outline: 2px solid Highlight; outline-offset: 3px; }
}