/* cPanel Extended - Server Module Client UI (Part 9) */
.cpx { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }
.cpx__wrap { max-width: 1100px; margin: 0 auto; padding: 18px 14px; }
.cpx__hero { display:flex; align-items:flex-end; justify-content:space-between; gap: 14px; margin-bottom: 12px; }
.cpx__h2 { margin:0; font-size: 20px; font-weight: 900; color:#0b1220; }
.cpx__sub { margin-top: 6px; color:#64748b; font-size: 13px; }
.cpx__pill { background: rgba(59,130,246,.12); color:#1e40af; border:1px solid rgba(59,130,246,.22); padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; }

.cpx__toolbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 12px; }

.cpx__alert { background:#fff7ed; border:1px solid #fdba74; color:#9a3412; padding: 10px 12px; border-radius: 14px; font-weight: 800; margin-bottom: 12px; }

.cpx__grid { display:grid; grid-template-columns: 340px 1fr; gap: 12px; }
@media (max-width: 900px){ .cpx__grid { grid-template-columns: 1fr; } }

.cpx__card { background:#fff; border:1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); overflow:hidden; }
.cpx__card--pad { padding: 14px; }
.cpx__card-h { font-weight: 900; color:#0b1220; margin-bottom: 8px; }
.cpx__muted { color:#64748b; font-size: 13px; }

.cpx__nav { margin-top: 10px; display:flex; flex-direction:column; gap: 8px; }
.cpx__navitem { display:block; text-decoration:none; background:#f8fafc; border:1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; font-weight: 850; color:#0b1220; }
.cpx__navitem:hover { opacity:.92; }
.cpx__navitem.is-active { border-color: rgba(59,130,246,.35); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }

.cpx__btn { display:inline-block; text-decoration:none; background:#0b1220; color:#fff; padding: 9px 12px; border-radius: 12px; font-weight: 850; font-size: 13px; }
.cpx__btn:hover { opacity: .94; }
.cpx__btn--ghost { background:#f8fafc; border:1px solid #e5e7eb; color:#0b1220; }

.cpx__badge { display:inline-block; padding: 4px 10px; border-radius: 999px; background:#f1f5f9; color:#0f172a; font-weight: 900; font-size: 12px; margin-right: 8px; }

.cpx__hr { height:1px; background:#eef2f7; margin: 12px 0; }

.cpx__tablewrap { overflow:auto; margin-top: 10px; }
.cpx__table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cpx__table th { text-align:left; font-size: 12px; color:#475569; padding: 10px 8px; border-bottom: 1px solid #e5e7eb; }
.cpx__table td { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }

.cpx__notice { background:#ecfeff; border:1px solid #a5f3fc; color:#0e7490; padding: 10px 12px; border-radius: 14px; font-weight: 800; margin-bottom: 12px; }
.cpx__notice.is-error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

.cpx__split { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px){ .cpx__split { grid-template-columns: 1fr; } }

.cpx__panel { background:#f8fafc; border:1px solid #e5e7eb; border-radius: 16px; padding: 12px; }
.cpx__panel-h { font-weight: 900; color:#0b1220; margin-bottom: 10px; }
.cpx__hint { margin-top: 10px; color:#64748b; font-size: 12px; font-weight: 700; }

.cpx__row { display:flex; gap: 10px; align-items:center; margin-bottom: 10px; }
.cpx__at { font-weight: 900; color:#64748b; }
.cpx__input { width: 100%; padding: 10px 12px; border:1px solid #e5e7eb; border-radius: 12px; background:#fff; font-weight: 700; }
.cpx__input:focus { outline:none; border-color: rgba(59,130,246,.35); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }

.cpx__grid2 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px){ .cpx__grid2 { grid-template-columns: 1fr; } }
.cpx__form { display:flex; flex-direction:column; gap: 10px; }
.cpx__label { font-weight: 900; color:#0b1220; font-size: 12px; }

.cpx__btn--danger { background:#991b1b; }
.cpx__btn--danger:hover { opacity:.94; }