/* ==========================================================
   UPlanVPN — ICON BUTTONS (QR / KEY / FLAG)
   ========================================================== */

.uplan-actions{
  display:flex;
  align-items:center;
  gap:5px; /* расстояние между иконками */
}

/* Кнопка-иконка (иконка как background-image) */
.uplan-ibtn{
  width:40px;               /* размер кнопки */
  height:40px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.50);
  background-color: rgba(15,23,42,0.88);
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px; /* размер иконки */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}

.uplan-ibtn:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,0.65);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.35), 0 10px 30px rgba(2,132,199,0.22);
}

.uplan-ibtn:active{
  transform: translateY(0);
}

.uplan-ibtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Типы кнопок */
.uplan-ibtn--qr{
  background-image: url("/assets/img/icons/qr_white.png");
}

.uplan-ibtn--key{
  background-image: url("/assets/img/icons/key.png");
}

/* FLAG: размер флага чуть больше */
.uplan-ibtn--flag{
  background-size:22px 16px;
}

/* 4 флага */
.uplan-flag--de{ background-image: url("/assets/img/flags/germany.png"); }
.uplan-flag--ca{ background-image: url("/assets/img/flags/canada.png"); }
.uplan-flag--tr{ background-image: url("/assets/img/flags/turkey.png"); }
.uplan-flag--nl{ background-image: url("/assets/img/flags/netherland.png"); }

/* Если нужно подсветить текущую активную кнопку (опционально) */
.uplan-ibtn.is-active{
  border-color: rgba(34,197,94,0.75);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.25);
}

/* ==========================================================
   OPTIONAL: GRID IN LOCATION MODAL (если используешь)
   ========================================================== */

.uplan-flag-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.uplan-flag-item{
  flex: 1 1 160px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.88);
  padding:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.uplan-flag-item:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,0.65);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.3), 0 12px 30px rgba(2,132,199,0.20);
}

.uplan-flag-item .name{
  font-weight:600;
  color:#e5e7eb;
}

.uplan-flag-item .hint{
  font-size:12px;
  color: rgba(148,163,184,0.85);
}


/* ==========================================================
   UPlanVPN — RENEW BUTTON (dynamic neon gradient)
   - ширина красной части задаётся переменной --uplan-red (0..100%)
   ========================================================== */

.uplan-renew-btn{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: transparent;
  color: #f1f5f9;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.uplan-renew-btn__label{
  color: inherit;
}

.uplan-renew-btn:hover{
  background: rgba(255,255,255,1);
  border-color: rgba(255,255,255,1);
  color: #0b1220;
}

.uplan-renew-btn:active{
  background: rgba(220,220,220,1);
  color: #0b1220;
}

/* ==========================================================
   UPlanVPN — PAYMENTS TABLE (restore dark theme)
   ========================================================== */

.uplan-table-wrap{
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.28);
  overflow: hidden;
  background: rgba(15,23,42,0.55);
}

.uplan-payments-table{
  --bs-table-color: #e5e7eb;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(148,163,184,0.22);
  --bs-table-striped-bg: rgba(2,6,23,0.25);
  --bs-table-hover-bg: rgba(56,189,248,0.08);
  margin-bottom: 0;
}

.uplan-payments-table thead th{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(229,231,235,0.85);
  border-bottom: 1px solid rgba(148,163,184,0.28);
  background: rgba(2,6,23,0.35);
}

.uplan-payments-table tbody td{
  color: rgba(229,231,235,0.92);
  border-top: 1px solid rgba(148,163,184,0.18);
}

.uplan-opid{
  color: #c7d2fe;
  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: 10px;
  padding: 2px 8px;
}
/* ==========================================================
   UPlanVPN — NAVBAR (wider, fixed, landing anchors)
   ========================================================== */

.uplan-body{
  /* так как navbar fixed-top */
  padding-top: 76px;
}

.uplan-body .card {
	background: ffffff00 !important;
}

.uplan-navbar{
  /*background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(15,23,42,0.94));*/
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(148,163,184,0.28);
}

.uplan-nav-inner{
  max-width: 1400px;
  padding-left: 20px;
  padding-right: 20px;
}

.uplan-brand-pill{
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.35);
  color: #e5e7eb;
  font-weight: 600;
}

.uplan-navlink{
  opacity: .88;
  padding: 10px 12px;
  border-radius: 10px;
}
.uplan-navlink:hover{
  opacity: 1;
  background: rgba(255,255,255,0.05);
}

.uplan-nav-cta{
  background: linear-gradient(135deg,#22d3ee,#6366f1);
  border: none;
  color: #f9fafb;
  box-shadow: 0 18px 45px rgba(56,189,248,0.22);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .03em;
}
.uplan-nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(99,102,241,0.28);
  color: #fff;
}

/* ==========================================================
   UPlanVPN — HOME / LANDING
   ========================================================== */

.uplan-hero{
  margin-top: -9px;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,0.18), transparent 55%),
    linear-gradient(135deg,#020617,#020617);
}

