/* AngelGuard: shared site, Mini App, status and subscription design. */
@font-face {
  font-family: Onest;
  src: url('/site/fonts/Onest-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
body.sub-look {
  color-scheme: dark;
  --sub-bg: #0c1625;
  --sub-bg-elevated: #101d2f;
  --sub-surface: #142337;
  --sub-surface-strong: #192b42;
  --sub-surface-soft: #1c3049;
  --sub-surface-hover: #243c58;
  --sub-border: #2b3c53;
  --sub-border-strong: #83aeff;
  --sub-text: #ecf2fa;
  --sub-text-muted: #a2b4cb;
  --sub-text-faint: #95a8c0;
  --sub-accent: #83aeff;
  --sub-green: #83aeff;
  --sub-green-strong: #a7c5ff;
  --sub-success: #64cba8;
  --sub-cyan: #83aeff;
  --sub-yellow: #efbd72;
  --sub-danger: #ff9b9f;
  --sub-shadow: 0 8px 28px rgba(0, 8, 20, .12);
  --sub-shadow-soft: none;
  --sub-glow: transparent;
  --sub-grid: transparent;
  --sub-overlay: rgba(5, 14, 27, .75);
  --sub-button-text: #101d2f;
  min-height: 100%;
  margin: 0;
  color: var(--sub-text);
  background: var(--sub-bg) !important;
  font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
}
.sub-look.light-theme, .sub-look.light, :root[data-theme='light'] body.sub-look {
  color-scheme: light;
  --sub-bg: #f0f3f7;
  --sub-bg-elevated: #e8eef6;
  --sub-surface: #ffffff;
  --sub-surface-strong: #ffffff;
  --sub-surface-soft: #f4f7fc;
  --sub-surface-hover: #e8effa;
  --sub-border: #dce4ee;
  --sub-border-strong: #2863d7;
  --sub-text: #172b46;
  --sub-text-muted: #53657d;
  --sub-text-faint: #61728a;
  --sub-accent: #2863d7;
  --sub-green: #2863d7;
  --sub-green-strong: #1e4fae;
  --sub-success: #21785d;
  --sub-cyan: #2863d7;
  --sub-yellow: #93601a;
  --sub-danger: #ba3548;
  --sub-shadow: 0 8px 28px rgba(35, 62, 99, .04);
  --sub-overlay: rgba(23, 43, 70, .4);
  --sub-button-text: #ffffff;
}
/* Existing components share these aliases; no second component framework. */
body.sub-look {
  --portal-bg: var(--sub-bg); --portal-bg-elevated: var(--sub-bg-elevated);
  --portal-surface: var(--sub-surface); --portal-surface-strong: var(--sub-surface-strong);
  --portal-surface-soft: var(--sub-surface-soft); --portal-surface-hover: var(--sub-surface-hover);
  --portal-border: var(--sub-border); --portal-border-strong: var(--sub-border-strong);
  --portal-text: var(--sub-text); --portal-muted: var(--sub-text-muted); --portal-faint: var(--sub-text-faint);
  --portal-green: var(--sub-accent); --portal-cyan: var(--sub-cyan); --portal-yellow: var(--sub-yellow);
  --portal-danger: var(--sub-danger); --portal-shadow: var(--sub-shadow); --portal-shadow-soft: none;
  --portal-glow: transparent; --portal-grid: transparent; --portal-button-text: var(--sub-button-text);
  --ag-bg: var(--sub-bg); --ag-panel: var(--sub-surface); --ag-panel-strong: var(--sub-surface-strong);
  --ag-line: var(--sub-border); --ag-muted: var(--sub-text-muted); --ag-green: var(--sub-success);
  --ag-green-soft: color-mix(in srgb, var(--sub-success) 10%, transparent);
  --ag-cyan: var(--sub-cyan); --ag-danger: var(--sub-danger);
  --bg: var(--sub-bg); --bg-deep: var(--sub-bg-elevated); --panel: var(--sub-surface);
  --surface: var(--sub-surface); --surface-strong: var(--sub-surface-strong);
  --surface-soft: var(--sub-surface-soft); --surface-hover: var(--sub-surface-hover);
  --line: var(--sub-border); --border: var(--sub-border); --border-strong: var(--sub-border-strong);
  --text: var(--sub-text); --muted: var(--sub-text-muted); --muted-strong: var(--sub-text);
  --green: var(--sub-success); --cyan: var(--sub-cyan); --red: var(--sub-danger); --amber: var(--sub-yellow);
  --accent: var(--sub-accent); --accent-strong: var(--sub-green-strong);
  --accent-soft: color-mix(in srgb, var(--sub-accent) 10%, transparent);
  --cyan-soft: var(--accent-soft); --danger: var(--sub-danger); --warning: var(--sub-yellow);
  --shadow: var(--sub-shadow); --glow: transparent; --grid: transparent;
}
.sub-look::before, .sub-look::after, .sub-look .ambient,
.sub-look .glass::before, .sub-look .hero::after, .sub-look .hero-card::before,
.sub-look #welcomeCard::after, .sub-look aside::before { display: none !important; }
.sub-look :where(button, input, select, textarea, a) { font: inherit; -webkit-tap-highlight-color: transparent; }
.sub-look :where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--sub-accent); outline-offset: 4px;
}
.sub-look :where(button, a) { touch-action: manipulation; }
.sub-look :where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  color: var(--sub-text) !important; background: var(--sub-surface-soft) !important;
  border: 1px solid var(--sub-border) !important; border-radius: 12px !important;
  min-height: 46px; font-size: 16px !important; box-shadow: none !important;
}
.sub-look input::placeholder, .sub-look textarea::placeholder { color: var(--sub-text-faint); opacity: 1; }
.sub-look :where(h1, h2, h3) { color: var(--sub-text); letter-spacing: -.035em; line-height: 1.2; }
.sub-look :where(p, li) { line-height: 1.6; }
.sub-look :where(.eyebrow, .kicker, .section-kicker, .server-group-title, .server-chart-group-title) {
  color: var(--sub-text-muted) !important; font-size: 12px !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500;
}
.sub-look :where(.glass, .card, .panel, .context-card) {
  background: var(--sub-surface) !important; border: 1px solid var(--sub-border) !important;
  border-radius: 20px; box-shadow: var(--sub-shadow) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.sub-look.sub-look--portal .glass { background: var(--sub-surface) !important; box-shadow: var(--sub-shadow) !important; }
.sub-look :where(.primary-button, .btn-gradient, #authSubmit, #btnLogin) {
  background: var(--sub-accent) !important; color: var(--sub-button-text) !important;
  border: 1px solid transparent !important; border-radius: 12px !important;
  box-shadow: none !important; min-height: 46px; font-weight: 600;
}
.sub-look :where(.secondary-button, .button, .icon-button, .theme-toggle, .retry-button, .header-icon-button) {
  color: var(--sub-text) !important; border: 1px solid var(--sub-border) !important;
  background: var(--sub-surface-soft) !important; border-radius: 12px !important;
  box-shadow: none !important; min-height: 42px;
}
.sub-look :where(.button, .secondary-button, .primary-button):hover { filter: brightness(.96); }
.sub-look :where(.primary-button, .secondary-button, .button):disabled { opacity: .5; cursor: not-allowed; }
.sub-look :where(.status-dot, .online-label::before, .server-status i, .dot) { box-shadow: none !important; }
.sub-look :where(.server-latency, .ping) { color: var(--sub-accent) !important; font-size: 12px; font-weight: 600; }
.sub-look :where(.server-latency.is-unavailable, .server-latency.is-measuring, .ping.unavailable, .ping.measuring) { color: var(--sub-text-muted) !important; }
.sub-look :where(.server-tile, .server-group, .server-summary, .security-item, .quick-action,
  .connection-card, .tariff-card, .tariff, .product-service-card, .metric, .ag-device,
  .session-item, .notification-item, .account-status-grid > div, .subscription-insights > div) {
  background: var(--sub-surface-soft) !important; border-color: var(--sub-border) !important;
  border-radius: 12px; box-shadow: none !important;
}
.sub-look :where(.traffic-track, .progress-track) { background: var(--sub-bg-elevated); border-radius: 5px; }
.sub-look :where(.progress-fill.main, .progress-bar, .traffic-progress-fill) { background: var(--sub-accent) !important; box-shadow: none !important; }
.sub-look :where(.filter, .server-filter, .history-chip, .dashboard-tab) { border-radius: 9px !important; }
.sub-look :where(.filter.is-active, .server-filter.is-active, .history-chip.is-active, .dashboard-tab.is-active) {
  color: var(--sub-accent) !important; background: var(--accent-soft) !important; border-color: var(--sub-border) !important;
}
.sub-look :where(.text-white, .text-white\/90, .text-white\/80) { color: var(--sub-text) !important; }
.sub-look :where(.text-white\/70, .text-white\/60, .text-white\/55, .text-white\/50, .text-white\/45, .text-white\/40) { color: var(--sub-text-muted) !important; }
.sub-look :where(.text-emerald-200, .text-emerald-300, .text-emerald-400) { color: var(--sub-accent) !important; }
.sub-look #migrationNotice { color: var(--sub-text-muted) !important; font-size: 12px; line-height: 1.6; }
.sub-look #serversRetry, .sub-look #statusRetry {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; min-width: 42px; padding: 10px 13px; font-size: 12px; white-space: nowrap;
}
/* Site: a legible access desk, with the account action beside the welcome. */
.sub-look--portal .app-main { padding-top: 32px; }
.sub-look--portal .desktop-shell { max-width: 1280px; }
.sub-look--portal .dashboard-flow { gap: 22px !important; }
.sub-look--portal #welcomeCard { padding: 28px !important; }
.sub-look--portal #pageTitle { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.sub-look--portal #pageSubtitle { margin-top: 10px; font-size: 14px; }
.sub-look--portal .dashboard-card { padding: 24px !important; }
.sub-look--portal #authCard { padding: 30px !important; }
.sub-look--portal #authCard > div:first-child { margin-bottom: 22px; font-size: 18px; font-weight: 600; }
.sub-look--portal #authCard label { color: var(--sub-text-muted); font-size: 13px; font-weight: 500; }
.sub-look--portal #authSwitch, .sub-look--portal #forgotBtn { border: 0 !important; background: transparent !important; min-height: 40px; color: var(--sub-text-muted) !important; }
.sub-look--portal #authSwitch:hover, .sub-look--portal #forgotBtn:hover { color: var(--sub-accent) !important; }
.sub-look--portal #welcomeCard .feature-pill { border: 0; background: var(--sub-surface-soft); color: var(--sub-text-muted); border-radius: 8px; }
.sub-look--portal > aside { color: var(--sub-text); background: var(--sub-surface) !important; border-color: var(--sub-border) !important; box-shadow: none !important; }
.sub-look--portal .side-link { border-radius: 11px; color: var(--sub-text-muted) !important; min-height: 48px; transform: none !important; }
.sub-look--portal .side-link.is-active, .sub-look--portal .side-link[aria-current='page'] { background: var(--accent-soft) !important; color: var(--sub-accent) !important; }
.sub-look--portal #infraSidebarState { background: var(--sub-surface-soft); border-color: var(--sub-border); border-radius: 14px; }
.sub-look--portal .mobile-bottom-nav { background: var(--sub-surface) !important; border-color: var(--sub-border) !important; box-shadow: var(--sub-shadow); border-radius: 16px; }
.sub-look--portal .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-look--portal .server-tile { padding: 16px; }
.sub-look--portal .server-chart-group { border-radius: 12px; border-color: var(--sub-border); background: transparent; }
.sub-look--portal .server-chart-row { padding-block: 15px; }
.sub-look--portal .server-chart-label strong { font-size: 14px; }
.sub-look--portal .server-chart-bars { opacity: .85; }
.sub-look--portal #serverHealthChart { margin-top: 18px; }
@media (min-width: 1024px) {
  body.sub-look--portal.guest-mode .desktop-shell.dashboard-flow { max-width: 1160px; grid-template-columns: 1.08fr 1fr !important; align-items: start; }
  body.sub-look--portal.guest-mode #welcomeCard { grid-column: 1 !important; grid-row: 1; min-height: 290px; padding: 34px !important; }
  body.sub-look--portal.guest-mode #authCard { grid-column: 2 !important; grid-row: 1 / span 2; }
  body.sub-look--portal.guest-mode #telegramWidgetCard { grid-column: 2 !important; grid-row: 3; }
  body.sub-look--portal.guest-mode #productCard { grid-column: 1 !important; grid-row: 2 / span 2; }
  body.sub-look--portal.guest-mode #pageTitle { max-width: 10em; font-size: 44px; }
  body.sub-look--portal.guest-mode #serversCard { grid-column: 1 / -1 !important; }
  body.sub-look--portal.guest-mode #serverHealthChart, body.sub-look--portal.guest-mode #serverFilterTabs { display: block !important; }
  body.sub-look--portal.guest-mode #serverFilterTabs { display: flex !important; }
  body.sub-look--portal.guest-mode #serversList { display: none !important; }
}
/* Mini App: the same palette and hierarchy, sized for one-handed use. */
.sub-look--webapp .app-shell { max-width: 1120px; margin: auto; }
.sub-look--webapp .app-header { background: var(--sub-bg) !important; border-bottom: 1px solid var(--sub-border); box-shadow: none; padding-block: 20px; }
.sub-look--webapp .header-copy strong { font-size: 25px; font-weight: 600; letter-spacing: -.035em; }
.sub-look--webapp .header-copy span { color: var(--sub-text-muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
.sub-look--webapp .brand-mark { background: var(--accent-soft); color: var(--sub-accent); border: 0; border-radius: 13px; box-shadow: none; }
.sub-look--webapp .app-main { padding: 24px 18px 40px; }
.sub-look--webapp .app-view { gap: 20px; }
.sub-look--webapp .card { padding: 24px; }
.sub-look--webapp .card h3 { font-size: 22px; font-weight: 600; }
.sub-look--webapp .hero-card #statusTitle { font-size: 32px; }
.sub-look--webapp .card p { font-size: 14px; color: var(--sub-text-muted); }
.sub-look--webapp .card-heading { margin-bottom: 20px; }
.sub-look--webapp .hero-icon { background: var(--accent-soft); color: var(--sub-accent); border: 0; box-shadow: none; }
.sub-look--webapp .server-item { border-color: var(--sub-border); padding-block: 15px; }
.sub-look--webapp .bottom-nav { background: var(--sub-surface) !important; border: 1px solid var(--sub-border); border-radius: 17px; box-shadow: var(--sub-shadow); }
.sub-look--webapp .bottom-nav button { min-height: 51px; border-radius: 11px; color: var(--sub-text-muted); }
.sub-look--webapp .bottom-nav button.is-active { color: var(--sub-accent); background: var(--accent-soft); box-shadow: none; }
.sub-look--webapp .context-screen { background: var(--sub-bg); }
.sub-look--webapp .context-card { padding: 32px; }
/* Public status: clear rows and restrained history, without decorative chrome. */
.sub-look--status .shell { width: min(1160px, calc(100% - 40px)); padding-top: 32px; }
.sub-look--status header.panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 22px; }
.sub-look--status .brand strong { font-size: 18px; }
.sub-look--status .hero { padding: 34px; margin: 0 0 24px; }
.sub-look--status h1 { font-size: clamp(28px, 4vw, 44px); max-width: 16em; font-weight: 600; }
.sub-look--status .summary p { font-size: 14px; }
.sub-look--status .section { padding: 26px; }
.sub-look--status .server-name strong { font-size: 14px; }
.sub-look--status .server-row { padding: 16px; }
.sub-look--status .server-group { background: transparent !important; border-radius: 12px; }
.sub-look--status .server-group-head { background: var(--sub-surface-soft); padding: 12px 16px; }
.sub-look--status .uptime strong { color: var(--sub-success); font-size: 36px; }
.sub-look--status .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sub-look--status .metric { border: 0; background: transparent !important; padding: 12px 0; }
.sub-look--status .metric strong { font-size: 27px; font-weight: 600; }
.sub-look--status :where(.checked, .server-status, .server-type, .server-meta, .event p, .event time, .history-meta, .metric span) { font-size: 12px; }
.sub-look--status .event-head strong { font-size: 14px; }
.sub-look--status .server-tools { gap: 14px; }
.sub-look--status .history-panel { margin-top: 24px; }
.sub-look--status .state { color: var(--sub-success); background: color-mix(in srgb, var(--sub-success) 10%, transparent); }
.sub-look--status .state.checking { color: var(--sub-text-muted); background: var(--sub-surface-soft); }
.sub-look--status .state.degraded, .sub-look--status .state.maintenance { color: var(--sub-yellow); background: color-mix(in srgb, var(--sub-yellow) 10%, transparent); }
.sub-look--status .state.outage { color: var(--sub-danger); background: color-mix(in srgb, var(--sub-danger) 10%, transparent); }
/* Legal and token pages use the same quiet surfaces. */
.sub-look--legal .glass { border-radius: 20px !important; }
.sub-look--legal #legalDocumentContent { color: var(--sub-text-muted); font-size: 15px; line-height: 1.75; }
.sub-look--legal #legalDocumentContent :where(h1, h2) { color: var(--sub-text); }
.sub-look--legal #legalDocumentContent a { color: var(--sub-accent); }
.sub-look--subscription .sub-page { background: transparent; }
.sub-look--subscription :where(.hero, .panel, .section-card, .card) { background: var(--sub-surface); box-shadow: var(--sub-shadow); border-color: var(--sub-border); }
.sub-look--subscription :where(.primary-button, .secondary-button) { min-height: 46px; }
@media (max-width: 760px) {
  body.sub-look { font-size: 16px; }
  .sub-look--portal .app-main { padding: 16px 14px 104px; }
  .sub-look--portal .dashboard-flow { gap: 16px !important; }
  .sub-look--portal .dashboard-card, .sub-look--portal #authCard, .sub-look--portal #welcomeCard { padding: 21px !important; border-radius: 17px !important; }
  .sub-look--portal #pageTitle { font-size: 30px; }
  .sub-look--portal .dashboard-card :where(p, .text-xs) { font-size: 13px !important; line-height: 1.6; }
  .sub-look--portal .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-look--portal .mobile-bottom-nav { min-height: 66px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .sub-look--portal .server-grid { grid-template-columns: 1fr; }
  .sub-look--webapp .app-header { padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
  .sub-look--webapp .header-copy strong { font-size: 22px; }
  .sub-look--webapp .app-main { padding: 18px 14px 32px; }
  .sub-look--webapp .card { padding: 21px; border-radius: 17px; }
  .sub-look--webapp .card h3 { font-size: 21px; }
  .sub-look--webapp .card p { font-size: 14px; }
  .sub-look--webapp .traffic-head { font-size: 13px; }
  .sub-look--webapp .subscription-stats span, .sub-look--webapp .traffic-foot { font-size: 12px; }
  .sub-look--status .shell { width: calc(100% - 28px); padding-top: 20px; }
  .sub-look--status .hero, .sub-look--status .section { padding: 21px; border-radius: 17px; }
  .sub-look--status .section-head { align-items: flex-start; flex-wrap: wrap; }
  .sub-look--status .server-heading-actions { width: 100%; justify-content: space-between; }
  .sub-look--status .server-row { padding: 14px; }
  .sub-look--status .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-look--status .summary { gap: 22px; }
  .sub-look--status .checked { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .sub-look *, .sub-look *::before, .sub-look *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Keep node identity readable next to the historical availability bars. */
.sub-look--portal .server-chart-label { flex-direction: column; align-items: flex-start; gap: 4px; }
.sub-look--portal .server-chart-label strong { flex: none; white-space: normal; overflow: visible; }
.sub-look--portal .server-chart-row { grid-template-columns: 250px minmax(0, 1fr) 70px; gap: 16px; }
.sub-look--portal .server-chart-bar { height: 6px; background: var(--sub-bg-elevated); }
.sub-look--portal .server-chart-bar > span { background: var(--sub-success) !important; }
.sub-look--portal .server-chart-bar.degraded > span { background: var(--sub-yellow) !important; }
.sub-look--portal .server-chart-bar.offline > span { background: var(--sub-danger) !important; }
body.sub-look--portal.guest-mode #serverHealthChart { display: block !important; }
body.sub-look--portal.guest-mode #serverFilterTabs { display: flex !important; }
body.sub-look--portal.guest-mode #serversList { display: none !important; }
body.sub-look #authSubmit { background: var(--sub-accent) !important; color: var(--sub-button-text) !important; }
@media(max-width:760px) {
 .sub-look--portal .server-chart-row { grid-template-columns: minmax(125px, 1.2fr) minmax(35px, .6fr) 52px; gap: 10px; }
 .sub-look--portal .server-chart-head { grid-template-columns: 1fr; }
 .sub-look--portal .server-chart-label strong { font-size: 12px; }
 .sub-look--portal .server-chart-label span { font-size: 10px; }
}

body.sub-look input::placeholder, body.sub-look textarea::placeholder { color: var(--sub-text-faint) !important; }
body.sub-look--portal #pageTitle { color: var(--sub-text) !important; }
.sub-look--portal .welcome-pills span, .sub-look--portal .product-location-pill { color: var(--sub-accent) !important; background: var(--accent-soft) !important; border-color: var(--sub-border) !important; }
.sub-look--portal .brand-orb { color: var(--sub-accent) !important; background: var(--accent-soft) !important; border-color: var(--sub-border) !important; box-shadow: none !important; }
.sub-look--webapp #migrationNotice { margin: 14px 18px 0; }
.sub-look--status .header-actions .home-label { display: inline; }

.sub-look .hero-card::after { display: none !important; }
body.sub-look--portal :is(#copySub, #onboardingCopySub) { color: var(--sub-button-text) !important; background: var(--sub-accent) !important; }
body.sub-look--portal .mobile-bottom-nav a.is-active, body.sub-look--portal .section-kicker, body.sub-look--portal .server-chart-group-title { color: var(--sub-accent) !important; }
@media(max-width:520px) {
 .sub-look--portal #sessionsCard > .flex { flex-wrap: wrap; }
 .sub-look--portal #revokeOtherSessions { width: 100%; min-height: 42px; }
}