@lelouchhe/webagent 0.3.0 → 0.4.0

package/dist/styles.012p32dz.css

@@ -0,0 +1,1443 @@
+:root {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --accent: #58a6ff;
+  --green: #3fb950;
+  --yellow: #d29922;
+  --red: #f85149;
+  --blue: #58a6ff;
+  --radius: 4px;
+  --user-bg: #1e3a5f;
+  --code-bg: #0d2818;
+  --permission-bg: #1c1305;
+  --permission-title: #d29922;
+  --accent-soft: rgba(88, 166, 255, 0.18);
+}
+[data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #f6f8fa;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #656d76;
+  --accent: #0969da;
+  --green: #1a7f37;
+  --yellow: #9a6700;
+  --red: #cf222e;
+  --blue: #0969da;
+  --user-bg: #ddf4ff;
+  --code-bg: #f0faf0;
+  --permission-bg: #fff4cc;
+  --permission-title: #7a4f00;
+  --accent-soft: rgba(9, 105, 218, 0.14);
+}
+@media (prefers-color-scheme: light) {
+  [data-theme="auto"] {
+    --bg: #ffffff;
+    --surface: #f6f8fa;
+    --border: #d0d7de;
+    --text: #1f2328;
+    --text-dim: #656d76;
+    --accent: #0969da;
+    --green: #1a7f37;
+    --yellow: #9a6700;
+    --red: #cf222e;
+    --blue: #0969da;
+    --user-bg: #ddf4ff;
+    --code-bg: #f0faf0;
+    --permission-bg: #fff4cc;
+    --permission-title: #7a4f00;
+    --accent-soft: rgba(9, 105, 218, 0.14);
+  }
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
+  background: var(--bg);
+  color: var(--text);
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+}
+
+/* Header */
+#header {
+  padding: 6px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+}
+#header .logo {
+  font-weight: bold;
+  color: var(--green);
+}
+.header-side {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.header-left {
+  justify-content: flex-start;
+}
+.header-right {
+  justify-content: flex-end;
+  gap: 12px;
+}
+#header .status {
+  color: var(--text-dim);
+}
+#status {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background: transparent;
+}
+#status.is-disconnected {
+  background: var(--red);
+  border-color: var(--red);
+}
+#status.is-connected {
+  background: var(--green);
+  border-color: var(--green);
+}
+#status.is-connecting {
+  border-color: var(--yellow);
+  animation: status-pulse 1.2s ease-in-out infinite;
+}
+@keyframes status-pulse {
+  0%,
+  100% {
+    background: transparent;
+    opacity: 0.9;
+  }
+  50% {
+    background: var(--yellow);
+    opacity: 1;
+  }
+}
+#session-info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+}
+#theme-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 15px;
+  font-family: inherit;
+  padding: 2px 6px;
+}
+#theme-btn:hover {
+  color: var(--text);
+}
+@media (max-width: 640px) {
+  #header {
+    display: flex;
+    gap: 8px;
+  }
+  .header-left,
+  .header-right {
+    flex: 0 0 auto;
+  }
+  .header-right {
+    margin-left: auto;
+  }
+  #session-info {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+}
+
+/* Messages */
+#messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#messages > * {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+.msg {
+  padding: 8px 14px;
+  line-height: 1.6;
+  font-size: 16px;
+  overflow-wrap: break-word;
+}
+.msg.user {
+  background: var(--user-bg);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 8px 0 4px 0;
+  font-weight: 500;
+}
+.msg.user::before {
+  content: "▶ ";
+  color: var(--accent);
+  font-weight: bold;
+}
+.msg.assistant {
+  padding: 4px 14px;
+}
+.msg.assistant pre {
+  background: none;
+  padding: 8px 14px;
+  overflow-x: auto;
+  margin: 0;
+  font-size: 15px;
+  border-radius: 0;
+}
+.msg.assistant code {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 15px;
+}
+
+/* Code block wrapper — aligned with prompt/permission/thinking style */
+.code-block-wrapper {
+  margin: 8px -14px;
+  background: var(--code-bg);
+  border-left: 3px solid var(--green);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  position: relative;
+  overflow: hidden;
+}
+.code-block-wrapper pre {
+  margin: 0;
+  padding: 8px 14px;
+}
+.code-block-wrapper pre code,
+.code-block-wrapper pre code.hljs {
+  background: none;
+  padding: 0;
+}
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 2px 6px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  font-size: 12px;
+  color: var(--text-dim);
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.code-block-wrapper:hover .code-toolbar {
+  opacity: 1;
+}
+.copy-btn {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  min-width: 28px;
+  height: 22px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+.copy-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+.copy-btn.copied {
+  color: var(--green);
+  border-color: var(--green);
+}
+.msg.assistant p {
+  margin: 4px 0;
+}
+.msg.assistant ul,
+.msg.assistant ol {
+  padding-left: 20px;
+  margin: 4px 0;
+}
+.msg.assistant table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.msg.assistant th,
+.msg.assistant td {
+  border: 1px solid var(--border);
+  padding: 5px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+.msg.assistant th {
+  color: var(--green);
+  border-color: var(--green);
+  font-weight: normal;
+}
+
+/* Thinking */
+.thinking {
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 2px solid var(--border);
+}
+.thinking summary {
+  cursor: pointer;
+}
+.thinking-content {
+  cursor: default;
+}
+.thinking summary.active {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Inbox message card — same collapsible feel as .thinking but with accent. */
+.message {
+  color: var(--text);
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 2px solid var(--accent-muted, var(--accent));
+  margin: 6px 0;
+}
+.message summary {
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-style: italic;
+}
+.message-content {
+  cursor: default;
+  margin-top: 4px;
+}
+
+/* Waiting indicator (after user sends, before first response) */
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+#waiting {
+  padding: 6px 14px;
+  color: var(--text-dim);
+  font-size: 15px;
+}
+#waiting .cursor {
+  animation: blink 1s step-end infinite;
+}
+
+/* System messages */
+.system-msg {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+}
+.system-msg a {
+  color: var(--accent);
+  text-decoration: underline;
+  word-break: break-all;
+}
+.system-msg a:hover {
+  color: var(--text);
+}
+
+/* Tool calls */
+.tool-call {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.tool-call .icon {
+  margin-right: 4px;
+}
+.tool-call.completed {
+  color: var(--green);
+  animation: none;
+}
+.tool-call.failed {
+  color: var(--red);
+  animation: none;
+}
+.tool-call {
+  cursor: pointer;
+}
+.tool-call .tc-detail {
+  display: block;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.tool-call .tc-detail.expanded {
+  white-space: pre-wrap;
+  overflow: visible;
+  text-overflow: unset;
+}
+.tool-call details {
+  margin-top: 2px;
+}
+.tool-call details summary {
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.tool-call .tc-content {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 14px;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  color: var(--text);
+  cursor: default;
+}
+.tool-call .tc-summary {
+  margin: 4px 0 4px 16px;
+  font-size: 14px;
+  color: var(--text);
+}
+
+/* Diff view for edit tool calls */
+.diff-view {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+  line-height: 1.4;
+  cursor: default;
+}
+.diff-view .diff-file {
+  color: var(--blue);
+  font-weight: bold;
+}
+.diff-view .diff-hunk {
+  color: var(--text-dim);
+}
+.diff-view .diff-del {
+  color: var(--red);
+}
+.diff-view .diff-add {
+  color: var(--green);
+}
+
+/* Plan */
+.plan {
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 3px solid var(--blue);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+.plan-title {
+  color: var(--blue);
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+.plan-entry {
+  padding: 1px 0;
+}
+
+/* Permission dialog */
+.permission {
+  background: var(--permission-bg);
+  border-left: 3px solid var(--yellow);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  padding: 8px 14px;
+  font-size: 15px;
+}
+.permission .title {
+  color: var(--permission-title);
+  font-weight: bold;
+  margin-bottom: 6px;
+}
+.permission button {
+  margin: 2px 4px 2px 0;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+.permission button:hover {
+  background: var(--surface);
+}
+.permission button.allow {
+  border-color: var(--green);
+}
+.permission button.deny {
+  border-color: var(--red);
+}
+
+/* Bash command output */
+.bash-block {
+  margin: 2px 0;
+  padding: 2px 14px;
+  font-size: 15px;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.bash-block .bash-cmd {
+  color: var(--green);
+  font-family: monospace;
+  font-size: 14px;
+  cursor: pointer;
+  overflow-wrap: break-word;
+}
+.bash-block .bash-cmd::before {
+  content: "$ ";
+  color: var(--text-dim);
+}
+.bash-block .bash-cmd.running {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.bash-block .bash-output {
+  margin: 4px 0 4px 0;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--text);
+  line-height: 1.4;
+  display: none;
+}
+.bash-block .bash-output.has-content {
+  display: block;
+}
+.bash-block .bash-output .stderr {
+  color: var(--red);
+}
+.bash-block .bash-exit {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-left: 8px;
+}
+.bash-block .bash-exit.ok {
+  color: var(--green);
+}
+.bash-block .bash-exit.fail {
+  color: var(--red);
+}
+
+/* Input */
+#input-area {
+  position: relative;
+  padding: 8px 16px 4px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: border-color 0.15s;
+}
+#input-area.bash-mode {
+  border-top: 2px solid #e8872b;
+}
+#input-area.bash-mode #input-prompt {
+  --prompt-color: #e8872b;
+  color: var(--prompt-color);
+}
+#input-area.bash-mode #input {
+  color: #e8872b;
+}
+#input-area.plan-mode {
+  border-top: 2px solid var(--green);
+}
+#input-area.plan-mode #input-prompt {
+  --prompt-color: var(--green);
+  color: var(--prompt-color);
+}
+#input-area.plan-mode #mode-pill {
+  color: var(--green);
+}
+#input-area.autopilot-mode {
+  border-top: 2px solid var(--red);
+}
+#input-area.autopilot-mode #input-prompt {
+  --prompt-color: var(--red);
+  color: var(--prompt-color);
+}
+#input-area.autopilot-mode #mode-pill {
+  color: var(--red);
+}
+#input-area.preview-mode {
+  border-top: 2px solid var(--blue);
+}
+#input-area.preview-mode #input-prompt {
+  --prompt-color: var(--blue);
+  color: var(--prompt-color);
+}
+#input-area.preview-mode #mode-pill {
+  color: var(--blue);
+}
+/* Mode pill: JS writes the actual mode name (#plan, autopilot, default,
+   acceptEdits, etc.) into textContent. The :empty selector hides the
+   element when there's no mode to show (e.g. before configOptions land).
+   Color comes from the bucket-specific rules above; default is dim. */
+#mode-pill {
+  position: absolute;
+  top: -7px;
+  left: 16px;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0 4px;
+  background: var(--bg);
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+#mode-pill:empty {
+  display: none;
+}
+#status-bar {
+  display: flex;
+  padding: 0 16px 10px;
+  background: var(--bg);
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  user-select: none;
+}
+#status-bar::before {
+  content: "\200b";
+}
+#status-bar .status-cwd {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+#input-prompt {
+  --prompt-color: var(--text);
+  color: var(--prompt-color);
+  font-weight: bold;
+  user-select: none;
+  line-height: 1.5;
+  cursor: pointer;
+}
+#input-prompt::before {
+  content: "❯ ";
+}
+#input-prompt.busy::before {
+  content: "⠋ ";
+  animation: spinner 0.8s steps(1) infinite;
+}
+#input {
+  flex: 1;
+  background: transparent;
+  color: var(--text);
+  border: none;
+  padding: 4px 8px;
+  font-size: 16px;
+  font-family: inherit;
+  resize: none;
+  min-height: 28px;
+  max-height: 200px;
+  line-height: 1.5;
+}
+#input:focus {
+  outline: none;
+}
+.input-btn {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 34px;
+  height: 28px;
+  padding: 0 6px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+.input-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+#send-btn.cancel {
+  color: var(--red);
+  border-color: var(--red);
+  font-weight: bold;
+}
+#send-btn.cancel:hover,
+#send-btn.cancel:focus,
+#send-btn.cancel:active {
+  color: var(--red);
+  border-color: var(--red);
+}
+.input-btn.publish {
+  color: var(--blue);
+  border-color: var(--blue);
+  font-weight: bold;
+}
+.input-btn.publish:hover,
+.input-btn.publish:focus,
+.input-btn.publish:active {
+  color: var(--blue);
+  border-color: var(--blue);
+}
+#input-area.preview-mode #input {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@keyframes spinner {
+  0% {
+    content: "⠋";
+  }
+  10% {
+    content: "⠙";
+  }
+  20% {
+    content: "⠹";
+  }
+  30% {
+    content: "⠸";
+  }
+  40% {
+    content: "⠼";
+  }
+  50% {
+    content: "⠴";
+  }
+  60% {
+    content: "⠦";
+  }
+  70% {
+    content: "⠧";
+  }
+  80% {
+    content: "⠇";
+  }
+  90% {
+    content: "⠏";
+  }
+}
+
+/* Slash command autocomplete */
+#slash-menu {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  max-height: 220px;
+  overflow-y: auto;
+  z-index: 10;
+}
+#slash-menu.active {
+  display: block;
+}
+
+.slash-item {
+  padding: 6px 6px;
+  cursor: pointer;
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: max-content;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+.slash-item:hover,
+.slash-item.selected {
+  background: var(--accent-soft);
+}
+
+.slash-row-l1 {
+  display: grid;
+  grid-template-columns: 1ch auto 1fr;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 100%;
+}
+.slash-row-l2 {
+  grid-column: 2 / -1;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.4;
+  padding-left: calc(4ch + 4px);
+  min-width: 100%;
+}
+
+.slash-prefix {
+  display: inline-block;
+  width: 1ch;
+  text-align: center;
+  user-select: none;
+  flex: 0 0 auto;
+}
+.slash-primary {
+  font-weight: bold;
+  white-space: nowrap;
+}
+.slash-menu-root .slash-primary {
+  min-width: 7ch;
+}
+.slash-current {
+  color: var(--green);
+}
+.slash-secondary {
+  color: var(--text-dim);
+  white-space: nowrap;
+  margin-left: 1ch;
+}
+.slash-path {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.slash-path-secondary {
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.slash-separator {
+  height: 1px;
+  background: var(--border);
+  opacity: 0.5;
+  margin: 4px 0;
+}
+.slash-placeholder {
+  color: var(--text-dim);
+  font-style: italic;
+}
+.slash-placeholder:hover,
+.slash-placeholder.selected {
+  background: transparent;
+  cursor: default;
+}
+
+/* Image attach */
+#attach-preview {
+  display: none;
+  padding: 4px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+#attach-preview.active {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.attach-thumb {
+  position: relative;
+  display: inline-block;
+}
+.attach-thumb img {
+  max-height: 60px;
+  max-width: 120px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.attach-thumb.attach-file {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  color: var(--fg);
+  background: var(--bg-alt, transparent);
+  max-width: 200px;
+}
+.attach-thumb.attach-file .attach-file-name {
+  display: inline-block;
+  max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.attach-thumb .remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--red);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  cursor: pointer;
+  padding: 0;
+}
+.msg.user img.user-image {
+  max-width: 200px;
+  max-height: 150px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  display: block;
+  margin-top: 4px;
+  cursor: zoom-in;
+}
+.msg.user a.user-file {
+  display: inline-block;
+  margin-top: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--accent);
+  text-decoration: none;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+.msg.user a.user-file:hover {
+  text-decoration: underline;
+}
+
+/* Image lightbox overlay */
+#lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  visibility: hidden;
+  pointer-events: none;
+}
+#lightbox-overlay.active {
+  visibility: visible;
+  pointer-events: auto;
+}
+#lightbox-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 6px;
+  cursor: default;
+}
+
+/* History pagination sentinel */
+.history-sentinel {
+  text-align: center;
+  padding: 8px;
+  opacity: 0.5;
+  font-size: 0.85em;
+}
+
+/* Utility: dim out cancelled / settled / past states. Used in dynamic innerHTML
+   where inline `style="opacity:0.5"` would violate strict CSP `style-src 'self'`. */
+.dim {
+  opacity: 0.5;
+}
+
+/* --- Login page (extracted from login.html for CSP `style-src 'self'`) --- */
+body.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+}
+.login-card {
+  width: 100%;
+  max-width: 480px;
+  padding: 2rem 1.5rem;
+  box-sizing: border-box;
+}
+.login-card h1 {
+  font-size: 1.2rem;
+  margin: 0 0 0.5rem;
+}
+.login-card p {
+  font-size: 0.9rem;
+  opacity: 0.75;
+  margin: 0 0 1.25rem;
+  line-height: 1.45;
+}
+.login-card input {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 0.95rem;
+  padding: 0.6rem;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+}
+.login-card .error {
+  display: none;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #c0392b;
+  color: #c0392b;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+.login-card button {
+  margin-top: 1rem;
+  width: 100%;
+  padding: 0.6rem;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  border-radius: 4px;
+}
+.login-card button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.login-card .hint {
+  font-size: 0.78rem;
+  opacity: 0.6;
+  margin-top: 1rem;
+}
+.login-card code {
+  background: rgba(127, 127, 127, 0.15);
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+}
+
+/* --- highlight.js themes (vendored from highlight.js@common, BSD-3-Clause) --- */
+/* light: default */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #24292e;
+  background: #ffffff
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+/* dark: explicit */
+[data-theme="dark"] {
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+}
+
+/* dark: auto + system prefers dark */
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+  }
+}