.card { border:1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 10px; }
.card h3, .card h4 { margin: 0 0 6px; }
.section-card { display:flex; flex-direction:column; gap:12px; min-height: 100%; }
.section-card-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.section-card-actions, .page-actions, .state-actions { display:flex; gap:8px; flex-wrap:wrap; }
.list { display:grid; gap: 7px; margin-top: 8px; }
.item { border:1px solid var(--line); background: #101b33; border-radius: 9px; padding: 9px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.badge { border:1px solid #3c5f95; border-radius:999px; color:#c4dbff; padding:2px 8px; font-size:11px; }
.status { border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:11px; }
.status.ok { border-color:#2f7d5e; color:#a5e4c5; }
.status.warn { border-color:#8f6e36; color:#ffd694; }
.status.danger { border-color:#8f4343; color:#ffb6b6; }
.cta { display:inline-block; border:1px solid #3b5f95; background:#17335f; color:#e4eeff; border-radius:8px; padding:7px 10px; font-size:12px; margin-right:6px; margin-top:6px; cursor:pointer; }
.cta.secondary { border-color: var(--line); background: transparent; color: var(--muted); }
.table { width:100%; border-collapse: collapse; font-size:12px; margin-top:8px; }
.table th, .table td { border-bottom:1px solid var(--line); text-align:left; padding:6px 5px; }
.sql-editor { width:100%; min-height:180px; resize:vertical; background:#0e172d; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12px; }
.input { width:100%; background:#0e172d; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; }
.toolbar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.metric-number { font-size: 22px; font-weight: 700; margin: 6px 0; }
.panel-state { border:1px dashed var(--line); border-radius:8px; padding:10px; color:var(--muted); }
.panel-state.error { border-color:#8f4343; color:#ffb6b6; }
.state-block { display:flex; gap:12px; align-items:flex-start; border:1px dashed var(--line); background:#0f1930; border-radius:10px; padding:14px; color:var(--muted); }
.state-block.compact { padding:10px; }
.state-block.error { border-color:#8f4343; background:#211522; color:#ffd2d2; }
.state-icon { width:28px; height:28px; border-radius:999px; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-weight:700; flex: 0 0 28px; }
.state-block h3 { margin:0 0 6px; color:var(--text); font-size:14px; }
.state-block p { margin:0; line-height:1.5; }
.state-detail { margin:10px 0 0; padding:10px; border-radius:8px; background:#0c1426; border:1px solid rgba(255,255,255,0.06); color:#cfdcff; white-space:pre-wrap; font-size:11px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.page-header h2 { margin:4px 0 0; font-size:22px; }
.page-eyebrow { margin:0; color:var(--accent); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.page-subtitle { margin:6px 0 0; color:var(--muted); max-width:72ch; line-height:1.5; }

.item.disabled { opacity:.55; cursor:not-allowed; pointer-events:none; background:#0d1526; }


.frontend-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.frontend-app-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(8, 15, 30, 0.72);
  overflow: hidden;
}

.frontend-app-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 1rem;
}

.frontend-app-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.frontend-app-card-head h3 {
  margin-bottom: 0.35rem;
}

.frontend-app-card-head p {
  margin: 0;
  color: var(--text-muted, #9ca3af);
}

.frontend-app-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.frontend-app-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.frontend-app-meta span {
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
}

.frontend-app-meta strong {
  word-break: break-word;
}

.frontend-app-card-actions {
  padding: 0 1rem 1rem;
}

.frontend-app-form .form-grid {
  display: grid;
  gap: 1rem;
}

.frontend-app-form .form-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontend-app-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.frontend-app-form .full-width {
  grid-column: 1 / -1;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 30;
}

.confirm-dialog {
  width: min(100%, 28rem);
  padding: 1.25rem;
}

.cta.danger {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.panel-state.success {
  border-color: rgba(74, 222, 128, 0.35);
}

@media (max-width: 720px) {
  .frontend-app-form .form-grid.two-columns,
  .frontend-app-meta-grid {
    grid-template-columns: 1fr;
  }

  .frontend-app-card-head {
    flex-direction: column;
  }
}