:root {
  --bg-primary: #090a0c;
  --bg-warm-black: #0c090a;
  --surface-primary: #111317;
  --surface-secondary: #16191e;
  --surface-pressed: #1b1e24;
  --bottom-navigation: rgba(12, 14, 17, 0.96);
  --gold-primary: #c9a45d;
  --gold-light: #d9bb78;
  --gold-dark: #967137;
  --gold-muted: #7b6744;
  --gold-text: #ccaa66;
  --text-on-gold: #181109;
  --burgundy-deep: #350a0f;
  --carbon-red: #4a0d13;
  --red-accent-line: #741820;
  --danger: #c94b50;
  --success: #79a86f;
  --text-primary: #f1efea;
  --text-secondary: #b4b0a8;
  --text-caption: #85817a;
  --text-disabled: #5e5c58;
  --line: rgba(201, 164, 93, 0.18);
  --line-strong: rgba(201, 164, 93, 0.48);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --gutter: 14px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
  font-synthesis: none;
}

@media (min-width: 360px) { :root { --gutter: 16px; } }
@media (min-width: 390px) { :root { --gutter: 18px; } }
@media (min-width: 430px) { :root { --gutter: 20px; } }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-primary); }
body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 50% -10%, rgba(84, 17, 23, 0.08), transparent 35%),
    var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin-inline: auto;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: calc(56px + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(9, 10, 12, 0.98) 65%, rgba(9, 10, 12, 0.78) 84%, transparent);
  backdrop-filter: blur(14px);
}

.notification-bell {
  position: relative;
  width: 42px;
  height: 42px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--gold-text);
  border: 1px solid rgba(212, 168, 83, .28);
  border-radius: 50%;
  background: rgba(17, 18, 21, .92);
}
.notification-bell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid #090a0c;
  border-radius: 10px;
  background: #a31e25;
}
.support-choice, .ticket-chat, .notification-list { display: grid; gap: 12px; }
.support-primary-cta {
  width: 100%; min-height: 54px; margin-bottom: 20px;
  border-color: rgba(218, 175, 92, .72);
  background: linear-gradient(145deg, #d3aa5c, #9b6828);
  color: #100d08; font-weight: 800;
}
.faq-root { display: grid; gap: 10px; }
.faq-root > h2, .faq-category h2 { margin: 0 0 5px; color: var(--gold-text); }
.faq-category { display: grid; gap: 8px; }
.faq-item {
  border: 1px solid rgba(203, 158, 78, .22); border-radius: 14px;
  background: linear-gradient(145deg, rgba(24,24,26,.96), rgba(12,12,14,.98));
  overflow: hidden;
}
.faq-summary { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 650; }
.faq-summary svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold-text); transition: transform 380ms cubic-bezier(.2,.58,.22,1); }
.faq-item.open .faq-summary svg { transform: rotate(90deg); }
.faq-answer { height: 0; overflow: hidden; opacity: 0; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.5; transition: height 420ms cubic-bezier(.2,.58,.22,1), opacity 280ms ease; }
.faq-answer-inner { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.05); }
.faq-item.open .faq-answer { height: auto; opacity: 1; }
.ticket-button, .notification-card {
  width: 100%;
  color: inherit;
  text-align: left;
}
.ticket-thread { display: grid; gap: 10px; }
.support-message {
  max-width: 88%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.support-message.user { justify-self: end; border-color: rgba(212,168,83,.25); }
.support-message p { margin: 4px 0 0; white-space: pre-wrap; }
.ticket-summary, .notification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-card.unread { border-color: rgba(212,168,83,.5); box-shadow: inset 3px 0 0 var(--gold-text); }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.brand-mark.shield-mark { width: 36px; height: 44px; flex-basis: 36px; }
.topbar-divider { width: 1px; height: 36px; background: rgba(201, 164, 93, 0.32); }
.identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.identity-copy { min-width: 0; }
.identity strong, .identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity strong { font-size: 16px; line-height: 20px; font-weight: 600; }
.identity span { margin-top: 2px; color: var(--text-caption); font-size: 13px; line-height: 18px; font-weight: 400; }
.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-secondary);
  background-position: center;
  background-size: cover;
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 600;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.view { padding: 12px var(--gutter) 24px; }
.screen { animation: screen-in 190ms var(--ease) both; }
.page-head { margin: 8px 0 22px; }
.page-head h1 { margin: 0; color: var(--text-primary); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; }
.page-head p { margin: 5px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 22px; }

