:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  --ink: #0a0e18;
  --muted: #5a6a82;
  --page: #eef2f8;
  --surface: #ffffff;
  --soft: #dce4f0;
  --line: #c0cce0;
  --accent: #2f7df6;
  --success: #159a68;
  --warning: #d89a16;
  --danger: #d84a4a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background: var(--page);
}

body {
  width: 372px;
  margin: 0;
  color: var(--ink);
}

button,
textarea,
input {
  font: inherit;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 246, 0.2);
}

.app {
  min-height: 536px;
  max-height: 600px;
  padding: 0 20px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--page);
}

.top {
  min-height: 66px;
  margin: 0 -20px 16px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
}

.brand-logo {
  width: 145px;
  height: 36px;
  object-fit: contain;
  object-position: left center;
}

.status-pill {
  min-width: 108px;
  min-height: 32px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #273246;
  border-radius: 999px;
  background: #18202e;
  color: #b8c4d6;
  font-size: 10px;
  font-weight: 700;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #7888a0;
}

.status-dot.connected {
  background: #3ed4a4;
  box-shadow: 0 0 0 3px rgba(62, 212, 164, 0.16);
}

.connection {
  margin-bottom: 14px;
}

.server-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(31, 48, 73, 0.08);
}

.server-list {
  padding: 5px;
}

.server-option {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px 34px;
  align-items: center;
  gap: 5px;
  border-radius: 11px;
  transition: background 150ms ease;
}

.server-option + .server-option {
  margin-top: 2px;
}

.server-option:hover {
  background: #f3f6fb;
}

.server-option.selected {
  background: #eaf2ff;
}

.server-option.selected::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.server-option.locked {
  background: #f7f8fb;
}

.server-option.locked .server-option-name {
  filter: blur(4px);
  opacity: 0.58;
  user-select: none;
}

.server-option.locked .server-select {
  cursor: pointer;
}

.server-option.locked .ping-metric {
  opacity: 1;
}

.server-option.locked .ping-bars {
  opacity: 0.35;
}

.server-option.locked .ping-value {
  min-width: 46px;
  color: currentColor;
}

.ping-lock {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #17191d;
}

.ping-lock svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.server-select {
  min-width: 0;
  height: 58px;
  padding: 7px 5px 7px 7px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.server-select:disabled {
  cursor: wait;
  opacity: 0.65;
}

.server-option-flag {
  width: 40px;
  height: 40px;
  border: 1px solid #d6deea;
  border-radius: 11px;
}

.server-option-copy {
  position: relative;
  min-width: 0;
}

.subscription-required {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid rgba(23, 25, 29, 0.1);
  border-radius: 999px;
  background: rgba(23, 25, 29, 0.94);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(23, 25, 29, 0.18);
}

.server-option-name,
.server-option-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-option-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.server-option-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.ping-metric {
  width: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--ink);
}

