/* Production portal-only native shell. Every selector is gated so the shared
   register.pattal.ink authentication surface keeps its established design. */
html.portal-native-root {
  min-width: 320px;
  background: #090909;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.portal-native {
  --pn-bg: #090909;
  --pn-surface: #121111;
  --pn-surface-2: #191716;
  --pn-surface-3: #211d1b;
  --pn-line: rgba(255, 255, 255, 0.09);
  --pn-line-strong: rgba(255, 128, 77, 0.28);
  --pn-text: #f8f4f2;
  --pn-muted: #a79e9a;
  --pn-accent: #ed502e;
  --pn-accent-2: #bd2018;
  --pn-orange: #ff8a4d;
  --pn-success: #65d997;
  --pn-warning: #ffc46b;
  --pn-danger: #ff756c;
  --pn-info: #7cc8ff;
  --pn-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Sinhala", sans-serif;
  --pn-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Sinhala", sans-serif;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 68% -10%, rgba(207, 48, 25, 0.14), transparent 31rem), var(--pn-bg);
  color: var(--pn-text);
  font-family: var(--pn-font-text);
  font-weight: 400;
}

body.portal-native #veil-bg-canvas { opacity: 0.28; }
body.portal-native #veil-scrim { opacity: 0.42; }
body.portal-native #root { position: relative; z-index: 2; width: 100%; min-height: 100vh; }
body.portal-native button,
body.portal-native input { font: inherit; }
body.portal-native button,
body.portal-native a { -webkit-tap-highlight-color: transparent; }
body.portal-native button:focus-visible,
body.portal-native a:focus-visible,
body.portal-native input:focus-visible {
  outline: 3px solid rgba(255, 138, 77, 0.42);
  outline-offset: 2px;
}

