@bestcodetools/graphql-playground 0.0.0

package/public/styles/main.css

@@ -0,0 +1,1313 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+  background-color: #4f4f4f;
+  color: #f4f4f4;
+  border-radius: none;
+  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+body > * {
+  display: none;
+}
+
+body.ready > * {
+  display: unset;
+}
+
+.tabs {
+  list-style: none;
+  padding: 0;
+  padding-top: 5px;
+  margin: 0;
+  flex: 0 0 auto;
+  display: block;
+  background-color: #333;
+  border-bottom: 1px solid #666;
+  border-top: 1px solid #666;
+  border-radius: 0;
+  overflow: auto;
+  white-space: nowrap;
+}
+.tabs .tab-item {
+  margin: 0 5px;
+  padding: 5px;
+  cursor: pointer;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+}
+.tabs .tab-item:hover {
+  background-color: #4f4f4f;
+}
+.tabs .tab-item:not(.active), .tabs .tab-item:hover:not(.active) {
+  border-bottom: none;
+}
+.tabs .add-tab {
+  padding: 5px 10px;
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1;
+  border: 1px solid #666;
+  background-color: #333;
+  border-radius: 0;
+  cursor: pointer;
+}
+.tabs .add-tab, .tabs .tab-item {
+  display: inline-block;
+}
+.tabs .add-tab > a, .tabs .tab-item > a {
+  color: #f4f4f4;
+  text-decoration: none;
+}
+.tabs .add-tab.add-tab > a, .tabs .tab-item.add-tab > a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 14px;
+  font-weight: 700;
+}
+.tabs .add-tab .tab-title-input, .tabs .tab-item .tab-title-input {
+  min-width: 120px;
+  width: 180px;
+  margin: 0;
+  padding: 4px 6px;
+  border: 1px solid #4d7ea8;
+  background: #1f2329;
+  color: #f4f4f4;
+  font: inherit;
+  box-sizing: border-box;
+}
+.tabs .add-tab .tab-title-input:focus, .tabs .tab-item .tab-title-input:focus {
+  outline: none;
+  border-color: #4fc1ff;
+}
+.tabs .add-tab.tab-item, .tabs .tab-item.tab-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.tabs .add-tab .tab-close-btn, .tabs .tab-item .tab-close-btn {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: #8b97a3;
+  font-size: 0.95rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: none;
+}
+.tabs .add-tab .tab-close-btn:hover, .tabs .tab-item .tab-close-btn:hover {
+  color: #d7ecff;
+  background: transparent;
+}
+.tabs .add-tab:hover, .tabs .tab-item:hover {
+  box-shadow: 0 0 5px #20f020;
+}
+.tabs .add-tab:hover > a, .tabs .tab-item:hover > a {
+  color: #20f020;
+}
+
+.editor {
+  display: flex !important;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: #1f1f1f;
+  padding: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.input-group {
+  flex: 0 0 auto;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 10px;
+  padding: 10px 0 0;
+  margin: 0;
+  background-color: #1f1f1f;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tab-item.active {
+  background-color: #666;
+}
+.tab-item.active a {
+  color: #20f020;
+}
+
+.query-and-result-container {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: #f4f4f4;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.query-and-result-container .actions {
+  margin: auto;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+}
+.query-and-result-container .actions button {
+  border-radius: 100%;
+  height: 60px;
+  width: 60px;
+}
+
+.send-fab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px !important;
+  height: 26px !important;
+  padding: 0 !important;
+  border-radius: 999px !important;
+  font-size: 0.7rem;
+  line-height: 1;
+  text-indent: 2px;
+  border: 1px solid #606872;
+  background: linear-gradient(180deg, #3a4048 0%, #2f343b 100%);
+  color: #e7eef7;
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+}
+.send-fab:hover {
+  background: linear-gradient(180deg, #47505a 0%, #3a4048 100%);
+}
+
+.result {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+  color: #f4f4f4;
+  overflow: hidden;
+  width: auto;
+  position: relative;
+  z-index: 1;
+}
+.result pre {
+  margin: 0;
+  padding: 10px 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+response-viewer {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.response-viewer-container {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+  width: 100%;
+}
+.response-viewer-container textarea {
+  min-height: 0;
+  width: 100%;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.variables-and-headers-container {
+  display: flex;
+  flex: 0 0 220px;
+  min-height: 220px;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: #f4f4f4;
+  overflow: hidden;
+  width: 100%;
+}
+.variables-and-headers-container textarea {
+  min-height: 150px;
+}
+
+.query-editor-container,
+.variables-editor-container,
+.headers-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  margin: 0;
+}
+
+query-editor,
+variables-editor,
+headers-editor,
+response-viewer {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.variables-editor-container textarea {
+  min-height: 0;
+  font-family: Consolas, "Courier New", monospace;
+  width: 100%;
+}
+
+.headers-editor-container textarea {
+  min-height: 0;
+  font-family: Consolas, "Courier New", monospace;
+  width: 100%;
+}
+
+.query-editor, .variables-editor, .headers-editor {
+  margin: 0;
+  padding: 0;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+  color: #f4f4f4;
+  overflow: hidden;
+  width: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.result response-viewer {
+  background-color: #333;
+}
+
+.result {
+  background-color: #1e1e1e;
+}
+
+.query-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.variables-editor, .headers-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.editor-panel-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.45rem 0.7rem;
+  background: linear-gradient(180deg, #2b2f36 0%, #23272e 100%);
+  border-bottom: 1px solid #4a4f57;
+  color: #cfd8e3;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-family: "Open Sans", sans-serif;
+}
+
+.editor-panel-action {
+  border: 1px solid #4d7ea8;
+  background: linear-gradient(180deg, #274766 0%, #1f3850 100%);
+  color: #d7ecff;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.2rem 0.55rem;
+  cursor: pointer;
+}
+
+.editor-panel-action:hover {
+  background: linear-gradient(180deg, #31587d 0%, #274766 100%);
+}
+
+.editor-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+textarea {
+  margin: auto;
+  padding: 5px;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+  color: #f4f4f4;
+  overflow: auto;
+  resize: none;
+  width: calc(100% - 12px);
+}
+
+input {
+  margin: 0;
+  padding: 8px;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+  color: #f4f4f4;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.variables-editor .CodeMirror {
+  height: 100%;
+  width: 100%;
+  border: none !important;
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.headers-editor .CodeMirror {
+  height: 100%;
+  width: 100%;
+  border: none !important;
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.response-viewer-container .CodeMirror {
+  display: flex !important;
+  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+  border: none !important;
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+  font-family: Consolas, "Courier New", monospace;
+  min-width: 0;
+  min-height: 0;
+}
+
+.response-viewer-container .CodeMirror-scroll {
+  overflow-x: hidden !important;
+  flex: 1 1 auto;
+  background-color: #1e1e1e !important;
+}
+
+.response-viewer-container .CodeMirror-sizer,
+.response-viewer-container .CodeMirror-lines,
+.response-viewer-container .CodeMirror-code {
+  background-color: #1e1e1e !important;
+}
+
+.response-viewer-container .CodeMirror-hscrollbar {
+  display: none !important;
+}
+
+.response-viewer-container .CodeMirror-gutters {
+  background-color: #252526 !important;
+  border-right: 1px solid #333 !important;
+}
+
+.response-viewer-container .CodeMirror-gutter-wrapper,
+.response-viewer-container .CodeMirror-linebackground,
+.response-viewer-container .CodeMirror-line,
+.response-viewer-container .CodeMirror-lines pre {
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+}
+
+.response-viewer-container .CodeMirror-linenumber {
+  color: #858585 !important;
+}
+
+.response-viewer-container .CodeMirror-cursor {
+  border-left: 1px solid #aeafad !important;
+}
+
+.response-viewer-container .CodeMirror-selected {
+  background: rgba(38, 79, 120, 0.85) !important;
+}
+
+.response-viewer-container .cm-string {
+  color: #ce9178 !important;
+}
+
+.response-viewer-container .cm-property {
+  color: #9cdcfe !important;
+}
+
+.response-viewer-container .cm-number {
+  color: #b5cea8 !important;
+}
+
+.response-viewer-container .cm-atom {
+  color: #66d9ef !important;
+}
+
+.response-viewer-container .cm-bracket {
+  color: #ffd700 !important;
+}
+
+.variables-editor .CodeMirror-gutters {
+  background-color: #252526 !important;
+  border-right: 1px solid #333 !important;
+}
+
+.headers-editor .CodeMirror-gutters {
+  background-color: #252526 !important;
+  border-right: 1px solid #333 !important;
+}
+
+.variables-editor .CodeMirror-linenumber {
+  color: #858585 !important;
+}
+
+.headers-editor .CodeMirror-linenumber {
+  color: #858585 !important;
+}
+
+.variables-editor .CodeMirror-cursor {
+  border-left: 1px solid #aeafad !important;
+}
+
+.headers-editor .CodeMirror-cursor {
+  border-left: 1px solid #aeafad !important;
+}
+
+.variables-editor .CodeMirror-selected {
+  background: rgba(38, 79, 120, 0.85) !important;
+}
+
+.headers-editor .CodeMirror-selected {
+  background: rgba(38, 79, 120, 0.85) !important;
+}
+
+.variables-editor .cm-string {
+  color: #ce9178 !important;
+}
+
+.headers-editor .cm-string {
+  color: #ce9178 !important;
+}
+
+.variables-editor .cm-number {
+  color: #b5cea8 !important;
+}
+
+.headers-editor .cm-number {
+  color: #b5cea8 !important;
+}
+
+.variables-editor .cm-atom {
+  color: #66d9ef !important;
+}
+
+.headers-editor .cm-atom {
+  color: #66d9ef !important;
+}
+
+.variables-editor .cm-bracket {
+  color: #ffd700 !important;
+}
+
+.headers-editor .cm-bracket {
+  color: #ffd700 !important;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.gap-1 {
+  gap: 5px;
+}
+
+.gap-10 {
+  gap: 10px;
+  row-gap: 10px;
+}
+
+/* .input-group: should stretch the input to occupy most of the space, the button should fit its internal content, it should also have no gap from the input, button borders that are close to other elements should be pointy, extremity borders should be rounded  */
+.input-group {
+  display: flex;
+}
+.input-group input {
+  flex: 1;
+  border-radius: 0;
+  border-right: none;
+}
+.input-group button {
+  border-radius: 0;
+  border-left: none;
+}
+
+button {
+  padding: 8px 15px;
+  background-color: #3F3F3F;
+  border: 1px solid #606060;
+  border-radius: 0;
+  color: #f4f4f4;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #4f4f4f;
+}
+
+.top-nav {
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  background: linear-gradient(180deg, #2b2f36 0%, #23272e 100%);
+  border-bottom: 1px solid #4a4f57;
+}
+
+.top-nav-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.top-nav-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.locale-label {
+  color: #9aa6b2;
+  font-size: 0.82rem;
+  white-space: nowrap;
+}
+
+.locale-select {
+  border: 1px solid #4a4f57;
+  background: #1f2329;
+  color: #d4d4d4;
+  padding: 0.4rem 0.55rem;
+}
+
+.locale-select:focus {
+  outline: none;
+  border-color: #4fc1ff;
+}
+
+.top-nav-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.top-nav-title {
+  color: #f2f6fb;
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.top-nav-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.14rem 0.42rem;
+  border: 1px solid #4d7ea8;
+  border-radius: 999px;
+  background: rgba(39, 71, 102, 0.45);
+  color: #bfe3ff;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.top-nav-subtitle {
+  color: #9aa6b2;
+  font-size: 0.8rem;
+  line-height: 1.35;
+}
+
+.config-btn {
+  border: 1px solid #4d7ea8;
+  background: linear-gradient(180deg, #274766 0%, #1f3850 100%);
+  color: #d7ecff;
+  padding: 0.45rem 0.8rem;
+  cursor: pointer;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.config-btn:hover {
+  background: linear-gradient(180deg, #31587d 0%, #274766 100%);
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background: #2f2f2f;
+  border: 1px solid #666;
+  border-radius: 16px;
+  padding: 20px;
+  width: 50%;
+}
+
+.config-tabs {
+  display: flex;
+  border-bottom: 2px solid #ddd;
+}
+
+.config-tabs .tab-item {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.workspace-actions-note {
+  margin: 0 0 12px;
+  color: #9aa6b2;
+  line-height: 1.5;
+}
+
+.workspace-actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.workspace-import-input {
+  display: none;
+}
+
+.headers-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.headers-table th, .headers-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+}
+
+.close-btn {
+  margin-top: 10px;
+}
+
+.modal-overlay {
+  display: block !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(31, 31, 31, 0.6274509804);
+}
+
+table.headers-table tbody td {
+  padding: 0;
+}
+table.headers-table tbody td input {
+  background-color: #fff;
+  width: 100%;
+  padding: 8px;
+  border: none;
+  border-radius: 0;
+  color: #111;
+  box-sizing: border-box;
+}
+table.headers-table tbody td input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #4f4f4f;
+}
+
+td.remove-action, th.remove-action {
+  width: 1px;
+}
+
+.config-modal h2 {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.modal button:not(td > button) {
+  border-radius: 8px;
+}
+
+.query-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  height: auto;
+}
+.query-editor-container textarea {
+  min-height: 0;
+  font-family: Consolas, "Courier New", monospace;
+  width: 100%;
+}
+
+.query-editor .CodeMirror {
+  height: 100%;
+  width: 100%;
+  border: none !important;
+  background-color: #1e1e1e !important;
+  color: #d4d4d4 !important;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.95rem;
+}
+
+.query-editor .CodeMirror-scroll,
+.variables-editor .CodeMirror-scroll,
+.headers-editor .CodeMirror-scroll,
+.response-viewer-container .CodeMirror-scroll {
+  min-height: 100%;
+}
+
+.variables-editor .CodeMirror-sizer,
+.headers-editor .CodeMirror-sizer,
+.variables-editor .CodeMirror-lines,
+.headers-editor .CodeMirror-lines {
+  min-width: 0;
+}
+
+.variables-editor .CodeMirror-scroll,
+.headers-editor .CodeMirror-scroll {
+  overflow-x: hidden !important;
+}
+
+.variables-editor .CodeMirror-hscrollbar,
+.headers-editor .CodeMirror-hscrollbar {
+  display: none !important;
+}
+
+.query-editor .CodeMirror-gutters {
+  background-color: #252526 !important;
+  border-right: 1px solid #333 !important;
+}
+
+.query-editor .CodeMirror-linenumber {
+  color: #858585 !important;
+}
+
+.query-editor .CodeMirror-cursor {
+  border-left: 1px solid #aeafad !important;
+}
+
+.query-editor .CodeMirror-selected {
+  background: rgba(38, 79, 120, 0.85) !important;
+}
+
+.query-editor .cm-keyword {
+  color: #d8a8ff !important;
+}
+
+.query-editor .cm-atom {
+  color: #66d9ef !important;
+}
+
+.query-editor .cm-type-name {
+  color: #4ec9b0 !important;
+  font-weight: 600;
+}
+
+.query-editor .cm-string {
+  color: #ce9178 !important;
+}
+
+.query-editor .cm-number {
+  color: #b5cea8 !important;
+}
+
+.query-editor .cm-variable,
+.query-editor .cm-variable-2,
+.query-editor .cm-def {
+  color: #67d4ff !important;
+}
+
+.query-editor .cm-property {
+  color: #4ec9b0 !important;
+}
+
+.query-editor .cm-def {
+  color: #4fc1ff !important;
+}
+
+.query-editor .cm-variable {
+  color: #9cdcfe !important;
+}
+
+.query-editor .cm-variable-2 {
+  color: #6bbcdc !important;
+}
+
+.query-editor .cm-comment {
+  color: #8fdc6b !important;
+  font-style: italic;
+}
+
+.query-editor .cm-meta {
+  color: #d8a8ff !important;
+}
+
+.query-editor .cm-operator {
+  color: #d4d4d4 !important;
+}
+
+.query-editor .cm-bracket {
+  color: #ffd700 !important;
+}
+
+.query-editor .cm-non-null-modifier {
+  color: #ff6b6b !important;
+  font-weight: 800;
+}
+
+.query-editor .cm-list-modifier {
+  color: #ffca28 !important;
+  font-weight: 700;
+}
+
+.CodeMirror-hints {
+  background-color: #252526 !important;
+  border: 1px solid #454545 !important;
+  color: #d4d4d4 !important;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.CodeMirror-hint {
+  color: #d4d4d4 !important;
+}
+
+.CodeMirror-hint-active {
+  background-color: #04395e !important;
+  color: #ffffff !important;
+}
+
+.cm-hint-keyword {
+  color: #d8a8ff !important;
+}
+
+.cm-hint-type {
+  color: #66d9ef !important;
+}
+
+.cm-hint-field {
+  color: #4ec9b0 !important;
+}
+
+.cm-hint-argument {
+  color: #67d4ff !important;
+}
+
+.cm-hint-enum {
+  color: #66d9ef !important;
+}
+
+.schema-viewer-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  width: fit-content;
+  height: 100vh;
+  transition: all 0.3s ease-in-out;
+}
+.schema-viewer-wrapper.open .schema-viewer-panel {
+  width: 340px;
+  right: 0;
+}
+.schema-viewer-wrapper.open .btn.btn-toggle-schema-viewer {
+  right: 309px;
+}
+
+.schema-viewer-panel {
+  position: fixed;
+  top: 0;
+  right: -340px;
+  width: 0;
+  overflow: hidden;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #333;
+  border: 1px solid #666;
+  border-radius: 0;
+  color: #f4f4f4;
+  padding: 0;
+  transition: all 0.3s ease-in-out;
+}
+.schema-viewer-panel pre {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+.schema-panel-title {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin: 0;
+}
+
+.schema-panel-toolbar {
+  flex: 0 0 auto;
+  padding: 0.7rem;
+  border-bottom: 1px solid #4a4f57;
+  background: #2d3138;
+}
+
+.schema-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.schema-search-input {
+  width: 100%;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid #4a4f57;
+  background: #1f2329;
+  color: #d4d4d4;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.9rem;
+  margin-bottom: 0.45rem;
+}
+
+.schema-search-input:focus {
+  outline: none;
+  border-color: #4fc1ff;
+}
+
+.schema-panel-note {
+  color: #9aa6b2;
+  font-size: 0.78rem;
+  font-style: italic;
+  line-height: 1.45;
+}
+
+.schema-viewer-panel .type-definition {
+  padding: 0.7rem;
+  padding-bottom: 0.6rem;
+}
+
+.schema-viewer-panel .field-name.is-actionable {
+  cursor: pointer;
+}
+
+.schema-viewer-panel .field-name.is-actionable:hover {
+  text-decoration: underline;
+}
+
+.schema-tooltip {
+  position: fixed;
+  z-index: 1200;
+  width: 320px;
+  max-width: calc(100vw - 24px);
+  padding: 0.75rem 0.9rem;
+  background: rgba(20, 24, 31, 0.98) !important;
+  border: 1px solid #3a4552 !important;
+  border-radius: 0.7rem;
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35) !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  transform: translateY(6px);
+  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
+}
+
+.schema-tooltip.is-visible {
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: translateY(0);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.schema-tooltip-signature {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: Consolas, "Courier New", monospace;
+  line-height: 1.35;
+}
+
+.schema-tooltip-name {
+  font-weight: 700;
+}
+
+.schema-tooltip-name-field {
+  color: #4fc1ff;
+}
+
+.schema-tooltip-name-argument {
+  color: #9cdcfe;
+}
+
+.schema-tooltip-name-type {
+  color: #4fc3f7;
+}
+
+.schema-tooltip-type-tokens {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.05rem;
+}
+
+.schema-tooltip-name-enum {
+  color: #66d9ef;
+}
+
+.schema-tooltip .field-type {
+  color: #4fc3f7;
+}
+
+.schema-tooltip .field-type-prefix,
+.schema-tooltip .field-type-suffix {
+  color: #ffca28;
+  font-weight: 700;
+}
+
+.schema-tooltip .field-type-non-null {
+  color: #ff6b6b;
+  font-weight: 800;
+}
+
+.schema-tooltip-description {
+  margin-top: 0.55rem;
+  color: #c9d4df;
+  font-size: 0.92rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.schema-tooltip-inline-args {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: Consolas, "Courier New", monospace;
+}
+
+.schema-tooltip-usage-list {
+  margin-top: 0.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.schema-tooltip-usage-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: Consolas, "Courier New", monospace;
+  font-size: 0.9rem;
+}
+
+.schema-tooltip-muted {
+  color: #7f8b99 !important;
+}
+
+.schema-tooltip-muted.field-type,
+.schema-tooltip-muted.field-type-prefix,
+.schema-tooltip-muted.field-type-suffix,
+.schema-tooltip-muted.field-type-non-null {
+  color: #7f8b99 !important;
+}
+
+.btn.btn-toggle-schema-viewer {
+  position: fixed;
+  z-index: 1001;
+  top: 8rem;
+  right: -2rem;
+  direction: ltr;
+  transform: rotate(-90deg);
+  text-transform: uppercase;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  transition: all 0.3s ease-in-out;
+}
+
+.schema-viewer-error {
+  position: fixed;
+  top: 5rem;
+  right: 0;
+  z-index: 1010;
+  padding: 0.8rem;
+  border-radius: 1rem;
+  background-color: #f44336;
+  border-color: #d32f2f;
+  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.5);
+  color: #fff;
+  margin: 0.5rem 0;
+  transition: all 0.3s ease-in-out;
+  opacity: 0.5;
+}
+.schema-viewer-error pre {
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+.btn.schema-download-retry {
+  margin-top: 0.5rem;
+  background-color: #fff;
+  color: #f44336;
+  border: 1px solid #d32f2f;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.8rem;
+}
+.btn.schema-download-retry:hover {
+  background-color: #f44336;
+  color: #fff;
+}
+
+.type-definition {
+  margin-bottom: 0.5rem;
+}
+.type-definition .field {
+  margin-bottom: 0.2rem;
+}
+.type-definition .field-name {
+  margin-left: 1rem;
+}
+.type-definition .field-type-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.05rem;
+}
+.type-definition .field-type {
+  font-style: italic;
+  color: #4fc3f7;
+  text-shadow: 0 0 6px rgba(79, 195, 247, 0.18);
+}
+.type-definition .field-type-link {
+  text-decoration: none;
+}
+.type-definition .field-type-link .field-type {
+  color: #4fc3f7;
+}
+.type-definition .field-type-prefix,
+.type-definition .field-type-suffix {
+  color: #ffca28;
+  font-weight: 700;
+  text-shadow: 0 0 6px rgba(255, 202, 40, 0.2);
+}
+.type-definition .field-type-non-null {
+  color: #ff6b6b;
+  font-weight: 800;
+  text-shadow: 0 0 6px rgba(255, 107, 107, 0.22);
+}
+.type-definition .bracket {
+  font-weight: bold;
+  color: #802080;
+}
+.type-definition .equal {
+  font-weight: bold;
+}
+.type-definition .colon {
+  font-weight: bold;
+  color: #208020;
+}
+.type-definition .keyword {
+  font-weight: bold;
+  color: #2080f0;
+}
+.type-definition .type-name {
+  font-weight: bold;
+  color: #20f020;
+}
+.type-definition .field-args {
+  margin-left: 0.25rem;
+}
+.type-definition .field-arg-name {
+  color: #f0c020;
+}
+.type-definition .field-type-link {
+  text-decoration: none;
+}
+.type-definition .field-arg-default {
+  color: #d0d0d0;
+}
+.type-definition .field-arg-description {
+  color: #9aa4ad;
+  font-size: 0.9em;
+  margin-left: 0.35rem;
+}
+
+.type-definition > * {
+  min-width: max-content;
+  padding-right: 1rem;
+}
+
+.field {
+  min-width: max-content;
+}
+.field > * {
+  min-width: max-content;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.enum-name {
+  font-weight: bold;
+  color: #20a080;
+  padding-left: 1rem;
+}
+
+/*# sourceMappingURL=main.css.map */