body.portal-private {
  background:
    radial-gradient(ellipse at 85% 2%, rgb(126 30 74 / 7%), transparent 42rem),
    radial-gradient(ellipse at 5% 40%, rgb(23 72 82 / 5%), transparent 38rem),
    #080b0e;
}

.portal-dashboard {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.portal-dashboard > [data-link-rotation-status]:empty {
  display: none;
}

.portal-surface {
  min-width: 0;
  border: 1px solid rgb(126 158 181 / 20%);
  border-radius: 22px;
  background: linear-gradient(130deg, rgb(24 31 38 / 70%), rgb(13 18 23 / 85%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.portal-hero {
  position: relative;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) minmax(170px, .8fr) minmax(260px, .88fr);
  align-items: center;
  gap: 16px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 2% 5%, rgb(25 169 142 / 10%), transparent 50%),
    radial-gradient(ellipse at 102% 0%, rgb(211 37 113 / 16%), transparent 54%),
    linear-gradient(135deg, #0c1519, #101018);
}

.portal-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.portal-status-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-status-light {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgb(84 220 174 / 24%);
  border-radius: 50%;
  color: #64ebc1;
  background: rgb(32 143 116 / 19%);
  box-shadow: 0 0 26px rgb(46 204 158 / 15%);
}

.portal-status-light .ui-icon {
  width: 24px;
  height: 24px;
}

.portal-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.portal-hero h1 {
  margin: 0;
  color: #6de7c2;
  font-size: clamp(1.5rem, 2.25vw, 2rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.16;
}

.portal-hero.info h1 { color: #9bd7f6; }
.portal-hero.warn h1 { color: var(--warning); }
.portal-hero.danger h1 { color: var(--danger); }

.portal-hero.info .portal-status-light {
  border-color: rgb(111 192 234 / 25%);
  color: #9bd7f6;
  background: rgb(33 106 146 / 18%);
  box-shadow: 0 0 26px rgb(55 147 199 / 10%);
}

.portal-hero.warn .portal-status-light,
.portal-hero.danger .portal-status-light {
  border-color: rgb(236 153 98 / 25%);
  color: var(--warning);
  background: rgb(167 82 58 / 16%);
  box-shadow: none;
}

.portal-hero-description {
  max-width: 370px;
  margin: 13px 0 20px;
  color: #b0bdc8;
  font-size: .875rem;
  line-height: 1.55;
}

.portal-expiry strong {
  display: block;
  font-size: 1.17rem;
  font-weight: 630;
}

.portal-expiry em {
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 740;
}

.portal-expiry.warn em { color: var(--warning); }

.portal-expiry strong > span {
  color: var(--text-secondary);
  font-size: .9rem;
}

.portal-expiry p {
  margin: 3px 0 21px;
  color: #b0bdc8;
  font-size: .83rem;
}

.portal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-hero-actions .btn {
  min-height: 45px;
  padding: 10px 15px;
  font-size: .81rem;
  font-weight: 720;
}

.portal-hero-actions .primary > span {
  margin-left: 7px;
  font-size: 1.2rem;
}

.portal-globe {
  position: relative;
  align-self: stretch;
  min-height: 260px;
  display: grid;
  align-content: center;
  justify-items: center;
  pointer-events: none;
  overflow: clip;
}

.portal-globe img {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 330px;
  max-width: none;
  height: 330px;
  transform: translate(-50%, -49%);
}

.portal-globe-label {
  margin-top: 12px;
  padding: 7px 14px;
  border: 1px solid rgb(98 185 211 / 22%);
  border-radius: 9px;
  color: #d5e9ee;
  background: rgb(6 17 25 / 88%);
  box-shadow: 0 5px 22px #061017;
  font-size: .75rem;
  font-weight: 760;
  letter-spacing: .1em;
}

.portal-globe-label span {
  margin-left: 6px;
  color: #7dabbb;
  font-size: .6rem;
}

.portal-globe small {
  position: absolute;
  bottom: 27px;
  color: #98b7c5;
  font-size: .73rem;
}

.portal-traffic {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgb(175 153 181 / 12%);
  border-radius: 19px;
  background: linear-gradient(140deg, rgb(76 48 65 / 23%), rgb(34 35 45 / 40%));
}

.portal-traffic-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.portal-traffic h2 {
  margin: 0;
  color: #dce0e7;
  font-size: .96rem;
  font-weight: 580;
}

.portal-traffic-heading > span {
  color: #a3aebb;
  font-size: .65rem;
  text-align: right;
}

.portal-traffic-total {
  margin: 6px 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}

.portal-traffic-total strong {
  font-size: 1.45rem;
  font-weight: 730;
}
.portal-traffic-total > span { font-size: 1rem; }

.portal-traffic-total > small {
  margin-left: auto;
  color: #b9bfc9;
  font-size: .75rem;
}

.portal-traffic-meter {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgb(166 155 170 / 10%);
  border-radius: 8px;
  background: rgb(160 136 156 / 13%);
}

.portal-traffic-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2787b6, #61ddcb);
}
.portal-traffic-meter.unknown { background: repeating-linear-gradient(110deg, rgb(119 159 184 / 10%) 0 7px, transparent 7px 14px); }
.portal-traffic.low .portal-traffic-meter > span { background: var(--warning); }
.portal-traffic.exhausted .portal-traffic-meter > span { background: var(--danger); }

.portal-traffic-stats {
  margin: 14px 0;
  display: grid;
  gap: 5px;
  font-size: .75rem;
}

.portal-traffic-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.portal-traffic-stats dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b5bfcd;
}

.portal-traffic-stats dd {
  margin: 0;
  text-align: right;
}

.portal-traffic-stats i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #389bc7;
}
.portal-traffic-stats > div + div i { background: #9eafc3; }

.portal-traffic-note {
  margin: 10px 0;
  color: #b9c4ce;
  font-size: .73rem;
  line-height: 1.5;
}
.portal-traffic.low .portal-traffic-note { color: var(--warning); }
.portal-traffic.exhausted .portal-traffic-note { color: var(--danger); }

.portal-traffic-details {
  border: 1px solid rgb(171 188 208 / 21%);
  border-radius: 10px;
  background: rgb(255 255 255 / 2%);
}

.portal-traffic-details summary {
  min-height: 44px;
  padding: 9px 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-size: .74rem;
}
.portal-traffic-details summary::-webkit-details-marker { display: none; }
.portal-traffic-details summary > span { font-size: 1.1rem; }
.portal-traffic-details[open] summary > span { transform: rotate(45deg); }

.portal-traffic-details > div {
  padding: 0 12px 12px;
  color: #b9c4ce;
  font-size: .75rem;
}
.portal-traffic-details p { margin: 8px 0 0; }

.access-overview { padding: 24px; }

.portal-section-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

.portal-section-heading > div {
  min-width: 0;
  flex: 1;
}

.portal-section-heading h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -.025em;
}

.portal-section-heading p {
  margin: 4px 0 0;
  color: #adbac7;
  font-size: .84rem;
}

.portal-section-icon {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgb(60 154 197 / 17%);
  border-radius: 13px;
  color: #70d9fa;
  background: rgb(32 112 155 / 13%);
}

.portal-section-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.portal-section-icon.warm {
  color: #ffaa4b;
  background: rgb(190 111 42 / 14%);
  border-color: rgb(221 141 72 / 17%);
}

.portal-section-icon.pink {
  color: #e181ef;
  background: rgb(131 45 149 / 15%);
  border-color: rgb(180 82 197 / 17%);
}

.btn.outline-info {
  border-color: rgb(56 152 206 / 43%);
  color: #81d6fb;
  background: rgb(25 95 137 / 10%);
  font-size: .79rem;
}

.btn.outline-info:hover {
  border-color: #73c9ec;
  background: rgb(25 95 137 / 20%);
}

.access-overview-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.access-overview-grid > div {
  min-width: 0;
  padding: 17px;
  display: flex;
  gap: 12px;
  border: 1px solid rgb(165 189 208 / 10%);
  border-radius: 14px;
  background: rgb(169 194 216 / 2%);
}

.access-overview-grid .ui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: #8fadb9;
}

.access-overview-grid strong {
  font-size: .85rem;
  font-weight: 630;
}

.access-overview-grid p {
  margin: 5px 0 0;
  color: #aebbc8;
  font-size: .77rem;
  line-height: 1.6;
}

.portal-text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #77cef7;
  font-size: .76rem;
}