.portal-native-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; visibility: visible; opacity: 1; }
.portal-native-layout { width: 100%; min-height: 100vh; }
.portal-native-sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: 258px;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 20px;
  border-right: 1px solid var(--pn-line);
  background: rgba(9, 9, 9, 0.93);
  backdrop-filter: blur(24px);
}
.portal-native-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pn-text);
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.portal-native-brand:hover { opacity: 1; }
.portal-native-brand-mark {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pn-accent-2);
  box-shadow: 0 14px 34px rgba(210, 46, 25, 0.26);
}
.portal-native-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal-native-brand strong,
.portal-native-brand small { display: block; }
.portal-native-brand strong { font-size: 18px; letter-spacing: -0.04em; }
.portal-native-brand small { margin-top: 2px; color: var(--pn-muted); font-size: 11px; }
.portal-native-sidebar nav { display: grid; gap: 7px; margin-top: 34px; }
.portal-native-sidebar-tools { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pn-line); }
.portal-native-side-item,
.portal-native-signout {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--pn-muted);
  padding: 11px 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, transform 0.16s;
}
.portal-native-side-item:hover,
.portal-native-signout:hover { color: var(--pn-text); background: rgba(255, 255, 255, 0.05); opacity: 1; }
.portal-native-side-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(237, 80, 46, 0.2), rgba(237, 80, 46, 0.07));
  box-shadow: inset 0 0 0 1px rgba(255, 116, 65, 0.16);
}
.portal-native-nav-badge { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; margin-left: auto; padding: 0 5px; border-radius: 999px; background: #d93025; color: #fff; font-size: 10px; font-weight: 850; line-height: 1; }
.portal-native-side-footer { display: grid; gap: 6px; margin-top: auto; }
.portal-native-whatsapp-help {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: 11px;
  margin-bottom: 5px;
  padding: 9px 12px;
  border: 1px solid rgba(70, 218, 128, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(35, 191, 96, 0.13), rgba(22, 126, 67, 0.07));
  color: #72e6a0;
  text-decoration: none;
  transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.portal-native-whatsapp-help:hover {
  border-color: rgba(95, 232, 149, 0.42);
  background: linear-gradient(135deg, rgba(35, 191, 96, 0.2), rgba(22, 126, 67, 0.1));
  transform: translateY(-1px);
}
.portal-native-whatsapp-help .portal-native-icon { width: 24px; height: 24px; }
.portal-native-whatsapp-help > span { min-width: 0; }
.portal-native-whatsapp-help strong,
.portal-native-whatsapp-help small { display: block; }
.portal-native-whatsapp-help strong { color: #dff9e8; font-size: 12px; }
.portal-native-whatsapp-help small { margin-top: 2px; color: #78ad8c; font-size: 9px; }
.portal-native-whatsapp-help-mobile { display: none; }
.portal-native-more { display: none; position: relative; }
.portal-native-account-mini,
.portal-native-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--pn-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}
.portal-native-account-mini { margin-top: 10px; }
.portal-native-account-mini > span,
.portal-native-identity > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(237, 80, 46, 0.17);
  color: #ff9d72;
  font-weight: 800;
}
.portal-native-account-mini div,
.portal-native-identity div { min-width: 0; }
.portal-native-account-mini strong,
.portal-native-account-mini small,
.portal-native-identity strong,
.portal-native-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-native-account-mini strong,
.portal-native-identity strong { font-size: 13px; }
.portal-native-account-mini small,
.portal-native-identity small { margin-top: 2px; color: var(--pn-muted); font-size: 10px; }
.portal-native-signout { font-size: 13px; }

.portal-native-main {
  width: calc(100% - 258px);
  min-height: 100vh;
  margin-left: 258px;
  padding: 54px clamp(28px, 5vw, 76px) 80px;
}
.portal-native-main > * { width: min(100%, 1120px); margin-left: auto; margin-right: auto; }
.portal-native-mobile-header,
.portal-native-bottom-nav { display: none; }
.portal-native-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.portal-native-page-head h1 {
  margin: 5px 0 8px;
  color: var(--pn-text);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-family: var(--pn-font-display);
  font-weight: 700;
}
.portal-native-page-head p:not(.portal-native-eyebrow) { max-width: 670px; margin: 0; color: var(--pn-muted); line-height: 1.6; }
.portal-native-eyebrow { margin: 0; color: #ff9d72; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.portal-native-identity { max-width: 290px; padding: 11px 13px; }

.portal-native-alert {
  margin-bottom: 16px;
  padding: 12px 15px;
  border: 1px solid currentColor;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  line-height: 1.5;
}
.portal-native-alert.danger { color: var(--pn-danger); border-color: rgba(255, 117, 108, 0.28); background: rgba(255, 117, 108, 0.07); }
.portal-native-alert.warning { color: var(--pn-warning); border-color: rgba(255, 196, 107, 0.28); background: rgba(255, 196, 107, 0.07); }
.portal-native-alert.success { color: var(--pn-success); border-color: rgba(101, 217, 151, 0.26); background: rgba(101, 217, 151, 0.07); }
.portal-native-alert .link-btn { color: inherit; text-decoration: underline; }
.portal-native-attention {
  display: flex;
  width: 100%;
  max-width: 1120px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 196, 107, 0.22);
  border-radius: 16px;
  background: rgba(255, 196, 107, 0.06);
  color: var(--pn-warning);
  text-align: left;
  cursor: pointer;
}
.portal-native-attention.payment { border-color: rgba(255, 196, 107, 0.25); background: rgba(255, 196, 107, 0.065); color: var(--pn-warning); }
.portal-native-attention.danger { border-color: rgba(255, 117, 108, 0.25); background: rgba(255, 117, 108, 0.065); color: var(--pn-danger); }
.portal-native-attention span strong,
.portal-native-attention span small { display: block; }
.portal-native-attention span strong { font-size: 14px; }
.portal-native-attention span small { margin-top: 4px; color: #bbb0aa; font-size: 11px; }
.portal-native-attention b { font-size: 12px; }

.portal-native-server-list,
.portal-native-renew-list { display: grid; gap: 18px; }
.portal-native-server-list { max-width: 820px; }
.portal-native-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--pn-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(30, 26, 24, 0.96), rgba(16, 15, 15, 0.98));
  box-shadow: 0 18px 62px rgba(0, 0, 0, 0.19), inset 0 1px rgba(255, 255, 255, 0.025);
}
.portal-native-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 142, 89, 0.22), transparent); pointer-events: none; }
.portal-native-server-card { background: radial-gradient(circle at 86% 0%, rgba(237, 80, 46, 0.17), transparent 27rem), linear-gradient(145deg, rgba(32, 25, 23, 0.98), rgba(15, 14, 14, 0.98)); }
.portal-native-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.portal-native-card-heading h2,
.portal-native-section-heading h2 { margin: 5px 0 3px; color: var(--pn-text); font-family: var(--pn-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.portal-native-card-heading p:not(.portal-native-eyebrow) { margin: 0; color: var(--pn-muted); font-size: 13px; }
.portal-native-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; padding: 5px 9px; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.portal-native-pill.success { color: var(--pn-success); border-color: rgba(101, 217, 151, 0.26); background: rgba(101, 217, 151, 0.08); }
.portal-native-pill.warning { color: var(--pn-warning); border-color: rgba(255, 196, 107, 0.26); background: rgba(255, 196, 107, 0.08); }
.portal-native-pill.danger { color: var(--pn-danger); border-color: rgba(255, 117, 108, 0.26); background: rgba(255, 117, 108, 0.08); }
.portal-native-pill.info { color: var(--pn-info); border-color: rgba(124, 200, 255, 0.25); background: rgba(124, 200, 255, 0.08); }
.portal-native-tier-status { margin: -2px 0 20px; padding: 16px; border: 1px solid rgba(255, 139, 82, 0.25); border-radius: 16px; background: rgba(9, 8, 8, 0.52); }
.portal-native-tier-status.extended { border-color: rgba(255, 196, 107, 0.32); background: rgba(255, 196, 107, 0.055); }
.portal-native-tier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.portal-native-tier-head h2 { margin: 4px 0 0; color: #fff7f2; font-family: var(--pn-font-display); font-size: 18px; letter-spacing: -0.02em; }
.portal-native-tier-progress { height: 8px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.portal-native-tier-progress span { display: block; height: 100%; border-radius: inherit; background: #f2693c; transition: width .45s ease; }
.portal-native-tier-status.extended .portal-native-tier-progress span { background: #ffc46b; }
.portal-native-tier-meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; color: #eee5df; font-size: 11px; }
.portal-native-tier-meter span { color: var(--pn-warning); font-weight: 800; }
.portal-native-tier-status > p { margin: 12px 0 0; color: var(--pn-muted); font-size: 12px; line-height: 1.55; }
.portal-native-tier-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.portal-native-tier-actions button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255, 125, 73, 0.62); border-radius: 11px; background: rgba(255, 103, 49, 0.17); color: #fff4ed; font: inherit; font-size: 12px; font-weight: 760; cursor: pointer; }
.portal-native-tier-actions small { color: #9e928c; font-size: 10px; line-height: 1.45; }
.portal-native-usage-overview { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 16px; }
.portal-native-liquid-gauge {
  position: relative;
  width: 116px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 126, 78, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(53, 25, 19, 0.96), rgba(8, 7, 7, 0.98));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.68), 0 0 24px rgba(237, 80, 46, 0.12);
  isolation: isolate;
}
.portal-native-gauge-refresh { padding: 0; color: inherit; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.portal-native-gauge-refresh:hover { border-color: rgba(255, 151, 97, 0.74); box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.68), 0 0 30px rgba(237, 80, 46, 0.22); }
.portal-native-gauge-refresh:focus-visible { outline: 3px solid rgba(255, 138, 77, 0.52); outline-offset: 4px; }
.portal-native-gauge-refresh.is-checking { animation: portal-native-gauge-pulse .9s ease-in-out; }
@keyframes portal-native-gauge-pulse { 50% { transform: scale(.96); filter: brightness(1.2); } }
.portal-native-liquid-wave {
  position: absolute;
  left: -55%;
  width: 210%;
  aspect-ratio: 1;
  border-radius: 43%;
  transition: top 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.portal-native-liquid-wave.back {
  border-radius: 46%;
  background: linear-gradient(180deg, rgba(255, 123, 63, 0.35), rgba(125, 27, 19, 0.48));
  animation: portalNativeLiquidSpin 12s linear infinite reverse;
}
.portal-native-liquid-wave.front {
  background: linear-gradient(180deg, rgba(255, 133, 72, 0.9), rgba(173, 40, 25, 0.94) 72%);
  animation: portalNativeLiquidSpin 8s linear infinite;
}
.portal-native-gauge-core {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}
.portal-native-gauge-core strong { color: #fff8f4; font-size: 24px; line-height: 1; }
.portal-native-gauge-core strong small { color: #ffd0a4; font-size: 11px; }
.portal-native-gauge-core span { margin-top: 5px; color: #f0c5af; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes portalNativeLiquidSpin { to { transform: rotate(360deg); } }
.portal-native-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.portal-native-stats > div { padding: 14px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.portal-native-stats span,
.portal-native-stats strong { display: block; }
.portal-native-stats span { color: var(--pn-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; }
.portal-native-stats strong { margin-top: 8px; overflow-wrap: anywhere; font-size: clamp(15px, 2vw, 21px); }
.portal-native-connection-label { margin: 20px 0 8px; color: var(--pn-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.portal-native-links { display: grid; min-width: 0; gap: 10px; }
.portal-native-connection-box { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--pn-line); border-radius: 15px; background: rgba(0, 0, 0, 0.25); }
.portal-native-link-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.portal-native-link-head strong { color: #f1e9e5; font-size: 12px; }
.portal-native-link-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.portal-native-default-badge { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 9px; border: 1px solid rgba(255, 157, 104, 0.28); border-radius: 999px; background: rgba(255, 112, 55, 0.1); color: #ffad84; font-size: 9px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.portal-native-default-link { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(255, 146, 91, 0.3); border-radius: 9px; background: rgba(255, 104, 48, 0.08); color: #ffad84; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.portal-native-default-link:hover { border-color: rgba(255, 159, 108, 0.58); background: rgba(255, 104, 48, 0.14); }
.portal-native-default-link:disabled { opacity: 0.55; cursor: wait; }
.portal-native-connection-box code { display: block; min-width: 0; overflow: hidden; color: #cfc6c1; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.portal-native-button-row { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portal-native-button-row button,
.portal-native-modal-actions button,
.portal-native-download-row a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--pn-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: #eee7e3;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}
.portal-native-button-row button:hover,
.portal-native-modal-actions button:hover,
.portal-native-download-row a:hover { border-color: var(--pn-line-strong); background: rgba(255, 100, 50, 0.07); opacity: 1; }
.portal-native-button-row .portal-native-copy-link {
  border-color: #ff8258;
  background: #ed502e;
  color: #fff;
  box-shadow: 0 6px 18px rgba(237, 80, 46, 0.26);
}
.portal-native-button-row .portal-native-copy-link:hover {
  border-color: #ff9b78;
  background: #ff603a;
  box-shadow: 0 7px 22px rgba(237, 80, 46, 0.34);
}
.portal-native-danger-link { border: 0; background: transparent; color: var(--pn-danger); padding: 5px 0; font-size: 11px; font-weight: 750; cursor: pointer; }
.portal-native-inline-action { width: 100%; max-width: 820px; margin-top: 16px; }
.portal-native-inline-action .btn-ghost { width: 100%; min-height: 46px; border-color: var(--pn-line); background: rgba(255, 255, 255, 0.025); }

.portal-native-package-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.portal-native-fair-use-note { margin: 10px 0 0; padding: 11px 13px; border: 1px solid rgba(255, 186, 97, 0.2); border-radius: 13px; background: rgba(255, 186, 97, 0.06); color: var(--pn-muted); font-size: 11px; line-height: 1.55; }
.portal-native-fair-use-note strong { color: #ffd096; }
.portal-native-billing-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--pn-line); border-radius: 13px; background: rgba(0, 0, 0, 0.24); }
.portal-native-billing-tabs button { min-width: 112px; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--pn-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.portal-native-billing-tabs button.selected { color: #fff; background: linear-gradient(145deg, rgba(237, 80, 46, 0.24), rgba(237, 80, 46, 0.1)); box-shadow: inset 0 0 0 1px rgba(255, 124, 73, 0.28); }
.portal-native-package-choice { min-height: 72px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); color: var(--pn-muted); padding: 10px; cursor: pointer; }
.portal-native-package-choice strong,
.portal-native-package-choice span,
.portal-native-package-choice small { display: block; }
.portal-native-package-choice strong { color: #ffc46b; font-size: 16px; line-height: 1.1; }
.portal-native-package-choice span { margin-top: 6px; font-size: 11px; }
.portal-native-package-choice small { margin-top: 5px; color: rgba(255, 255, 255, 0.48); font-size: 9px; line-height: 1.3; }
.portal-native-package-choice.selected { border-color: rgba(255, 124, 73, 0.48); background: linear-gradient(145deg, rgba(237, 80, 46, 0.2), rgba(237, 80, 46, 0.08)); color: #ffad84; box-shadow: inset 0 0 0 1px rgba(255, 113, 62, 0.1); }
.portal-native-package-choice.selected strong { color: #ffd47f; text-shadow: 0 0 18px rgba(255, 184, 84, 0.2); }
.portal-native-renew-card.email-locked .portal-native-billing-tabs,
.portal-native-renew-card.email-locked .portal-native-package-choices,
.portal-native-renew-card.email-locked .portal-native-period-picker { opacity: .48; filter: saturate(.45); }
.portal-native-renew-card.email-locked button:disabled { cursor: not-allowed; }
.portal-native-period-picker.locked { cursor: not-allowed; }
.portal-native-renew-submit.btn-locked {
  border: 1px dashed rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .55) !important;
}
.portal-native-period-picker { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pn-line); }
.portal-native-period-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.portal-native-period-heading strong,
.portal-native-period-heading small { display: block; }
.portal-native-period-heading strong { color: var(--pn-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.portal-native-period-heading b { min-width: 0; color: #ffc46b; font-size: 11px; text-align: right; white-space: nowrap; }
.portal-native-period-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.portal-native-period-choices button { display: grid; width: 100%; min-height: 39px; place-items: center; align-content: center; gap: 2px; padding: 5px 2px; border: 1px solid var(--pn-line); border-radius: 9px; background: rgba(255, 255, 255, 0.025); color: var(--pn-muted); cursor: pointer; }
.portal-native-period-choices button strong,
.portal-native-period-choices button small { display: block; line-height: 1; }
.portal-native-period-choices button strong { color: #eee7e3; font-size: 13px; }
.portal-native-period-choices button small { color: #847b77; font-size: 8px; font-weight: 750; }
.portal-native-period-choices button.selected { border-color: rgba(255, 124, 73, 0.48); background: rgba(237, 80, 46, 0.16); color: #fff; }
.portal-native-period-choices button.selected strong { color: #fff; }
.portal-native-period-choices button.selected small { color: #ffad87; }
.portal-native-yearly-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 16px; border-top: 1px solid var(--pn-line); border-bottom: 1px solid var(--pn-line); }
.portal-native-yearly-note strong { color: #fff; }
.portal-native-yearly-note span { color: var(--pn-muted); font-size: 12px; }
.portal-native-renew-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.portal-native-renew-summary > div { padding: 14px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.portal-native-renew-summary span,
.portal-native-renew-summary strong { display: block; }
.portal-native-renew-summary span { color: var(--pn-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.portal-native-renew-summary strong { margin-top: 7px; font-size: 17px; }
.portal-native-renew-submit { width: 100%; min-height: 46px; margin-top: 12px; }
.portal-native-renew-preview .portal-native-card-heading { margin-bottom: 14px; }
.portal-native-renew-preview .portal-native-package-choice:disabled,
.portal-native-renew-preview .portal-native-billing-tabs button:disabled,
.portal-native-renew-preview .portal-native-period-choices button:disabled { cursor: wait; }
.portal-native-renew-preview .portal-native-package-choice:disabled,
.portal-native-renew-preview .portal-native-billing-tabs button:disabled { opacity: 0.72; }
.portal-native-requests-loading { min-height: 0; }
.portal-native-requests-loading .portal-native-section-heading { margin-bottom: 0; }
.portal-native-loading-inline { display: inline-flex; width: auto; min-width: 0; height: auto; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--pn-line); border-radius: 999px; color: var(--pn-muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.portal-native-loading-inline .portal-native-icon { width: 13px; height: 13px; animation: portal-native-refresh-spin 1.15s linear infinite; }

.portal-native-pending-payment-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.portal-native-pending-payment-actions .btn-primary,
.portal-native-pending-payment-actions .btn-ghost {
  min-height: 46px;
  margin: 0;
}
.portal-native-annual-card { border-color: rgba(255, 171, 77, 0.26); background: radial-gradient(circle at 92% 4%, rgba(255, 145, 54, 0.12), transparent 34%), var(--pn-card); }
.portal-native-annual-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portal-native-annual-status > div { padding: 14px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.portal-native-annual-status span,
.portal-native-annual-status strong { display: block; }
.portal-native-annual-status span { color: var(--pn-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.portal-native-annual-status strong { margin-top: 7px; color: #ffc46b; font-size: 16px; }
.portal-native-annual-rule { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(255, 181, 98, .16); border-radius: 13px; background: rgba(255, 142, 53, .055); color: var(--pn-muted); font-size: 11px; line-height: 1.5; }
.portal-native-annual-rule strong { color: #ffd09b; font-size: 12px; }
.portal-native-annual-action-copy { margin: 8px 2px 0; color: var(--pn-muted); font-size: 11px; line-height: 1.45; text-align: center; }
.portal-native-annual-guide { margin-top: 22px; padding: 20px; border: 1px solid rgba(255, 171, 77, .22); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 134, 48, .08), rgba(0, 0, 0, .2)); }
.portal-native-annual-guide h2 { margin: 4px 0 8px; color: #fff; font-size: 19px; }
.portal-native-annual-guide > p:not(.portal-native-eyebrow),
.portal-native-annual-guide li { color: var(--pn-muted); font-size: 12px; line-height: 1.55; }
.portal-native-annual-guide ul { margin: 10px 0 0; padding-left: 18px; }
.portal-native-requests,
.portal-native-guides { margin-top: 36px; }
.portal-native-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.portal-native-section-heading > span { display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 999px; background: rgba(237, 80, 46, 0.13); color: #ff966c; font-size: 12px; font-weight: 800; }
.portal-native-ticket-list { display: grid; gap: 8px; }
.portal-native-ticket { overflow: hidden; border: 1px solid var(--pn-line); border-radius: 14px; background: linear-gradient(145deg, rgba(28, 25, 23, 0.95), rgba(15, 14, 14, 0.98)); }
.portal-native-ticket.busy { border-color: rgba(255, 138, 42, 0.32); }
.portal-native-ticket-summary { display: grid; min-height: 66px; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
.portal-native-ticket-summary::-webkit-details-marker { display: none; }
.portal-native-ticket-summary-copy { min-width: 0; }
.portal-native-ticket-summary-copy strong,
.portal-native-ticket-summary-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-native-ticket-summary-copy strong { font-size: 14px; }
.portal-native-ticket-summary-copy small { margin-top: 4px; color: var(--pn-muted); font-size: 10px; }
.portal-native-ticket-chevron { color: #ff966c; font-size: 22px; line-height: 1; transition: transform 0.16s ease; }
.portal-native-ticket[open] .portal-native-ticket-chevron { transform: rotate(90deg); }
.portal-native-ticket-expanded { padding: 0 13px 13px; border-top: 1px solid var(--pn-line); }
.portal-native-ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.portal-native-ticket-details { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; margin: 16px 0; }
.portal-native-ticket-details > div { padding: 10px; border-radius: 11px; background: rgba(255, 255, 255, 0.025); }
.portal-native-ticket-details span,
.portal-native-ticket-details strong { display: block; }
.portal-native-ticket-details span { color: var(--pn-muted); font-size: 9px; }
.portal-native-ticket-details strong { margin-top: 5px; font-size: 12px; }
.portal-native-ticket time { color: var(--pn-muted); font-size: 10px; }

.portal-native-setup-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
/* Keep the desktop setup path in the same centered content column as the
   Guide heading and video guides (rather than letting it size independently). */
.portal-native-main > .portal-native-setup-path { width: min(100%, 1120px); margin-inline: auto; }
.portal-native-setup-path li { position: relative; display: grid; min-width: 0; grid-template-columns: 27px minmax(0, 1fr); align-items: start; gap: 11px; padding: 18px 28px 18px 16px; border: 1px solid var(--pn-line); border-right: 0; background: linear-gradient(145deg, rgba(27, 24, 22, 0.95), rgba(16, 15, 15, 0.98)); }
.portal-native-setup-path li:first-child { border-radius: 18px 0 0 18px; }
.portal-native-setup-path li:last-child { border-right: 1px solid var(--pn-line); border-radius: 0 18px 18px 0; }
.portal-native-setup-path li > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: rgba(237, 80, 46, 0.15); color: #ff966c; font-style: normal; font-size: 11px; font-weight: 850; }
.portal-native-setup-path li > div { display: flex; min-width: 0; height: 100%; flex-direction: column; }
.portal-native-setup-path strong { display: block; min-height: 32px; font-size: 12px; line-height: 1.3; }
.portal-native-setup-path p { margin: 7px 0 0; color: var(--pn-muted); font-size: 10px; line-height: 1.5; }
.portal-native-setup-path a,
.portal-native-setup-path button { border: 0; background: transparent; color: #ff9569; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.portal-native-setup-path li > b { position: absolute; z-index: 2; right: -10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--pn-surface-3); color: #ff8e60; text-align: center; line-height: 19px; }
.portal-native-guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-native-guide-card { overflow: hidden; border: 1px solid var(--pn-line); border-radius: 18px; background: linear-gradient(145deg, rgba(28, 25, 23, 0.95), rgba(15, 14, 14, 0.98)); }
.portal-native-guide-card.expanded { grid-column: 1 / -1; border-color: var(--pn-line-strong); }
.portal-native-guide-toggle { display: grid; width: 100%; min-height: 90px; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 0; background: transparent; color: var(--pn-text); padding: 12px; text-align: left; cursor: pointer; }
.portal-native-guide-poster { display: block; width: 116px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px; background: #050505; }
.portal-native-guide-poster img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.portal-native-guide-toggle span small,
.portal-native-guide-toggle span strong,
.portal-native-guide-toggle span em { display: block; }
.portal-native-guide-toggle span small { color: #ff9569; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.portal-native-guide-toggle span strong { margin-top: 4px; font-size: 15px; }
.portal-native-guide-toggle span em { margin-top: 6px; color: var(--pn-muted); font-size: 10px; font-style: normal; }
.portal-native-guide-toggle > .portal-native-icon { color: #ff8e60; }
.portal-native-guide-body { padding: 0 16px 16px; }
.portal-native-guide-body video { display: block; width: 100%; max-height: 620px; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 14px; background: #000; }
.portal-native-download-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portal-native-download-row a { text-decoration: none; }

.portal-native-empty { display: grid; min-height: 260px; place-items: center; align-content: center; padding: 28px; border: 1px dashed var(--pn-line); border-radius: 22px; color: var(--pn-muted); text-align: center; }
.portal-native-empty > span { color: #ff8b5e; font-size: 34px; }
.portal-native-empty h2 { margin: 10px 0 5px; color: #ded6d2; }
.portal-native-empty p { max-width: 430px; margin: 0; line-height: 1.5; }
.portal-native-updates-empty { min-height: 430px; }
.portal-native-updates-notifications { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--pn-line); border-radius: 16px; background: #1c1917; }
.portal-native-updates-notifications-copy { display: grid; min-width: 0; gap: 4px; }
.portal-native-updates-notifications-copy strong { color: var(--pn-text); font-size: 14px; }
.portal-native-updates-notifications-copy span { max-width: 720px; color: var(--pn-muted); font-size: 11px; line-height: 1.5; }
.portal-native-update-list { display: grid; gap: 12px; }
.portal-native-update-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 16px; padding: 16px 18px; border: 1px solid rgba(255, 125, 73, 0.42); border-radius: 16px; background: #221d1a; }
.portal-native-update-alert-copy { display: grid; min-width: 0; gap: 4px; }
.portal-native-update-alert-copy small { color: #ff9569; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.portal-native-update-alert-copy strong { color: var(--pn-text); font-size: 15px; }
.portal-native-update-alert-copy p { max-width: 760px; margin: 1px 0 0; color: var(--pn-muted); font-size: 11px; line-height: 1.5; }
.portal-native-update-alert-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.portal-native-update-alert-actions button { min-height: 36px; padding: 8px 11px; border: 1px solid var(--pn-line); border-radius: 10px; background: #2a2725; color: #ff9a70; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.portal-native-update-card { padding: 20px; border: 1px solid var(--pn-line); border-radius: 18px; background: #1c1917; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16); }
.portal-native-update-card.unread { border-color: rgba(255, 125, 73, 0.34); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16), inset 3px 0 rgba(255, 106, 54, 0.72); }
.portal-native-update-card.read { opacity: 0.78; }
.portal-native-update-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.portal-native-update-head > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.portal-native-update-head h2 { margin: 0; color: var(--pn-text); font-size: 18px; line-height: 1.25; }
.portal-native-update-head time { flex: 0 0 auto; color: var(--pn-muted); font-size: 10px; }
.portal-native-update-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ff7145; box-shadow: 0 0 14px rgba(255, 101, 55, 0.65); }
.portal-native-update-card > p { margin: 12px 0 0; color: #c7beba; line-height: 1.6; white-space: pre-wrap; }
.portal-native-update-media { display: block; width: 100%; max-height: 320px; margin-top: 14px; border: 1px solid var(--pn-line); border-radius: 13px; background: #111; object-fit: contain; }
.portal-native-update-timing { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.portal-native-update-timing span { padding: 6px 8px; border-radius: 8px; background: rgba(255, 126, 72, .09); color: #ffb18d; font-size: 10px; font-weight: 750; }
.portal-native-update-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.portal-native-update-actions button,
.portal-native-update-actions a,
.portal-native-alert [data-update-refresh] { min-height: 38px; padding: 8px 11px; border: 1px solid var(--pn-line); border-radius: 10px; background: rgba(255, 255, 255, 0.035); color: #ff9a70; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.portal-native-update-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.portal-native-loading { display: grid; min-height: 380px; place-items: center; align-content: center; gap: 12px; color: var(--pn-muted); }
.portal-native-loading strong { color: var(--pn-text); }

.portal-native-skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.075);
  color: transparent;
}
.portal-native-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: portal-native-skeleton-sweep 1.35s ease-in-out infinite;
}
@keyframes portal-native-skeleton-sweep { to { transform: translateX(105%); } }
.portal-native-skeleton.line { height: 14px; margin-top: 10px; }
.portal-native-skeleton.line.title { width: min(330px, 72vw); height: 44px; }
.portal-native-skeleton.line.copy { width: min(470px, 84vw); }
.portal-native-skeleton.line.eyebrow { width: 92px; height: 10px; margin: 0 0 10px; }
.portal-native-skeleton.line.heading { width: min(250px, 62vw); height: 18px; margin: 0; }
.portal-native-skeleton.pill { width: 76px; height: 31px; border-radius: 999px; }
.portal-native-skeleton-card { min-height: 480px; }
.portal-native-skeleton-usage { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 25px; align-items: center; margin-top: 26px; }
.portal-native-skeleton.gauge { width: 180px; height: 180px; border-radius: 50%; }
.portal-native-skeleton-usage > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-native-skeleton.stat { height: 76px; }
.portal-native-skeleton.configuration { height: 88px; margin-top: 20px; }
.portal-native-skeleton.renewal-tabs { height: 58px; margin-top: 22px; }
.portal-native-skeleton.renewal-grid { height: 208px; margin: 14px 0; }
.portal-native-skeleton.tickets { height: 86px; margin-top: 14px; }
.portal-native-loading-label { display: block; padding: 4px 2px; color: var(--pn-muted); font-size: 12px; }
.portal-native-live-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--pn-line-strong);
  border-radius: 13px;
  background: rgba(237, 80, 46, 0.08);
  color: #ff9a70;
  font-weight: 750;
  cursor: pointer;
}
.portal-native-live-refresh .portal-native-icon { width: 16px; height: 16px; }
.portal-native-live-refresh.is-checking .portal-native-icon,
.portal-native-updating-pill .portal-native-icon,
.portal-native-cache-spinner .portal-native-icon { animation: portal-native-refresh-spin 1.15s linear infinite; }
.portal-native-live-refresh:disabled { cursor: wait; opacity: 0.58; }
@keyframes portal-native-refresh-spin { to { transform: rotate(360deg); } }

.portal-native-updating-pill { display: inline-flex; align-items: center; gap: 5px; }
.portal-native-updating-pill .portal-native-icon { width: 13px; height: 13px; }
.portal-native-cache-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(124, 200, 255, 0.18);
  border-radius: 12px;
  background: rgba(124, 200, 255, 0.055);
  color: var(--pn-muted);
}
.portal-native-cache-status > span:last-child { display: grid; min-width: 0; gap: 2px; }
.portal-native-cache-status strong { color: #cde9ff; font-size: 12px; line-height: 1.35; }
.portal-native-cache-status small { color: var(--pn-muted); font-size: 10px; line-height: 1.4; }
.portal-native-cache-spinner { display: inline-flex; flex: 0 0 auto; color: var(--pn-info); }
.portal-native-cache-spinner .portal-native-icon { width: 18px; height: 18px; }
.portal-native-cached-usage { opacity: 0.8; }
.portal-native-cache-locked {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid var(--pn-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--pn-muted);
  font-size: 11px;
  line-height: 1.5;
}

.portal-native-form-frame > .server-card { max-width: 760px; margin: 0 auto; border-radius: 22px; background: rgba(20, 17, 16, 0.96); }

.portal-native-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portal-native-settings > .form-error,
.portal-native-settings > .form-notice { grid-column: 1 / -1; }
.portal-native-settings .settings-card { width: 100%; min-width: 0; margin: 0; overflow: hidden; padding: 22px; border: 1px solid var(--pn-line); border-radius: 18px; background: rgba(18, 17, 17, 0.94); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02); }
.portal-native-settings .settings-card .section-label { margin-top: 0; }
.portal-native-settings .settings-card form,
.portal-native-settings .settings-card .field,
.portal-native-settings .settings-card .danger-row { min-width: 0; }
.portal-native-settings .settings-personal-card,
.portal-native-settings .settings-account-actions { grid-column: 1 / -1; }
.settings-section-head { display: grid; gap: 5px; margin-bottom: 18px; }
.settings-section-head .section-label { margin-bottom: 1px; color: #ff986d; }
.settings-section-head h2 { margin: 0; color: var(--pn-text); font-family: var(--pn-font-display); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.settings-section-head p { max-width: 620px; margin: 0; color: var(--pn-muted); font-size: 12px; line-height: 1.55; }
.settings-item-list { display: grid; gap: 0; border-top: 1px solid var(--pn-line); }
.settings-item { display: grid; grid-template-columns: minmax(150px, 0.72fr) minmax(240px, 1.28fr); gap: 22px; align-items: end; padding: 18px 0; border-bottom: 1px solid var(--pn-line); }
.settings-item-copy { display: grid; gap: 5px; align-self: center; }
.settings-item-label { color: var(--pn-text); font-size: 13px; font-weight: 800; }
.settings-item-copy span { color: var(--pn-muted); font-size: 11px; line-height: 1.5; }
.settings-item-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.settings-item-control .inp { min-width: 0; margin: 0; }
.settings-action-button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--pn-line-strong); border-radius: 11px; background: rgba(237, 80, 46, 0.07); color: #ffad87; font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.settings-action-button:hover:not(:disabled) { border-color: rgba(255, 138, 77, 0.52); background: rgba(237, 80, 46, 0.13); color: #fff1ea; }
.settings-action-button:disabled { opacity: .5; cursor: default; }
.settings-action-wide { width: 100%; }
.settings-account-email { display: grid; gap: 4px; margin-bottom: 12px; padding: 12px 13px; border: 1px solid var(--pn-line); border-radius: 11px; background: rgba(255, 255, 255, 0.025); overflow-wrap: anywhere; }
.settings-account-email span { color: var(--pn-muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.settings-account-email strong { color: var(--pn-text); font-size: 12px; }
.settings-preference-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--pn-line); }
.settings-preference-copy { display: grid; min-width: 0; gap: 3px; }
.settings-preference-row strong { color: var(--pn-text); font-size: 13px; }
.settings-preference-row span { color: var(--pn-muted); font-size: 11px; line-height: 1.45; }
.portal-native-settings .settings-account-actions { border-color: rgba(255, 117, 108, 0.18); background: rgba(29, 17, 17, 0.68); }
.portal-native-settings .settings-account-actions .settings-section-head .section-label { color: #d99690; }
.portal-native-settings .settings-account-actions .btn-danger { background: transparent; box-shadow: none; }
.portal-native-settings .settings-account-actions .btn-danger-solid { color: #ffaaa4; border-color: rgba(255, 117, 108, 0.38); background: rgba(255, 80, 80, 0.06); }
.portal-native-settings-signout { display: none; }
.settings-install-help { display: grid; gap: 5px; margin-top: 12px; padding: 13px; border: 1px solid rgba(255, 126, 72, 0.2); border-radius: 12px; background: rgba(255, 103, 48, 0.055); color: var(--pn-muted); font-size: 12px; line-height: 1.5; }
.settings-install-help strong { margin-top: 4px; color: #ff9b74; font-size: 11px; }

/* Compact Portal information hierarchy. */
.portal-native-server-card-compact { max-width: 820px; padding: 20px; background: var(--pn-card); }
.portal-native-server-card-compact .portal-native-card-heading { align-items: center; margin-bottom: 14px; }
.portal-native-server-card-compact .portal-native-card-heading h1 { margin: 3px 0 0; color: var(--pn-text); font-size: clamp(20px, 3vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.portal-native-server-route { margin: 4px 0 0; color: var(--pn-muted); font-size: 12px; font-weight: 680; line-height: 1.3; }
.portal-native-card-status { display: flex; align-items: center; gap: 8px; }
.portal-native-icon-button { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; padding: 0; border: 1px solid var(--pn-line); border-radius: 50%; background: transparent; color: var(--pn-muted); cursor: pointer; }
.portal-native-icon-button:hover { border-color: var(--pn-line-strong); color: var(--pn-orange); }
.portal-native-icon-button.is-checking .portal-native-icon { animation: portal-native-refresh-spin 1.15s linear infinite; }
.portal-native-compact-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--pn-line); }
.portal-native-compact-usage > div { min-width: 0; padding: 16px 18px 15px 0; }
.portal-native-compact-usage > div + div { padding-left: 18px; border-left: 1px solid var(--pn-line); }
.portal-native-compact-usage span,
.portal-native-compact-usage strong,
.portal-native-compact-usage small { display: block; }
.portal-native-compact-usage span { color: var(--pn-muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.portal-native-compact-usage strong { margin-top: 5px; color: var(--pn-text); font-size: clamp(24px, 4vw, 34px); line-height: 1.1; }
.portal-native-compact-usage small { margin-top: 4px; color: var(--pn-muted); font-size: 10px; }
.portal-native-compact-usage > .portal-native-days-panel { position: relative; overflow: hidden; margin-block: -1px; padding-right: 18px; border-color: var(--pn-line); background: transparent; color: #fff; }
.portal-native-days-panel::before { position: absolute; inset: 0 auto 0 0; width: var(--days-fill, 0%); background: #ed502e; content: ""; pointer-events: none; transition: width .35s ease; }
.portal-native-days-panel span,
.portal-native-days-panel strong,
.portal-native-days-panel small { position: relative; z-index: 1; color: #fff; }
.portal-native-days-panel span,
.portal-native-days-panel small { color: rgba(255, 255, 255, .82); }
.portal-native-compact-meta { margin: 9px 0 0; color: var(--pn-muted); font-size: 10px; }
.portal-native-server-card-compact .portal-native-connection-label { margin-top: 15px; }
.portal-native-connection-compact { padding: 12px 0 0; border: 0; border-top: 1px solid var(--pn-line); border-radius: 0; background: transparent; }
.portal-native-connection-compact .portal-native-link-head { margin-bottom: 7px; }
.portal-native-connection-compact .portal-native-button-row { margin-top: 8px; }
.portal-native-skeleton-compact { display: block; }
.portal-native-skeleton-compact > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-native-skeleton-card.portal-native-server-card-compact { min-height: 0; }

.portal-native-subpage-back { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; margin: 0 0 10px; padding: 6px 9px; border: 0; background: transparent; color: var(--pn-muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.portal-native-subpage-back .portal-native-icon { width: 16px; height: 16px; }
.portal-native-compact-head { margin-bottom: 14px; }

.portal-native-settings { display: block; max-width: 760px; }
.portal-native-settings-section { margin: 0 0 18px; border-top: 1px solid var(--pn-line); }
.portal-native-settings-section > h2 { margin: 0; padding: 12px 2px 7px; color: var(--pn-muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.portal-native-setting-row { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--pn-line); background: transparent; color: var(--pn-text); text-align: left; }
.portal-native-setting-row > span { display: grid; min-width: 0; gap: 3px; }
.portal-native-setting-row strong { overflow-wrap: anywhere; font-size: 13px; }
.portal-native-setting-row small { color: var(--pn-muted); font-size: 10px; line-height: 1.4; }
.portal-native-edit-button { display: inline-grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 1px solid var(--pn-line); border-radius: 50%; background: transparent; color: var(--pn-muted); cursor: pointer; }
.portal-native-edit-button .portal-native-icon { width: 16px; height: 16px; }
.portal-native-row-action { min-height: 34px; flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--pn-line); border-radius: 9px; background: transparent; color: var(--pn-orange); font-size: 11px; font-weight: 750; cursor: pointer; }
.portal-native-setting-edit { padding: 10px 2px; border-bottom: 1px solid var(--pn-line); }
.portal-native-setting-edit > label { display: block; margin-bottom: 7px; color: var(--pn-muted); font-size: 10px; }
.portal-native-setting-edit > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.portal-native-setting-edit .inp { min-height: 40px; margin: 0; }
.portal-native-setting-edit button { min-height: 40px; padding: 7px 10px; border: 1px solid var(--pn-line); border-radius: 9px; background: transparent; color: var(--pn-orange); font-size: 11px; }
.portal-native-signout-row,
.portal-native-delete-row { cursor: pointer; }
.portal-native-signout-row .portal-native-icon,
.portal-native-delete-row .portal-native-icon { width: 18px; height: 18px; }
.portal-native-delete-row { color: var(--pn-danger); }
.portal-native-settings-danger { border-color: rgba(255, 117, 108, .18); }

.portal-native-renew-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--pn-line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.portal-native-renew-summary > span { display: grid; min-width: 0; gap: 4px; padding: 10px; }
.portal-native-renew-summary > span + span { border-left: 1px solid var(--pn-line); }
.portal-native-renew-summary small { color: var(--pn-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.portal-native-renew-summary strong { margin: 0; overflow: hidden; color: var(--pn-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.portal-native-renew-summary > span:last-child strong { font-size: clamp(18px, 2vw, 22px); }

.portal-native-toast {
  position: fixed;
  z-index: 150;
  right: 22px;
  bottom: 22px;
  width: min(420px, calc(100% - 28px));
  padding: 14px 17px;
  border: 1px solid rgba(101, 217, 151, 0.26);
  border-radius: 14px;
  background: rgba(19, 37, 28, 0.96);
  color: #a7ebc3;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  font-size: 12px;
  line-height: 1.5;
}
.portal-native-modal-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.76); backdrop-filter: blur(14px); }
.portal-native-modal { position: relative; width: min(100%, 470px); max-height: calc(100vh - 34px); overflow: auto; padding: 28px; border: 1px solid var(--pn-line-strong); border-radius: 24px; background: #171414; text-align: center; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48); }
.portal-native-modal h2 { margin: 6px 0 16px; color: var(--pn-text); font-size: 28px; }
.portal-native-modal-close { position: absolute; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid var(--pn-line); border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 23px; cursor: pointer; }
.portal-native-qr-image { display: block; width: min(100%, 310px); margin: auto; border-radius: 16px; background: #fff; }
.portal-native-modal-copy { margin: 14px 0 0; color: var(--pn-muted); font-size: 11px; line-height: 1.55; }
.portal-native-modal-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 18px; }
.portal-native-modal-actions .btn-primary { width: auto; }
.portal-native-link-modal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-native-link-modal-actions > :only-child { grid-column: 1 / -1; }
.portal-native-link-modal-actions button { width: 100%; }
.portal-native-first-link-modal { text-align: left; }
.portal-native-first-link-modal h2 { padding-right: 0; }
.portal-native-first-link-value {
  margin-top: 16px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid var(--pn-line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff4ed;
  font: 600 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-native-first-link-actions { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.portal-native-first-link-actions button { width: 100%; }
.portal-native-en-only { display: none; }
html[lang="en"] .portal-native-si-only { display: none; }
html[lang="en"] .portal-native-en-only { display: inline; }
.portal-native-delete-confirm { border-color: rgba(255, 117, 108, 0.32) !important; background: linear-gradient(135deg, #dd453d, #b82424) !important; }

@media (max-width: 1060px) {
  .portal-native-sidebar { width: 220px; }
  .portal-native-main { width: calc(100% - 220px); margin-left: 220px; padding-left: 24px; padding-right: 24px; }
  .portal-native-stats { grid-template-columns: repeat(3, 1fr); }
  .portal-native-setup-path { grid-template-columns: 1fr; gap: 8px; }
  .portal-native-setup-path li,
  .portal-native-setup-path li:first-child,
  .portal-native-setup-path li:last-child { border: 1px solid var(--pn-line); border-radius: 14px; }
  .portal-native-setup-path li > b { right: auto; left: 22px; top: auto; bottom: -15px; transform: rotate(90deg); }
}

@media (max-width: 760px) {
  body.portal-native #veil-bg-canvas { opacity: 0.18; }
  .portal-native-sidebar { display: none; }
  .portal-native-main { width: 100%; margin: 0; padding: 76px 12px calc(92px + env(safe-area-inset-bottom)); }
  .portal-native-mobile-header {
    position: fixed;
    z-index: 18;
    inset: 0 0 auto;
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(15px, env(safe-area-inset-right)) 0 max(15px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--pn-line);
    background: rgba(9, 9, 9, 0.91);
    backdrop-filter: blur(18px);
  }
  .portal-native-mobile-header .portal-native-brand { gap: 8px; }
  .portal-native-mobile-header .portal-native-brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: 18px; }
  .portal-native-mobile-header .portal-native-brand strong { font-size: 16px; }
  .portal-native-bottom-nav {
    position: fixed;
    z-index: 19;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 7px max(6px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    border-top: 1px solid var(--pn-line);
    background: rgba(10, 9, 9, 0.95);
    backdrop-filter: blur(22px);
  }
  .portal-native-bottom-item {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 5px 1px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #7d7571;
    font-size: 10px;
    line-height: 1.05;
    text-align: center;
    cursor: pointer;
  }
  .portal-native-bottom-item .portal-native-nav-badge { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: 8px; }
  .portal-native-bottom-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .portal-native-bottom-item > .portal-native-nav-icon { display: block !important; width: 20px; height: 20px; flex: 0 0 20px; visibility: visible !important; opacity: 1 !important; color: currentColor; fill: currentColor !important; }
  .portal-native-bottom-item.active { color: #ff8154; background: rgba(237, 80, 46, 0.08); }
  .portal-native-more { display: block; }
  .portal-native-more-toggle { position: relative; display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--pn-line); border-radius: 50%; background: rgba(255, 255, 255, .025); color: var(--pn-text); cursor: pointer; }
  .portal-native-more-toggle > span { margin-top: -5px; font-size: 18px; font-weight: 850; letter-spacing: 1px; }
  .portal-native-more-badge { position: absolute; top: -4px; right: -3px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 999px; background: #d93025; color: white; font-size: 8px; }
  .portal-native-more-menu { position: absolute; z-index: 30; top: 47px; right: 0; display: grid; width: 174px; overflow: hidden; padding: 5px; border: 1px solid var(--pn-line); border-radius: 14px; background: rgba(24, 22, 21, .98); box-shadow: 0 18px 55px rgba(0, 0, 0, .48); }
  .portal-native-more-item { position: relative; display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--pn-muted); font-size: 12px; text-align: left; }
  .portal-native-more-item.active { background: rgba(237, 80, 46, .1); color: var(--pn-orange); }
  .portal-native-more-item .portal-native-nav-badge { margin-left: auto; }
  .portal-native-whatsapp-help-mobile {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px 7px 8px;
    border: 1px solid rgba(130, 244, 173, 0.32);
    border-radius: 999px;
    opacity: 1;
    background-color: #18a957;
    background-image: linear-gradient(145deg, #21c467, #0f9148);
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
    box-shadow: 0 5px 18px rgba(32, 190, 96, 0.18);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(12px);
  }
  .portal-native-whatsapp-help-mobile:focus-visible { outline: 3px solid rgba(130, 244, 173, 0.42); outline-offset: 2px; }
  .portal-native-whatsapp-help-mobile .portal-native-icon { width: 19px; height: 19px; }
  .portal-native-page-head { display: grid; gap: 15px; margin-bottom: 16px; }
  .portal-native-page-head h1 { font-size: 30px; }
  .portal-native-page-head p:not(.portal-native-eyebrow) { font-size: 12px; }
  .portal-native-renew-head { margin-bottom: 12px; }
  .portal-native-identity { max-width: 100%; }
  .portal-native-card { border-radius: 16px; padding: 15px; }
  .portal-native-server-card-compact { padding: 15px; }
  .portal-native-server-card-compact .portal-native-card-heading h1 { font-size: 19px; }
  .portal-native-card-status { gap: 6px; }
  .portal-native-icon-button { width: 32px; height: 32px; flex-basis: 32px; }
  .portal-native-compact-usage > div { padding: 13px 12px 12px 0; }
  .portal-native-compact-usage > div + div { padding-left: 12px; }
  .portal-native-compact-usage strong { font-size: 24px; }
  .portal-native-connection-compact { padding-top: 10px; }
  .portal-native-renew-card { padding: 14px; }
  .portal-native-renew-card .portal-native-card-heading { margin-bottom: 11px; }
  .portal-native-renew-card .portal-native-card-heading h2 { font-size: 18px; }
  .portal-native-renew-card .portal-native-card-heading p:not(.portal-native-eyebrow) { font-size: 10px; line-height: 1.35; }
  .portal-native-card-heading h2 { font-size: 20px; }
  .portal-native-tier-head { align-items: flex-start; }
  .portal-native-tier-head h2 { font-size: 17px; }
  .portal-native-tier-meter { align-items: flex-start; flex-direction: column; gap: 4px; }
  .portal-native-tier-actions { align-items: stretch; flex-direction: column; }
  .portal-native-tier-actions button { width: 100%; }
  .portal-native-usage-overview { grid-template-columns: 1fr; gap: 14px; }
  .portal-native-skeleton-usage { grid-template-columns: 1fr; gap: 14px; }
  .portal-native-skeleton.gauge { width: 106px; height: 106px; justify-self: center; }
  .portal-native-skeleton-card { min-height: 390px; }
  .portal-native-live-refresh { width: fit-content; min-height: 38px; padding: 7px 11px; font-size: 11px; }
  .portal-native-liquid-gauge { width: 106px; justify-self: center; }
  .portal-native-stats { grid-template-columns: repeat(2, 1fr); }
  .portal-native-stats > div:last-child { grid-column: 1 / -1; }
  .portal-native-button-row { display: grid; grid-template-columns: 1.14fr 1fr .86fr; }
  .portal-native-button-row button { min-width: 0; justify-content: center; gap: 5px; padding: 8px 7px; font-size: 9.5px; line-height: 1; white-space: nowrap; }
  .portal-native-button-row button .portal-native-icon { width: 16px; height: 16px; flex: 0 0 16px; }
  .portal-native-package-choices { grid-template-columns: repeat(2, 1fr); }
  .portal-native-package-choices.monthly .portal-native-package-choice:last-child { grid-column: 1 / -1; }
  .portal-native-renew-card .portal-native-package-choices { gap: 7px; }
  .portal-native-renew-card .portal-native-package-choice { min-height: 56px; padding: 7px; }
  .portal-native-renew-card .portal-native-package-choice strong { font-size: 16px; }
  .portal-native-renew-card .portal-native-package-choice span { margin-top: 4px; font-size: 10px; }
  .portal-native-billing-tabs { display: grid; width: 100%; }
  .portal-native-renew-card .portal-native-billing-tabs { margin-bottom: 10px; }
  .portal-native-renew-card .portal-native-billing-tabs button { min-height: 36px; }
  .portal-native-period-picker { margin-top: 10px; padding-top: 9px; }
  .portal-native-period-heading { align-items: center; flex-direction: row; gap: 8px; }
  .portal-native-period-choices { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .portal-native-period-choices button { width: 100%; min-height: 38px; }
  .portal-native-renew-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-native-annual-status { grid-template-columns: 1fr; gap: 7px; }
  .portal-native-annual-status > div { padding: 11px 12px; }
  .portal-native-renew-card .portal-native-renew-submit { margin-top: 10px; }
  .portal-native-guide-list { grid-template-columns: 1fr; }
  .portal-native-guide-card.expanded { grid-column: 1; }
  .portal-native-guide-toggle { grid-template-columns: 94px minmax(0, 1fr) auto; gap: 11px; }
  .portal-native-guide-poster { width: 94px; }
  .portal-native-settings { grid-template-columns: 1fr; }
  .portal-native-settings .settings-personal-card,
  .portal-native-settings .settings-account-actions { grid-column: auto; }
  .portal-native-settings .settings-card { padding: 18px; }
  .settings-item { grid-template-columns: 1fr; gap: 10px; }
  .settings-item-control { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-native-settings-signout { display: none; }
  .portal-native-update-head { display: grid; gap: 7px; }
  .portal-native-updates-notifications { align-items: flex-start; }
  .portal-native-update-alert { grid-template-columns: 1fr; gap: 12px; }
  .portal-native-update-alert-actions { justify-content: stretch; }
  .portal-native-update-alert-actions button { flex: 1; }
  .portal-native-update-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .portal-native-update-actions > :only-child { grid-column: 1 / -1; }
  .portal-native-toast { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .portal-native-inline-action { margin-bottom: 16px; }
}

@media (max-width: 390px) {
  .portal-native-main { padding-top: 76px; padding-left: 10px; padding-right: 10px; }
  .portal-native-mobile-header {
    height: 60px;
    gap: 10px;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }
  .portal-native-mobile-header .portal-native-brand { gap: 7px; min-width: 0; }
  .portal-native-mobile-header .portal-native-brand-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 17px; }
  .portal-native-mobile-header .portal-native-brand strong { font-size: 15px; }
  .portal-native-whatsapp-help-mobile { min-height: 38px; padding: 6px 9px 6px 7px; }
  .portal-native-whatsapp-help-mobile .portal-native-icon { width: 18px; height: 18px; }
  .portal-native-settings .settings-card { padding: 16px; }
  .settings-section-head { margin-bottom: 14px; }
  .settings-item { padding: 15px 0; }
  .settings-item-control { grid-template-columns: 1fr; }
  .settings-item-control .settings-action-button { width: 100%; }
  .portal-native-setting-edit > div { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-native-setting-edit > div button:last-child { grid-column: 1 / -1; min-height: 34px; }
  .settings-preference-row { align-items: flex-start; }
  .portal-native-updates-notifications { display: grid; gap: 11px; }
  .portal-native-updates-notifications .settings-action-button { width: 100%; }
  .portal-native-page-head h1 { font-size: 28px; }
  .portal-native-card-heading { gap: 9px; }
  .portal-native-liquid-gauge { width: 96px; }
  .portal-native-skeleton.gauge { width: 96px; height: 96px; }
  .portal-native-pill { font-size: 8px; }
  .portal-native-button-row { grid-template-columns: 1.14fr 1fr .86fr; }
  .portal-native-button-row button { padding-inline: 4px; font-size: 8.5px; }
  .portal-native-period-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .portal-native-ticket-foot { align-items: flex-start; }
  .portal-native-ticket-foot { display: grid; }
  .portal-native-ticket-details { grid-template-columns: 1fr; }
  .portal-native-guide-toggle { grid-template-columns: 80px minmax(0, 1fr) auto; padding: 10px; }
  .portal-native-guide-poster { width: 80px; }
  .portal-native-modal { padding: 24px 18px; }
  .portal-native-modal-actions { grid-template-columns: 1fr; }
  .portal-native-pending-payment-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-native-layout *,
  .portal-native-layout *::before,
  .portal-native-layout *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.settings-push-error {
  display: block;
  margin-top: 4px;
  color: #ff8b7d;
}
.portal-native-period-stepper{display:grid;grid-template-columns:52px minmax(110px,1fr) 52px;align-items:stretch;gap:10px;margin-top:12px}.portal-native-period-stepper button{border:1px solid var(--pn-line);border-radius:12px;background:var(--pn-surface-2);color:var(--pn-text);font:800 1.45rem/1 inherit;cursor:pointer}.portal-native-period-stepper button:disabled{opacity:.35;cursor:not-allowed}.portal-native-period-stepper span{display:flex;min-height:54px;align-items:center;justify-content:center;gap:7px;border:1px solid var(--pn-line);border-radius:12px;background:var(--pn-surface)}.portal-native-period-stepper strong{font-size:1.2rem}.portal-native-period-stepper small{color:var(--pn-muted)}
.portal-native-region-toggle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px;padding:4px;border:1px solid var(--pn-line);border-radius:15px;background:var(--pn-surface)}.portal-native-region-toggle button{display:grid;min-width:0;min-height:54px;place-content:center;gap:4px;padding:9px 8px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--pn-muted);font-weight:800;white-space:nowrap;cursor:pointer;transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .16s}.portal-native-region-toggle button.selected{border-color:var(--pn-orange);background:rgba(237,80,46,.14);color:var(--pn-text);box-shadow:inset 0 0 0 1px rgba(255,138,77,.2),0 0 14px rgba(237,80,46,.12)}.portal-native-region-toggle button:active{transform:scale(.985)}.portal-native-usage-region-name{display:block}.portal-native-usage-region-name em,.portal-native-renew-region-copy em{color:var(--pn-orange);font-size:.7em;font-style:normal;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 10px rgba(255,112,58,.28)}.portal-native-trial-tag{color:var(--pn-orange);font-size:9px;font-weight:850;letter-spacing:.04em}.portal-native-region-toggle button.selected .portal-native-trial-tag{color:#ffad84}.portal-native-renew-region-toggle{margin-bottom:7px}.portal-native-renew-region-toggle button{display:flex;min-height:76px;align-items:center;justify-content:center;gap:7px;text-align:left}.portal-native-renew-region-flag{flex:0 0 auto;font-size:17px}.portal-native-renew-region-copy{display:grid;min-width:0;gap:3px}.portal-native-renew-region-copy strong{color:inherit;font-size:12px;line-height:1.1;white-space:normal}.portal-native-renew-region-copy small{color:var(--pn-muted);font-size:8.5px;font-weight:650;line-height:1.25;white-space:normal}.portal-native-region-toggle button.selected .portal-native-renew-region-copy small{color:#d7c9c2}.portal-native-region-speed-note{margin:0 0 14px;color:var(--pn-muted);font-size:10px;line-height:1.4;text-align:center}
.portal-native-usage-region-name{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0}.portal-native-usage-region-title{display:inline-flex;align-items:center;gap:4px;min-width:0}.portal-native-usage-region-title b{font:inherit}.portal-native-usage-region-title strong{font:inherit;font-weight:800}
@media (max-width:760px){.portal-native-region-toggle:not(.portal-native-renew-region-toggle){gap:4px;padding:3px}.portal-native-region-toggle:not(.portal-native-renew-region-toggle) button{min-height:82px;gap:3px;padding:7px 3px;white-space:normal;overflow:hidden}.portal-native-usage-region-name{display:grid;place-items:center;gap:2px;line-height:1.05}.portal-native-usage-region-title{justify-content:center;gap:3px;max-width:100%;font-size:13px}.portal-native-usage-region-title b{font-size:13px}.portal-native-usage-region-name em{display:block;order:-1;font-size:9px;font-weight:950;letter-spacing:.08em;text-shadow:0 0 9px rgba(255,112,58,.48)}.portal-native-trial-tag{display:block;max-width:100%;overflow:hidden;font-size:8px;line-height:1.1;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}}