/* ========= TOKENS ========= */
:root {
  --bg: #f4f5f7;
  --white: #ffffff;
  --black: #0a0a0a;
  --gray1: #f4f5f7;
  --gray2: #e8e9ed;
  --gray3: #9ca3af;
  --gray4: #6b7280;
  --violet: #7c3aed;
  --violet-light: #ede9fe;
  --green: #22c55e;
  --red: #ef4444;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --nav-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tg-safe-b: var(--tg-viewport-stable-height, var(--safe-b));
}

/* ========= DISPLAY FONT ========= */
/* Coolvetica loaded via CDNFonts <link> in index.html */

/* ========= RESET ========= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-tap-highlight-color: transparent; }
body {
  height: 100%;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; }

/* ========= APP SHELL ========= */
.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100%;
  padding: 16px 16px calc(var(--nav-h) + var(--safe-b) + 12px);
}

/* ========= TABS ========= */
.tab { display: none; }
.tab.active { display: block; }

/* ========= GREETING CARD ========= */
.greeting-card {
  background: var(--black);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.greeting-card__title {
  font-family: 'Coolvetica', 'Montserrat', system-ui, sans-serif;
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.3px;
}
.greeting-card__sub {
  color: rgba(255,255,255,.50);
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.greeting-card__badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--violet);
  flex-shrink: 0;
}

/* ========= ID ROW ========= */
.id-row {
  margin-top: 12px;
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.id-row__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--gray4);
}
.id-row__value {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.copy-btn {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--black);
  color: #fff;
  display: grid;
  place-items: center;
}
.copy-btn:active { transform: scale(.94); }

/* ========= SECTION HEADER ========= */
.section-header {
  margin-top: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Coolvetica', 'Montserrat', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.05;
}
.section-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray4);
  margin-top: 4px;
  letter-spacing: 0.1px;
}

/* ========= BUTTONS ========= */
.accent-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(124,58,237,.28);
}
.accent-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(124,58,237,.2); }

.ghost-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--gray2);
  background: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.ghost-btn:active { background: var(--gray1); }

.danger-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
}
.danger-btn:active { opacity: .9; }

.update-cfg-btn {
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.update-cfg-btn svg { display: inline-block; flex-shrink: 0; }
.update-cfg-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0,0,0,.1); }

.freeze-btn {
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd, #e0f2fe);
  color: #0284c7;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid rgba(2,132,199,.15);
  box-shadow: 0 4px 14px rgba(2,132,199,.12);
}
.freeze-btn svg { display: inline-block; flex-shrink: 0; opacity: .7; }
.freeze-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(2,132,199,.1); }

.w-full { width: 100%; }

/* ========= ROUTER CARD ========= */
.router-card {
  background: var(--black);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  margin-bottom: 10px;
}
.router-card:active { transform: translateY(1px); }
.router-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
  flex-shrink: 0;
}
.router-card__info { flex: 1; min-width: 0; }
.router-card__name {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.1px;
}
.router-card__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.07);
  letter-spacing: 0.1px;
}
.router-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 18px;
}

/* ========= DRAFT ROUTER CARD ========= */
.router-card--draft {
  background: #d1d5db;
}
.router-card--draft .router-card__name {
  color: var(--black);
}
.router-card--draft .pill {
  color: var(--black);
  border-color: rgba(0,0,0,.15);
  background: rgba(0,0,0,.08);
}
.router-card__dot--red {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(239,68,68,.15);
}
.pill--warn {
  background: rgba(239,68,68,.12);
  color: var(--red);
  border-color: rgba(239,68,68,.2);
}
.tp-delete {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(239,68,68,.15);
  color: var(--red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tp-delete:active { opacity: .7; }

/* ========= EXPIRY DOT & BANNERS ========= */
.router-card__dot--yellow {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
  50% { box-shadow: 0 0 0 7px rgba(245,158,11,.10); }
}
.expiry-banner {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.expiry-banner--yellow {
  background: rgba(245,158,11,.12);
  color: #b45309;
  border: 1px solid rgba(245,158,11,.25);
}
.expiry-banner--red {
  background: rgba(239,68,68,.1);
  color: var(--red);
  border: 1px solid rgba(239,68,68,.2);
}

/* ========= EMPTY STATE ========= */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  background: var(--white);
  border: 2px dashed var(--gray2);
  border-radius: var(--radius);
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--gray1);
  display: grid;
  place-items: center;
  color: var(--gray3);
}
.empty-state__title {
  font-family: 'Coolvetica', 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 6px;
}
.empty-state__sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray4);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ========= CONFIG CARD ========= */
.config-card {
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.config-card__title {
  font-weight: 700;
  font-size: 14px;
}
.config-card__sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray4);
  margin-top: 3px;
  letter-spacing: 0.1px;
}

/* ========= THIRD-PARTY CARD ========= */
.tp-card {
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tp-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gray1);
  display: grid;
  place-items: center;
  color: var(--gray4);
  flex-shrink: 0;
}
.tp-card__info { flex: 1; min-width: 0; }
.tp-card__name {
  font-weight: 700;
  font-size: 14px;
}
.tp-card__meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray4);
  margin-top: 3px;
  letter-spacing: 0.1px;
}
.tp-card__status {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.1);
  flex-shrink: 0;
}

