@font-face {
  font-family: 'TM-DSEG7';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'TM-DSEG14';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG14-Classic/DSEG14Classic-BoldItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1d2430;
  --line: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --danger: #f85149;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; }
button, input, select { font: inherit; }
button, .file-btn { border: 1px solid var(--line); background: #21262d; color: var(--text); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
button:hover, .file-btn:hover { border-color: #6e7681; }
#temporalAutoRotateBtn.active { background: #1f6feb; border-color: #388bfd; color: #ffffff; }
button.primary { background: #1f6feb; border-color: #388bfd; }
button.secondary { background: #21262d; }
button.danger { color: #ffb4b4; border-color: #6e2b2b; width: 100%; }
button.wide { width: 100%; margin-top: 8px; }
.file-btn input { display: none; }
.hidden { display: none !important; }

.app-shell { height: 100vh; display: flex; flex-direction: column; min-height: 0; }
.topbar {
  flex: 0 0 70px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(480px, 1.4fr);
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand h1 { margin: 0; font-size: 20px; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.app-tabs, .view-switch, .segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #0d1117; }
.app-tabs button, .view-switch button, .segmented button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; }
.app-tabs button.active, .view-switch button.active, .segmented button.active { background: #2d333b; color: var(--text); box-shadow: inset 0 0 0 1px #444c56; }
.context-actions { min-width: 0; }
.toolbar-group { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.inline-field select { background: #0d1117; border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 7px 8px; }

.workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 310px; }
.sidebar { background: var(--panel); overflow: auto; padding: 14px; min-height: 0; }
.left-panel { border-right: 1px solid var(--line); }
.right-panel { border-left: 1px solid var(--line); }
.sidebar section + section { margin-top: 22px; }
.sidebar h2 { font-size: 13px; margin: 0 0 10px; color: #c9d1d9; text-transform: uppercase; letter-spacing: .05em; }
.text-input, .select-input { width: 100%; background: #0d1117; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; outline: none; }
.text-input:focus, .select-input:focus { border-color: var(--accent); }
.field-label { display: grid; gap: 6px; margin-top: 10px; color: #c9d1d9; font-size: 12px; }
.filter-list { display: grid; gap: 6px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c9d1d9; }
.check-row input { accent-color: var(--accent); }
.search-results { margin-top: 8px; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.search-item { padding: 7px 8px; border-radius: 6px; cursor: pointer; color: #c9d1d9; font-size: 13px; }
.search-item:hover { background: var(--panel-2); }
.search-item small { color: var(--muted); display: block; }

.graph-area { position: relative; min-width: 0; min-height: 0; background: radial-gradient(circle at 50% 50%, #111722, #0b0f14 70%); }
#graph2d, #graph3d, #temporalCanvas { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
#graph3d, #temporalCanvas { cursor: grab; }
#graph3d.dragging, #temporalCanvas.dragging { cursor: grabbing; }
.graph-hint { position: absolute; left: 12px; bottom: 10px; padding: 6px 9px; background: rgba(13,17,23,.82); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; pointer-events: none; }
.mode-badge { position: absolute; right: 12px; top: 10px; min-width: 40px; text-align: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(13,17,23,.82); color: #c9d1d9; font-weight: 700; font-size: 11px; pointer-events: none; }
.time-hud { position: absolute; left: 12px; top: 10px; min-width: 215px; padding: 8px 10px; background: rgba(13,17,23,.86); border: 1px solid var(--line); border-radius: 8px; pointer-events: none; }
.time-hud-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.time-hud-row + .time-hud-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(48,54,61,.65); }
.time-hud-label { color: #2dd4bf; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.time-hud-label.preview-label { color: #79c0ff; }
.time-hud-label.warp-label { color: #d2a8ff; }
.time-hud-value { color: #f0f6fc; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.time-hud-offset { margin-top: 4px; color: #79c0ff; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.time-hud-offset.following { color: #8b949e; }

.time-hud-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:7px; padding-top:6px; border-top:1px solid rgba(48,54,61,.65); pointer-events:auto; }
.time-hud-actions button { min-height:26px; padding:3px 7px; font-size:10px; border-radius:6px; }
.time-hud-actions button.active { border-color:#2dd4bf; color:#99f6e4; background:rgba(45,212,191,.08); }

.muted { color: var(--muted); font-size: 13px; }
.compact { line-height: 1.5; margin: 10px 0 0; }
.badge { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-size: 11px; color: #c9d1d9; margin-bottom: 8px; }
.detail-panel h3 { margin: 2px 0 8px; font-size: 20px; }
.detail-desc { color: #c9d1d9; line-height: 1.6; font-size: 13px; white-space: pre-line; }
.detail-block { margin-top: 20px; }
.detail-block h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.detail-block-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.detail-block-heading h4 { margin:0; }
.compact-btn { min-height:28px; padding:4px 9px; font-size:11px; }
#itemEditBlock.inspector-readonly input:disabled,
#itemEditBlock.inspector-readonly select:disabled { opacity:.82; color:var(--text); -webkit-text-fill-color:var(--text); cursor:default; }
#itemEditBlock.inspector-readonly .member-mode-tabs button:disabled,
#itemEditBlock.inspector-readonly .member-suggestions button:disabled { opacity:.62; cursor:default; }
#itemEditBlock.inspector-readonly #applyItemEditBtn { display:none; }

.link-row { padding: 8px 0; border-bottom: 1px solid #242b33; font-size: 12px; }
.link-row b { color: #c9d1d9; }
.link-row span { color: var(--muted); }
.stats { color: #c9d1d9; font-size: 13px; line-height: 1.8; margin-bottom: 10px; }

.layer-legend { display: grid; gap: 7px; }
.layer-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: #c9d1d9; }
.layer-dot { width: 8px; height: 8px; border-radius: 50%; background: #6e7681; }
.layer-row small { color: var(--muted); }

.edge { stroke: #525a65; stroke-width: 1.4; opacity: .65; vector-effect: non-scaling-stroke; }
.edge.highlight { stroke: #f0f6fc; opacity: .95; stroke-width: 2; }
.edge.dim { opacity: .10; }
.edge-label { fill: #8b949e; font-size: 10px; paint-order: stroke; stroke: #0d1117; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.edge-label.dim { opacity: .15; }
.node circle { stroke: #8b949e; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.node text { fill: #f0f6fc; font-size: 12px; font-weight: 600; text-anchor: middle; paint-order: stroke; stroke: #0d1117; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.node.dim { opacity: .15; }
.node.selected circle { stroke: #ffffff; stroke-width: 3; }
.node.search-hit circle { stroke: #f2cc60; stroke-width: 3; }
.node:hover circle { stroke: #ffffff; }

.explore-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.explore-switch button { padding: 7px 5px; font-size: 12px; color: var(--muted); }
.explore-switch button.active { color: var(--text); border-color: #6e7681; background: #2d333b; box-shadow: inset 0 0 0 1px #444c56; }
.explore-status { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.temporal-form-panel .segmented { display: grid; grid-template-columns: 1fr 1fr; }
.form-message { min-height: 18px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.inline-add { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.group-list { margin-top: 10px; display: grid; gap: 6px; }
.group-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: #c9d1d9; padding: 5px 0; }
.group-swatch { width: 8px; height: 8px; border-radius: 50%; }
.group-row small { color: var(--muted); }
.legend-list { display: grid; gap: 9px; color: #c9d1d9; font-size: 12px; }
.shape { width: 12px; height: 12px; display: inline-block; margin-right: 8px; vertical-align: -1px; border: 2px solid #c9d1d9; }
.task-shape { border-radius: 2px; }
.schedule-shape { border-radius: 50%; }
.now-shape { border-radius: 50%; border-color: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,.18); }
.preview-shape { border-radius: 50%; border-color: #79c0ff; border-style: dashed; box-shadow: 0 0 0 2px rgba(121,192,255,.12); }
.pillar-mini { width: 2px; height: 15px; display: inline-block; margin: 0 13px 0 5px; vertical-align: -4px; background: #8b949e; }

@media (max-width: 1240px) {
  .topbar { grid-template-columns: 180px auto minmax(360px, 1fr); }
  .toolbar-group button, .toolbar-group .file-btn { padding: 7px 8px; font-size: 12px; }
  .workspace { grid-template-columns: 230px minmax(0,1fr) 280px; }
}
@media (max-width: 1020px) {
  .workspace { grid-template-columns: 220px minmax(0,1fr); }
  .right-panel { display: none; }
  .topbar { grid-template-columns: 170px auto 1fr; }
  .toolbar-group > :not(.view-switch):not(.inline-field) { display: none; }
}


/* v13: Timeline-only shell */
.timeline-only-topbar { grid-template-columns: minmax(210px, 1fr) minmax(680px, 2.2fr); }
.timeline-only-topbar .context-actions { justify-self: stretch; }
.group-row { grid-template-columns: 10px minmax(0,1fr) auto auto; }
.group-row-actions { display:flex; gap:4px; justify-self:end; }
.group-row-actions button { padding:3px 6px; font-size:10px; border-radius:6px; }
.group-delete-dialog { border:0; padding:0; background:transparent; color:var(--text); }
.group-delete-dialog::backdrop { background:rgba(0,0,0,.64); backdrop-filter:blur(2px); }
.dialog-card { min-width:min(440px,calc(100vw - 32px)); max-width:520px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 18px 60px rgba(0,0,0,.48); }
.dialog-card h2 { margin:0 0 10px; font-size:16px; }
.dialog-text { color:#c9d1d9; font-size:13px; line-height:1.65; white-space:pre-line; }
.dialog-actions { margin-top:16px; display:grid; gap:6px; }
@media (max-width: 1020px) { .timeline-only-topbar { grid-template-columns: 180px 1fr; } }

/* v14: Timeline workspace UI reorganization */
.timeline-v14-topbar {
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 8px 16px;
}
.timeline-v14-topbar .brand h1 { font-size: 18px; }
.timeline-v14-topbar .brand p { font-size: 11px; }
.timeline-v14-workspace {
  grid-template-columns: minmax(0,1fr) 340px;
}
.timeline-v14-workspace .right-panel { border-left: 1px solid var(--line); }

.system-menu { position: relative; z-index: 20; }
.system-menu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #21262d;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 11px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}
.system-menu > summary::-webkit-details-marker { display: none; }
.system-menu[open] > summary { border-color: #6e7681; background: #2d333b; }
.hamburger { font-size: 16px; line-height: 1; }
.system-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 310px;
  max-height: calc(100vh - 82px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(22,27,34,.98);
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
}
.system-menu-panel section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #242b33; }
.system-menu-panel h2 { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #c9d1d9; }
.system-menu-panel .check-row + .check-row { margin-top: 8px; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.menu-actions .danger { width: auto; }
.menu-actions .file-btn { text-align: center; }

.view-controls {
  position: absolute;
  right: 12px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(13,17,23,.86);
  backdrop-filter: blur(4px);
}
.view-controls button { padding: 6px 9px; font-size: 11px; }
.view-controls .inline-field { padding-left: 5px; }
.view-controls select { padding: 5px 7px; }
#temporalAutoRotateBtn.active { background: #1f6feb; border-color: #388bfd; color: #fff; }
.timeline-v14-workspace .mode-badge { top: 56px; }

.timeline-tabs-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.right-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  border-bottom: 1px solid var(--line);
  background: #11161d;
}
.right-tabs button {
  min-width: 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  border-right: 1px solid #242b33;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.right-tabs button:last-child { border-right: 0; }
.right-tabs button:hover { background: #1b222c; }
.right-tabs button.active { color: var(--text); background: #21262d; box-shadow: inset 0 -2px 0 var(--accent); }
.right-tab-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px; }
.right-tab-pane { display: none; }
.right-tab-pane.active { display: block; }
.right-tab-pane > h2 { font-size: 13px; margin: 0 0 12px; color: #c9d1d9; text-transform: uppercase; letter-spacing: .05em; }

/* Group labels are anchored near NOW intersections, so give them strong text priority. */
.temporal-area { isolation: isolate; }

@media (max-width: 1080px) {
  .timeline-v14-workspace { grid-template-columns: minmax(0,1fr) 310px; }
  .right-tabs button { font-size: 9px; padding-inline: 2px; }
  .view-controls { flex-wrap: wrap; max-width: 320px; justify-content: flex-end; }
}
@media (max-width: 780px) {
  .timeline-v14-workspace { grid-template-columns: 1fr; }
  .timeline-tabs-panel { display: none; }
  .system-menu-panel { width: min(310px, calc(100vw - 24px)); }
}

/* v16: camera follow modes */
.camera-mode-control { display:flex; align-items:center; gap:5px; color:#8b949e; font-size:10px; white-space:nowrap; }
.camera-mode-control select { min-height:26px; background:#0d1117; color:#f0f6fc; border:1px solid #30363d; border-radius:6px; padding:2px 5px; font-size:10px; }
.camera-mode-control select:focus { outline:1px solid #58a6ff; outline-offset:1px; }

/* v17: theme system + camera mode placement */
:root {
  --control-bg: #21262d;
  --control-hover: #2d333b;
  --input-bg: #0d1117;
  --canvas-a: #111722;
  --canvas-b: #0b0f14;
  --hud-bg: rgba(13,17,23,.86);
  --overlay-bg: rgba(13,17,23,.82);
  --tab-bg: #11161d;
  --tab-hover: #1b222c;
  --tab-active: #21262d;
}

body[data-theme="dark-gray"] {
  color-scheme: dark;
  --bg: #181818;
  --panel: #222222;
  --panel-2: #2b2b2b;
  --line: #414141;
  --text: #f0f0f0;
  --muted: #a4a4a4;
  --accent: #8ab4f8;
  --danger: #ff6b6b;
  --control-bg: #2b2b2b;
  --control-hover: #363636;
  --input-bg: #171717;
  --canvas-a: #242424;
  --canvas-b: #141414;
  --hud-bg: rgba(28,28,28,.90);
  --overlay-bg: rgba(28,28,28,.86);
  --tab-bg: #1b1b1b;
  --tab-hover: #303030;
  --tab-active: #303030;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f4;
  --panel: #ffffff;
  --panel-2: #f4f6f8;
  --line: #c7ccd3;
  --text: #18202a;
  --muted: #65717d;
  --accent: #2563eb;
  --danger: #c92a2a;
  --control-bg: #f7f8fa;
  --control-hover: #e8ebef;
  --input-bg: #ffffff;
  --canvas-a: #f7f8fa;
  --canvas-b: #e4e8ed;
  --hud-bg: rgba(255,255,255,.90);
  --overlay-bg: rgba(255,255,255,.86);
  --tab-bg: #f4f6f8;
  --tab-hover: #e8ebef;
  --tab-active: #ffffff;
}

body[data-theme="eink"] {
  color-scheme: light;
  --bg: #e7e4d8;
  --panel: #f4f1e5;
  --panel-2: #e3e0d5;
  --line: #78766e;
  --text: #151515;
  --muted: #55544e;
  --accent: #151515;
  --danger: #151515;
  --control-bg: #eeece1;
  --control-hover: #dddacf;
  --input-bg: #f8f6ec;
  --canvas-a: #f2efe4;
  --canvas-b: #e5e2d7;
  --hud-bg: rgba(244,241,229,.94);
  --overlay-bg: rgba(244,241,229,.92);
  --tab-bg: #e8e5da;
  --tab-hover: #d9d6ca;
  --tab-active: #f4f1e5;
}

button, .file-btn { background: var(--control-bg); }
button:hover, .file-btn:hover { background: var(--control-hover); }
.inline-field select, .text-input, .select-input, .app-tabs, .view-switch, .segmented { background: var(--input-bg); }
.graph-area { background: radial-gradient(circle at 50% 50%, var(--canvas-a), var(--canvas-b) 70%); }
.graph-hint, .mode-badge { background: var(--overlay-bg); }
.time-hud, .view-controls { background: var(--hud-bg); }
.right-tabs { background: var(--tab-bg); }
.right-tabs button:hover { background: var(--tab-hover); }
.right-tabs button.active { background: var(--tab-active); }
.system-menu > summary { background: var(--control-bg); color: var(--text); }
.system-menu[open] > summary { background: var(--control-hover); }
.system-menu-panel { background: color-mix(in srgb, var(--panel) 97%, transparent); }
.sidebar h2, .field-label, .check-row, .detail-desc, .stats, .group-row, .legend-list, .system-menu-panel h2 { color: var(--text); }

body[data-theme="light"] .time-hud-row + .time-hud-row,
body[data-theme="eink"] .time-hud-row + .time-hud-row,
body[data-theme="light"] .time-hud-actions,
body[data-theme="eink"] .time-hud-actions { border-top-color: color-mix(in srgb, var(--line) 65%, transparent); }

body[data-theme="eink"] #temporalAutoRotateBtn.active,
body[data-theme="eink"] button.primary,
body[data-theme="eink"] .right-tabs button.active {
  background: #252525;
  border-color: #151515;
  color: #f4f1e5;
}

.camera-mode-main select { min-width: 132px; }

/* Theme-specific HUD accents */
body[data-theme="dark-gray"] .time-hud-label { color: #4dd0c8; }
body[data-theme="dark-gray"] .time-hud-label.warp-label { color: #caa7f5; }
body[data-theme="light"] .time-hud-label { color: #0f766e; }
body[data-theme="light"] .time-hud-label.warp-label { color: #7c3aed; }
body[data-theme="eink"] .time-hud-label,
body[data-theme="eink"] .time-hud-label.preview-label,
body[data-theme="eink"] .time-hud-label.warp-label,
body[data-theme="eink"] .time-hud-offset { color: #151515; }
body[data-theme="eink"] .preview-shape,
body[data-theme="eink"] .now-shape { border-color: #151515; box-shadow: none; }

/* v18: additional themes + tablet/mobile layout */
body[data-theme="light-gray"] {
  color-scheme: light;
  --bg: #d9dde1;
  --panel: #eceff1;
  --panel-2: #e1e5e8;
  --line: #adb5bc;
  --text: #20262c;
  --muted: #5e6872;
  --accent: #315f8d;
  --danger: #9a4a47;
  --control-bg: #e3e7ea;
  --control-hover: #d4d9dd;
  --input-bg: #f5f6f7;
  --canvas-a: #edf0f2;
  --canvas-b: #cfd5da;
  --hud-bg: rgba(240,243,245,.92);
  --overlay-bg: rgba(240,243,245,.88);
  --tab-bg: #dfe4e7;
  --tab-hover: #d0d6da;
  --tab-active: #eef1f3;
}

body[data-theme="eink"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --line: #111111;
  --text: #000000;
  --muted: #333333;
  --accent: #000000;
  --danger: #000000;
  --control-bg: #ffffff;
  --control-hover: #f1f1f1;
  --input-bg: #ffffff;
  --canvas-a: #ffffff;
  --canvas-b: #ffffff;
  --hud-bg: rgba(255,255,255,.97);
  --overlay-bg: rgba(255,255,255,.96);
  --tab-bg: #ffffff;
  --tab-hover: #f1f1f1;
  --tab-active: #ffffff;
}

body[data-theme="light-gray"] .time-hud-row + .time-hud-row,
body[data-theme="light-gray"] .time-hud-actions { border-top-color: rgba(120,130,140,.45); }

body[data-theme="eink"] #temporalAutoRotateBtn.active,
body[data-theme="eink"] button.primary,
body[data-theme="eink"] .right-tabs button.active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

@media (max-width: 780px) {
  html, body { height: auto; min-height: 100%; }
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100dvh; }
  .timeline-v14-topbar { position: sticky; top: 0; z-index: 30; flex: 0 0 auto; padding: 7px 9px 7px 11px; }
  .timeline-v14-topbar .brand h1 { font-size: 15px; }
  .timeline-v14-topbar .brand p { display: none; }
  .timeline-v14-workspace { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(480px, 68dvh) auto; min-height: 0; }
  .temporal-area { min-height: 480px; }
  .timeline-tabs-panel { display: flex !important; min-height: 360px; max-height: none; border-left: 0 !important; border-top: 1px solid var(--line); overflow: visible; }
  .right-tabs { position: sticky; top: 49px; z-index: 12; }
  .right-tabs button { min-height: 42px; font-size: 9px; }
  .right-tab-body { overflow: visible; min-height: 310px; padding: 12px; }
  .view-controls { top: auto; right: 8px; bottom: 43px; max-width: calc(100% - 16px); justify-content: flex-end; gap: 5px; }
  .view-controls button, .view-controls select { min-height: 34px; }
  .time-hud { left: 8px; top: 8px; min-width: 190px; max-width: calc(100% - 16px); }
  .graph-hint { display: none; }
  .system-menu-panel { right: 0; left: auto; max-height: 78dvh; overflow: auto; }
  button, .file-btn, .text-input, .select-input { min-height: 42px; }
}

@media (max-width: 480px) {
  .timeline-v14-workspace { grid-template-rows: minmax(430px, 64dvh) auto; }
  .temporal-area { min-height: 430px; }
  .time-hud { font-size: 10px; transform-origin: top left; }
  .time-hud-value { font-size: 10px; }
  .view-controls { left: 8px; right: 8px; justify-content: flex-start; }
  .view-controls .inline-field { font-size: 10px; }
  .view-controls button { font-size: 10px; padding-inline: 8px; }
  .right-tabs { overflow-x: auto; justify-content: flex-start; }
  .right-tabs button { flex: 0 0 auto; padding-inline: 10px; }
}

/* v19: mobile View menu + touch gesture cleanup */
.topbar-menus { display:flex; align-items:center; gap:8px; }
.mobile-view-menu { display:none; }
.mobile-view-status { display:grid; gap:7px; }
.mobile-view-status > div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; padding-bottom:6px; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.mobile-view-status > div:last-child { border-bottom:0; padding-bottom:0; }
.mobile-view-status span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; }
.mobile-view-status strong { color:var(--text); font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }
.mobile-view-actions { grid-template-columns:1fr; }
#mobileAutoRotateBtn.active { background:#1f6feb; border-color:#388bfd; color:#fff; }

@media (max-width: 480px) {
  .timeline-v14-topbar { gap:8px; }
  .timeline-v14-topbar .brand { min-width:0; }
  .timeline-v14-topbar .brand h1 { white-space:nowrap; }
  .topbar-menus { gap:5px; }
  .system-menu > summary { padding:7px 8px; gap:5px; font-size:11px; }
  .mobile-view-menu { display:block; }
  .system-menu-panel { width:min(310px, calc(100vw - 16px)); max-height:78dvh; }
  .mobile-view-menu .system-menu-panel { right:0; left:auto; }
  .time-hud, .view-controls { display:none; }
  .graph-hint { display:none; }
}

/* v21: resilient mobile UI + taller scene + Light Gray contrast fix */
body[data-theme="light-gray"] button.secondary {
  background: #d4d9dd;
  border-color: #9ba5ad;
  color: #20262c;
}
body[data-theme="light-gray"] button.secondary:hover {
  background: #c7cdd2;
  border-color: #87939c;
  color: #171c21;
}

/* JS-applied smartphone mode. This intentionally does not rely on a single CSS viewport width. */
body.mobile-ui {
  overflow: auto;
}
body.mobile-ui .app-shell {
  height: auto;
  min-height: 100dvh;
}
body.mobile-ui .timeline-v14-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  padding: 7px 9px 7px 11px;
  gap: 8px;
}
body.mobile-ui .timeline-v14-topbar .brand {
  min-width: 0;
}
body.mobile-ui .timeline-v14-topbar .brand h1 {
  font-size: 15px;
  white-space: nowrap;
}
body.mobile-ui .timeline-v14-topbar .brand p {
  display: none;
}
body.mobile-ui .topbar-menus {
  gap: 5px;
}
body.mobile-ui .system-menu > summary {
  padding: 7px 8px;
  gap: 5px;
  font-size: 11px;
}
body.mobile-ui .mobile-view-menu {
  display: block;
}
body.mobile-ui .system-menu-panel {
  width: min(310px, calc(100vw - 16px));
  max-height: 78dvh;
  right: 0;
  left: auto;
  overflow: auto;
}
body.mobile-ui .mobile-view-menu .system-menu-panel {
  right: 0;
  left: auto;
}
body.mobile-ui .timeline-v14-workspace {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(540px, 74dvh) auto;
  min-height: 0;
}
body.mobile-ui .temporal-area {
  min-height: 540px;
}
body.mobile-ui .timeline-tabs-panel {
  display: flex !important;
  min-height: 360px;
  max-height: none;
  border-left: 0 !important;
  border-top: 1px solid var(--line);
  overflow: visible;
}
body.mobile-ui .right-tabs {
  position: sticky;
  top: 49px;
  z-index: 12;
  overflow-x: auto;
  justify-content: flex-start;
}
body.mobile-ui .right-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 10px;
  font-size: 9px;
}
body.mobile-ui .right-tab-body {
  overflow: visible;
  min-height: 310px;
  padding: 12px;
}
body.mobile-ui .time-hud,
body.mobile-ui .view-controls,
body.mobile-ui .graph-hint {
  display: none;
}
body.mobile-ui button,
body.mobile-ui .file-btn,
body.mobile-ui .text-input,
body.mobile-ui .select-input {
  min-height: 42px;
}

/* CSS fallback before JS classifies the device. */
@media (max-width: 600px) {
  .mobile-view-menu { display: block; }
  .timeline-v14-workspace { grid-template-rows: minmax(520px, 72dvh) auto; }
  .temporal-area { min-height: 520px; }
  .time-hud, .view-controls { display: none; }
}

/* v22: fixed mobile header/footer editor + maximum scene area */
body.mobile-ui {
  overflow: hidden;
}
body.mobile-ui .app-shell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.mobile-ui .timeline-v14-topbar {
  position: relative;
  top: auto;
  z-index: 30;
}
body.mobile-ui .timeline-v14-workspace {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  padding-bottom: 48px;
  overflow: hidden;
}
body.mobile-ui .temporal-area {
  width: 100%;
  height: 100%;
  min-height: 0;
}
body.mobile-ui .timeline-tabs-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  max-height: min(68dvh, 620px);
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 -8px 28px rgba(0,0,0,.18);
}
body.mobile-ui .right-tabs {
  order: 2;
  position: static;
  top: auto;
  z-index: 2;
  flex: 0 0 48px;
  width: 100%;
  min-height: 48px;
  overflow-x: auto;
  justify-content: flex-start;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  scrollbar-width: none;
}
body.mobile-ui .right-tabs::-webkit-scrollbar { display: none; }
body.mobile-ui .right-tabs button {
  min-height: 48px;
  padding: 6px 10px;
  font-size: 9px;
}
body.mobile-ui .right-tabs button.active {
  box-shadow: inset 0 2px 0 var(--accent);
}
body.mobile-ui .right-tab-body {
  order: 1;
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(68dvh, 620px) - 48px);
  overflow: auto;
  padding: 12px 12px 18px;
  overscroll-behavior: contain;
}
body.mobile-ui.mobile-editor-open .right-tab-body {
  display: block;
}
body.mobile-ui.mobile-editor-open .timeline-tabs-panel {
  max-height: min(68dvh, 620px);
}

/* Keep the footer pattern as a CSS fallback on narrow screens before JS classification. */
@media (max-width: 600px) {
  body:not(.mobile-ui) .timeline-v14-workspace {
    grid-template-rows: minmax(520px, 72dvh) auto;
  }
}

/* v23: storage modes + theme-wide control contrast */
:root {
  --primary-bg: #1f6feb;
  --primary-border: #388bfd;
  --primary-text: #ffffff;
  --danger-bg: transparent;
  --danger-border: #6e2b2b;
  --danger-text: #ffb4b4;
  --focus-ring: #58a6ff;
}
body[data-theme="dark-gray"] {
  --primary-bg: #4a6daa;
  --primary-border: #6f94cd;
  --primary-text: #ffffff;
  --danger-bg: transparent;
  --danger-border: #96534f;
  --danger-text: #ffd0cc;
  --focus-ring: #8ab4f8;
}
body[data-theme="light-gray"] {
  --primary-bg: #315f8d;
  --primary-border: #274f78;
  --primary-text: #ffffff;
  --danger-bg: #f2e5e4;
  --danger-border: #9a4a47;
  --danger-text: #6f2f2d;
  --focus-ring: #315f8d;
}
body[data-theme="light"] {
  --primary-bg: #2563eb;
  --primary-border: #1d4ed8;
  --primary-text: #ffffff;
  --danger-bg: #fff1f1;
  --danger-border: #c92a2a;
  --danger-text: #8f1d1d;
  --focus-ring: #2563eb;
}
body[data-theme="eink"] {
  --primary-bg: #000000;
  --primary-border: #000000;
  --primary-text: #ffffff;
  --danger-bg: #ffffff;
  --danger-border: #000000;
  --danger-text: #000000;
  --focus-ring: #000000;
}

button, .file-btn {
  color: var(--text);
  background: var(--control-bg);
  border-color: var(--line);
}
button:not(:disabled):hover, .file-btn:hover { background: var(--control-hover); }
button:focus-visible, .file-btn:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary,
#temporalAutoRotateBtn.active,
#mobileAutoRotateBtn.active {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--primary-text);
}
button.primary:not(:disabled):hover,
#temporalAutoRotateBtn.active:hover,
#mobileAutoRotateBtn.active:hover { filter: brightness(.94); }
button.secondary {
  background: var(--control-bg);
  border-color: var(--line);
  color: var(--text);
}
button.secondary:not(:disabled):hover { background: var(--control-hover); color: var(--text); }
button.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
button.danger:not(:disabled):hover { filter: brightness(.96); }

.storage-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.storage-status-chip .storage-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 18%, transparent);
}
.storage-status-chip.personal .storage-dot { background: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,.18); }
.storage-status-chip.warning .storage-dot { background: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent); }
.storage-status-chip.busy .storage-dot { background: #f2cc60; }
.storage-summary { display:grid; gap:6px; padding:8px 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }
.storage-summary > div { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; }
.storage-summary span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.storage-summary strong { color:var(--text); font-size:11px; text-align:right; overflow-wrap:anywhere; }
.storage-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.storage-block { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.storage-block h3 { margin:0 0 7px; font-size:11px; color:var(--text); text-transform:uppercase; letter-spacing:.06em; }
.history-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; margin-top:9px; }
.history-row button { padding-inline:8px; }
.storage-conflict { margin-top:12px; padding:10px; border:1px solid var(--danger-border); border-radius:8px; background:color-mix(in srgb, var(--danger-bg) 86%, var(--panel)); color:var(--text); }
.storage-conflict strong { color:var(--danger-text); }
.storage-conflict p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.compact-actions { margin-top:9px; }

/* Remove old theme-specific button overrides that could lower contrast. */
body[data-theme="eink"] #temporalAutoRotateBtn.active,
body[data-theme="eink"] #mobileAutoRotateBtn.active,
body[data-theme="eink"] button.primary { background:var(--primary-bg); border-color:var(--primary-border); color:var(--primary-text); }
body[data-theme="light-gray"] button.secondary,
body[data-theme="light-gray"] button.secondary:hover { background:var(--control-bg); border-color:var(--line); color:var(--text); }

@media (max-width: 600px) {
  body.mobile-ui .storage-status-chip { max-width: 108px; padding-inline:7px; }
  body.mobile-ui #storageStatusLabel { overflow:hidden; text-overflow:ellipsis; }
  body.mobile-ui .history-row { grid-template-columns:1fr 1fr; }
  body.mobile-ui .history-row select { grid-column:1 / -1; }
}

/* v24: Storage/Data is an independent top-bar menu. */
.storage-menu > summary.storage-status-chip {
  min-height: 34px;
  padding: 7px 9px;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.storage-menu[open] > summary.storage-status-chip {
  border-color: var(--primary-border);
  background: var(--control-hover);
  color: var(--text);
}
.storage-menu-panel { width: 330px; }
body.mobile-ui .storage-menu-panel { right: 0; left: auto; }


/* v25: schedule duration, near-plane emphasis, and group icons */
.group-row { grid-template-columns: 10px 28px minmax(0,1fr) auto auto; }
.group-icon-thumb {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  color: var(--muted); background: var(--panel-2);
}
.group-icon-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.group-icon-thumb.empty { font-size: 12px; opacity: .65; }
.proximity-shape {
  border-radius: 50%;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88,166,255,.18);
}
@media (max-width: 600px) {
  .group-row { grid-template-columns: 10px 26px minmax(0,1fr) auto; }
  .group-row > small { display:none; }
  .group-row-actions { grid-column: 3 / -1; flex-wrap: wrap; justify-content:flex-start; }
}

/* v27: Archive remains editable but is intentionally absent from the 3D scene. */
.group-row.archive-group { opacity: .72; }
.group-row.archive-group .group-swatch { background: var(--muted) !important; }

/* v28: unified Add tab + Planned / Actual visual language */
.right-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); }
.add-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 4px;
  margin: 0 0 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
}
.add-type-tabs button {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.add-type-tabs button.active {
  background: var(--control-hover);
  border-color: var(--line);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.add-type-pane { display: none; }
.add-type-pane.active { display: block; }
.actual-shape {
  border-radius: 50%;
  border: 3px double var(--accent);
  background: transparent;
}
body[data-theme="eink"] .actual-shape { border-color: #111; }


/* v29: Group Focus Mode */
.group-focus-exit {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  min-height: 34px;
  max-width: min(70%, 420px);
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(7px);
}
.group-focus-exit:hover { background: var(--tab-hover); }
body[data-theme="eink"] .group-focus-exit {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
  backdrop-filter: none;
}
body.mobile-ui .group-focus-exit {
  top: 8px;
  min-height: 38px;
  max-width: calc(100% - 110px);
  font-size: 10px;
}

/* v33: Memo + reusable Schedule/Actual member labels */
.add-type-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); }
.member-editor {
  margin-top: 12px;
  padding-top: 2px;
}
.member-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px;
  margin-bottom: 4px;
}
.member-mode-tabs button {
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}
.member-mode-tabs button.active {
  background: var(--accent);
  color: var(--primary-text, #ffffff);
  border-color: var(--accent);
}
.member-mode-pane { display: none; }
.member-mode-pane.active { display: block; }
.member-mode-pane .field-label { margin-top: 6px; }
.member-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 7px 0 12px;
  min-height: 0;
}
.member-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
}
.member-chip, .member-chip-remove {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.member-chip { padding: 3px 8px 3px 9px; }
.member-chip-remove {
  width: 26px;
  padding: 2px 6px 3px 4px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  font-size: 13px;
  line-height: 1;
}
.member-chip-wrap:hover { background: var(--control-hover); }
.member-chip-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.memo-shape {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--accent);
  border: 1px solid var(--text);
}
@media (max-width: 420px) {
  .add-type-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; }
  .add-type-tabs button { padding-inline: 4px; font-size: 10px; }
}

.range-input { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.inline-value { float: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* v40: categorized System options */
.system-settings-panel { width: 332px; }
.settings-category {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  overflow: hidden;
}
.settings-category + .settings-category { margin-top: 8px; }
.settings-category > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.settings-category > summary::-webkit-details-marker { display: none; }
.settings-category > summary::after { content: '›'; color: var(--muted); font-size: 16px; line-height: 1; transition: transform .14s ease; }
.settings-category[open] > summary::after { transform: rotate(90deg); }
.settings-category[open] > summary { background: var(--control-hover); border-bottom: 1px solid var(--line); }
.settings-category-body { display: grid; gap: 9px; padding: 10px; }
.settings-category-body .check-row + .check-row { margin-top: 0; }
.system-settings-panel > .settings-category + .settings-category { padding-top: 0; border-top: 1px solid var(--line); }
body[data-theme="eink"] .settings-category { background: #fff; }
@media (max-width: 600px) {
  body.mobile-ui .system-settings-panel { width: min(332px, calc(100vw - 16px)); }
}


/* v46: desktop/tablet editor panels collapse to Unreal-style right-edge vertical tabs. */
body:not(.mobile-ui) .timeline-v14-workspace {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}
body:not(.mobile-ui) .timeline-tabs-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 26;
  display: block;
  width: 384px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
body:not(.mobile-ui) .right-tabs {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 44px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: var(--tab-bg);
  overflow: hidden;
  box-shadow: -5px 8px 22px rgba(0,0,0,.18);
  pointer-events: auto;
}
body:not(.mobile-ui) .right-tabs button {
  min-width: 44px;
  min-height: 74px;
  padding: 9px 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
body:not(.mobile-ui) .right-tabs button:last-child { border-bottom: 0; }
body:not(.mobile-ui) .right-tabs button:hover { background: var(--tab-hover); }
body:not(.mobile-ui) .right-tabs button.active {
  color: var(--text);
  background: var(--tab-active);
  box-shadow: inset 3px 0 0 var(--accent);
}
body:not(.mobile-ui) .right-tab-body {
  position: absolute;
  top: 0;
  right: 44px;
  bottom: 0;
  display: none;
  width: 340px;
  min-height: 0;
  padding: 14px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  box-shadow: -16px 0 38px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  overflow: auto;
  pointer-events: auto;
}
body:not(.mobile-ui).desktop-editor-open .right-tab-body { display: block; }
body[data-theme="eink"]:not(.mobile-ui) .right-tab-body {
  background: #ffffff;
  backdrop-filter: none;
}

/* Smartphone layout intentionally stays on the existing bottom editor/footer model. */
body.mobile-ui .timeline-tabs-panel { pointer-events: auto; }


/* v47: configurable desktop/tablet editor rail + shared View menu. */
.timeline-v14-topbar { position: relative; z-index: 120; }
.system-menu { z-index: 130; }
.system-menu-panel { z-index: 140; }
.mobile-view-menu { display: block; }
.view-controls { display: none !important; }

body:not(.mobile-ui) .timeline-v14-topbar .brand { display: none; }
body:not(.mobile-ui) .topbar-menus { margin-left: auto; }

body:not(.mobile-ui) .timeline-tabs-panel {
  top: 0;
  bottom: 0;
  width: 384px;
  z-index: 40;
}
body:not(.mobile-ui)[data-editor-side="right"] .timeline-tabs-panel { right: 0; left: auto; }
body:not(.mobile-ui)[data-editor-side="left"] .timeline-tabs-panel { left: 0; right: auto; }

body:not(.mobile-ui) .right-tabs {
  top: 0;
  bottom: 0;
  width: 44px;
  height: 100%;
  transform: none;
  padding: 8px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: -5px 0 22px rgba(0,0,0,.18);
  overflow: hidden;
}
body:not(.mobile-ui)[data-editor-side="right"] .right-tabs {
  right: 0;
  left: auto;
  border-left: 1px solid var(--line);
  border-right: 0;
}
body:not(.mobile-ui)[data-editor-side="left"] .right-tabs {
  left: 0;
  right: auto;
  border-right: 1px solid var(--line);
  border-left: 0;
  box-shadow: 5px 0 22px rgba(0,0,0,.18);
}
body:not(.mobile-ui)[data-editor-align="top"] .right-tabs { justify-content: flex-start; }
body:not(.mobile-ui)[data-editor-align="center"] .right-tabs { justify-content: center; }
body:not(.mobile-ui)[data-editor-align="bottom"] .right-tabs { justify-content: flex-end; }

body:not(.mobile-ui) .right-tabs button {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  min-height: 74px;
  border-bottom: 1px solid var(--line);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  direction: ltr;
  transition: background .12s ease, color .12s ease;
}
body:not(.mobile-ui) .right-tabs button[hidden] { display: none !important; }
body:not(.mobile-ui).desktop-editor-open .right-tabs button { direction: rtl; }
body:not(.mobile-ui) .right-tabs button.active { background: var(--tab-active); }
body:not(.mobile-ui)[data-editor-side="right"] .right-tabs button.active { box-shadow: inset 3px 0 0 var(--accent); }
body:not(.mobile-ui)[data-editor-side="left"] .right-tabs button.active { box-shadow: inset -3px 0 0 var(--accent); }

.editor-rail-title {
  display: none;
}
body:not(.mobile-ui) .editor-rail-title {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: block;
  max-height: 42%;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--muted);
  opacity: .62;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
body:not(.mobile-ui)[data-editor-align="bottom"] .editor-rail-title {
  top: 16px;
  bottom: auto;
}

body:not(.mobile-ui) .right-tab-body {
  top: 0;
  bottom: 0;
  width: 340px;
}
body:not(.mobile-ui)[data-editor-side="right"] .right-tab-body {
  right: 44px;
  left: auto;
  border-left: 1px solid var(--line);
  border-right: 0;
  box-shadow: -16px 0 38px rgba(0,0,0,.28);
}
body:not(.mobile-ui)[data-editor-side="left"] .right-tab-body {
  left: 44px;
  right: auto;
  border-right: 1px solid var(--line);
  border-left: 0;
  box-shadow: 16px 0 38px rgba(0,0,0,.28);
}

/* Mobile keeps the established footer tab layout. */
body.mobile-ui .editor-rail-title { display: none; }
body.mobile-ui .right-tabs { display: flex; flex-direction: row; }
body.mobile-ui .right-tabs button[hidden] { display: none !important; }

/* Ensure top-bar menus always paint above the editor overlay. */
.timeline-v14-topbar,
.timeline-v14-topbar .topbar-menus,
.timeline-v14-topbar .system-menu,
.timeline-v14-topbar .system-menu-panel { isolation: auto; }


/* v47: flip only the vertical tab label when its overlay is open. */
body:not(.mobile-ui) .right-tabs button {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  direction: ltr;
}
body:not(.mobile-ui) .editor-tab-label {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  direction: ltr;
  transform: rotate(0deg);
  transition: transform .14s ease;
}
body:not(.mobile-ui).desktop-editor-open .right-tabs button { direction: ltr; }
body:not(.mobile-ui).desktop-editor-open .editor-tab-label { transform: rotate(180deg); }
body.mobile-ui .editor-tab-label {
  writing-mode: horizontal-tb;
  transform: none !important;
}


/* v48: owned editor rail, per-tab orientation, larger vertical buttons, credits. */
:root { --editor-rail-width: 52px; --editor-pane-width: 340px; }

body:not(.mobile-ui) .timeline-v14-topbar { justify-content: center; }
body:not(.mobile-ui) .topbar-menus { margin: 0 auto; justify-content: center; }

body:not(.mobile-ui) .timeline-v14-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--editor-rail-width);
  grid-template-areas: "scene rail";
}
body:not(.mobile-ui)[data-editor-side="left"] .timeline-v14-workspace {
  grid-template-columns: var(--editor-rail-width) minmax(0,1fr);
  grid-template-areas: "rail scene";
}
body:not(.mobile-ui) .temporal-area { grid-area: scene; }
body:not(.mobile-ui) .timeline-tabs-panel {
  grid-area: rail;
  position: relative;
  inset: auto;
  width: var(--editor-rail-width);
  min-width: var(--editor-rail-width);
  height: 100%;
  z-index: 40;
  overflow: visible;
  pointer-events: none;
}
body:not(.mobile-ui) .right-tabs {
  position: relative;
  inset: auto;
  width: var(--editor-rail-width);
  min-width: var(--editor-rail-width);
  height: 100%;
  padding: 8px 0;
  transform: none;
  border-radius: 0;
  pointer-events: auto;
}
body:not(.mobile-ui)[data-editor-side="right"] .right-tabs { right:auto; }
body:not(.mobile-ui)[data-editor-side="left"] .right-tabs { left:auto; }

body:not(.mobile-ui) .right-tabs button[data-tab] {
  width: var(--editor-rail-width);
  min-width: var(--editor-rail-width);
  min-height: 96px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  writing-mode: horizontal-tb;
}
body:not(.mobile-ui) .editor-tab-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
body:not(.mobile-ui) .right-tabs button.active .editor-tab-icon { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
body:not(.mobile-ui) .editor-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(0deg);
}
/* Only the currently-open tab reads bottom-to-top. */
body:not(.mobile-ui).desktop-editor-open .right-tabs button.active .editor-tab-label { transform: rotate(180deg); }
body:not(.mobile-ui).desktop-editor-open .right-tabs button:not(.active) .editor-tab-label { transform: rotate(0deg); }

body:not(.mobile-ui) .right-tab-body {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--editor-pane-width);
  z-index: 4;
}
body:not(.mobile-ui)[data-editor-side="right"] .right-tab-body {
  right: var(--editor-rail-width);
  left: auto;
}
body:not(.mobile-ui)[data-editor-side="left"] .right-tab-body {
  left: var(--editor-rail-width);
  right: auto;
}

/* Rail title doubles as the Credits trigger. */
body:not(.mobile-ui) .editor-rail-title {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  display: block;
  max-height: 42%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--muted);
  opacity: .62;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
body:not(.mobile-ui) .editor-rail-title:hover { opacity: 1; color: var(--text); }
body:not(.mobile-ui)[data-editor-align="bottom"] .editor-rail-title { top:14px; bottom:auto; }

.credits-dialog { border:0; padding:0; background:transparent; color:var(--text); }
.credits-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(4px); }
.credits-card { min-width:min(480px,calc(100vw - 32px)); }
.credits-kicker { margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.16em; }
.credits-grid { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 18px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.credits-grid span { color:var(--muted); font-size:11px; }
.credits-grid strong { color:var(--text); font-size:12px; font-weight:700; text-align:right; }
.credits-note { margin:12px 0 0; text-align:center; }

/* Mobile keeps the established bottom editor presentation; icons sit beside labels. */
body.mobile-ui .editor-tab-icon { display:inline-block; margin-right:5px; }
body.mobile-ui .right-tabs button[data-tab] { min-height:0; }
body.mobile-ui .editor-tab-label { writing-mode:horizontal-tb; transform:none !important; }

/* Specificity guard: the title is a button, but must not inherit editor-tab sizing. */
body:not(.mobile-ui) .right-tabs .editor-rail-title {
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  display: block;
  background: transparent;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}


/* v49: header/mesh Time Circuit placement, taller editor tabs, two-way Schedule kind tabs. */
.header-time-circuit {
  --time-circuit-color: #99f6e4;
  --time-circuit-glow: #2dd4bf;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 176px;
  padding: 6px 9px 5px;
  border: 1px solid color-mix(in srgb, var(--time-circuit-glow) 42%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 72%, #000 28%);
  color: var(--time-circuit-color);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--time-circuit-glow) 8%, transparent);
}
.header-time-circuit[hidden] { display: none !important; }
.header-time-circuit-month {
  font: 700 italic 11px/1 "TM-DSEG14", ui-monospace, monospace;
}
.header-time-circuit-tail {
  font: 700 italic 11px/1 "TM-DSEG7", ui-monospace, monospace;
}
body:not(.mobile-ui) .header-time-circuit {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
body.mobile-ui.header-time-circuit-visible .timeline-v14-topbar .brand { display: none; }
body.mobile-ui .header-time-circuit {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 148px;
  padding: 6px 7px 5px;
  gap: 2px;
}
body.mobile-ui .header-time-circuit-month,
body.mobile-ui .header-time-circuit-tail { font-size: 8px; }
body.mobile-ui .topbar-menus { margin-left: auto; }

/* More breathing room before the icon and after the vertical label. */
body:not(.mobile-ui) .right-tabs button[data-tab] {
  min-height: 112px;
  padding: 15px 4px 17px;
  gap: 8px;
}

/* Schedule alone owns the Plan / Actual choice. The old four-column rule left empty space. */
#scheduleKindTabs { grid-template-columns: repeat(2, minmax(0,1fr)); }
#scheduleKindTabs[hidden] { display: none !important; }

/* V49 refinement: the desktop Header placement is a real header layout slot, not an overlay. */
body:not(.mobile-ui) .timeline-v14-topbar {
  display: grid;
  grid-template-columns: minmax(190px,1fr) auto minmax(190px,1fr);
  align-items: center;
}
body:not(.mobile-ui) .header-time-circuit {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
body:not(.mobile-ui) .topbar-menus {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}


/* V50: editor add icons mirror the 3D item glyph language. */
body:not(.mobile-ui) .editor-tab-icon.editor-type-icon {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
body:not(.mobile-ui) .editor-tab-icon.schedule-icon { border-radius: 50%; }
body:not(.mobile-ui) .editor-tab-icon.task-icon { border-radius: 2px; }
body:not(.mobile-ui) .editor-tab-icon.memo-icon { border-radius: 1px; transform: rotate(45deg) scale(.82); }
body:not(.mobile-ui) .right-tabs button.active .editor-tab-icon.memo-icon { transform: rotate(45deg) scale(.82); }
body.mobile-ui .editor-tab-icon.editor-type-icon {
  display:inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border: 1.7px solid currentColor;
  background: transparent;
  vertical-align: -1px;
}
body.mobile-ui .editor-tab-icon.schedule-icon { border-radius: 50%; }
body.mobile-ui .editor-tab-icon.task-icon { border-radius: 1px; }
body.mobile-ui .editor-tab-icon.memo-icon { transform: rotate(45deg) scale(.82); margin-left:2px; margin-right:9px; }


/* V52: Inspector is read-only by default; editing/relation/destructive controls appear only after Edit. */
.detail-block-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
#inspectorEditFields[hidden], #inspectorRelationBlock[hidden], #inspectorDeleteBlock[hidden] { display:none !important; }

/* V53: prevent accidental drag-selection in the app chrome/canvas. Editable controls still allow selection. */
html, body, .app-shell { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
textarea.text-input { resize: vertical; min-height: 68px; line-height: 1.45; }
.detail-description-view {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* V53: Time Circuit is part of the centered header menu sequence: TimeCircuit, Storage, System, View, Help. */
.header-time-circuit {
  min-width: 0;
  width: max-content;
  padding-right: 7px;
  gap: 2px;
  flex: 0 0 auto;
  letter-spacing: 0;
}
.header-time-circuit-month,
.header-time-circuit-tail { display: inline-block; margin: 0; padding: 0; }
body:not(.mobile-ui) .topbar-menus .header-time-circuit {
  position: static;
  inset: auto;
  transform: none;
  justify-self: auto;
}
body:not(.mobile-ui) .timeline-v14-topbar {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
body:not(.mobile-ui) .topbar-menus { grid-column: 2; grid-row: 1; }
body.mobile-ui .topbar-menus { flex-wrap: nowrap; }
body.mobile-ui .header-time-circuit { max-width: 136px; padding-right: 5px; }

.help-menu-panel { width: min(320px, calc(100vw - 24px)); }
.help-grid { display: grid; gap: 8px; }
.help-grid > div { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.help-grid strong { font-size: 11px; }
.help-grid span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.app-shell { -webkit-touch-callout: none; }
input, textarea { -webkit-touch-callout: default; }


/* v55: spiral Z scale, editor rail separator, and roomier Group management. */
.view-cycle-scale-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  align-items:end;
}
.inline-setting-value { float:right; color:var(--text); font-variant-numeric:tabular-nums; }
.range-input { width:100%; margin-top:7px; accent-color:var(--accent); }
.view-scale-note { margin-top:7px; }
@media (max-width: 440px) { .view-cycle-scale-row { grid-template-columns:1fr; } }

body:not(.mobile-ui) #inspectorTabButton:not([hidden]),
body:not(.mobile-ui) #inspectorTabButton[hidden] + button {
  border-top:1px solid var(--line);
}

.groups-pane > h2 { margin-bottom:10px; }
.group-panel-block {
  margin:0 0 12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 88%, transparent);
}
.group-panel-heading { display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:8px; }
.group-panel-heading strong, .group-list-heading strong { font-size:11px; color:var(--text); }
.group-panel-heading span, .group-list-heading span { font-size:9px; color:var(--muted); }
.group-tools-block > summary { cursor:pointer; color:var(--text); font-size:11px; font-weight:800; }
.group-tools-body { padding-top:9px; }
.group-list-heading { display:flex; justify-content:space-between; align-items:baseline; padding:0 2px 7px; }
.group-card-list { display:grid; gap:8px; }
.group-card {
  display:block;
  padding:9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 72%, transparent);
}
.group-card-main { display:grid; grid-template-columns:10px 30px minmax(0,1fr); gap:8px; align-items:center; }
.group-card-text { min-width:0; display:grid; gap:2px; }
.group-card-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text); }
.group-card-text small { color:var(--muted); font-size:9px; }
.group-card-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:5px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.group-card-actions button { padding:4px 7px; font-size:9px; }
.group-card-actions .subtle-danger { margin-left:auto; }
.group-card.archive-group { opacity:.72; }


/* V55: Groups layout hardening + reliable first-tab separator. */
body:not(.mobile-ui) .right-tabs > button[data-tab] { border-top: 0; }
body:not(.mobile-ui) .right-tabs > #inspectorTabButton:not([hidden]),
body:not(.mobile-ui) .right-tabs > #inspectorTabButton[hidden] + button[data-tab="groups"] {
  border-top: 1px solid var(--line);
}

.groups-pane { min-width: 0; }
.groups-pane > h2 { margin: 0 0 12px; }
.groups-pane .group-panel-block,
.groups-pane .group-list-heading,
.groups-pane .group-card-list { width: 100%; box-sizing: border-box; }
.group-panel-block {
  display: block;
  min-width: 0;
  margin: 0 0 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
}
.group-panel-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 10px;
  align-items: baseline;
  margin-bottom: 9px;
}
.group-panel-heading strong,
.group-list-heading strong { font-size: 11px; color: var(--text); }
.group-panel-heading span,
.group-list-heading span { font-size: 9px; color: var(--muted); }
.group-create-block .inline-add { width: 100%; grid-template-columns: minmax(0,1fr) auto; }
.group-create-block .inline-add .text-input { width: 100%; min-width: 0; box-sizing: border-box; }
.group-tools-block > summary { cursor: pointer; color: var(--text); font-size: 11px; font-weight: 800; }
.group-tools-body { padding-top: 9px; }
.group-list-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 2px 2px 7px;
}
.group-card-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 0; }
.group-card {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  color: var(--text);
}
.group-card-main {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 10px 28px minmax(0,1fr);
  gap: 8px;
  align-items: center;
}
.group-card-text { min-width: 0; display: grid; gap: 2px; }
.group-card-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text); }
.group-card-text small { overflow-wrap: anywhere; color: var(--muted); font-size: 9px; }
.group-card-actions {
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.group-card-actions button { flex: 0 0 auto; padding: 4px 7px; font-size: 9px; }
.group-card-actions .subtle-danger { margin-left: auto; }
.group-card.archive-group { opacity: .72; }

/* V56: compact group management, external sources, semantic header icons, glass editor panel. */
.menu-icon {
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:currentColor;
  line-height:1;
}
.menu-icon svg { width:15px; height:15px; fill:currentColor; display:block; }
.menu-icon.help-icon { font-size:15px; font-weight:900; font-family:system-ui,sans-serif; }
.system-menu > summary { gap:6px; }

.group-card-main {
  grid-template-columns: 10px 28px minmax(0,1fr) auto;
}
.group-card-edit-toggle {
  align-self:center;
  justify-self:end;
  padding:4px 7px;
  min-width:42px;
  font-size:9px;
}
.group-card-actions[hidden] { display:none !important; }
.group-card-actions { animation: group-edit-open .12s ease-out; }
@keyframes group-edit-open { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:none; } }

.external-sources-pane { min-width:0; }
.external-panel-block {
  display:block;
  min-width:0;
  margin:0 0 12px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 82%, transparent);
}
.external-source-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:4px 0 8px;
}
.external-source-toolbar > div { display:flex; align-items:baseline; gap:7px; }
.external-source-toolbar strong { font-size:11px; }
.external-source-toolbar span { font-size:9px; }
.external-source-list { display:grid; gap:8px; }
.external-source-card {
  display:block;
  min-width:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.external-source-card-head {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.external-source-glyph {
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius:50%;
  color:var(--text);
  background:color-mix(in srgb, var(--accent) 15%, transparent);
  font-size:11px;
  font-weight:900;
}
.external-source-card-text { min-width:0; display:grid; gap:2px; }
.external-source-card-text strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.external-source-card-text small { color:var(--muted); font-size:9px; line-height:1.35; overflow-wrap:anywhere; }
.external-visible-toggle { color:var(--muted); font-size:9px; white-space:nowrap; }
.external-source-card-actions {
  display:flex;
  gap:5px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.external-source-card-actions button { padding:4px 7px; font-size:9px; }
.external-source-card-actions .subtle-danger { margin-left:auto; }
.external-empty { padding:10px; border:1px dashed var(--line); border-radius:8px; }
body:not(.mobile-ui) .editor-tab-icon.external-source-tab-icon { font-size:14px; }

/* Experimental glass treatment: panel is still legible but lets the 3D scene breathe through it. */
body:not(.mobile-ui) .right-tab-body {
  background:color-mix(in srgb, var(--panel) 62%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
  backdrop-filter:blur(12px) saturate(1.06);
  box-shadow:-14px 0 34px rgba(0,0,0,.24);
}
body:not(.mobile-ui)[data-editor-side="left"] .right-tab-body { box-shadow:14px 0 34px rgba(0,0,0,.24); }
body.mobile-ui .right-tab-body {
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
  backdrop-filter:blur(10px) saturate(1.04);
}
body[data-theme="eink"] .right-tab-body { background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* V57: external source identity and lighter glass panel. */
.external-source-glyph { font-family:system-ui,sans-serif; box-shadow:inset 0 3px 0 color-mix(in srgb, var(--accent) 72%, transparent); }

/* V58: External Sources use the same compact view/edit pattern as Groups. */
.external-source-card-main {
  display:grid;
  width:100%;
  min-width:0;
  grid-template-columns:28px minmax(0,1fr) auto auto;
  gap:6px;
  align-items:center;
}
.external-source-icon-thumb {
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:6px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
}
.external-source-icon-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.external-source-icon-thumb.empty { background:color-mix(in srgb, var(--panel-2) 55%, transparent); }
.external-source-refresh,
.external-source-edit-toggle { padding:4px 7px; min-width:44px; font-size:9px; }
.external-source-card-actions {
  display:flex;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
  animation:group-edit-open .12s ease-out;
}
.external-source-card-actions[hidden] { display:none !important; }
.external-source-card-actions button { flex:0 0 auto; padding:4px 7px; font-size:9px; }
.external-source-card-actions .external-visible-toggle { flex:1 0 100%; margin-bottom:2px; }
.external-source-card-actions .subtle-danger { margin-left:auto; }


/* V60: header focus shortcuts + text-cache test support. */
body:not(.mobile-ui) .header-focus-shortcuts {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  align-self:center;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0;
  scrollbar-width:none;
}
body:not(.mobile-ui) .header-focus-shortcuts::-webkit-scrollbar { display:none; }
body.mobile-ui .header-focus-shortcuts { display:none !important; }
.header-focus-shortcuts[hidden] { display:none !important; }
.header-focus-shortcut {
  flex:0 0 auto;
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:3px 6px;
  border-radius:7px;
  background:color-mix(in srgb, var(--panel-2) 76%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  color:var(--muted);
}
.header-focus-shortcut.external { border-style:dashed; }
.header-focus-shortcut:hover,
.header-focus-shortcut.active {
  color:var(--text);
  border-color:color-mix(in srgb, var(--accent) 72%, var(--line));
  background:color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}
.header-focus-shortcut.active { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent); }
.header-focus-shortcut img {
  width:22px;
  height:22px;
  object-fit:cover;
  border-radius:4px;
  display:block;
}
.header-focus-shortcut.text-only {
  max-width:108px;
  padding-inline:8px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-focus-shortcut.text-only span { overflow:hidden; text-overflow:ellipsis; }


/* V60: right-aligned header menus, larger focus shortcuts, scrollable narrow header, and scene footer. */
.timeline-v14-topbar {
  display:flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:10px;
  min-width:0;
}
.timeline-v14-topbar .brand { display:none !important; }
.header-focus-shortcuts {
  order:1;
  flex:0 1 auto;
  min-width:0;
  display:flex !important;
  align-items:center;
  gap:8px;
  overflow:visible;
  padding:0 2px;
}
.header-focus-shortcuts[hidden] { display:none !important; }
.topbar-menus {
  order:2;
  flex:0 0 auto;
  margin-left:auto !important;
  display:flex;
  align-items:center;
  justify-content:flex-end !important;
  gap:7px;
  white-space:nowrap;
}
#headerTimeCircuit { order:1; }
#mobileViewMenu { order:2; }
#systemMenu { order:3; }
#helpMenu { order:4; }
.topbar-menu-spacer { order:5; display:block; width:10px; height:1px; flex:0 0 10px; }
#storageMenu { order:6; }
.header-focus-shortcut,
body:not(.mobile-ui) .header-focus-shortcut {
  flex:0 0 auto;
  width:auto;
  min-width:0;
  height:38px;
  padding:2px 3px;
  border:0 !important;
  border-radius:4px;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--muted);
}
.header-focus-shortcut.external { border:0 !important; }
.header-focus-shortcut:hover { color:var(--text); background:color-mix(in srgb,var(--accent) 8%,transparent) !important; }
.header-focus-shortcut.active { color:var(--text); background:transparent !important; box-shadow:inset 0 -2px 0 var(--accent) !important; }
.header-focus-shortcut img,
body:not(.mobile-ui) .header-focus-shortcut img { width:32px; height:32px; border-radius:5px; object-fit:contain; }
.header-focus-shortcut.text-only,
body:not(.mobile-ui) .header-focus-shortcut.text-only { max-width:128px; height:34px; padding:3px 5px; font-size:10px; font-weight:800; }
body.mobile-ui .header-focus-shortcuts { display:flex !important; }
body.mobile-ui .header-focus-shortcut img { width:29px; height:29px; }
body.mobile-ui .header-focus-shortcut { height:34px; }
.timeline-upcoming-footer {
  grid-area:footer;
  min-width:0;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 10px;
  background:var(--panel);
  border-top:1px solid var(--line);
  color:var(--text);
  z-index:18;
  overflow:hidden;
}
.timeline-upcoming-title { flex:0 0 auto; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.timeline-upcoming-track { min-width:0; display:flex; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.timeline-upcoming-track::-webkit-scrollbar { display:none; }
.timeline-upcoming-arrow { flex:0 0 auto; color:var(--muted); opacity:.68; }
.timeline-upcoming-item { flex:0 0 auto; max-width:240px; min-height:22px; padding:2px 3px; border:0; background:transparent; color:var(--text); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timeline-upcoming-item:hover { color:var(--accent); border:0; }
.timeline-upcoming-item.past { color:var(--muted); }
body:not(.mobile-ui) .timeline-v14-workspace {
  grid-template-columns:minmax(0,1fr) var(--editor-rail-width);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"scene rail" "footer rail";
}
body:not(.mobile-ui)[data-editor-side="left"] .timeline-v14-workspace {
  grid-template-columns:var(--editor-rail-width) minmax(0,1fr);
  grid-template-areas:"rail scene" "rail footer";
}
body:not(.mobile-ui) .timeline-tabs-panel { grid-area:rail; }
body:not(.mobile-ui) .temporal-area { grid-area:scene; }
@media (max-width: 900px) {
  .header-focus-shortcuts { flex:0 0 auto; }
  .topbar-menus { margin-left:8px !important; }
  .timeline-v14-topbar .system-menu-panel { position:fixed; top:62px; right:8px; left:auto; max-height:calc(100dvh - 74px); z-index:200; }
}
body.mobile-ui .timeline-v14-workspace { display:flex; flex-direction:column; padding-bottom:48px; }
body.mobile-ui .temporal-area { flex:1 1 auto; width:100%; height:auto; min-height:0; }
body.mobile-ui .timeline-upcoming-footer { flex:0 0 34px; width:100%; }
.weather-source-add { margin-top:10px; }
.external-source-note { font-size:10px; margin-top:6px; }

/* V61: header scrolling is isolated to the header strip; popup menus stay viewport-local. */
.timeline-v14-topbar {
  overflow: visible !important;
}
.topbar-scroll-strip {
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.topbar-scroll-strip::-webkit-scrollbar { display:none; }
.header-focus-shortcuts { flex:0 0 auto !important; min-width:max-content; }
.topbar-menus { flex:0 0 auto !important; min-width:max-content; margin-left:auto !important; }
.system-menu-panel,
body.mobile-ui .system-menu-panel {
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
@media (max-width: 900px) {
  .timeline-v14-topbar { overflow:visible !important; }
  .topbar-scroll-strip { overflow-x:auto; overflow-y:visible; }
  .topbar-menus { margin-left:8px !important; }
  .timeline-v14-topbar .system-menu-panel {
    position:fixed;
    top:62px;
    right:8px;
    left:auto;
    width:min(310px,calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 74px);
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:240;
  }
}

/* V61: footer becomes a readable schedule navigator. */
.timeline-upcoming-footer { min-height:38px; padding:6px 11px; }
.timeline-upcoming-item { min-height:26px; font-size:12px; font-weight:750; max-width:340px; padding:3px 5px; }
.timeline-upcoming-item.past { opacity:.62; }
.timeline-upcoming-arrow { font-size:12px; }

/* V61: Weather source sampling option. */
.external-weather-interval {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.external-weather-interval .select-input { width:auto; min-width:104px; }
@media (max-width: 1200px) {
  .timeline-v14-topbar .system-menu-panel {
    position:fixed;
    top:62px;
    right:8px;
    left:auto;
    width:min(310px,calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    max-height:calc(100dvh - 74px);
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:240;
  }
}
.system-menu-panel { white-space:normal !important; }


/* V62: one-shot APNG opening and spiral-aligned Weather labels. */
.opening-overlay {
  --opening-logo-base:brightness(1);
  --opening-panel:#0d1117;
  --opening-glow:rgba(255,255,255,.78);
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--opening-panel);
  opacity:1;
  pointer-events:all;
  transition:opacity .68s cubic-bezier(.22,.75,.25,1), visibility .68s linear;
}
.opening-logo {
  position:relative;
  z-index:2;
  width:clamp(112px,18vw,180px);
  height:auto;
  display:block;
  filter:var(--opening-logo-base);
  transform:scale(1);
  transform-origin:center;
  will-change:filter,transform,opacity;
}
.opening-glow {
  position:absolute;
  z-index:1;
  width:clamp(100px,15vw,160px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,var(--opening-glow) 0%,rgba(255,255,255,.12) 34%,transparent 72%);
  opacity:0;
  transform:scale(.45);
  pointer-events:none;
}
body[data-theme="dark-gray"] .opening-overlay { --opening-panel:#171717; }
body[data-theme="light"] .opening-overlay,body[data-theme="light-gray"] .opening-overlay,body[data-theme="eink"] .opening-overlay { --opening-logo-base:invert(1); }
body[data-theme="light"] .opening-overlay { --opening-panel:#f7f8fa; --opening-glow:rgba(17,24,39,.52); }
body[data-theme="light-gray"] .opening-overlay { --opening-panel:#edf0f2; --opening-glow:rgba(32,38,44,.48); }
body[data-theme="eink"] .opening-overlay { --opening-panel:#fff; --opening-glow:rgba(0,0,0,.42); }
.opening-overlay.is-ending { opacity:0; pointer-events:none; }
.opening-overlay.is-ending .opening-logo { animation:opening-logo-bloom .68s cubic-bezier(.16,.84,.24,1) both; }
.opening-overlay.is-ending .opening-glow { animation:opening-glow-bloom .68s ease-out both; }
@keyframes opening-logo-bloom {
  0% { transform:scale(1); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 0 var(--opening-glow)); }
  42% { transform:scale(1.075); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 20px var(--opening-glow)) drop-shadow(0 0 42px var(--opening-glow)); }
  100% { transform:scale(1.13); opacity:0; filter:var(--opening-logo-base) drop-shadow(0 0 34px var(--opening-glow)); }
}
@keyframes opening-glow-bloom {
  0% { opacity:0; transform:scale(.45); }
  38% { opacity:.82; }
  100% { opacity:0; transform:scale(2.25); }
}

/* V63: opening reliability, compact mobile editor rail, focused Weather overlay. */
html.opening-disabled .opening-overlay { display:none !important; }
.opening-overlay {
  /* Visual-only: never let the loading treatment steal menu/canvas input. */
  pointer-events:none !important;
  transition:none;
}
.opening-overlay.is-blooming .opening-logo {
  animation:opening-logo-bloom-v63 .72s cubic-bezier(.16,.84,.24,1) both;
}
.opening-overlay.is-blooming .opening-glow {
  animation:opening-glow-bloom-v63 .72s ease-out both;
}
.opening-overlay.is-fading {
  opacity:0;
  transition:opacity .56s cubic-bezier(.22,.75,.25,1);
}
@keyframes opening-logo-bloom-v63 {
  0% { transform:scale(1); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 0 var(--opening-glow)); }
  48% { transform:scale(1.085); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 24px var(--opening-glow)) drop-shadow(0 0 48px var(--opening-glow)); }
  100% { transform:scale(1.12); opacity:.94; filter:var(--opening-logo-base) drop-shadow(0 0 34px var(--opening-glow)); }
}
@keyframes opening-glow-bloom-v63 {
  0% { opacity:0; transform:scale(.42); }
  48% { opacity:.9; transform:scale(1.15); }
  100% { opacity:.34; transform:scale(2.25); }
}
/* Opening Animation is an explicit app setting, so OS reduced-motion no longer silently changes this sequence. */
@media (prefers-reduced-motion:reduce) {
  .opening-overlay.is-blooming .opening-logo { animation:opening-logo-bloom-v63 .72s cubic-bezier(.16,.84,.24,1) both !important; }
  .opening-overlay.is-blooming .opening-glow { animation:opening-glow-bloom-v63 .72s ease-out both !important; }
  .opening-overlay.is-fading { transition:opacity .56s cubic-bezier(.22,.75,.25,1) !important; }
}

body.mobile-ui .right-tabs {
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
}
body.mobile-ui .right-tabs > button[data-tab] {
  flex:1 0 60px;
  min-width:60px;
  padding-inline:3px;
}
body.mobile-ui .right-tabs > button[data-tab] .editor-tab-label {
  white-space:normal;
  line-height:1.08;
}

/* V64: restore the richer V62 opening bloom while keeping the overlay input-transparent. */
.opening-overlay {
  pointer-events:none !important;
  transition:opacity .68s cubic-bezier(.22,.75,.25,1), visibility .68s linear !important;
}
.opening-overlay.is-ending { opacity:0; pointer-events:none !important; }
.opening-overlay.is-ending .opening-logo {
  animation:opening-logo-bloom-v64 .68s cubic-bezier(.16,.84,.24,1) both !important;
}
.opening-overlay.is-ending .opening-glow {
  animation:opening-glow-bloom-v64 .68s ease-out both !important;
}
@keyframes opening-logo-bloom-v64 {
  0% { transform:scale(1); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 0 var(--opening-glow)); }
  42% { transform:scale(1.075); opacity:1; filter:var(--opening-logo-base) drop-shadow(0 0 20px var(--opening-glow)) drop-shadow(0 0 42px var(--opening-glow)); }
  100% { transform:scale(1.13); opacity:0; filter:var(--opening-logo-base) drop-shadow(0 0 34px var(--opening-glow)); }
}
@keyframes opening-glow-bloom-v64 {
  0% { opacity:0; transform:scale(.45); }
  38% { opacity:.82; }
  100% { opacity:0; transform:scale(2.25); }
}
@media (prefers-reduced-motion:reduce) {
  .opening-overlay { transition:opacity .68s cubic-bezier(.22,.75,.25,1), visibility .68s linear !important; }
  .opening-overlay.is-ending .opening-logo { animation:opening-logo-bloom-v64 .68s cubic-bezier(.16,.84,.24,1) both !important; }
  .opening-overlay.is-ending .opening-glow { animation:opening-glow-bloom-v64 .68s ease-out both !important; }
}

/* V64: header strip may scroll, but popup panels live in viewport coordinates and cannot be clipped by it. */
.topbar-scroll-strip {
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
.timeline-v14-topbar .system-menu-panel {
  position:fixed !important;
  right:auto !important;
  z-index:400 !important;
  white-space:normal !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

/* Group/External visibility is independent from shortcut accessibility. */
.group-card-actions .external-visible-toggle,
.external-source-card-actions .external-visible-toggle { flex:1 0 100%; }


/* V65: stacked Task + Schedule footer rows. */
.timeline-task-footer { grid-area:taskfooter; }
.timeline-schedule-footer { grid-area:schedulefooter; }
body:not(.mobile-ui) .timeline-v14-workspace {
  grid-template-rows:minmax(0,1fr) auto auto;
  grid-template-areas:"scene rail" "taskfooter rail" "schedulefooter rail";
}
body:not(.mobile-ui)[data-editor-side="left"] .timeline-v14-workspace {
  grid-template-areas:"rail scene" "rail taskfooter" "rail schedulefooter";
}
body.mobile-ui .timeline-task-footer,
body.mobile-ui .timeline-schedule-footer { flex:0 0 38px; width:100%; }
.timeline-task-footer .timeline-upcoming-item.doing { font-weight:900; }


/* V67: pointer/touch group reordering. */
.group-card-main { grid-template-columns: 24px 10px 28px minmax(0,1fr) auto; }
.group-drag-handle {
  appearance:none; border:0; background:transparent; color:var(--muted);
  width:24px; height:30px; padding:0; margin:0; display:grid; place-items:center;
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  font-size:18px; line-height:1; border-radius:6px;
}
.group-drag-handle:hover { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.group-drag-handle:active, .group-card-dragging .group-drag-handle { cursor:grabbing; color:var(--accent); }
.group-card-dragging { opacity:.68; outline:1px solid color-mix(in srgb,var(--accent) 70%,transparent); box-shadow:0 8px 28px rgba(0,0,0,.22); }
.group-list-reordering .group-card { transition:transform .08s ease, opacity .08s ease; }

/* V67: Azure DevOps Entra connection panel. */
.azure-auth-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 9px;
  padding:7px 8px;
  border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
  border-radius:7px;
  background:color-mix(in srgb,var(--panel-2) 62%,transparent);
}
.azure-auth-row > span { min-width:0; line-height:1.35; }
.azure-source-add .external-source-note { margin-top:7px; }
.group-order-note { margin:-2px 2px 7px; font-size:9px; }

/* V74: temporary Azure DevOps diagnostics. */
.external-source-card.azure-source-card .external-source-card-main {
  grid-template-columns:28px minmax(0,1fr) auto auto auto;
}
.external-source-debug { padding:4px 7px; min-width:44px; font-size:9px; }
.azure-debug-panel {
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb, var(--line) 72%, transparent);
  min-width:0;
}
.azure-debug-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.azure-debug-head strong { font-size:10px; }
.azure-debug-head button { padding:4px 7px; font-size:9px; }
.azure-debug-output {
  margin:0;
  max-height:310px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  user-select:text;
  -webkit-user-select:text;
  font:9px/1.45 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  color:var(--text);
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius:6px;
  padding:7px;
}
@media (max-width:720px) {
  .external-source-card.azure-source-card .external-source-card-main { grid-template-columns:28px minmax(0,1fr) auto auto; }
  .external-source-card.azure-source-card .external-source-edit-toggle { grid-column:3; }
  .external-source-card.azure-source-card .external-source-debug { grid-column:4; grid-row:2; }
}

/* V81: compact External Source add flow + Azure branch controls. */
.external-add-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 7px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.external-add-heading > span { font-size:9px; text-align:right; }
.external-add-card {
  margin:7px 0;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 60%, transparent);
  overflow:hidden;
}
.external-add-card > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.external-add-card > summary::-webkit-details-marker { display:none; }
.external-add-card > summary::after { content:'+'; font-size:15px; line-height:1; color:var(--muted); }
.external-add-card[open] > summary::after { content:'−'; }
.external-add-card > summary span { color:var(--muted); font-size:9px; text-align:right; }
.external-add-card-body { padding:0 10px 10px; }
.azure-branch-add-row { display:flex; align-items:flex-end; gap:7px; }
.azure-branch-field { flex:1 1 auto; min-width:0; }
.azure-load-branches { flex:0 0 auto; margin-bottom:1px; }
.external-azure-branch-control {
  display:flex;
  align-items:center;
  gap:7px;
  flex:1 0 100%;
  margin-top:4px;
}
.external-azure-branch-control > span { min-width:42px; color:var(--muted); font-size:9px; }
.external-azure-branch-control .select-input { flex:1 1 auto; min-width:0; }
.external-azure-branch-control button { flex:0 0 auto; }
.external-azure-branch-note { flex:1 0 100%; font-size:9px; color:var(--muted); margin-top:-1px; }

@media (max-width: 600px) {
  .azure-branch-add-row { align-items:stretch; flex-direction:column; gap:5px; }
  .external-add-card > summary span { max-width:52%; }
  .external-azure-branch-control { align-items:stretch; flex-wrap:wrap; }
  .external-azure-branch-control > span { flex:1 0 100%; }
  .external-azure-branch-control .select-input { flex:1 1 65%; }
}
/* V81: diagnostics no longer changes the compact Azure source-card grid. */
.external-source-card.azure-source-card .external-source-card-main { grid-template-columns:28px minmax(0,1fr) auto auto; }
@media (max-width:720px) {
  .external-source-card.azure-source-card .external-source-card-main { grid-template-columns:28px minmax(0,1fr) auto auto; }
  .external-source-card.azure-source-card .external-source-edit-toggle { grid-column:auto; }
  .external-source-card.azure-source-card .external-source-debug { grid-column:auto; grid-row:auto; }
}

/* V84: robust pointer/touch list reordering + focused shortcut glow. */
.group-drag-handle,
.external-drag-handle {
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  width:24px;
  height:30px;
  padding:0;
  margin:0;
  display:grid;
  place-items:center;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-size:18px;
  line-height:1;
  border-radius:6px;
  flex:0 0 auto;
}
.group-drag-handle:hover,
.external-drag-handle:hover { color:var(--text); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.group-drag-handle:active,
.external-drag-handle:active,
.group-card-dragging .group-drag-handle,
.external-source-card-dragging .external-drag-handle { cursor:grabbing; color:var(--accent); }
.group-drag-handle:disabled,
.external-drag-handle:disabled { opacity:.25; cursor:default; }
.group-card-dragging,
.external-source-card-dragging {
  position:relative;
  opacity:.76;
  outline:1px solid color-mix(in srgb,var(--accent) 72%,transparent);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  will-change:transform;
  pointer-events:none;
}
.group-list-reordering .group-card:not(.group-card-dragging),
.external-source-list-reordering .external-source-card:not(.external-source-card-dragging) { transition:transform .08s ease, opacity .08s ease; }
.reorder-drop-before { position:relative; }
.reorder-drop-before::before {
  content:'';
  position:absolute;
  left:6px;
  right:6px;
  top:-5px;
  height:2px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 75%,transparent);
  pointer-events:none;
}
.group-card-list.reorder-drop-end::after,
.external-source-list.reorder-drop-end::after {
  content:'';
  display:block;
  height:2px;
  margin:1px 6px 0;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 75%,transparent);
}
body.ui-list-reordering { user-select:none !important; -webkit-user-select:none !important; }

/* External Sources now use the same reorder grip as Groups. */
.external-source-card-main,
.external-source-card.azure-source-card .external-source-card-main {
  grid-template-columns:24px 28px minmax(0,1fr) auto auto;
}
@media (max-width:720px) {
  .external-source-card-main,
  .external-source-card.azure-source-card .external-source-card-main {
    grid-template-columns:24px 28px minmax(0,1fr) auto auto;
  }
}

/* Focused Group / External shortcut emits a restrained glow around its icon. */
.header-focus-shortcut.active {
  --shortcut-glow: var(--accent);
  text-shadow:0 0 8px color-mix(in srgb,var(--shortcut-glow) 78%,transparent);
}
.header-focus-shortcut.active img {
  filter:drop-shadow(0 0 4px var(--shortcut-glow)) drop-shadow(0 0 9px color-mix(in srgb,var(--shortcut-glow) 72%,transparent));
  animation:shortcut-focus-glow 1.7s ease-in-out infinite alternate;
}
.header-focus-shortcut.active.text-only span {
  text-shadow:0 0 5px var(--shortcut-glow),0 0 10px color-mix(in srgb,var(--shortcut-glow) 66%,transparent);
  animation:shortcut-focus-glow-text 1.7s ease-in-out infinite alternate;
}
@keyframes shortcut-focus-glow {
  from { filter:drop-shadow(0 0 3px var(--shortcut-glow)) drop-shadow(0 0 6px color-mix(in srgb,var(--shortcut-glow) 58%,transparent)); }
  to { filter:drop-shadow(0 0 6px var(--shortcut-glow)) drop-shadow(0 0 13px color-mix(in srgb,var(--shortcut-glow) 78%,transparent)); }
}
@keyframes shortcut-focus-glow-text {
  from { text-shadow:0 0 4px var(--shortcut-glow),0 0 7px color-mix(in srgb,var(--shortcut-glow) 52%,transparent); }
  to { text-shadow:0 0 7px var(--shortcut-glow),0 0 13px color-mix(in srgb,var(--shortcut-glow) 75%,transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .header-focus-shortcut.active img,
  .header-focus-shortcut.active.text-only span { animation:none; }
}


/* V85: app-controlled motion policy, focused shortcut polish, header sizing, and layout controls. */
.header-focus-shortcuts {
  padding:4px 8px !important;
  gap:7px !important;
}
.header-focus-separator {
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:9px;
  height:28px;
  color:color-mix(in srgb,var(--muted) 52%,transparent);
  font-size:15px;
  font-weight:400;
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.header-focus-shortcut.active {
  text-shadow:0 0 4px color-mix(in srgb,var(--shortcut-glow) 58%,transparent);
}
.header-focus-shortcut.active img {
  filter:drop-shadow(0 0 2px var(--shortcut-glow)) drop-shadow(0 0 4px color-mix(in srgb,var(--shortcut-glow) 58%,transparent));
  animation:shortcut-focus-glow-v85 1.7s ease-in-out infinite alternate;
}
.header-focus-shortcut.active.text-only span {
  text-shadow:0 0 3px var(--shortcut-glow),0 0 5px color-mix(in srgb,var(--shortcut-glow) 52%,transparent);
  animation:shortcut-focus-glow-text-v85 1.7s ease-in-out infinite alternate;
}
@keyframes shortcut-focus-glow-v85 {
  from { filter:drop-shadow(0 0 1.5px var(--shortcut-glow)) drop-shadow(0 0 3px color-mix(in srgb,var(--shortcut-glow) 48%,transparent)); }
  to { filter:drop-shadow(0 0 3px var(--shortcut-glow)) drop-shadow(0 0 6px color-mix(in srgb,var(--shortcut-glow) 68%,transparent)); }
}
@keyframes shortcut-focus-glow-text-v85 {
  from { text-shadow:0 0 2px var(--shortcut-glow),0 0 4px color-mix(in srgb,var(--shortcut-glow) 42%,transparent); }
  to { text-shadow:0 0 4px var(--shortcut-glow),0 0 7px color-mix(in srgb,var(--shortcut-glow) 62%,transparent); }
}
/* Keep enough internal room for glow before the scroll strip clips at its viewport boundary. */
.topbar-scroll-strip { padding-block:3px; }

/* Header Time Circuit matches the View/System button-group height. */
.header-time-circuit,
body:not(.mobile-ui) .header-time-circuit {
  height:34px;
  min-height:34px;
  padding:0 8px;
  align-items:center;
}
body.mobile-ui .header-time-circuit {
  height:32px;
  min-height:32px;
  padding:0 6px;
}

.focus-layout-control {
  flex:1 0 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:10px;
}
.focus-layout-control .select-input { width:auto; min-width:150px; }

/* Follow OS by default. Force On overrides prefers-reduced-motion; Force Off always wins. */
html[data-animation-mode="off"] .group-card-actions,
html[data-animation-mode="off"] .external-source-card-actions,
html[data-animation-mode="off"] .header-focus-shortcut.active img,
html[data-animation-mode="off"] .header-focus-shortcut.active.text-only span {
  animation:none !important;
  transition:none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-animation-mode="on"]) .group-card-actions,
  html:not([data-animation-mode="on"]) .external-source-card-actions,
  html:not([data-animation-mode="on"]) .header-focus-shortcut.active img,
  html:not([data-animation-mode="on"]) .header-focus-shortcut.active.text-only span {
    animation:none !important;
    transition:none !important;
  }
  html[data-animation-mode="on"] .header-focus-shortcut.active img { animation:shortcut-focus-glow-v85 1.7s ease-in-out infinite alternate !important; }
  html[data-animation-mode="on"] .header-focus-shortcut.active.text-only span { animation:shortcut-focus-glow-text-v85 1.7s ease-in-out infinite alternate !important; }
  html[data-animation-mode="on"] .group-card-actions,
  html[data-animation-mode="on"] .external-source-card-actions { animation:group-edit-open .12s ease-out !important; }
}


/* V87: Discord External Source inspector link. */
.detail-external-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:9px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:color-mix(in srgb,var(--panel-2) 78%,transparent);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}
.detail-external-link:hover { border-color:var(--accent); }
.detail-external-link.hidden { display:none !important; }

/* V87: Discord multi-channel External Source. */
.discord-channel-input,
.external-discord-channels-editor {
  min-height:76px;
  resize:vertical;
  line-height:1.45;
  font-family:inherit;
}
.external-discord-channels-control {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px 8px;
  width:100%;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb,var(--panel-2) 72%,transparent);
}
.external-discord-channels-caption,
.external-discord-channels-control small { grid-column:1 / -1; }
.external-discord-channels-caption { color:var(--muted);font-size:10px;font-weight:700; }
.external-discord-channels-editor { width:100%; }
@media (max-width:680px) {
  .external-discord-channels-control { grid-template-columns:1fr; }
  .external-discord-channels-control > * { grid-column:1; }
  .external-discord-channels-control button { width:100%; }
}

/* V88: invite-only accounts and per-account credentials */
.invite-overlay {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center;
  padding: 18px; background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.invite-overlay.hidden { display: none; }
.invite-card {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.invite-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.invite-card h2 { margin: 7px 0 8px; font-size: 20px; }
.invite-registration-fields { display: grid; gap: 9px; margin-top: 14px; }
.invite-registration-fields.hidden { display: none; }
.invite-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }

.account-settings-body { display: grid; gap: 9px; }
.account-identity { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.account-identity strong { font-size: 12px; overflow-wrap: anywhere; }
.account-subsection { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.account-subsection > summary { padding: 8px 9px; cursor: pointer; font-size: 11px; font-weight: 750; }
.account-subsection-body { display: grid; gap: 7px; padding: 0 9px 9px; }
.owner-account-admin { display: grid; gap: 9px; margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--line); }
.owner-account-admin.hidden { display: none; }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.invite-create-row, .latest-invite-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.latest-invite-row.hidden { display: none; }
.account-admin-list { display: grid; gap: 6px; }
.account-admin-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.account-admin-info { display: grid; gap: 2px; min-width: 0; }
.account-admin-info strong { font-size: 11px; overflow-wrap: anywhere; }
.account-admin-info span { color: var(--muted); font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
.account-admin-actions { display: flex; gap: 5px; align-items: center; }

.discord-account-credential { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.external-credential-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.external-credential-head strong { font-size: 11px; }
.discord-account-credential .storage-actions { margin-top: 0; }

@media (max-width: 640px) {
  .invite-card { padding: 18px; }
  .invite-secondary-actions, .invite-create-row, .latest-invite-row, .account-admin-row { grid-template-columns: 1fr; }
  .account-admin-actions { justify-content: stretch; }
  .account-admin-actions > button { flex: 1 1 auto; }
}