/* UplinkVPN Mini App — стили по макетам. Шрифты системные: при истёкшей подписке
   paywall не пустит к Google Fonts, а системный шрифт есть всегда. */
:root {
  --accent: #1F5EFF;
  --accent-press: #1748CC;
  --accent-soft: #E8EEFF;
  --bg: #EEF1F5;
  --card: #FFFFFF;
  --text: #101828;
  --text-2: #3A4352;
  --muted: #5B6576;
  --line: #E1E6EE;
  --field: #F7F8FA;
  --dark: #101828;
  --ok: #16794A;
  --ok-soft: #E3F6EC;
  --warn: #8A4B00;
  --warn-soft: #FFF4E5;
  --expired: #2A3140;
  --radius: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
body.dark {
  --bg: #0E1117;
  --card: #1A1F29;
  --text: #F2F4F8;
  --text-2: #C9D0DB;
  --muted: #9AA3B2;
  --line: #2A3140;
  --field: #11151C;
  --dark: #F2F4F8;
  --accent-soft: #1C2A4D;
  --ok-soft: #13301F;
  --ok: #4CC38A;
  --warn-soft: #3A2A12;
  --warn: #FFB25C;
  --expired: #232A36;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

main { padding: 16px 16px calc(96px + var(--safe-bottom)); max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.splash { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }

/* Шапка */
.header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 38px; height: 38px; border-radius: 11px; }
.brand b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.brand small { display: block; font-size: 12px; color: var(--muted); }
.avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text); text-decoration: none; }
h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
h2.section { margin: 4px 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* Карточки */
.card { background: var(--card); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card.list { padding: 4px 16px; gap: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--bg); font-size: 14px; }
.row:last-child { border-bottom: none; }
.row span:first-child { color: var(--muted); }
.row b { text-align: right; }

.status { background: var(--accent); color: #fff; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.status.expired { background: var(--expired); }
.status .top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.18); font-weight: 700; font-size: 13px; }
.chip i { width: 7px; height: 7px; border-radius: 4px; background: #7CF2B0; }
.status.expired .chip i { background: #FFB25C; }
.days { display: flex; align-items: baseline; gap: 8px; }
.days b { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.days span { font-size: 17px; font-weight: 600; }
.bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.25); overflow: hidden; }
.bar i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.status .sep { height: 1px; background: rgba(255,255,255,0.2); }
.status .line { display: flex; justify-content: space-between; font-size: 14px; }
.status .note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.08); font-size: 13px; line-height: 1.45; }

/* Кнопки */
.btn { min-height: 54px; border: none; border-radius: 16px; background: var(--accent); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; padding: 0 16px; width: 100%; }
.btn:active { background: var(--accent-press); }
.btn.dark { background: var(--dark); color: var(--bg); }
.btn.ghost { background: var(--card); color: var(--text); min-height: 48px; font-size: 15px; }
.btn.small { min-height: 40px; width: auto; font-size: 14px; border-radius: 12px; padding: 0 14px; }
.btn.soft { background: var(--bg); color: var(--text); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.linkbtn { background: none; border: none; color: var(--accent); font-weight: 700; padding: 0; min-height: 36px; display: flex; align-items: center; gap: 8px; cursor: pointer; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--card); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); border: none; text-align: left; cursor: pointer; }
.tile .ico, .ico { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tile b { display: block; font-size: 15px; }
.tile small { display: block; font-size: 12px; color: var(--muted); }

/* Выбор (тарифы, способы оплаты) */
.options { display: flex; flex-direction: column; gap: 8px; }
.options.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option { background: var(--card); border: 2px solid var(--card); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%; color: var(--text); }
.option[aria-checked="true"] { border-color: var(--accent); }
.option .radio { width: 22px; height: 22px; border-radius: 11px; border: 2px solid #C3CBD8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.option[aria-checked="true"] .radio { border: none; background: var(--accent); }
.option[aria-checked="true"] .radio::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #fff; }
.option .main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option .main b { font-size: 16px; font-weight: 800; }
.option .main small, .option .side small { font-size: 12px; color: var(--muted); }
.option .side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.option .side b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.option.method { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
.badge { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
.badge.green { background: var(--ok-soft); color: var(--ok); }

.paybar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 16px calc(16px + var(--safe-bottom)); display: flex; align-items: center; gap: 14px; z-index: 5; }
.paybar .sum small { display: block; font-size: 12px; color: var(--muted); }
.paybar .sum b { font-size: 22px; font-weight: 800; }
.paybar .sum s { font-size: 13px; color: var(--muted); margin-left: 6px; }
.paybar .btn { flex: 1; }

/* Поля */
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); padding: 0 12px; font-weight: 600; text-transform: uppercase; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copybox { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.copybox .mono { flex: 1; min-width: 0; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--warn-soft); color: var(--warn); font-size: 13px; line-height: 1.45; }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 4px; }
.center { text-align: center; align-items: center; }
.bigicon { width: 96px; height: 96px; border-radius: 32px; display: flex; align-items: center; justify-content: center; margin: 32px auto 0; background: var(--warn-soft); color: var(--warn); }
.bigicon.ok { background: var(--ok-soft); color: var(--ok); }
.bigicon svg { width: 46px; height: 46px; stroke-width: 1.8; }

.qr { display: flex; gap: 14px; align-items: center; }
.qr img { width: 132px; height: 132px; border-radius: 12px; background: #fff; flex-shrink: 0; image-rendering: pixelated; }
.upload { min-height: 112px; border: 2px dashed #B9C3D3; border-radius: 20px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center; padding: 12px; }
.upload input { display: none; }
.upload b { font-size: 15px; }
.upload small { font-size: 12px; color: var(--muted); }
.preview { display: flex; align-items: center; gap: 12px; }
.preview img { width: 52px; height: 68px; object-fit: cover; border-radius: 10px; }

.help { background: var(--card); border-radius: 20px; padding: 16px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.help img { max-width: 100%; }

/* Нижнее меню */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(70px + var(--safe-bottom)); padding: 6px 24px var(--safe-bottom); background: var(--card); border-top: 1px solid var(--line); display: flex; gap: 8px; z-index: 5; }
.tabbar[hidden] { display: none; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.tabbar svg { width: 24px; height: 24px; }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(96px + var(--safe-bottom)); background: var(--dark); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-size: 14px; text-align: center; z-index: 10; }
.skeleton { background: var(--card); border-radius: 20px; height: 160px; opacity: 0.6; }