.ping-value {
  min-width: 48px;
  color: currentColor;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.ping-bars {
  height: 12px;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.ping-bars i {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: #b7c3d3;
}

.ping-bars i:nth-child(1) { height: 4px; }
.ping-bars i:nth-child(2) { height: 8px; }
.ping-bars i:nth-child(3) { height: 12px; }

.ping-metric.good { color: var(--success); }
.ping-metric.medium { color: var(--warning); }
.ping-metric.bad { color: var(--danger); }
.ping-metric.good .ping-bars i,
.ping-metric.medium .ping-bars i,
.ping-metric.bad .ping-bars i { background: currentColor; }
.ping-metric.failed,
.ping-metric.none { color: var(--ink); }
.ping-metric.pending { color: var(--muted); }
.ping-metric.pending .ping-bars i { animation: pingBars 700ms ease-in-out infinite alternate; }
.ping-metric.pending .ping-bars i:nth-child(2) { animation-delay: 120ms; }
.ping-metric.pending .ping-bars i:nth-child(3) { animation-delay: 240ms; }

.ping-action {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8d3e3;
  border-radius: 10px;
  background: var(--page);
  color: #000000;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ping-action:hover {
  border-color: #91a9ca;
  background: #e3ebf7;
}

.ping-action:active {
  transform: translateY(1px);
}

.ping-action:disabled {
  cursor: wait;
  opacity: 0.58;
}

.ping-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ping-action.pending svg {
  animation: pingPulse 700ms ease-in-out infinite alternate;
}

.connect {
  width: 100%;
  height: 52px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(10, 14, 24, 0.18);
  cursor: pointer;
  font-size: 15px;
  font-weight: 750;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.connect:hover {
  background: #172238;
}

.connect:active {
  transform: translateY(1px);
}

.connect:disabled {
  cursor: wait;
  opacity: 0.65;
}

.connect.connected {
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(47, 125, 246, 0.25);
}

.power-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status {
  min-height: 15px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-align: center;
}

.status[hidden] {
  display: none;
}

.unlock-card {
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid #b9c9df;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #edf4ff);
  box-shadow: 0 6px 16px rgba(31, 48, 73, 0.07);
}

.unlock-card.unlocked {
  border-color: #b9c9df;
  background: linear-gradient(145deg, #ffffff, #edf4ff);
}

.unlock-copy {
  display: grid;
  gap: 3px;
}

.unlock-copy strong {
  font-size: 12px;
}

.unlock-copy span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.unlock-form {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.unlock-form input {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #c4d0e1;
  border-radius: 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 10px;
}

.unlock-form button {
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.unlock-form button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.unlock-status {
  min-height: 12px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.unlock-status.success { color: var(--success); }
.unlock-status.error { color: var(--danger); }

.logout-button {
  width: 100%;
  height: 36px;
  margin-top: 9px;
  border: 1px solid #d7a7a7;
  border-radius: 10px;
  background: #ffffff;
  color: var(--danger);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.logout-button:hover {
  border-color: var(--danger);
  background: #fff1f1;
}

.logout-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.settings {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(31, 48, 73, 0.06);
}

.settings-toggle {
  width: 100%;
  min-height: 50px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.settings-toggle:hover {
  background: #f5f7fb;
}

.settings-toggle-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 760;
}

.settings-toggle-title svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.settings.open .settings-chevron {
  transform: rotate(180deg);
}

.settings-body {
  display: none;
}

.settings.open .settings-body {
  display: block;
}

.settings-inner {
  padding: 13px;
  display: grid;
  gap: 13px;
  border-top: 1px solid #d6deea;
}

.row,
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
}

.setting-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.setting-label label {
  cursor: pointer;
}

.info-button {
  width: 21px;
  height: 21px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: #dce9fc;
  color: var(--accent);
  cursor: pointer;
}

.info-button:hover,
.info-button[aria-expanded="true"] {
  background: var(--accent);
  color: #ffffff;
}

.info-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.webrtc-info {
  display: none;
  padding: 10px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: #eaf2ff;
  color: #40516a;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.webrtc-info.visible {
  display: block;
}

.segmented {
  width: 140px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border: 1px solid #ccd6e5;
  border-radius: 12px;
  background: var(--soft);
}

.segmented button {
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.segmented button.active {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 2px 7px rgba(10, 14, 24, 0.15);
}

.sites-panel {
  display: none;
}

.sites-panel.visible {
  display: grid;
  gap: 10px;
}

.preset-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.preset-button {
  min-width: 0;
  min-height: 70px;
  padding: 7px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #ccd6e5;
  border-radius: 12px;
  background: var(--page);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.preset-button:hover {
  border-color: #8ca4c5;
  color: var(--ink);
}

.preset-button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
}

.preset-icon {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #dce9fc;
  color: var(--accent);
}

.preset-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preset-icon .icon-dot {
  fill: currentColor;
  stroke: none;
}

.preset-button.active .preset-icon {
  background: var(--accent);
  color: #ffffff;
}

.sites {
  width: 100%;
  min-height: 68px;
  padding: 10px 11px;
  display: block;
  resize: none;
  border: 1px solid #ccd6e5;
  border-radius: 11px;
  background: var(--page);
  color: var(--ink);
  outline: none;
  font-size: 11px;
  line-height: 1.4;
}

.sites:focus {
  border-color: var(--accent);
}

.toggle input {
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  appearance: none;
  border: 1px solid #aebcd0;
  border-radius: 999px;
  background: #d5deeb;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(10, 14, 24, 0.24);
  transition: transform 150ms ease;
}

.toggle input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.toggle input:checked::after {
  transform: translateX(18px);
}

.telegram {
  min-height: 66px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(31, 48, 73, 0.08);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.telegram:hover {
  border-color: #8ca4c5;
  transform: translateY(-1px);
}

.telegram-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #dce9fc;
  color: var(--accent);
}

.telegram-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.telegram strong,
.telegram small {
  display: block;
}

.telegram strong {
  font-size: 13px;
  font-weight: 750;
}

.telegram small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.telegram-arrow {
  width: 28px;
  height: 28px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--page);
  color: var(--muted);
}

.telegram-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes pingBars {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@keyframes pingPulse {
  from { opacity: 0.4; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Material-inspired visual refresh: one quiet surface, thin outlines, no card shadows. */
:root {
  --ink: #17181c;
  --muted: #74777f;
  --page: #ffffff;
  --surface: #ffffff;
  --soft: #f4f5f7;
  --line: #e2e3e7;
  --accent: #2864dc;
  --success: #16865f;
  --warning: #ad7000;
  --danger: #c83f49;
}

html,
body,
.app {
  background: #ffffff;
}

body {
  width: 388px;
}

.app {
  min-height: 540px;
  max-height: 610px;
  padding: 0 16px 18px;
}

.top {
  min-height: 70px;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.brand-logo {
  width: 152px;
  height: 34px;
  filter: invert(1);
}

.status-pill {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid #dedfe3;
  border-radius: 10px;
  background: #ffffff;
  color: #3f4249;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(23, 24, 28, 0.04);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.status-pill.connected {
  color: #17181c;
  border-color: #d7dedb;
  background: #fcfdfd;
}

.status-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.connection-time {
  color: #74777f;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.connection-time[hidden] {
  display: none;
}

.status-dot {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  z-index: 0;
  border: 2px solid rgba(218, 54, 51, 0.2);
  background: transparent;
  box-shadow: none;
}

.status-dot::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #da3633;
}

.status-dot.connected {
  border-color: rgba(22, 134, 95, 0.2);
  background: transparent;
  box-shadow: none;
}

.status-dot.connected::before {
  background: var(--success);
}

.status-dot.connected::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--success);
  border-right-color: rgba(22, 134, 95, 0.45);
  animation: connectionStatusOrbit 1.8s linear infinite;
}

@keyframes connectionStatusOrbit {
  to { transform: rotate(360deg); }
}

.connection {
  margin-bottom: 14px;
}

.server-panel,
.unlock-card,
.settings,
.telegram {
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

.server-panel {
  border-radius: 20px;
}

.server-list {
  padding: 5px 7px 7px;
}

.server-option {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) 67px 36px;
  gap: 4px;
  border-radius: 14px;
  background: transparent;
}

.server-option + .server-option {
  margin-top: 12px;
  border-top: 1px solid #eeeeef;
  border-radius: 0;
}

.server-option:hover,
.server-option.locked,
.server-option.selected {
  background: transparent;
}

.server-option.selected {
  border-radius: 14px;
  background: #f4f4f5;
  box-shadow: inset 0 0 0 1px #dedee1;
}

.server-option.selected:hover {
  background: #f0f0f1;
}

.server-option.selected .server-option-name {
  font-weight: 800;
}

.server-option.selected::before {
  top: 14px;
  bottom: 14px;
  left: -7px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #17191d;
}

.server-select {
  height: 62px;
  padding: 7px 4px 7px 5px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  border-radius: 13px;
}

.server-option-flag {
  width: 40px;
  height: 40px;
  border-color: var(--line);
  border-radius: 12px;
}

.server-option-name {
  font-size: 13px;
  font-weight: 730;
}

.server-option-meta {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 570;
}

.server-option.locked .server-option-name {
  filter: blur(4px);
  opacity: 0.52;
}

.ping-metric {
  width: 67px;
  gap: 5px;
}

.ping-value {
  min-width: 50px;
  font-size: 10px;
  font-weight: 720;
}

.ping-action {
  width: 34px;
  height: 34px;
  border-color: var(--line);
  border-radius: 12px;
  background: transparent;
  color: #000000;
}

.ping-action:hover {
  border-color: #b9bbc1;
  background: transparent;
}

.ping-action svg {
  width: 18px;
  height: 18px;
}

.connect {
  height: 52px;
  margin-top: 12px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}

.connect:hover {
  background: #292b30;
}

.connect.connected {
  background: var(--accent);
  box-shadow: none;
}

.status {
  margin-top: 8px;
  font-weight: 570;
}

.traffic-stats {
  min-height: 58px;
  margin-top: 12px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: transparent;
}

.traffic-stats[hidden] {
  display: none;
}

.traffic-metric {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.traffic-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
}

.traffic-label svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.traffic-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-divider {
  width: 1px;
  height: 30px;
  background: var(--line);
}

.unlock-card {
  padding: 15px;
  border-radius: 18px;
}

.unlock-card.unlocked {
  border-color: #c8d3e3;
  background: transparent;
}

.unlock-copy {
  gap: 4px;
}

.unlock-copy strong {
  font-size: 12.5px;
  font-weight: 720;
}

.unlock-copy span {
  font-size: 9.5px;
  font-weight: 570;
}

.unlock-copy a {
  color: var(--ink);
  font-weight: 720;
  text-decoration-color: #aeb0b5;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.unlock-copy a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.unlock-form {
  margin-top: 12px;
  gap: 8px;
}

.unlock-form input {
  height: 40px;
  padding: 0 12px;
  border-color: var(--line);
  border-radius: 12px;
  font-size: 10px;
}

.unlock-form button {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--ink);
  font-weight: 720;
}

.logout-button {
  height: 38px;
  border-color: #e6c7ca;
  border-radius: 12px;
  background: transparent;
}

.logout-button:hover {
  background: transparent;
}

.settings {
  border-radius: 18px;
}

.settings-toggle {
  min-height: 52px;
  padding: 0 15px;
}

.settings-toggle:hover {
  background: transparent;
}

.settings-toggle-title {
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.settings-toggle-title svg,
.settings-chevron {
  stroke: #000000;
}

.settings-inner {
  padding: 15px;
  gap: 14px;
  border-top-color: var(--line);
}

.row,
.toggle {
  font-weight: 630;
}

.info-button {
  border: 1px solid var(--line);
  background: transparent;
  color: #000000;
}

.info-button:hover,
.info-button[aria-expanded="true"] {
  border-color: #b9bbc1;
  background: transparent;
  color: #000000;
}

.webrtc-info {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: transparent;
  color: #555860;
  font-weight: 520;
}

.segmented {
  width: 142px;
  padding: 3px;
  border-color: var(--line);
  border-radius: 13px;
  background: transparent;
}

.segmented button {
  border-radius: 10px;
}

.segmented button.active {
  background: var(--ink);
  box-shadow: none;
}

.preset-list {
  gap: 8px;
}

.preset-button {
  min-height: 72px;
  border-color: var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 630;
}

.preset-button:hover {
  border-color: #b9bbc1;
}

.preset-button.active {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.preset-icon,
.preset-button.active .preset-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000000;
}

.preset-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.sites {
  border-color: var(--line);
  border-radius: 13px;
  background: transparent;
}

.toggle input {
  border-color: #bfc1c7;
  background: #d9dade;
}

.toggle input::after {
  box-shadow: none;
}

.toggle input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.telegram {
  min-height: 68px;
  padding: 11px 14px;
  border-radius: 18px;
  transition: border-color 160ms ease;
}

.telegram:hover {
  border-color: #b9bbc1;
  transform: none;
}

.telegram-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: #000000;
}

.telegram-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.telegram strong {
  font-size: 12.5px;
  font-weight: 710;
}

.telegram small {
  color: var(--muted);
  font-weight: 560;
}

.telegram-arrow {
  background: transparent;
  color: #000000;
}

/* Connection motion and country atmosphere. */
.app {
  position: relative;
  isolation: isolate;
}

.app > :not(.country-backdrop) {
  position: relative;
  z-index: 1;
}

.country-backdrop {
  position: fixed;
  top: 70px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms ease, filter 520ms ease, transform 560ms cubic-bezier(0.4, 0, 0.7, 0.25);
}

.country-backdrop.active {
  opacity: 1;
}

.country-backdrop.leaving {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(150px) scale(0.98);
}

.country-emoji {
  position: absolute;
  bottom: -58px;
  left: 6%;
  font-size: 28px;
  line-height: 1;
  opacity: 0;
  filter: saturate(1.08) drop-shadow(0 4px 7px rgba(23, 25, 29, 0.08));
  animation: countryFloat 9.8s linear infinite;
}

.country-emoji:nth-child(2) { left: 17%; font-size: 22px; animation-delay: -3.4s; animation-duration: 8.6s; }
.country-emoji:nth-child(3) { left: 29%; font-size: 32px; animation-delay: -6.8s; animation-duration: 11.2s; }
.country-emoji:nth-child(4) { left: 41%; font-size: 24px; animation-delay: -1.9s; animation-duration: 9.2s; }
.country-emoji:nth-child(5) { left: 53%; font-size: 29px; animation-delay: -5.2s; animation-duration: 10.7s; }
.country-emoji:nth-child(6) { left: 66%; font-size: 21px; animation-delay: -7.7s; animation-duration: 8.9s; }
.country-emoji:nth-child(7) { left: 78%; font-size: 31px; animation-delay: -2.8s; animation-duration: 11.5s; }
.country-emoji:nth-child(8) { left: 90%; font-size: 23px; animation-delay: -6.1s; animation-duration: 9.5s; }
.country-emoji:nth-child(9) { left: 11%; font-size: 20px; animation-delay: -8.4s; animation-duration: 12.1s; }
.country-emoji:nth-child(10) { left: 36%; font-size: 27px; animation-delay: -4.3s; animation-duration: 12.6s; }
.country-emoji:nth-child(11) { left: 61%; font-size: 23px; animation-delay: -9.2s; animation-duration: 11.8s; }
.country-emoji:nth-child(12) { left: 84%; font-size: 26px; animation-delay: -5.9s; animation-duration: 13.2s; }

.connect {
  position: relative;
  overflow: hidden;
}

.connect.transitioning {
  opacity: 1;
  cursor: wait;
  transform: scale(0.985);
}

.connect.transitioning::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: connectShimmer 900ms ease-in-out infinite;
}

.connect.transitioning .power-icon {
  animation: powerConnect 760ms ease-in-out infinite;
}

.is-connecting .connect {
  background: var(--accent);
}

.is-disconnecting .connect {
  background: #34363b;
}

.traffic-stats.revealing {
  transform-origin: top center;
  animation: trafficReveal 440ms cubic-bezier(0.2, 0.85, 0.28, 1) both;
}

.traffic-stats.leaving {
  transform-origin: top center;
  animation: trafficHide 360ms ease both;
}

@keyframes countryFloat {
  0% { opacity: 0; transform: translate3d(0, 55px, 0) rotate(-14deg) scale(0.84); }
  12% { opacity: 0.22; }
  28% { transform: translate3d(-12px, -165px, 0) rotate(7deg) scale(0.94); }
  52% { transform: translate3d(14px, -350px, 0) rotate(-5deg) scale(1); }
  76% { opacity: 0.17; transform: translate3d(-8px, -535px, 0) rotate(9deg) scale(1.05); }
  100% { opacity: 0; transform: translate3d(18px, -710px, 0) rotate(18deg) scale(1.1); }
}

@keyframes connectShimmer {
  from { left: -45%; }
  to { left: 115%; }
}

@keyframes powerConnect {
  0%, 100% { opacity: 0.62; transform: scale(0.88) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}

@keyframes trafficReveal {
  from { opacity: 0; transform: translateY(-12px) scaleY(0.72); }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes trafficHide {
  from { opacity: 1; transform: translateY(0) scaleY(1); }
  to { opacity: 0; transform: translateY(-10px) scaleY(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .country-emoji,
  .connect.transitioning::after,
  .connect.transitioning .power-icon,
  .traffic-stats.revealing,
  .traffic-stats.leaving {
    animation: none;
  }
}


/* Compact IP comparison, subscription state and modal settings. */
.top-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.settings-open,
.settings-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.settings-open:hover,
.settings-close:hover {
  border-color: #b9bbc1;
  background: var(--soft);
}

.settings-open:active,
.settings-close:active {
  transform: scale(0.94);
}

.settings-open svg,
.settings-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ip-card {
  min-height: 64px;
  margin-top: 12px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.93);
  transition: border-color 180ms ease, background 180ms ease;
}

.ip-card.connected {
  grid-template-columns: 30px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  border-color: #b9d9cd;
  background: rgba(244, 251, 247, 0.94);
}

.ip-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #f0f2f5;
  color: #202228;
}

.ip-card.connected .ip-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #dff3e9;
  color: var(--success);
}

.ip-icon svg,
.ip-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ip-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ip-metric span,
.ip-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-card.connected .ip-metric strong {
  font-size: 10.5px;
}

.ip-card.connected .ip-after strong {
  color: var(--success);
}

.ip-arrow {
  color: #8e929a;
}

.ip-arrow[hidden],
.ip-metric[hidden],
.telegram[hidden] {
  display: none;
}

.ip-arrow svg {
  width: 18px;
  height: 18px;
}

.subscription-active {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.subscription-active[hidden],
.subscription-locked[hidden] {
  display: none;
}

.subscription-active-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid #c8d3e3;
  background: #ffffff;
  color: #17191d;
}

.subscription-active-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subscription-active-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.subscription-active-copy strong {
  color: #17191d;
  font-size: 12.5px;
  font-weight: 760;
}

.subscription-active-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.manage-subscription,
.subscription-actions .logout-button,
.subscription-support {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}

.manage-subscription {
  border: 1px solid #202228;
  background: #202228;
  color: #ffffff;
}

.manage-subscription:hover {
  background: #303238;
}

.subscription-actions .logout-button {
  height: 36px;
  margin: 0;
  padding: 0 12px;
  color: #8f3f46;
}

.subscription-support {
  grid-column: 1 / -1;
  border: 1px solid #c8d3e3;
  background: #ffffff;
  color: #17191d;
}

.subscription-support:hover {
  border-color: #9eacc0;
  background: #f3f6fa;
}

.settings-modal[hidden] {
  display: none;
}

.settings-modal {
  position: fixed !important;
  inset: 0;
  z-index: 50 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(17, 19, 24, 0.42);
  opacity: 0;
  cursor: default;
  transition: opacity 180ms ease;
}

.settings-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: calc(100vh - 16px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(17, 19, 24, 0.24);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.82, 0.3, 1);
}

.settings-modal.open .settings-backdrop,
.settings-modal.open .settings-dialog {
  opacity: 1;
}

.settings-modal.open .settings-dialog {
  transform: translateY(0) scale(1);
}

.settings-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 66px;
  padding: 12px 13px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
}

.settings-dialog-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2fb;
  color: var(--accent);
}

.settings-dialog-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-dialog-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-dialog-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
}

.settings-dialog-head span span,
.settings-dialog-head > div > span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 580;
}

.settings-dialog .settings-inner {
  padding: 15px;
  display: grid;
  gap: 15px;
  border-top: 0;
}

.routing-block {
  display: grid;
  gap: 8px;
}

.settings-label {
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
}

.settings-dialog .routing-segmented {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1fr;
  gap: 3px;
  padding: 3px;
}

.settings-dialog .routing-segmented button {
  min-width: 0;
  min-height: 36px;
  padding: 4px 5px;
  font-size: 9px;
  line-height: 1.15;
  white-space: normal;
}

.sites-panel-head {
  display: grid;
  gap: 3px;
}

.sites-panel-head strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 720;
}

.sites-panel-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 560;
}

