:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0c10;
  color: #eef2f6;
}

* { box-sizing: border-box; }
body { margin: 0; background: #0a0c10; min-height: 100vh; }
button, textarea, select { font: inherit; }

.shell { width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.topbar p { margin: 5px 0 0; color: #7f8998; font-size: 14px; }
.instance-picker { display: grid; gap: 6px; min-width: 260px; color: #8c96a4; font-size: 12px; }
select { background: #12161d; border: 1px solid #29313d; color: #eef2f6; border-radius: 8px; padding: 9px 11px; outline: none; }

.status-row { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid #1f2630; background: #0f1319; border-radius: 9px; }
.badge { min-width: 84px; text-align: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: #19212a; color: #aab5c3; }
.badge[data-safety="read"] { background: #10261d; color: #7bd7a8; }
.badge[data-safety="write"] { background: #33270e; color: #efc76e; }
.badge[data-safety="destructive"] { background: #351417; color: #ff8b92; }
.badge[data-safety="invalid"] { background: #351417; color: #ff8b92; }
.summary { color: #95a0ad; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parse-error { margin-left: auto; color: #ff8b92; font-size: 12px; }

.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: calc(100vh - 155px); }
.panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid #202833; background: #0e1218; border-radius: 10px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #202833; }
.panel-head h2 { margin: 0; font-size: 13px; }
.panel-head span { display: block; color: #6f7b89; font-size: 11px; margin-top: 3px; }
.editor { flex: 1; width: 100%; min-height: 540px; resize: none; border: 0; outline: none; padding: 16px; background: #0b0f14; color: #d8e0e9; font-family: "JetBrains Mono", "Fira Code", Consolas, monospace; font-size: 13px; line-height: 1.55; tab-size: 2; }
.editor.response { color: #c9d4df; }
.actions, .hint { min-height: 49px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid #202833; color: #6f7b89; font-size: 12px; }
button { border-radius: 7px; border: 1px solid transparent; padding: 8px 12px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: #6644ff; color: #fff; font-weight: 650; }
.primary:hover:not(:disabled) { background: #7558ff; }
.secondary { background: #151b23; border-color: #2b3440; color: #b9c3ce; }
.secondary:hover:not(:disabled) { background: #1b222c; }

@media (max-width: 900px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .instance-picker { min-width: 0; }
  .workspace { grid-template-columns: 1fr; }
  .editor { min-height: 420px; }
}

.top-actions { display: flex; align-items: end; gap: 10px; }
.auth-state { min-height: 55px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #29313d; background: #12161d; border-radius: 8px; min-width: 270px; }
.auth-state > div { min-width: 0; flex: 1; }
.auth-state strong { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.auth-state small { display: block; color: #6f7b89; font-size: 10px; margin-top: 2px; }
.auth-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #647080; }
.auth-state[data-authenticated="true"] .auth-dot { background: #60d394; box-shadow: 0 0 0 3px rgba(96, 211, 148, .09); }
.compact { padding: 6px 8px; font-size: 11px; }

.login-panel { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(560px, 2fr); gap: 12px 20px; align-items: center; padding: 12px; margin-bottom: 12px; border: 1px solid #29313d; background: #10151c; border-radius: 9px; }
.login-copy strong { display: block; font-size: 12px; }
.login-copy span { display: block; color: #727e8c; font-size: 11px; line-height: 1.45; margin-top: 3px; }
.login-fields { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(160px, 1.3fr) minmax(120px, .7fr) auto; gap: 8px; }
.login-fields input { min-width: 0; background: #0b0f14; border: 1px solid #29313d; color: #eef2f6; border-radius: 7px; padding: 8px 10px; outline: none; }
.login-fields input:focus, select:focus { border-color: #5d4ad9; }
.login-error { grid-column: 2; color: #ff8b92; font-size: 11px; }

@media (max-width: 1100px) {
  .top-actions { align-items: stretch; flex-direction: column; width: min(100%, 420px); }
  .auth-state { min-width: 0; }
  .login-panel { grid-template-columns: 1fr; }
  .login-fields { grid-template-columns: 1fr 1fr; }
  .login-error { grid-column: 1; }
}

@media (max-width: 650px) {
  .login-fields { grid-template-columns: 1fr; }
}