.uplan-bg-parallax{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.uplan-bg-parallax canvas{
  width:100%;
  height:100%;
  display:block;
  opacity: .9;
}

.uplan-hero-content{
  position:relative;
  z-index:1;
}

.uplan-hero-badge{
  background: rgba(15,23,42,0.85) !important;
  border: 1px solid rgba(148,163,184,0.5) !important;
  color: #e5e7eb !important;
}

.uplan-hero-cta{
  background: linear-gradient(135deg,#22d3ee,#6366f1);
  border: none;
  box-shadow: 0 18px 45px rgba(56,189,248,0.35);
  border-radius: 14px;
}
.uplan-hero-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(99,102,241,0.35);
}

.uplan-dot{
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(148,163,184,0.45);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.uplan-dot-ok{ background: rgba(34,197,94,0.15); color:#4ade80; border-color: rgba(74,222,128,0.35); }
.uplan-dot-cyan{ background: rgba(56,189,248,0.15); color:#38bdf8; border-color: rgba(56,189,248,0.35); }
.uplan-dot-indigo{ background: rgba(129,140,248,0.15); color:#818cf8; border-color: rgba(129,140,248,0.35); }

.uplan-hero-card{
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,0.20), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,0.20), transparent 55%),
    linear-gradient(145deg,#020617,#020617);
  border-radius: 22px;
}

.uplan-online-pill{
  background: rgba(22,163,74,0.16);
  color:#4ade80;
  border:1px solid rgba(74,222,128,0.4);
}

.uplan-step{
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  border: 1px solid rgba(148,163,184,0.35);
}
.uplan-step-cyan{ background:rgba(56,189,248,0.15); color:#e0f2fe; }
.uplan-step-indigo{ background:rgba(129,140,248,0.18); color:#e0e7ff; }
.uplan-step-teal{ background:rgba(15,118,110,0.22); color:#a5f3fc; }

.uplan-chip{
  background: rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.5);
  color:#e5e7eb;
}

.uplan-ghost-btn{
  background: transparent;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,0.7);
  color:#e5e7eb;
}
.uplan-ghost-btn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,189,248,0.55);
  color:#fff;
}

.uplan-feature-card{
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 18px;
}
.uplan-feature-card:hover{
  border-color: rgba(56,189,248,0.38);
  box-shadow: 0 18px 45px rgba(2,132,199,0.18);
}

/* Pricing tiles */
.uplan-price-card{
  background: linear-gradient(180deg, rgba(15,23,42,0.78), rgba(2,6,23,0.86));
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 42px rgba(2,6,23,0.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.uplan-price-card:hover{
  transform: translateY(-6px);
  border-color: rgba(56,189,248,0.40);
  box-shadow: 0 22px 60px rgba(2,132,199,0.18);
}

.uplan-price-tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  /*border-radius: 999px;*/
  font-size: 25px;
  /*background: rgba(56,189,248,0.12);*/
  /*border: 1px solid rgba(56,189,248,0.35);*/
  /*color: #e5e7eb;*/
  /*color: #e2bb1d;*/
  color: #2ac6ef;
  font-weight: 700;
}
.uplan-price-period{
  font-size: 12px;
  color: rgba(148,163,184,0.9);
}
.uplan-price-title{
  display: flex;
  justify-content: end;
  /*font-weight: 800;*/
  /*font-size: 18px;*/
  color: #fff;
  margin-top: -10px;
}
.uplan-price-amount{
  font-weight: 900;
  font-size: 50px;
  letter-spacing: -0.02em;
  /*color: #fff;*/
  margin-top: 10px;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
.uplan-price-meta{
  display: flex;
  align-items: self-end;
  margin-left: 20px;
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  padding-top: 2px;
  padding-bottom: 2px;
  
}
.uplan-price-cta{
  background: linear-gradient(135deg,#22d3ee,#6366f1);
  border:none;
  border-radius: 14px;
  font-weight: 800;
  padding: 12px 14px;
  box-shadow: 0 18px 45px rgba(56,189,248,0.22);
}
.uplan-price-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(99,102,241,0.28);
}

/* Locations pills */
.uplan-loc{
  background: rgba(15,23,42,0.70);
  border: 1px solid rgba(148,163,184,0.35);
  color: #e5e7eb;
  padding: 10px 12px;
}

/* Support */
.uplan-support-card{
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 16px 42px rgba(2,6,23,0.28);
}
.uplan-support-cta{
  background: linear-gradient(135deg,#22d3ee,#6366f1);
  border: none;
  color: #fff;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 14px;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .uplan-body{ padding-top: 70px; }
  .uplan-nav-inner{ padding-left: 14px; padding-right: 14px; }
}



/* ===== Navbar logo (brand) ===== */
.uplan-nav-logo{
  width:40px;
  height:40px;
  border-radius:14px;
  object-fit:cover;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}

/* ===== Hero right card: darker + semi-transparent (override Bootstrap card bg) ===== */
.uplan-hero .card.uplan-hero-card{
  /*background:*/
  /*  radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 55%),*/
  /*  radial-gradient(circle at 100% 100%, rgba(129,140,248,0.18), transparent 55%),*/
  /*  linear-gradient(145deg, rgba(2,6,23,0.78), rgba(2,6,23,0.78)) !important;*/
  /*background-color: rgba(2,6,23,0.78) !important;*/
  border: 1px solid rgba(148,163,184,0.20) !important;
  backdrop-filter: blur(3px);
}

/* ===== Supported platforms chips ===== */
.uplan-platform-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(15,23,42,0.85);
  /*border: 1px solid rgba(148,163,184,0.40);*/
  color:#e5e7eb;
  font-size:13px;
  line-height:1;
}

.platform-icon{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor;
  opacity: .95;
}

.uplan-hero-meta{ margin-top: 8px; }

/* ==========================================================
   UPlanVPN 2026 — shared public design system
   Kept after legacy rules so refreshed screens can coexist
   with the current dashboard and admin area during migration.
   ========================================================== */

:root{
  --uplan-bg:#070b14;
  --uplan-bg-deep:#050811;
  --uplan-surface:#0f1725;
  --uplan-surface-2:#131d2e;
  --uplan-surface-3:#18243a;
  --uplan-border:rgba(148,163,184,.16);
  --uplan-border-strong:rgba(148,163,184,.28);
  --uplan-text:#f7f9fc;
  --uplan-muted:#91a0b5;
  --uplan-primary:#37d5ff;
  --uplan-primary-dark:#0ca8d1;
  --uplan-accent:#7567ff;
  --uplan-success:#32d583;
  --uplan-danger:#ff6b7d;
  --uplan-shadow:0 24px 80px rgba(0,0,0,.32);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body.uplan-body{
  min-height:100vh;
  padding-top:72px;
  overflow-x:hidden;
  background:var(--uplan-bg);
  color:var(--uplan-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.uplan-body a{ text-underline-offset:3px; }
.uplan-body .container{ max-width:1180px; }

.uplan-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--uplan-text);
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:-.025em;
  text-decoration:none;
}

.uplan-brand:hover{ color:#fff; }

.uplan-brand-dashboard{ min-width:0; }
.uplan-brand-account-meta{ min-width:0; color:var(--uplan-muted); font-size:.68rem; font-weight:500; letter-spacing:0; line-height:1.15; text-align:left; }
.uplan-brand-account-meta span,.uplan-brand-account-meta strong{ display:block; overflow:hidden; max-width:260px; text-overflow:ellipsis; white-space:nowrap; }
.uplan-brand-account-meta strong{ margin-top:3px; color:#d9e2ef; font-size:.8rem; font-weight:700; }

.uplan-brand-mark{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(55,213,255,.34);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(55,213,255,.16),rgba(117,103,255,.18));
  color:#74e4ff;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 10px 28px rgba(20,144,189,.14);
}

.uplan-navbar{
  min-height:72px;
  background:rgba(7,11,20,.82);
  border-bottom:1px solid var(--uplan-border);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  transition:background .2s ease,border-color .2s ease;
}

.uplan-nav-inner{ max-width:1180px; }
.uplan-nav-list{ gap:4px; }

.uplan-navlink{
  padding:9px 11px!important;
  border-radius:10px;
  color:#aab7c9!important;
  font-size:.91rem;
  font-weight:600;
  transition:color .16s ease,background .16s ease;
}

.uplan-navlink:hover,.uplan-navlink.active{
  color:#fff!important;
  background:rgba(255,255,255,.055);
}

.uplan-nav-action{ margin-left:8px; }
.uplan-nav-logout-action form{ margin:0; }
.uplan-navbar-toggler{ border-color:var(--uplan-border-strong); box-shadow:none!important; }

.uplan-btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:13px;
  font-weight:750;
  line-height:1.2;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}

.uplan-btn:hover{ transform:translateY(-1px); }
.uplan-btn:focus-visible{ outline:3px solid rgba(55,213,255,.26); outline-offset:3px; }
.uplan-btn-sm{ min-height:40px; padding:8px 14px; font-size:.9rem; }
.uplan-btn-lg{ min-height:54px; padding:14px 22px; border-radius:15px; }

.uplan-btn-primary{
  background:linear-gradient(135deg,var(--uplan-primary),#3da7ff 52%,var(--uplan-accent));
  color:#04111b;
  box-shadow:0 14px 36px rgba(55,213,255,.2);
}

.uplan-btn-primary:hover{
  color:#020b12;
  box-shadow:0 18px 44px rgba(55,213,255,.28);
}

.uplan-btn-secondary,.uplan-btn-ghost{
  border-color:var(--uplan-border-strong);
  background:rgba(255,255,255,.045);
  color:var(--uplan-text);
}

.uplan-btn-secondary:hover,.uplan-btn-ghost:hover{
  border-color:rgba(55,213,255,.4);
  background:rgba(55,213,255,.08);
  color:#fff;
}

.uplan-btn-danger{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(135deg,#df4a5c,#b52f40);
  color:#fff;
}

.uplan-btn-danger:hover{
  background:linear-gradient(135deg,#ec5f70,#c83749);
  color:#fff;
}

.uplan-modal[hidden]{ display:none!important; }
.uplan-modal{ position:fixed; inset:0; z-index:1090; display:grid; place-items:center; padding:24px; }
.uplan-modal-open{ overflow:hidden; }

.uplan-modal-overlay{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(1,4,10,.74);
  backdrop-filter:blur(8px);
}

.uplan-modal-dialog{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  padding:32px;
  border:1px solid var(--uplan-border-strong);
  border-radius:24px;
  background:linear-gradient(155deg,rgba(19,29,46,.98),rgba(8,14,25,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.55);
}

.uplan-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--uplan-border);
  border-radius:11px;
  background:rgba(255,255,255,.04);
  color:var(--uplan-muted);
}

.uplan-modal-close:hover{ color:#fff; border-color:var(--uplan-border-strong); }
.uplan-modal-eyebrow,.uplan-section-kicker,.uplan-eyebrow{
  color:#63ddff;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.uplan-modal-dialog h2{ margin:10px 44px 8px 0; font-size:clamp(1.55rem,4vw,2rem); letter-spacing:-.035em; }
.uplan-modal-dialog>p{ margin:0 0 22px; color:var(--uplan-muted); }
.uplan-start-options{ display:grid; gap:11px; }

.uplan-start-option{
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:14px;
  padding:15px;
  border:1px solid var(--uplan-border);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  color:var(--uplan-text);
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.uplan-start-option:hover{ transform:translateY(-1px); border-color:rgba(55,213,255,.35); background:rgba(55,213,255,.07); color:#fff; }
.uplan-start-option-icon{ width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(55,213,255,.1); color:#69e1ff; }
.uplan-start-option-icon-telegram{ background:rgba(61,167,255,.12); color:#62baff; }
.uplan-start-option strong,.uplan-start-option small{ display:block; }
.uplan-start-option small{ margin-top:3px; color:var(--uplan-muted); font-size:.8rem; }
.uplan-option-arrow{ color:#64748b; }
.uplan-modal-footnote{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px; color:var(--uplan-muted); font-size:.82rem; }

.uplan-hero-v2{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:86px 0 92px;
  background:
    linear-gradient(180deg,rgba(5,8,17,.14),var(--uplan-bg)),
    radial-gradient(circle at 75% 30%,rgba(37,99,235,.12),transparent 35%),
    var(--uplan-bg-deep);
}

.uplan-hero-v2:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}

.uplan-hero-v2-inner{ position:relative; z-index:2; }
.uplan-hero-glow{ position:absolute; border-radius:999px; filter:blur(8px); pointer-events:none; }
.uplan-hero-glow-one{ width:450px; height:450px; top:-260px; left:-110px; background:rgba(55,213,255,.11); }
.uplan-hero-glow-two{ width:440px; height:440px; right:-220px; bottom:-230px; background:rgba(117,103,255,.14); }

.uplan-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--uplan-border); border-radius:999px; background:rgba(255,255,255,.035); }
.uplan-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--uplan-success); box-shadow:0 0 0 5px rgba(50,213,131,.11),0 0 16px rgba(50,213,131,.65); }

.uplan-hero-title{
  max-width:750px;
  margin:22px 0 20px;
  font-size:clamp(3rem,6.3vw,5.8rem);
  line-height:.97;
  letter-spacing:-.065em;
  font-weight:850;
}

.uplan-hero-title span{ color:transparent; background:linear-gradient(90deg,#66e5ff,#91c7ff 46%,#a69dff); -webkit-background-clip:text; background-clip:text; }
.uplan-hero-lead{ max-width:630px; margin:0; color:#a5b2c5; font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.7; }
.uplan-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.uplan-trust-row{ display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; color:#8291a7; font-size:.84rem; }
.uplan-trust-row span{ display:flex; align-items:center; gap:7px; }
.uplan-trust-row svg{ color:var(--uplan-success); }

.uplan-product-visual{ position:relative; min-height:470px; display:grid; place-items:center; isolation:isolate; }
.uplan-product-orbit{ position:absolute; border:1px solid rgba(91,196,255,.14); border-radius:50%; z-index:-1; }
.uplan-product-orbit-one{ width:430px; height:430px; }
.uplan-product-orbit-two{ width:330px; height:330px; border-style:dashed; animation:uplan-spin 32s linear infinite; }
@keyframes uplan-spin{ to{ transform:rotate(360deg); } }

.uplan-connection-card{
  width:min(100%,445px);
  padding:26px;
  border:1px solid rgba(148,163,184,.23);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(20,31,50,.94),rgba(9,15,27,.96));
  box-shadow:var(--uplan-shadow),inset 0 1px rgba(255,255,255,.06);
}

.uplan-connection-card-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.uplan-connection-card-head strong,.uplan-connection-label{ display:block; }
.uplan-connection-card-head strong{ margin-top:3px; font-size:1rem; }
.uplan-connection-label{ color:var(--uplan-muted); font-size:.76rem; }
.uplan-status-switch{ width:50px; height:28px; display:flex; align-items:center; justify-content:flex-end; padding:4px; border-radius:999px; background:rgba(50,213,131,.18); border:1px solid rgba(50,213,131,.38); }
.uplan-status-switch i{ width:18px; height:18px; border-radius:50%; background:var(--uplan-success); box-shadow:0 0 13px rgba(50,213,131,.55); }

.uplan-route-visual{ display:grid; grid-template-columns:1fr minmax(28px,70px) 64px minmax(28px,70px) 1fr; align-items:center; margin:44px 0; }
.uplan-route-node{ display:grid; place-items:center; gap:9px; text-align:center; }
.uplan-route-node small{ color:var(--uplan-muted); font-size:.68rem; line-height:1.3; }
.uplan-route-icon{ width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--uplan-border-strong); border-radius:15px; background:rgba(255,255,255,.04); color:#b9c7da; font-size:1.4rem; }
.uplan-route-shield{ width:64px; height:64px; display:grid; place-items:center; border:1px solid rgba(55,213,255,.4); border-radius:20px; background:linear-gradient(145deg,rgba(55,213,255,.17),rgba(117,103,255,.18)); color:#73e5ff; box-shadow:0 0 42px rgba(55,213,255,.18); }
.uplan-route-line{ position:relative; height:1px; background:linear-gradient(90deg,rgba(55,213,255,.1),rgba(55,213,255,.55),rgba(55,213,255,.1)); overflow:hidden; }
.uplan-route-line i{ position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:#8aeaff; box-shadow:0 0 9px #37d5ff; animation:uplan-packet 2.4s ease-in-out infinite; }
.uplan-route-line:nth-of-type(2) i{ animation-delay:1.1s; }
@keyframes uplan-packet{ from{ left:0; opacity:0; } 25%,75%{ opacity:1; } to{ left:100%; opacity:0; } }

.uplan-connection-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding-top:18px; border-top:1px solid var(--uplan-border); }
.uplan-connection-stats div{ min-width:0; text-align:center; }
.uplan-connection-stats small,.uplan-connection-stats strong{ display:block; }
.uplan-connection-stats small{ color:var(--uplan-muted); font-size:.67rem; }
.uplan-connection-stats strong{ margin-top:4px; overflow:hidden; color:#dfe8f5; font-size:.78rem; text-overflow:ellipsis; }

.uplan-platform-strip{ border-top:1px solid var(--uplan-border); border-bottom:1px solid var(--uplan-border); background:rgba(255,255,255,.018); }
.uplan-platform-strip .container{ min-height:76px; display:flex; align-items:center; gap:28px; }
.uplan-platform-label{ color:#68778d; font-size:.74rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.uplan-platform-list{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; color:#aab6c8; font-size:.86rem; }
.uplan-platform-list span{ position:relative; }
.uplan-platform-list span:not(:last-child):after{ content:""; position:absolute; right:-13px; top:50%; width:3px; height:3px; border-radius:50%; background:#465269; }

.uplan-section{ position:relative; padding:104px 0; }
.uplan-section-soft{ background:rgba(255,255,255,.018); border-top:1px solid rgba(148,163,184,.08); border-bottom:1px solid rgba(148,163,184,.08); }
.uplan-section-heading{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:42px; }
.uplan-section-heading h2,.uplan-faq-title,.uplan-support-banner h2,.uplan-legal-card h1{ margin:9px 0 0; font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.05em; }
.uplan-section-heading>p{ max-width:480px; margin:0; color:var(--uplan-muted); line-height:1.65; }
.uplan-section-heading-centered{ justify-content:center; text-align:center; }

.uplan-pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; align-items:stretch; }
.uplan-plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:24px;
  border:1px solid var(--uplan-border);
  border-radius:22px;
  background:linear-gradient(160deg,rgba(18,28,44,.82),rgba(9,15,26,.8));
  box-shadow:0 18px 50px rgba(0,0,0,.13);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.uplan-plan-card:hover{ transform:translateY(-5px); border-color:rgba(55,213,255,.32); box-shadow:0 24px 70px rgba(0,0,0,.22); }
.uplan-plan-card.is-featured{ border-color:rgba(55,213,255,.4); background:linear-gradient(160deg,rgba(25,45,66,.94),rgba(13,21,38,.94)); box-shadow:0 24px 75px rgba(22,141,180,.13); }
.uplan-plan-card.is-featured:before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:23px; background:linear-gradient(135deg,rgba(55,213,255,.32),transparent 50%,rgba(117,103,255,.26)); }
.uplan-plan-topline{ min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.uplan-plan-badge,.uplan-plan-saving{ display:inline-flex; align-items:center; min-height:26px; padding:5px 9px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.uplan-plan-badge{ background:rgba(255,255,255,.055); color:#aab8ca; }
.is-featured .uplan-plan-badge{ background:rgba(55,213,255,.11); color:#70e2ff; }
.uplan-plan-saving{ background:rgba(50,213,131,.1); color:#5bdfa0; }
.uplan-plan-card h3{ margin:23px 0 4px; font-size:1.08rem; }
.uplan-plan-description{ min-height:40px; margin:2px 0 0; color:var(--uplan-muted); font-size:.83rem; }
.uplan-plan-price{ display:flex; align-items:flex-start; gap:5px; margin-top:24px; }
.uplan-plan-price strong{ font-size:clamp(2.4rem,4vw,3.25rem); line-height:.95; letter-spacing:-.06em; }
.uplan-plan-price span{ color:#aab7c9; font-size:1.1rem; font-weight:700; }
.uplan-plan-monthly{ margin-top:8px; color:var(--uplan-muted); font-size:.78rem; }
.uplan-plan-features{ display:grid; gap:9px; margin:22px 0 24px; padding:18px 0 0; border-top:1px solid var(--uplan-border); list-style:none; color:#bec9d8; font-size:.82rem; }
.uplan-plan-features li{ display:flex; align-items:center; gap:8px; }
.uplan-plan-features svg{ color:var(--uplan-success); flex:0 0 auto; }
.uplan-plan-card>.uplan-btn{ margin-top:auto; }
.uplan-empty-state{ grid-column:1/-1; padding:36px; border:1px dashed var(--uplan-border-strong); border-radius:20px; color:var(--uplan-muted); text-align:center; }
.uplan-payment-methods{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; margin-top:28px; color:#718096; font-size:.76rem; }
.uplan-payment-chip{ min-height:31px; display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border:1px solid var(--uplan-border); border-radius:9px; background:rgba(255,255,255,.025); color:#a6b4c6; font-weight:700; }
.uplan-payment-chip img{ width:auto; max-width:28px; height:15px; }

.uplan-location-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.uplan-location-card{ display:flex; gap:22px; min-height:210px; padding:28px; border:1px solid var(--uplan-border); border-radius:22px; background:linear-gradient(145deg,rgba(19,29,46,.74),rgba(10,16,28,.8)); }
.uplan-location-flag{ width:76px; height:76px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--uplan-border); border-radius:22px; background:rgba(255,255,255,.04); font-size:2.35rem; }
.uplan-location-status{ display:flex; align-items:center; gap:7px; color:#69dda3; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.uplan-location-status i{ width:7px; height:7px; border-radius:50%; background:var(--uplan-success); box-shadow:0 0 10px rgba(50,213,131,.55); }
.uplan-location-card h3{ margin:12px 0 1px; font-size:1.45rem; }
.uplan-location-city{ color:#aebbd0; font-size:.82rem; }
.uplan-location-card p{ margin:15px 0 0; color:var(--uplan-muted); font-size:.88rem; line-height:1.55; }
.uplan-location-ping{ margin-left:auto; flex:0 0 auto; align-self:flex-start; display:flex; align-items:baseline; gap:4px; padding:8px 12px; border:1px solid rgba(105,221,163,.25); border-radius:12px; background:rgba(50,213,131,.07); font-variant-numeric:tabular-nums; }
.uplan-location-ping-value{ color:#69dda3; font-size:1.25rem; font-weight:800; line-height:1; }
.uplan-location-ping-unit{ color:rgba(170,190,210,.75); font-size:.72rem; font-weight:700; letter-spacing:.04em; }

.uplan-steps-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.uplan-step-card{ position:relative; min-height:270px; padding:28px; overflow:hidden; border:1px solid var(--uplan-border); border-radius:22px; background:rgba(255,255,255,.025); }
.uplan-step-number{ position:absolute; right:20px; top:13px; color:rgba(148,163,184,.1); font-size:4rem; font-weight:900; letter-spacing:-.08em; }
.uplan-step-icon{ width:55px; height:55px; display:grid; place-items:center; border:1px solid rgba(55,213,255,.2); border-radius:17px; background:rgba(55,213,255,.08); color:#69e2ff; }
.uplan-step-card h3{ position:relative; margin:54px 0 10px; font-size:1.12rem; }
.uplan-step-card p{ position:relative; margin:0; color:var(--uplan-muted); line-height:1.6; font-size:.88rem; }

.uplan-benefit-section{ padding-top:0; }
.uplan-benefit-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--uplan-border); border-radius:22px; overflow:hidden; background:rgba(255,255,255,.018); }
.uplan-benefit-grid article{ display:flex; gap:15px; padding:25px; }
.uplan-benefit-grid article+article{ border-left:1px solid var(--uplan-border); }
.uplan-benefit-grid article>span{ width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:rgba(117,103,255,.1); color:#a49cff; }
.uplan-benefit-grid h3{ margin:0 0 6px; font-size:.95rem; }
.uplan-benefit-grid p{ margin:0; color:var(--uplan-muted); font-size:.78rem; line-height:1.55; }

.uplan-faq-title{ margin-bottom:14px; }
.uplan-faq-intro{ color:var(--uplan-muted); }
.uplan-faq-list{ border-top:1px solid var(--uplan-border); }
.uplan-faq-list details{ border-bottom:1px solid var(--uplan-border); }
.uplan-faq-list summary{ min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; color:#e6edf7; font-weight:700; list-style:none; }
.uplan-faq-list summary::-webkit-details-marker{ display:none; }
.uplan-faq-list summary i{ position:relative; width:25px; height:25px; flex:0 0 auto; }
.uplan-faq-list summary i:before,.uplan-faq-list summary i:after{ content:""; position:absolute; left:5px; right:5px; top:12px; height:1px; background:#8da0b8; transition:transform .2s ease; }
.uplan-faq-list summary i:after{ transform:rotate(90deg); }
.uplan-faq-list details[open] summary i:after{ transform:rotate(0); }
.uplan-faq-list details p{ max-width:700px; margin:-4px 0 22px; color:var(--uplan-muted); line-height:1.65; font-size:.9rem; }
.uplan-faq-list details a{ color:#66ddfb; }

.uplan-support-banner{ display:flex; align-items:center; justify-content:space-between; gap:34px; padding:43px; overflow:hidden; border:1px solid rgba(55,213,255,.24); border-radius:26px; background:radial-gradient(circle at 85% 20%,rgba(117,103,255,.18),transparent 35%),linear-gradient(135deg,rgba(22,49,67,.7),rgba(15,23,40,.88)); box-shadow:var(--uplan-shadow); }
.uplan-support-banner h2{ font-size:clamp(1.9rem,3.3vw,2.75rem); }
.uplan-support-banner p{ margin:12px 0 0; color:var(--uplan-muted); }
.uplan-support-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; flex:0 0 auto; }

.uplan-scrolltop{ position:fixed; z-index:20; right:30px; bottom:90px; width:45px; height:45px; display:grid; place-items:center; border:1px solid var(--uplan-border-strong); border-radius:14px; background:rgba(15,23,37,.9); color:#c9d7e8; box-shadow:0 12px 35px rgba(0,0,0,.28); backdrop-filter:blur(12px); }
.uplan-scrolltop[hidden]{ display:none; }
.uplan-scrolltop:hover{ border-color:rgba(55,213,255,.35); color:#fff; }

.uplan-footer{ margin-top:auto; padding:64px 0 25px; border-top:1px solid var(--uplan-border); background:#050811; }
.uplan-footer-grid{ display:grid; grid-template-columns:2fr repeat(3,1fr); gap:44px; }
.uplan-footer-main p{ max-width:330px; margin:17px 0 0; color:#738298; font-size:.84rem; line-height:1.6; }
.uplan-footer-brand .uplan-brand-mark{ width:34px; height:34px; border-radius:11px; }
.uplan-footer-column{ display:grid; align-content:start; gap:10px; }
.uplan-footer-title{ margin-bottom:4px; color:#dce5f2; font-size:.77rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.uplan-footer-column a{ color:#76869c; font-size:.82rem; text-decoration:none; }
.uplan-footer-column a:hover{ color:#c7d4e4; }
.uplan-footer-bottom{ display:flex; justify-content:space-between; gap:20px; margin-top:48px; padding-top:22px; border-top:1px solid var(--uplan-border); color:#5f6e82; font-size:.75rem; }

.uplan-legal{ padding:70px 0 100px; }
.uplan-legal-card{ max-width:850px; margin:0 auto; padding:clamp(25px,5vw,55px); border:1px solid var(--uplan-border); border-radius:25px; background:linear-gradient(150deg,rgba(19,29,46,.82),rgba(9,15,26,.82)); }
.uplan-back-link{ display:inline-flex; align-items:center; gap:7px; margin-bottom:30px; color:var(--uplan-muted); font-size:.8rem; font-weight:700; text-decoration:none; }
.uplan-back-link:hover{ color:#dce7f5; }
.uplan-legal-card h1{ margin-bottom:12px; }
.uplan-legal-updated{ margin-bottom:36px; color:var(--uplan-muted); font-size:.8rem; }
.uplan-legal-content{ color:#aab7c9; line-height:1.75; }
.uplan-legal-content h2{ margin:34px 0 10px; color:#eef3fa; font-size:1.22rem; }
.uplan-legal-content p,.uplan-legal-content ul{ margin-bottom:13px; }
.uplan-legal-content a{ color:#66ddfb; }

/* Authentication */
.uplan-auth-section{ position:relative; min-height:calc(100vh - 72px); display:grid; place-items:center; padding:65px 0 95px; overflow:hidden; }
.uplan-auth-section:before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 5%,rgba(55,213,255,.075),transparent 32%),radial-gradient(circle at 85% 75%,rgba(117,103,255,.07),transparent 28%); }
.uplan-auth-wrap{ position:relative; width:min(100%,520px); margin:0 auto; }
.uplan-auth-intro{ margin-bottom:22px; text-align:center; }
.uplan-auth-intro h1{ margin:9px 0 8px; font-size:clamp(1.9rem,5vw,2.45rem); letter-spacing:-.045em; }
.uplan-auth-intro p{ max-width:440px; margin:0 auto; color:var(--uplan-muted); font-size:.9rem; line-height:1.6; }
.uplan-auth-card{ padding:clamp(23px,5vw,40px); border:1px solid var(--uplan-border); border-radius:24px; background:linear-gradient(155deg,rgba(19,29,46,.95),rgba(8,14,25,.96)); box-shadow:var(--uplan-shadow),inset 0 1px rgba(255,255,255,.05); }
.uplan-auth-icon{ width:54px; height:54px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid rgba(55,213,255,.24); border-radius:17px; background:rgba(55,213,255,.08); color:#6de3ff; }
.uplan-auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:25px; padding:5px; border:1px solid var(--uplan-border); border-radius:14px; background:#0a111d; }
.uplan-auth-tab{ min-height:40px; padding:8px 12px; border:0; border-radius:10px; background:transparent; color:#748398; font-size:.8rem; font-weight:800; cursor:pointer; }
.uplan-auth-tab.is-active{ background:linear-gradient(135deg,rgba(55,213,255,.15),rgba(117,103,255,.16)); color:#eaf7ff; box-shadow:inset 0 0 0 1px rgba(55,213,255,.17); }
.uplan-auth-steps{ display:flex; align-items:center; justify-content:space-between; margin-bottom:19px; color:#8e9db1; font-size:.75rem; }
.uplan-auth-step-dots{ display:flex; gap:6px; }
.uplan-auth-step-dots i{ width:7px; height:7px; border-radius:50%; background:#3c495d; }
.uplan-auth-step-dots i.is-active{ background:var(--uplan-primary); box-shadow:0 0 9px rgba(55,213,255,.5); }
.uplan-form-group{ margin-bottom:17px; }
.uplan-form-label{ display:block; margin-bottom:8px; color:#bec9d8; font-size:.78rem; font-weight:750; }
.uplan-form-control{ width:100%; min-height:49px; padding:12px 14px; border:1px solid rgba(148,163,184,.28); border-radius:12px; outline:0; background:#0a111e!important; color:#f2f6fb!important; -webkit-text-fill-color:#f2f6fb; caret-color:#fff; transition:border-color .16s ease,box-shadow .16s ease; }
.uplan-form-control::placeholder{ color:#56657a; -webkit-text-fill-color:#56657a; }
.uplan-form-control:focus{ border-color:rgba(55,213,255,.55); box-shadow:0 0 0 3px rgba(55,213,255,.09); }
.uplan-form-control:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #0a111e inset!important; -webkit-text-fill-color:#f2f6fb!important; }
.uplan-form-help{ margin-top:7px; color:#6f7e92; font-size:.74rem; line-height:1.5; }
.uplan-auth-submit{ width:100%; margin-top:4px; }
.uplan-auth-submit:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.uplan-auth-links{ display:flex; flex-wrap:wrap; gap:6px 13px; margin-top:20px; color:#718096; font-size:.78rem; }
.uplan-auth-links a{ color:#62dcfb; text-decoration:none; }
.uplan-auth-links a:hover{ color:#a4efff; }
.uplan-auth-divider{ height:1px; margin:24px 0; border:0; background:var(--uplan-border); }
.uplan-auth-footnote{ margin:0; color:#728197; font-size:.76rem; line-height:1.6; }
.uplan-auth-footnote a{ color:#61daf8; text-decoration:none; }
.uplan-auth-alert{ margin-bottom:18px; padding:12px 14px; border:1px solid var(--uplan-border); border-radius:12px; background:rgba(255,255,255,.035); color:#c5d0df; font-size:.8rem; }
.uplan-auth-alert.is-error{ border-color:rgba(255,107,125,.24); background:rgba(255,107,125,.08); color:#ffb4bd; }
.uplan-password-hint{ min-height:19px; margin-top:7px; font-size:.74rem; }
.uplan-auth-email{ display:inline-flex; max-width:100%; margin-top:5px; padding:6px 10px; overflow:hidden; border:1px solid var(--uplan-border); border-radius:999px; color:#bac7d8; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }

/* Client dashboard */
.uplan-dashboard{ padding:54px 0 90px; }
.uplan-dashboard-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:25px; }
.uplan-dashboard-head h1{ margin:8px 0 0; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.05em; }
.uplan-dashboard-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr); gap:20px; align-items:start; }
.uplan-dashboard-main,.uplan-dashboard-aside{ display:grid; gap:20px; min-width:0; }
.uplan-dashboard-card{ border:1px solid var(--uplan-border); border-radius:22px; background:linear-gradient(155deg,rgba(18,28,44,.9),rgba(9,15,26,.91)); box-shadow:0 18px 55px rgba(0,0,0,.13); }
.uplan-dashboard-card-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid var(--uplan-border); }
.uplan-dashboard-card-head h2{ margin:0; font-size:1rem; letter-spacing:-.015em; }
.uplan-dashboard-card-head p{ margin:4px 0 0; color:var(--uplan-muted); font-size:.76rem; }
.uplan-dashboard-head-action{ flex:0 0 auto; }
.uplan-dashboard-head-action svg{ flex:0 0 auto; }
.uplan-dashboard-card-body{ padding:24px; }
.uplan-status-card{ position:relative; overflow:hidden; padding:27px; }
.uplan-status-card:after{ content:""; position:absolute; right:-80px; top:-110px; width:260px; height:260px; border-radius:50%; background:rgba(55,213,255,.08); filter:blur(5px); pointer-events:none; }
.uplan-status-top{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.uplan-status-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(50,213,131,.1); color:#65dfa5; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.uplan-status-badge i{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.uplan-status-badge.is-expired{ background:rgba(255,107,125,.1); color:#ff8c9a; }
.uplan-status-plan{ margin:16px 0 4px; font-size:clamp(1.45rem,3vw,2.05rem); letter-spacing:-.04em; }
.uplan-status-expiry{ margin:0; color:var(--uplan-muted); font-size:.85rem; }
.uplan-status-expiry strong{ color:#dce5f1; }
.uplan-status-meta{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--uplan-border); }
.uplan-status-meta small,.uplan-status-meta strong{ display:block; }
.uplan-status-meta small{ color:#748399; font-size:.68rem; }
.uplan-status-meta strong{ margin-top:4px; color:#d9e3ef; font-size:.82rem; }
.uplan-status-hint{ display:block; margin-top:3px; color:#748399; font-size:.64rem; }
.uplan-status-traffic{ display:flex!important; flex-wrap:wrap; gap:10px; }
.uplan-status-traffic span{ white-space:nowrap; }
.uplan-empty-subscription{ padding:30px; text-align:center; }
.uplan-empty-subscription .uplan-auth-icon{ margin-bottom:16px; }
.uplan-empty-subscription h2{ margin:0 0 8px; font-size:1.3rem; }
.uplan-empty-subscription p{ max-width:430px; margin:0 auto 20px; color:var(--uplan-muted); font-size:.85rem; line-height:1.6; }
.uplan-profile-list{ display:grid; gap:13px; }
.uplan-profile-card{ padding:20px; border:1px solid var(--uplan-border); border-radius:18px; background:rgba(255,255,255,.023); }
.uplan-profile-card.is-inactive{ opacity:.72; }
.uplan-profile-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.uplan-profile-title{ display:flex; align-items:center; gap:12px; }
.uplan-profile-icon{ width:43px; height:43px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(55,213,255,.2); border-radius:13px; background:rgba(55,213,255,.07); color:#6fe2ff; }
.uplan-profile-title strong,.uplan-profile-title small{ display:block; }
.uplan-profile-title strong{ font-size:.9rem; }
.uplan-profile-title small{ margin-top:3px; color:var(--uplan-muted); font-size:.7rem; }
.uplan-device-title{ display:block; min-width:0; }
.uplan-device-label-row{ max-width:300px; display:flex; align-items:center; gap:4px; min-width:0; }
.uplan-device-label-input{
  width:100%;
  max-width:none;
  min-width:0;
  flex:1 1 auto;
  min-height:24px;
  padding:0 4px;
  border:1px solid transparent;
  border-radius:6px;
  outline:0;
  background:transparent;
  color:#f2f6fb;
  font-size:.9rem;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
}
.uplan-device-label-input::placeholder{ color:#f2f6fb; opacity:1; }
.uplan-device-label-input:hover{ border-color:rgba(148,163,184,.24); background:rgba(255,255,255,.035); }
.uplan-device-label-input:focus{ border-color:rgba(55,213,255,.52); background:rgba(8,14,24,.82); box-shadow:0 0 0 3px rgba(55,213,255,.1); }
.uplan-device-label-input.is-saving{ color:#9fb0c5; }
.uplan-device-label-edit{ width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:#718198; cursor:pointer; }
.uplan-device-label-edit:hover{ border-color:rgba(55,213,255,.28); background:rgba(55,213,255,.07); color:#72e2fb; }
.uplan-profile-content{ display:grid; grid-template-columns:164px minmax(0,1fr); gap:20px; align-items:center; }
.uplan-profile-qr{ width:164px; height:164px; display:grid; place-items:center; overflow:hidden; border:7px solid #fff; border-radius:14px; background:#fff; cursor:pointer; transition:box-shadow .16s ease,transform .16s ease; }
.uplan-profile-qr:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(55,213,255,.18); }
.uplan-profile-qr:focus-visible{ outline:2px solid #63dcfa; outline-offset:4px; }
.uplan-profile-qr svg,.uplan-profile-qr img{ width:100%; height:100%; display:block; }
.uplan-profile-qr-note{ width:164px; margin-top:7px; color:#68778d; font-size:.64rem; text-align:center; }
.uplan-profile-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; }
.uplan-profile-actions .uplan-btn{ min-height:40px; padding:8px 13px; font-size:.76rem; }
.uplan-delete-device-icon{ display:block; flex:0 0 auto; }
.uplan-delete-device-label{ display:none; }
.uplan-profile-content > .uplan-profile-meta{ grid-column:1 / -1; }
.uplan-profile-content{ grid-template-areas:"qr traffic" "qr binding" "qr actions" "qr activity"; align-items:start; }
.uplan-profile-content > .uplan-profile-qr-wrap{ grid-area:qr; align-self:start; }
.uplan-profile-content > .uplan-profile-device-actions{ grid-area:actions; align-self:start; }
.uplan-profile-content > .uplan-device-binding{ grid-area:binding; }
.uplan-profile-content > .uplan-profile-last-activity{ grid-area:activity; grid-column:1 / -1; text-align:center; }
.uplan-profile-content > .uplan-profile-traffic{ grid-area:traffic; margin-top:8px; }
.uplan-device-binding{ display:grid; gap:5px; margin-top:2px; color:#7f8ca0; }
.uplan-device-binding small{ min-width:0; overflow-wrap:anywhere; }
.uplan-device-binding code{ color:#cbd5e1; font:600 .68rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
.uplan-add-device-card{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:13px; border-style:dashed; background:linear-gradient(135deg,rgba(55,213,255,.055),rgba(117,103,255,.055)); }
.uplan-add-device-card .uplan-profile-head{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.uplan-add-device-card .uplan-profile-icon{ border-color:rgba(50,213,131,.25); background:rgba(50,213,131,.08); color:#6be3aa; }
.uplan-add-device-action{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.uplan-add-device-price{ color:#dfe8f5; font-size:.88rem; font-weight:850; white-space:nowrap; }
.uplan-dashboard-side-card{ padding:22px; }
.uplan-dashboard-side-icon{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:17px; border-radius:14px; background:rgba(117,103,255,.1); color:#a69eff; }
.uplan-dashboard-side-card h2{ margin:0 0 8px; font-size:1.03rem; }
.uplan-dashboard-side-card p{ margin:0 0 17px; color:var(--uplan-muted); font-size:.78rem; line-height:1.58; }
.uplan-dashboard-side-card .uplan-btn{ width:100%; min-height:42px; font-size:.78rem; }
.uplan-telegram-poster{ display:block; width:100%; height:auto; margin:0 0 17px; border:1px solid rgba(117,103,255,.26); border-radius:15px; background:#05070d; }
.uplan-app-list{ display:grid; gap:8px; }
.uplan-app-link{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:43px; padding:9px 11px; border:1px solid var(--uplan-border); border-radius:11px; background:transparent; color:#c8d2e0; cursor:pointer; font:inherit; font-size:.78rem; text-align:left; text-decoration:none; }
.uplan-app-link:hover{ border-color:rgba(55,213,255,.3); background:rgba(55,213,255,.05); color:#fff; }
.uplan-app-link span:first-child{ display:flex; align-items:center; gap:9px; }
.uplan-app-platform{ width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.045); font-size:.82rem; }
.uplan-app-install-steps{ display:grid; gap:12px; margin:0 0 22px; padding-left:22px; color:#aebbd0; font-size:.8rem; line-height:1.6; }
.uplan-app-install-steps strong{ color:#e8eef7; }
.uplan-app-install-downloads{ display:grid; gap:9px; }
.uplan-payment-table{ width:100%; border-collapse:collapse; color:#bec9d7; font-size:.76rem; }
.uplan-payment-table th{ padding:11px 10px; border-bottom:1px solid var(--uplan-border); color:#708096; font-size:.65rem; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
.uplan-payment-table td{ padding:13px 10px; border-bottom:1px solid rgba(148,163,184,.09); }
.uplan-payment-table tr:last-child td{ border-bottom:0; }
.uplan-payment-operation{ color:#8291a6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; }
.uplan-payment-bonus-positive{ color:#69db9b; }
.uplan-payment-bonus-negative{ color:#ff9aa7; }
.uplan-dashboard-modal{ border:1px solid var(--uplan-border-strong)!important; border-radius:20px!important; background:linear-gradient(155deg,#131e30,#080e19)!important; color:var(--uplan-text); box-shadow:0 28px 90px rgba(0,0,0,.5); }
  .uplan-qr-link-box{ padding:10px 12px; border:1px solid var(--uplan-border); border-radius:12px; background:rgba(255,255,255,.035); overflow-x:auto; }
  .uplan-qr-link-box code{ color:#9fb4cc; font-size:.72rem; word-break:break-all; white-space:pre-wrap; }
  .uplan-modal-qr{ width:164px; height:164px; margin:0 auto; display:grid; place-items:center; overflow:hidden; border:7px solid #fff; border-radius:14px; background:#fff; }
  .uplan-modal-qr svg,.uplan-modal-qr img{ width:100%; height:100%; display:block; }
.uplan-dashboard-modal .modal-header{ border-color:var(--uplan-border)!important; }
.uplan-location-options,.uplan-plan-options{ display:grid; gap:9px; }
.uplan-location-option,.uplan-plan-option{ width:100%; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 14px; border:1px solid var(--uplan-border); border-radius:12px; background:rgba(255,255,255,.035); color:#dce5f0; text-align:left; }
.uplan-location-option:hover,.uplan-plan-option:hover{ border-color:rgba(55,213,255,.35); background:rgba(55,213,255,.06); }
.uplan-location-option:disabled{ opacity:.5; }
.uplan-plan-option small{ display:block; margin-top:3px; color:var(--uplan-muted); font-size:.68rem; }
.uplan-plan-price-badge{ padding:6px 9px; border-radius:9px; background:rgba(55,213,255,.1); color:#74e3ff; font-weight:800; white-space:nowrap; }
.uplan-toast{ background:linear-gradient(135deg,#1ca368,#248956)!important; }

@media(max-width:991.98px){
  .uplan-dashboard-grid{ grid-template-columns:1fr; }
  .uplan-dashboard-aside{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:767.98px){
  .uplan-dashboard{ padding:38px 0 70px; }
  .uplan-dashboard-head{ align-items:flex-start; flex-direction:column; }
  .uplan-dashboard-card-head{ align-items:flex-start; flex-direction:column; }
  .uplan-dashboard-head-action{ display:none; }
  .uplan-status-top{ align-items:flex-start; flex-direction:column; }
  .uplan-status-top .uplan-btn{ width:100%; }
  .uplan-profile-content{ grid-template-columns:1fr; }
  .uplan-profile-content{ grid-template-areas:none; }
  .uplan-profile-content > .uplan-profile-qr-wrap,
  .uplan-profile-content > .uplan-profile-device-actions,
  .uplan-profile-content > .uplan-device-binding,
  .uplan-profile-content > .uplan-profile-last-activity,
  .uplan-profile-content > .uplan-profile-traffic{ grid-area:auto; }
  .uplan-profile-content > .uplan-profile-meta{ grid-column:auto; }
  .uplan-profile-content > .uplan-profile-last-activity{ text-align:left; }
  .uplan-profile-qr-wrap{ margin:0 auto; }
  .uplan-device-label-row{ max-width:100%; }
  .uplan-delete-device-icon{ display:none; }
  .uplan-delete-device-label{ display:inline; }
  .uplan-dashboard-aside{ grid-template-columns:1fr; }
}

@media(max-width:575.98px){
  .uplan-dashboard-card,.uplan-profile-card{ border-radius:18px; }
  .uplan-dashboard-card-head,.uplan-dashboard-card-body{ padding:20px; }
  .uplan-status-card{ padding:22px 20px; }
  .uplan-status-meta{ grid-template-columns:1fr 1fr; }
  .uplan-profile-head{ align-items:flex-start; flex-direction:column; }
  .uplan-profile-actions{ flex-direction:column; }
  .uplan-profile-actions .uplan-btn{ width:100%; }
  .uplan-add-device-card,.uplan-add-device-action{ align-items:stretch; flex-direction:column; }
  .uplan-add-device-action .uplan-btn{ width:100%; }
  .uplan-payment-table th:nth-child(5),.uplan-payment-table td:nth-child(5){ display:none; }
}

@media (max-width:991.98px){
  .uplan-navbar .navbar-collapse{ margin:10px -5px 0; padding:10px; border:1px solid var(--uplan-border); border-radius:16px; background:rgba(10,16,28,.98); box-shadow:0 22px 60px rgba(0,0,0,.32); }
  .uplan-nav-list{ align-items:stretch!important; }
  .uplan-nav-action{ margin:8px 0 0; }
  .uplan-nav-action .uplan-btn{ width:100%; }
  .uplan-hero-v2{ padding-top:68px; }
  .uplan-product-visual{ min-height:420px; margin-top:4px; }
  .uplan-section{ padding:82px 0; }
  .uplan-pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .uplan-plan-card{ min-height:405px; }
  .uplan-footer-grid{ grid-template-columns:2fr 1fr 1fr; }
  .uplan-footer-column:last-child{ grid-column:2; }
}

@media (max-width:767.98px){
  body.uplan-body{ padding-top:66px; }
  .uplan-navbar{ min-height:66px; }
  .uplan-brand-mark{ width:35px; height:35px; }
  .uplan-hero-v2{ min-height:auto; padding:58px 0 70px; }
  .uplan-hero-title{ font-size:clamp(2.75rem,15vw,4.35rem); }
  .uplan-hero-lead{ font-size:1rem; }
  .uplan-trust-row{ gap:11px 16px; }
  .uplan-platform-strip .container{ min-height:90px; align-items:flex-start; flex-direction:column; justify-content:center; gap:10px; }
  .uplan-platform-list span:not(:last-child):after{ display:none; }
  .uplan-section{ padding:68px 0; }
  .uplan-section-heading{ align-items:flex-start; flex-direction:column; gap:15px; margin-bottom:30px; }
  .uplan-location-grid,.uplan-steps-grid{ grid-template-columns:1fr; }
  .uplan-step-card{ min-height:230px; }
  .uplan-step-card h3{ margin-top:38px; }
  .uplan-benefit-grid{ grid-template-columns:1fr; }
  .uplan-benefit-grid article+article{ border-top:1px solid var(--uplan-border); border-left:0; }
  .uplan-support-banner{ align-items:flex-start; flex-direction:column; padding:30px; }
  .uplan-support-actions{ width:100%; justify-content:flex-start; }
  .uplan-support-actions .uplan-btn{ flex:1 1 190px; }
  .uplan-footer-grid{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .uplan-footer-main{ grid-column:1/-1; }
  .uplan-footer-column:last-child{ grid-column:auto; }
}

@media (max-width:575.98px){
  .uplan-body .container{ padding-left:18px; padding-right:18px; }
  .uplan-body .row.g-5{ --bs-gutter-x:1.5rem; }
  .uplan-modal{ padding:12px; }
  .uplan-modal-dialog{ padding:27px 20px 22px; border-radius:20px; }
  .uplan-modal-close{ top:12px; right:12px; }
  .uplan-start-option{ grid-template-columns:44px 1fr auto; gap:11px; padding:13px; }
  .uplan-start-option-icon{ width:44px; height:44px; }
  .uplan-hero-actions{ flex-direction:column; }
  .uplan-hero-actions .uplan-btn{ width:100%; }
  .uplan-product-visual{ min-height:350px; margin-top:0; }
  .uplan-product-orbit-one{ width:330px; height:330px; }
  .uplan-product-orbit-two{ width:260px; height:260px; }
  .uplan-connection-card{ padding:20px 16px; border-radius:20px; }
  .uplan-route-visual{ grid-template-columns:1fr 24px 54px 24px 1fr; margin:35px 0; }
  .uplan-route-icon{ width:44px; height:44px; border-radius:13px; }
  .uplan-route-shield{ width:54px; height:54px; border-radius:17px; }
  .uplan-pricing-grid{ grid-template-columns:1fr; }
  .uplan-plan-card{ min-height:0; }
  .uplan-location-card{ min-height:0; padding:23px 20px; gap:16px; }
  .uplan-location-flag{ width:58px; height:58px; border-radius:17px; font-size:1.8rem; }
  .uplan-footer-grid{ grid-template-columns:1fr 1fr; }
  .uplan-footer-bottom{ align-items:flex-start; flex-direction:column; }
  .uplan-scrolltop{ right:20px; bottom:78px; }
  .uplan-auth-section{ padding:42px 0 68px; }
  .uplan-auth-card{ border-radius:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*:before,*:after{ scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Support messenger */
.support-page{ min-height:calc(100vh - 76px); padding:48px 0 72px; background:var(--uplan-bg); }
.support-container{ width:min(100% - 36px,1040px); }
.support-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:25px; }
.support-page-head h1{ margin:8px 0 6px; color:var(--uplan-text); font-size:2.15rem; line-height:1.08; letter-spacing:0; }
.support-page-head p{ margin:0; color:var(--uplan-muted); font-size:.9rem; }
.support-tabs{ margin-bottom:16px; border-bottom-color:var(--uplan-border); }
.support-tabs .nav-link{ border:1px solid transparent; border-radius:7px 7px 0 0; color:var(--uplan-muted); font-size:.82rem; font-weight:800; }
.support-tabs .nav-link:hover{ border-color:transparent; color:var(--uplan-text); }
.support-tabs .nav-link.active{ border-color:var(--uplan-border) var(--uplan-border) var(--uplan-bg); background:var(--uplan-bg); color:var(--uplan-text); }
.support-tab-count{ display:inline-grid; min-width:20px; height:20px; margin-left:5px; place-items:center; padding:0 5px; border-radius:999px; background:rgba(55,213,255,.1); color:#70def7; font-size:.66rem; line-height:1; }
.support-tab-content>.tab-pane{ min-height:120px; }
.support-empty{ min-height:390px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:44px 22px; border:1px solid var(--uplan-border); border-radius:8px; background:rgba(255,255,255,.025); text-align:center; }
.support-empty-icon{ width:64px; height:64px; display:grid; place-items:center; border:1px solid rgba(55,213,255,.24); border-radius:8px; background:rgba(55,213,255,.07); color:#69ddf8; }
.support-empty h2{ margin:20px 0 8px; color:var(--uplan-text); font-size:1.25rem; letter-spacing:0; }
.support-empty p{ max-width:470px; margin:0 0 22px; color:var(--uplan-muted); font-size:.88rem; line-height:1.6; }
.support-thread-list{ overflow:hidden; border:1px solid var(--uplan-border); border-radius:8px; background:rgba(255,255,255,.02); }
.support-thread-row{ position:relative; min-height:88px; display:grid; grid-template-columns:9px minmax(0,1fr) 125px auto 20px; align-items:center; gap:15px; padding:17px 19px; border-bottom:1px solid var(--uplan-border); color:inherit; text-decoration:none; transition:background .15s ease; }
.support-thread-row:last-child{ border-bottom:0; }
.support-thread-row:hover{ background:rgba(55,213,255,.045); }
.support-thread-row.is-unread{ background:rgba(55,213,255,.035); }
.support-thread-state{ width:8px; height:8px; border-radius:50%; background:#728196; }
.support-thread-state.is-open,.support-thread-state.is-pending_support{ background:#ffbc57; box-shadow:0 0 10px rgba(255,188,87,.45); }
.support-thread-state.is-pending_client{ background:#58dda0; }
.support-thread-state.is-resolved{ background:#60a5fa; }
.support-thread-title,.support-thread-preview,.support-thread-meta span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-thread-title{ color:var(--uplan-text); font-size:.94rem; font-weight:800; }
.support-thread-preview{ margin-top:5px; color:var(--uplan-muted); font-size:.79rem; }
.support-thread-meta{ min-width:0; text-align:right; }
.support-thread-meta time{ display:block; color:#98a7bb; font-size:.72rem; font-weight:750; }
.support-thread-meta span{ margin-top:5px; color:#637187; font-size:.68rem; }
.support-unread-badge{ min-width:22px; height:22px; display:inline-grid; place-items:center; padding:0 6px; border-radius:999px; background:#ff657b; color:#fff; font-size:.67rem; font-weight:850; line-height:1; }
.support-notification-toast{ border:1px solid rgba(55,213,255,.25)!important; border-radius:7px!important; background:#102435!important; color:#edf8fb; box-shadow:0 20px 54px rgba(0,0,0,.42); }
.support-notification-toast .toast-body{ display:flex; min-width:0; flex-direction:column; color:inherit; text-decoration:none; }
.support-notification-toast .toast-body strong{ overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.support-notification-toast .toast-body span{ max-width:290px; margin-top:3px; overflow:hidden; color:#a5bdc7; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.uplan-support-floating{ position:fixed; right:24px; bottom:24px; z-index:1180; width:56px; height:56px; display:grid; place-items:center; border:1px solid rgba(55,213,255,.48); border-radius:50%; background:#102b3a; color:#72e2fb; box-shadow:0 16px 38px rgba(0,0,0,.4); transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }
.uplan-support-floating:hover{ transform:translateY(-2px); background:#14384a; color:#b5f2ff; box-shadow:0 20px 46px rgba(0,0,0,.46); }
.uplan-support-floating-badge{ position:absolute; top:-5px; right:-5px; min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px; border:2px solid #070b14; border-radius:999px; background:#ff657b; color:#fff; font-size:.64rem; font-weight:850; line-height:1; }
.uplan-support-floating-badge[hidden]{ display:none!important; }
.support-toast-container{ bottom:78px; }
.support-thread-arrow{ color:#66758a; }
.support-pagination{ margin-top:20px; }
.support-modal .modal-content{ border:1px solid var(--uplan-border-strong); border-radius:8px; background:#101927; color:var(--uplan-text); box-shadow:0 30px 90px rgba(0,0,0,.56); }
.support-modal .modal-header,.support-modal .modal-footer{ border-color:var(--uplan-border); padding:20px 22px; }
.support-modal .modal-body{ display:grid; gap:16px; padding:22px; }
.support-modal .modal-title{ margin-top:4px; font-size:1.25rem; letter-spacing:0; }
.support-rating-modal .modal-header{ justify-content:center; text-align:center; }
.support-rating-modal .modal-body{ justify-items:center; text-align:center; }
.support-rating-description{ margin:0; color:var(--uplan-muted); font-size:.86rem; }
.support-rating-stars{ display:flex; justify-content:center; gap:4px; }
.support-rating-star{ width:45px; height:45px; padding:0; border:0; background:none; color:#526277; cursor:pointer; font-size:2.25rem; line-height:1; transition:color .15s ease,transform .15s ease; }
.support-rating-star:hover,.support-rating-star:focus-visible,.support-rating-star.is-selected{ color:#ffc857; transform:translateY(-2px); }
.support-rating-star:focus-visible{ outline:2px solid rgba(55,213,255,.7); outline-offset:3px; border-radius:5px; }
.support-rating-submit{ min-width:150px; }
.support-rating-success{ color:#70e2ac; font-size:1rem; font-weight:750; line-height:1.55; }
.support-rating-modal .support-form-error{ width:100%; text-align:left; }
.support-field{ display:grid; gap:7px; }
.support-field>span{ color:#b8c4d4; font-size:.76rem; font-weight:750; }
.support-field input,.support-field select,.support-field textarea,.support-composer textarea{ width:100%; border:1px solid rgba(148,163,184,.26); border-radius:7px; outline:0; background:#090f1a; color:#eef3f9; font:inherit; }
.support-field input,.support-field select{ min-height:44px; padding:9px 11px; }
.support-field textarea{ padding:11px 12px; resize:vertical; }
.support-field input:focus,.support-field select:focus,.support-field textarea:focus,.support-composer textarea:focus{ border-color:rgba(55,213,255,.56); box-shadow:0 0 0 3px rgba(55,213,255,.08); }
.support-upload{ min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; padding:9px 12px; border:1px dashed rgba(148,163,184,.34); border-radius:7px; color:#bac7d7; cursor:pointer; font-size:.8rem; font-weight:750; }
.support-upload:hover{ border-color:rgba(55,213,255,.45); color:#72dff8; }
.support-upload input,.support-icon-btn input{ display:none; }
.support-file-summary{ min-width:0; overflow:hidden; color:#8392a7; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.support-form-error{ padding:10px 12px; border:1px solid rgba(255,101,123,.28); border-radius:7px; background:rgba(255,101,123,.08); color:#ffabb7; font-size:.78rem; }
.support-chat-page{ padding-top:34px; }
.support-chat-head{ min-height:64px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:13px; margin-bottom:16px; }
.support-back{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--uplan-border); border-radius:7px; color:#bdc8d7; }
.support-back:hover{ border-color:rgba(55,213,255,.4); color:#6edff9; }
.support-chat-title{ min-width:0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.support-chat-title>div{ min-width:0; }
.support-chat-title span:first-child{ color:#76859a; font-size:.67rem; font-weight:750; }
.support-chat-title h1{ margin:3px 0 0; overflow:hidden; color:var(--uplan-text); font-size:1.15rem; font-weight:850; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
.support-status{ flex:0 0 auto; padding:5px 8px; border-radius:5px; background:rgba(148,163,184,.1); color:#b9c4d2; font-size:.66rem; font-weight:800; }
.support-status.is-pending_support,.support-status.is-open{ background:rgba(255,188,87,.1); color:#ffd08b; }
.support-status.is-pending_client{ background:rgba(50,213,131,.1); color:#70e2ac; }
.support-status.is-resolved{ background:rgba(96,165,250,.1); color:#9bc5fb; }
.support-chat-shell{ overflow:hidden; border:1px solid var(--uplan-border); border-radius:8px; background:#0a111d; }
.support-message-list{ height:clamp(440px,calc(100vh - 300px),720px); min-height:440px; overflow-y:auto; padding:26px; scroll-behavior:smooth; }
.support-message{ width:min(78%,690px); margin:0 0 18px; transition:background .2s ease; }
.support-message.is-client{ margin-left:auto; }
.support-message.is-highlighted{ border-radius:7px; background:rgba(255,214,88,.08); }
.support-message-label{ margin:0 5px 6px; color:#708096; font-size:.65rem; font-weight:750; }
.support-message.is-client .support-message-label{ text-align:right; }
.support-message-bubble{ min-width:0; overflow:hidden; padding:12px 14px 9px; border:1px solid rgba(148,163,184,.16); border-radius:8px; background:#121c2b; color:#dce5ef; }
.support-message.is-client .support-message-bubble{ border-color:rgba(55,213,255,.22); background:#112636; }
.support-message-text{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:.86rem; line-height:1.55; }
.support-message-foot{ min-height:20px; display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:7px; }
.support-message-foot time{ color:#6e7d90; font-size:.62rem; }
.support-reply-btn{ padding:0; border:0; background:none; color:#78bcd0; cursor:pointer; font:inherit; font-size:.63rem; }
.support-quote{ width:100%; display:block; margin-bottom:9px; padding:7px 9px; border:0; border-left:2px solid #53d5f5; border-radius:0 5px 5px 0; background:rgba(55,213,255,.06); color:#9ba9bb; cursor:pointer; font:inherit; font-size:.7rem; line-height:1.4; text-align:left; }
.support-quote span{ display:block; margin-bottom:2px; color:#6edcf7; font-size:.62rem; font-weight:800; }
.support-image-grid{ max-width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:9px; overflow:hidden; }
.support-image-grid:has(a:only-child){ grid-template-columns:minmax(0,400px); }
.support-image-grid a{ min-width:0; max-width:100%; display:block; overflow:hidden; border-radius:6px; background:#070c14; }
.support-image-grid img{ width:100%; max-width:100%; height:clamp(140px,24vw,280px); display:block; object-fit:cover; }
.support-composer{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px; border-top:1px solid var(--uplan-border); background:#0d1624; }
.support-composer textarea{ min-height:46px; max-height:150px; padding:12px; resize:none; }
.support-composer-actions{ display:flex; align-items:flex-end; gap:8px; }
.support-icon-btn,.support-send-btn{ width:44px; height:44px; display:grid; flex:0 0 auto; place-items:center; border:1px solid var(--uplan-border); border-radius:7px; background:rgba(255,255,255,.035); color:#a8b6c8; cursor:pointer; }
.support-icon-btn:hover{ border-color:rgba(55,213,255,.4); color:#6addf8; }
.support-send-btn{ border-color:transparent; background:#37d5ff; color:#06131b; }
.support-reply-preview{ grid-column:1/-1; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:8px 11px; border-left:2px solid #37d5ff; background:rgba(55,213,255,.055); }
.support-reply-preview[hidden]{ display:none; }
.support-reply-preview span{ display:block; color:#6adcf8; font-size:.62rem; font-weight:800; }
.support-reply-preview p{ max-width:780px; margin:2px 0 0; overflow:hidden; color:#9aa9bc; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.support-reply-preview button{ border:0; background:none; color:#8291a5; font-size:1.25rem; }
.support-chat-closed{ padding:18px; border-top:1px solid var(--uplan-border); color:#8c9aad; font-size:.8rem; text-align:center; }

@media(max-width:767.98px){
  .support-page{ padding:30px 0 56px; }
  .support-page-head{ align-items:stretch; flex-direction:column; gap:18px; }
  .support-page-head .uplan-btn{ width:100%; }
  .support-thread-row{ grid-template-columns:8px minmax(0,1fr) auto; gap:11px; padding:15px; }
  .support-thread-meta,.support-thread-arrow{ display:none; }
  .support-chat-head{ grid-template-columns:40px minmax(0,1fr); }
  .support-chat-head>form{ grid-column:1/-1; }
  .support-chat-head>form .uplan-btn{ width:100%; }
  .support-chat-title{ align-items:flex-start; flex-direction:column; gap:7px; }
  .support-message-list{ height:calc(100vh - 360px); min-height:380px; padding:17px 12px; }
  .support-message{ width:91%; }
  .support-composer{ grid-template-columns:1fr; }
  .support-composer-actions{ justify-content:flex-end; }
  .support-file-summary{ margin-right:auto; }
  .uplan-support-floating{ right:16px; bottom:16px; width:52px; height:52px; }
  .support-toast-container{ right:0; bottom:70px; left:0; }
}