.settings-dialog .sites-panel.visible {
  display: grid;
  gap: 10px;
}

.preset-list[hidden] {
  display: none;
}

.settings-dialog .exclusion-presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-dialog .exclusion-presets .preset-button {
  min-height: 62px;
}

.settings-dialog .sites {
  min-height: 76px;
  resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .settings-backdrop,
  .settings-dialog {
    transition: none;
  }
}

/* Light dashboard layout inspired by focused VPN clients. */
:root {
  --ink: #1b2119;
  --muted: #687064;
  --page: #f3f5ef;
  --surface: #ffffff;
  --soft: #eef1e9;
  --line: #dfe4db;
  --accent: #667a46;
  --success: #568344;
}

html,
body,
.app {
  background: var(--page);
}

body {
  width: 392px;
}

.app {
  min-height: 560px;
  max-height: 620px;
  padding: 0 14px 18px;
}

.top {
  min-height: 64px;
  margin: 0 2px 10px;
  padding: 0 2px;
  border-bottom: 0;
  background: transparent;
}

.brand-logo {
  width: 146px;
  height: 32px;
}

.settings-open {
  width: 40px;
  height: 40px;
  border-color: #d9ded5;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 16px rgba(48, 58, 41, 0.06);
}

.connection {
  margin-bottom: 12px;
  display: grid;
  gap: 11px;
}