.portal-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.portal-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.portal-quick-card {
  padding: 20px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  background: radial-gradient(ellipse at 100% 0%, rgb(181 42 118 / 8%), transparent 70%), #11161c;
}

.portal-quick-card .portal-section-icon {
  width: 42px;
  height: 42px;
}

.portal-quick-card h2 {
  margin: 0 0 8px;
  font-size: .89rem;
  font-weight: 650;
}

.portal-quick-card strong {
  font-size: .84rem;
  font-weight: 560;
}

.portal-quick-card p {
  margin: 3px 0 0;
  color: #aebbc8;
  font-size: .76rem;
}

.portal-quick-card > .btn {
  grid-column: 2;
  justify-self: start;
  min-height: 44px;
  padding: 8px 11px;
  font-size: .73rem;
}

.portal-dashboard .dashboard-notice {
  margin: 0;
  padding: 16px 22px;
  border-radius: 15px;
}
.portal-dashboard .dashboard-notice p { font-size: .84rem; }

.portal-dashboard .support-panel-v2 {
  padding: 22px;
  border: 1px solid rgb(48 146 201 / 36%);
  border-radius: 22px;
  background: linear-gradient(110deg, rgb(18 83 122 / 23%), rgb(16 27 37 / 70%));
}
.portal-dashboard .support-panel-v2 h2 { font-size: 1.15rem; }
.portal-dashboard .support-panel-v2 p { font-size: .82rem; }
.portal-dashboard .support-panel-v2 .btn { font-size: .81rem; }

