@vertebr/react 0.1.1 → 0.3.0

package/dist/styles.css

@@ -1,997 +1,2 @@
-:root {
-  --vb-bg: #0e1014;
-  --vb-bg-elevated: #161922;
-  --vb-bg-muted: #1e2330;
-  --vb-bg-hover: #252b3a;
-  --vb-border: #2a3142;
-  --vb-border-strong: #3a4358;
-  --vb-text: #f0eee8;
-  --vb-text-muted: #8b93a7;
-  --vb-text-subtle: #6a7285;
-  --vb-accent: #c9a66b;
-  --vb-accent-dim: #9a7d45;
-  --vb-accent-soft: rgba(201, 166, 107, 0.14);
-  --vb-danger: #e07a72;
-  --vb-danger-soft: rgba(224, 122, 114, 0.12);
-  --vb-ok: #87a87f;
-  --vb-ok-soft: rgba(135, 168, 127, 0.14);
-  --vb-font: "IBM Plex Sans", "Segoe UI", sans-serif;
-  --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
-  --vb-radius: 8px;
-  --vb-radius-sm: 6px;
-  --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
-    0 18px 48px rgba(0, 0, 0, 0.45);
-  --vb-sidebar-width: 260px;
-}
-
-html:has(.vertebr-root),
-html:has(.vertebr-login),
-html:has(.vertebr-loading),
-html:has(.vertebr-error) {
-  background: var(--vb-bg);
-}
-
-html:has(.vertebr-root) body,
-html:has(.vertebr-login) body,
-html:has(.vertebr-loading) body,
-html:has(.vertebr-error) body {
-  margin: 0;
-  padding: 0;
-  min-height: 100vh;
-  background: var(--vb-bg);
-  color: var(--vb-text);
-  font-family: var(--vb-font);
-}
-
-.vertebr-root {
-  box-sizing: border-box;
-  min-height: 100vh;
-  display: grid;
-  grid-template-columns: var(--vb-sidebar-width) 1fr;
-  background:
-    radial-gradient(
-      900px 480px at 0% -10%,
-      rgba(201, 166, 107, 0.07),
-      transparent 55%
-    ),
-    radial-gradient(
-      700px 400px at 100% 100%,
-      rgba(60, 80, 120, 0.08),
-      transparent 50%
-    ),
-    linear-gradient(180deg, #12151c 0%, var(--vb-bg) 45%);
-  color: var(--vb-text);
-  font-family: var(--vb-font);
-  font-size: 15px;
-  line-height: 1.45;
-  -webkit-font-smoothing: antialiased;
-}
-
-.vertebr-root *,
-.vertebr-root *::before,
-.vertebr-root *::after {
-  box-sizing: border-box;
-}
-
-/* ── Sidebar ─────────────────────────────────────────── */
-
-.vertebr-sidebar {
-  position: sticky;
-  top: 0;
-  align-self: start;
-  height: 100vh;
-  border-right: 1px solid var(--vb-border);
-  background: linear-gradient(
-    180deg,
-    rgba(14, 16, 20, 0.98) 0%,
-    rgba(18, 21, 28, 0.96) 100%
-  );
-  backdrop-filter: blur(12px);
-  padding: 1.35rem 0.9rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  overflow-y: auto;
-}
-
-.vertebr-sidebar-top {
-  display: flex;
-  flex-direction: column;
-  gap: 1.35rem;
-  flex: 1;
-  min-height: 0;
-}
-
-.vertebr-sidebar-bottom {
-  margin-top: auto;
-  padding-top: 1rem;
-  border-top: 1px solid var(--vb-border);
-}
-
-.vertebr-brand {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 0.15rem 0.55rem 0.35rem;
-}
-
-.vertebr-brand strong {
-  font-size: 1.05rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  font-weight: 600;
-  color: var(--vb-text);
-}
-
-.vertebr-brand span {
-  color: var(--vb-text-subtle);
-  font-size: 0.72rem;
-  font-family: var(--vb-mono);
-  letter-spacing: 0.02em;
-}
-
-.vertebr-env {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  padding: 0 0.15rem;
-}
-
-/* ── Select ──────────────────────────────────────────── */
-
-.vertebr-select-trigger {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  appearance: none;
-  border: 1px solid var(--vb-border);
-  background: var(--vb-bg-elevated);
-  color: var(--vb-text);
-  border-radius: var(--vb-radius-sm);
-  padding: 0.55rem 0.7rem;
-  font-family: var(--vb-font);
-  font-size: 0.88rem;
-  font-weight: 500;
-  line-height: 1.2;
-  cursor: pointer;
-  transition:
-    border-color 140ms ease,
-    background 140ms ease,
-    box-shadow 140ms ease;
-}
-
-.vertebr-select-trigger:hover {
-  border-color: var(--vb-border-strong);
-  background: var(--vb-bg-muted);
-}
-
-.vertebr-select-trigger:focus-visible,
-.vertebr-select-trigger[data-state="open"] {
-  outline: none;
-  border-color: var(--vb-accent-dim);
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-}
-
-.vertebr-select-trigger[data-tone="danger"] {
-  border-color: rgba(224, 122, 114, 0.45);
-  color: #f3c4bf;
-}
-
-.vertebr-select-value {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.vertebr-select-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 999px;
-  flex: none;
-  background: var(--vb-ok);
-  box-shadow: 0 0 0 3px var(--vb-ok-soft);
-}
-
-.vertebr-select-dot[data-tone="danger"] {
-  background: var(--vb-danger);
-  box-shadow: 0 0 0 3px var(--vb-danger-soft);
-}
-
-.vertebr-select-dot[data-tone="warning"],
-.vertebr-select-dot[data-tone="warn"] {
-  background: var(--vb-accent);
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-}
-
-.vertebr-select-icon {
-  display: flex;
-  color: var(--vb-text-muted);
-  transition: transform 140ms ease;
-}
-
-.vertebr-select-trigger[data-state="open"] .vertebr-select-icon {
-  transform: rotate(180deg);
-}
-
-.vertebr-select-content {
-  z-index: 60;
-  min-width: var(--radix-select-trigger-width);
-  background: var(--vb-bg-elevated);
-  border: 1px solid var(--vb-border-strong);
-  border-radius: var(--vb-radius);
-  box-shadow: var(--vb-shadow);
-  overflow: hidden;
-  font-family: var(--vb-font);
-  color: var(--vb-text);
-  animation: vertebr-pop 120ms ease-out;
-}
-
-@keyframes vertebr-pop {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.vertebr-select-viewport {
-  padding: 0.3rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-}
-
-.vertebr-select-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.6rem;
-  border-radius: var(--vb-radius-sm);
-  font-size: 0.88rem;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-}
-
-.vertebr-select-item[data-highlighted] {
-  background: var(--vb-bg-hover);
-}
-
-.vertebr-select-item[data-state="checked"] {
-  color: var(--vb-accent);
-}
-
-.vertebr-select-check {
-  margin-left: auto;
-  display: flex;
-  color: var(--vb-accent);
-}
-
-.vertebr-env-lock {
-  margin-left: auto;
-  font-family: var(--vb-mono);
-  font-size: 0.62rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--vb-accent);
-  border: 1px solid rgba(201, 166, 107, 0.3);
-  border-radius: 999px;
-  padding: 0.12rem 0.4rem;
-  background: var(--vb-accent-soft);
-}
-
-/* ── Auth ────────────────────────────────────────────── */
-
-.vertebr-auth {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.15rem 0.2rem 0.35rem;
-}
-
-.vertebr-auth-hint {
-  margin: 0;
-  color: var(--vb-text-muted);
-  font-size: 0.78rem;
-  line-height: 1.4;
-  word-break: break-all;
-}
-
-.vertebr-auth-input {
-  width: 100%;
-  border: 1px solid var(--vb-border);
-  background: var(--vb-bg);
-  color: var(--vb-text);
-  border-radius: var(--vb-radius-sm);
-  padding: 0.55rem 0.65rem;
-  font: inherit;
-  font-size: 0.85rem;
-  transition: border-color 140ms ease, box-shadow 140ms ease;
-}
-
-.vertebr-auth-input:focus {
-  outline: none;
-  border-color: var(--vb-accent-dim);
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-}
-
-.vertebr-auth-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* ── Nav ─────────────────────────────────────────────── */
-
-.vertebr-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 1.15rem;
-}
-
-.vertebr-nav-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.vertebr-nav-label {
-  font-size: 0.65rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--vb-text-subtle);
-  padding: 0.2rem 0.65rem 0.4rem;
-  font-family: var(--vb-mono);
-  font-weight: 500;
-}
-
-.vertebr-nav button {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--vb-text-muted);
-  text-align: left;
-  padding: 0.48rem 0.7rem;
-  border-radius: var(--vb-radius-sm);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.9rem;
-  font-weight: 450;
-  transition:
-    background 120ms ease,
-    color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.vertebr-nav button:hover {
-  background: var(--vb-bg-muted);
-  color: var(--vb-text);
-}
-
-.vertebr-nav button[data-active="true"] {
-  background: var(--vb-accent-soft);
-  box-shadow: inset 2px 0 0 var(--vb-accent);
-  color: var(--vb-accent);
-  font-weight: 500;
-}
-
-.vertebr-nav button:focus-visible,
-.vertebr-btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-}
-
-.vertebr-sidebar::-webkit-scrollbar,
-.vertebr-main::-webkit-scrollbar,
-.vertebr-table-wrap::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-.vertebr-sidebar::-webkit-scrollbar-thumb,
-.vertebr-main::-webkit-scrollbar-thumb,
-.vertebr-table-wrap::-webkit-scrollbar-thumb {
-  background: var(--vb-bg-muted);
-  border: 2px solid transparent;
-  background-clip: content-box;
-  border-radius: 999px;
-}
-
-.vertebr-sidebar::-webkit-scrollbar-thumb:hover,
-.vertebr-main::-webkit-scrollbar-thumb:hover,
-.vertebr-table-wrap::-webkit-scrollbar-thumb:hover {
-  background: var(--vb-border-strong);
-  background-clip: content-box;
-}
-
-.vertebr-sidebar::-webkit-scrollbar-track,
-.vertebr-main::-webkit-scrollbar-track,
-.vertebr-table-wrap::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* ── Main ────────────────────────────────────────────── */
-
-.vertebr-main {
-  overflow: auto;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.vertebr-header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 1rem;
-  padding: 1.6rem 2rem 1.15rem;
-  border-bottom: 1px solid rgba(42, 49, 66, 0.8);
-  background: linear-gradient(
-    180deg,
-    rgba(14, 16, 20, 0.96) 0%,
-    rgba(14, 16, 20, 0.86) 100%
-  );
-  backdrop-filter: blur(10px);
-}
-
-.vertebr-content {
-  padding: 1.5rem 2rem 3rem;
-  min-width: 0;
-}
-
-.vertebr-heading-row {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  flex-wrap: wrap;
-}
-
-.vertebr-header h1 {
-  margin: 0;
-  font-size: 1.55rem;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  line-height: 1.15;
-}
-
-.vertebr-header p {
-  margin: 0.4rem 0 0;
-  color: var(--vb-text-muted);
-  font-size: 0.9rem;
-}
-
-.vertebr-env-badge {
-  font-family: var(--vb-mono);
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  border: 1px solid var(--vb-border);
-  border-radius: 999px;
-  padding: 0.22rem 0.6rem;
-  color: var(--vb-text-muted);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.vertebr-env-badge[data-tone="danger"] {
-  color: #f3c4bf;
-  border-color: rgba(224, 122, 114, 0.45);
-  background: var(--vb-danger-soft);
-}
-
-.vertebr-env-badge[data-tone="warn"],
-.vertebr-env-badge[data-tone="warning"] {
-  color: #e8d0a0;
-  border-color: rgba(201, 166, 107, 0.45);
-  background: var(--vb-accent-soft);
-}
-
-.vertebr-env-badge[data-tone="neutral"] {
-  color: var(--vb-ok);
-  border-color: rgba(135, 168, 127, 0.4);
-  background: var(--vb-ok-soft);
-}
-
-/* ── Panel ───────────────────────────────────────────── */
-
-.vertebr-panel {
-  background: var(--vb-bg-elevated);
-  border: 1px solid var(--vb-border);
-  border-radius: 12px;
-  box-shadow: var(--vb-shadow);
-  overflow: hidden;
-}
-
-.vertebr-panel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.9rem 1.5rem;
-  border-bottom: 1px solid var(--vb-border);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.vertebr-panel-head h2 {
-  margin: 0;
-  font-size: 0.72rem;
-  font-family: var(--vb-mono);
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--vb-text-subtle);
-}
-
-.vertebr-count {
-  font-family: var(--vb-mono);
-  font-size: 0.7rem;
-  color: var(--vb-text-subtle);
-  border: 1px solid var(--vb-border);
-  border-radius: 999px;
-  padding: 0.12rem 0.5rem;
-}
-
-.vertebr-row-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  justify-content: flex-end;
-}
-
-.vertebr-row-actions .vertebr-btn {
-  padding: 0.35rem 0.6rem;
-  font-size: 0.78rem;
-}
-
-.vertebr-metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1rem;
-  padding: 1.35rem 1.5rem 1.5rem;
-}
-
-.vertebr-metric-card {
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius);
-  background: rgba(255, 255, 255, 0.02);
-  padding: 1rem 1.05rem 1.1rem;
-  min-height: 110px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.vertebr-metric-card[data-tone="ok"] {
-  border-color: rgba(135, 168, 127, 0.4);
-  background: var(--vb-ok-soft);
-}
-
-.vertebr-metric-card[data-tone="warn"] {
-  border-color: rgba(201, 166, 107, 0.4);
-  background: var(--vb-accent-soft);
-}
-
-.vertebr-metric-card[data-tone="danger"] {
-  border-color: rgba(224, 122, 114, 0.4);
-  background: var(--vb-danger-soft);
-}
-
-.vertebr-metric-label {
-  margin: 0;
-  font-size: 0.72rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-family: var(--vb-mono);
-  color: var(--vb-text-subtle);
-}
-
-.vertebr-metric-value {
-  margin: 0;
-  font-size: 1.75rem;
-  font-weight: 600;
-  letter-spacing: -0.03em;
-  line-height: 1.1;
-}
-
-.vertebr-metric-hint {
-  margin: 0.15rem 0 0;
-  font-size: 0.78rem;
-  color: var(--vb-text-muted);
-  line-height: 1.35;
-}
-
-.vertebr-resource-edit {
-  display: flex;
-  flex-direction: column;
-}
-
-/* ── Table ───────────────────────────────────────────── */
-
-.vertebr-table-wrap {
-  overflow: auto;
-}
-
-.vertebr-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-}
-
-.vertebr-table th,
-.vertebr-table td {
-  padding: 0.8rem 1.1rem;
-  border-bottom: 1px solid var(--vb-border);
-  text-align: left;
-  vertical-align: top;
-}
-
-.vertebr-table th {
-  color: var(--vb-text-subtle);
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-family: var(--vb-mono);
-  font-weight: 500;
-  background: rgba(255, 255, 255, 0.025);
-}
-
-.vertebr-table tbody tr {
-  transition: background 100ms ease;
-}
-
-.vertebr-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.vertebr-table tr:last-child td {
-  border-bottom: 0;
-}
-
-.vertebr-empty {
-  padding: 3rem 1.5rem;
-  text-align: center;
-  color: var(--vb-text-muted);
-  font-size: 0.92rem;
-}
-
-/* ── Form ────────────────────────────────────────────── */
-
-.vertebr-form {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.vertebr-form-fields {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 22vw, 320px), 1fr));
-  gap: 1.1rem 1.25rem;
-  padding: 1.35rem 1.5rem 1.25rem;
-  align-items: start;
-}
-
-.vertebr-field {
-  display: grid;
-  gap: 0.35rem;
-  align-content: start;
-}
-
-.vertebr-field[data-span="wide"] {
-  grid-column: span 2;
-}
-
-.vertebr-field[data-span="full"] {
-  grid-column: 1 / -1;
-}
-
-.vertebr-field label,
-.vertebr-field > span {
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--vb-text-muted);
-  letter-spacing: 0.01em;
-}
-
-.vertebr-field input[type="text"],
-.vertebr-field input[type="number"],
-.vertebr-field input[type="password"],
-.vertebr-field input[type="email"],
-.vertebr-field textarea {
-  width: 100%;
-  border: 1px solid var(--vb-border);
-  background: var(--vb-bg);
-  color: var(--vb-text);
-  border-radius: var(--vb-radius-sm);
-  padding: 0.58rem 0.75rem;
-  font: inherit;
-  font-size: 0.9rem;
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease,
-    background 140ms ease;
-}
-
-.vertebr-field textarea {
-  resize: vertical;
-  min-height: 4.5rem;
-  line-height: 1.5;
-  padding-top: 0.65rem;
-}
-
-.vertebr-field input:hover,
-.vertebr-field textarea:hover {
-  border-color: var(--vb-border-strong);
-}
-
-.vertebr-field input:focus,
-.vertebr-field textarea:focus {
-  outline: none;
-  border-color: var(--vb-accent-dim);
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-  background: #12151c;
-}
-
-.vertebr-field input[readonly],
-.vertebr-field textarea[readonly] {
-  opacity: 0.65;
-  cursor: default;
-}
-
-.vertebr-switch-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.7rem 0.85rem;
-  border: 1px solid var(--vb-border);
-  border-radius: var(--vb-radius-sm);
-  background: rgba(255, 255, 255, 0.015);
-  grid-column: 1 / -1;
-}
-
-.vertebr-switch-row label {
-  font-size: 0.88rem;
-  font-weight: 500;
-  color: var(--vb-text);
-  font-family: var(--vb-font);
-}
-
-.vertebr-switch {
-  width: 40px;
-  height: 22px;
-  background: var(--vb-bg-muted);
-  border-radius: 999px;
-  position: relative;
-  border: 1px solid var(--vb-border);
-  cursor: pointer;
-  flex: none;
-  transition: background 140ms ease, border-color 140ms ease;
-}
-
-.vertebr-switch[data-state="checked"] {
-  background: rgba(201, 166, 107, 0.35);
-  border-color: var(--vb-accent-dim);
-}
-
-.vertebr-switch-thumb {
-  display: block;
-  width: 16px;
-  height: 16px;
-  background: var(--vb-text);
-  border-radius: 999px;
-  transform: translateX(2px);
-  transition: transform 140ms ease, background 140ms ease;
-  margin-top: 2px;
-}
-
-.vertebr-switch[data-state="checked"] .vertebr-switch-thumb {
-  transform: translateX(18px);
-  background: var(--vb-accent);
-}
-
-.vertebr-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.85rem;
-  padding: 0.9rem 1.5rem;
-  border-top: 1px solid var(--vb-border);
-  background: linear-gradient(
-    180deg,
-    rgba(22, 25, 34, 0.65) 0%,
-    rgba(18, 21, 28, 0.95) 100%
-  );
-  position: sticky;
-  bottom: 0;
-}
-
-.vertebr-actions-spacer {
-  flex: 1;
-}
-
-.vertebr-dirty {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-family: var(--vb-mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--vb-accent);
-}
-
-.vertebr-dirty::before {
-  content: "";
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: var(--vb-accent);
-  box-shadow: 0 0 0 3px var(--vb-accent-soft);
-}
-
-.vertebr-kbd {
-  font-family: var(--vb-mono);
-  font-size: 0.68rem;
-  color: var(--vb-text-subtle);
-  border: 1px solid var(--vb-border);
-  border-bottom-width: 2px;
-  border-radius: 4px;
-  padding: 0.1rem 0.35rem;
-}
-
-/* ── Buttons / status ────────────────────────────────── */
-
-.vertebr-btn {
-  appearance: none;
-  border: 1px solid var(--vb-border);
-  background: var(--vb-bg-muted);
-  color: var(--vb-text);
-  border-radius: var(--vb-radius-sm);
-  padding: 0.52rem 0.95rem;
-  font: inherit;
-  font-size: 0.88rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background 120ms ease,
-    border-color 120ms ease,
-    transform 80ms ease;
-}
-
-.vertebr-btn:hover:not(:disabled) {
-  background: var(--vb-bg-hover);
-  border-color: var(--vb-border-strong);
-}
-
-.vertebr-btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.vertebr-btn-primary {
-  background: linear-gradient(180deg, #d4b27a 0%, var(--vb-accent) 100%);
-  border-color: #b89255;
-  color: #1a140c;
-  font-weight: 600;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
-}
-
-.vertebr-btn-primary:hover:not(:disabled) {
-  background: linear-gradient(180deg, #dbbc88 0%, #d0ad72 100%);
-  border-color: #c4a574;
-}
-
-.vertebr-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.vertebr-status {
-  font-family: var(--vb-mono);
-  font-size: 0.75rem;
-  color: var(--vb-text-muted);
-  letter-spacing: 0.02em;
-}
-
-.vertebr-status[data-tone="ok"] {
-  color: var(--vb-ok);
-}
-
-.vertebr-status[data-tone="danger"] {
-  color: var(--vb-danger);
-}
-
-/* ── States ──────────────────────────────────────────── */
-
-.vertebr-loading,
-.vertebr-error {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  background: var(--vb-bg);
-  color: var(--vb-text);
-  font-family: var(--vb-font);
-}
-
-.vertebr-login {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 1.5rem;
-  background:
-    radial-gradient(
-      900px 500px at 50% 0%,
-      rgba(201, 166, 107, 0.1),
-      transparent 60%
-    ),
-    var(--vb-bg);
-  color: var(--vb-text);
-  font-family: var(--vb-font);
-}
-
-.vertebr-login-card {
-  width: min(100%, 400px);
-  display: grid;
-  gap: 1.25rem;
-  padding: 1.6rem;
-  border: 1px solid var(--vb-border);
-  border-radius: 12px;
-  background: var(--vb-bg-elevated);
-  box-shadow: var(--vb-shadow);
-}
-
-.vertebr-login-card h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  letter-spacing: -0.02em;
-}
-
-.vertebr-login-card p {
-  margin: 0.4rem 0 0;
-  color: var(--vb-text-muted);
-  line-height: 1.5;
-}
-
-.vertebr-login-form {
-  display: grid;
-  gap: 0.9rem;
-}
-
-.vertebr-error {
-  color: var(--vb-danger);
-}
-
-@media (max-width: 720px) {
-  .vertebr-form-fields {
-    grid-template-columns: 1fr;
-  }
-
-  .vertebr-field[data-span="wide"] {
-    grid-column: 1 / -1;
-  }
-}
-
-@media (max-width: 860px) {
-  .vertebr-root {
-    grid-template-columns: 1fr;
-  }
-
-  .vertebr-sidebar {
-    position: relative;
-    height: auto;
-    border-right: 0;
-    border-bottom: 1px solid var(--vb-border);
-  }
-
-  .vertebr-main {
-    padding: 1.25rem 1rem 2rem;
-  }
-}
+/* Public stylesheet entry — see ./styles/ for partials. */
+@import "./styles/index.css";