.connection-hero {
  position: relative;
  min-height: 226px;
  padding: 17px 16px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #dde3d7;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(116, 143, 76, 0.13) 0, rgba(116, 143, 76, 0.04) 34%, transparent 59%),
    linear-gradient(180deg, #fbfcf9 0%, #f4f7f0 100%);
  box-shadow: 0 14px 34px rgba(47, 57, 39, 0.08);
}

.connection-hero::before,
.connection-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  border: 1px solid rgba(103, 126, 70, 0.1);
  border-radius: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.connection-hero::before {
  top: 68px;
  width: 146px;
  height: 146px;
}

.connection-hero::after {
  top: 54px;
  width: 174px;
  height: 174px;
}

.connection-hero .status-pill {
  position: relative;
  z-index: 2;
  min-height: 32px;
  padding: 0;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.connection-hero .status-dot {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
  background: rgba(255, 255, 255, 0.76);
}

.connection-hero .status-copy {
  text-align: left;
}

.connection-hero #connectionLabel {
  color: #424a3f;
  font-size: 11px;
  font-weight: 720;
}

.connection-hero .connection-time {
  color: #7b8377;
  font-size: 9px;
}

.connection-hero .connect {
  position: relative;
  z-index: 2;
  width: 106px;
  height: 106px;
  min-height: 106px;
  margin: 12px auto 0;
  padding: 0;
  overflow: hidden;
  flex: 0 0 106px;
  flex-direction: column;
  gap: 7px;
  border: 7px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #20251f;
  color: #ffffff;
  box-shadow:
    0 0 0 1px #d3dacd,
    0 0 0 10px rgba(255, 255, 255, 0.55),
    0 15px 30px rgba(42, 49, 37, 0.18);
  transition: transform 180ms ease, background 240ms ease, box-shadow 240ms ease;
}

.connection-hero .connect:hover {
  background: #30372e;
  transform: translateY(-1px);
}

.connection-hero .connect:active {
  transform: scale(0.97);
}

.connection-hero .connect.connected,
.is-connecting .connection-hero .connect {
  background: var(--accent);
  box-shadow:
    0 0 0 1px rgba(86, 131, 68, 0.48),
    0 0 0 10px rgba(118, 151, 80, 0.13),
    0 15px 30px rgba(63, 91, 47, 0.2);
}

.is-disconnecting .connection-hero .connect {
  background: #343a32;
}

.connection-hero .power-icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.8;
}

