/* Portal premium refinement — generated texture, transparent surfaces, dark only. */

@property --portal-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

body.portal-native {
  --pn-bg: #151515;
  --pn-surface: rgba(255, 255, 255, 0.018);
  --pn-surface-2: rgba(255, 255, 255, 0.032);
  --pn-surface-3: rgba(255, 255, 255, 0.048);
  --pn-line: rgba(255, 255, 255, 0.095);
  --pn-line-strong: rgba(255, 149, 98, 0.34);
  --pn-text: #f7f5f3;
  --pn-muted: #aaa39f;
  --pn-orange: #ff9a68;
  --pn-accent: #ff6b35;
  --pn-font-text: "Inter", "Noto Sans Sinhala", sans-serif;
  --pn-font-display: "Hanken Grotesk", "Noto Sans Sinhala", sans-serif;
  background:
    radial-gradient(ellipse 120% 72% at 54% 100%, rgba(185, 59, 18, 0.28), rgba(116, 37, 13, 0.11) 39%, transparent 72%),
    var(--pn-bg) !important;
  background-attachment: fixed !important;
}

body.portal-native::before {
  display: block !important;
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 0.8px, transparent 1.15px) !important;
  background-position: 0 0, 13px 18px;
  background-size: 29px 29px, 47px 47px;
  -webkit-mask-image: radial-gradient(ellipse 95% 86% at 58% 46%, #000 20%, rgba(0, 0, 0, 0.82) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 86% at 58% 46%, #000 20%, rgba(0, 0, 0, 0.82) 66%, transparent 100%);
  animation: portal-dot-drift 28s linear infinite;
}

body.portal-native #veil-bg-canvas,
body.portal-native #veil-scrim { display: none !important; }

.portal-native-layout,
.portal-native-main { background: transparent !important; }

.portal-native-sidebar,
.portal-native-mobile-header,
.portal-native-bottom-nav {
  background: rgba(21, 21, 21, 0.76) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
  backdrop-filter: blur(18px) saturate(110%) !important;
}

.portal-native-brand-mark { box-shadow: none !important; }
.portal-native-brand strong,
.portal-native-page-head h1,
.portal-native-card-heading h1,
.portal-native-card-heading h2,
.portal-native-section-heading h2 { font-family: var(--pn-font-display) !important; }

.portal-native-side-item.active,
.portal-native-bottom-item.active,
.portal-native-more-item.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055) !important;
}

.portal-native-card,
.portal-native-server-card,
.portal-native-server-card-compact,
.portal-native-attention,
.portal-native-alert,
.portal-native-cache-status,
.portal-native-cache-locked {
  border-color: var(--pn-line) !important;
  background: rgba(255, 255, 255, 0.022) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 24px 60px -44px rgba(0, 0, 0, 0.72) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
  backdrop-filter: blur(3px) saturate(108%) !important;
}

.portal-native-card::after {
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.18) 50%, transparent 95%) !important;
}

.portal-native-region-toggle,
.portal-native-region-toggle button,
.portal-native-connection-box,
.portal-native-stats > div,
.portal-native-tier-status,
.portal-native-inline-action .btn-ghost {
  border-color: var(--pn-line) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

.portal-native-region-toggle button.selected {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px -24px rgba(255, 255, 255, 0.32) !important;
}

.portal-native-usage-region-title strong,
.portal-native-trial-tag,
.portal-native-connection-box code { color: #f7f5f3 !important; }
.portal-native-usage-region-name em,
.portal-native-eyebrow { color: var(--pn-orange) !important; }

.portal-native-pill.success,
.portal-native-pill.info {
  color: #eee9e6 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.portal-native-compact-usage > .portal-native-days-panel { background: rgba(255, 255, 255, 0.012) !important; }
.portal-native-days-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)) !important;
}

.portal-native-billing-tabs,
.portal-native-package-choice,
.portal-native-period-choices button,
.portal-native-period-stepper button,
.portal-native-period-stepper span,
.portal-native-renew-summary,
.portal-native-renew-summary > div,
.portal-native-annual-rule,
.portal-native-empty {
  border-color: var(--pn-line) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow: none !important;
}

.portal-native-default-badge {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pn-muted) !important;
  box-shadow: none !important;
}

.portal-native-link-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

.portal-native-link-value code {
  display: flex !important;
  align-items: center;
}

.portal-native-link-prefix { flex: 0 0 auto; }
.portal-native-link-secret {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter 160ms ease, opacity 160ms ease;
}

.portal-native-link-secret.is-concealed {
  filter: blur(5px);
  opacity: 0.48;
  user-select: none;
}

.portal-native-link-visibility {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pn-muted);
  cursor: pointer;
}

.portal-native-link-visibility:hover,
.portal-native-link-visibility:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

.portal-native-link-visibility .portal-native-icon { width: 17px; height: 17px; }

