/* Copyright (c) 2025 OceanBase. SPDX-License-Identifier: Apache-2.0
 * Modified for the Memory-only seekdb terminal example. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #263834;
  background: #f5f6f2;
  font-synthesis: none;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --muted: #7b8981;
  --green: #227c5a;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, pre:focus-visible { outline: 2px solid #54a783; outline-offset: 4px; }
::selection { background: #9edab777; }
.page { width: min(1420px, 100%); margin: 0 auto; padding: 35px 48px 20px; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 29px; }
.brand { display: flex; align-items: center; gap: 14px; min-height: 45px; margin: 0; }
.brand-logo { display: block; width: 140px; height: auto; }
.brand-label { padding-left: 14px; border-left: 1px solid #d7ded5; font-size: 14px; font-weight: 450; color: #6e7b72; }
.source-link { display: flex; align-items: center; gap: 9px; color: #64776b; font-size: 12px; text-decoration: none; }
.source-link code { font: 11px var(--mono); padding: 4px 6px; border-radius: 4px; background: #e9ede6; }
.source-link:hover { color: var(--green); }
.memory-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; padding: 11px 15px; border: 1px solid #e6e6d4; border-radius: 8px; background: #f0f0e5; font-size: 12px; color: #7b7c63; }
.memory-notice strong { color: #72785b; font-size: 11px; letter-spacing: .03em; }
.memory-icon { font-size: 19px; line-height: 1; color: #8a956c; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 28px; align-items: start; }
.terminal { display: flex; flex-direction: column; min-width: 0; height: min(780px, calc(100dvh - 190px)); min-height: 510px; background: #14241f; color: #dce8df; border: 1px solid #2c3e33; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 36px -24px #13382566; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 21px; background: #1d2e26; border-bottom: 1px solid #344238; }
.connection { display: flex; align-items: center; gap: 10px; min-width: 0; font: 12px var(--mono); }
.connection strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-symbol { color: #9bcdae; font-size: 18px; letter-spacing: -3px; margin-right: 5px; }
.clear-button { display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 3px 0; color: #9bab9d; font-size: 11px; }
.clear-button span { color: #677b69; font-size: 12px; }
.clear-button:hover { color: #e8f4e9; }
.runtime-status { display: flex; align-items: center; gap: 7px; padding: 14px 22px 8px; font-size: 11px; color: #849c89; min-height: 39px; }
.status-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #d0ba7d; }
.status-dot[data-state="ready"] { background: #8ac6a0; box-shadow: 0 0 0 3px #8ac6a00d; }
.status-dot[data-state="running"], .status-dot[data-state="loading"] { animation: pulse 1.5s ease-in-out infinite; }
.status-dot[data-state="error"] { background: #ed9488; }
#activity-time { color: #5f7968; font: 10px var(--mono); margin-left: auto; white-space: nowrap; }
.terminal-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 22px 28px; scrollbar-color: #385140 transparent; scrollbar-width: thin; }
.terminal-scroll:focus { outline: 0; }
.start-button { margin: 0 0 16px; min-height: 44px; padding: 8px 16px; border: 1px solid #577967; border-radius: 6px; background: #31533b; color: #e8f4e9; font-size: 13px; }
.start-button:hover { background: #3c6349; }
.transcript { font: 12px/1.7 var(--mono); }
.entry { margin: 0 0 23px; }
.entry.pending { margin-bottom: 8px; }
.command-text { margin: 0 0 7px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: #d0dfd2; }
.command-prompt, .prompt { color: #95caa1; }
.result-table { display: block; max-width: 100%; overflow-x: auto; scrollbar-color: #3c5846 transparent; margin: 9px 0; padding: 0; font: inherit; white-space: pre; color: #b9cdbf; }
.result-table[hidden] { display: none; }
.query-summary { display: flex; flex-wrap: wrap; gap: 10px; color: #8ca794; font-size: 11px; }
.timing { color: #5f7c6b; }
.entry-error, .notice.error { color: #ef9f91; }
.entry-error { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.notice { margin: 12px 0; padding: 12px 0; font: 12px/1.8 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: #b9ccb9; }
.notice.error { padding: 13px 15px; border: 1px solid #78504766; border-radius: 6px; background: #78504712; }
.result-limit { color: #c7b584; font-size: 11px; margin: 8px 0; }
.composer { display: flex; align-items: flex-start; gap: 10px; font: 12px/1.7 var(--mono); }
.prompt { flex-shrink: 0; padding-top: 3px; white-space: pre; }
#sql-input { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; margin: 0; padding: 3px 0; background: transparent; color: #e1efe1; caret-color: #badfba; font: inherit; line-height: inherit; tab-size: 2; min-height: 26px; }
#sql-input::placeholder { color: #52705d; font: 12px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
#sql-input:disabled { opacity: .7; }
#submit-button { background: #233f2e; color: #a6d1ad; border: 1px solid #3a5b43; border-radius: 4px; font: 15px var(--mono); padding: 1px 6px; }
#submit-button:disabled { opacity: .25; }
#submit-button:not(:disabled):hover { background: #31533b; }
.terminal-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 11px 20px; border-top: 1px solid #2b4032; color: #678471; font-size: 10px; }
kbd { font: 10px var(--mono); color: #8ea995; }
.footer-divider { margin: 0 6px; color: #3d5c49; }
#version-label { font: 10px var(--mono); color: #678471; overflow-wrap: anywhere; max-width: 100%; }
.guide { padding-top: 7px; min-width: 0; }
.guide h2 { font-size: 18px; font-weight: 600; letter-spacing: -.3px; margin: 10px 0 10px; }
.example-step { border-bottom: 1px solid #e0e5db; }
.example-title { display: flex; align-items: center; gap: 12px; padding: 14px 0; color: #51634f; cursor: pointer; font-size: 12px; list-style: none; }
.example-title::-webkit-details-marker { display: none; }
.example-title::after { content: '+'; margin-left: auto; color: #98aa96; font: 16px var(--mono); }
.example-step[open] .example-title::after { content: '−'; }
.step-number { font: 10px var(--mono); color: #9ca995; }
.example-title:hover { color: #267b54; }
.example-content { padding: 0 0 16px; }
.example-code { overflow: auto; font: 10px/1.8 var(--mono); color: #42644f; background: #eaf0e6; border-radius: 6px; padding: 12px; margin: 0; scrollbar-width: thin; }
.expected { font-size: 11px; line-height: 1.8; color: #8b9785; margin: 10px 0; }
.copy-button { font-size: 11px; color: #557754; border: 1px solid #cddbc6; border-radius: 5px; background: #f6f9f1; padding: 6px 11px; }
.copy-button:hover { border-color: #9ab695; background: #edf5e7; }
.guide-note { margin-top: 24px; color: #8d9a86; font-size: 11px; line-height: 1.9; }
.guide-note code { font: 10px var(--mono); color: #647d5e; }
noscript { display: block; padding: 20px; color: #923b24; }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 1050px) {
  .page { padding: 25px 28px 18px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 250px; gap: 21px; }
  .terminal-scroll { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 780px) {
  .page { padding: 20px 16px; }
  .workspace { grid-template-columns: 1fr; }
  .terminal { height: 65dvh; min-height: 440px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand-logo { width: 120px; }
  .brand-label { padding: 0; border: 0; font-size: 11px; }
  .source-link { font-size: 10px; }
  .guide { padding: 8px; }
  .terminal-footer { padding: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none !important; } }