/* ========= PAGE TITLE (tabs 2,3) ========= */
.page-title {
  font-family: 'Coolvetica', 'Montserrat', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.05;
}
.page-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray4);
  margin-top: 4px;
  margin-bottom: 20px;
  letter-spacing: 0.1px;
}

/* ========= SERVER LIST ========= */
.server-card {
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.server-card__flag {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gray1);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.server-card__info { flex: 1; }
.server-card__name { font-weight: 700; font-size: 14px; }
.server-card__city { font-size: 12px; font-weight: 500; color: var(--gray4); margin-top: 2px; }
.server-card__ping {
  font-weight: 700;
  font-size: 12px;
  color: var(--green);
}

/* ========= HELP LIST ========= */
.help-list { display: flex; flex-direction: column; gap: 8px; }
.help-item {
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.help-item::after {
  content: '›';
  font-size: 20px;
  color: var(--gray3);
  font-weight: 800;
}
.help-item:active { background: var(--gray1); }

/* ========= BOTTOM NAV ========= */
.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 0 12px var(--safe-b);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gray2);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
}
.nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  border-radius: 14px;
  color: var(--gray3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color .15s, background .15s;
}
.nav__item.active {
  color: var(--violet);
  background: var(--violet-light);
}

/* ========= OVERLAY ========= */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
  opacity: 1;
  transition: opacity .2s;
}
.overlay[hidden] { display: none; }

/* ========= BOTTOM SHEET ========= */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 430px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.15);
  padding: 0 20px calc(var(--safe-b) + 16px);
  z-index: 300;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.sheet.open { transform: translateY(0); }
.sheet__bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray2);
  margin: 10px auto 0;
}
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
}
.sheet__title {
  font-family: 'Coolvetica', 'Montserrat', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.1;
}
.sheet__sub {
  font-size: 12px;
  color: var(--gray4);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.1px;
}
.close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gray1);
  display: grid;
  place-items: center;
  color: var(--gray4);
}
.close-btn:active { background: var(--gray2); }
.sheet__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
.sheet__divider {
  height: 1px;
  background: var(--gray2);
  margin: 6px 0;
}
.sheet__actions-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

/* ========= META ROWS ========= */
.meta {
  background: var(--gray1);
  border-radius: var(--radius-sm);
  padding: 4px 0;
}
.meta__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.meta__row + .meta__row {
  border-top: 1px solid var(--gray2);
}
.meta__k {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray4);
  letter-spacing: 0.1px;
}
.meta__v {
  font-size: 13px;
  font-weight: 700;
}
.meta__v--copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background .15s;
}
.meta__v--copy svg { opacity: .4; flex-shrink: 0; }
.meta__v--copy:hover { background: var(--gray2); }
.meta__v--copy:active { background: var(--gray2); transform: scale(.97); }
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(34,197,94,.12);
  color: var(--green);
}
.status-badge.paused {
  background: rgba(239,68,68,.1);
  color: var(--red);
}

/* ========= ACTIVATE SHEET ========= */
.sheet--activate .sheet__body {
  gap: 14px;
}
.activate-instruction {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray1);
}
.activate-instruction__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}
.mac-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mac-input-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray4);
  letter-spacing: 0.1px;
}
.mac-input {
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray2);
  background: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--black);
  outline: none;
  transition: border-color .15s;
  text-transform: uppercase;
}
.mac-input::placeholder {
  color: var(--gray3);
  font-weight: 500;
  letter-spacing: 1.5px;
}
.mac-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

/* ========= CONFIRM NOTICE ========= */
.confirm-notice {
  background: var(--gray1);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.confirm-notice__text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 10px;
}
.confirm-notice__hint {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray4);
  line-height: 1.5;
}

/* ========= WIZARD STEPS ========= */
.wiz-step { display: none; flex-direction: column; gap: 14px; }
.wiz-step.active { display: flex; }

/* Tariff cards */
.tariff-list { display: flex; flex-direction: column; gap: 10px; }
.tariff-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .15s, box-shadow .15s;
}
.tariff-card.selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.tariff-card__period { font-weight: 700; font-size: 15px; }
.tariff-card__price { font-weight: 800; font-size: 17px; color: var(--violet); }
.tariff-card__badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--violet);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.tariff-card:active { transform: translateY(1px); }

/* Wizard options (server, protocol) */
.wiz-options { display: flex; flex-direction: column; gap: 10px; }
.wiz-option {
  background: var(--white);
  border: 2px solid var(--gray2);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.wiz-option.selected {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.wiz-option:active { transform: translateY(1px); }
.wiz-option__flag { font-size: 24px; line-height: 1; }
.wiz-option__icon { color: var(--violet); display: flex; }
.wiz-option__label { font-weight: 700; font-size: 15px; }

/* Wizard summary */
.wiz-summary {
  background: var(--gray1);
  border-radius: var(--radius-sm);
  padding: 6px 0;
}
.wiz-summary__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
}
.wiz-summary__row + .wiz-summary__row {
  border-top: 1px solid var(--gray2);
}
.wiz-check { flex-shrink: 0; }

/* Disabled button */
.accent-btn:disabled {
  opacity: .45;
  pointer-events: none;
}

/* ========= TOAST ========= */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  white-space: nowrap;
}
.toast[hidden] { display: none; }

/* ========= DESKTOP CONSTRAINT ========= */
@media (min-width: 480px) {
  .nav {
    max-width: 430px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px 20px 0 0;
  }
}