.portal-native-form-frame,
.portal-native-form-frame > .server-card {
  max-width: 900px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.portal-native-form-frame .usage-hero { display: none !important; }

.portal-native-form-frame .region-speed-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 7px;
  padding: 5px 0;
  color: var(--pn-muted);
  text-decoration: none;
}

.portal-native-form-frame .region-speed-link:hover { color: #fff; }

.portal-native-settings-section,
.portal-native-setting-row {
  background: transparent !important;
  box-shadow: none !important;
}

.portal-native-settings-section { border-color: var(--pn-line) !important; }
.portal-native-setting-row { border-bottom-color: var(--pn-line) !important; }
.portal-native-settings-head,
.portal-native-settings {
  width: min(100%, 760px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.portal-native-period-picker {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.portal-native-period-stepper {
  grid-template-columns: 42px minmax(110px, 1fr) 42px !important;
  gap: 6px !important;
  margin-top: 0 !important;
}

.portal-native-period-stepper button,
.portal-native-period-stepper span {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.portal-native-period-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.035) !important; }

.portal-native-renew-submit:not(.btn-locked) {
  width: min(100%, 320px) !important;
  margin-left: auto !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11), inset 0 -18px 30px -28px rgba(255, 107, 53, 0.58) !important;
}

.portal-native-billing-tabs button.selected,
.portal-native-package-choice.selected,
.portal-native-period-choices button.selected {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07) !important;
}

.portal-native-package-choice strong,
.portal-native-package-choice.selected strong,
.portal-native-period-choices button.selected small,
.portal-native-annual-rule strong,
.portal-native-empty > span { color: #f7f5f3 !important; text-shadow: none !important; }

.portal-native-row-action,
.settings-action-button,
.customer-language-toggle,
.customer-language-toggle button.active {
  color: #eee9e6 !important;
  border-color: var(--pn-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

.portal-native-icon-button,
.portal-native-button-row button,
.portal-native-modal-actions button,
.portal-native-download-row a {
  border-color: var(--pn-line) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: #f3eeeb !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

.portal-native-button-row .portal-native-copy-link,
.portal-native-main .btn-primary {
  --portal-glow-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), inset 0 -24px 38px -30px rgba(255, 107, 53, 0.7) !important;
}

.portal-native-button-row .portal-native-copy-link {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -24px 38px -30px rgba(255, 107, 53, 0.7),
    0 0 0 1px rgba(255, 138, 86, 0.15),
    0 0 18px rgba(255, 92, 38, 0.12) !important;
}

.portal-native-button-row .portal-native-copy-link::before,
.portal-native-main .btn-primary::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background: conic-gradient(from var(--portal-glow-angle), transparent 0 70%, rgba(255, 255, 255, 0.34) 78%, #ff9a68 87%, #ff6b35 92%, transparent 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: portal-button-orbit 4.8s linear infinite;
}

.portal-native-button-row .portal-native-copy-link::before {
  padding: 1.5px;
  background: conic-gradient(from var(--portal-glow-angle), transparent 0 62%, rgba(255, 255, 255, 0.5) 73%, #ffb080 82%, #ff6b35 91%, transparent 100%) !important;
  filter: drop-shadow(0 0 5px rgba(255, 107, 53, 0.42));
}

.portal-native-inline-action .btn-ghost { color: #f7f5f3 !important; }

@keyframes portal-dot-drift {
  to { background-position: 29px 29px, -34px 65px; }
}

@keyframes portal-button-orbit {
  to { --portal-glow-angle: 360deg; }
}

@media (max-width: 760px) {
  body.portal-native::before {
    opacity: 0.52;
    background-size: 31px 31px, 51px 51px;
    animation-duration: 36s;
  }
  .portal-native-card,
  .portal-native-server-card-compact { border-radius: 17px !important; }
  .portal-native-connection-box code { font-size: 11px; }
  .portal-native-renew-card .portal-native-package-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .portal-native-renew-card .portal-native-package-choices.monthly .portal-native-package-choice:last-child { grid-column: auto !important; }
  .portal-native-renew-card .portal-native-package-choice {
    min-height: 48px !important;
    padding: 6px 4px !important;
  }
  .portal-native-renew-card .portal-native-package-choice strong { font-size: 13px !important; }
  .portal-native-renew-card .portal-native-package-choice span { margin-top: 3px !important; font-size: 9px !important; }
  .portal-native-renew-card .portal-native-renew-submit { margin-top: 8px !important; }
  .portal-native-renew-submit:not(.btn-locked) { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.portal-native::before,
  .portal-native-button-row .portal-native-copy-link::before,
  .portal-native-main .btn-primary::before { animation: none !important; }
  .portal-native-button-row .portal-native-copy-link::before,
  .portal-native-main .btn-primary::before { --portal-glow-angle: 300deg; }
}