:root{
  --c32-bg: #0b1220;
  --c32-card: #0f1a2e;
  --c32-border: rgba(255,255,255,.08);
  --c32-text: rgba(255,255,255,.92);
  --c32-muted: rgba(255,255,255,.68);
  --c32-soft: rgba(255,255,255,.06);
  --c32-ok: rgba(62, 255, 158, .18);
  --c32-warn: rgba(255, 196, 83, .18);
  --c32-bad: rgba(255, 92, 92, .18);
}

.cloud32-wrap{
  color: var(--c32-text);
  background: linear-gradient(135deg, rgba(15,26,46,.7), rgba(11,18,32,.85));
  border: 1px solid var(--c32-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.cloud32-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px){
  .cloud32-grid{ grid-template-columns: 1.2fr .8fr; }
}

.cloud32-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--c32-border);
  border-radius: 16px;
  padding: 16px;
}

.cloud32-title{
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px 0;
}
.cloud32-subtitle{
  font-size: 14px;
  color: var(--c32-muted);
  margin: 0 0 14px 0;
}

.cloud32-row{
  display:flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--c32-border);
}
.cloud32-row:last-child{ border-bottom: none; }

.cloud32-k{ color: var(--c32-muted); font-size: 13px; }
.cloud32-v{ font-size: 14px; }

.cloud32-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--c32-border);
  background: var(--c32-soft);
}
.cloud32-badge.ok{ background: var(--c32-ok); }
.cloud32-badge.warn{ background: var(--c32-warn); }
.cloud32-badge.bad{ background: var(--c32-bad); }

.cloud32-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.cloud32-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--c32-border);
  background: rgba(255,255,255,.05);
  color: var(--c32-text);
  text-decoration:none !important;
  font-size: 14px;
}
.cloud32-btn:hover{ background: rgba(255,255,255,.09); }

.cloud32-note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--c32-border);
  background: rgba(255,255,255,.04);
  color: var(--c32-muted);
  font-size: 13px;
}

.cloud32-error{
  border: 1px solid rgba(255,92,92,.35);
  background: rgba(255,92,92,.10);
  padding: 12px;
  border-radius: 14px;
}

.cloud32-pill{
  font-size: 12px;
  color: var(--c32-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c32-border);
  border-radius: 999px;
  padding: 4px 8px;
}

.cloud32-wrap input,
.cloud32-wrap select,
.cloud32-wrap textarea {
  background: rgba(255,255,255,0.06);
  color: var(--c32-text);
  border: 1px solid var(--c32-border);
}

.cloud32-wrap input::placeholder {
  color: var(--c32-muted);
}

.cloud32-wrap input:focus,
.cloud32-wrap select:focus,
.cloud32-wrap textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.09);
}

/* labels */
.cloud32-wrap label,
.cloud32-k {
  color: var(--c32-muted);
}