.back-link { color: #60a5fa; text-decoration: none; font-size: 0.875rem; }
.back-link:hover { text-decoration: underline; }

/* ── Architecture flow ── */
.flow {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 16px;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: #0f172a;
  min-width: 130px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.node-icon { font-size: 1.5rem; }
.node-sub  { font-size: 0.72rem; color: #64748b; font-weight: 400; }

.node-cortexfs { border-color: #3b82f6; }
.node-policy   { border-color: #7c3aed; }
.node-storage  { border-color: #4ade80; }

.flow-arrow { font-size: 1.4rem; color: #334155; padding: 0 8px; }

/* ── Policy cards ── */
.policy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 700px) { .policy-cards { grid-template-columns: 1fr; } }

.policy-option {
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.policy-option:hover { border-color: #475569; }
.policy-option.active { outline: 2px solid currentColor; }

.tier-core.active    { border-color: #4ade80; background: #14532d1a; }
.tier-pro.active     { border-color: #60a5fa; background: #1e3a8a1a; }
.tier-enterprise.active { border-color: #a78bfa; background: #4c1d951a; }

.po-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.po-badge  { font-family: monospace; font-size: 0.72rem; padding: 2px 7px; border-radius: 6px; }
.po-tier   { font-size: 0.72rem; color: #64748b; }

.tier-core .po-badge       { background: #14532d; color: #86efac; }
.tier-pro .po-badge        { background: #1e3a8a; color: #93c5fd; }
.tier-enterprise .po-badge { background: #4c1d95; color: #c4b5fd; }

.policy-option p  { color: #94a3b8; font-size: 0.875rem; margin: 0 0 10px; line-height: 1.5; }
.policy-option ul { color: #64748b; font-size: 0.8rem; padding-left: 16px; margin: 0; line-height: 1.7; }

/* ── BYOS config ── */
.byos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 600px) { .byos-grid { grid-template-columns: 1fr; } }

.byos-field label { display: block; font-size: 0.75rem; color: #64748b; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.byos-field input,
.byos-field select {
  width: 100%;
  box-sizing: border-box;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 12px;
  color: #e2e8f0;
  font-size: 0.875rem;
}
.byos-field input:focus,
.byos-field select:focus { outline: none; border-color: #3b82f6; }

/* ── Rules table ── */
.rules-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.875rem; }
.rules-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid #334155; color: #94a3b8; }
.rules-table td { padding: 6px 8px; border-bottom: 1px solid #1e293b; }
.rule-input  { background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: 4px 8px; color: #e2e8f0; font-size: 0.8rem; width: 100%; box-sizing: border-box; }
.rule-select { background: #0f172a; border: 1px solid #334155; border-radius: 6px; padding: 4px 8px; color: #e2e8f0; font-size: 0.8rem; width: 100%; }
.btn-del  { background: #7f1d1d; color: #fca5a5; border: none; border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 0.8rem; }
.btn-add  { margin-top: 12px; background: transparent; border: 1px dashed #334155; color: #64748b; border-radius: 8px; padding: 7px 16px; cursor: pointer; font-size: 0.875rem; }
.btn-add:hover { border-color: #475569; color: #94a3b8; }

/* ── Config preview ── */
.config-preview {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.config-preview pre { margin: 0; font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }

.deploy-actions { display: flex; align-items: center; gap: 14px; }
.btn-deploy { background: #7c3aed; padding: 10px 24px; font-size: 1rem; }
.btn-deploy:hover { background: #6d28d9; }

.deploy-status { font-size: 0.875rem; }
.deploy-status.deploying { color: #60a5fa; }
.deploy-status.deployed  { color: #4ade80; }