/* 2026-10 visual refresh: the glowing planet becomes the page background; panels become glass over it. */
:root {
 --xyk-bg:#05080f;
 --xyk-glass:rgba(11,18,30,.64);
 --xyk-glass-strong:rgba(15,25,40,.86);
 --xyk-line:rgba(142,203,234,.14);
 --xyk-line-hot:rgba(126,218,246,.45);
 --xyk-accent:#7fdcf6;
 --xyk-accent-2:#b6a8ff;
 --xyk-text:#e8f1f7;
 --xyk-muted:#9fb3c5;
 --xyk-dim:#6f879d;
}
html { background:var(--xyk-bg); }
body { background:var(--xyk-bg); color:var(--xyk-text); }
.app-shell { z-index:1; }

/* ---------- Background: sky, stars, planet ---------- */
.sky-backdrop { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
 background:
  radial-gradient(ellipse 55% 50% at 88% 78%,#0c1a2b 0%,transparent 70%),
  radial-gradient(ellipse 50% 40% at 5% 100%,#0e1029 0%,transparent 70%),
  linear-gradient(180deg,#070b14 0%,#05080f 50%,#030509 100%); }
.sky-backdrop-stars,.sky-backdrop-stars::after { position:absolute; inset:-10%; }
.sky-backdrop-stars {
 background-image:
  radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),
  radial-gradient(1px 1px at 140px 90px,#cfefff,transparent),
  radial-gradient(1.4px 1.4px at 90px 170px,#fff,transparent),
  radial-gradient(1px 1px at 200px 210px,#bfe4ff,transparent),
  radial-gradient(1px 1px at 60px 250px,#fff,transparent);
 background-size:240px 280px; opacity:.55; }
.sky-backdrop-stars::after { content:"";
 background-image:
  radial-gradient(1.8px 1.8px at 50px 80px,#e9f8ff,transparent),
  radial-gradient(1.2px 1.2px at 310px 40px,#fff,transparent),
  radial-gradient(2px 2px at 420px 330px,#d8ecff,transparent),
  radial-gradient(1.3px 1.3px at 180px 400px,#fff,transparent);
 background-size:520px 460px; opacity:.8; animation:xyk-twinkle 7s ease-in-out infinite alternate; }
@keyframes xyk-twinkle { from { opacity:.35; } to { opacity:.9; } }
/* A planet seen from its night side: dark body, a thin crescent of light along the upper-left rim. */
.sky-backdrop-planet { --size:min(125vh,82vw); position:absolute; width:var(--size); aspect-ratio:1; right:calc(var(--size) * -.36); top:30vh; border-radius:50%;
 background:radial-gradient(circle at 28% 20%,#18324a 0%,#0d1c2e 28%,#070e19 58%,#04070d 100%);
 box-shadow:inset 10px 9px 22px -6px rgba(178,230,248,.6),inset 36px 30px 90px -24px rgba(96,176,220,.28),-14px -12px 60px -16px rgba(120,205,240,.32),0 0 180px rgba(36,100,160,.10); }
.sky-backdrop-planet::after { content:""; position:absolute; inset:-1px; border-radius:50%; background:radial-gradient(circle at 22% 14%,rgba(200,240,255,.16),transparent 38%); }
.sky-backdrop-orbit { position:absolute; border:1px solid #8ecbea17; border-radius:50%; width:min(170vh,115vw); height:min(46vh,30vw); right:-30vw; top:calc(30vh + min(44vh,28vw)); transform:rotate(-14deg); }
/* Darken the reading area so text stays crisp over the planet. */
.sky-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#05080f99 0%,transparent 55%); }

/* The planet used to live in the right-hand card; it is now the backdrop above. */
.slogan-atmosphere { display:none; }
.right-rail::before { display:none; }
.slogan-card h2,.slogan-card p { text-shadow:0 2px 18px #050a14,0 0 2px #050a14; }
.slogan-card h2 { color:#f2f8fc; }
.slogan-card h2 em { color:#ffffff; text-shadow:0 0 18px #2f8fc0,0 2px 14px #050a14; }
.slogan-card p { color:#e3eef5; }
.card-top { color:#b9d0de; }

/* ---------- Sidebar ---------- */
.sidebar { background:linear-gradient(180deg,rgba(7,11,20,.82),rgba(5,8,15,.66)); border-right:1px solid var(--xyk-line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.brand { font-size:22px; }
.brand span { color:var(--xyk-accent); text-shadow:0 0 14px #7fdcf6aa; }
.brand-sub { font-size:10px; color:var(--xyk-dim); }
.menu-kicker,.eyebrow { font-size:11px; letter-spacing:.2em; color:var(--xyk-accent); }
.category-link,.text-link { font-size:14px; color:var(--xyk-muted); padding:9px 10px; border-radius:9px; transition:background .2s,color .2s; }
.category-link small,.text-link small { font-size:10px; color:#5f7790; }
.category-link:hover,.text-link:hover { color:#f0f8fc; background:rgba(127,220,246,.08); }
.category-link.active,.text-link.active { color:#f3fbff; background:linear-gradient(90deg,rgba(127,220,246,.18),rgba(182,168,255,.06)); }
.category-link.active:before { background:var(--xyk-accent); box-shadow:0 0 10px var(--xyk-accent); }
.utility-link { font-size:14px; color:var(--xyk-muted); }
.utility-link:hover { color:#f0f8fc; }
.utility-link span { border-color:#3c5671; background:rgba(127,220,246,.06); }

/* ---------- Main column ---------- */
.content { background:transparent; }
.topline { font-size:10px; color:#6d849b; }
.intro h1 { text-shadow:0 4px 40px #050a14; }
.intro h1 em { background:linear-gradient(90deg,var(--xyk-accent) 10%,#cfc6ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px #7fdcf650); }
.panel-head h2,.group-title,.category-heading { color:#eef6fb; }
.panel-date { font-size:11px; color:var(--xyk-dim); }
.category-heading { display:flex; align-items:center; gap:12px; }
.category-heading::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--xyk-line),transparent); }

.content-panel,.empty-panel,.map-result,.monthly-scope { background:var(--xyk-glass); border:1px solid var(--xyk-line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:18px; box-shadow:0 18px 50px #03070f55; }
.sky-tile { background:rgba(20,33,50,.6); border:1px solid var(--xyk-line); transition:border-color .2s,background .2s,transform .2s; }
.sky-tile:hover { background:rgba(28,46,68,.75); border-color:var(--xyk-line-hot); transform:translateY(-2px); }
.sky-button { background:rgba(43,70,96,.8); border:1px solid var(--xyk-line); }
.sky-button:hover { background:rgba(56,92,122,.9); border-color:var(--xyk-line-hot); }

/* Article cards */
.post { background:var(--xyk-glass); border:1px solid var(--xyk-line); border-radius:18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 14px 40px #03070f4d; transition:transform .25s,border-color .25s,box-shadow .25s,background .25s; }
.post:hover,.post:focus-visible { background:var(--xyk-glass-strong); border-color:var(--xyk-line-hot); transform:translateY(-3px); box-shadow:0 20px 50px #03070f80,0 0 0 1px #7fdcf61f; outline:none; }
.post-date { color:#a9c3d6; }
.post-date small { font-size:10px; color:var(--xyk-dim); }
.post-meta { font-size:11px; color:var(--xyk-dim); }
.post-tag { color:var(--xyk-accent); background:rgba(127,220,246,.1); padding:3px 8px; border-radius:20px; }
.post h3 { color:#f1f7fb; }
.post p { font-size:14px; color:var(--xyk-muted); }
.post a { font-size:13px; color:var(--xyk-accent); }
.thumb { background:radial-gradient(circle at 70% 30%,#22405e,#111f31 60%,#0a131f); }
.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#0a111d99); pointer-events:none; }
.thumb img { opacity:.92; transition:transform .5s ease; }
.post:hover .thumb img { transform:scale(1.04); }
.thumb span { z-index:1; font-size:10px; padding:4px 10px; border-radius:20px; background:rgba(8,14,24,.6); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); text-shadow:none; }

/* Wide screens: lead story stays big, the rest sit side by side with their picture. */
@media (min-width:1180px) {
 .post:not(#posts>.post:first-child) { display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); grid-template-rows:auto 1fr; padding:0; }
 .post:not(#posts>.post:first-child)>.thumb { grid-column:1; grid-row:1/3; height:auto; min-height:200px; }
 .post:not(#posts>.post:first-child)>.post-date { grid-column:2; grid-row:1; padding-top:20px; }
 .post:not(#posts>.post:first-child)>div:nth-child(2) { grid-column:2; grid-row:2; padding-bottom:22px; }
 #posts>.post:first-child .thumb { height:300px; }
}

/* Empty categories and columns still being prepared get a clear label instead of a blank box. */
.category-update-board:empty { display:grid; place-items:center; min-height:120px; background:rgba(17,29,46,.35); border:1px dashed var(--xyk-line); border-radius:16px; }
.category-update-board:empty::before { content:"这个栏目还没有文章，敬请期待"; color:var(--xyk-dim); font-size:14px; }
.pending-section { min-height:0; }
.pending-section h2 { margin-bottom:16px; }
.pending-section:not(:has(> :not(h2)))::after { content:"栏目正在准备中，敬请期待"; display:grid; place-items:center; min-height:120px; color:var(--xyk-dim); font-size:14px; background:rgba(17,29,46,.35); border:1px dashed var(--xyk-line); border-radius:16px; }

/* ---------- Right rail card ---------- */
.rail-info { background:linear-gradient(135deg,rgba(20,34,50,.86),rgba(9,15,25,.9)); border-color:var(--xyk-line); box-shadow:0 18px 50px #03070f66; }
.rail-score strong { background:linear-gradient(180deg,#bff0ff,var(--xyk-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Reader */
.reader-sheet { background:linear-gradient(180deg,#0e1828,#090f1a); border-left:1px solid var(--xyk-line); }

/* Thin scrollbars */
* { scrollbar-color:#2c4560 transparent; }

/* ---------- Narrow screens ---------- */
@media (max-width:800px) {
 .sky-backdrop-planet { --size:150vw; right:-75vw; top:26vh; box-shadow:inset 6px 5px 14px -4px rgba(178,230,248,.5),inset 16px 14px 40px -14px rgba(96,176,220,.16),-10px -8px 40px -12px rgba(120,205,240,.26); }
 .sky-backdrop-planet::after { opacity:.5; }
 .sky-backdrop-orbit { width:220vw; height:60vw; right:-110vw; top:calc(26vh + 50vw); }
 .sky-backdrop::after { background:none; }
 .topline { font-size:9px; letter-spacing:.16em; gap:12px; }
 .topline span { white-space:nowrap; }
 .slogan-card { display:none; }
 .sidebar { background:rgba(6,10,18,.8); border-right:0; border-bottom:1px solid var(--xyk-line); }
 .category-link,.text-link { background:rgba(127,220,246,.06); border:1px solid var(--xyk-line); font-size:13px; }
 .post:hover,.post:focus-visible { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
 .sky-backdrop-stars::after { animation:none; }
 .post,.sky-tile,.thumb img { transition:none; }
 .post:hover,.sky-tile:hover { transform:none; }
 .post:hover .thumb img { transform:none; }
}

/* Chinese-only labels: the decorative English lines were removed. */
.topline { display:none; }
.intro { padding-top:56px; }
.category-link[href="#updates"] small { display:none; }
.brand { display:block; margin-bottom:30px; }
.category-link[href="#updates"] { justify-content:flex-start; gap:9px; }
@media (min-width:801px) { .intro { padding-top:90px; } }
@media (max-width:800px) { .brand { margin-bottom:16px; } }


#sky-meteor-hint { white-space:pre-line; }

/* Live meteor flux plots (Global Meteor Network) in the meteor detail dialog. */
.sky-meteor-live h3 { margin:22px 0 8px; font-size:1rem; font-weight:500; }
.sky-meteor-live figure { margin:12px 0 18px; }
.sky-meteor-live img { display:block; width:100%; height:auto; border-radius:10px; background:#fff; }
.sky-meteor-live figcaption { margin-top:6px; color:var(--xyk-muted); font-size:.75rem; }
#sky-weather-hint { white-space:normal; }

/* Homepage tonight-index card (home-index.js): same look as the bottom-right card, larger, no mascot. */
.home-first { min-height:100dvh; display:flex; flex-direction:column; padding-bottom:28px; }
.home-first .intro { padding-bottom:36px; }
.rail-info.home-index { max-height:none; overflow:visible; padding:28px 32px; border-radius:22px; }
.home-index .rail-info-top { margin-bottom:26px; }
.home-index .rail-info-top h2 { font-size:1.25rem; }
.home-index .rail-reference { font-size:.875rem; }
.home-index .rail-summary-row { grid-template-columns:minmax(0,1fr) auto; gap:24px; }
.home-index .rail-moon { gap:22px; }
.home-index .rail-moon canvas { flex-basis:120px; width:120px; height:120px; }
.home-index .rail-moon strong { font-size:1.75rem; font-family:Georgia,"Noto Serif SC",serif; }
.home-index .rail-moon small,.home-index .rail-score small { font-size:1rem; }
.home-index .rail-score strong { font-size:96px; }
.home-index .rail-score-window { margin:26px 0 14px; font-size:1rem; }
.home-index .rail-info-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font-size:.95rem; }
.home-index .rail-info-bottom { margin-top:16px; font-size:.875rem; }
.home-index .rail-method-copy { font-size:.875rem; }
.home-scroll-hint { margin:auto 0 0; padding-top:28px; text-align:center; color:var(--xyk-dim); font-size:13px; letter-spacing:.1em; }
@media (max-width:800px) {
 .rail-info.home-index { padding:20px 18px; }
 .home-index .rail-moon canvas { flex-basis:72px; width:72px; height:72px; }
 .home-index .rail-moon strong { font-size:1.3rem; }
 .home-index .rail-score strong { font-size:60px; }
}

/* Detail dialogs and their inner cards: dark glass to match the page instead of the old teal blocks. */
.sky-dialog { background:linear-gradient(150deg,rgba(18,31,48,.97),rgba(7,12,21,.98)); border:1px solid rgba(142,203,234,.18); border-radius:20px; box-shadow:0 30px 90px #000b,0 0 60px #3d8fbf1a; }
.sky-dialog::backdrop { background:rgba(3,5,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sky-detail-dialog .sky-dialog-head { background:#0f1a2a; }
.sky-dialog-head button { border-radius:10px; }
.sky-dialog-head button:hover { background:rgba(127,220,246,.12); }
.sky-planet-row,.sky-day,.sky-detail-dialog details.sky-day { background:rgba(255,255,255,.035); border:1px solid var(--xyk-line); }
.sky-moon-calendar button { background:rgba(255,255,255,.04); border-color:rgba(142,203,234,.08); }
.sky-moon-calendar button:hover { background:rgba(127,220,246,.1); }
.sky-moon-calendar button[aria-pressed=true] { background:rgba(127,220,246,.16); border-color:var(--xyk-accent); }
.sky-table th,.sky-table td { border-bottom-color:var(--xyk-line); }
.sky-table .sky-upcoming { background:rgba(127,220,246,.1); }
.sky-search-row input,.map-search input,.monthly-location input,.monthly-location select { background:rgba(4,8,15,.7); border-color:rgba(142,203,234,.22); }
.sky-hour-table .sky-weather-row-label { background:#0f1a2a; }
.sky-hour-table [data-evening=true] { background:rgba(127,220,246,.12); }
.sky-cloud-row>*,.sky-rain-row>* { border-top-color:var(--xyk-line); }
.sky-cloud-row>td { background:rgba(127,220,246,.05); }
.sky-rain-row>td { background:rgba(182,168,255,.05); color:#cfc8ff; }
.sky-cloud-row>td[data-evening=true] { background:rgba(127,220,246,.13); }
.sky-rain-row>td[data-evening=true] { background:rgba(182,168,255,.13); }
.sky-rain-row meter { accent-color:#b6a8ff; }
.sky-rain-row meter::-webkit-meter-optimum-value { background:#b6a8ff; }
.sky-rain-row meter::-moz-meter-bar { background:#b6a8ff; }
.sky-hour-table meter::-webkit-meter-bar { background:rgba(255,255,255,.1); }
.sky-hour-strip { scrollbar-color:#2c4560 transparent; }
.sky-results button,.map-search-results button,#monthly-place-results button { background:rgba(255,255,255,.04); border:1px solid var(--xyk-line); color:var(--xyk-text); }
.map-metrics>.map-metric-primary { background:rgba(127,220,246,.08); border-color:var(--xyk-line); }
.monthly-months button { background:rgba(255,255,255,.04); border:1px solid var(--xyk-line); }
.monthly-months button[aria-pressed=true] { background:rgba(127,220,246,.16); outline:1px solid var(--xyk-accent); }
#monthly-chart { background:transparent; }
.sky-detail-dialog .sky-dialog-head { margin:0 -24px; padding:12px 24px; background:rgba(15,26,42,.96); }
@media (max-width:800px) {
 body.home-card-visible .rail-companion,body.home-card-visible .rail-expand { opacity:0; pointer-events:none; }
 .rail-companion,.rail-expand { transition:opacity .35s ease; }
}

/* Homepage card: tonight's layered cloud, humidity, visibility, wind, transparency and seeing. */
.home-weather { margin:4px 0 20px; padding:16px 0 4px; border-top:1px solid var(--xyk-line); border-bottom:1px solid var(--xyk-line); }
.home-weather-title { margin:0 0 12px; color:var(--xyk-accent); font-size:.875rem; letter-spacing:.06em; }
.home-weather dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 12px; }
.home-weather dl div { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(142,203,234,.1); }
.home-weather dt { color:var(--xyk-muted); font-size:.8rem; }
.home-weather dd { margin:6px 0 0; color:#eef6fb; font:400 1.25rem/1.2 Georgia,"Noto Serif SC",serif; }
@media (max-width:800px) {
 .home-weather dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .home-weather dd { font-size:1.05rem; }
}

/* Wide "tonight's observing conditions" card (7Timer, every 3 hours). */
.live-grid .sky-conditions { grid-column:1/-1; }
.sky-conditions-strip { display:flex; gap:8px; margin:12px 0 10px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px; }
.sky-cond-cell { flex:1 0 92px; display:grid; gap:4px; padding:10px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(142,203,234,.1); text-align:center; }
.sky-cond-cell b { font-weight:400; color:#eef6fb; font-variant-numeric:tabular-nums; }
.sky-cond-cell i { font-style:normal; color:var(--xyk-muted); font-size:.8rem; }
.sky-cond-cell em { font-style:normal; font-size:.78rem; padding:2px 0; border-radius:6px; }
.q-best { color:#9fe8ff; background:rgba(127,220,246,.14); }
.q-good { color:#c9e6f4; background:rgba(127,220,246,.07); }
.q-fair { color:#cfc8ff; background:rgba(182,168,255,.1); }
.q-poor { color:#9aa9b8; background:rgba(255,255,255,.05); }
.sky-cond-table td small { display:block; color:var(--xyk-dim); font-size:.72rem; }
.sky-cond-table td.q-best,.sky-cond-table td.q-good,.sky-cond-table td.q-fair,.sky-cond-table td.q-poor { background:none; }
.sky-detail-dialog h3 { font-size:1rem; font-weight:500; margin:22px 0 6px; }
.sky-detail-dialog:has([data-sky-pane=conditions]:not([hidden])) { width:min(880px,calc(100% - 32px)); }

/* Homepage card: 3-hour strip + averages; weather dialog: expandable layered-cloud section. */
.home-cond-strip { margin:0 0 8px; }
.home-cond-best { margin:0 0 16px; color:#c9dbe7; font-size:.9rem; }
.home-avg { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0 0 14px; }
.home-avg div { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(142,203,234,.1); }
.home-avg dt { color:var(--xyk-muted); font-size:.78rem; }
.home-avg dd { margin:4px 0 0; color:#eef6fb; font:400 1.1rem/1.2 Georgia,"Noto Serif SC",serif; }
.home-more { margin:2px 0 4px; padding:8px 14px; border-radius:10px; border:1px solid var(--xyk-line); background:rgba(127,220,246,.08); color:var(--xyk-accent); font-size:.875rem; cursor:pointer; }
.home-more:hover { background:rgba(127,220,246,.16); }
.home-index .sky-cond-cell { cursor:default; }
.sky-weather-more { margin:12px 0 16px; padding:12px 14px; border-radius:12px; border:1px solid var(--xyk-line); background:rgba(255,255,255,.03); }
.sky-weather-more summary { cursor:pointer; color:var(--xyk-accent); font-size:.95rem; }
.sky-weather-more[open] summary { margin-bottom:10px; }
.sky-weather-more .home-avg { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:800px) { .home-avg { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .home-avg dd { font-size:1rem; } }
.home-weather .home-avg { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
@media (max-width:800px) { .home-weather .home-avg { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } }

/* Homepage: tonight's 3-hour conditions as a table; weather timeline: collapsible cloud-layer rows. */
.home-cond-table { margin:0; font-size:.9rem; }
.home-cond-table th { white-space:nowrap; }
.home-cond-table td { white-space:nowrap; }
.home-cond-table .home-cond-time { color:#eef6fb; font-variant-numeric:tabular-nums; }
.home-cond-best { margin:10px 0 14px; }
.sky-hour-table:not(.layers-open) .sky-layer-row { display:none; }
.sky-layer-row>td { background:rgba(127,220,246,.025); color:#a9c6d8; font-size:.8rem; padding-top:6px; padding-bottom:6px; }
.sky-layer-row>th { font-size:.8rem; color:var(--xyk-muted); }
.sky-layer-toggle { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.sky-layer-toggle small { color:var(--xyk-accent); font-size:.72rem; }
.sky-layer-toggle:focus-visible { outline:2px solid #8edaf2; outline-offset:3px; }