/* 2CU Support design bridge. Shared visual language for connector/dashboard surfaces. */
:root {
  --swtt-success: #2f7d57;
  --swtt-warning: #b7791f;
  --swtt-danger: #b74747;
  --swtt-info: #3d6f8f;
  --swtt-focus: rgba(201,154,62,.42);
}

.swtt-status-pill,
.cu2-status-pill,
.cu2-support-status {
  display:inline-flex; align-items:center; gap:7px; min-height:30px;
  padding:5px 10px; border:1px solid var(--swtt-border); border-radius:999px;
  background:#fff; color:var(--swtt-dark); font-size:12px; font-weight:700;
  line-height:1; box-sizing:border-box;
}
.swtt-status-pill::before,
.cu2-status-pill::before,
.cu2-support-status::before {
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 7px;
}
.swtt-status-pill.is-ok,.cu2-status-pill.is-ok,.cu2-support-status.is-connected { color:var(--swtt-success); }
.swtt-status-pill.is-warning,.cu2-status-pill.is-warning { color:var(--swtt-warning); }
.swtt-status-pill.is-error,.cu2-status-pill.is-error { color:var(--swtt-danger); }
.swtt-status-pill.is-info,.cu2-status-pill.is-info { color:var(--swtt-info); }

.cu2-support-card,
.cu2-card {
  background:#fff; border:1px solid var(--swtt-border); border-radius:var(--swtt-radius-lg);
  box-shadow:0 4px 20px rgba(0,0,0,.04); padding:20px;
}
.cu2-support-card h2,.cu2-support-card h3,.cu2-card h2,.cu2-card h3 {
  font-family:'Fraunces',Georgia,serif; color:var(--swtt-dark); margin-top:0;
}
.cu2-support-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.cu2-support-meta { color:rgba(20,24,26,.66); font-size:12px; }
.cu2-support-value { color:var(--swtt-dark); font-weight:700; }
.cu2-support-action,
.cu2-btn-primary {
  appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:10px 16px; border-radius:var(--swtt-radius-md);
  background:var(--swtt-primary); color:#fff; font-weight:700; text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cu2-support-action:hover,.cu2-btn-primary:hover { background:var(--swtt-primary-hover); transform:translateY(-1px); }
.cu2-btn-secondary { background:var(--swtt-cream-surface); color:var(--swtt-dark); }
.cu2-btn-danger { background:var(--swtt-danger); color:#fff; }
.cu2-support-action:focus-visible,.cu2-btn-primary:focus-visible,
.swtt-btn-primary:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--swtt-focus); outline-offset:2px;
}
.cu2-support-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--swtt-border); border-radius:var(--swtt-radius-md); background:#fff; }
.cu2-support-table th { background:var(--swtt-dark); color:var(--swtt-cream); font-size:11px; letter-spacing:.04em; text-transform:uppercase; text-align:left; padding:11px 12px; }
.cu2-support-table td { padding:12px; border-top:1px solid var(--swtt-border); font-size:13px; vertical-align:middle; }
.cu2-support-table tr:hover td { background:rgba(247,244,236,.55); }
.cu2-health-meter { height:8px; background:var(--swtt-cream-surface); border-radius:999px; overflow:hidden; }
.cu2-health-meter > span { display:block; height:100%; border-radius:inherit; background:var(--swtt-gold); }
@media (max-width:700px) {
  .cu2-support-card,.cu2-card { padding:16px; }
  .cu2-support-table { display:block; overflow-x:auto; white-space:nowrap; }
}