:root {
  --vp-bg:#f5f5f2;
  --vp-surface:#ffffff;
  --vp-dark:#0c0d0f;
  --vp-dark-soft:#15171a;
  --vp-text:#18191b;
  --vp-muted:#707277;
  --vp-border:#dddcd6;
  --vp-border-dark:#2d3034;
  --vp-gold:#c5a15a;
  --vp-gold-soft:#f4ead5;
  --vp-danger:#9a3c3c;
  --vp-success:#34715a;
  --vp-radius:5px;
}

* {
  box-sizing:border-box;
}

html,
body {
  min-height:100%;
}

body {
  margin:0;
  background:var(--vp-bg);
  color:var(--vp-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing:antialiased;
}

button,
input,
select,
textarea {
  font:inherit;
}

button,
a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

img {
  display:block;
  max-width:100%;
}

[hidden] {
  display:none !important;
}

.vp-loading {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  color:var(--vp-muted);
  font-size:13px;
}

.vp-loading img {
  width:126px;
}

.vp-login {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px,.82fr) 1.18fr;
}

.vp-login-brand {
  background:var(--vp-dark);
  color:#fff;
  padding:54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
}

.vp-login-brand > a img {
  width:130px;
}

.vp-login-brand > div {
  max-width:520px;
}

.vp-login-brand h1 {
  font-size:clamp(40px,5vw,68px);
  line-height:1.01;
  letter-spacing:-.05em;
  margin:0 0 24px;
}

.vp-login-brand p:not(.vp-kicker) {
  color:#a3a5aa;
  font-size:16px;
  line-height:1.65;
}

.vp-login-brand small {
  color:#686b70;
}

.vp-kicker {
  margin:0 0 12px;
  color:#8b6b32;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  font-size:10px;
}

.vp-login-brand .vp-kicker {
  color:#d5b977;
}

.vp-login-panel {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px;
  background:#f5f5f2;
}

.vp-login-box {
  width:min(100%,430px);
}

.vp-login-box h2 {
  margin:0;
  font-size:34px;
  letter-spacing:-.035em;
}

.vp-muted {
  color:var(--vp-muted);
}

.vp-login-box > .vp-muted {
  margin:8px 0 30px;
}

.vp-login form {
  display:grid;
  gap:17px;
}

label {
  display:grid;
  gap:7px;
  color:#3b3d41;
  font-size:12px;
  font-weight:700;
}

input,
select,
textarea {
  width:100%;
  border:1px solid #cfcfc9;
  border-radius:var(--vp-radius);
  background:#fff;
  color:var(--vp-text);
  min-height:44px;
  padding:10px 12px;
  outline:none;
}

textarea {
  resize:vertical;
  min-height:120px;
}

input:focus,
select:focus,
textarea:focus {
  border-color:var(--vp-gold);
}

.vp-checkbox {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:9px;
  font-weight:500;
}

.vp-checkbox input {
  width:16px;
  min-height:16px;
  height:16px;
}

.vp-button {
  min-height:42px;
  border:1px solid transparent;
  border-radius:var(--vp-radius);
  padding:0 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
}

.vp-button:disabled {
  cursor:not-allowed;
  opacity:.55;
}

.vp-button-primary {
  background:var(--vp-dark);
  color:#fff;
  border-color:var(--vp-dark);
}

.vp-button-primary:hover:not(:disabled) {
  background:#222428;
}

.vp-button-secondary {
  background:#fff;
  border-color:var(--vp-border);
  color:#303237;
}

.vp-form-message {
  min-height:20px;
  margin-top:13px;
  color:var(--vp-danger);
  font-size:12px;
}

.vp-back-link {
  display:inline-block;
  margin-top:22px;
  color:var(--vp-muted);
  font-size:12px;
}

.vp-app {
  min-height:100vh;
  display:grid;
  grid-template-columns:238px 1fr;
}

.vp-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:238px;
  background:var(--vp-dark);
  color:#fff;
  padding:26px 15px;
  display:flex;
  flex-direction:column;
  z-index:60;
}

.vp-sidebar-brand {
  padding:5px 10px 27px;
  border-bottom:1px solid var(--vp-border-dark);
}

.vp-sidebar-brand img {
  width:115px;
}

.vp-sidebar-brand span {
  display:block;
  margin-top:8px;
  color:#70747a;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.vp-nav {
  display:grid;
  gap:4px;
  margin-top:22px;
}

.vp-nav button {
  appearance:none;
  border:0;
  background:transparent;
  color:#92959a;
  border-radius:4px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  font-weight:650;
}