.connection-hero .connect > span {
  font-size: 10px;
  font-weight: 720;
}

.connection-hero .status {
  position: relative;
  z-index: 2;
  min-height: 14px;
  margin: 11px 0 0;
  color: #6d7569;
  font-size: 9px;
  font-weight: 600;
}

.connection-hero .traffic-stats {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 54px;
  margin: 13px 0 0;
  padding: 12px 8px 0;
  border: 0;
  border-top: 1px solid rgba(110, 127, 91, 0.15);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.connection-hero .traffic-label {
  color: #7a8275;
}

.connection-hero .traffic-label svg {
  stroke: #66705f;
}

.connection-hero .traffic-metric strong {
  color: #222920;
}

.connection-hero .traffic-divider {
  background: #dde3d8;
}

.server-panel {
  border-color: #dde2da;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(47, 57, 39, 0.06);
}

.server-list {
  padding: 7px;
}

.server-option {
  min-height: 62px;
  border-radius: 15px;
}

.server-option + .server-option {
  border-top-color: #edf0ea;
}

.server-option.selected {
  border-radius: 15px;
  background: #eef3e9;
  box-shadow: inset 0 0 0 1px #d4dec9;
}

.server-option.selected:hover {
  background: #e8efe1;
}

.server-option.selected::before {
  top: 17px;
  bottom: 17px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.server-option-flag {
  border-color: #d8ddd3;
  box-shadow: 0 4px 12px rgba(48, 58, 41, 0.08);
}

.ping-action,
.ping-metric {
  border-color: #e0e4dc;
  background: #f7f8f5;
}

.ip-card {
  min-height: 70px;
  margin-top: 0;
  border-color: #dde2da;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(47, 57, 39, 0.05);
}

.ip-card.connected {
  border-color: #cfdcc8;
  background: #f3f7ef;
}

.ip-icon {
  background: #eef1e9;
  color: #2f382b;
}

.ip-card.connected .ip-icon {
  background: #dfead8;
  color: #4d743d;
}

.unlock-card {
  margin-bottom: 0;
  border-color: #dde2da;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(47, 57, 39, 0.05);
}

.unlock-card.unlocked {
  border-color: #d9ded5;
  background: rgba(255, 255, 255, 0.9);
}

.subscription-active-icon {
  border-color: #d9ded5;
  background: #f1f3ee;
  color: #1b2119;
}

.manage-subscription {
  border-color: #20251f;
  background: #20251f;
}

.manage-subscription:hover {
  background: #30372e;
}

.subscription-support {
  border-color: #d9ded5;
  background: #f7f8f5;
  color: #242b21;
}

.settings-dialog-icon {
  background: #eef3e9;
  color: var(--accent);
}

.segmented button.active,
.toggle input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.connected::after {
    animation: none;
  }
}

/* FASTVPN neutral palette: green is reserved for the connected indicator. */
:root {
  --ink: #17181c;
  --muted: #74777f;
  --page: #f3f3f4;
  --surface: #ffffff;
  --soft: #eeeeef;
  --line: #dedee1;
  --accent: #202125;
  --success: #16865f;
}

.settings-open {
  border-color: #dedee1;
  box-shadow: 0 5px 16px rgba(23, 24, 28, 0.06);
}

.connection-hero {
  border-color: #dedee1;
  background:
    radial-gradient(circle at 50% 45%, rgba(23, 24, 28, 0.08) 0, rgba(23, 24, 28, 0.025) 34%, transparent 59%),
    linear-gradient(180deg, #fbfbfc 0%, #f1f1f2 100%);
  box-shadow: 0 14px 34px rgba(23, 24, 28, 0.08);
}

.connection-hero::before,
.connection-hero::after {
  border-color: rgba(23, 24, 28, 0.09);
}

.connection-hero #connectionLabel {
  color: #414247;
}

.connection-hero .connection-time,
.connection-hero .status,
.connection-hero .traffic-label {
  color: #74777f;
}

.connection-hero .connect,
.connection-hero .connect.connected,
.is-connecting .connection-hero .connect {
  background: #202125;
  box-shadow:
    0 0 0 1px #d5d5d8,
    0 0 0 10px rgba(255, 255, 255, 0.58),
    0 15px 30px rgba(23, 24, 28, 0.18);
}

.connection-hero .connect:hover {
  background: #303136;
}

.is-disconnecting .connection-hero .connect {
  background: #3a3b40;
}

.connection-hero .traffic-label svg {
  stroke: #666970;
}

.connection-hero .traffic-metric strong {
  color: #202125;
}

.connection-hero .traffic-divider,
.connection-hero .traffic-stats {
  border-color: #dedee1;
}

.server-panel,
.ip-card,
.unlock-card,
.unlock-card.unlocked {
  border-color: #dedee1;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(23, 24, 28, 0.055);
}

.server-option + .server-option {
  border-top-color: #eeeeef;
}

.server-option.selected,
.server-option.selected:hover {
  background: #eeeeef;
  box-shadow: inset 0 0 0 1px #d8d8dc;
}

.server-option.selected::before {
  background: #202125;
}

.server-option-flag,
.ping-action,
.ping-metric {
  border-color: #dedee1;
}

.server-option-flag {
  box-shadow: 0 4px 12px rgba(23, 24, 28, 0.08);
}

.ping-action,
.ping-metric {
  background: #f6f6f7;
}

.ip-card.connected {
  border-color: #d8d8dc;
  background: #f1f1f2;
}

.ip-icon,
.ip-card.connected .ip-icon,
.subscription-active-icon,
.settings-dialog-icon {
  border-color: #dedee1;
  background: #eeeeef;
  color: #202125;
}

.manage-subscription {
  border-color: #202125;
  background: #202125;
}

.manage-subscription:hover {
  background: #303136;
}

.subscription-support {
  border-color: #dedee1;
  background: #f6f6f7;
  color: #202125;
}

/* One coordinate system for the connection control and its rings. */
.connection-hero::before,
.connection-hero::after {
  content: none;
}

.connect-stage {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 138px;
  margin: 6px auto 0;
  flex: 0 0 138px;
  display: grid;
  place-items: center;
}

.connect-stage::before,
.connect-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(23, 24, 28, 0.09);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.connect-stage::before {
  width: 146px;
  height: 146px;
}

.connect-stage::after {
  width: 174px;
  height: 174px;
}

.connect-stage .connect {
  margin: 0;
}

.ping-metric {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Render-verified alignment pass. */
.app {
  scrollbar-width: none;
}

.app::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.connect-stage {
  height: 132px;
  flex-basis: 132px;
}

.connect-stage::before {
  width: 140px;
  height: 140px;
  border: 1px solid transparent;
  border-top-color: #85878d;
  border-right-color: #cfd0d4;
  animation: connectRingClockwise 4.8s linear infinite;
}

.connect-stage::after {
  width: 166px;
  height: 166px;
  border: 1px dashed #c5c6ca;
  animation: connectRingCounterClockwise 8s linear infinite;
}

@keyframes connectRingClockwise {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes connectRingCounterClockwise {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.connection-hero .connect,
.connection-hero .connect.connected,
.is-connecting .connection-hero .connect {
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.8),
    0 14px 28px rgba(23, 24, 28, 0.18);
}

.connection-hero .traffic-stats {
  min-height: 62px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
}

.connection-hero .traffic-metric {
  min-height: 58px;
  padding: 8px 10px;
  justify-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #dedee1;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.connection-hero .traffic-label {
  justify-content: center;
}

.connection-hero .traffic-metric strong {
  width: 100%;
  text-align: center;
}

.connection-hero .traffic-divider {
  display: none;
}

.telegram {
  margin-top: 12px;
}

.settings-open,
.settings-dialog {
  border-width: 1px;
  border-color: #c9cbd1;
}

.settings-dialog-head {
  border-bottom-width: 1px;
  border-bottom-color: #d2d3d7;
}

.settings-dialog .routing-segmented,
.settings-dialog .preset-button,
.settings-dialog .sites {
  border-width: 1px;
  border-color: #d0d1d5;
}

.settings-dialog .toggle {
  padding: 10px 11px;
  border: 1px solid #d0d1d5;
  border-radius: 14px;
}

.settings-dialog .routing-segmented button.active {
  outline: 2px solid #202125;
  outline-offset: -2px;
}

.settings-dialog .preset-button.active {
  border-width: 2px;
  border-color: #202125;
}

.settings-dialog .toggle input:checked {
  box-shadow: 0 0 0 1px #202125;
}

@media (prefers-reduced-motion: reduce) {
  .connect-stage::before,
  .connect-stage::after {
    animation: none;
  }
}

/* Connection-state motion: one ring, faster while state is changing. */
.connect-stage::after {
  content: none;
  animation: none;
}

.connect-stage::before {
  animation-duration: 4.8s;
}

.app.is-connected .connect-stage::before {
  border-top-color: #16865f;
  border-right-color: rgba(22, 134, 95, 0.42);
  animation-duration: 2.8s;
}

.app.is-connecting .connect-stage::before {
  border-top-color: #16865f;
  border-right-color: rgba(22, 134, 95, 0.52);
  animation-duration: 0.62s;
}

.app.is-disconnecting .connect-stage::before {
  animation-duration: 0.72s;
  animation-direction: reverse;
}

.connection-hero .connect.connected {
  background: #16865f;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(22, 134, 95, 0.24);
}

.connection-hero .connect.connected:hover {
  background: #12724f;
}

/* Reference-inspired hierarchy: status, timer, metrics, then the power control. */
.connection-hero {
  min-height: 304px;
  padding: 14px 16px 16px;
}

.connection-hero .status-pill {
  order: 1;
  width: 100%;
  min-height: 62px;
  margin: 0;
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.connection-hero .status-pill:has(.connection-time[hidden]) {
  min-height: 38px;
}

.connection-hero .status-dot {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  margin-top: 5px;
}

.connection-hero .status-copy {
  position: static;
  padding-top: 2px;
  gap: 0;
}

.connection-hero .status-copy::before {
  content: "Статус соединения";
  display: block;
  margin-bottom: 1px;
  color: #96989e;
  font-size: 7px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.02em;
}

.connection-hero #connectionLabel {
  font-size: 11px;
  line-height: 1.15;
}

.connection-hero .connection-time {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 180px;
  color: #202125;
  font-size: 24px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  transform: translateX(-50%);
}

.connection-hero .traffic-stats {
  order: 2;
  width: 218px;
  min-height: 44px;
  margin: 0 auto 4px;
  padding: 0;
  grid-template-columns: 1fr 1px 1fr;
  gap: 13px;
  background: transparent;
}

.connection-hero .traffic-metric {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  justify-items: center;
  align-content: center;
  gap: 2px;
}

.connection-hero .traffic-divider {
  display: block;
  width: 1px;
  height: 30px;
  align-self: center;
  background: #dedee1;
}

.connection-hero .traffic-label {
  gap: 4px;
  font-size: 8.5px;
}

.connection-hero .traffic-label svg {
  width: 14px;
  height: 14px;
}

.connection-hero .traffic-metric strong {
  font-size: 12px;
}

.connect-stage {
  order: 3;
  width: 190px;
  height: 166px;
  flex-basis: 166px;
  margin: 0 auto;
}

.connect-stage::before {
  width: 154px;
  height: 154px;
}

.connection-hero .connect {
  width: 112px;
  height: 112px;
  min-height: 112px;
  flex-basis: 112px;
}

.connection-hero .status {
  order: 4;
  margin-top: 0;
}

.unlock-card.attention {
  animation: unlockAttention 1.1s ease both;
}

@keyframes unlockAttention {
  0%, 100% {
    border-color: #dedee1;
    box-shadow: 0 10px 26px rgba(23, 24, 28, 0.055);
  }
  35% {
    border-color: #202125;
    box-shadow: 0 0 0 3px rgba(32, 33, 37, 0.12), 0 14px 30px rgba(23, 24, 28, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unlock-card.attention {
    animation: none;
    border-color: #202125;
  }
}

/* Keep the public IP in the connection surface, directly below the power control. */
.connection-hero .ip-card {
  order: 5;
  width: 100%;
  min-height: 56px;
  margin: 3px 0 0;
  padding: 9px 4px 0;
  border: 0;
  border-top: 1px solid #dedee1;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.connection-hero .ip-card.connected {
  border-color: #dedee1;
  background: transparent;
}

.connection-hero .ip-icon,
.connection-hero .ip-card.connected .ip-icon {
  background: transparent;
  color: #202125;
}

/* Compact refinement pass. */
.top {
  min-height: 58px;
  margin-bottom: 10px;
}

.brand-logo {
  width: 136px;
  height: 30px;
}

.settings-open {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.connection-hero {
  min-height: 266px;
  padding: 12px 16px;
}

.connection-hero .status-pill {
  min-height: 58px;
}

.connection-hero .status-pill:has(.connection-time[hidden]) {
  min-height: 34px;
}

.connection-hero .traffic-stats,
.connection-hero .traffic-metric {
  min-height: 40px;
}

.connect-stage {
  height: 154px;
  flex-basis: 154px;
}

.connect-stage::before {
  width: 148px;
  height: 148px;
}

.connection-hero .ip-card {
  min-height: 52px;
  margin-top: 1px;
  padding-top: 7px;
}

.server-list {
  padding-top: 5px;
  padding-bottom: 5px;
}

.server-option {
  min-height: 56px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.server-option.selected,
.server-option.selected:hover {
  transform: translateX(1px);
  box-shadow: inset 0 0 0 1px #cfd0d4, 0 5px 14px rgba(23, 24, 28, 0.08);
}

.subscription-locked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.unlock-reveal {
  height: 34px;
  padding: 0 13px;
  border: 1px solid #202125;
  border-radius: 11px;
  background: #202125;
  color: #ffffff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.unlock-reveal:hover {
  background: #303136;
}

.subscription-locked .unlock-form,
.subscription-locked .unlock-status {
  grid-column: 1 / -1;
}

.subscription-locked:not(.expanded) .unlock-form,
.subscription-locked:not(.expanded) .unlock-status {
  display: none;
}

.telegram {
  min-height: 56px;
  padding: 8px 13px;
  margin-top: 12px;
  border-color: #dedee1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(23, 24, 28, 0.055);
}

.telegram:hover {
  border-color: #cfd0d4;
  background: #f8f8f9;
}

.telegram-icon {
  border-color: #dedee1;
  background: #eeeeef;
  color: #202125;
}

.telegram-arrow {
  color: #74777f;
}

.traffic-metric strong.metric-updated {
  animation: metricValueUpdate 280ms ease-out;
}

@keyframes metricValueUpdate {
  from { opacity: 0.42; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.app.is-connected .connect-stage::before {
  animation-name: connectRingClockwise, connectedRingPulse;
  animation-duration: 2.8s, 3.4s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes connectedRingPulse {
  0%, 100% { opacity: 0.72; filter: drop-shadow(0 0 0 rgba(22, 134, 95, 0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(22, 134, 95, 0.3)); }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-metric strong.metric-updated,
  .app.is-connected .connect-stage::before {
    animation: none;
  }
}

/* One viewport-bound scroll container; avoids Chrome clipping the last pixels. */
html,
body {
  height: 600px;
  min-height: 600px;
  overflow: hidden;
}

.app {
  height: 600px;
  min-height: 600px;
  max-height: 600px;
  padding-bottom: 24px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 10px 24px;
}

/* Server-row finishing touches. */
.server-option {
  grid-template-columns: minmax(0, 1fr) 67px 39px;
}

.server-option.selected::before {
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 5px 5px 0;
}

.server-option-flag {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.ping-action {
  justify-self: end;
}

.server-option.selected .server-select {
  padding-left: 9px;
}

/* Compact server rows and a dense 3 x 3 preset grid. */
.server-option {
  min-height: 53px;
  grid-template-columns: minmax(0, 1fr) 86px 35px;
}

.server-option + .server-option {
  margin-top: 2px;
}

.server-select {
  height: 53px;
  padding: 4px 3px 4px 5px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
}

.server-option-flag {
  width: 35px;
  height: 35px;
  border-radius: 10px;
}

.server-option-meta {
  margin-top: 2px;
}

.server-option.locked .server-option-meta {
  margin-top: 7px;
}

.ping-metric {
  width: 86px;
  gap: 4px;
}

.ping-value {
  min-width: 42px;
}

.ping-lock {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

.ping-lock svg {
  width: 13px;
  height: 13px;
}

.ping-action {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 10px;
}

.server-option.selected::before {
  top: 10px;
  bottom: 10px;
}

.settings-dialog #specificPresetList {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.settings-dialog #specificPresetList .preset-button {
  min-height: 42px;
  padding: 5px 6px;
  flex-direction: row;
  gap: 5px;
  border-radius: 10px;
  font-size: 9px;
}

.settings-dialog #specificPresetList .preset-icon,
.settings-dialog #specificPresetList .preset-button.active .preset-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.settings-dialog #specificPresetList .preset-icon svg {
  width: 19px;
  height: 19px;
}

.settings-dialog #specificPresetList .spotify-mark {
  fill: currentColor;
  stroke: none;
}

.routing-guide {
  padding: 6px;
  display: grid;
  gap: 3px;
  border: 1px solid #d0d1d5;
  border-radius: 12px;
  background: #f6f6f7;
}

.routing-guide > div {
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border-radius: 8px;
  color: #74777f;
}

.routing-guide > div.active {
  background: #ffffff;
  color: #202125;
  box-shadow: inset 0 0 0 2px #202125;
}

.routing-guide strong {
  font-size: 9px;
  font-weight: 760;
  line-height: 1.3;
}

.routing-guide span {
  font-size: 8.5px;
  font-weight: 560;
  line-height: 1.35;
}

.server-option-flag.server-option-flag-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: 22px;
  line-height: 1;
}