.card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.card + .card, .section + .section { margin-top: 14px; }
.access-card {
  padding: 20px;
  border-color: var(--line-strong);
  border-radius: 22px;
  background:
    radial-gradient(circle at 15% 0%, rgba(91, 18, 25, 0.13), transparent 46%),
    #111317;
  background-size: auto, auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(201, 164, 93, .08);
}
.access-card > *, .gift-card > *, .tariff-card > * { position: relative; z-index: 1; }
.brand-lockup { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.brand-lockup .brand-mark { width: 48px; height: 54px; flex-basis: 48px; }
.brand-copy { min-width: 0; flex: 1; }
.brand-title { color: var(--text-primary); font-size: 23px; line-height: 29px; font-weight: 600; letter-spacing: 0.035em; }
.tariff-title { margin-top: 2px; color: var(--gold-text); font-size: 19px; line-height: 25px; font-weight: 600; }
.status-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(201, 164, 93, 0.5);
  border-radius: 999px;
  background: rgba(201, 164, 93, 0.06);
  color: var(--gold-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill.success { border-color: rgba(121, 168, 111, 0.38); background: rgba(121, 168, 111, 0.08); color: #9fc095; }
.status-pill.warn { border-color: rgba(201, 164, 93, 0.5); color: var(--gold-light); }
.status-pill.off { border-color: rgba(201, 75, 80, 0.38); background: rgba(201, 75, 80, 0.07); color: #d8787d; }
.description { margin: 18px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.description:not(.expanded) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.details-toggle { display: inline-flex; margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--gold-text); font-size: 13px; cursor: pointer; }
.term { margin: 18px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.term strong { color: var(--gold-text); font-size: 19px; font-weight: 600; }
.date-caption { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.progress-line { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.progress-track { height: 9px; flex: 1; overflow: hidden; border: 1px solid rgba(201, 164, 93, 0.42); border-radius: 999px; background: #202226; }
.progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--carbon-red), var(--red-accent-line)); transition: width 200ms var(--ease); }
.progress-value { min-width: 38px; color: var(--text-caption); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.actions { display: grid; gap: 12px; margin-top: 18px; }
.button {
  display: flex;
  min-height: 52px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(201, 164, 93, 0.40);
  border-radius: 14px;
  background: rgba(10, 11, 13, 0.64);
  color: var(--gold-text);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 110ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.button svg { width: 21px; height: 21px; }
.button.primary { border-color: rgba(220, 188, 119, 0.55); background: linear-gradient(105deg, #c8a25c, #b78b44); color: var(--text-on-gold); }
.button.compact { min-height: 44px; font-size: 14px; }
.button:active { transform: scale(0.985); }
.button.pressed, .list-button:active, .topic-button:active, .stat-card:active { transform: scale(0.985); background-color: var(--surface-pressed); }
.button.loading svg { animation: rotate 800ms linear infinite; }
.button.danger-soft { border-color: rgba(201, 75, 80, 0.32); color: #d88f86; }
.button[disabled] { cursor: not-allowed; color: var(--text-disabled); border-color: rgba(255,255,255,.08); background: #121417; }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.link-card { display: grid; gap: 12px; }
.card-label { color: var(--text-secondary); font-size: 14px; line-height: 20px; font-weight: 500; }
.protected-link { color: var(--text-primary); font-size: 15px; line-height: 21px; font-weight: 600; }
.link-preview { overflow: hidden; color: var(--gold-text); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.link-actions { display: flex; gap: 10px; align-items: center; }
.link-actions .button { min-width: 120px; width: auto; }
.icon-button { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-secondary); color: var(--gold-text); cursor: pointer; }
.icon-button svg { width: 21px; height: 21px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.stat-card { min-width: 0; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-primary); color: inherit; text-align: left; transition: transform 110ms var(--ease), background 160ms var(--ease); }
button.stat-card { cursor: pointer; }
.stat-card.wide { grid-column: 1 / -1; }
.stat-head { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.stat-head svg { width: 20px; height: 20px; color: var(--gold-text); }
.stat-value { display: block; margin-top: 8px; color: var(--text-primary); font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-note { display: block; margin-top: 4px; color: var(--text-caption); font-size: 13px; line-height: 18px; }
.stat-card.over { border-color: rgba(201, 75, 80, 0.40); }
.stat-card.over .stat-note { color: #d8787d; }
.section-title { margin: 24px 0 11px; color: var(--gold-text); font-size: 15px; line-height: 20px; font-weight: 600; }
.traffic-list { display: grid; gap: 10px; }
.traffic-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-primary); }
.traffic-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.traffic-card strong { font-size: 14px; line-height: 20px; font-weight: 500; }
.traffic-value { color: var(--text-primary); font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.traffic-card small { display: block; margin-top: 7px; color: var(--text-caption); font-size: 13px; line-height: 18px; }
.traffic-card .progress-track { height: 6px; margin-top: 10px; border: 0; }
.exhausted { color: #d88f72; }
.exhausted-note { display: flex; gap: 8px; margin-top: 10px; color: #d88f72; font-size: 13px; line-height: 18px; }
.exhausted-note svg { width: 17px; height: 17px; flex: 0 0 17px; }
.feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #121417; color: #c6a45f; font-size: 13px; line-height: 18px; font-weight: 500; }
.chip svg { width: 16px; height: 16px; }

.empty-state, .error-state { padding: 24px 20px; text-align: center; }
.error-state > svg { width: 34px; height: 34px; margin-bottom: 12px; color: var(--gold-text); }
.empty-state .brand-mark, .error-state .brand-mark { width: 72px; height: 72px; margin-bottom: 14px; }
.empty-state h2, .error-state h1 { margin: 0; color: var(--text-primary); font-size: 22px; line-height: 28px; font-weight: 600; }
.empty-state p, .error-state p { margin: 9px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.empty-links { display: flex; justify-content: center; gap: 18px; margin-top: 16px; }
.text-link { padding: 0; border: 0; background: transparent; color: var(--gold-text); font-size: 14px; cursor: pointer; }
.maintenance { min-height: calc(100dvh - 120px); display: grid; place-items: center; }

.gift-toolbar { display: grid; gap: 12px; margin-bottom: 14px; }
.gift-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: #0e1013; }
.tab { min-height: 42px; padding: 8px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--text-caption); font-size: 12px; line-height: 16px; cursor: pointer; }
.tab.active { background: var(--surface-pressed); color: var(--gold-text); }
.gift-list, .tariff-list, .list { display: grid; gap: 14px; }
.gift-card {
  border-color: rgba(201, 164, 93, 0.30);
  background:
    linear-gradient(135deg, rgba(54, 12, 17, 0.10), rgba(15, 16, 18, 0.97)),
    #111318;
  background-size: auto, auto;
  background-blend-mode: normal, normal;
}
.gift-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.gift-meta span { color: var(--text-caption); font-size: 13px; line-height: 18px; }
.gift-meta strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 15px; line-height: 21px; font-weight: 600; }
.gift-meta > span:last-child { justify-self: end; text-align: right; }
.gift-details { display: none; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); color: var(--text-secondary); font-size: 13px; line-height: 19px; }
.gift-details p { margin: 4px 0; }
.gift-card.expanded .gift-details { display: block; }
.gift-card.expanded .details-button svg { transform: rotate(90deg); }

.tariff-card {
  display: grid;
  gap: 14px;
  border-color: rgba(201, 164, 93, 0.30);
  border-radius: 18px;
  background: linear-gradient(180deg, #14161a, #101216);
  box-shadow: inset 2px 0 0 rgba(116, 24, 32, 0.24), 0 12px 28px rgba(0,0,0,.22);
}
.tariff-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.tariff-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 12, 14, 0.76); color: var(--gold-text); }
.tariff-icon svg { width: 25px; height: 25px; }
.tariff-name { color: var(--text-primary); font-size: 20px; line-height: 26px; font-weight: 600; }
.tariff-short { margin-top: 3px; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
.tariff-price { color: var(--gold-light); font-size: 24px; line-height: 30px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tariff-price small { display: block; color: var(--text-secondary); font-size: 13px; line-height: 18px; font-weight: 400; }
.tariff-summary { display: flex; flex-wrap: wrap; gap: 7px 16px; min-height: 0; color: var(--text-secondary); }
.tariff-summary span { display: inline-flex; min-width: 0; align-items: baseline; gap: 5px; padding: 0; border: 0; background: transparent; }
.tariff-summary small { color: var(--text-caption); font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .04em; }
.tariff-summary strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: 13px; line-height: 18px; font-weight: 600; }
.availability { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 14px; line-height: 20px; font-weight: 500; }
.availability svg { width: 17px; height: 17px; color: var(--success); }
.availability.capacity-exhausted, .availability.sales-disabled { color: #d48a7e; font-weight: 750; }
.availability.capacity-exhausted svg, .availability.sales-disabled svg { color: #d48a7e; }
.tariff-details { display: none; padding-top: 2px; color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.tariff-card.expanded .tariff-details { display: block; }
.vpn-set { display: grid; grid-template-columns: minmax(0,1fr); gap: 3px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.05); }
.vpn-set:first-child { margin-top: 10px; }
.vpn-set span, .vpn-set small { overflow-wrap: anywhere; }
.vpn-set small { color: var(--text-caption); line-height: 18px; }
.tariff-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.details-button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; border: 0; background: transparent; color: var(--gold-text); font-size: 14px; font-weight: 500; cursor: pointer; }
.details-button svg { width: 17px; height: 17px; transition: transform 180ms var(--ease); }
.tariff-card.expanded .details-button svg { transform: rotate(90deg); }
.tariff-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tariff-actions .button { min-height: 46px; padding-inline: 10px; font-size: 14px; }
.promo-entry { margin-top: 14px; }

.sub-head { display: flex; align-items: center; gap: 12px; }
.sub-head h1 { min-width: 0; font-size: 25px; line-height: 31px; }
.sub-head .icon-button { transform: rotate(180deg); }
.notice-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(201,164,93,.04); color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.notice-card.warning { margin-bottom: 12px; border-color: rgba(201,75,80,.38); color: #d88f86; }
.notice-card svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--gold-text); }
.notice-card p { margin: 0; }
.protected-value { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #0d0f12; }
.protected-value span { color: var(--text-caption); font-size: 12px; }
.protected-value code { overflow: hidden; color: var(--gold-text); font: 13px/19px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.subscription-link-row { position: relative; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; transition: transform .22s ease,border-color .24s ease,box-shadow .28s ease,background .28s ease; }
.subscription-link-row::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg,transparent 22%,rgba(232,190,91,.14) 48%,transparent 72%); content: ""; pointer-events: none; transform: translateX(-130%); }
.subscription-link-copy-area { position: relative; z-index: 1; display: grid; min-width: 0; padding: 2px 4px; gap: 5px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.subscription-link-copy-area small { color: #7f7768; font-size: 10px; transition: color .2s ease; }
.subscription-link-copy-area:active { transform: scale(.985); }
.subscription-link-copy-area:focus-visible small { color: var(--gold-text); }
.subscription-link-copy-area:focus-visible { outline: 1px solid rgba(225,182,82,.5); outline-offset: 5px; border-radius: 6px; }
.subscription-link-row.is-copied { border-color: rgba(232,188,82,.7); box-shadow: 0 0 0 1px rgba(230,184,76,.12),0 12px 34px rgba(0,0,0,.28); }
.subscription-link-row.is-copied::after { animation: subscriptionLinkSweep .7s cubic-bezier(.22,.7,.22,1); }
.subscription-link-tools { display: flex; gap: 7px; }
.subscription-link-tools .icon-button { position: relative; z-index: 1; width: 42px; height: 42px; border-color: rgba(205,160,62,.28); background: rgba(205,160,62,.05); color: var(--gold-text); transition: transform .2s ease,border-color .22s ease,box-shadow .25s ease; }
.subscription-link-tools .qr-action { border-color: rgba(227,184,78,.5); background: linear-gradient(145deg,rgba(201,152,49,.13),rgba(13,15,18,.9)); }
.subscription-link-tools .qr-action:hover { border-color: rgba(239,198,100,.8); box-shadow: 0 8px 22px rgba(191,136,28,.16); transform: translateY(-2px) scale(1.025); }
.subscription-link-tools .qr-action:active { transform: scale(.94); }
@media (hover:hover) and (pointer:fine) {
  .subscription-link-row:has(.subscription-link-copy-area:hover) { border-color: rgba(221,176,73,.42); background: linear-gradient(115deg,rgba(209,163,62,.065),#0d0f12 46%); box-shadow: 0 10px 28px rgba(0,0,0,.22),inset 0 1px rgba(255,226,158,.04); transform: translateY(-1px); }
  .subscription-link-copy-area:hover small { color: var(--gold-text); }
}
.qr-sheet-overlay { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; padding: 14px 12px max(14px,env(safe-area-inset-bottom)); background: rgba(0,0,0,.78); opacity: 0; will-change: opacity; animation: qrOverlayIn .22s ease-out forwards; }
.qr-sheet { position: relative; width: min(430px,100%); max-height: min(92dvh,720px); margin: 0 auto; overflow: auto; padding: 25px 20px 20px; border: 1px solid rgba(216,170,66,.46); border-radius: 24px 24px 18px 18px; background-color: #090a0c; background-image: radial-gradient(circle at 50% 0,rgba(180,125,25,.14),transparent 42%),linear-gradient(155deg,rgba(18,20,22,.56),rgba(5,6,8,.80) 72%),url("/assets/textures/referral-obsidian-carbon-v3.webp"); background-size: auto,auto,cover; background-position: center,center,center; background-repeat: no-repeat,no-repeat,no-repeat; box-shadow: 0 -18px 60px rgba(0,0,0,.58),inset 0 1px rgba(255,224,153,.06); opacity: 0; text-align: center; transform: translate3d(0,24px,0) scale(.985); transform-origin: 50% 100%; backface-visibility: hidden; will-change: transform,opacity; animation: qrSheetIn .32s cubic-bezier(.16,1,.3,1) .01s forwards; }
.qr-sheet-overlay.is-closing { animation: qrOverlayOut .18s ease-in forwards; }
.qr-sheet-overlay.is-closing .qr-sheet { animation: qrSheetOut .18s cubic-bezier(.4,0,1,1) forwards; }
.qr-sheet-close { position: absolute; top: 12px; right: 13px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--text-secondary); font-size: 24px; }
.qr-sheet-kicker { color: var(--gold-text); font-size: 10px; letter-spacing: .22em; }
.qr-sheet h2 { margin: 8px 36px 17px; font: 600 24px/30px Georgia,"Times New Roman",serif; }
.qr-sheet > p { margin: 16px auto 5px; max-width: 300px; color: var(--text-primary); font-size: 14px; line-height: 21px; }
.qr-sheet > small { display: block; margin: 0 auto 17px; max-width: 310px; color: var(--text-caption); font-size: 12px; line-height: 18px; }
.qr-code-frame { display: grid; width: min(274px,76vw); aspect-ratio: 1; margin: 0 auto; place-items: center; overflow: hidden; padding: 13px; border: 1px solid rgba(219,176,72,.62); border-radius: 18px; background: #fff; box-shadow: 0 15px 42px rgba(0,0,0,.4),0 0 34px rgba(191,139,31,.1); }
.qr-code-frame svg { display: block; width: 100%; height: 100%; color: #050505; opacity: 0; transform: scale(.94); }
.qr-code-frame.is-ready svg { animation: qrCodeReveal .26s cubic-bezier(.2,.8,.2,1) forwards; }
.qr-loading { color: #6e6043; font-size: 13px; }
.qr-sheet .button { width: 100%; }
.qr-private-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #9f927a; font-size: 11px; }
.qr-private-note svg { width: 14px; height: 14px; color: var(--gold-text); }
.promo-active-caption { display: block; margin-top: 3px; color: var(--gold-light); }
.promo-reward-overlay { position: fixed; inset: 0; z-index: 92; display: grid; align-items: end; padding: 14px 12px max(14px,env(safe-area-inset-bottom)); overflow: auto; background: rgba(0,0,0,.76); -webkit-backdrop-filter: blur(7px) saturate(.82); backdrop-filter: blur(7px) saturate(.82); opacity: 0; animation: promoRewardBackdropIn .24s ease-out forwards; }
.promo-reward-modal { position: relative; width: min(430px,100%); max-height: min(92dvh,760px); margin: auto auto 0; overflow: auto; padding: 27px 20px 20px; border: 1px solid rgba(222,173,68,.52); border-radius: 25px 25px 18px 18px; background-color: #10080a; background-image: radial-gradient(circle at 50% -8%,rgba(213,156,42,.18),transparent 34%),linear-gradient(155deg,rgba(41,6,12,.48),rgba(5,6,8,.80) 68%),url("/assets/textures/referral-link-ruby-v5.webp"); background-size: auto,auto,cover; background-position: center,center,center; background-repeat: no-repeat,no-repeat,no-repeat; box-shadow: 0 -24px 72px rgba(0,0,0,.66),0 0 42px rgba(122,12,22,.13),inset 0 1px rgba(255,224,145,.08); opacity: 0; transform: translate3d(0,28px,0) scale(.982); transform-origin: 50% 100%; animation: promoRewardCardIn .36s cubic-bezier(.16,1,.3,1) .02s forwards; }
.promo-reward-overlay.is-closing { animation: promoRewardBackdropOut .2s ease-in forwards; }
.promo-reward-overlay.is-closing .promo-reward-modal { animation: promoRewardCardOut .2s cubic-bezier(.4,0,1,1) forwards; }
.promo-reward-close { position: absolute; top: 12px; right: 13px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: rgba(255,255,255,.045); color: var(--text-secondary); font-size: 24px; line-height: 1; }
.promo-reward-kicker { display: block; padding-right: 42px; color: var(--gold-text); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.promo-reward-mark { display: grid; width: 54px; height: 54px; margin: 19px 0 14px; place-items: center; border: 1px solid rgba(222,174,73,.48); border-radius: 16px; background: linear-gradient(145deg,rgba(91,49,16,.55),rgba(13,7,9,.88)); color: var(--gold-light); box-shadow: inset 0 1px rgba(255,232,172,.09),0 10px 24px rgba(0,0,0,.3); }
.promo-reward-mark svg { width: 25px; height: 25px; }
.promo-reward-mark.success { border-color: rgba(116,186,132,.5); color: #9bd0a8; background: linear-gradient(145deg,rgba(25,76,43,.42),rgba(6,13,10,.9)); }
.promo-error-modal .promo-reward-mark { border-color: rgba(214,80,84,.48); color: #e8968d; background: linear-gradient(145deg,rgba(105,16,26,.48),rgba(15,6,8,.9)); }
.promo-reward-modal h2 { margin: 0; padding-right: 30px; color: #f7f3ea; font: 600 25px/31px Georgia,"Times New Roman",serif; text-wrap: balance; }
.promo-reward-lead { margin: 9px 0 0; color: #b6afa3; font-size: 14px; line-height: 21px; }
.promo-reward-hero { display: block; margin: 17px 0 3px; color: #e6bc68; font: 600 24px/30px Georgia,"Times New Roman",serif; overflow-wrap: anywhere; }
.promo-reward-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.promo-reward-facts.one { grid-template-columns: 1fr; }
.promo-reward-facts > span { display: grid; min-width: 0; gap: 4px; padding: 12px 13px; border: 1px solid rgba(211,164,70,.24); border-radius: 13px; background: rgba(3,4,6,.53); }
.promo-reward-facts small { color: #8d877d; font-size: 10px; }
.promo-reward-facts strong { color: #eee9df; font-size: 14px; line-height: 19px; overflow-wrap: anywhere; }
.promo-reward-features { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.promo-reward-features li { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 8px; color: #c7c0b5; font-size: 12px; line-height: 18px; }
.promo-reward-features svg { width: 16px; height: 16px; margin-top: 1px; color: var(--gold-light); }
.promo-reward-note { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid rgba(211,164,70,.16); color: #89837a; font-size: 11px; line-height: 17px; }
.promo-reward-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); gap: 8px; margin-top: 18px; }
.promo-reward-actions .button { min-width: 0; min-height: 50px; padding-inline: 10px; }
.promo-error-modal .promo-reward-actions,.promo-reward-facts.one + .promo-reward-actions { grid-template-columns: 1fr; }
@media (max-width: 340px) {
  .promo-reward-modal { padding: 24px 16px 17px; }
  .promo-reward-modal h2 { font-size: 23px; line-height: 28px; }
  .promo-reward-facts { grid-template-columns: 1fr; }
  .promo-reward-actions { grid-template-columns: 1fr; }
}
@keyframes subscriptionLinkSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes qrOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qrOverlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes qrSheetIn { from { opacity: 0; transform: translate3d(0,24px,0) scale(.985); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes qrSheetOut { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(0,16px,0) scale(.99); } }
@keyframes qrCodeReveal { to { opacity: 1; transform: scale(1); } }
@keyframes promoRewardBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoRewardBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes promoRewardCardIn { from { opacity: 0; transform: translate3d(0,28px,0) scale(.982); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes promoRewardCardOut { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(0,18px,0) scale(.99); } }
@media (prefers-reduced-motion: reduce) {
  .qr-sheet-overlay,.qr-sheet,.promo-reward-overlay,.promo-reward-modal { opacity: 1; transform: none; animation: none; }
  .qr-code-frame svg { opacity: 1; transform: none; }
}

/* Stage 40U promo polish: intact carbon tiles and optically centred close icon. */
.promo-error-modal {
  border-color: rgba(214,80,84,.42)!important;
  background-color: #090b0c!important;
  background-image:
    radial-gradient(circle at 50% -8%,rgba(168,54,59,.10),transparent 34%),
    linear-gradient(155deg,rgba(19,21,22,.54),rgba(5,6,8,.80) 68%),
    url("/assets/textures/referral-obsidian-carbon-v3.webp")!important;
  background-size: auto,auto,cover!important;
  background-position: center,center,center!important;
  background-repeat: no-repeat,no-repeat,no-repeat!important;
}
.promo-success-modal {
  background-color: #140609!important;
  background-image:
    radial-gradient(circle at 50% -8%,rgba(213,156,42,.16),transparent 34%),
    linear-gradient(155deg,rgba(47,5,12,.42),rgba(5,6,8,.78) 68%),
    url("/assets/textures/referral-link-ruby-v5.webp")!important;
  background-size: auto,auto,cover!important;
  background-position: center,center,center!important;
  background-repeat: no-repeat,no-repeat,no-repeat!important;
}
.promo-reward-close {
  padding: 0!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  font-size: 0!important;
  line-height: 1!important;
}
.promo-reward-close::before {
  content: "×";
  display: block;
  font: 400 24px/1 Arial,sans-serif;
  transform: translateY(-1px);
}
.tariff-promo-entry .inline-field input { min-width: 0; width: 100%; }
@media (max-width:430px) {
  .tariff-promo-entry .inline-field { grid-template-columns: minmax(0,1fr); }
  .tariff-promo-entry .inline-field .button { width: 100%; }
}
.security-note, .section-caption { color: var(--text-caption); font-size: 13px; line-height: 19px; }
.instruction-card h2, .trial-card h2 { margin: 0; font-size: 20px; line-height: 27px; }
.instruction-list { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.instruction-list li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
.instruction-list li > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-text); font-size: 12px; }
.instruction-list p { margin: 3px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.trial-card { text-align: center; }
.trial-card > p { color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.trial-shield { width: 112px; height: 112px; object-fit: contain; }
.document-links { display: grid; gap: 8px; margin: 16px 0; }
.document-links .list-button { min-height: 58px; }
.document-links .list-icon,
.more-section .list-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
.document-links .list-icon svg,
.more-section .list-icon svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}
.document-icon-guard .list-icon {
  width: 40px !important;
  height: 40px !important;
  overflow: hidden;
}
.document-icon-guard .list-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.device-list { display: grid; gap: 10px; }
.device-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 14px; overflow: hidden; }
.device-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--gold-text); }
.device-icon svg { width: 21px; height: 21px; }
.device-copy { min-width: 0; flex: 1; }
.device-copy strong, .device-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-copy strong { font-size: 14px; line-height: 20px; }
.device-copy small { margin-top: 3px; color: var(--text-caption); font-size: 12px; line-height: 17px; }
.icon-button.danger { border-color: rgba(201,75,80,.25); color: #d8787d; }
.device-row .icon-button.danger { width: 46px; min-width: 46px; max-width: 46px; height: 46px; padding: 0; overflow: hidden; justify-self: end; font-size: 0; white-space: nowrap; }
.device-row .icon-button.danger svg { width: 22px; height: 22px; flex: 0 0 22px; }
.device-row .icon-button.danger.compact-loading { display:grid;place-items:center;pointer-events:none;line-height:0;padding:0; }
.device-row .icon-button.danger.compact-loading svg { display:block;margin:0;animation:rotate 800ms linear infinite;transform-origin:center; }

.topic-list, .more-group { display: grid; gap: 8px; }
.topic-button, .list-button {
  display: flex;
  min-height: 68px;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-primary);
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.topic-icon, .list-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(201,164,93,.18); border-radius: 12px; color: var(--gold-text); }
.topic-icon svg, .list-icon svg { width: 22px; height: 22px; }
.topic-copy, .list-copy { min-width: 0; flex: 1; }
.topic-copy strong, .list-copy strong { display: block; font-size: 15px; line-height: 20px; font-weight: 500; }
.topic-copy small, .list-copy small { display: block; margin-top: 2px; color: var(--text-caption); font-size: 13px; line-height: 18px; }
.chevron { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold-muted); }
.more-shell { display: grid; gap: 20px; }
.more-section h2 { margin: 0 0 9px; color: var(--gold-text); font-size: 15px; line-height: 20px; font-weight: 600; }
.more-group { padding: 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: var(--surface-primary); }
.more-group .list-button { border: 0; border-radius: 12px; background: transparent; }
.more-group .list-button + .list-button { border-top: 1px solid rgba(255,255,255,.05); border-radius: 0; }
.version { margin: 2px 0 0; color: var(--text-caption); font-size: 13px; line-height: 18px; text-align: center; }
.about-copy { white-space: pre-line; color: var(--text-secondary); font-size: 15px; line-height: 23px; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(480px, 100%);
  min-height: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 7px 6px var(--safe-bottom);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--bottom-navigation);
  backdrop-filter: blur(18px);
}
.bottom-nav:not([hidden]) { display: grid; }
.nav-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 56px;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #76736e;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
}
.nav-icon { width: 23px; height: 23px; }
.nav-item.active { color: var(--gold-text); }
.nav-tariffs { transform: translateY(-5px); }
.nav-tariff-disc { display: grid; width: 59px; height: 59px; place-items: center; border: 1px solid rgba(201,164,93,.72); border-radius: 50%; background: #121417; box-shadow: 0 6px 18px rgba(0,0,0,.38); color: #76736e; }
.nav-tariff-disc .nav-icon { width: 26px; height: 26px; }
.nav-tariffs.active .nav-tariff-disc { background: linear-gradient(145deg, #241b11, #121417); color: var(--gold-text); }
.nav-tariffs:not(.active) { color: #76736e; }

.skeleton { border-radius: 14px; background: linear-gradient(90deg, #15171b 20%, #202329 50%, #15171b 80%); background-size: 220% 100%; animation: shimmer 1.4s infinite linear; }
.title-skeleton { width: 54%; height: 34px; margin: 16px 0 22px; }
.hero-skeleton { height: 276px; border-radius: 22px; }
.row-skeleton { height: 82px; margin-top: 14px; }
.row-skeleton.short { width: 76%; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 40; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(22,25,30,.98); color: var(--text-primary); font-size: 13px; box-shadow: 0 12px 28px rgba(0,0,0,.35); animation: toast-in 180ms var(--ease); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 5px); } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 359px) {
  .page-head h1 { font-size: 28px; line-height: 34px; }
  .status-row { display: grid; }
  .status-pill { justify-self: start; }
  .tariff-top { grid-template-columns: 44px minmax(0, 1fr); }
  .tariff-price { grid-column: 2; text-align: left; }
  .button-row { grid-template-columns: 1fr; }
  .tariff-actions { grid-template-columns: 1fr; }
}

/* Stage 36.6 premium carbon surfaces and native-flow controls */
:root {
  --bg-primary: #08090b;
  --bg-warm-black: #0c0a0b;
  --surface-primary: #111318;
  --surface-secondary: #15171c;
  --surface-pressed: #1a1d22;
  --gold-primary: #c7a05a;
  --gold-light: #d8b873;
  --gold-dark: #8f6b34;
  --text-primary: #f1efea;
  --text-secondary: #aaa69f;
  --text-caption: #7b7872;
  --burgundy-deep: #350a10;
  --carbon-red: #4a0d14;
  --red-accent-line: #721a22;
  --danger: #c65a60;
  --success: #7fa26f;
}

body {
  background:
    radial-gradient(circle at 16% -8%, rgba(74, 13, 20, .12), transparent 34%),
    linear-gradient(180deg, #090a0c 0%, #08090b 72%);
}

.card,
.stat-card,
.traffic-card,
.topic-button,
.more-group,
.list-button {
  background-color: var(--surface-primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .018);
}

.access-card {
  border-color: rgba(199, 160, 90, .38);
  background:
    radial-gradient(circle at 12% 8%, rgba(82, 18, 25, .18), transparent 38%),
    linear-gradient(145deg, rgba(47, 10, 16, .28), rgba(12, 13, 16, .985) 62%),
    url("/assets/textures/carbon-burgundy-subtle.webp");
  background-blend-mode: normal, normal, soft-light;
  background-size: auto, auto, 384px 384px;
}

.access-card::after,
.gift-card::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 18%, rgba(8, 9, 11, .16) 48%, rgba(8, 9, 11, .55) 100%);
}

.referral-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 128px;
  margin: 12px 0 14px;
  padding: 17px 16px;
  overflow: hidden;
  border: 1px solid rgba(217, 177, 91, .66);
  border-radius: 20px;
  color: var(--text-primary);
  text-align: left;
  background:
    radial-gradient(ellipse at 2% 3%, rgba(238, 183, 73, .22), transparent 32%),
    linear-gradient(112deg, rgba(63, 45, 19, .34) 0 14%, rgba(16, 17, 19, .92) 36%, rgba(6, 7, 9, .98) 100%),
    url("/assets/textures/carbon-black-subtle.webp");
  background-size: auto, auto, 384px 384px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 245, 214, .08), inset 0 -22px 34px rgba(0, 0, 0, .18);
}
.referral-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  content: "";
  pointer-events: none;
  opacity: .52;
  background: linear-gradient(135deg, rgba(255, 205, 103, .36), transparent 32% 55%, rgba(168, 104, 22, .22) 56% 61%, transparent 62%);
}
.referral-summary-card::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 144, .04), inset 0 18px 28px rgba(255, 255, 255, .018);
}
.referral-summary-card > * { position: relative; z-index: 1; }
.referral-summary-card img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 9px 12px rgba(0, 0, 0, .56)); }
.referral-summary-copy { display: grid; gap: 5px; min-width: 0; }
.referral-summary-copy > strong { overflow: hidden; color: #f4efe6; font-size: clamp(16px, 4.5vw, 21px); font-weight: 650; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.referral-summary-copy > small { color: var(--gold-light); font-size: 14px; font-weight: 650; }
.referral-summary-metrics { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin-top: 5px; padding-right: 74px; }
.referral-summary-metrics > span { display: grid; gap: 1px; min-width: 0; }
.referral-summary-metrics em { color: var(--text-caption); font-size: 10px; font-style: normal; }
.referral-summary-metrics b { overflow: hidden; color: #f3eadc; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.referral-summary-link { position: absolute; right: 16px; bottom: 17px; display: flex; align-items: center; color: var(--gold-light); font-size: 13px; white-space: nowrap; }
.referral-summary-link svg { width: 18px; height: 18px; }

.referral-lead { margin: -3px 2px 14px; color: var(--text-secondary); line-height: 1.45; }
.referral-hero-card,
.referral-link-card,
.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 169, 78, .50);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(23, 24, 27, .91), rgba(6, 7, 9, .97)),
    url("/assets/textures/carbon-black-subtle.webp");
  background-size: auto, 384px 384px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 245, 214, .055), inset 0 -25px 42px rgba(0, 0, 0, .22);
}
.referral-hero-card::after,
.referral-link-card::after,
.referral-statistics::after,
.referral-history::after,
.referral-condition-section::after,
.referral-condition-overview::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 229, 168, .025), inset 0 18px 30px rgba(255, 255, 255, .018);
}
.referral-hero-card > *, .referral-link-card > *, .referral-statistics > *, .referral-history > *, .referral-condition-section > *, .referral-condition-overview > * { position: relative; z-index: 1; }
.referral-hero-card {
  display: grid;
  grid-template-columns: minmax(118px, 40%) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 250px;
  padding: 22px 20px 18px;
  background:
    linear-gradient(90deg, rgba(9, 10, 12, .98) 0 48%, rgba(9, 10, 12, .70) 72%, rgba(36, 5, 10, .32) 100%),
    linear-gradient(145deg, rgba(23, 24, 27, .93), rgba(5, 6, 8, .98)),
    url("/assets/textures/carbon-burgundy-subtle.webp");
  background-position: center, center, right center;
  background-size: auto, auto, 384px 384px;
}
.referral-hero-card::before {
  position: absolute;
  inset: 0 0 0 58%;
  content: "";
  pointer-events: none;
  opacity: .72;
  background: linear-gradient(128deg, transparent 0 36%, rgba(118, 5, 17, .15) 37% 43%, transparent 44% 52%, rgba(189, 13, 28, .18) 53% 58%, transparent 59%);
}
.referral-hero-brand { display: grid; place-items: center; min-width: 0; }
.referral-emblem { width: 100%; max-width: 175px; max-height: 205px; object-fit: contain; filter: drop-shadow(0 14px 17px rgba(0, 0, 0, .62)); }
.referral-hero-copy { display: grid; justify-items: center; min-width: 0; text-align: center; }
.referral-hero-card .eyebrow { color: var(--gold-light); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.referral-hero-card h2 { margin: 6px 0 9px; color: #e6c57a; font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 10vw, 55px); font-weight: 500; line-height: .95; }
.referral-active-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 1px solid rgba(214, 171, 76, .55); border-radius: 999px; color: #e5c276; background: linear-gradient(180deg, rgba(105, 71, 17, .36), rgba(23, 17, 8, .60)); font-size: 13px; }
.referral-active-pill svg { width: 14px; height: 14px; }
.referral-hero-card p { margin: 11px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.referral-level-progress { grid-column: 1 / -1; display: grid; gap: 7px; margin-top: 3px; }
.referral-level-progress > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 12px; }
.referral-level-progress strong { color: var(--gold-light); }
.referral-level-progress progress { width: 100%; height: 6px; }
.referral-level-progress.complete { margin-top: 0; }

.referral-link-card { margin-top: 14px; padding: 17px; border-color: rgba(226, 177, 76, .62); background: linear-gradient(145deg, rgba(44, 6, 12, .42), rgba(8, 9, 11, .91)), url("/assets/textures/carbon-burgundy-subtle.webp"); background-size: auto, 384px 384px; }
.referral-link-card h2,
.referral-statistics h2,
.referral-history h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #e5c57d; font-size: 18px; font-weight: 550; }
.referral-link-card h2 svg, .referral-statistics h2 svg, .referral-history h2 svg { width: 21px; height: 21px; }
.referral-link-value { padding: 14px; overflow: hidden; border: 1px solid rgba(216, 184, 115, .43); border-radius: 14px; color: #dfbd70; background: linear-gradient(180deg, rgba(7, 8, 10, .96), rgba(12, 13, 15, .94)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .025), inset 0 10px 22px rgba(0, 0, 0, .18); }
.referral-link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.referral-link-actions .button { min-height: 48px; padding: 10px 8px; }
.referral-code { width: fit-content; min-width: 0; min-height: 0; margin: 10px auto 0; padding: 7px 12px; border: 1px solid rgba(216, 184, 115, .43); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); background: rgba(8,9,11,.66); appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; line-height: 1.2; white-space: nowrap; word-break: normal; overflow-wrap: normal; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 160ms ease; }
.referral-code strong { color: var(--gold-light); letter-spacing: .04em; }
.referral-code:active { transform: scale(.975); }
.referral-code:focus-visible { outline: 2px solid rgba(235,191,94,.78); outline-offset: 2px; }
.referral-code.copied { border-color: rgba(242,202,111,.86); background-color: rgba(42,33,18,.94); box-shadow: 0 0 0 3px rgba(220,172,75,.10), inset 0 1px rgba(255,255,255,.045); }
.referral-section-title { margin-top: 16px; color: var(--gold-light); }
.referral-bonus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.referral-bonus-grid article { display: grid; grid-template-rows: 40px auto auto 1fr; justify-items: center; gap: 5px; min-width: 0; min-height: 154px; padding: 12px 7px; border: 1px solid rgba(216, 174, 86, .44); border-radius: 16px; background: linear-gradient(145deg, rgba(20, 21, 24, .92), rgba(7, 8, 10, .98)), url("/assets/textures/carbon-black-subtle.webp"); background-size: auto, 384px 384px; text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .30), inset 0 1px rgba(255, 245, 214, .045); }
.referral-bonus-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(222, 177, 79, .66); border-radius: 50%; color: #e8c673; background: rgba(8, 9, 11, .64); }
.referral-bonus-icon svg { width: 21px; height: 21px; }
.referral-bonus-grid article > span:not(.referral-bonus-icon) { color: #ece6dc; font-size: 12px; }
.referral-bonus-grid strong { color: #d9ae5d; font-size: clamp(15px, 4.6vw, 21px); line-height: 1.05; }
.referral-bonus-grid small { align-self: end; color: var(--text-caption); font-size: 9px; line-height: 1.25; }
.referral-promos-shell { margin-top: 12px; }
.referral-disclosure,
.referral-conditions-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 15px; color: var(--gold-light); text-align: left; }
.referral-disclosure > svg, .referral-conditions-link > svg { width: 21px; height: 21px; }
.referral-disclosure > svg:last-child, .referral-conditions-link > svg:last-child { width: 18px; height: 18px; }
.referral-disclosure b { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; color: #171109; background: #d9ae5d; font-size: 11px; }
.referral-promos-list { padding: 0 14px 10px; }
.referral-promo { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .065); }
.referral-promo-icon, .referral-history-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(216, 174, 86, .35); border-radius: 11px; color: var(--gold-light); background: rgba(8, 9, 11, .66); }
.referral-promo-icon svg, .referral-history-icon svg { width: 19px; height: 19px; }
.referral-promo > div { display: grid; gap: 2px; min-width: 0; }
.referral-promo span { color: var(--text-secondary); }
.referral-promo small { color: var(--gold-light); font-size: 10px; }
.referral-copy-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(216, 174, 86, .35); border-radius: 11px; color: var(--gold-light); }
.referral-copy-icon svg { width: 18px; height: 18px; }
.referral-statistics { margin-top: 12px; padding: 15px; }
.referral-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.referral-metrics > span { display: grid; align-content: space-between; gap: 6px; min-width: 0; min-height: 58px; padding: 4px 8px; text-align: center; }
.referral-metrics > span + span { border-left: 1px solid rgba(216, 174, 86, .25); }
.referral-metrics small { color: var(--text-secondary); font-size: 9px; line-height: 1.2; }
.referral-metrics strong { color: #e4bd6c; font-size: clamp(13px, 4vw, 19px); line-height: 1.05; }
.referral-conditions-link { margin-top: 12px; grid-template-columns: auto minmax(0, 1fr) auto; }
.referral-history { margin-top: 12px; padding: 15px; }
.referral-history-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.referral-history-row > div { display: grid; gap: 2px; min-width: 0; }
.referral-history-row small, .referral-history-row time { color: var(--text-caption); font-size: 10px; }
.referral-history-row b { white-space: nowrap; }
.referral-history-row b.positive { color: #a9d39e; }
.referral-history-row b.negative { color: #e69999; }
.referral-empty { margin: 8px 0; color: var(--text-secondary); text-align: center; }

.referral-condition-overview { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 17px; }
.referral-overview-icon { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(216, 174, 86, .60); border-radius: 50%; color: var(--gold-light); background: rgba(8, 9, 11, .62); }
.referral-overview-icon svg { width: 35px; height: 35px; }
.referral-condition-overview p { margin: 3px 0; color: var(--text-secondary); }
.referral-condition-overview strong { color: var(--gold-light); }
.referral-condition-section { margin-top: 12px; padding: 15px; }
.referral-condition-section h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; color: #f0ece5; font-size: 17px; }
.referral-condition-section h2 > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(216, 174, 86, .55); border-radius: 50%; color: var(--gold-light); }
.referral-condition-section h2 svg { width: 18px; height: 18px; }
.referral-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.referral-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 44px; border-top: 1px solid rgba(216, 174, 86, .15); color: var(--text-secondary); }
.referral-steps b { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(216, 174, 86, .55); border-radius: 50%; color: var(--gold-light); background: rgba(76, 7, 14, .34); }
.referral-condition-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.referral-levels { display: grid; gap: 7px; }
.referral-level-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 10px; border: 1px solid rgba(216, 174, 86, .29); border-radius: 11px; background: rgba(7, 8, 10, .56); }
.referral-level-row span { color: var(--gold-light); }
.referral-level-row small { grid-column: 1 / -1; color: var(--text-caption); font-size: 9px; }
.referral-order-list, .referral-note-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); }
.referral-order-list li, .referral-note-list li { display: flex; align-items: flex-start; gap: 8px; }
.referral-order-list svg, .referral-note-list svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--gold-light); }
.referral-important { background: linear-gradient(105deg, rgba(15, 16, 18, .94) 0 68%, rgba(48, 5, 11, .42)), url("/assets/textures/carbon-black-subtle.webp"); background-size: auto, 384px 384px; }
.referral-understood { width: 100%; margin-top: 12px; }
.tariff-price .price-before,.detail-price .price-before{display:block;color:var(--text-caption);font-size:.62em;text-decoration:line-through;text-decoration-thickness:1px}.tariff-price .price-after,.detail-price .price-after{display:block;color:var(--gold-light)}.referral-discount-label{display:block;color:#a9d39e;font-size:10px;line-height:1.2;white-space:normal}
.tariff-promo-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,1fr);gap:14px;align-items:center;margin-bottom:12px;padding:15px 16px;background:linear-gradient(120deg,rgba(195,142,43,.12),rgba(11,13,15,.96) 55%)}
.tariff-promo-entry>div:first-child{display:grid;gap:4px}.tariff-promo-entry small{color:var(--text-secondary)}.tariff-promo-entry.active{border-color:rgba(224,177,79,.5);box-shadow:inset 0 0 28px rgba(190,132,27,.06)}
.gift-catalog-price{display:grid;justify-items:end;gap:1px}.gift-catalog-price .price-before{font-size:11px;color:var(--text-caption);text-decoration:line-through}.gift-catalog-price .price-after{color:var(--gold-light)}.gift-catalog-price .referral-discount-label{max-width:132px;text-align:right}
@media(max-width:560px){.tariff-promo-entry{grid-template-columns:1fr}.gift-catalog-price{justify-items:end}}
.referral-terms h3{color:#d9ae5d}.referral-terms p{white-space:pre-wrap;color:var(--text-secondary);line-height:1.55}
@media (max-width: 390px) {
  .referral-summary-card { grid-template-columns: 64px minmax(0, 1fr); gap: 11px; min-height: 122px; padding: 14px; }
  .referral-summary-card img { width: 64px; height: 64px; }
  .referral-summary-link { position: absolute; right: 13px; bottom: 12px; margin: 0; }
  .referral-summary-metrics { padding-right: 67px; gap: 6px 11px; }
  .referral-hero-card { grid-template-columns: minmax(95px, 36%) minmax(0, 1fr); gap: 12px; padding: 18px 14px 15px; }
  .referral-emblem { max-height: 170px; }
  .referral-hero-card p { font-size: 11px; }
  .referral-bonus-grid article { min-height: 146px; padding: 11px 5px; }
  .referral-link-actions { gap: 7px; }
  .referral-metrics > span { padding: 4px; }
}
@media (max-width: 340px) {
  .referral-summary-card { grid-template-columns: 54px minmax(0, 1fr); }
  .referral-summary-card img { width: 54px; height: 54px; }
  .referral-summary-copy > strong { font-size: 15px; }
  .referral-summary-metrics { gap: 5px 8px; padding-right: 58px; }
  .referral-summary-metrics b { font-size: 12px; }
  .referral-summary-link { font-size: 11px; }
  .referral-hero-card { grid-template-columns: 90px minmax(0, 1fr); }
  .referral-hero-card h2 { font-size: 32px; }
  .referral-link-actions .button { font-size: 11px; }
  .referral-bonus-grid strong { font-size: 14px; }
  .referral-bonus-grid article > span:not(.referral-bonus-icon) { font-size: 10px; }
  .referral-condition-columns { grid-template-columns: 1fr; }
}

.gift-card {
  border-color: rgba(199, 160, 90, .30);
  background:
    radial-gradient(circle at 8% 4%, rgba(94, 18, 26, .20), transparent 42%),
    linear-gradient(145deg, rgba(54, 10, 17, .34), rgba(13, 14, 17, .98) 68%),
    url("/assets/textures/carbon-burgundy-subtle.webp");
  background-blend-mode: normal, normal, soft-light;
  background-size: auto, auto, 384px 384px;
}

.tariff-card {
  min-height: 166px;
  border-color: rgba(199, 160, 90, .16);
  background:
    linear-gradient(rgba(17, 19, 24, .96), rgba(17, 19, 24, .96)),
    url("/assets/textures/carbon-black-subtle.webp");
  background-blend-mode: normal, soft-light;
  background-size: auto, 384px 384px;
}

.tariff-list { gap: 10px; }
.tariff-details,
.tariff-actions { display: none !important; }
.tariff-footer { margin-top: auto; }
.details-button { justify-content: flex-start; }
.back-chevron svg { transform: rotate(180deg); }

.tariff-detail { display: grid; gap: 13px; }
.tariff-detail-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.tariff-detail h2,
.checkout-card h2,
.support-form h2,
.promo-card h2,
.content-card h2 { margin: 0; font-size: 18px; line-height: 23px; }
.tariff-detail h3 { margin: 4px 0 0; color: var(--gold-primary); font-size: 14px; }
.tariff-detail p,
.checkout-card p,
.support-form p,
.content-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 19px; }
.detail-price { color: var(--gold-light); font-size: 20px; white-space: nowrap; }
.detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.detail-metrics span {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}
.detail-metrics small,
.detail-metrics strong { display: block; }
.detail-metrics small { color: var(--text-caption); font-size: 10px; text-transform: uppercase; }
.detail-metrics strong { margin-top: 3px; font-size: 12px; }
.vpn-set-list { display: grid; gap: 1px; }
.vpn-set.detail {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vpn-set.detail div:last-child { text-align: right; }
.vpn-set.detail strong,
.vpn-set.detail small { display: block; }
.vpn-set.detail strong { font-size: 13px; }
.vpn-set.detail small { margin-top: 2px; color: var(--text-caption); font-size: 11px; }

.checkout-card,
.support-form,
.promo-card,
.documents-card,
.content-card { display: grid; gap: 12px; }
.eyebrow { color: var(--gold-primary); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.option-selector { display: flex; gap: 7px; }
.option {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(199,160,90,.25);
  border-radius: 11px;
  background: var(--surface-secondary);
  color: var(--text-secondary);
}
.option.active { border-color: rgba(199,160,90,.58); color: var(--gold-light); }
.order-preview {
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background: rgba(0,0,0,.12);
}
.preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.preview-row + .preview-row { border-top: 1px solid rgba(255,255,255,.05); }
.preview-row strong { color: var(--text-primary); text-align: right; }
.preview-row.total { color: var(--text-primary); font-weight: 700; }
.preview-row.total strong { color: var(--gold-light); }
.preview-row.success strong,
.success-note { color: #94b188; }
.field-label { color: var(--text-secondary); font-size: 12px; }
input,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid rgba(199,160,90,.20);
  border-radius: 11px;
  outline: 0;
  background: #0d0f12;
  color: var(--text-primary);
  font: inherit;
}
input:focus,
textarea:focus { border-color: rgba(199,160,90,.62); }
.inline-field { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.inline-field .button { width: auto; }
.section-caption { color: var(--text-caption) !important; font-size: 11px !important; line-height: 16px !important; }
.platform-tabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.platform-tabs .tab { flex: 0 0 auto; padding-inline: 12px; }

.gift-tariff-option {
  display: grid;
  width: 100%;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  color: inherit;
  text-align: left;
}
.gift-tariff-option span:nth-child(2) strong,
.gift-tariff-option span:nth-child(2) small { display: block; }
.gift-tariff-option small { margin-top: 2px; color: var(--text-caption); }
.gift-activation { display: grid; gap: 14px; }
.ticket-list,
.ticket-messages { display: grid; gap: 9px; }
.ticket-card small { color: var(--text-caption); }
.ticket-messages { margin-top: 10px; }
.ticket-messages p { max-width: 88%; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-secondary); font-size: 12px; line-height: 17px; }
.ticket-messages p.user { justify-self: end; border: 1px solid rgba(199,160,90,.16); }
.content-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(199,160,90,.25);
  border-radius: 12px;
  color: var(--gold-primary);
}
.content-icon svg { width: 24px; height: 24px; }
.notice-card.success { border-color: rgba(127,162,111,.30); color: #9ab78f; }

.documents-card .list-button { min-height: 58px; }
.documents-card .list-icon,
.documents-card .list-icon svg {
  max-width: 40px;
  max-height: 40px;
}

.nav-tariff-disc,
.nav-tariffs.active .nav-tariff-disc {
  background: var(--surface-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
}

@media (max-width: 359px) {
  .tariff-detail-head { grid-template-columns: 38px minmax(0,1fr); }
  .detail-price { grid-column: 2; }
  .inline-field { grid-template-columns: 1fr; }
  .inline-field .button { width: 100%; }
}
@media (max-width: 389px) {
  .brand-title { font-size: 21px; }
  .topbar { gap: 10px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .topbar-divider { height: 32px; }
  .nav-item { font-size: 10px; }
  .tariff-summary { gap: 6px; }
  .tariff-summary span { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Pre-Stage Fix Pass — seamless carbon, compact referral rhythm and operation history. */
:root { --carbon-seamless-size: 320px; }

.support-form,
.ticket-card,
.notification-card,
.faq-item,
.more-group .list-button,
.referral-summary-card,
.referral-hero-card,
.referral-link-card,
.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link,
.referral-bonus-grid > article,
.operation-card {
  background-color: #101214 !important;
  background-image:
    radial-gradient(ellipse at 15% -12%, rgba(239,207,143,.11), transparent 42%),
    linear-gradient(145deg, rgba(7,9,11,.10), rgba(0,1,2,.25)),
    url("/assets/textures/carbon-seamless-v1.webp") !important;
  background-size: auto, auto, var(--carbon-seamless-size) var(--carbon-seamless-size) !important;
  background-position: center, center, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  border-color: rgba(201,162,82,.42) !important;
}

.referral-hero-card,
.referral-summary-card {
  background-image:
    radial-gradient(ellipse at 14% -10%, rgba(236,199,123,.13), transparent 44%),
    linear-gradient(145deg, rgba(11,13,14,.35), rgba(2,3,4,.62)),
    url("/assets/textures/carbon-seamless-v1.webp") !important;
}
.referral-link-card {
  background-image:
    radial-gradient(ellipse at 12% -12%, rgba(213,158,88,.12), transparent 43%),
    linear-gradient(145deg, rgba(31,8,12,.25), rgba(3,4,5,.66)),
    url("/assets/textures/carbon-seamless-v1.webp") !important;
}

.referral-summary-card {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  min-height: 96px !important;
  padding: 9px 12px !important;
}
.referral-summary-card img { width: 58px !important; height: 58px !important; }
.referral-summary-copy { grid-template-columns: minmax(0, 1fr) auto !important; }
.referral-summary-metrics {
  grid-column: 1 / -1 !important;
  grid-template-columns: max-content max-content !important;
  justify-content: start !important;
  gap: 0 !important;
  width: fit-content;
}
.referral-summary-metrics > span { min-width: 76px !important; padding: 0 10px 0 0 !important; }
.referral-summary-metrics > span + span { margin-left: 8px; padding-left: 12px !important; }
.referral-summary-link {
  grid-column: 2 !important;
  align-self: end !important;
  margin: 0 0 1px !important;
  transform: none !important;
}

.referral-promo {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.referral-history-row { grid-template-columns: 40px minmax(0, 1fr) !important; }
.referral-history-row > div { width: 100%; }
.referral-history-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.referral-history-meta time { min-width: 0; }
.referral-history-meta b,
.referral-history-row b { max-width: none !important; overflow: visible !important; text-overflow: clip !important; flex: 0 0 auto; }

.referral-condition-overview { align-items: start; }
.referral-overview-copy h2 { margin: 0 0 8px; font-size: clamp(18px, 5vw, 23px); line-height: 1.15; }
.referral-current-level { font-size: 14px; }
.referral-levels { grid-template-columns: 1fr !important; }
.referral-level-row { display: grid; gap: 8px; padding: 12px !important; text-align: left; }
.referral-level-row header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.referral-level-row header strong { font-size: 15px; text-align: left; white-space: nowrap; }
.referral-level-row header small { font-size: 11px; text-align: right; }
.referral-level-benefits { display: flex; flex-wrap: wrap; gap: 6px; }
.referral-level-benefits span {
  padding: 5px 8px;
  border: 1px solid rgba(211,171,84,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: #dec17d;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.referral-level-row p { margin: 0; color: var(--text-caption); font-size: 12px; line-height: 1.35; }
.referral-bonus-events .referral-order-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.referral-bonus-events .referral-order-list li { display: grid; justify-items: center; gap: 5px; padding: 9px 4px; text-align: center; font-size: 12px; line-height: 1.25; }

.notification-toolbar { margin-bottom: 14px; }
.notification-list { display: grid; gap: 14px; }

.operations-lead { margin: 0 0 14px; color: var(--text-secondary); }
.operation-list { display: grid; gap: 11px; }
.operation-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(201,162,82,.42);
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 12px 26px rgba(0,0,0,.28);
}
.operation-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(211,171,84,.35); border-radius: 13px; color: var(--gold-light); background: rgba(0,0,0,.24); }
.operation-icon svg { width: 21px; height: 21px; }
.operation-copy { display: grid; gap: 3px; min-width: 0; }
.operation-copy header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.operation-copy p, .operation-copy small { margin: 0; color: var(--text-caption); }
.operation-status { padding: 3px 6px; border-radius: 999px; background: rgba(88,151,92,.13); color: #a9d39e; font-size: 9px; }
.operation-card > b { color: #ead09a; white-space: nowrap; }

@media (max-width: 360px) {
  :root { --carbon-seamless-size: 286px; }
  .referral-summary-card { grid-template-columns: 50px minmax(0, 1fr) !important; min-height: 92px !important; }
  .referral-summary-card img { width: 50px !important; height: 50px !important; }
  .referral-summary-metrics > span { min-width: 65px !important; }
  .referral-summary-link { font-size: 10px !important; }
  .referral-bonus-events .referral-order-list { grid-template-columns: 1fr; }
  .referral-bonus-events .referral-order-list li { grid-template-columns: 18px minmax(0,1fr); justify-items: start; text-align: left; }
  .referral-level-row header { display: grid; gap: 3px; }
  .referral-level-row header strong,
  .referral-level-row header small { max-width: 100%; text-align: left; }
  .operation-card { grid-template-columns: 38px minmax(0,1fr); }
  .operation-card > b { grid-column: 2; justify-self: start; }
}

@media (max-width: 399px) {
  .referral-level-row header { display: grid; gap: 3px; }
  .referral-level-row header strong,
  .referral-level-row header small { max-width: 100%; text-align: left; }
}

/* Stage 36.3 compact mobile density */
:root { --gutter: 12px; }
@media (min-width: 360px) { :root { --gutter: 14px; } }
@media (min-width: 390px) { :root { --gutter: 16px; } }
@media (min-width: 430px) { :root { --gutter: 18px; } }

.app-shell { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
.topbar {
  gap: 10px;
  min-height: calc(46px + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 6px;
}
.brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
.brand-mark.shield-mark { width: 32px; height: 38px; flex-basis: 32px; }
.topbar-divider { height: 30px; }
.identity { gap: 8px; }
.identity strong { font-size: 15px; line-height: 19px; }
.identity span { margin-top: 1px; font-size: 12px; line-height: 16px; }
.avatar { width: 34px; height: 34px; flex-basis: 34px; }
.view { padding: 8px var(--gutter) 18px; }
.page-head { margin: 6px 0 16px; }
.page-head h1 { font-size: 24px; line-height: 30px; }
.page-head p { margin-top: 3px; font-size: 13px; line-height: 18px; }
@media (min-width: 390px) {
  .page-head h1 { font-size: 26px; line-height: 32px; }
}

.card { padding: 13px; border-radius: 14px; }
.card + .card, .section + .section { margin-top: 11px; }
.access-card { padding: 16px; border-radius: 18px; }
.brand-lockup { gap: 10px; }
.brand-lockup .brand-mark { width: 40px; height: 44px; flex-basis: 40px; }
.brand-title { font-size: 20px; line-height: 25px; }
.tariff-title { font-size: 18px; line-height: 22px; }
.status-row { gap: 9px; }
.status-pill { min-height: 25px; padding: 4px 9px; font-size: 11px; line-height: 15px; }
.description { margin-top: 12px; font-size: 13px; line-height: 18px; }
.term { margin-top: 12px; font-size: 14px; line-height: 20px; }
.term strong { font-size: 17px; line-height: 22px; }
.date-caption { font-size: 13px; line-height: 18px; }
.progress-line { gap: 9px; margin-top: 9px; }
.progress-track { height: 7px; }
.actions { gap: 8px; margin-top: 12px; }
.button { min-height: 44px; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 18px; }
.button svg { width: 19px; height: 19px; }
.button.compact { min-height: 44px; font-size: 13px; }
.link-card { gap: 9px; }
.card-label, .protected-link, .link-preview { font-size: 13px; line-height: 18px; }
.icon-button { width: 44px; height: 44px; border-radius: 12px; }
.stats-grid { gap: 10px; margin-top: 11px; }
.stat-card { padding: 12px; border-radius: 14px; }
.stat-head { gap: 7px; font-size: 13px; line-height: 18px; }
.stat-value { margin-top: 5px; font-size: 24px; line-height: 29px; }
.stat-note { font-size: 12px; line-height: 16px; }
.section-title { margin: 16px 0 9px; font-size: 14px; line-height: 18px; }
.traffic-list { gap: 8px; }
.traffic-card { padding: 12px; border-radius: 14px; }
.traffic-card strong, .traffic-value { font-size: 13px; line-height: 18px; }
.traffic-card small { margin-top: 5px; font-size: 12px; line-height: 16px; }
.traffic-card .progress-track { height: 5px; margin-top: 8px; }
.feature-list { gap: 6px; margin-top: 10px; }
.chip { min-height: 30px; padding: 6px 9px; font-size: 12px; line-height: 16px; }

.gift-toolbar { gap: 9px; margin-bottom: 11px; }
.gift-list, .tariff-list, .list { gap: 10px; }
.tariff-card { gap: 9px; padding: 13px; border-radius: 14px; }
.tariff-top { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
.tariff-icon { width: 40px; height: 40px; border-radius: 11px; }
.tariff-icon svg { width: 21px; height: 21px; }
.tariff-name { font-size: 18px; line-height: 22px; }
.tariff-short { margin-top: 1px; font-size: 12px; line-height: 16px; }
.tariff-price { font-size: 22px; line-height: 27px; }
.tariff-price small { font-size: 12px; line-height: 16px; }
.tariff-summary { gap: 5px 13px; min-height: 0; }
.tariff-summary span { gap: 4px; padding: 0; border-radius: 0; }
.tariff-summary small { font-size: 9px; line-height: 12px; }
.tariff-summary strong { font-size: 12px; line-height: 16px; }
.availability { gap: 6px; font-size: 12px; line-height: 16px; }
.tariff-details { font-size: 13px; line-height: 18px; }
.vpn-set { padding: 8px 0; }
.details-button { min-height: 44px; padding: 4px 0; font-size: 13px; }
.tariff-actions { display: none; grid-template-columns: 1fr 1fr; gap: 7px; }
.tariff-actions.single { grid-template-columns: 1fr; }
.tariff-card.expanded .tariff-actions { display: grid; }
.tariff-actions .button { min-height: 44px; font-size: 13px; }

.tab { min-height: 44px; }
.promo-entry { margin-top: 10px; }

.topic-list, .more-group { gap: 6px; }
.topic-button, .list-button { min-height: 54px; gap: 10px; padding: 8px 10px; border-radius: 13px; }
.topic-icon, .list-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.topic-icon svg, .list-icon svg { width: 19px; height: 19px; }
.topic-copy strong, .list-copy strong { font-size: 14px; line-height: 18px; }
.topic-copy small, .list-copy small { margin-top: 1px; font-size: 12px; line-height: 16px; }
.more-shell { gap: 16px; }
.more-section h2 { margin-bottom: 7px; font-size: 14px; line-height: 18px; }
.more-group { padding: 5px; border-radius: 14px; }
.more-group .list-button { border-radius: 10px; }
.version { font-size: 12px; line-height: 16px; }

.bottom-nav {
  min-height: calc(66px + env(safe-area-inset-bottom));
  padding: 5px 5px var(--safe-bottom);
}
.nav-item { min-height: 50px; gap: 2px; font-size: 10px; line-height: 14px; }
.nav-icon { width: 21px; height: 21px; }
.nav-tariffs { transform: translateY(-3px); }
.nav-tariff-disc { width: 48px; height: 48px; }
.nav-tariff-disc .nav-icon { width: 23px; height: 23px; }
.toast { bottom: calc(76px + env(safe-area-inset-bottom)); }

@media (max-width: 359px) {
  .page-head h1 { font-size: 24px; line-height: 30px; }
  .tariff-top { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .tariff-price { grid-column: auto; text-align: right; }
  .tariff-actions { grid-template-columns: 1fr; }
}

/* Stage 36.7.1: compact notification controls and premium product surfaces. */
.page-intro { margin: -10px 0 14px; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.preference-actions { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.preference-actions::-webkit-scrollbar { display: none; }
.preference-actions button {
  min-height: 40px; flex: 0 0 auto; padding: 8px 11px; color: var(--gold-text);
  border: 1px solid rgba(199,160,90,.22); border-radius: 12px;
  background: rgba(18,20,24,.88); font-size: 12px;
}
.preference-list { display: grid; gap: 10px; }
.preference-card {
  padding: 14px; border-color: rgba(199,160,90,.16); border-radius: 15px;
  background: linear-gradient(145deg, rgba(22,24,29,.98), rgba(15,16,20,.99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.preference-card.security { border-left-color: rgba(116,24,32,.72); }
.preference-card header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 9px;
}
.preference-card header strong, .preference-card header small { display: block; }
.preference-card header strong { font-size: 15px; line-height: 20px; }
.preference-card header small {
  display: -webkit-box; max-width: 250px; margin-top: 2px; overflow: hidden;
  color: var(--text-caption); font-size: 12px; line-height: 17px;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.mandatory-badge {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(116,24,32,.44);
  border-radius: 999px; color: #cf9b91; font-size: 10px; line-height: 14px;
}
.preference-channels { border-top: 1px solid rgba(255,255,255,.055); }
.preference-channel {
  display: flex; width: 100%; min-height: 46px; align-items: center;
  justify-content: space-between; padding: 0; color: var(--text-secondary);
  border: 0; background: transparent; text-align: left;
}
.preference-channel + .preference-channel { border-top: 1px solid rgba(255,255,255,.045); }
.custom-switch {
  position: relative; display: inline-flex; width: 44px; height: 25px;
  flex: 0 0 44px; align-items: center; padding: 2px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: #24272d; transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.custom-switch i {
  width: 19px; height: 19px; border-radius: 50%; background: #8c8e91;
  transition: transform 140ms var(--ease), background 140ms var(--ease);
}
.custom-switch.on { border-color: rgba(211,176,103,.55); background: #9f7e43; }
.custom-switch.on i { background: #f0e4cf; transform: translateX(19px); }
.custom-switch.mandatory { border-color: rgba(211,176,103,.38); }

.tariff-card {
  padding: 15px; border-color: rgba(199,160,90,.28);
  background:
    radial-gradient(circle at 0 0, rgba(199,160,90,.055), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.008) 0 2px, transparent 2px 6px),
    linear-gradient(145deg, rgba(22,23,28,.985), rgba(14,15,18,.995));
  box-shadow: 0 13px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.tariff-card.state-available {
  border-color: rgba(211,176,103,.52);
  background:
    radial-gradient(circle at 0 0, rgba(126,20,31,.16), transparent 38%),
    linear-gradient(rgba(12,13,16,.94), rgba(8,9,11,.985)),
    url("/assets/textures/carbon-black-subtle.webp");
  background-blend-mode: normal, normal, soft-light;
  background-size: auto, auto, 384px 384px;
  box-shadow: inset 2px 0 0 rgba(126,20,31,.45), 0 13px 28px rgba(0,0,0,.32);
}
.tariff-card.state-current-tariff {
  border-color: rgba(211,176,103,.62);
  background:
    radial-gradient(circle at 8% 4%, rgba(126,20,31,.24), transparent 44%),
    linear-gradient(145deg, rgba(30,15,18,.94), rgba(9,10,12,.99)),
    url("/assets/textures/carbon-black-subtle.webp");
  background-blend-mode: normal, normal, soft-light;
  background-size: auto, auto, 384px 384px;
}
.tariff-card.state-paused,
.tariff-card.state-sold-out,
.tariff-card.state-unavailable,
.tariff-card.sale-paused,
.tariff-card.sale-sold-out,
.tariff-card.sale-unavailable {
  border-color: rgba(150,150,150,.16);
  background: linear-gradient(145deg, rgba(24,25,29,.96), rgba(15,16,19,.99));
  filter: saturate(.42);
  opacity: .78;
}
.tariff-card.sale-available {
  border-color: rgba(211,176,103,.52);
  background:
    radial-gradient(circle at 0 0, rgba(126,20,31,.16), transparent 38%),
    linear-gradient(rgba(12,13,16,.94), rgba(8,9,11,.985)),
    url("/assets/textures/carbon-black-subtle.webp");
  background-blend-mode: normal, normal, soft-light;
  background-size: auto, auto, 384px 384px;
  filter: none;
  opacity: 1;
}
.tariff-card.sale-paused .availability,
.tariff-card.sale-sold-out .availability {
  color: #e1988d;
  font-weight: 800;
}
.tariff-cta {
  width: auto;
  min-width: 112px;
  border-color: rgba(228,195,125,.58);
  background: linear-gradient(145deg, #d5b36c, #9c7334);
  color: #111216;
}
.tariff-icon {
  width: 42px; height: 42px; border-color: rgba(199,160,90,.38);
  border-radius: 12px; background: linear-gradient(145deg, rgba(26,27,31,.96), rgba(12,13,16,.96));
}
.tariff-icon svg { width: 23px; height: 23px; }
.tariff-summary-line {
  padding: 9px 0; color: var(--text-secondary); font-size: 13px; line-height: 19px;
  border-top: 1px solid rgba(255,255,255,.055); border-bottom: 1px solid rgba(255,255,255,.045);
}
.promo-entry {
  min-height: 46px; margin-top: 14px; border-color: rgba(199,160,90,.32);
  background: linear-gradient(145deg, rgba(22,23,27,.95), rgba(14,15,18,.98));
}
.brand-title {
  color: #e5d8c1; font-size: 21px; line-height: 26px; font-weight: 700;
  letter-spacing: .045em;
}
.tariff-title { margin-top: 3px; color: #c7a05a; font-size: 18px; line-height: 23px; font-weight: 600; }
.brand-lockup .brand-mark { width: 48px; height: 52px; object-fit: contain; }

.attachment-picker {
  display: flex; min-height: 44px; align-items: center; justify-content: center;
  gap: 8px; color: var(--gold-text); border: 1px dashed rgba(199,160,90,.34);
  border-radius: 13px; cursor: pointer;
}
.attachment-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attachment-picker svg { width: 18px; height: 18px; }
.attachment-preview, .support-attachments {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
}
.attachment-draft {
  position: relative; min-width: 0; padding: 9px 28px 9px 9px;
  border: 1px solid rgba(199,160,90,.2); border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.attachment-draft span, .attachment-draft small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-draft small { margin-top: 2px; color: var(--text-caption); }
.attachment-draft button {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  color: var(--text-secondary); border: 0; background: transparent;
}
.support-thumbnail {
  min-width: 0; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  border: 1px solid rgba(199,160,90,.24); border-radius: 12px; background: #0b0c0f;
}
.support-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.attachment-viewer {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: rgba(3,4,5,.96);
}
.attachment-viewer img { max-width: 100%; max-height: 88dvh; object-fit: contain; }
.attachment-viewer button {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 44px; height: 44px; color: var(--text-primary);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  background: rgba(15,16,19,.88); font-size: 26px;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch, .custom-switch i { transition: none; }
}
@media (max-width: 340px) {
  .preference-card { padding: 12px; }
  .mandatory-badge { font-size: 9px; }
  .tariff-summary-line { font-size: 12px; }
}

/* Stage 36.8.5 premium texture system. Sale state remains backend-owned. */
.card,
.instruction-card,
.faq-item,
.connection-app {
  background-color: #111216;
  background-image: linear-gradient(rgba(12,13,16,.90), rgba(10,11,14,.96)), url("/assets/textures/carbon-neutral.webp");
  background-size: auto, 384px 384px;
}
.access-card,
.tariff-card[data-sale-state="CURRENT_TARIFF"] {
  background-image: radial-gradient(circle at 12% 0, rgba(126,20,31,.22), transparent 42%), linear-gradient(rgba(10,11,14,.84), rgba(7,8,10,.96)), url("/assets/textures/carbon-active.webp");
  background-size: auto, auto, 384px 384px;
}
.tariff-card[data-sale-state="AVAILABLE"] {
  border-color: rgba(211,176,103,.64);
  background-image: radial-gradient(circle at 0 0, rgba(126,20,31,.20), transparent 40%), linear-gradient(rgba(9,10,12,.82), rgba(7,8,10,.95)), url("/assets/textures/carbon-active.webp");
  background-size: auto, auto, 384px 384px;
  box-shadow: inset 2px 0 0 rgba(126,20,31,.56), 0 14px 30px rgba(0,0,0,.34);
  filter: none;
  opacity: 1;
}
.tariff-card[data-sale-state="PAUSED"],
.tariff-card[data-sale-state="SOLD_OUT"],
.tariff-card[data-sale-state="UNAVAILABLE"] {
  border-color: rgba(150,150,150,.18);
  background-image: linear-gradient(rgba(18,19,22,.90), rgba(12,13,16,.97)), url("/assets/textures/carbon-muted.webp");
  background-size: auto, 384px 384px;
  filter: saturate(.30);
  opacity: .80;
}
.tariff-card[data-sale-state="PAUSED"] .availability,
.tariff-card[data-sale-state="SOLD_OUT"] .availability {
  color: #efaaa0;
  font-weight: 900;
}
.button.primary,
.tariff-card[data-sale-state="AVAILABLE"] .tariff-cta {
  background-image: linear-gradient(100deg, rgba(222,190,119,.22), rgba(119,79,29,.22)), url("/assets/textures/gold-brushed.webp");
  background-size: auto, 384px 384px;
  color: #111216;
}
.progress-bar {
  background-image: linear-gradient(90deg, rgba(110,8,22,.22), rgba(198,47,58,.14)), url("/assets/textures/ruby-progress.webp");
  background-size: auto, 384px 384px;
}
.page-head {
  position: relative;
  padding: 5px 0 2px;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: -22px -16px -12px;
  z-index: -1;
  background: url("/assets/textures/ambient-burgundy.webp") center / cover no-repeat;
  opacity: .24;
  pointer-events: none;
}
.protected-value-copy { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.connection-app { margin: 12px 0; padding: 12px; border: 1px solid rgba(199,160,90,.20); border-radius: 13px; }
.connection-app h3 { margin: 0 0 9px; }
@media (prefers-reduced-motion: reduce) {
  .progress-bar, .tariff-card, .button { transition: none !important; }
}

/* Stage 36.8.6 — premium carbon surfaces and truthful presentation. */
html, body, .app-shell, .view {
  background: #060708;
}
.page-head::before { display: none; }
.page-head, .sub-head { background: transparent; }

.card,
.instruction-card,
.faq-item,
.connection-app,
.stat-card,
.traffic-card,
.topic-button,
.list-button,
.notification-card,
.support-form {
  border-color: rgba(189, 151, 83, .28);
  background-color: #0d0f11;
  background-image:
    linear-gradient(145deg, rgba(18, 20, 23, .30), rgba(4, 5, 7, .46)),
    url("/assets/textures/carbon-neutral.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.30);
}

.access-card,
.active-premium,
.gift-card.active-premium,
.tariff-card[data-sale-state="AVAILABLE"],
.tariff-card[data-sale-state="CURRENT_TARIFF"],
.tariff-detail[data-sale-state="AVAILABLE"] {
  border-color: rgba(225, 185, 102, .78);
  background-color: #100608;
  background-image:
    radial-gradient(circle at 18% 5%, rgba(156, 25, 38, .22), transparent 42%),
    linear-gradient(145deg, rgba(36, 3, 8, .20), rgba(4, 3, 4, .43)),
    url("/assets/textures/carbon-active.webp");
  background-size: auto, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow: inset 0 0 28px rgba(112, 8, 19, .20), inset 0 1px 0 rgba(255,231,174,.16), 0 16px 34px rgba(0,0,0,.38);
  filter: none;
  opacity: 1;
}

.tariff-card[data-sale-state="PAUSED"],
.tariff-card[data-sale-state="SOLD_OUT"],
.tariff-card[data-sale-state="UNAVAILABLE"],
.muted-premium {
  border-color: rgba(132, 137, 145, .26);
  background-color: #0c0e11;
  background-image:
    linear-gradient(145deg, rgba(22, 24, 28, .30), rgba(5, 6, 8, .46)),
    url("/assets/textures/carbon-muted.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 26px rgba(0,0,0,.28);
  filter: none;
  opacity: 1;
}
.tariff-card[data-sale-state="PAUSED"] .tariff-price,
.tariff-card[data-sale-state="SOLD_OUT"] .tariff-price,
.tariff-card[data-sale-state="UNAVAILABLE"] .tariff-price,
.tariff-card[data-sale-state="PAUSED"] .tariff-icon,
.tariff-card[data-sale-state="SOLD_OUT"] .tariff-icon,
.tariff-card[data-sale-state="UNAVAILABLE"] .tariff-icon { color: #aaa59b; }

.button.primary,
.tariff-card[data-sale-state="AVAILABLE"] .tariff-cta {
  border-color: rgba(246, 213, 142, .72);
  background-color: #c69a4e;
  background-image:
    linear-gradient(100deg, rgba(255,236,185,.20), rgba(106,67,21,.14)),
    url("/assets/textures/gold-brushed.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,245,214,.46), inset 0 -1px 0 rgba(76,44,10,.40), 0 9px 22px rgba(0,0,0,.28);
}
.button:not(.primary):not(.danger-soft), .connection-choice {
  background-image: linear-gradient(rgba(8,9,11,.34), rgba(5,6,8,.48)), url("/assets/textures/carbon-neutral.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.button.danger-soft {
  background-image: linear-gradient(rgba(21,7,9,.34), rgba(6,6,8,.52)), url("/assets/textures/carbon-neutral.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.button[disabled] {
  background-image: linear-gradient(rgba(17,18,21,.46), rgba(8,9,11,.58)), url("/assets/textures/carbon-muted.webp");
  background-size: cover, cover;
  opacity: 1;
}

.progress-track {
  min-width: 0;
  overflow: hidden;
  background: #08090b;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.82);
}
.progress-bar {
  min-width: 0;
  max-width: 100%;
  background-color: #8f1020;
  background-image: linear-gradient(180deg, rgba(255,122,128,.20), rgba(58,0,8,.20)), url("/assets/textures/ruby-progress.webp");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,169,173,.22);
  transition: width 260ms var(--ease);
}
.traffic-progress-label { margin-top: 8px; color: var(--gold-text); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.gift-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gift-brand-title { white-space: nowrap; font-size: clamp(18px, 5vw, 23px); letter-spacing: .02em; }
.gift-card .status-row { min-width: 0; align-items: flex-start; gap: 8px; }
.gift-card .status-row .brand-lockup { min-width: 0; flex: 1 1 auto; }
.gift-card .status-pill {
  min-width: 0;
  max-width: 104px;
  min-height: 25px;
  flex: 0 1 104px;
  justify-content: center;
  padding: 4px 7px;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.faq-root > h2 { margin: 22px 0 14px; font-size: 21px; line-height: 27px; }
.faq-category > h2 { margin: 18px 0 8px; color: var(--gold-text); font-size: 14px; line-height: 19px; font-weight: 650; letter-spacing: .02em; }
.faq-summary { font-size: 15px; line-height: 21px; font-weight: 600; }
.faq-answer-inner { font-size: 14px; line-height: 21px; }

.ticket-button time,
.support-message time,
.notification-card time { display: block; margin-top: 8px; color: var(--text-caption); font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; }
.ticket-preview { margin: 8px 0 0; color: var(--text-secondary); text-align: left; }
.support-message { padding: 12px; }
.support-message small, .support-message p, .support-message time { display: block; }
.notification-card { text-align: left; }
.notification-title, .notification-object, .notification-body { display: block; }
.notification-object { margin-top: 7px; color: var(--gold-text); font-size: 13px; }
.notification-body { margin: 8px 0 0; color: var(--text-secondary); }

.wizard-progress { margin: -8px 0 10px; color: var(--gold-text); font-size: 13px; font-weight: 650; }
.app-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.connection-choice { min-height: 44px; border: 1px solid rgba(193,155,86,.26); border-radius: 12px; color: var(--text-secondary); }
.connection-choice.selected { border-color: rgba(226,185,102,.72); color: var(--gold-text); box-shadow: inset 0 0 0 1px rgba(226,185,102,.12); }
.wizard-selection { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 13px; border: 1px solid rgba(193,155,86,.24); border-radius: 12px; }
.wizard-selection span { color: var(--gold-text); }
.import-result { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .progress-bar { transition: none !important; }
}

/* Stage 36.8.6 visual convergence hotfix.
 * Keep the weave at one physical scale on every card. `cover` made the
 * 768px square textures grow on narrow tiles and disappear on large cards.
 */
:root {
  --carbon-tile-size: 384px;
  --premium-border: rgba(213, 174, 94, .48);
  --premium-border-strong: rgba(235, 195, 109, .82);
}

html,
body,
button,
input,
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

body {
  color: #f3f1ec;
  background: #050607 !important;
}

h1, h2, h3,
.brand-title,
.tariff-name,
.tariff-price,
.stat-value,
.traffic-value {
  font-weight: 600;
  letter-spacing: 0;
}

.card,
.instruction-card,
.faq-item,
.connection-app,
.stat-card,
.traffic-card,
.topic-button,
.list-button,
.notification-card,
.support-form,
.neutral-premium {
  border-color: var(--premium-border) !important;
  background-color: #0b0d0f !important;
  background-image:
    linear-gradient(145deg, rgba(15, 17, 19, .38), rgba(3, 4, 5, .62)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size: auto, var(--carbon-tile-size) var(--carbon-tile-size) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat !important;
  background-blend-mode: normal, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -18px 32px rgba(0,0,0,.12),
    0 12px 28px rgba(0,0,0,.32) !important;
  filter: none !important;
  opacity: 1 !important;
}

.access-card,
.active-premium,
.gift-card.active-premium,
.tariff-card[data-sale-state="AVAILABLE"],
.tariff-card[data-sale-state="CURRENT_TARIFF"],
.tariff-detail[data-sale-state="AVAILABLE"],
.checkout-card.active-premium {
  border-color: var(--premium-border-strong) !important;
  background-color: #120507 !important;
  background-image:
    radial-gradient(circle at 15% 4%, rgba(210, 38, 53, .16), transparent 40%),
    linear-gradient(145deg, rgba(48, 2, 9, .06), rgba(3, 3, 4, .26)),
    url("/assets/textures/carbon-active-seamless.webp") !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-blend-mode: normal, normal, normal !important;
  box-shadow:
    inset 0 0 34px rgba(112, 5, 18, .16),
    inset 0 1px 0 rgba(255,231,173,.18),
    0 14px 32px rgba(0,0,0,.40) !important;
  filter: none !important;
  opacity: 1 !important;
}

.access-card::after,
.gift-card::after {
  background: linear-gradient(100deg, transparent 0 36%, rgba(3,4,5,.10) 72%, rgba(3,4,5,.24) 100%) !important;
}

.tariff-card[data-sale-state="PAUSED"],
.tariff-card[data-sale-state="SOLD_OUT"],
.tariff-card[data-sale-state="UNAVAILABLE"],
.muted-premium {
  border-color: rgba(137, 141, 148, .34) !important;
  background-color: #0a0c0f !important;
  background-image:
    linear-gradient(145deg, rgba(18, 20, 23, .34), rgba(4, 5, 7, .58)),
    url("/assets/textures/carbon-muted.webp") !important;
  background-size: auto, var(--carbon-tile-size) var(--carbon-tile-size) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat !important;
  background-blend-mode: normal, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 25px rgba(0,0,0,.30) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Secondary controls are deliberately smoother and darker than their card.
 * This prevents carbon-on-carbon controls from visually disappearing.
 */
.button:not(.primary):not(.danger-soft),
.connection-choice,
.gift-card .button:not(.primary),
.link-manager .button:not(.primary) {
  border-color: rgba(213, 174, 94, .56) !important;
  background-color: #090a0c !important;
  background-image:
    linear-gradient(145deg, rgba(9,10,12,.84), rgba(2,3,4,.94)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size: auto, 512px 512px !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat !important;
  background-blend-mode: normal, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 16px rgba(0,0,0,.34),
    0 6px 14px rgba(0,0,0,.20) !important;
}

.button.primary,
.tariff-card[data-sale-state="AVAILABLE"] .tariff-cta {
  border-color: rgba(255, 224, 157, .88) !important;
  background-color: #c89b4f !important;
  background-image:
    linear-gradient(180deg, rgba(255,242,204,.22), rgba(94,57,16,.13)),
    url("/assets/textures/gold-brushed.webp") !important;
  background-size: auto, 520px 520px !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat !important;
  background-blend-mode: normal, normal !important;
  color: #151008 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,226,.64),
    inset 0 -1px 0 rgba(73,41,8,.46),
    0 8px 18px rgba(0,0,0,.28) !important;
}

.button.danger-soft {
  border-color: rgba(194, 65, 73, .56) !important;
  background-color: #0b080a !important;
  background-image: linear-gradient(145deg, rgba(27,7,10,.82), rgba(4,4,6,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 6px 14px rgba(0,0,0,.20) !important;
}

.button[disabled] {
  border-color: rgba(130, 134, 141, .24) !important;
  background-color: #0b0d10 !important;
  background-image:
    linear-gradient(rgba(12,14,17,.62), rgba(5,6,8,.74)),
    url("/assets/textures/carbon-muted.webp") !important;
  background-size: auto, var(--carbon-tile-size) var(--carbon-tile-size) !important;
  background-repeat: no-repeat, repeat !important;
  background-blend-mode: normal, normal !important;
  opacity: 1 !important;
}

/* The fill is positioned against the track, so 11.93% is exactly 11.93%
 * regardless of inherited span/flex rules. */
.progress-track,
.traffic-card .progress-track {
  position: relative !important;
  isolation: isolate;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(190, 151, 78, .42) !important;
  border-radius: 999px !important;
  background: #07080a !important;
  background-image: none !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.90) !important;
}

.progress-track { height: 9px !important; }
.traffic-card .progress-track { height: 7px !important; margin-top: 8px !important; }
.progress-track::before,
.progress-track::after { display: none !important; }

.progress-track > .progress-bar {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background-color: #a51322 !important;
  background-image:
    linear-gradient(180deg, rgba(255,154,157,.23), rgba(55,0,8,.18)),
    url("/assets/textures/ruby-progress.webp") !important;
  background-size: auto, 180px 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, repeat-x !important;
  box-shadow: inset 0 1px 0 rgba(255,190,191,.26), 1px 0 4px rgba(181,21,37,.38) !important;
  transform: none !important;
  transform-origin: left center !important;
}

.progress-value,
.traffic-progress-label {
  color: #d8b76f;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .progress-track > .progress-bar { transition: none !important; }
}

/* Stage 36.8.6 premium depth refinement.
 * Finer weave, layered light, and a real gradient rim make the surface read
 * as a constructed card rather than a texture placed behind content.
 */
:root {
  --carbon-tile-size: 268px;
  --rim-gold: linear-gradient(135deg, rgba(255,225,157,.82), rgba(116,82,35,.34) 42%, rgba(235,190,99,.70) 72%, rgba(74,55,29,.44));
  --rim-neutral: linear-gradient(135deg, rgba(210,177,111,.48), rgba(66,68,70,.34) 48%, rgba(168,133,70,.42));
  --rim-muted: linear-gradient(135deg, rgba(137,139,143,.40), rgba(51,54,59,.42) 54%, rgba(111,101,82,.30));
}

.card,
.instruction-card,
.faq-item,
.connection-app,
.stat-card,
.traffic-card,
.topic-button,
.list-button,
.notification-card,
.support-form,
.neutral-premium {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
  background-color: #06080a !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.085), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.34), rgba(1,2,3,.55)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  /* The approved bitmap has visible edges: paint one continuous, proportional
   * crop across the entire card, including tall account and checkout states. */
  background-size: auto, auto, cover, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -32px 52px rgba(0,0,0,.18),
    inset 18px 0 40px rgba(255,255,255,.012),
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 18px 36px rgba(0,0,0,.38),
    0 3px 8px rgba(0,0,0,.30) !important;
}

.access-card,
.active-premium,
.gift-card.active-premium,
.tariff-card[data-sale-state="AVAILABLE"],
.tariff-card[data-sale-state="CURRENT_TARIFF"],
.tariff-detail[data-sale-state="AVAILABLE"],
.checkout-card.active-premium {
  border: 1px solid transparent !important;
  background-color: #100305 !important;
  background-image:
    radial-gradient(ellipse at 14% -8%, rgba(196,36,53,.15), transparent 42%),
    linear-gradient(180deg, rgba(5,1,2,.34), rgba(1,1,2,.50)),
    linear-gradient(145deg, rgba(24,0,5,.20), rgba(0,0,0,.42)),
    url("/assets/textures/carbon-active-uniform-v3.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, auto, cover, auto !important;
  background-position: center, center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: normal, normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,196,.20),
    inset 0 0 42px rgba(119,0,18,.18),
    inset 0 -42px 68px rgba(0,0,0,.30),
    inset 18px 0 44px rgba(0,0,0,.16),
    0 18px 38px rgba(0,0,0,.43),
    0 3px 9px rgba(45,0,7,.14) !important;
}

.tariff-card[data-sale-state="PAUSED"],
.tariff-card[data-sale-state="SOLD_OUT"],
.tariff-card[data-sale-state="UNAVAILABLE"],
.muted-premium {
  border: 1px solid transparent !important;
  background-color: #07090c !important;
  background-image:
    radial-gradient(circle at 16% -6%, rgba(255,255,255,.060), transparent 36%),
    linear-gradient(145deg, rgba(9,11,14,.40), rgba(2,3,5,.62)),
    url("/assets/textures/carbon-muted.webp"),
    var(--rim-muted) !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size), auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-blend-mode: normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -26px 46px rgba(0,0,0,.24),
    0 14px 30px rgba(0,0,0,.35) !important;
}

/* Obsidian controls sit above the weave instead of repeating it at the same
 * contrast. The fine grain remains visible only as material detail. */
.button:not(.primary):not(.danger-soft),
.connection-choice,
.gift-card .button:not(.primary),
.link-manager .button:not(.primary) {
  border: 1px solid transparent !important;
  background-color: #050608 !important;
  background-image:
    radial-gradient(circle at 24% -18%, rgba(255,255,255,.055), transparent 40%),
    linear-gradient(145deg, rgba(9,10,12,.90), rgba(1,2,3,.97)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, 540px 540px, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-blend-mode: normal, normal, normal, normal !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -10px 20px rgba(0,0,0,.30),
    0 7px 16px rgba(0,0,0,.25) !important;
}

.button:not(.primary):not(.danger-soft):active,
.connection-choice:active {
  box-shadow: inset 0 2px 10px rgba(0,0,0,.62) !important;
}

/* Connection wizard: one clear hierarchy — dark shell, segmented platform
 * selector, inset application panel, then the gold primary action. */
.wizard-progress {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: -5px 0 12px;
  padding: 5px 11px;
  border: 1px solid rgba(205,164,88,.42);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(25,20,13,.84), rgba(6,7,9,.94));
  color: #ddb96d;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,241,202,.08), 0 7px 16px rgba(0,0,0,.24);
}

.instruction-card {
  padding: 20px !important;
  border-radius: 22px !important;
}

.instruction-card > h2 {
  color: #f5f2eb;
  font-size: 23px;
  line-height: 29px;
  font-weight: 600;
}

.instruction-card > p {
  margin: 10px 0 18px;
  color: #aaa69e;
  font-size: 14px;
  line-height: 21px;
}

.instruction-card .platform-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 16px;
  padding: 6px;
  overflow: visible;
  border: 1px solid rgba(175,143,79,.26);
  border-radius: 15px;
  background: rgba(2,3,4,.70);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.65);
}

.instruction-card .platform-tabs .tab {
  min-height: 43px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #85827c;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
}

.instruction-card .platform-tabs .tab.active {
  border-color: rgba(226,184,98,.52);
  background: linear-gradient(145deg, rgba(91,64,24,.32), rgba(18,15,11,.82));
  color: #e4bd70;
  box-shadow: inset 0 1px 0 rgba(255,238,191,.10), 0 5px 12px rgba(0,0,0,.25);
}

.instruction-card .app-picker {
  margin: 0 0 13px;
}

.instruction-card .connection-choice {
  min-height: 48px;
  color: #aaa69e;
}

.instruction-card .connection-choice.selected {
  border-color: transparent !important;
  color: #e3bd70;
  background-image:
    linear-gradient(145deg, rgba(51,36,16,.78), rgba(4,5,7,.96)),
    var(--rim-gold) !important;
  background-size: auto, auto !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,238,190,.11), 0 7px 16px rgba(0,0,0,.25) !important;
}

.instruction-card .connection-app {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 17px;
  background-color: #050608 !important;
  background-image:
    radial-gradient(circle at 18% -12%, rgba(189,143,66,.090), transparent 40%),
    linear-gradient(145deg, rgba(9,10,12,.54), rgba(1,2,3,.72)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size), auto !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -18px 30px rgba(0,0,0,.24), 0 10px 22px rgba(0,0,0,.28) !important;
}

.instruction-card .connection-app h3 {
  margin: 0 0 13px;
  color: #f0ede7;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.instruction-card .connection-app .actions {
  gap: 9px;
  margin-top: 0;
}

.instruction-card .connection-app .button {
  min-height: 50px;
  padding: 11px 14px;
  border-radius: 13px;
  color: #d6b36d;
  font-size: 14px;
  line-height: 19px;
}

.instruction-card > .button.primary {
  min-height: 56px;
  margin-top: 2px;
  border-radius: 15px;
  font-size: 16px;
}

.wizard-selection {
  border-color: rgba(205,164,88,.34);
  background: rgba(2,3,5,.60);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.58);
}

/* The previous bitmap could expose an almost-black crop on short fills.
 * A deterministic ruby gradient guarantees that every positive percentage
 * remains visible while preserving exact backend-owned geometry. */
.progress-track,
.traffic-card .progress-track {
  border-color: rgba(206,165,86,.48) !important;
  background: linear-gradient(180deg, #030405, #090a0c) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.92), inset 0 0 0 1px rgba(255,255,255,.018) !important;
}

.progress-track { height: 10px !important; }
.traffic-card .progress-track { height: 8px !important; }

.progress-track > .progress-bar {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: none !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background-color: #b21323 !important;
  background-image:
    linear-gradient(180deg, rgba(255,155,160,.30) 0%, rgba(255,155,160,0) 44%, rgba(62,0,8,.24) 100%),
    linear-gradient(90deg, #7e0713 0%, #bd1425 55%, #ee3948 100%) !important;
  background-size: auto, auto !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255,206,207,.30), 1px 0 5px rgba(224,38,54,.54) !important;
}

progress.progress-track {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(206,165,86,.48) !important;
  border-radius: 999px !important;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, #030405, #090a0c) !important;
}
.term-progress { display: grid; gap: 7px; width: 100%; margin-top: 12px; }
.term-progress .progress-value { width: 100%; min-width: 0; text-align: right; }
.term-progress > progress.progress-track { width: 100% !important; }
.progress-line > progress.progress-track { flex: 1 1 auto !important; }
progress.progress-track::-webkit-progress-bar {
  border-radius: inherit;
  background: linear-gradient(180deg, #030405, #090a0c);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.92);
}
progress.progress-track::-webkit-progress-value {
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,155,160,.30) 0%, rgba(255,155,160,0) 44%, rgba(62,0,8,.24) 100%), linear-gradient(90deg, #7e0713 0%, #bd1425 55%, #ee3948 100%);
  box-shadow: inset 0 1px 0 rgba(255,206,207,.30), 1px 0 5px rgba(224,38,54,.54);
}
progress.progress-track::-moz-progress-bar {
  border-radius: inherit;
  background: linear-gradient(90deg, #7e0713 0%, #bd1425 55%, #ee3948 100%);
}

/* Trial legal documents use compact, bounded icon wells instead of inheriting
 * the large generic SVG dimensions used by empty states. */
.document-links .document-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  text-align: left;
}
.document-links .document-link .list-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(204,163,84,.34);
  border-radius: 11px;
  background: rgba(2,3,5,.52);
  color: #d6ae62;
}
.document-links .document-link .list-icon svg {
  width: 19px;
  height: 19px;
}
.document-copy { display: grid; min-width: 0; gap: 2px; }
.document-copy strong {
  color: #ece8df;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.document-copy small {
  color: #8f8b84;
  font-size: 11px;
  line-height: 15px;
}
.document-arrow { display: grid; place-items: center; color: #bf9854; }
.document-arrow svg { width: 18px; height: 18px; }

.traffic-card-unlimited > header { padding-bottom: 9px; }
.unlimited-set-list {
  display: grid;
  border-top: 1px solid rgba(255,255,255,.055);
}
.unlimited-set-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0 0;
}
.unlimited-set-row + .unlimited-set-row {
  margin-top: 9px;
  border-top: 1px solid rgba(255,255,255,.045);
}
.unlimited-set-row small {
  margin: 0;
  text-align: right;
}

.bottom-nav {
  left: calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2) !important;
  bottom: max(6px, env(safe-area-inset-bottom)) !important;
  width: min(464px, calc(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)))) !important;
  min-height: 66px !important;
  padding: 5px 6px !important;
  overflow: hidden;
  border: 1px solid rgba(201,164,93,.18) !important;
  border-radius: 23px !important;
  background-color: rgba(3,4,6,.985) !important;
  background-image: linear-gradient(180deg, rgba(13,15,18,.99), rgba(2,3,5,.995)) !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,238,197,.035) !important;
  backdrop-filter: blur(20px) saturate(.85) !important;
}
.nav-item {
  min-height: 54px !important;
  margin: 0 1px;
  padding: 3px 1px !important;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 10px !important;
  line-height: 13px !important;
  transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease);
}
.nav-item:active { transform: translateY(1px); }
.nav-item.active:not(.nav-tariffs) {
  border-color: rgba(201,164,93,.14);
  background: linear-gradient(180deg, rgba(201,164,93,.075), rgba(83,55,17,.018));
  box-shadow: inset 0 1px 0 rgba(255,236,187,.035);
}
.nav-item.active .nav-icon { filter: drop-shadow(0 2px 5px rgba(201,164,93,.23)); }
.nav-tariffs { transform: none !important; }
.nav-tariff-disc {
  width: 42px !important;
  height: 42px !important;
  border-color: rgba(201,164,93,.38) !important;
  background-color: #08090b !important;
  background-image: linear-gradient(145deg, rgba(22,23,27,.98), rgba(4,5,7,.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,184,.055), 0 4px 12px rgba(0,0,0,.42) !important;
}
.nav-tariffs.active .nav-tariff-disc {
  border-color: rgba(225,188,108,.64) !important;
  background-image: radial-gradient(circle at 50% 25%, rgba(201,164,93,.14), transparent 56%), linear-gradient(145deg, #17120c, #07080a) !important;
  box-shadow: inset 0 1px 0 rgba(255,236,187,.10), 0 4px 14px rgba(165,112,31,.12) !important;
}

@media (min-width: 430px) {
  .instruction-card .platform-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compact informational surfaces use the genuinely seamless subtle weave.
 * The larger neutral source is intentionally retained for tariff cards, where
 * it already renders correctly. This prevents visible tile cuts in short
 * wizard, unavailable and empty-state cards without changing any controls. */
.instruction-card,
.error-state,
.empty-state {
  background-color: #07090b !important;
  background-image:
    radial-gradient(circle at 18% -10%, rgba(255,255,255,.040), transparent 38%),
    linear-gradient(145deg, rgba(8,10,12,.58), rgba(2,3,5,.76)),
    url("/assets/textures/carbon-black-subtle.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center, center, top left, center !important;
  background-repeat: no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
}

/* Stage 36.11.1 — bespoke referral materials generated from the approved
 * premium concept direction. They intentionally do not reuse tariff textures. */
.referral-summary-card,
.referral-hero-card,
.referral-link-card,
.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link,
.referral-bonus-grid > article {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent !important;
  background-color: #070809 !important;
  background-image:
    radial-gradient(ellipse at 14% -10%, rgba(224, 184, 99, .14), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .18)),
    url("/assets/textures/referral-obsidian-carbon-v2.png"),
    var(--rim-gold) !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size), auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 196, .13),
    inset 0 -30px 50px rgba(0, 0, 0, .25),
    inset 0 0 30px rgba(91, 51, 9, .07),
    0 16px 34px rgba(0, 0, 0, .39),
    0 3px 8px rgba(0, 0, 0, .28) !important;
}

.referral-summary-card,
.referral-hero-card {
  background-color: #050607 !important;
  background-image:
    radial-gradient(ellipse at 12% -10%, rgba(220, 174, 82, .16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .15)),
    url("/assets/textures/referral-obsidian-carbon-v2.png"),
    var(--rim-gold) !important;
  background-size: auto, auto, 360px 360px, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

.referral-link-card {
  background-color: #080203 !important;
  background-image:
    radial-gradient(ellipse at 10% -12%, rgba(172, 22, 40, .16), transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .17)),
    url("/assets/textures/referral-ruby-carbon-v2.png"),
    var(--rim-gold) !important;
  background-size: auto, auto, 360px 360px, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

.referral-hero-card::before {
  inset: 0 0 0 54% !important;
  opacity: .78 !important;
  background:
    linear-gradient(132deg, transparent 0 42%, rgba(132, 7, 22, .13) 43% 49%, transparent 50%),
    url("/assets/textures/referral-ruby-carbon-v2.png") center / 360px 360px repeat !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}

.referral-summary-card {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 15px !important;
}

.referral-summary-copy { gap: 4px !important; }

.referral-summary-metrics {
  grid-template-columns: minmax(62px, .78fr) minmax(96px, 1.22fr) auto !important;
  align-items: end;
  gap: 0 !important;
  margin-top: 8px !important;
  padding-right: 0 !important;
}

.referral-summary-metrics > span {
  grid-template-rows: auto auto;
  align-content: end;
  min-height: 41px;
  padding-right: 10px;
}

.referral-summary-metrics em,
.referral-summary-metrics i {
  overflow: hidden;
  color: var(--gold-light);
  font-size: clamp(12px, 3.3vw, 15px);
  font-weight: 700;
  font-style: normal;
  line-height: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-summary-metrics b {
  overflow: visible;
  color: #f7f5f1;
  font-size: clamp(10px, 2.8vw, 13px);
  line-height: 14px;
  letter-spacing: -.015em;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

.referral-summary-metrics > span + span {
  padding-left: 10px;
  border-left: 1px solid rgba(209, 163, 71, .20);
}

.referral-summary-metrics > .referral-summary-link {
  position: static !important;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 41px;
  padding: 0 0 0 9px !important;
}

.referral-bonus-grid > article,
.referral-statistics,
.referral-history {
  min-width: 0;
}

.referral-promos-shell > .referral-disclosure {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* One More-tab row component on every platform and viewport. */
.more-group {
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.more-group .list-button,
.more-group .list-button + .list-button {
  min-height: 62px !important;
  padding: 10px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background-color: #06080a !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.085), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.34), rgba(1,2,3,.55)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.085), inset 0 -20px 34px rgba(0,0,0,.18), 0 9px 20px rgba(0,0,0,.28) !important;
}

@media (max-width: 390px) {
  .referral-summary-card { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 11px !important; }
  .referral-summary-metrics { grid-template-columns: minmax(66px, .8fr) minmax(104px, 1.2fr) !important; }
  .referral-summary-metrics > span { padding-right: 7px; }
  .referral-summary-metrics > span + span { padding-left: 7px; }
  .referral-summary-metrics > .referral-summary-link { grid-column: 1 / -1; min-height: 21px; padding: 3px 0 0 !important; border-left: 0; font-size: 11px; }
  .referral-summary-link svg { width: 15px; height: 15px; }
}

@media (max-width: 340px) {
  .referral-summary-metrics { grid-template-columns: minmax(58px, .74fr) minmax(96px, 1.26fr) !important; }
  .referral-summary-metrics em,
  .referral-summary-metrics i { font-size: 11px; }
  .referral-summary-link { font-size: 10px; }
}

.more-group .list-button:active {
  transform: scale(.985);
  box-shadow: inset 0 3px 12px rgba(0,0,0,.62), 0 4px 11px rgba(0,0,0,.22) !important;
}

/* Almost-clear glass edge: preserve the carbon instead of replacing it with
 * opaque black panels, while keeping a quiet optical separation for copy. */
.access-card .description,
.tariff-detail.active-premium > p,
.tariff-detail.active-premium .detail-metrics,
.tariff-detail.active-premium .vpn-set-list,
.tariff-detail.active-premium > .availability {
  padding: 9px 11px;
  border: 1px solid rgba(255, 244, 222, .055);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(4, 5, 7, .075), rgba(12, 5, 7, .025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 3px 9px rgba(0,0,0,.035);
  -webkit-backdrop-filter: blur(.6px) saturate(.97);
  backdrop-filter: blur(.6px) saturate(.97);
}

/* In the cabinet the tariff copy sits directly on the carbon. Detailed tariff
 * cards keep their subtle glass legibility panels. */
.access-card .description,
.access-card .term {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.access-card .brand-lockup .brand-mark {
  width: 64px;
  height: 72px;
  flex: 0 0 64px;
  object-fit: contain;
}

.access-card .brand-title {
  overflow: hidden;
  color: #f6f4ef;
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Balance is a payment parameter, not a second primary action. */
.balance-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  margin-top: 12px;
  padding: 9px 11px 9px 13px;
  border: 1px solid rgba(212, 172, 88, .30);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(10,12,14,.66), rgba(2,3,5,.80)),
    url("/assets/textures/carbon-neutral.webp");
  background-size: auto, 430px 430px;
  box-shadow: inset 0 1px rgba(255,245,214,.045), 0 7px 18px rgba(0,0,0,.20);
  transition: border-color 220ms ease, opacity 180ms ease, box-shadow 220ms ease;
}
.balance-option.selected {
  border-color: rgba(226,184,93,.58);
  box-shadow: inset 0 1px rgba(255,245,214,.08), 0 8px 22px rgba(0,0,0,.25), 0 0 18px rgba(196,142,42,.045);
}
.balance-option.loading { opacity: .62; }
.balance-option.unavailable { opacity: .56; }
.balance-option.unavailable .balance-toggle:disabled { cursor: not-allowed; }
.balance-option-copy { display: grid; gap: 2px; min-width: 0; }
.balance-option-copy strong { color: #f1eee8; font-size: 14px; font-weight: 600; }
.balance-option-copy small { color: var(--text-caption); font-size: 11px; }
.balance-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid rgba(211,176,101,.36);
  border-radius: 999px;
  background: rgba(3,4,6,.82);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.62);
  transition: border-color 220ms ease, background 220ms ease;
}
.balance-toggle > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8f9194;
  box-shadow: 0 2px 5px rgba(0,0,0,.48);
  transition: transform 240ms cubic-bezier(.2,.7,.25,1), background 220ms ease;
}
.balance-toggle[aria-checked="true"] {
  border-color: rgba(238,198,108,.72);
  background: linear-gradient(180deg, rgba(105,69,14,.88), rgba(49,31,7,.92));
}
.balance-toggle[aria-checked="true"] > span {
  transform: translateX(18px);
  background: #f0c969;
}
.balance-toggle:disabled { cursor: wait; }

/* Distinct level and link materials; all supporting cards reuse the same
 * quiet neutral carbon as traffic and device cards in the cabinet. */
.referral-summary-card,
.referral-hero-card {
  background-color: #040506 !important;
  background-image:
    linear-gradient(145deg, rgba(2,3,4,.46), rgba(0,0,0,.64)),
    url("/assets/textures/referral-level-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, cover, auto !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

/* REFERRAL SUMMARY + UNREAD STATES MICRO-PASS */
.referral-summary-card {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 78px !important;
  padding: 9px 11px !important;
}
.referral-summary-card img {
  width: 50px !important;
  height: 50px !important;
}
.referral-summary-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  gap: 6px !important;
}
.referral-summary-copy > strong {
  font-size: clamp(14px, 4vw, 17px) !important;
  line-height: 1.05 !important;
}
.referral-summary-metrics {
  display: grid !important;
  grid-template-columns: max-content auto minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0;
  margin: 0 !important;
}
.referral-summary-metrics > b,
.referral-summary-metrics > span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(10.5px, 2.9vw, 12px) !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.referral-summary-metrics > b {
  overflow: hidden !important;
  color: #f4efe6 !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
}
.referral-summary-separator {
  color: rgba(216, 179, 95, .62) !important;
}
.referral-summary-referrals::before { content: none !important; }
.referral-summary-metrics > .referral-summary-link {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: center !important;
  justify-content: flex-end !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #d9b662 !important;
  font-weight: 550 !important;
  transform: none !important;
}

.referral-history-row.unread {
  position: relative;
}
.referral-history-row.unread::after {
  position: absolute;
  top: 9px;
  right: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e0b85e;
  box-shadow: 0 0 8px rgba(224, 184, 94, .62);
  content: "";
}
.referral-history-new {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 2px 0;
  border-radius: 50%;
  background: #dfb65d;
  box-shadow: 0 0 7px rgba(223, 182, 93, .48);
}

.notification-card {
  position: relative;
  transition: border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.notification-card.unread {
  border-color: rgba(215, 174, 86, .58) !important;
  box-shadow:
    inset 2px 0 rgba(218, 177, 91, .78),
    inset 0 1px rgba(255, 242, 211, .05),
    0 12px 28px rgba(0, 0, 0, .28) !important;
}
.notification-card.read {
  border-color: rgba(167, 139, 84, .28) !important;
  opacity: .86;
}
.notification-card.read .notification-title { color: #d8d4cd; }
.notification-unread-marker {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0b85e;
  box-shadow: 0 0 9px rgba(224, 184, 94, .58);
}

@media (max-width: 360px) {
  .referral-summary-card {
    grid-template-columns: 45px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding: 8px 9px !important;
  }
  .referral-summary-card img {
    width: 45px !important;
    height: 45px !important;
  }
  .referral-summary-copy { gap: 5px !important; }
  .referral-summary-metrics { gap: 4px !important; }
  .referral-summary-metrics > b,
  .referral-summary-metrics > span { font-size: 10px !important; }
  .referral-summary-link svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 330px) {
  .referral-summary-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 68px !important;
  }
  .referral-summary-card img {
    width: 42px !important;
    height: 42px !important;
  }
  .referral-summary-copy > strong { font-size: 13px !important; }
  .referral-summary-metrics > b,
  .referral-summary-metrics > span { font-size: 9px !important; }
}
.referral-hero-card::before {
  inset: 0 0 0 56% !important;
  opacity: .24 !important;
  background: linear-gradient(132deg, transparent 0 43%, rgba(117,7,20,.16) 44% 50%, transparent 51%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
  mask-image: linear-gradient(90deg, transparent, #000 42%);
}

.referral-link-card {
  background-color: #050304 !important;
  background-image:
    linear-gradient(145deg, rgba(8,2,3,.48), rgba(0,0,0,.64)),
    url("/assets/textures/referral-link-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, cover, auto !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link,
.referral-bonus-grid > article {
  background-color: #06080a !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.075), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.38), rgba(1,2,3,.61)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size), auto !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

.referral-summary-card {
  align-items: center;
  min-height: 138px;
}
.referral-summary-copy { align-content: center; }
.referral-summary-metrics {
  grid-template-columns: minmax(72px, .85fr) minmax(102px, 1.15fr) !important;
}
.referral-summary-link {
  position: static !important;
  justify-self: end;
  margin-top: 3px;
  padding: 2px 0 !important;
  font-size: 12px;
}
.referral-summary-metrics > span + span { border-left: 1px solid rgba(209,163,71,.20); }

.referral-overview-icon { position: relative; overflow: hidden; }
.referral-user-avatar { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms ease; }
.referral-overview-icon.has-avatar .referral-user-avatar { opacity: 1; }
.referral-avatar-fallback { display: grid; place-items: center; position: absolute; inset: 0; }
.referral-overview-icon.has-avatar .referral-avatar-fallback { display: none; }
.referral-condition-section h2 { min-width: 0; }
.referral-condition-section h2 > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  aspect-ratio: 1;
}
.referral-condition-section h2 > span svg { width: 18px; height: 18px; flex: 0 0 18px; }
.referral-level-row { grid-template-columns: minmax(0, 1fr) minmax(42px, auto); align-items: start; }
.referral-level-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(11px, 3.35vw, 15px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-level-row span { min-width: 42px; text-align: right; white-space: nowrap; }

@media (max-width: 390px) {
  .access-card .brand-lockup .brand-mark { width: 60px; height: 68px; flex-basis: 60px; }
  .referral-summary-card { grid-template-columns: 64px minmax(0, 1fr) !important; min-height: 142px; }
  .referral-summary-metrics { grid-template-columns: minmax(64px,.82fr) minmax(94px,1.18fr) !important; }
  .referral-summary-link { font-size: 11px; }
}

.referral-promos-list {
  height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  opacity: 0;
  transition: height 420ms cubic-bezier(.2,.58,.22,1), opacity 280ms ease;
}
.referral-promos-inner { padding: 0 0 10px; }
.referral-disclosure > svg:last-child { transition: transform 380ms cubic-bezier(.2,.58,.22,1); }
.referral-promos-shell.open .referral-disclosure > svg:last-child { transform: rotate(90deg); }
.referral-level-row { grid-template-columns: minmax(0, 1fr) minmax(42px, auto); align-items: start; }
.referral-level-row strong { min-width: 0; overflow-wrap: anywhere; }
.referral-level-row span { min-width: 42px; text-align: right; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .referral-promos-list,
  .referral-disclosure > svg:last-child { transition: none !important; }
}

.checkout-success {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 20px 22px;
  text-align: center;
}

.checkout-success-mark {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(231, 190, 97, .68);
  border-radius: 50%;
  color: var(--gold-light);
  background: radial-gradient(circle at 35% 28%, rgba(244, 204, 110, .2), rgba(4, 6, 8, .34) 65%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 34px rgba(0,0,0,.42), 0 0 28px rgba(202,148,42,.10);
}

.checkout-success-mark svg { width: 31px; height: 31px; }
.checkout-success h2, .checkout-success p { margin: 0; }
.checkout-success p { max-width: 340px; color: var(--text-muted); line-height: 1.48; }
.checkout-success-summary { width: 100%; margin: 2px 0 0; text-align: left; }
.checkout-success-actions { display: grid; width: 100%; gap: 9px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-summary svg { transition: none !important; }
}

/* Stage 36.11.4 — lift carbon separation at ordinary phone brightness and
 * restore a true gradient rim around referral surfaces. Bonus cards remain
 * deliberately unchanged. */
.referral-summary-card,
.referral-hero-card {
  border: 1px solid transparent !important;
  background-color: #08090a !important;
  background-image:
    radial-gradient(ellipse at 18% -12%, rgba(235,205,142,.115), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.018), rgba(0,0,0,.20)),
    url("/assets/textures/referral-level-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px rgba(255,239,196,.16),
    inset 0 0 0 1px rgba(255,222,151,.035),
    inset 0 -24px 40px rgba(0,0,0,.15),
    0 15px 32px rgba(0,0,0,.38),
    0 2px 7px rgba(0,0,0,.28) !important;
}

.referral-link-card {
  border: 1px solid transparent !important;
  background-color: #090607 !important;
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(205,156,89,.09), transparent 43%),
    linear-gradient(145deg, rgba(255,255,255,.016), rgba(0,0,0,.18)),
    url("/assets/textures/referral-link-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px rgba(255,239,196,.14),
    inset 0 0 0 1px rgba(255,222,151,.03),
    inset 0 -22px 38px rgba(0,0,0,.14),
    0 15px 32px rgba(0,0,0,.36) !important;
}

.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link {
  border: 1px solid transparent !important;
  background-color: #080a0c !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.085), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.28), rgba(1,2,3,.46)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, var(--carbon-tile-size) var(--carbon-tile-size), auto !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-origin: padding-box, padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, padding-box, border-box !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.095),
    inset 0 0 0 1px rgba(255,235,190,.024),
    inset 0 -25px 42px rgba(0,0,0,.16),
    0 14px 30px rgba(0,0,0,.35) !important;
}

.referral-level-progress > div > span b {
  color: var(--gold-light);
  font-weight: 650;
}

.referral-condition-columns {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}
.referral-level-row {
  grid-template-columns: minmax(0, 1fr) minmax(35px, auto);
  column-gap: 6px;
}
.referral-level-row strong {
  overflow: visible;
  font-size: clamp(12px, 3.45vw, 15px);
  text-overflow: clip;
  white-space: nowrap;
}
.referral-level-row span { min-width: 35px; }

@media (max-width: 350px) {
  .referral-condition-columns { grid-template-columns: 1fr; }
}

/* Stage 36.12 — referral typography and quieter premium depth. */
.referral-summary-card,
.referral-hero-card {
  background-color: #020304 !important;
  background-image:
    linear-gradient(145deg, rgba(1,2,3,.56), rgba(0,0,0,.70)),
    url("/assets/textures/referral-level-carbon-v4.webp"),
    var(--rim-gold) !important;
}
.referral-link-card {
  background-color: #030203 !important;
  background-image:
    linear-gradient(145deg, rgba(5,1,2,.57), rgba(0,0,0,.70)),
    url("/assets/textures/referral-link-carbon-v4.webp"),
    var(--rim-gold) !important;
}
.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link {
  background-color: #040506 !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.052), transparent 40%),
    linear-gradient(145deg, rgba(4,6,8,.47), rgba(0,1,2,.68)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
}
.referral-summary-link { margin-top: 7px !important; transform: translateY(2px); }
.referral-metrics small { font-size: 12px; line-height: 1.28; }
.referral-metrics > span { min-height: 66px; gap: 8px; }
.referral-bonus-grid small { font-size: 11.5px; line-height: 1.32; }
.referral-promo small,
.referral-history-row small,
.referral-history-row time,
.referral-level-row small,
.referral-empty { font-size: 12px; line-height: 1.38; }
.referral-steps li,
.referral-order-list,
.referral-note-list { font-size: 14px; line-height: 1.42; }
.referral-condition-section h2 { font-size: 18px; line-height: 1.2; }
.referral-condition-overview { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; }
.referral-overview-copy h2 { margin: 0 0 9px; color: #f3eee5; font-size: 17px; line-height: 1.25; }
.referral-overview-copy p { margin: 5px 0; font-size: 14px; line-height: 1.38; }
.referral-overview-copy .referral-current-level { color: #e9e2d7; font-size: 15px; }
.referral-levels-section { padding: 17px; }
.referral-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.referral-level-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 10px; }
.referral-level-row strong { font-size: clamp(13px, 3.65vw, 16px); }
.referral-level-row span { min-width: 0; text-align: left; }
.referral-level-row small { grid-column: 1; }
.referral-bonus-events .referral-order-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.referral-bonus-events .referral-order-list li { align-items: center; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(210,166,78,.19); border-radius: 11px; background: rgba(2,3,4,.28); }

/* One shared tactile layer for every interactive surface. */
:where(button, a[href], [role="button"], [data-action], [data-view], [data-view-link], .ticket-button, .faq-summary, .notification-item, .tariff-card, .gift-card, .device-card, .vpn-set-card) {
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, border-color, background-color, box-shadow, opacity;
  transition-duration: 105ms, 180ms, 180ms, 180ms, 180ms;
  transition-timing-function: var(--ease);
}
:where(button, a[href], [role="button"], [data-action], [data-view], [data-view-link], .ticket-button, .faq-summary, .notification-item, .tariff-card, .gift-card, .device-card, .vpn-set-card).is-pressed {
  transform: scale(.985) !important;
}
:where(button, a[href], [role="button"], [data-action], [data-view], [data-view-link]).loading,
:where(button, a[href], [role="button"], [data-action], [data-view], [data-view-link]):disabled {
  transform: none !important;
}

@media (max-width: 360px) {
  .referral-levels { grid-template-columns: 1fr; }
  .referral-level-row { grid-template-columns: minmax(0, 1fr); }
  .referral-bonus-events .referral-order-list { grid-template-columns: 1fr; }
  .referral-condition-overview { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
}

.attachment-picker span { display: grid; gap: 1px; }
.attachment-picker small { color: var(--text-caption); font-size: 10px; font-weight: 450; }
.attachment-draft { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; padding: 7px 29px 7px 7px; }
.attachment-draft > img { width: 58px; height: 48px; border-radius: 7px; object-fit: cover; background: #08090b; }
.attachment-draft figcaption { min-width: 0; }
@media (max-width: 340px) {
  .attachment-preview { grid-template-columns: 1fr; }
}

/* Stage 36.12.1 — rebalance referral contrast and lock mobile typography. */
.referral-summary-card,
.referral-hero-card {
  background-color: #0c0e10 !important;
  background-image:
    radial-gradient(ellipse at 17% -10%, rgba(237,205,139,.15), transparent 44%),
    linear-gradient(145deg, rgba(13,17,20,.09), rgba(0,0,0,.24)),
    url("/assets/textures/referral-level-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
}

.referral-link-card {
  background-color: #0d090a !important;
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(205,156,89,.13), transparent 43%),
    linear-gradient(145deg, rgba(19,9,11,.10), rgba(0,0,0,.23)),
    url("/assets/textures/referral-link-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
}

.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link {
  background-color: #0c1013 !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(145deg, rgba(12,16,19,.17), rgba(2,5,7,.31)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
}

/* The cabinet referral card remains dense without squeezing copy. */
.referral-summary-card {
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 116px !important;
  padding: 12px 14px !important;
}
.referral-summary-card img { width: 68px; height: 68px; }
.referral-summary-copy {
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 9px !important;
  row-gap: 3px !important;
}
.referral-summary-copy > strong,
.referral-summary-copy > small { grid-column: 1 / -1; min-width: 0; }
.referral-summary-copy > strong { line-height: 1.16; }
.referral-summary-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referral-summary-metrics {
  grid-column: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-self: end;
  min-width: 0;
  margin-top: 4px !important;
}
.referral-summary-metrics > span {
  min-width: 0;
  min-height: 35px;
  padding-right: 8px;
}
.referral-summary-metrics > span + span { padding-left: 8px; }
.referral-summary-metrics em,
.referral-summary-metrics i {
  overflow: visible;
  font-size: clamp(11px, 3vw, 13px);
  line-height: 1.15;
  text-overflow: clip;
}
.referral-summary-metrics b {
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.18;
  overflow-wrap: normal;
  word-break: normal;
}
.referral-summary-metrics > .referral-summary-link,
.referral-summary-link {
  grid-column: 2;
  align-self: end;
  min-height: 35px;
  margin-top: 4px !important;
  padding: 0 !important;
  transform: translateY(1px);
}

/* Text must wrap inside its own tile, never through a rim or divider. */
.referral-hero-copy,
.referral-level-progress,
.referral-statistics,
.referral-history,
.referral-condition-section { min-width: 0; }
.referral-hero-card h2 {
  max-width: 100%;
  font-size: clamp(28px, 9vw, 49px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.referral-level-progress > div { align-items: flex-end; }
.referral-level-progress > div > span { min-width: 0; line-height: 1.28; }
.referral-level-progress > div > strong { flex: 0 0 auto; }
.referral-link-card h2,
.referral-statistics h2,
.referral-history h2,
.referral-condition-section h2 { min-width: 0; overflow-wrap: anywhere; }
.referral-link-actions .button { min-width: 0; line-height: 1.2; }
.referral-code { max-width: 100%; text-align: center; }

.referral-bonus-grid > article {
  grid-template-rows: 40px minmax(32px, auto) auto minmax(44px, 1fr);
  align-items: start;
  min-height: 178px;
  padding: 12px 6px;
}
.referral-bonus-grid article > span:not(.referral-bonus-icon) {
  align-self: center;
  width: 100%;
  min-width: 0;
  color: #f1ece3;
  font-size: clamp(10.5px, 2.9vw, 13px);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}
.referral-bonus-grid strong {
  align-self: center;
  max-width: 100%;
  font-size: clamp(14px, 4.2vw, 20px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-align: center;
}
.referral-bonus-grid small {
  align-self: end;
  width: 100%;
  min-width: 0;
  font-size: clamp(11px, 2.8vw, 11.5px);
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}

.referral-metrics { align-items: stretch; }
.referral-metrics > span {
  align-content: center;
  justify-items: center;
  min-height: 70px;
  gap: 7px;
  padding: 5px 6px;
}
.referral-metrics small,
.referral-metrics strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
.referral-metrics small { font-size: clamp(11px, 2.7vw, 12px); }
.referral-metrics strong { font-size: clamp(12px, 3.7vw, 18px); }
.referral-history-row > div,
.referral-promo > div { overflow-wrap: anywhere; }
.referral-history-row b { max-width: 31%; overflow: hidden; text-overflow: ellipsis; }

.referral-level-row { min-width: 0; text-align: center; }
.referral-level-row strong,
.referral-level-row span,
.referral-level-row small {
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}
.referral-level-row strong { font-size: 13px; line-height: 1.18; }
.referral-level-row span { font-size: 13px; }
.referral-level-row small { font-size: 11px; line-height: 1.3; }
.referral-order-list li,
.referral-note-list li { min-width: 0; }

@media (max-width: 399px) and (min-width: 361px) {
  .referral-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-level-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .referral-summary-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 116px !important;
    padding: 11px 12px !important;
  }
  .referral-summary-card img { width: 58px; height: 58px; }
  .referral-summary-copy { grid-template-columns: minmax(0, 1fr); }
  .referral-summary-metrics { grid-column: 1; }
  .referral-summary-metrics > .referral-summary-link,
  .referral-summary-link {
    grid-column: 1;
    justify-self: end;
    min-height: 18px;
    margin-top: 1px !important;
    font-size: 11px;
  }
  .referral-bonus-grid { gap: 6px; }
  .referral-bonus-grid > article { min-height: 182px; padding-inline: 5px; }
  .referral-metrics > span { padding-inline: 3px; }
}

@media (max-width: 340px) {
  .referral-summary-card { grid-template-columns: 52px minmax(0, 1fr) !important; }
  .referral-summary-card img { width: 52px; height: 52px; }
  .referral-summary-copy > strong { font-size: 14px; }
  .referral-summary-copy > small { font-size: 12px; }
  .referral-summary-metrics em,
  .referral-summary-metrics i,
  .referral-summary-metrics b { font-size: 10.5px; }
  .referral-bonus-grid > article { min-height: 188px; }
  .referral-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-metrics > span {
    min-height: 60px;
    padding: 7px 5px;
  }
  .referral-metrics > span + span { border-left: 0; }
  .referral-metrics > span:nth-child(even) { border-left: 1px solid rgba(216,174,86,.25); }
  .referral-metrics > span:nth-child(n + 3) { border-top: 1px solid rgba(216,174,86,.18); }
  .referral-metrics small { font-size: 11px; }
  .referral-metrics strong { font-size: 14px; }
}

/* Stage 36.12.2 — lighter referral depth, compact cabinet card and refined motion. */
.referral-summary-card,
.referral-hero-card {
  background-color: #151719 !important;
  background-image:
    radial-gradient(ellipse at 16% -8%, rgba(239,207,142,.20), transparent 45%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    url("/assets/textures/referral-level-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
  border-color: rgba(217,173,82,.58) !important;
}

.referral-link-card {
  background-color: #160f11 !important;
  background-image:
    radial-gradient(ellipse at 15% -8%, rgba(221,172,101,.18), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.014)),
    url("/assets/textures/referral-link-carbon-v4.webp"),
    var(--rim-gold) !important;
  background-size: auto, auto, cover, auto !important;
  border-color: rgba(220,174,81,.59) !important;
}

.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link {
  background-color: #17191b !important;
  background-image:
    radial-gradient(circle at 17% -7%, rgba(255,244,214,.13), transparent 41%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  border-color: rgba(192,157,85,.45) !important;
}

.referral-bonus-grid > article {
  background-color: #17191b !important;
  background-image:
    radial-gradient(circle at 20% -12%, rgba(255,238,197,.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size: auto, auto, 384px 384px !important;
  border-color: rgba(211,170,82,.50) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.27), inset 0 1px rgba(255,245,214,.055) !important;
}

.referral-summary-card {
  grid-template-columns: 62px minmax(0, 1fr) !important;
  gap: 11px !important;
  min-height: 104px !important;
  padding: 10px 13px !important;
}
.referral-summary-card img { width: 62px; height: 62px; }
.referral-summary-copy {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: center;
  column-gap: 8px !important;
  row-gap: 2px !important;
}
.referral-summary-metrics {
  grid-column: 1 !important;
  gap: 4px 9px !important;
  margin-top: 2px !important;
}
.referral-summary-metrics > span { min-height: 31px; padding-right: 6px; }
.referral-summary-metrics > span + span { padding-left: 6px; }
.referral-summary-metrics > .referral-summary-link,
.referral-summary-link {
  grid-column: 2 !important;
  align-self: end;
  justify-self: end;
  min-height: 31px;
  margin-top: 2px !important;
  transform: translateY(1px);
}

.referral-link-value {
  display: block;
  width: 100%;
  min-width: 0;
  appearance: none;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}
.referral-link-value:focus-visible {
  outline: 2px solid rgba(235,191,94,.78);
  outline-offset: 2px;
}
.referral-link-value.copied {
  border-color: rgba(242,202,111,.86);
  background-color: rgba(42,33,18,.94);
  box-shadow: 0 0 0 3px rgba(220,172,75,.10), inset 0 1px rgba(255,255,255,.045);
}

.referral-hero-card,
.referral-link-card,
.referral-bonus-grid > article {
  animation: referral-card-enter 520ms cubic-bezier(.2,.72,.22,1) both;
  transform-origin: 50% 24%;
}
.referral-link-card { animation-delay: 55ms; }
.referral-bonus-grid > article:nth-child(1) { animation-delay: 105ms; }
.referral-bonus-grid > article:nth-child(2) { animation-delay: 155ms; }
.referral-bonus-grid > article:nth-child(3) { animation-delay: 205ms; }
.referral-bonus-grid > article {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.referral-bonus-grid > article.is-pressed { transform: scale(.975); }

@keyframes referral-card-enter {
  from { opacity: 0; transform: translateY(10px) scale(.988); filter: brightness(.86); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (max-width: 360px) {
  .referral-summary-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 102px !important;
    padding: 9px 11px !important;
  }
  .referral-summary-card img { width: 54px; height: 54px; }
  .referral-summary-copy { grid-template-columns: minmax(0, 1fr) auto !important; }
  .referral-summary-metrics { grid-column: 1 !important; gap: 3px 6px !important; }
  .referral-summary-metrics > .referral-summary-link,
  .referral-summary-link {
    grid-column: 2 !important;
    min-height: 27px;
    margin-top: 1px !important;
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  .referral-summary-card { grid-template-columns: 48px minmax(0, 1fr) !important; }
  .referral-summary-card img { width: 48px; height: 48px; }
  .referral-summary-copy > strong { font-size: 13.5px; }
  .referral-summary-copy > small { font-size: 11px; }
  .referral-summary-metrics em,
  .referral-summary-metrics i,
  .referral-summary-metrics b { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .referral-hero-card,
  .referral-link-card,
  .referral-bonus-grid > article { animation: none; }
}

/* Final cascade lock for the Pre-Stage Fix Pass. */
.support-form,
.ticket-card,
.notification-card,
.faq-item,
.more-group .list-button,
.referral-summary-card,
.referral-hero-card,
.referral-link-card,
.referral-promos-shell,
.referral-statistics,
.referral-history,
.referral-condition-overview,
.referral-condition-section,
.referral-conditions-link,
.referral-bonus-grid > article,
.operation-card {
  background-color: #101214 !important;
  background-image:
    radial-gradient(ellipse at 15% -12%, rgba(239,207,143,.12), transparent 42%),
    linear-gradient(145deg, rgba(7,9,11,.03), rgba(0,1,2,.14)),
    url("/assets/textures/carbon-seamless-v1.webp") !important;
  background-size: auto, auto, var(--carbon-seamless-size) var(--carbon-seamless-size) !important;
  background-position: center, center, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  border-color: rgba(201,162,82,.42) !important;
}
.referral-summary-card {
  grid-template-columns: 58px minmax(0,1fr) !important;
  min-height: 96px !important;
  padding: 9px 12px !important;
}
.referral-summary-card img { width: 58px !important; height: 58px !important; }
.referral-summary-copy { grid-template-columns: minmax(0,1fr) auto !important; }
.referral-summary-metrics {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(54px, max-content) minmax(68px, max-content) !important;
  justify-content: start !important;
  gap: 0 !important;
  width: auto !important;
}
.referral-summary-metrics > span { min-width: 0 !important; padding: 0 9px 0 0 !important; }
.referral-summary-metrics > span + span { margin-left: 5px; padding-left: 10px !important; }
.referral-summary-link { grid-column: 2 !important; align-self: end !important; margin: 0 0 1px !important; transform: none !important; }

@media (max-width: 360px) {
  .referral-summary-card { grid-template-columns: 50px minmax(0,1fr) !important; min-height: 92px !important; }
  .referral-summary-card img { width: 50px !important; height: 50px !important; }
  .referral-summary-metrics { grid-column: 1 / -1 !important; grid-template-columns: minmax(48px,max-content) minmax(60px,max-content) !important; }
  .referral-summary-metrics > span { min-width: 0 !important; }
  .referral-summary-link { grid-column: 2 !important; font-size: 10px !important; }
}

@media (max-width: 399px) {
  .referral-level-row header { display: grid; gap: 3px; }
  .referral-level-row header strong,
  .referral-level-row header small { max-width: 100%; text-align: left; }
}

/* Corrective pass: keep tactile motion and support previews consistent. */
:where(
  .referral-hero-card,
  .referral-link-card,
  .referral-bonus-grid > article,
  .referral-promo,
  .referral-history-row,
  .referral-conditions-link,
  .operation-card
) {
  -webkit-tap-highlight-color: transparent;
  transition: transform 105ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), opacity 180ms var(--ease);
  transform-origin: center;
}
:where(
  .referral-hero-card,
  .referral-link-card,
  .referral-bonus-grid > article,
  .referral-promo,
  .referral-history-row,
  .referral-conditions-link,
  .operation-card
).is-pressed { transform: scale(.985) !important; }

.attachment-preview {
  grid-template-columns: 1fr !important;
  min-width: 0;
}
.attachment-draft {
  grid-template-columns: 64px minmax(0, 1fr) 30px !important;
  gap: 10px !important;
  min-height: 64px;
  padding: 7px 7px 7px 7px !important;
  overflow: hidden;
  border-color: rgba(213,171,82,.34) !important;
  background: linear-gradient(145deg, rgba(19,22,25,.92), rgba(8,10,12,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.attachment-draft > img {
  width: 64px !important;
  height: 50px !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px !important;
}
.attachment-draft figcaption { min-width: 0; overflow: hidden; }
.attachment-draft figcaption span {
  color: #eee9df;
  font-size: 12px;
  font-weight: 600;
}
.attachment-draft figcaption small { font-size: 10.5px; }
.attachment-draft button {
  position: static !important;
  display: grid;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  padding: 0;
  color: #d8b56d;
  border: 1px solid rgba(213,171,82,.25) !important;
  border-radius: 9px;
  background: rgba(3,4,5,.58) !important;
}
.attachment-draft button svg { width: 15px; height: 15px; }

/* PRE-STAGE FINAL VISUAL CONSISTENCY — premium carbon hierarchy. */
:root { --secondary-carbon-size: 286px; }

/* Secondary surfaces share one restrained material; primary tariff/gift cards
 * keep their own identity and are deliberately excluded. */
.app-shell :is(
  .stat-card,
  .traffic-card,
  .support-form,
  .ticket-card,
  .notification-card,
  .faq-item,
  .more-group .list-button,
  .operation-card,
  .referral-promos-shell,
  .referral-statistics,
  .referral-history,
  .referral-condition-overview,
  .referral-condition-section,
  .referral-conditions-link,
  .referral-bonus-grid > article
) {
  background-color: #080a0c !important;
  background-image:
    radial-gradient(ellipse at 18% -18%, rgba(226,190,116,.075), transparent 42%),
    linear-gradient(145deg, rgba(4,6,8,.49), rgba(1,2,3,.63)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(199,158,77,.40) !important;
  box-shadow: inset 0 1px rgba(255,242,211,.045), 0 12px 28px rgba(0,0,0,.28) !important;
}

/* A — compact cabinet summary: a bespoke satin-gold/obsidian plate. */
.referral-summary-card {
  grid-template-columns: 58px minmax(0,1fr) !important;
  gap: 11px !important;
  min-height: 94px !important;
  margin: 11px 0 13px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(219,177,88,.62) !important;
  border-radius: 18px !important;
  background-color: #080a0b !important;
  background-image:
    radial-gradient(ellipse at 2% 0%, rgba(219,170,77,.15), transparent 38%),
    linear-gradient(105deg, rgba(5,6,7,.14), rgba(1,2,3,.33)),
    url("/assets/textures/referral-level-carbon-v4.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px rgba(255,238,196,.11), inset 0 -24px 34px rgba(0,0,0,.18), 0 14px 31px rgba(0,0,0,.36) !important;
}
.referral-summary-card::before { display: none !important; }
.referral-summary-card img { width: 58px !important; height: 58px !important; }
.referral-summary-copy {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-content: center !important;
  gap: 2px !important;
  min-width: 0;
}
.referral-summary-copy > strong {
  grid-column: 1 !important;
  color: #f4f1eb !important;
  font-size: clamp(15px,4.25vw,19px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
.referral-summary-copy > small {
  grid-column: 1 !important;
  overflow: hidden;
  color: #d8b35f !important;
  font-size: clamp(11px,3.1vw,13px) !important;
  font-weight: 650 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-summary-metrics {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0,max-content) minmax(max-content,1fr) !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
.referral-summary-metrics > span {
  display: inline-flex !important;
  align-content: center !important;
  align-items: baseline !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.referral-summary-metrics > span + span {
  margin: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}
.referral-summary-metrics em {
  overflow: hidden;
  color: #aaa59b !important;
  font-size: clamp(9px,2.55vw,11px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-summary-metrics b {
  overflow: hidden !important;
  color: #f7f4ee !important;
  font-size: clamp(10px,2.85vw,12.5px) !important;
  font-weight: 650 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.referral-summary-metrics > .referral-summary-link,
.referral-summary-link {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  grid-template: none !important;
  align-self: stretch !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  min-width: max-content !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 0 1px 4px !important;
  color: #d9b662 !important;
  font-size: clamp(10px,2.8vw,12px) !important;
  font-weight: 550;
  line-height: 1 !important;
  transform: none !important;
  white-space: nowrap;
}
.referral-summary-referrals::before {
  flex: 0 0 auto;
  margin-right: 1px;
  color: rgba(216,179,95,.58);
  content: "·";
}
.referral-summary-link svg { width: 15px !important; height: 15px !important; }

/* B — level hero: calm obsidian carbon with a restrained ruby edge. */
.referral-hero-card {
  grid-template-columns: minmax(112px,39%) minmax(0,1fr) !important;
  gap: 14px !important;
  min-height: 232px !important;
  padding: 18px 17px 15px !important;
  border: 1px solid rgba(220,177,87,.58) !important;
  background-color: #050708 !important;
  background-image:
    radial-gradient(ellipse at 7% -8%, rgba(217,174,87,.10), transparent 42%),
    linear-gradient(96deg, rgba(3,4,5,.18), rgba(1,2,3,.31) 62%, rgba(18,2,5,.25)),
    url("/assets/textures/referral-level-carbon-v4.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px rgba(255,236,188,.10), inset 0 -30px 45px rgba(0,0,0,.20), 0 16px 34px rgba(0,0,0,.38) !important;
}
.referral-hero-card::before { display: none !important; }
.referral-emblem { max-width: 155px !important; max-height: 184px !important; }
.referral-hero-copy { align-content: center; justify-items: center !important; text-align: center !important; }
.referral-hero-card .eyebrow { font-size: clamp(9px,2.7vw,11px) !important; line-height: 1.25; text-align: center; }
.referral-hero-card h2 {
  max-width: 100%;
  margin: 6px 0 9px !important;
  font-size: clamp(32px,9.7vw,48px) !important;
  line-height: .97 !important;
  overflow-wrap: anywhere;
  text-align: center !important;
}
.referral-active-pill { justify-self: center !important; }
.referral-hero-card p {
  max-width: 230px;
  margin: 10px auto 0 !important;
  font-size: clamp(11px,3vw,12.5px) !important;
  line-height: 1.38 !important;
  text-align: center !important;
}
.referral-level-progress { margin-top: 5px !important; }

/* C — referral link: true woven carbon with discreet ruby threads. */
.referral-link-card {
  margin-top: 13px !important;
  padding: 16px !important;
  border: 1px solid rgba(220,174,80,.56) !important;
  background-color: #070708 !important;
  background-image:
    radial-gradient(ellipse at 12% -12%, rgba(184,33,51,.11), transparent 43%),
    linear-gradient(145deg, rgba(3,4,5,.18), rgba(4,1,2,.34)),
    url("/assets/textures/referral-link-carbon-v4.webp") !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px rgba(255,237,191,.08), inset 0 -24px 38px rgba(0,0,0,.22), 0 15px 32px rgba(0,0,0,.34) !important;
}
.referral-link-value { min-width: 0; }

/* Referral typography and details remain readable without turning the cards grey. */
.referral-bonus-grid > article { min-height: 166px !important; }
.referral-bonus-grid article > span:not(.referral-bonus-icon) {
  min-width: 0;
  font-size: clamp(10.5px,3vw,12px) !important;
  font-weight: 650;
  line-height: 1.18;
}
.referral-bonus-grid small { font-size: clamp(9.5px,2.65vw,11px) !important; line-height: 1.3 !important; }
.referral-metrics small { font-size: clamp(10px,2.8vw,12px) !important; line-height: 1.27 !important; }
.referral-metrics strong { font-size: clamp(13px,3.8vw,18px) !important; }

.referral-condition-overview {
  grid-template-columns: 72px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
}
.referral-overview-copy { min-width: 0; }
.referral-overview-copy h2 { margin: 0 0 3px; color: #f3efe8; font-size: 18px; line-height: 1.2; }
.referral-current-level { margin: 0 0 9px !important; }
.referral-current-level strong { font-size: 15px; }
.referral-overview-benefits { display: grid; gap: 5px; min-width: 0; }
.referral-overview-benefits span {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
}
.referral-overview-benefits svg { flex: 0 0 13px; width: 13px; height: 13px; color: #d8b35f; }

.referral-levels { grid-template-columns: 1fr !important; gap: 8px !important; }
.referral-level-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-width: 0;
  padding: 12px !important;
  text-align: left !important;
}
.referral-level-row header { display: flex !important; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.referral-level-row header strong { color: #f2eee7; font-size: 15px !important; line-height: 1.2; white-space: normal !important; }
.referral-level-row header small { color: var(--text-caption); font-size: 10.5px !important; line-height: 1.25; text-align: right !important; }
.referral-level-benefits { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; min-width: 0; }
.referral-level-benefits span {
  display: inline-flex;
  align-items: center;
  min-width: 0 !important;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(215,171,81,.30);
  border-radius: 999px;
  color: #daba6f !important;
  background: rgba(3,4,5,.48);
  font-size: 10.5px !important;
  line-height: 1.2;
  text-align: left !important;
  white-space: normal !important;
}
.referral-level-row p { font-size: 11px !important; }
.referral-bonus-events .referral-order-list { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }

@media (max-width: 390px) {
  :root { --secondary-carbon-size: 252px; }
  .referral-summary-card { grid-template-columns: 52px minmax(0,1fr) !important; gap: 9px !important; min-height: 90px !important; padding: 9px 10px !important; }
  .referral-summary-card img { width: 52px !important; height: 52px !important; }
  .referral-summary-metrics { grid-template-columns: max-content minmax(0,max-content) minmax(max-content,1fr) !important; column-gap: 7px !important; }
  .referral-summary-metrics > span { padding: 0 !important; }
  .referral-summary-metrics > span + span { padding-left: 0 !important; }
  .referral-summary-metrics > .referral-summary-link { padding-left: 3px !important; }
  .referral-hero-card { grid-template-columns: minmax(104px,38%) minmax(0,1fr) !important; gap: 11px !important; padding-inline: 14px !important; }
  .referral-emblem { max-width: 138px !important; }
}

@media (max-width: 360px) {
  .referral-summary-card { grid-template-columns: 48px minmax(0,1fr) !important; gap: 8px !important; min-height: 86px !important; padding: 8px 9px !important; }
  .referral-summary-card img { width: 48px !important; height: 48px !important; }
  .referral-summary-copy > strong { font-size: 14px !important; }
  .referral-summary-copy > small { font-size: 10.5px !important; }
  .referral-summary-metrics { grid-template-columns: max-content minmax(0,max-content) minmax(max-content,1fr) !important; column-gap: 5px !important; margin-top: 3px !important; }
  .referral-summary-metrics em { font-size: 9.5px !important; }
  .referral-summary-metrics b { font-size: 9px !important; }
  .referral-summary-metrics > .referral-summary-link { font-size: 9.5px !important; }
  .referral-summary-link svg { width: 13px !important; height: 13px !important; }
  .referral-hero-card { grid-template-columns: minmax(94px,36%) minmax(0,1fr) !important; min-height: 218px !important; gap: 9px !important; padding: 15px 12px 13px !important; }
  .referral-emblem { max-width: 124px !important; }
  .referral-hero-card h2 { font-size: clamp(29px,9.2vw,38px) !important; }
  .referral-active-pill { padding: 5px 10px; font-size: 11px; }
  .referral-hero-card p { font-size: 10.5px !important; }
  .referral-level-progress > div { font-size: 10.5px !important; }
  .referral-link-card { padding: 14px !important; }
  .referral-link-actions { gap: 7px; }
  .referral-link-actions .button { min-height: 44px; font-size: 12px; }
  .referral-bonus-grid { gap: 6px !important; }
  .referral-bonus-grid > article { min-height: 170px !important; padding-inline: 5px !important; }
  .referral-condition-overview { grid-template-columns: 62px minmax(0,1fr) !important; gap: 11px !important; padding: 13px !important; }
  .referral-overview-copy h2 { font-size: 16px; }
  .referral-current-level strong { font-size: 13px; }
  .referral-overview-benefits span { font-size: 10px; }
}

@media (max-width: 330px) {
  .referral-summary-card { grid-template-columns: 43px minmax(0,1fr) !important; }
  .referral-summary-card img { width: 43px !important; height: 43px !important; }
  .referral-summary-copy > strong { font-size: 13px !important; }
  .referral-summary-copy > small { font-size: 10px !important; }
  .referral-summary-metrics { grid-template-columns: max-content minmax(0,max-content) minmax(max-content,1fr) !important; column-gap: 4px !important; }
  .referral-summary-metrics > span { padding: 0 !important; }
  .referral-summary-metrics > span + span { padding-left: 0 !important; }
  .referral-summary-metrics > .referral-summary-link { padding-left: 2px !important; font-size: 9px !important; }
  .referral-summary-metrics em, .referral-summary-metrics b { font-size: 8.5px !important; }
  .referral-hero-card { grid-template-columns: 88px minmax(0,1fr) !important; padding-inline: 10px !important; }
  .referral-emblem { max-width: 112px !important; }
  .referral-bonus-grid article > span:not(.referral-bonus-icon) { font-size: 9.5px !important; }
  .referral-bonus-grid small { font-size: 8.8px !important; }
  .referral-level-row header { display: grid !important; gap: 3px; }
  .referral-level-row header small { text-align: left !important; }
}

/* POST-CORRECTIVE MICRO PASS — metadata rhythm and summary baseline lock. */
.referral-summary-metrics {
  align-items: center !important;
}
.referral-summary-metrics > span,
.referral-summary-metrics > .referral-summary-link {
  align-content: center !important;
  align-items: center !important;
  min-height: 18px !important;
  line-height: 1 !important;
}
.referral-summary-metrics b,
.referral-summary-metrics em,
.referral-summary-metrics > .referral-summary-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 14px;
  line-height: 1 !important;
}
.referral-summary-referrals::before {
  align-self: center;
  line-height: 1 !important;
}
.referral-summary-link svg {
  align-self: center;
}

.operation-copy {
  gap: 2px;
}
.operation-copy .operation-reference,
.operation-copy .operation-date,
.operation-copy .operation-wallet {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.operation-copy .operation-reference {
  margin-top: 3px;
  color: #aaa49a;
}
.operation-copy .operation-date {
  color: #85827d;
}
.operation-copy .operation-wallet {
  margin-top: 2px;
  color: #b9a575;
}

/* PRE-STAGE MICRO FIX — one backend benefit per stable visual row. */
.referral-level-benefits {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100%;
}

/* Stage 40e: share the cabinet's premium display typography without changing
   Mini App navigation, layout or material system. */
.page-head h1,
.sub-screen .page-head h1,
.referral-hero-card h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.018em;
}
.tariff-price,
.detail-price,
.tariff-price .price-after,
.detail-price .price-after,
.gift-tariff-option > strong:last-child,
.preview-row.total strong {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.012em;
}
.referral-level-benefits span {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  min-height: 31px;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/* CABINET FUNCTIONAL CARDS MICRO-PASS — one material scale across compact
 * device/VPN summaries and the full-width traffic cards.  The previous
 * `cover` sizing rescaled the same bitmap for every aspect ratio, making the
 * weave on half-width cards look like a different material. */
:root {
  --cabinet-functional-carbon-span: min(
    calc(100vw - var(--gutter) - var(--gutter)),
    444px
  );
}

.screen > .stats-grid > .stat-card,
.screen > .traffic-list > .traffic-card {
  background-color: #080a0c !important;
  background-image:
    radial-gradient(ellipse at 18% -18%, rgba(226,190,116,.075), transparent 42%),
    linear-gradient(145deg, rgba(4,6,8,.49), rgba(1,2,3,.63)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size:
    auto,
    auto,
    var(--cabinet-functional-carbon-span) var(--cabinet-functional-carbon-span) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(199,158,77,.40) !important;
  box-shadow:
    inset 0 1px rgba(255,242,211,.045),
    inset 0 -18px 30px rgba(0,0,0,.10),
    0 12px 28px rgba(0,0,0,.28) !important;
}

/* Referral bonus tiles are thirds of the content width.  Keep the neutral
 * carbon at the full content scale so each tile is a crop of one premium
 * material instead of an independently enlarged bitmap. */
.referral-bonus-grid > article {
  background-color: #0a0c0e !important;
  background-image:
    radial-gradient(ellipse at 18% -18%, rgba(226,190,116,.065), transparent 42%),
    linear-gradient(145deg, rgba(3,5,7,.22), rgba(0,1,2,.36)),
    url("/assets/textures/referral-bonus-obsidian-v1.webp") !important;
  background-size:
    auto,
    auto,
    var(--cabinet-functional-carbon-span) var(--cabinet-functional-carbon-span) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

/* FINAL REFERRAL SUMMARY LOCK — intentionally last in the cascade. */
.referral-summary-card {
  grid-template-columns: 50px minmax(0,1fr) !important;
  gap: 10px !important;
  min-height: 78px !important;
  padding: 9px 11px !important;
}
.referral-summary-card img { width: 50px !important; height: 50px !important; }
.referral-summary-copy {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-content: center !important;
  gap: 6px !important;
}
.referral-summary-copy > strong { font-size: clamp(14px,4vw,17px) !important; line-height: 1.05 !important; }
.referral-summary-metrics {
  display: grid !important;
  grid-template-columns: max-content auto minmax(0,1fr) max-content !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.referral-summary-metrics > b,
.referral-summary-metrics > span {
  display: inline-flex !important;
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-items: center !important;
  align-self: center !important;
  min-width: 0 !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(10.5px,2.9vw,12px) !important;
  line-height: 1 !important;
  transform: none !important;
  white-space: nowrap !important;
}
.referral-summary-metrics > b {
  overflow: hidden !important;
  color: #f4efe6 !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
}
.referral-summary-separator { color: rgba(216,179,95,.62) !important; }
.referral-summary-referrals::before { content: none !important; }
.referral-summary-metrics > .referral-summary-link {
  justify-content: flex-end !important;
  min-width: max-content !important;
  color: #d9b662 !important;
  font-weight: 550 !important;
}

@media (max-width:360px) {
  .referral-summary-card { grid-template-columns:45px minmax(0,1fr) !important; gap:8px !important; min-height:72px !important; padding:8px 9px !important; }
  .referral-summary-card img { width:45px !important; height:45px !important; }
  .referral-summary-copy { gap:5px !important; }
  .referral-summary-metrics { gap:4px !important; }
  .referral-summary-metrics > b,
  .referral-summary-metrics > span { font-size:10px !important; }
}
@media (max-width:330px) {
  .referral-summary-card { grid-template-columns:42px minmax(0,1fr) !important; min-height:68px !important; }
  .referral-summary-card img { width:42px !important; height:42px !important; }
  .referral-summary-copy > strong { font-size:13px !important; }
  .referral-summary-metrics > b,
  .referral-summary-metrics > span { font-size:9px !important; }
}

/* STAGE 39.5 — use the canonical neutral carbon crop instead of the tiny
 * legacy bitmap, preventing stretched weave and visible seams. */
.screen > .empty-state {
  background-color: #080a0c !important;
  background-image:
    radial-gradient(ellipse at 18% -18%, rgba(226,190,116,.075), transparent 42%),
    linear-gradient(145deg, rgba(4,6,8,.49), rgba(1,2,3,.63)),
    url("/assets/textures/carbon-neutral.webp") !important;
  background-size:
    auto,
    auto,
    cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  border-color: rgba(199,158,77,.40) !important;
  box-shadow:
    inset 0 1px rgba(255,242,211,.045),
    inset 0 -18px 30px rgba(0,0,0,.10),
    0 12px 28px rgba(0,0,0,.28) !important;
}

/* Keep the Stage 40e typography as the final Mini App display override. */
.page-head h1,
.sub-screen .page-head h1,
.referral-hero-card h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.018em !important;
}
.tariff-price,
.detail-price,
.tariff-price .price-after,
.detail-price .price-after,
.gift-tariff-option > strong:last-child,
.preview-row.total strong {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
}

/* STAGE 40D — expired entitlement remains visible, but is never styled as an
 * active red subscription and never exposes a connection CTA. */
.access-card.expired,
.access-card.disabled {
  background-color: #080a0c !important;
  background-image:
    linear-gradient(145deg,rgba(13,15,17,.78),rgba(5,7,9,.94)),
    url('/assets/textures/carbon-muted.webp') !important;
  background-position: center !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat !important;
  border-color: rgba(139,143,147,.34) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035),0 14px 32px rgba(0,0,0,.30) !important;
}
.access-card.expired::after,
.access-card.disabled::after { opacity: .08 !important; }
.access-card.expired .status-pill,
.access-card.disabled .status-pill {
  border-color: rgba(150,154,157,.32) !important;
  color: #bfc2c3 !important;
  background: rgba(91,95,98,.10) !important;
}
.access-card .expired-copy { color: #b9b7b2 !important; }
.expired-term { display: grid !important; gap: 4px; }
.expired-term > strong { color: #ddd9d1; }
.expired-term .date-caption { color: #8f9294; }
.stat-card:disabled { cursor: default; opacity: .58; transform: none !important; }

/* Payment corrective — preserve the approved Mini App material while using
 * one continuous crop and explicit vertical rhythm for every payment state. */
.payment-state {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 12px !important;
  background-color: #06080a !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.085), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.34), rgba(1,2,3,.55)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center, center, center top, center !important;
  background-repeat: no-repeat !important;
}
.payment-state > * { min-width: 0; margin-block: 0; }
.payment-state .payment-status-note { margin: 2px 0 0 !important; }
.payment-state .payment-open-button,
.payment-state .payment-refresh-button {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 !important;
}

/* Gift checkout uses the same continuous, proportional crop as payment.
 * Cover both dimensions so extra fields never expose the bitmap's lower edge. */
.gift-checkout-card {
  background-color: #06080a !important;
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.075), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.32), rgba(1,2,3,.54)),
    url("/assets/textures/carbon-neutral.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, cover, auto !important;
  background-position: center, center, center top, center !important;
  background-repeat: no-repeat !important;
}
.gift-checkout-card > * { position: relative; z-index: 1; min-width: 0; }

/* Gift-ready facts use one stable left-hand value column. */
.gift-success-summary .preview-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  justify-content: start;
  text-align: left;
}
.gift-success-summary .preview-row strong {
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Account linking inherits the continuous neutral material from .card. */
.account-hero, .account-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 26px 22px;
  overflow: hidden;
  border: 1px solid rgba(204,201,191,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 45px rgba(0,0,0,.24);
}
.account-hero > *, .account-card > * { position: relative; min-width: 0; margin: 0; }
.account-hero h2, .account-card h2 { font-size: clamp(25px, 7vw, 32px); line-height: 1.16; font-weight: 650; letter-spacing: -.9px; }
.account-hero p, .account-card p, .account-note p { color: #aaa9a5; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.account-emblem { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #d6c9b2; border: 1px solid rgba(210,195,166,.24); background: linear-gradient(145deg,rgba(212,195,162,.11),rgba(15,15,15,.75)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.account-emblem svg { width: 25px; height: 25px; }
.account-kicker { color: #b9a587; font-size: 10px; font-weight: 650; letter-spacing: 1.8px; }
.account-identity { display: grid; gap: 8px; padding: 18px 0; border-block: 1px solid rgba(213,205,188,.12); }
.account-identity > span { color: #9d9f9f; font-size: 12px; }
.account-identity strong { color: #f0ede5; font-size: 16px; overflow-wrap: anywhere; }
.account-identity small { display: flex; align-items: center; gap: 5px; color: #b7b1a3; font-size: 11px; }
.account-identity small svg { width: 13px; height: 13px; }
.account-hero .button, .account-card .button { width: 100%; min-height: 48px; margin: 0; }
.account-note { display: flex; align-items: flex-start; gap: 13px; padding: 20px; background: linear-gradient(145deg, #111416, #090b0d); }
.account-note > svg { width: 21px; height: 21px; flex: 0 0 21px; color: #b5aa93; margin-top: 3px; }
.account-note h3 { font-size: 14px; margin: 0 0 7px; color: #dedbd3; }
.account-note p { margin: 0; font-size: 12px; }
.account-fields { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.account-fields label { color: #b8b4ab; font-size: 12px; margin-top: 4px; }
.account-fields input { min-height: 50px; width: 100%; box-sizing: border-box; font-size: 16px; border-radius: 13px; background: rgba(3,5,7,.65); border: 1px solid rgba(194,191,181,.2); }
.account-fields input:focus-visible { outline: 2px solid #b88f68; outline-offset: 2px; }
.account-fields input[readonly] { color: #aaa9a4; border-color: rgba(194,191,181,.1); }
.account-fields .account-code { font-size: 25px; letter-spacing: 9px; text-align: center; padding-left: 23px; font-variant-numeric: tabular-nums; }
.account-code-actions { display: grid; gap: 5px; }
.account-code-actions .text-button { min-height: 40px; background: transparent; border: 0; color: #c2b296; font: inherit; font-size: 12px; cursor: pointer; }
.account-code-actions .text-button:disabled { color: #777a7b; cursor: default; }
.account-error { color: #efa19f !important; font-size: 12px !important; line-height: 1.5 !important; }
.account-error:empty { display: none; }
.account-caption { font-size: 12px !important; color: #92948f !important; }
.account-merge-facts { display: grid; gap: 12px; padding-block: 16px; border-block: 1px solid rgba(213,205,188,.12); }
.account-merge-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #aaa9a5; }
.account-merge-facts strong { color: #e3ded2; font-variant-numeric: tabular-nums; }
.account-success .account-emblem { color: #c7bea6; }
@media (max-width: 360px) { .account-hero, .account-card { padding: 22px 18px; } }

/* Primary hotfix: long About copy must not enlarge the carbon weave.
 * Use the existing seamless material at a fixed scale, only on this card. */
.card.about-card {
  background-image:
    radial-gradient(circle at 18% -8%, rgba(255,255,255,.085), transparent 39%),
    linear-gradient(145deg, rgba(6,8,10,.34), rgba(1,2,3,.55)),
    url("/assets/textures/carbon-seamless-v1.webp"),
    var(--rim-neutral) !important;
  background-size: auto, auto, 286px 286px, auto !important;
  background-position: center, center, left top, center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

.p2p-access-banner { margin: 16px; padding: 20px; border: 1px solid #b28b45; border-radius: 16px; background: #171510; color: #ece7da; }
.p2p-access-banner p, .notification-detail p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.notification-media { display: block; width: auto; max-width: 100%; max-height: 560px; object-fit: contain; border-radius: 12px; margin: 16px 0; }