.vp-nav button span {
  width:22px;
  color:#5f6267;
  font-size:9px;
}

.vp-nav button.active {
  background:#1c1e22;
  color:#fff;
  border-left:2px solid var(--vp-gold);
}

.vp-nav button.active span {
  color:var(--vp-gold);
}

.vp-sidebar-footer {
  margin-top:auto;
  border-top:1px solid var(--vp-border-dark);
  padding:18px 10px 0;
  display:grid;
  gap:10px;
}

.vp-sidebar-footer a {
  color:#777a7f;
  font-size:11px;
}

.vp-shell {
  grid-column:2;
  min-width:0;
}

.vp-topbar {
  height:76px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--vp-border);
  display:flex;
  align-items:center;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:40;
}

.vp-topbar > div:first-of-type {
  display:grid;
}

.vp-topbar small {
  color:var(--vp-muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.vp-topbar strong {
  font-size:13px;
}

.vp-user {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.vp-user > div {
  display:grid;
  text-align:right;
}

.vp-user span {
  color:var(--vp-muted);
  font-size:10px;
}

.vp-menu-button {
  display:none;
  margin-right:12px;
  width:40px;
  height:40px;
  border:1px solid var(--vp-border);
  background:#fff;
  border-radius:var(--vp-radius);
}

.vp-main {
  padding:34px;
  max-width:1320px;
  margin:0 auto;
}

.vp-view {
  display:none;
}

.vp-view.active {
  display:block;
}

.vp-page-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:28px;
}

.vp-page-heading h1 {
  margin:0;
  font-size:34px;
  letter-spacing:-.04em;
}

.vp-status {
  border:1px solid var(--vp-border);
  background:#fff;
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.vp-status[data-state="ACTIVE"],
.vp-status[data-state="TRIALING"] {
  color:var(--vp-success);
  border-color:#a8cbbb;
  background:#f3faf6;
}

.vp-status[data-state="SUSPENDED"],
.vp-status[data-state="PAST_DUE"],
.vp-status[data-state="EXPIRED"],
.vp-status[data-state="CANCELLED"] {
  color:#884747;
  border-color:#d9b6b6;
  background:#fff7f7;
}

.vp-summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:10px;
}

.vp-summary-card,
.vp-panel {
  background:#fff;
  border:1px solid var(--vp-border);
  border-radius:var(--vp-radius);
}

.vp-summary-card {
  min-height:148px;
  padding:22px;
  border-top:2px solid var(--vp-gold);
  display:flex;
  flex-direction:column;
}

.vp-summary-card span {
  color:var(--vp-muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.vp-summary-card strong {
  margin-top:auto;
  font-size:19px;
}

.vp-summary-card small {
  color:var(--vp-muted);
  margin-top:3px;
}

.vp-panel {
  padding:25px;
  margin-top:10px;
}

.vp-panel-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:22px;
}

.vp-panel-heading h2 {
  margin:0;
  font-size:20px;
  letter-spacing:-.025em;
}

.vp-text-action {
  border:0;
  background:transparent;
  color:#85672e;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}

.vp-usage-list {
  display:grid;
}

.vp-usage-row {
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(180px,1.2fr) 100px;
  gap:22px;
  align-items:center;
  min-height:68px;
  border-top:1px solid #e9e8e3;
}

.vp-usage-row:first-child {
  border-top:0;
}

.vp-usage-label strong {
  display:block;
  font-size:12px;
}

.vp-usage-label span {
  display:block;
  color:var(--vp-muted);
  font-size:10px;
  margin-top:2px;
}

.vp-usage-track {
  height:5px;
  background:#ecebe6;
  overflow:hidden;
}

.vp-usage-track i {
  display:block;
  height:100%;
  background:var(--vp-gold);
}

.vp-usage-value {
  text-align:right;
  font-size:11px;
  font-weight:800;
}

.vp-support-shortcut {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.vp-support-shortcut h2 {
  margin:0;
}

.vp-support-shortcut p {
  margin-bottom:0;
}

.vp-plan-header {
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.vp-plan-header span:first-child {
  color:var(--vp-muted);
  font-size:11px;
}

.vp-plan-header h2 {
  margin:6px 0 2px;
  font-size:28px;
}

.vp-plan-header p {
  margin:0;
  color:var(--vp-muted);
}

.vp-definition-grid {
  margin:28px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--vp-border);
}

.vp-definition-grid > div {
  padding:18px 0;
}

.vp-definition-grid dt {
  color:var(--vp-muted);
  font-size:10px;
  text-transform:uppercase;
}

.vp-definition-grid dd {
  margin:5px 0 0;
  font-weight:700;
  font-size:12px;
}

.vp-information-note {
  color:var(--vp-muted);
  font-size:11px;
  border-left:2px solid var(--vp-gold);
  padding:10px 14px;
  margin-top:16px;
}

.vp-field-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.vp-field-wide {
  grid-column:1/-1;
}

label small {
  color:var(--vp-muted);
  font-weight:500;
}

.vp-form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
}

.vp-form-footer p {
  margin:0;
  font-size:11px;
}

.vp-support-layout {
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);
  gap:10px;
}

.vp-ticket-list {
  display:grid;
  gap:6px;
}

.vp-ticket-row {
  width:100%;
  appearance:none;
  text-align:left;
  border:1px solid #e4e3dd;
  background:#fff;
  border-radius:4px;
  padding:14px;
  cursor:pointer;
}

.vp-ticket-row:hover,
.vp-ticket-row.active {
  border-color:var(--vp-gold);
}

.vp-ticket-row-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--vp-muted);
  font-size:9px;
  text-transform:uppercase;
}

.vp-ticket-row strong {
  display:block;
  margin-top:8px;
  font-size:12px;
}

.vp-ticket-row small {
  display:block;
  margin-top:5px;
  color:var(--vp-muted);
}

.vp-empty {
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--vp-muted);
  text-align:center;
  font-size:12px;
}

