.sb-browser {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(860px, calc(100dvh - 32px));
  max-height: none;
  padding: 0;
  border: 1px solid #d2dfff26;
  border-radius: 16px;
  background: #0d1524;
  color: var(--ink, #eef0f5);
  box-shadow: 0 30px 100px #000b;
  overflow: hidden;
}

.sb-browser::backdrop {
  background: #030915c9;
  backdrop-filter: blur(4px);
}

.sb-browser[open] {
  animation: sb-enter 280ms var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.sb-browser, .sb-browser * { box-sizing: border-box; }
.sb-browser button,
.sb-browser input,
.sb-browser select,
.sb-browser textarea { font: inherit; }

.sb-browser button:focus-visible,
.sb-browser a:focus-visible,
.sb-browser input:focus-visible,
.sb-browser select:focus-visible,
.sb-browser textarea:focus-visible,
.sb-browser summary:focus-visible {
  outline: 2px solid var(--cyan, #a5e5e7);
  outline-offset: 3px;
}

.sb-browser__shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background:
    radial-gradient(ellipse at 15% 0%, #22344d52, transparent 42%),
    linear-gradient(145deg, #121c2c, #0b1220 72%);
}

.sb-browser__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line, #ffffff16);
}

.sb-browser__eyebrow {
  margin: 0 0 5px;
  color: var(--gold, #e4ca9d);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sb-browser__title {
  margin: 0;
  font: 400 30px/1.15 Georgia, serif;
  letter-spacing: -.012em;
}

.sb-browser__disclosure {
  margin: 8px 0 0;
  color: var(--muted, #a6afc4);
  font-size: 12px;
}

.sb-browser__close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #ffffff20;
  border-radius: 9px;
  background: #ffffff08;
  color: #cbd4e5;
  font-size: 24px;
  line-height: 1;
}

.sb-browser__close:hover { background: #ffffff12; }

.sb-connectivity {
  padding: 11px 26px;
  border-bottom: 1px solid #e4ca9d2b;
  background: #e4ca9d0d;
  color: #e7d8bb;
}

.sb-connectivity:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sb-connectivity p { margin: 0; font-size: 12px; }

.sb-browser__body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(390px, 1.08fr);
  overflow: hidden;
}

.sb-browser__column {
  min-width: 0;
  min-height: 0;
  padding: 24px 26px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #667b9366 transparent;
}

.sb-browser__column--review { border-left: 1px solid var(--line, #ffffff16); }

.sb-section-title {
  margin: 0;
  font: 400 21px/1.25 Georgia, serif;
}

.sb-meta {
  margin: 7px 0 18px;
  color: #98a6bd;
  font-size: 11px;
}

.sb-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .68fr);
  gap: 12px;
  align-items: end;
}

.sb-search-form > .sb-button { grid-column: 1 / -1; }

.sb-field { min-width: 0; }
.sb-label {
  display: block;
  margin: 0 0 6px;
  color: #c8d1df;
  font-size: 11px;
}

.sb-input,
.sb-select,
.sb-textarea,
.sb-file {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: #080f1cbd;
  color: var(--ink, #eef0f5);
}

.sb-input,
.sb-select { padding: 9px 11px; }
.sb-select { color-scheme: dark; }
.sb-input::placeholder,
.sb-textarea::placeholder { color: #7f8ba1; }

.sb-textarea {
  display: block;
  min-height: 96px;
  padding: 10px 11px;
  line-height: 1.55;
  resize: vertical;
}

.sb-textarea--quote { min-height: 132px; }
.sb-file { padding: 8px; color: #b9c4d6; }
.sb-file::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: 1px solid #a5e5e733;
  border-radius: 5px;
  background: #a5e5e70d;
  color: #d9f4f5;
}

.sb-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background: #ffffff08;
  color: #dce3ed;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.sb-button:hover { background: #ffffff10; }
.sb-button:disabled { cursor: wait; opacity: .58; }
.sb-button--primary {
  border-color: #a5e5e744;
  background: #a5e5e710;
  color: #d7f5f6;
}
.sb-button--primary:hover { background: #a5e5e71c; }
.sb-button--quiet { min-height: 44px; color: #c6dfe2; }

.sb-status {
  min-height: 18px;
  margin: 15px 0 8px;
  color: #a9b4c6;
  font-size: 11px;
  line-height: 1.55;
}

.sb-results {
  max-height: 322px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #667b9366 transparent;
}

.sb-result {
  width: 100%;
  min-height: 44px;
  padding: 13px 14px;
  border: 1px solid #ffffff17;
  border-radius: 9px;
  background: #101827ba;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 240ms ease, background 240ms ease;
}

.sb-result + .sb-result { margin-top: 8px; }
.sb-result:hover { border-color: #a5e5e740; background: #132033; }
.sb-result[aria-current="true"] { border-color: #a5e5e778; background: #a5e5e70c; }
.sb-result__top { display: flex; justify-content: space-between; gap: 12px; }
.sb-result__title { font-size: 12px; font-weight: 600; }
.sb-result__session { color: var(--gold, #e4ca9d); font-size: 9px; white-space: nowrap; }
.sb-result__excerpt {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: #b6c1d2;
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sb-result__lines { display: block; margin-top: 7px; color: #8493aa; font-size: 9px; }

.sb-import,
.sb-draft {
  margin-top: 22px;
  border-top: 1px solid var(--line, #ffffff16);
  padding-top: 16px;
}

.sb-import summary,
.sb-draft summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: #dce5ef;
  font: 400 16px Georgia, serif;
  cursor: pointer;
}

.sb-import[open] summary,
.sb-draft[open] summary { color: var(--cyan, #a5e5e7); }
.sb-hint { margin: 6px 0 10px; color: #8f9db3; font-size: 10px; line-height: 1.55; }
.sb-import .sb-button { width: 100%; margin-top: 10px; }

.sb-empty {
  margin-top: 16px;
  padding: 32px 24px;
  border: 1px dashed #ffffff20;
  border-radius: 10px;
  color: #93a1b7;
  text-align: center;
  font-size: 11px;
}
.sb-empty p { margin: 0; }
.sb-empty p + p { margin-top: 7px; }
.sb-empty .sb-button { width: 100%; margin-top: 14px; }
.sb-empty__title { color: #d2dae6; font: 400 16px Georgia, serif; }

.sb-passage {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #a5e5e72e;
  border-radius: 10px;
  background: #101e2c;
}
.sb-passage__session {
  margin: 0 0 5px;
  color: var(--gold, #e4ca9d);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sb-passage__title { margin: 0; font: 400 18px/1.3 Georgia, serif; }
.sb-passage__lines { margin: 5px 0 13px; color: #8d9cb2; font-size: 9px; }
.sb-passage__text {
  max-height: 245px;
  margin: 0;
  padding: 13px 14px;
  overflow: auto;
  border-left: 2px solid #e4ca9d80;
  background: #080f19a3;
  color: #e2e3e8;
  font: 400 13px/1.65 Georgia, serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}

.sb-related { margin-top: 15px; }
.sb-related__label {
  margin: 0 0 8px;
  color: #9eabc0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sb-related__list { display: flex; flex-wrap: wrap; gap: 7px; }
.sb-entity-link {
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #a5e5e733;
  border-radius: 6px;
  background: #a5e5e709;
  color: var(--cyan, #a5e5e7);
  cursor: pointer;
}

.sb-draft-form { display: grid; gap: 13px; }
.sb-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sb-draft-form > .sb-hint { margin-top: -8px; }

.sb-saved { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line, #ffffff16); }
.sb-saved__header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.sb-saved__title { margin: 0; font: 400 16px Georgia, serif; }
.sb-export {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--cyan, #a5e5e7);
  font-size: 11px;
  text-underline-offset: 4px;
}
.sb-saved__list { display: grid; gap: 8px; }
.sb-saved-card {
  position: relative;
  padding: 13px 78px 13px 14px;
  border: 1px solid #ffffff17;
  border-radius: 8px;
  background: #0c1422a6;
}
.sb-saved-card__route { margin: 0; font-size: 11px; font-weight: 600; }
.sb-saved-card__predicate { margin: 4px 0; color: var(--lilac, #c1afe7); font-size: 10px; }
.sb-saved-card__claim { margin: 0; color: #aeb9ca; font-size: 10px; line-height: 1.5; }
.sb-proposed {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 6px;
  border: 1px solid #c1afe733;
  border-radius: 4px;
  color: #d4c5ef;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@keyframes sb-enter {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .sb-browser {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  .sb-browser__shell { display: flex; flex-direction: column; }
  .sb-browser__header { flex: 0 0 auto; padding: 18px 17px 15px; gap: 12px; }
  .sb-browser__title { font-size: 25px; }
  .sb-browser__disclosure { max-width: 29em; font-size: 11px; }
  .sb-connectivity { padding: 10px 17px; }
  .sb-connectivity:not([hidden]) { align-items: stretch; flex-direction: column; gap: 8px; }
  .sb-connectivity .sb-button { width: 100%; }
  .sb-browser__body { display: block; flex: 1 1 auto; overflow-y: auto; }
  .sb-browser__column { overflow: visible; padding: 21px 17px 26px; }
  .sb-browser__column--review { border-top: 1px solid var(--line, #ffffff16); border-left: 0; }
  .sb-search-form { grid-template-columns: 1fr; }
  .sb-search-form > .sb-button { grid-column: auto; }
  .sb-results { max-height: 360px; }
  .sb-passage__text { max-height: 300px; }
  .sb-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .sb-browser__header { padding-right: 12px; }
  .sb-browser__title { font-size: 22px; }
  .sb-browser__close { width: 44px; }
  .sb-result__top { display: block; }
  .sb-result__session { display: block; margin-top: 3px; white-space: normal; }
  .sb-saved-card { padding-right: 14px; padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-browser[open] { animation: none; }
  .sb-browser .sb-button,
  .sb-browser .sb-result { transition: none; }
}