.live-workspace {
  display: grid;
  gap: 7px;
  margin: 0 16px 10px;
  padding: 9px;
  border: 1px solid #303852;
  border-radius: 12px;
  background: linear-gradient(145deg, #141a2d, #0d1220);
  box-shadow: inset 0 1px rgb(129 213 255 / .06), 0 8px 22px rgb(0 0 0 / .14);
}
.live-workspace[hidden] { display: none !important; }

.live-focus {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #3a435d;
  border-radius: 10px;
  background: linear-gradient(145deg, #181f34, #101523);
  box-shadow: inset 0 1px rgb(255 255 255 / .035);
}
.live-focus-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-focus-heading { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
.live-focus-heading strong { color: #f2f5fc; font-size: 12px; white-space: nowrap; }
.live-focus-heading small { overflow: hidden; color: #8e98ad; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.live-module-label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: #ff9aa0;
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .08em;
}
.live-module-label i { width: 5px; height: 5px; border-radius: 50%; background: #ff626d; box-shadow: 0 0 0 3px rgb(255 98 109 / .12); }
.live-view-action {
  flex: none;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #6a5360;
  border-radius: 7px;
  background: #321b24;
  color: #ffd7d9;
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
}
.live-view-action:hover { border-color: #ff737c; background: #42202a; }

.live-countdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border: 1px solid #453847;
  border-radius: 8px;
  background: linear-gradient(135deg, #211926, #121724);
}
.live-countdown-event { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 6px; }
.live-countdown-event > span { color: #8e98ad; font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-landmark-label { overflow: hidden; color: #fff; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.live-countdown-event time { grid-column: 1 / -1; color: #a3adc0; font-size: 8.5px; }
.live-timer { display: grid; gap: 3px; }
.live-landmark-countdown { color: #ffbd5b; font: 760 28px/1 var(--mono); letter-spacing: -.045em; text-align: right; }
.live-timer > span { display: grid; grid-template-columns: repeat(3, 1fr); color: #8c8290; font-size: 6.5px; text-align: center; text-transform: uppercase; }
.live-timer i { font-style: normal; }

.live-approach {
  display: grid;
  gap: 1px;
  padding: 8px 9px 6px;
  border: 1px solid #2e3850;
  border-radius: 8px;
  background: rgb(8 13 24 / .42);
}
.live-approach-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.live-approach-copy { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.live-approach-copy > span { color: #8e98ad; font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.live-approach-copy strong { color: #eef2fb; font-size: 11px; }
.live-approach-copy small { width: 100%; color: #75d7df; font-size: 8.5px; }
.live-eclipse-readout { display: grid; flex: none; justify-items: end; gap: 1px; text-align: right; }
.live-eclipse-readout > strong { color: #f8f9ff; font: 760 20px/1 var(--mono); }
.live-eclipse-readout > span { color: #aeb8ca; font-size: 7.5px; white-space: nowrap; }
.live-moon-plot { display: block; width: 100%; height: 64px; overflow: visible; }
.live-plot-field { fill: #090e1b; stroke: #3d4961; stroke-width: 1; stroke-dasharray: 2 5; }
.live-moon-plot line { stroke: #7794af; stroke-width: 1; stroke-dasharray: 3 4; }
.live-plot-sun { fill: #ffd378; stroke: #fff0b3; stroke-width: 2; filter: drop-shadow(0 0 5px rgb(255 183 82 / .65)); }
.live-plot-moon { fill: #d9e7f2; stroke: #7693ac; stroke-width: 2; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .7)); }
.live-moon-plot text { fill: #8f9db1; font: 700 7px var(--sans); letter-spacing: .04em; }
.live-sun-position { justify-self: start; margin-top: -8px; color: #8290a7; font-size: 7.5px; }
.live-glasses-status {
  padding: 6px 8px;
  border: 1px solid rgb(126 223 168 / .18);
  border-radius: 6px;
  background: rgb(35 107 68 / .1);
  color: #aeb8ca;
  font-size: 8.5px;
}
.live-glasses-status[data-state="urgent"] { border-color: rgb(255 133 140 / .35); background: rgb(155 35 48 / .12); color: #ff858c; font-weight: 800; }
.live-glasses-status[data-state="armed"] { color: #7edfa8; }

.live-utility-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.live-conditions, .live-settings { min-width: 0; border: 1px solid #2b334b; border-radius: 8px; background: rgb(16 21 35 / .66); }
.live-utility-row > details[open] { grid-column: 1 / -1; }
.live-conditions > summary, .live-settings > summary {
  display: flex;
  min-height: 33px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  list-style: none;
  color: #8e98ad;
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
}
.live-conditions > summary::-webkit-details-marker, .live-settings > summary::-webkit-details-marker { display: none; }
.live-conditions > summary::after, .live-settings > summary::after { content: '›'; flex: none; margin-left: 1px; font-size: 14px; transition: transform .16s; }
.live-conditions[open] > summary::after, .live-settings[open] > summary::after { transform: rotate(90deg); }
.live-conditions > summary > strong, .live-settings > summary > strong { min-width: 0; overflow: hidden; margin-left: auto; color: #dce3ef; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.live-conditions[data-state="error"] > summary > strong { color: #e1bd63; }
.live-conditions-body, .live-settings-body { border-top: 1px solid #2b334b; }
.live-conditions-body { position: relative; display: grid; gap: 7px; padding: 8px; }
.livecard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.livecard-fact { padding: 6px; border: 1px solid #2d354c; border-radius: 6px; background: #151a2a; }
.livecard-fact span { display: block; color: #789ba4; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.livecard-fact strong { display: block; margin-top: 1px; color: #e3eef0; font: 700 9.5px/1.3 var(--mono); }
.livecard-source { display: flex; justify-content: space-between; gap: 8px; color: #78919a; font-size: 7.5px; }
.livecard-refresh { justify-self: start; min-height: 27px; padding: 0 8px; border: 1px solid #3a435c; border-radius: 6px; background: #1a2033; color: #e7ebf4; font-size: 8.5px; cursor: pointer; }
.live-settings-body { display: grid; gap: 6px; padding: 8px; }
.live-setting-row { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 1px solid #2d354c; border-radius: 7px; background: #151a2a; }
.live-setting-row > span { display: grid; gap: 1px; }
.live-setting-row strong { color: #dce2ee; font-size: 9px; }
.live-setting-row small { color: #7d889d; font-size: 7.5px; }
.live-setting-row input { width: 17px; height: 17px; accent-color: #e6a545; }
.live-setting-row select { min-width: 108px; border: 1px solid #39425a; border-radius: 6px; background: #101522; padding: 5px 7px; color: #e3e7ef; font-size: 9px; }
.live-setting-test { display: flex; align-items: center; gap: 9px; padding: 2px; }
.live-setting-test button { min-height: 28px; padding: 0 9px; border: 1px solid #3a435c; border-radius: 6px; background: #1a2033; color: #e7ebf4; font-size: 8.5px; cursor: pointer; }
.live-setting-test span { color: #7f8aa0; font-size: 7.5px; line-height: 1.35; }

.mobile-side-tab-live svg { stroke: #ff737c; }
.mobile-side-tab-live[aria-selected="true"] { color: #fff; }
.mobile-side-tab-live[aria-selected="true"] svg { stroke: #ff737c; }

@media (max-width: 620px) {
  .mobile-side-tabs:has(#mobile-tab-live:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .side:not([data-mobile-panel="live"]) .live-workspace { display: none !important; }
  .side[data-mobile-panel="live"] #card, .side[data-mobile-panel="live"] #firebar, .side[data-mobile-panel="live"] #visibility-card { display: none !important; }
  .side[data-mobile-panel="live"] #side-analysis { overflow: auto; }
  .side[data-mobile-panel="live"] .live-workspace:not([hidden]) { display: grid !important; }
  .live-workspace { margin: 0; padding: 9px 9px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .live-focus { padding: 9px; }
  .live-focus-heading { display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; }
  .live-focus-heading small { grid-column: 1 / -1; }
  .live-countdown { grid-template-columns: 1fr; gap: 7px; }
  .live-landmark-countdown { text-align: left; }
  .live-timer { justify-self: start; }
  .live-timer > span { min-width: 180px; }
  .live-moon-plot { height: 72px; }
  .livecard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-settings { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .live-landmark-countdown { font-size: 25px; }
  .live-utility-row { grid-template-columns: 1fr; }
  .live-utility-row > details[open] { grid-column: auto; }
  .live-setting-row { align-items: flex-start; flex-direction: column; }
  .live-setting-row select { width: 100%; }
}

html[data-theme="light"] .live-workspace { border-color: #d9dee8; background: linear-gradient(145deg, #fff, #f4f6fa); box-shadow: 0 8px 22px rgb(30 45 70 / .08); }
html[data-theme="light"] .live-focus-heading strong,
html[data-theme="light"] .live-landmark-label,
html[data-theme="light"] .live-approach-copy strong,
html[data-theme="light"] .live-eclipse-readout > strong { color: #1f2838; }
html[data-theme="light"] .live-focus { border-color: #d8dee8; background: linear-gradient(145deg, #fff, #f4f6fa); }
html[data-theme="light"] .live-countdown { border-color: #e1cad0; background: linear-gradient(135deg, #fff8f8, #fff); }
html[data-theme="light"] .live-view-action { border-color: #d9aeb3; background: #fff0f1; color: #8b1f29; }
html[data-theme="light"] .live-approach { border-color: #d8dee8; background: #fff; }
html[data-theme="light"] .live-plot-field { fill: #f4f7fa; stroke: #bdc8d6; }
html[data-theme="light"] .live-approach-copy small { color: #167580; }
html[data-theme="light"] .live-glasses-status { border-color: #cfe6da; background: #f4fbf7; color: #27734b; }
html[data-theme="light"] .live-conditions,
html[data-theme="light"] .live-settings { border-color: #d8dee8; background: #fff; }
html[data-theme="light"] .live-conditions > summary > strong,
html[data-theme="light"] .live-settings > summary > strong { color: #283346; }
html[data-theme="light"] .live-conditions-body,
html[data-theme="light"] .live-settings-body { border-color: #d8dee8; }
html[data-theme="light"] .livecard-fact,
html[data-theme="light"] .live-setting-row { border-color: #d8dee8; background: #fff; }
html[data-theme="light"] .livecard-fact strong,
html[data-theme="light"] .live-setting-row strong { color: #283346; }
html[data-theme="light"] .live-setting-row select { border-color: #ccd3df; background: #fff; color: #283346; }
@media (max-width: 620px) { html[data-theme="light"] .live-workspace { background: transparent; } }

/* Eclipse timeline instrument */
.tltrack{min-height:32px;overflow:visible}
.tl-landmarks{position:absolute;inset:0 12px auto;height:32px;z-index:2;pointer-events:none}
.tl-landmark{--landmark-position:0%;position:absolute;left:var(--landmark-position);top:0;z-index:2;width:1px;height:32px;margin:0;padding:0;border:0;background:none;pointer-events:none;transform:translateX(-.5px)}
.tl-landmark.peak{z-index:4}
.tl-landmark-dot{position:absolute;top:18px;left:50%;width:5px;height:5px;border:1px solid #8691a5;border-radius:50%;background:#111626;box-shadow:0 0 0 2px #0f1423;transform:translate(-50%,-50%);transition:width .14s,height .14s,border-color .14s,background .14s,box-shadow .14s,opacity .14s}
.tl-landmark::before{content:"";position:absolute;top:6px;left:50%;width:1px;height:9px;background:#7a8599;opacity:.55;transform:translateX(-50%)}
.tl-landmark.peak .tl-landmark-dot{width:8px;height:8px;border-color:#ddd7ff;background:#8f7fe3;box-shadow:0 0 0 3px rgb(143 127 227/.12)}
.tl-landmark[data-linked] .tl-landmark-dot{width:11px;height:11px;border-color:#fff1d6;background:var(--sun);box-shadow:0 0 0 4px rgb(255 180 77/.13)}
.tl-landmark[data-timeline-state="passed"]::before{opacity:.22}.tl-landmark[data-timeline-state="passed"] .tl-landmark-dot{opacity:.42}.tl-landmark[data-timeline-state="next"] .tl-landmark-dot{border-color:#fff1d6;background:var(--sun);box-shadow:0 0 0 4px rgb(255 180 77/.12)}
.tl-partial-span,.tl-totality-span{position:absolute;inset:0;z-index:1;pointer-events:none}
.tl-partial-line{position:absolute;left:var(--partial-start);top:16px;width:max(2px,var(--partial-width));height:4px;border-radius:999px;background:linear-gradient(90deg,#4b566b,#69758c 50%,#4b566b)}
.tl-totality-line{position:absolute;left:var(--totality-start);top:13px;width:max(9px,var(--totality-width));height:10px;border:1px solid #cfc6ff;border-radius:999px;background:linear-gradient(90deg,#7463c4,#aa9bff,#7463c4);box-shadow:0 0 10px rgb(142 122 255/.34)}
.tl-totality-span[data-active] .tl-totality-line{border-color:#fff;background:linear-gradient(90deg,#9482ee,#c7bbff,#9482ee);box-shadow:0 0 15px rgb(174 151 255/.58)}
.tl-event[data-linked]{color:#f4f6fb}.tl-event[data-linked]::after{content:"";position:absolute;right:32%;bottom:0;left:32%;height:1px;border-radius:999px;background:#8f85c4}.tl-event[data-timeline-state="passed"] .tl-event-code{color:#677286}.tl-event[data-timeline-state="next"] .tl-event-code{color:#aaa1d5}
html[data-theme="light"] .tl-landmark-dot{border-color:#7e899a;background:#fff;box-shadow:0 0 0 2px #fbfcfe}html[data-theme="light"] .tl-partial-line{background:linear-gradient(90deg,#b9c2ce,#9da9b8 50%,#b9c2ce)}html[data-theme="light"] .tl-event[data-linked]{color:#1f2a38}
html[data-theme="night"] .tl-landmark-dot{border-color:#a45f53;background:#1b0907;box-shadow:0 0 0 2px #0e0303}html[data-theme="night"] .tl-partial-line{background:linear-gradient(90deg,#5b2b25,#85483d 50%,#5b2b25)}html[data-theme="night"] .tl-totality-line,html[data-theme="night"] .tl-totality-span[data-active] .tl-totality-line{border-color:#ffc2b7;background:linear-gradient(90deg,#9c4436,#e47764,#9c4436);box-shadow:0 0 12px rgb(255 122 98/.42)}html[data-theme="night"] .tl-event-time{color:#f1bdb4}
@media (max-width:960px){.tltrack{height:32px;min-height:32px}}