.vp-ticket-title {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--vp-border);
}

.vp-ticket-title h2 {
  margin:4px 0 0;
  font-size:19px;
}

.vp-ticket-title small {
  color:var(--vp-muted);
}

.vp-messages {
  margin-top:22px;
  display:grid;
  gap:9px;
}

.vp-message {
  padding:14px;
  border:1px solid #e3e2dc;
  border-radius:4px;
}

.vp-message[data-author="PORTAL_USER"],
.vp-message[data-author="TENANT_USER"] {
  border-left:2px solid var(--vp-gold);
}

.vp-message-head {
  display:flex;
  justify-content:space-between;
  color:var(--vp-muted);
  font-size:9px;
  margin-bottom:7px;
}

.vp-message p {
  white-space:pre-wrap;
  margin:0;
  font-size:12px;
  line-height:1.55;
}

.vp-attachments {
  margin-top:17px;
  display:grid;
  gap:6px;
}

.vp-attachment {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #e4e3dd;
  padding:10px 12px;
  font-size:10px;
}

.vp-attachment a {
  color:#80632e;
  font-weight:800;
}

.vp-reply {
  margin-top:20px;
  border-top:1px solid var(--vp-border);
  padding-top:20px;
}

.vp-reply textarea {
  margin-top:6px;
}

.vp-reply-actions {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.vp-reply-actions > div {
  display:flex;
  gap:7px;
}

.vp-toast {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  background:#111317;
  color:#fff;
  border-left:3px solid var(--vp-gold);
  padding:13px 16px;
  max-width:360px;
  border-radius:4px;
  font-size:11px;
}

.vp-toast.error {
  border-left-color:#b35b5b;
}

:focus-visible {
  outline:2px solid var(--vp-gold);
  outline-offset:2px;
}

@media (max-width:1000px) {

  .vp-app {
    grid-template-columns:1fr;
  }

  .vp-sidebar {
    transform:translateX(-100%);
    transition:transform .2s ease;
  }

  .vp-sidebar.open {
    transform:translateX(0);
  }

  .vp-shell {
    grid-column:1;
  }

  .vp-menu-button {
    display:block;
  }

  .vp-support-layout {
    grid-template-columns:1fr;
  }

}

@media (max-width:760px) {

  .vp-login {
    grid-template-columns:1fr;
  }

  .vp-login-brand {
    min-height:auto;
    padding:32px 24px;
    gap:60px;
  }

  .vp-login-brand small {
    display:none;
  }

  .vp-login-panel {
    padding:42px 24px 60px;
  }

  .vp-main {
    padding:24px 15px;
  }

  .vp-topbar {
    padding:0 15px;
  }

  .vp-user > div {
    display:none;
  }

  .vp-summary-grid,
  .vp-definition-grid,
  .vp-field-grid {
    grid-template-columns:1fr;
  }

  .vp-field-wide {
    grid-column:auto;
  }

  .vp-usage-row {
    grid-template-columns:1fr;
    gap:7px;
    padding:15px 0;
  }

  .vp-usage-value {
    text-align:left;
  }

  .vp-support-shortcut,
  .vp-form-footer,
  .vp-page-heading {
    align-items:flex-start;
    flex-direction:column;
  }

}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

}