:root {
  --bg:      #1C1C1C;
  --card:    #2C2C2E;
  --divider: #3D3D3D;
  --muted:   #9D9D9D;
  --text:    #FFFFFF;
  --blue:    #1E94F8;
  --accent:  #007AFF;
  --orange:  #FD9400;
  --bar-bg:  #F4F4F7;
  --green:   #34C759;
  --red:     #FF3B30;
  --s: min(max(calc(100vw / 393), 0.82px), 1.18px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

html,
body {
  background: #FFFFFF;
  color: var(--text);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body.in-telegram {
  background: var(--bg);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

.screen {
  width: 100%;
  max-width: calc(463 * var(--s));
  margin: 0 auto;
  position: relative;
}

.screen[hidden] {
  display: none;
}

.main {
  padding-top:    calc(20 * var(--s));
  padding-bottom: calc(20 * var(--s));
}

.logo {
  display: flex;
  justify-content: center;
  padding: 0 calc(20 * var(--s));
  margin-top:    calc(-4 * var(--s));
  margin-bottom: calc(8 * var(--s));
}

.logo-img {
  width: calc(176 * var(--s));
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

.logo-modal {
  margin-top:    calc(-4 * var(--s));
  margin-bottom: calc(8 * var(--s));
}

.logo-modal .logo-img {
  width: calc(176 * var(--s));
}

.row {
  display: flex;
  gap: calc(9 * var(--s));
  padding: 0 calc(16 * var(--s));
  margin-top: calc(10 * var(--s));
}

.pill {
  flex: 1;
  height: calc(51 * var(--s));
  background: var(--card);
  border-radius: calc(20 * var(--s));
  display: flex;
  align-items: center;
  padding: calc(8 * var(--s));
  gap: calc(10 * var(--s));
  overflow: hidden;
}

.ico {
  width: calc(35 * var(--s));
  height: calc(35 * var(--s));
  border-radius: calc(8 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ico.blue   { background: var(--blue); }
.ico.orange { background: var(--orange); }

.ico img {
  width: calc(26 * var(--s));
  height: calc(26 * var(--s));
  display: block;
  pointer-events: none;
}

.ico.blue img {
  width:  calc(33 * var(--s));
  height: calc(33 * var(--s));
}

.ico.orange img {
  width:  calc(22 * var(--s));
  height: calc(19 * var(--s));
}

.tx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: calc(1 * var(--s));
}

.tx .t {
  font-size:   calc(15 * var(--s));
  font-weight: 700;
  color: var(--muted);
  line-height: 1.15;
  text-align: left;
}

.tx .b {
  font-size:   calc(12 * var(--s));
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  text-align: left;
}

.traffic {
  margin:  calc(11 * var(--s)) calc(16 * var(--s)) 0;
  background: var(--card);
  border-radius: calc(20 * var(--s));
  padding: calc(13 * var(--s)) calc(16 * var(--s)) calc(16 * var(--s));
}

.traffic .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(14 * var(--s));
  gap: calc(16 * var(--s));
}

.col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.label {
  font-size:   calc(16 * var(--s));
  font-weight: 600;
  color: var(--muted);
  margin-bottom: calc(2 * var(--s));
}

.value {
  font-size:   calc(24 * var(--s));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.value .sep   { color: var(--muted); margin: 0 calc(4 * var(--s)); }
.value .total { color: var(--muted); }

.value .unit {
  font-size:   calc(15 * var(--s));
  font-weight: 600;
  color: var(--muted);
  margin-left: calc(4 * var(--s));
}

.bar {
  height: calc(5 * var(--s));
  background: var(--bar-bg);
  border-radius: calc(4 * var(--s));
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: calc(4 * var(--s));
  transition: width .4s ease;
  width: 0;
}

.actions {
  display: flex;
  gap: calc(7 * var(--s));
  padding: 0 calc(16 * var(--s));
  margin-top: calc(11 * var(--s));
}

.act {
  flex: 1;
  height: calc(57 * var(--s));
  background: var(--card);
  border-radius: calc(20 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--s));
}

.act img {
  width:  calc(22 * var(--s));
  height: calc(22 * var(--s));
  display: block;
  pointer-events: none;
}

.act:first-child img {
  width:  calc(26 * var(--s));
  height: calc(26 * var(--s));
}

.act span {
  font-size:   calc(10 * var(--s));
  font-weight: 600;
}

.section-title {
  padding: calc(20 * var(--s)) calc(16 * var(--s)) calc(7 * var(--s));
  font-size:   calc(12 * var(--s));
  font-weight: 800;
  color: var(--muted);
}

.conn {
  margin: 0 calc(16 * var(--s));
  background: var(--card);
  border-radius: calc(20 * var(--s));
  position: relative;
}

.conn .steps {
  position: absolute;
  left:   calc(15 * var(--s));
  top:    calc(14 * var(--s));
  bottom: calc(14 * var(--s));
  width:  calc(16 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conn .dot {
  width:  calc(16 * var(--s));
  height: calc(16 * var(--s));
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.conn .dot.empty { background: #F6F6FA; }

.conn .line {
  flex: 1;
  width: calc(3 * var(--s));
  background: var(--accent);
  min-height: calc(20 * var(--s));
}

.conn .line.muted { background: #F6F6FA; }

.conn .items {
  padding-left: calc(42 * var(--s));
}

.conn .item {
  font-size:   calc(14 * var(--s));
  font-weight: 600;
  height: calc(41 * var(--s));
  display: flex;
  align-items: center;
  padding-right: calc(16 * var(--s));
}

.conn .item + .item {
  border-top: .5px solid var(--divider);
}

.conn .item.muted { color: var(--muted); }

.links {
  margin: calc(10 * var(--s)) calc(16 * var(--s)) 0;
  background: var(--card);
  border-radius: calc(20 * var(--s));
  padding: 0 calc(14 * var(--s));
}

.link {
  height: calc(50 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  width: 100%;
  color: #fff;
}

.link + .link {
  border-top: .5px solid var(--divider);
}

.lico {
  width:  calc(29 * var(--s));
  height: calc(29 * var(--s));
  border-radius: calc(6 * var(--s));
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lico img {
  width:  calc(15 * var(--s));
  height: calc(15 * var(--s));
  display: block;
  pointer-events: none;
}

.lbl {
  flex: 1;
  font-size:   calc(14 * var(--s));
  font-weight: 600;
  text-align: left;
}

.chev {
  color: var(--muted);
  font-size: calc(16 * var(--s));
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--vh, 100vh);
  min-height: 0;
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(calc(20 * var(--s)), env(safe-area-inset-top))
    calc(32 * var(--s))
    max(calc(16 * var(--s)), env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  animation: fadeIn .2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-content {
  width: 100%;
  max-width: calc(340 * var(--s));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#screenPromo .modal-content  { padding-top: calc(60 * var(--s)); }
#screenLink  .modal-content  { padding-top: 0; }
#screenLink  .duck-link      { margin-bottom: calc(8 * var(--s)); }
#screenLink  .modal-title    { margin-bottom: calc(6 * var(--s)); }
#screenLink  .modal-subtitle { margin-bottom: calc(16 * var(--s)); }
#screenReferral .modal-content { padding-top: calc(30 * var(--s)); }

.duck {
  width:  calc(140 * var(--s));
  height: calc(140 * var(--s));
  margin-bottom: calc(14 * var(--s));
}

.duck-ref  { width: calc(160 * var(--s)); height: calc(130 * var(--s)); }
.duck-link { width: calc(160 * var(--s)); height: calc(140 * var(--s)); }

.modal-title {
  font-size:   calc(24 * var(--s));
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(8 * var(--s));
  line-height: 1.2;
}

.modal-subtitle {
  font-size:   calc(14 * var(--s));
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: calc(22 * var(--s));
}

.modal-subtitle .green {
  color: var(--green);
  font-weight: 700;
}

.input {
  width: 100%;
  height: calc(48 * var(--s));
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: calc(20 * var(--s));
  padding: 0 calc(20 * var(--s));
  color: #fff;
  font-size:   calc(16 * var(--s));
  font-weight: 600;
  font-family: inherit;
  outline: none;
  text-align: left;
  margin-bottom: calc(12 * var(--s));
  transition: border-color .15s ease;
}

.input::placeholder {
  color: var(--muted);
  font-weight: 600;
}

.input:focus { border-color: var(--accent); }
.input.error { border-color: var(--red); margin-bottom: calc(4 * var(--s)); }

.input::-ms-reveal,
.input::-ms-clear,
.input::-webkit-credentials-auto-fill-button,
.input::-webkit-strong-password-auto-fill-button,
.input::-webkit-contacts-auto-fill-button,
.input::-webkit-caps-lock-indicator {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.input-error {
  display: none;
  width: 100%;
  font-size:   calc(12 * var(--s));
  font-weight: 500;
  color: var(--red);
  text-align: left;
  padding: 0 calc(20 * var(--s));
  margin-bottom: calc(8 * var(--s));
}

.input-error.show { display: block; }

.btn-primary {
  width: 100%;
  height: calc(54 * var(--s));
  background: var(--accent);
  border-radius: calc(20 * var(--s));
  color: #fff;
  font-size:   calc(18 * var(--s));
  font-weight: 700;
  font-family: inherit;
  transition: opacity .15s ease;
  margin-top: calc(4 * var(--s));
}

.btn-primary:active   { opacity: .7; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.buy-content {
  padding-top: 0;
  max-width: calc(360 * var(--s));
}

#screenBuy { padding-top: calc(20 * var(--s)); }

.tabs {
  display: flex;
  background: var(--card);
  border-radius: calc(16 * var(--s));
  padding: calc(4 * var(--s));
  margin-bottom: calc(18 * var(--s));
  width: calc(220 * var(--s));
  align-self: center;
  position: relative;
}

.tab-pill {
  position: absolute;
  top:  calc(4 * var(--s));
  left: calc(4 * var(--s));
  width:  calc(50% - calc(4 * var(--s)));
  height: calc(100% - calc(8 * var(--s)));
  background: #4A4A4C;
  border-radius: calc(12 * var(--s));
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 0;
}

.tabs.premium .tab-pill {
  transform: translateX(100%);
}

.tab {
  flex: 1;
  height: calc(32 * var(--s));
  border-radius: calc(12 * var(--s));
  font-size:   calc(14 * var(--s));
  font-weight: 700;
  color: var(--muted);
  transition: color .2s ease;
  position: relative;
  z-index: 1;
}

.tab.active { color: #fff; }

.plans {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--s));
  margin-bottom: calc(16 * var(--s));
}

.plan {
  width: 100%;
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: calc(20 * var(--s));
  padding: calc(12 * var(--s)) calc(18 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  transition: border-color .15s ease;
}

.plan.active { border-color: var(--accent); }

.plan-radio {
  width:  calc(18 * var(--s));
  height: calc(18 * var(--s));
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  flex-shrink: 0;
  position: relative;
}

.plan.active .plan-radio {
  border-color: var(--accent);
}

.plan.active .plan-radio::after {
  content: '';
  position: absolute;
  inset: calc(3 * var(--s));
  border-radius: 50%;
  background: var(--accent);
}

.plan-info {
  flex: 1;
  text-align: left;
}

.plan-name {
  font-size:   calc(14 * var(--s));
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.plan-monthly {
  font-size:   calc(11 * var(--s));
  font-weight: 500;
  color: var(--muted);
  margin-top: calc(2 * var(--s));
}

.plan-price {
  font-size:   calc(16 * var(--s));
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.total-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(14 * var(--s));
  padding: 0 calc(4 * var(--s));
}

.total-label  { font-size: calc(18 * var(--s)); font-weight: 700; color: var(--muted); }
.total-amount { font-size: calc(22 * var(--s)); font-weight: 700; color: #fff; }

.ref-content { padding-top: calc(20 * var(--s)); }

.copy-row {
  width: 100%;
  height: calc(44 * var(--s));
  background: var(--card);
  border-radius: calc(16 * var(--s));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(16 * var(--s));
  margin-bottom: calc(22 * var(--s));
  cursor: pointer;
  transition: background .15s ease;
}

.copy-row:active { background: #3A3A3C; }

.copy-text {
  font-size:   calc(14 * var(--s));
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
  margin-right: calc(12 * var(--s));
}

.copy-icon {
  width:  calc(16 * var(--s));
  height: calc(18 * var(--s));
  pointer-events: none;
  flex-shrink: 0;
}

.ref-section-title {
  width: 100%;
  font-size:   calc(12 * var(--s));
  font-weight: 800;
  color: var(--muted);
  text-align: left;
  margin-bottom: calc(8 * var(--s));
}

.ref-steps {
  width: 100%;
  background: var(--card);
  border-radius: calc(20 * var(--s));
  padding: calc(4 * var(--s)) calc(16 * var(--s));
}

.ref-step {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  height: calc(44 * var(--s));
  font-size:   calc(14 * var(--s));
  font-weight: 600;
  color: #fff;
  text-align: left;
}

.ref-step + .ref-step { border-top: .5px solid var(--divider); }

.ref-step .green {
  color: var(--green);
  font-weight: 700;
}

.ref-num {
  width:  calc(22 * var(--s));
  height: calc(22 * var(--s));
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:   calc(12 * var(--s));
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}