@media (max-width: 1120px) {
  .portal-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
    gap: 24px;
  }

  .portal-globe {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 29%;
    bottom: 0;
    width: 250px;
    opacity: .3;
  }
  .portal-globe-label, .portal-globe small { display: none; }
  .portal-hero-description { max-width: 340px; }
}

@media (max-width: 850px) {
  .portal-hero {
    padding: 22px;
    gap: 20px;
  }
  .portal-status-heading { gap: 10px; }

  .portal-status-light {
    width: 42px;
    height: 42px;
  }
  .portal-status-heading h1 { font-size: 1.5rem; }
  .portal-hero-actions .btn { flex: 1 1 auto; }
  .portal-section-heading { flex-wrap: wrap; }
  .portal-section-heading > .btn { margin-left: 60px; }

  .access-overview-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .access-overview-grid > div { padding: 13px 16px; }
  .portal-quick-grid { gap: 10px; }

  .portal-quick-card {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .portal-quick-card > .btn { grid-column: 1; }
}

@media (max-width: 640px) {
  .portal-dashboard { gap: 14px; }
  .portal-surface { border-radius: 19px; }

  .portal-hero {
    padding: 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .portal-globe {
    top: 0;
    right: -5px;
    bottom: auto;
    width: 170px;
    min-height: 180px;
    opacity: .18;
  }

  .portal-globe img {
    width: 170px;
    height: 170px;
  }
  .portal-status-heading h1 { font-size: 1.5rem; }
  .portal-eyebrow { font-size: .62rem; }

  .portal-hero-description {
    margin: 12px 0 18px;
    font-size: .82rem;
  }
  .portal-expiry strong { font-size: 1rem; }
  .portal-expiry em { font-size: 1.18rem; }

  .portal-expiry p {
    margin-bottom: 17px;
    font-size: .78rem;
  }

  .portal-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .portal-hero-actions .btn {
    min-height: 46px;
    font-size: .84rem;
  }
  .portal-hero-actions .ghost { min-height: 44px; }

  .portal-traffic {
    padding: 17px;
    border-radius: 14px;
  }
  .portal-traffic-details summary { min-height: 44px; }
  .access-overview { padding: 18px; }

  .portal-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .portal-section-heading { gap: 10px; }

  .portal-section-heading h2 {
    font-size: 1.1rem;
    line-height: 1.25;
  }
  .portal-section-heading p { font-size: .76rem; }

  .portal-section-heading > .btn {
    width: 100%;
    margin: 5px 0 0;
    min-height: 44px;
  }
  .access-overview-grid { margin-top: 16px; }

  .access-overview-grid > div {
    padding: 13px;
    gap: 10px;
  }
  .portal-quick-grid { grid-template-columns: minmax(0, 1fr); }

  .portal-quick-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 18px;
    gap: 12px;
  }

  .portal-quick-card .portal-section-icon {
    width: 38px;
    height: 38px;
  }

  .portal-quick-card > .btn {
    grid-column: 2;
    min-height: 44px;
  }

  .portal-quick-card h2 {
    margin-bottom: 5px;
    font-size: .92rem;
  }

  .portal-dashboard .support-panel-v2 {
    padding: 18px;
    border-radius: 19px;
  }
  .portal-dashboard .dashboard-notice { padding: 15px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-dashboard *, .portal-dashboard *::before, .portal-dashboard *::after {
    scroll-behavior: auto;
    transition: none;
  }
}