
/* DB Hosting shared inner-page / portal styling */
.qx-inner-hero{
  background:linear-gradient(155deg,#080d18,#111b31);
  color:#fff;
  padding:58px 0 46px;
  border-bottom:1px solid #26344c;
}
.qx-inner-hero h1,.qx-inner-hero h2{
  margin:8px 0 10px;
  color:#fff;
  letter-spacing:-.04em;
}
.qx-inner-hero p{color:#aab6c8;max-width:760px}
.qx-page{padding:55px 0 80px;background:#f6f8fb;min-height:65vh}
.qx-page-white{padding:55px 0 80px;background:#fff;min-height:65vh}
.qx-panel{
  background:#fff;
  border:1px solid #e1e6ee;
  border-radius:18px;
  padding:24px;
  box-shadow:0 12px 35px rgba(17,24,39,.05);
}
.qx-panel + .qx-panel{margin-top:18px}
.qx-panel h2,.qx-panel h3{margin-top:0}
.qx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.qx-table-wrap{
  overflow:auto;
  background:#fff;
  border:1px solid #e1e6ee;
  border-radius:16px;
}
.qx-table{width:100%;border-collapse:collapse;min-width:760px}
.qx-table th{background:#f8fafc;text-align:left;padding:14px;color:#475467;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.qx-table td{padding:14px;border-top:1px solid #edf0f4;vertical-align:top}
.qx-form-stack{display:grid;gap:14px}
.qx-form-stack label{font-weight:750;color:#344054;display:grid;gap:6px}
.qx-form-stack input,.qx-form-stack select,.qx-form-stack textarea{
  width:100%;font:inherit;padding:12px 13px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#101828
}
.qx-form-stack input:focus,.qx-form-stack select:focus,.qx-form-stack textarea:focus{
  outline:2px solid rgba(124,134,255,.18);border-color:#7c86ff
}
.qx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 15px;border-radius:9px;border:0;
  background:#111827;color:#fff!important;font-weight:800;cursor:pointer;text-decoration:none
}
.qx-btn:hover{filter:brightness(1.08)}
.qx-btn-secondary{background:#fff!important;color:#111827!important;border:1px solid #d0d5dd}
.qx-btn-danger{background:#b42318!important}
.qx-btn-success{background:#067647!important}
.qx-btn-small{padding:8px 11px;font-size:13px}
.qx-alert{padding:13px 14px;border-radius:10px;margin:14px 0}
.qx-alert-success{background:#ecfdf3;border:1px solid #abefc6;color:#067647}
.qx-alert-error{background:#fff5f5;border:1px solid #f0b8b8;color:#b42318}
.qx-alert-info{background:#eef4ff;border:1px solid #c7d7fe;color:#3538cd}
.qx-status-badge{
  display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;
  font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:#eef2f6;color:#475467
}
.qx-status-active{background:#ecfdf3;color:#067647}
.qx-status-awaiting_payment{background:#fffaeb;color:#b54708}
.qx-status-hosting_setup,.qx-status-paid{background:#eef4ff;color:#3538cd}
.qx-status-cancelled,.qx-status-suspended{background:#fff1f3;color:#c01048}
.qx-portal-header{background:rgba(8,13,24,.97);border-bottom:1px solid #26344c}
.qx-portal-nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.qx-portal-links{display:flex!important;gap:10px;align-items:center;flex-wrap:wrap}
.qx-portal-links a{
  color:#cbd5e1!important;padding:8px 10px;border-radius:8px;font-weight:750;font-size:14px
}
.qx-portal-links a:hover{color:#fff!important;background:#111b2e}
.qx-portal-links .active{background:#18253b;color:#fff!important}
.qx-breadcrumb{font-size:13px;color:#98a2b3;margin-bottom:8px}
.qx-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qx-kpi{background:#fff;border:1px solid #e1e6ee;border-radius:15px;padding:18px}
.qx-kpi small{display:block;color:#667085;text-transform:uppercase;font-size:11px;letter-spacing:.05em;font-weight:850}
.qx-kpi strong{display:block;font-size:28px;margin-top:5px;letter-spacing:-.03em}
.qx-ticket-card{background:#fff;border:1px solid #e1e6ee;border-radius:15px;padding:18px;margin:12px 0}
.qx-message{padding:14px 16px;border-radius:14px;margin:12px 0;max-width:85%}
.qx-message.customer{background:#eef2ff;margin-left:auto}
.qx-message.admin{background:#fff;border:1px solid #e1e6ee}
.qx-muted{color:#667085}
@media(max-width:900px){
  .qx-grid-2,.qx-grid-3,.qx-kpi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .qx-portal-nav{align-items:flex-start;flex-direction:column;padding:12px 0}
  .qx-portal-links{width:100%}
  .qx-grid-2,.qx-grid-3,.qx-kpi-grid{grid-template-columns:1fr}
}
