:root {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #0c1019);
  --panel: var(--tg-theme-secondary-bg-color, #151b28);
  --panel-2: #1b2332;
  --text: var(--tg-theme-text-color, #f5f7fb);
  --muted: var(--tg-theme-hint-color, #8d98ab);
  --accent: var(--tg-theme-button-color, #5b8cff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --border: rgba(255, 255, 255, 0.09);
  --success: #45d68b;
  --danger: #ff6b73;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 300px;
  background:
    radial-gradient(circle at 90% -5%, rgba(91, 140, 255, 0.2), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button, select, input { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }

.shell {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px calc(122px + env(safe-area-inset-bottom));
}

.topbar, .section-heading, .default-route, .resource-main, .resource-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar { margin: 4px 2px 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.75rem, 7vw, 2.2rem); letter-spacing: -0.045em; line-height: 1.05; }
h2 { font-size: 1.08rem; letter-spacing: -0.018em; }
.eyebrow { color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; margin-bottom: 4px; }

.live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.live span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(69, 214, 139, 0.1); }

.main-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 4px; margin: -8px 0 16px; padding: 4px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); }
.main-tab { min-height: 42px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.main-tab.active { background: var(--panel-2); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.14); }

.section { margin-top: 14px; padding: 18px; background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); }
.section-heading { margin-bottom: 14px; }
.section-heading.compact { margin-bottom: 12px; }

.device-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; }
.device-tab { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 15px; padding: 13px; text-align: left; cursor: pointer; }
.device-tab strong, .device-tab span { display: block; }
.device-tab strong { font-size: 0.98rem; }
.device-tab span { color: var(--muted); font-size: 0.75rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.device-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--accent); }

.policy-list { display: grid; gap: 9px; }
.policy-card { position: relative; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px; min-height: 68px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-2); cursor: pointer; }
.policy-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-mark { width: 20px; height: 20px; border: 2px solid #647086; border-radius: 50%; }
.policy-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.policy-card input:checked + .radio-mark { border: 6px solid var(--accent); background: white; }
.policy-card strong, .policy-card small { display: block; }
.policy-card strong { font-size: 0.94rem; }
.policy-card small, .default-route small, .resource-copy small { margin-top: 2px; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

.vpn-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vpn-card { position: relative; padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-2); cursor: pointer; overflow: hidden; }
.vpn-card input { position: absolute; opacity: 0; }
.vpn-card strong, .vpn-card small { display: block; }
.vpn-card strong { font-size: 1.2rem; letter-spacing: -0.02em; }
.vpn-card small { color: var(--muted); font-size: 0.74rem; margin-top: 3px; }
.vpn-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vpn-card:has(input:checked)::after { content: "✓"; position: absolute; top: 10px; right: 12px; color: var(--accent); font-weight: 800; }

.default-route { padding: 12px 0 16px; border-bottom: 1px solid var(--border); }
.default-route strong, .default-route small { display: block; }
select { min-width: 108px; border: 1px solid var(--border); border-radius: 11px; padding: 9px 30px 9px 10px; background: var(--panel-2); color: var(--text); }
.count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.78rem; font-weight: 800; }

.resource-list { display: grid; }
.resource-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.resource-row:last-child { border-bottom: 0; padding-bottom: 0; }
.resource-main { align-items: flex-start; }
.resource-copy { flex: 1; }
.resource-copy strong, .resource-copy small { display: block; }
.resource-copy strong { font-size: 0.92rem; }
.resource-action { margin-top: 10px; justify-content: flex-end; }
.resource-route { transition: opacity 0.18s ease; }
.resource-row:not(.enabled) .resource-route { opacity: 0.38; pointer-events: none; }

.switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 46px; height: 28px; }
.switch input { position: absolute; opacity: 0; }
.switch-track { width: 100%; border-radius: 15px; background: #3b4557; transition: background 0.18s ease; }
.switch-track::after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: white; transition: transform 0.18s ease; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }

.save-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px max(16px, calc((100vw - 688px) / 2)) max(10px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 20%); }
.save-button, .secondary-button { width: 100%; min-height: 50px; border: 0; border-radius: 15px; font-weight: 750; cursor: pointer; }
.save-button { background: var(--accent); color: var(--accent-text); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.save-button:disabled { opacity: 0.6; cursor: wait; }
.save-dock p { color: var(--muted); text-align: center; font-size: 0.7rem; margin-top: 7px; }
.save-status { min-height: 20px; color: var(--success); text-align: center; font-size: 0.78rem; margin-bottom: 5px; }

.state-card { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; }
.state-card p { color: var(--muted); max-width: 340px; }
.state-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--panel-2); color: var(--accent); font-size: 1.4rem; font-weight: 800; }
.secondary-button { width: auto; padding: 0 22px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.spinner { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.hidden { display: none !important; }

.profiles-view { padding-bottom: 12px; }
.profiles-lan { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel)); }
.profiles-lan-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.profiles-lan > .profiles-lan-row, .device-lan > .profiles-lan-row { margin-top: 0; padding-top: 0; border-top: 0; }
.profiles-lan-copy { min-width: 0; }
.profiles-lan-copy strong, .profiles-lan-copy small { display: block; }
.profiles-lan-copy strong { font-size: .88rem; }
.profiles-lan-copy small { color: var(--muted); font-size: .76rem; line-height: 1.35; margin-top: 3px; }
.profiles-lan #personal-lan-status { color: var(--accent); }
.donate-button { display: flex; align-items: center; gap: 12px; min-height: 62px; margin-top: 14px; padding: 11px 14px; border: 1px solid color-mix(in srgb, #ff5d8f 38%, var(--border)); border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, #ff5d8f 12%, var(--panel)), var(--panel)); color: var(--text); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.donate-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, #ff5d8f 18%, var(--panel-2)); color: #ff6b9a; font-size: 1.15rem; }
.donate-copy { min-width: 0; flex: 1; }
.donate-copy strong, .donate-copy small { display: block; }
.donate-copy strong { font-size: .94rem; }
.donate-copy small { margin-top: 2px; color: var(--muted); font-size: .78rem; }
.donate-arrow { color: #ff6b9a; font-size: 1.65rem; line-height: 1; }
.donate-button:active { transform: translateY(1px); }
.channel-button { border-color: color-mix(in srgb, #2aabee 38%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, #2aabee 12%, var(--panel)), var(--panel)); }
.channel-button .donate-icon { background: color-mix(in srgb, #2aabee 18%, var(--panel-2)); color: #2aabee; }
.channel-button .donate-arrow { color: #2aabee; }
.channel-button:focus-visible { outline: 2px solid #2aabee; outline-offset: 3px; }
.profile-list { display: grid; gap: 10px; margin-top: 14px; }
.profile-card { width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); color: var(--text); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.profile-card.ready { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); }
.profile-card.frozen { border-color: color-mix(in srgb, var(--muted) 38%, var(--border)); }
.profile-open { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.profile-open:disabled { cursor: wait; opacity: .72; }
.profile-card-copy { min-width: 0; }
.profile-card-copy strong, .profile-card-copy small { display: block; }
.profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.network-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }
.network-dot.online { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.profile-card-copy strong { font-size: 1rem; overflow-wrap: anywhere; }
.profile-card-copy small { color: var(--muted); font-size: .77rem; margin-top: 3px; }
.profile-card-action { flex: 0 0 auto; color: var(--accent); font-size: .78rem; font-weight: 800; }
.profile-card.pending .profile-card-action { color: var(--muted); }
.profile-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.profile-action-button { min-height: 42px; border: 0; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 750; cursor: pointer; }
.profile-action-button + .profile-action-button { border-left: 1px solid var(--border); }
.profile-action-button.danger { color: var(--danger); }
.profile-action-button.freeze { color: var(--accent); }
.profile-action-button:disabled { opacity: .5; cursor: wait; }
.create-profile-form > label { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 6px; }
.create-profile-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.create-profile-row input { min-width: 0; min-height: 50px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 13px; background: var(--panel-2); color: var(--text); }
.rename-dialog .create-profile-form { margin-top: 18px; }
.rename-dialog .create-profile-form > input { width: 100%; min-height: 50px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 13px; background: var(--panel-2); color: var(--text); }
.create-profile-row .secondary-button { min-height: 50px; }
.profile-dialog { width: min(calc(100% - 28px), 430px); max-height: calc(100vh - 28px); margin: auto; padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: #151b28; color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.profile-dialog::backdrop { background: rgba(3,6,12,.76); backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.copy-result { margin: 14px 0 12px; padding: 9px 11px; border-radius: 11px; color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); font-size: .8rem; text-align: center; }
.copy-result.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.qr-frame { width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto; padding: 10px; border-radius: 18px; background: white; overflow: hidden; }
.qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dialog-hint { color: var(--muted); font-size: .78rem; text-align: center; margin: 13px 4px 16px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dialog-actions .secondary-button, .dialog-actions .save-button { width: 100%; min-height: 48px; padding: 0 10px; font-size: .8rem; }

.admin-view { padding-bottom: 10px; }
.admin-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--panel)), var(--panel)); }
.admin-hero > div > p:last-child { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.compact-state { min-height: 150px; margin-top: 14px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.stat-card { min-width: 0; padding: 14px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-size: 1.55rem; line-height: 1; letter-spacing: -.04em; }
.stat-card span { color: var(--muted); font-size: .7rem; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.admin-egresses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.egress-admin-card { position: relative; padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-2); }
.egress-admin-card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.egress-admin-card strong, .egress-admin-card small { display: block; }
.egress-admin-card strong { font-size: 1.1rem; }
.egress-admin-card small { color: var(--muted); font-size: .74rem; margin-top: 3px; }
.admin-list { display: grid; gap: 9px; }
.admin-item { padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-2); }
.admin-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-item-copy { min-width: 0; }
.admin-item-copy strong, .admin-item-copy small { display: block; }
.admin-item-copy strong { overflow-wrap: anywhere; font-size: .94rem; }
.admin-item-copy small { color: var(--muted); font-size: .75rem; margin-top: 3px; overflow-wrap: anywhere; }
.traffic-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 10px 11px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.traffic-summary strong { color: var(--text); font-size: .94rem; font-variant-numeric: tabular-nums; }
.traffic-summary span { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; }
.traffic-summary.compact { justify-content: flex-start; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.mini-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); color: var(--text); font-size: .76rem; font-weight: 700; cursor: pointer; }
.mini-button.danger { background: color-mix(in srgb, var(--danger) 11%, var(--panel-2)); color: var(--danger); }
.status-pill { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); font-size: .67rem; font-weight: 800; }
.status-pill.muted { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.status-pill.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.admin-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-add summary { color: var(--accent); font-size: .84rem; font-weight: 750; cursor: pointer; }
.inline-form { display: grid; gap: 10px; margin-top: 14px; }
.inline-form label { display: grid; gap: 5px; color: var(--muted); font-size: .74rem; }
.inline-form input, .copy-row input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; background: var(--panel-2); color: var(--text); }
.inline-form .secondary-button { width: 100%; }
.form-hint { color: var(--muted); font-size: .72rem; margin-top: 10px; }
.invite-result { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.invite-result > p { color: var(--muted); font-size: .8rem; margin: 9px 0 12px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.copy-row .secondary-button { min-height: 44px; padding: 0 14px; font-size: .78rem; }
.resource-catalog { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-chip { padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-2); font-size: .78rem; }
.catalog-chip small { color: var(--muted); margin-left: 4px; }
.admin-status { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 8; width: min(calc(100% - 32px), 540px); transform: translateX(-50%); padding: 11px 14px; border: 1px solid var(--border); border-radius: 13px; background: #20293a; color: var(--text); text-align: center; font-size: .8rem; box-shadow: 0 12px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.admin-status.visible { opacity: 1; }
.admin-status.error { color: #fff; background: color-mix(in srgb, var(--danger) 55%, #20293a); }

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

@media (min-width: 680px) {
  .shell { padding-left: 24px; padding-right: 24px; }
  .section { padding: 22px; }
  .policy-list { grid-template-columns: 1fr 1fr; }
  .inline-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .inline-form .secondary-button { width: auto; }
}

@media (max-width: 420px) {
  .create-profile-row { grid-template-columns: 1fr; }
  .create-profile-row .secondary-button { width: 100%; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: 0.01ms !important; }
}

.traffic-addresses { overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; }

.traffic-form { display: grid; gap: 8px; margin-top: 16px; }
.traffic-form > label { margin: 0; }
.traffic-form > input, .traffic-form > select { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 13px; background: var(--panel-2); color: var(--text); font: inherit; }
.traffic-form > button { margin-top: 4px; }

/* Profiles are grouped under their owner in the compact admin view. */
.admin-view .section { padding: 14px; margin-top: 12px; }
.admin-view .section-heading { margin-bottom: 10px; }
.admin-view .stat-card { padding: 11px 12px; }
.admin-view .stat-card strong { font-size: 1.3rem; }
.admin-view .admin-item { padding: 11px; border-radius: 12px; }
.admin-view .admin-actions { gap: 6px; margin-top: 8px; }
.admin-profiles { margin-top: 10px; border-top: 1px solid var(--border); }
.admin-profiles > .admin-list { gap: 7px; }
.admin-profiles .admin-item { background: var(--panel); }
.admin-profiles .admin-item-head { flex-wrap: wrap; gap: 6px; }
.admin-profiles .admin-item-copy { flex: 1 1 180px; }
.admin-view .traffic-summary strong { white-space: nowrap; }

.admin-user-open > .admin-overview, .admin-user-open > .admin-stats { display: none; }
.admin-user-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.admin-user-link:hover { border-color: var(--accent); }
.admin-user-link-end { display: flex; align-items: center; gap: 8px; }
.admin-user-link-end > span:last-child { color: var(--muted); font-size: 1.3rem; }
.admin-user-link .admin-item-copy { flex: 1; }
.admin-user-link .status-pill { white-space: normal; text-align: center; }
.admin-profiles h3 { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; font-size: .9rem; }
#admin-users-back { margin-bottom: 10px; }

.admin-routing-dialog { max-height: 90vh; overflow-y: auto; }
.admin-routing-dialog form { display: grid; gap: 12px; }
.admin-routing-dialog select { max-width: 100%; width: 100%; padding: 12px; border-radius: 12px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); font: inherit; }
.admin-routing-resource { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr); align-items: center; gap: 12px; margin: 12px 0; }

.egress-admin-card.egress-stale::after { background: var(--muted); }
.egress-traffic { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.egress-traffic span { display: block; color: var(--muted); font-size: .72rem; margin-top: 5px; }
.egress-traffic strong { font-variant-numeric: tabular-nums; }

.profiles-toolbar { display: flex; justify-content: flex-end; margin-top: 10px; }
.add-profile { color: var(--accent); font-size: 1.8rem; }
.profiles-toolbar + .profile-list { margin-top: 4px; }
.profile-card { position: relative; padding: 0; }
.profile-swipe-content { position: relative; padding: 16px; background: var(--panel); border-radius: inherit; transform: translateX(var(--swipe-offset, 0px)); transition: transform .2s ease-out; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.profile-card.swiping .profile-swipe-content { transition: none; user-select: none; }
.profile-swipe-delete { position: absolute; inset: 0 0 0 auto; width: 100px; border: 0; background: #c83245; color: white; font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; }
.profile-swipe-delete:focus-visible { outline: 2px solid white; outline-offset: -5px; }
.profile-swipe-delete:disabled { cursor: wait; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .profile-swipe-content { transition: none; } }
.profile-card-copy { padding-right: 42px; }
.profile-more { position: absolute; top: 6px; right: 8px; color: var(--muted); font-size: 1.6rem; }
.profile-open { width: auto; min-height: 44px; margin: 4px 0 -8px auto; padding: 8px 0 8px 12px; }
.profile-actions { grid-template-columns: 1fr; border-top: 0; margin-top: 16px; }
.profile-action-button { min-height: 48px; font-size: .9rem; text-align: left; padding: 10px 12px; }
.profile-action-button + .profile-action-button { border-left: 0; border-top: 1px solid var(--border); }
#profile-action-status:empty { display: none; }
#create-profile-dialog .create-profile-form { margin-top: 18px; }

.profile-settings-trigger { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.profile-settings-trigger:disabled { cursor: default; }
.profile-settings-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.profile-card-copy { pointer-events: none; }
.profile-more, .profile-open { z-index: 1; }
.profile-open { position: relative; }
.profile-card.expanded { border-color: var(--accent); }
.profile-policy { min-width: 0; animation: reveal-policy .22s ease-out; }
.profile-policy > .section:first-child { margin-top: 0; }
.profile-policy .save-dock { position: static; padding: 12px 0; background: none; }
@keyframes reveal-policy { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .profile-policy { animation: none; } }

/* LunaLan iOS design, v31. Legacy design is preserved in design-backups/pre-ios-v30. */
:root {
  color-scheme: light;
  --bg: #f2f3f7;
  --panel: #ffffff;
  --panel-2: #f5f6f9;
  --text: #17191e;
  --muted: #686e79;
  --accent: #0075ed;
  --accent-text: #ffffff;
  --border: #e7e9ef;
  --success: #21834c;
  --danger: #d72b29;
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --bg: #101114;
  --panel: #1c1d22;
  --panel-2: #26272e;
  --text: #f5f5f7;
  --muted: #a1a6b0;
  --accent: #69acff;
  --accent-text: #101114;
  --border: #34353d;
  --success: #6edb98;
  --danger: #ff7971;
}
body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.shell { width: min(100%, 680px); padding: max(24px, env(safe-area-inset-top)) 20px calc(110px + env(safe-area-inset-bottom)); }
.topbar { margin: 0 4px 26px; align-items: center; }
.brand { font-size: .9rem; letter-spacing: -.02em; font-weight: 700; }
.live { font-size: .75rem; color: var(--success); }
.live span { width: 6px; height: 6px; box-shadow: none; }
h1 { font-size: clamp(2rem, 7vw, 2.3rem); letter-spacing: -.045em; line-height: 1.08; font-weight: 700; overflow-wrap: anywhere; }
h2 { font-size: 1.15rem; font-weight: 600; }
.eyebrow { font-size: .75rem; color: var(--muted); font-weight: 500; letter-spacing: .1em; }
.main-tabs { position: fixed; z-index: 6; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 680px); margin: 0; padding: 9px 20px max(12px, env(safe-area-inset-bottom)); gap: 8px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--panel); }
.main-tab { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-height: 55px; border-radius: 18px; font-size: .75rem; font-weight: 500; }
.main-tab svg { width: 22px; height: 22px; }
.main-tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: none; }
.profiles-toolbar { align-items: center; justify-content: space-between; gap: 16px; margin: 6px 4px 26px; }
.profiles-toolbar + .profile-list { margin-top: 0; }
.add-profile { width: 48px; height: 48px; background: var(--panel); border: 0; border-radius: 50%; color: var(--accent); font-size: 2rem; font-weight: 400; }
.profile-list { gap: 12px; }
.profile-card, .profile-card.ready, .profile-card.frozen { border: 0; border-radius: 24px; box-shadow: none; }
.profile-swipe-content { padding: 18px; }
.profile-card-head { display: flex; gap: 13px; align-items: center; min-height: 52px; }
.profile-device-icon { flex: 0 0 50px; height: 50px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); color: var(--accent); display: grid; place-items: center; pointer-events: none; }
.profile-device-icon svg { width: 27px; height: 27px; }
.profile-card-copy { flex: 1; padding-right: 28px; }
.profile-card-copy strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.profile-card-copy .profile-connection { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-top: 4px; line-height: 1.4; }
.profile-connection.online { color: var(--success); }
.network-dot, .network-dot.online { width: 6px; height: 6px; box-shadow: none; }
.network-dot.offline { background: var(--danger); }
.network-dot.admin-presence-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: .05em; box-shadow: none; }
.profile-more { top: 19px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); }
.profile-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.profile-route-summary { pointer-events: none; flex: 1; min-width: 0; }
.profile-route-summary strong, .profile-route-summary small { display: block; overflow-wrap: anywhere; }
.profile-route-summary strong { font-size: .9rem; font-weight: 500; }
.profile-route-summary small { font-size: .75rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.profile-open { width: auto; min-height: 44px; padding: 7px 0 7px 8px; margin: 0; font-size: .8rem; font-weight: 600; color: var(--accent); }
.profile-swipe-delete { background: #d72b29; }
.section, .state-card { border: 0; background: var(--panel); border-radius: 24px; box-shadow: none; }
.section { padding: 20px; margin-top: 16px; }
.profiles-lan { margin-top: 26px; }
.profiles-lan-copy strong { font-size: 1rem; font-weight: 500; }
.profiles-lan-copy small, .profiles-lan .form-hint { font-size: .8rem; line-height: 1.5; }
.profiles-lan #personal-lan-status { color: var(--muted); }
.project-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.donate-button, .channel-button { gap: 6px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); }
.donate-icon, .channel-button .donate-icon { width: 20px; height: 24px; font-size: 1rem; border-radius: 0; background: none; color: var(--muted); }
.donate-icon svg { width: 17px; height: 17px; }
.donate-copy strong { font-size: .8rem; font-weight: 500; }
.donate-copy small, .donate-arrow { display: none; }
.profile-back { color: var(--accent); display: block; border: 0; background: none; font-size: 1rem; min-height: 44px; margin: -10px 0 12px; padding: 0 4px; cursor: pointer; }
.profile-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 4px 24px; }
.profile-detail-heading > div { min-width: 0; }
.profile-detail-heading .secondary-button { flex: 0 0 auto; color: var(--accent); border: 0; padding: 0 12px; font-size: .875rem; }
.detail-subtitle { color: var(--muted); font-size: .875rem; margin-top: 7px; }
.profile-policy { animation: none; }
.policy-list { gap: 0; grid-template-columns: 1fr; }
.policy-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 0; background: none; min-height: 72px; grid-template-columns: minmax(0,1fr) 24px; }
.policy-card:last-child { border-bottom: 0; }
.policy-card .radio-mark { grid-column: 2; grid-row: 1; width: 22px; height: 22px; }
.policy-card > span:last-child { grid-column: 1; grid-row: 1; }
.policy-card:has(input:checked) { background: none; border-color: var(--border); }
.policy-card strong { font-size: 1rem; font-weight: 500; }
.policy-card small, .default-route small, .resource-copy small { font-size: .8rem; line-height: 1.45; }
.vpn-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vpn-card { background: var(--panel-2); border: 1px solid transparent; border-radius: 16px; padding: 15px 42px 15px 15px; }
.vpn-card strong { font-size: 1rem; font-weight: 600; }
.vpn-card small { font-size: .8rem; }
.vpn-card:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: none; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.vpn-card:has(input:checked)::after { right: 16px; top: 22px; }
.switch { width: 50px; height: 30px; }
.switch-track { background: var(--border); }
.switch-track::after { width: 24px; height: 24px; box-shadow: 0 1px 3px #0002; }
.switch input:checked + .switch-track { background: #34c759; }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch:has(input:focus-visible), .policy-card:has(input:focus-visible), .vpn-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select { font-size: 1rem; }
select { min-height: 44px; }
.resource-copy strong { font-size: 1rem; font-weight: 500; }
.resource-row { padding: 16px 0; }
.save-button { box-shadow: none; font-weight: 600; }
.save-button, .secondary-button { border-radius: 16px; min-height: 48px; }
.profile-policy .save-dock { padding: 20px 0 0; }
.save-dock p, .save-status { font-size: .8rem; }
.profile-dialog { background: var(--panel); border: 0; border-radius: 28px; padding: 22px; box-shadow: 0 24px 70px #0003; }
.profile-dialog::backdrop { background: #0006; backdrop-filter: blur(5px); }
.dialog-head h2 { overflow-wrap: anywhere; }
.dialog-head .icon-button { border: 0; border-radius: 50%; background: var(--panel-2); font-size: 1.5rem; }
.profile-actions { margin-top: 12px; }
.profile-action-button { font-size: 1rem; min-height: 52px; font-weight: 500; }
.create-profile-form > label, .inline-form label { font-size: .875rem; }
.dialog-hint, .copy-result, .form-hint { font-size: .8rem; line-height: 1.5; }
.admin-view .section { padding: 18px; border-radius: 22px; }
.admin-view .admin-hero { padding: 0 4px 14px; background: none; margin-top: 0; }
.admin-hero h2 { font-size: 1.8rem; font-weight: 700; }
.admin-hero .eyebrow { display: none; }
.admin-hero > div > p:last-child { font-size: .875rem; }
.admin-stats { gap: 10px; }
.stat-card { border: 0; border-radius: 18px; }
.admin-view .stat-card { padding: 15px 12px; }
.admin-view .stat-card strong { font-size: 1.6rem; }
.stat-card span { font-size: .75rem; white-space: normal; overflow: visible; }
.admin-item { border: 0; background: var(--panel-2); }
.admin-item-copy strong, .admin-user-link { font-size: 1rem; }
.admin-item-copy small, .egress-admin-card small { font-size: .8rem; }
.mini-button { min-height: 44px; font-size: .8rem; font-weight: 500; border: 0; padding: 8px 12px; }
.traffic-summary { flex-wrap: wrap; }
.traffic-summary span, .egress-traffic span, .catalog-chip { font-size: .8rem; }
.status-pill { font-size: .75rem; font-weight: 500; }
.admin-status { bottom: calc(92px + env(safe-area-inset-bottom)); background: var(--panel); box-shadow: 0 6px 30px #0002; }
.admin-egresses { grid-template-columns: 1fr; }
.egress-admin-card { border: 0; background: var(--panel-2); }
.admin-routing-dialog .resource-list { overflow-wrap: anywhere; }
@media(min-width:600px) { .shell { padding-left: 28px; padding-right: 28px; } .vpn-options, .admin-egresses { grid-template-columns: 1fr 1fr; } }
@media(max-width:359px) { .shell { padding-left: 14px; padding-right: 14px; } .profile-swipe-content { padding: 15px; } .profile-detail-heading { flex-wrap: wrap; } .profile-card-footer { gap: 6px; } .profile-open { font-size: .75rem; } .admin-stats { grid-template-columns: 1fr; } }

#web-login p { line-height: 1.5; }
#web-login-command { display: block; margin: 20px 0; font-size: 19px; user-select: all; -webkit-user-select: all; }
#web-logout { display: block; margin: 12px 0; }
#web-logout.hidden { display: none; }
.resource-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resource-admin-select { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.resource-admin-select input { margin-top: 4px; width: 20px; height: 20px; flex-shrink: 0; }
.resource-admin-select span { overflow-wrap: anywhere; }
.resource-admin-select small { display: block; color: var(--muted); margin-top: 5px; }
.resource-admin-row > button { flex-shrink: 0; }
.global-rule-actions { display: grid; gap: 10px; margin: 16px 0; }
.global-rule-actions select, .resource-editor input, .resource-editor textarea { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; }
.resource-editor { display: grid; gap: 10px; }
.resource-editor textarea { resize: vertical; }

#admin-resource-dialog { max-height: 90vh; overflow-y: auto; }

.broadcast-form { display: grid; gap: 8px; }
.broadcast-form > label:not(.broadcast-check) { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.broadcast-form textarea, .broadcast-form select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; }
.broadcast-form textarea { resize: vertical; min-height: 110px; }
.broadcast-counter { justify-self: end; color: var(--muted); font-size: .75rem; }
.broadcast-counter.over { color: var(--danger); }
.broadcast-text-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.broadcast-check { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: .9rem; }
.broadcast-check input { width: 20px; height: 20px; flex-shrink: 0; }
.broadcast-form .form-hint { margin-top: 0; }
.broadcast-history { margin-top: 12px; }
.broadcast-text { display: block; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; max-height: 7.5em; overflow: hidden; }
.broadcast-progress { height: 6px; margin-top: 10px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.broadcast-progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.broadcast-picker { display: grid; gap: 8px; }
.broadcast-picker-head { display: flex; align-items: center; gap: 8px; }
.broadcast-picker-head input { flex: 1; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; }
.broadcast-picker-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.broadcast-users { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.broadcast-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; }
.broadcast-user:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.broadcast-user input { width: 20px; height: 20px; flex-shrink: 0; }
.broadcast-user span { min-width: 0; overflow-wrap: anywhere; }
.broadcast-user small { display: block; color: var(--muted); font-size: .75rem; }

/* Routing granted per user by the administrator; account tab with tariffs, service info and documents. */
.routing-locked-note { display: none; }
#policy-form.routing-locked .routing-only { display: none !important; }
#policy-form.routing-locked .routing-locked-note { display: block; }
.routing-locked-note h2 { margin-bottom: 8px; }
.routing-locked-note .form-hint { font-size: .875rem; line-height: 1.5; }
.tariff-list { display: grid; gap: 12px; }
.tariff-card { padding: 16px; border-radius: 18px; background: var(--panel-2); }
.tariff-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tariff-head strong { font-size: 1.05rem; font-weight: 600; }
.tariff-badge { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); font-size: .72rem; font-weight: 600; }
.tariff-features { margin: 10px 0 6px; padding-left: 18px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.tariff-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.tariff-row span strong, .tariff-row span small { display: block; }
.tariff-row span strong { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tariff-row span small { color: var(--muted); font-size: .78rem; }
.tariff-pay { flex: 0 0 auto; min-height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-size: .875rem; font-weight: 600; cursor: pointer; }
.tariff-pay:disabled { opacity: .6; cursor: default; }
#tariff-status:empty { display: none; }
#tariff-status { margin-top: 12px; }
.account-view .profiles-toolbar { margin-bottom: 18px; }
.tariffs-section .section-heading .form-hint { margin-top: 6px; font-size: .82rem; }
.account-list { padding: 4px 0; }
.account-row { display: block; color: var(--text); text-decoration: none; }
.account-row + .account-row { border-top: 1px solid var(--border); }
.account-row > summary, .account-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 18px; cursor: pointer; list-style: none; }
.account-row > summary::-webkit-details-marker { display: none; }
.account-icon { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); font-size: .9rem; font-weight: 600; }
.account-label { flex: 1; min-width: 0; font-size: .95rem; }
.account-label small { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; }
.account-chevron { display: inline-block; color: var(--muted); font-size: 1.2rem; transition: transform .2s ease; }
.account-details[open] .account-chevron { transform: rotate(90deg); }
.account-details > .form-hint { margin: 0; padding: 0 18px 16px 60px; font-size: .875rem; line-height: 1.55; }
.account-details > .form-hint + .form-hint { margin-top: -8px; }
#install-help .form-hint { overflow-wrap: anywhere; }
#install-help .copy-row { margin: -8px 0 0; padding: 0 18px 16px 60px; }
#install-help .copy-value { display: flex; align-items: center; min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-2); font-size: .85rem; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
@media (prefers-reduced-motion: reduce) { .account-chevron { transition: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.support-form { display: grid; gap: 10px; padding: 0 18px 16px 60px; }
.support-form textarea { width: 100%; min-height: 104px; resize: vertical; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); color: var(--text); font: inherit; font-size: .95rem; line-height: 1.45; }
.support-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.support-form .tariff-pay { justify-self: start; }
.support-form .form-hint { margin: 0; font-size: .82rem; }
.support-form .form-hint:empty { display: none; }
@media (max-width: 380px) { .support-form, .account-details > .form-hint, #install-help .copy-row { padding-left: 18px; } }
.lan-badge { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--success) 14%, var(--panel)); color: var(--success); font-size: .78rem; font-weight: 600; }
.plan-chip { display: inline-flex; align-items: center; min-height: 32px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.plan-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.plan-switch > span { margin-right: 4px; color: var(--muted); font-size: .8rem; }
.plan-option { min-height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: .8rem; font-weight: 600; cursor: pointer; }
.plan-option.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent); cursor: default; opacity: 1; }
.plan-term-admin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.plan-term-admin > span { margin-right: 4px; }
.plan-term-admin strong { color: var(--text); font-weight: 600; }
.plan-term-admin strong.expired { color: var(--danger); }
.admin-payments { margin-top: 8px; font-size: .8rem; }
.admin-payments summary { cursor: pointer; color: var(--muted); min-height: 34px; display: flex; align-items: center; }
.admin-payments ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.admin-payments li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); }
.admin-payments li strong { white-space: nowrap; font-weight: 600; text-align: right; }
.payment-problem { display: block; font-style: normal; font-size: .72rem; color: var(--danger); font-weight: 600; }
.device-address { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.device-address small { display: block; color: var(--muted); font-size: .75rem; }
.device-address strong { display: block; margin-top: 2px; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; user-select: all; }
.device-lan #device-lan-status:empty { display: none; }
.device-lan #device-lan-status { margin: 10px 0 0; }
.card-lan { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.card-lan:has(input:disabled) { cursor: default; }
.card-lan .switch input:disabled + .switch-track { opacity: .55; }
.card-lan-copy { min-width: 0; }
.card-lan-copy strong, .card-lan-copy small { display: block; overflow-wrap: anywhere; }
.card-lan-copy strong { font-size: .9rem; font-weight: 500; }
.card-lan-copy small { margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.plan-chip.expired, .plan-term.expired { color: var(--danger); }
.plan-chip.expired { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.plan-term { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.plan-expired { display: grid; gap: 8px; margin: 0 0 14px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)) !important; }
.plan-expired strong { font-size: 1rem; }
.plan-expired .form-hint { margin: 0; font-size: .85rem; }
.plan-expired .tariff-pay { justify-self: start; }
.admin-users-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.admin-users-heading { margin: 0; }
.admin-users-toggle { font: inherit; }
.admin-users-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.admin-users-toggle:disabled { cursor: default; }
.admin-users-toggle.detail .admin-users-summary, .admin-users-toggle.detail .account-chevron { display: none; }
.admin-users-summary { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
#users-online-count { color: var(--success); }
.admin-users-toggle[aria-expanded="true"] .account-chevron { transform: rotate(90deg); }
.admin-users-section > #admin-users-back { margin-bottom: 8px; }
.admin-users-section > #admin-users:not(.hidden) { margin-top: 12px; }
#admin-egresses:not(.hidden) { margin-top: 12px; }
.admin-overview > .eyebrow + .admin-users-heading { margin-top: 2px; }
/* Compact broadcast history */
.broadcast-item { padding: 12px 14px; border-radius: 16px; background: var(--panel-2); }
.broadcast-item + .broadcast-item { margin-top: 8px; }
.broadcast-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.broadcast-to { min-width: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.broadcast-to small { margin-right: 4px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.broadcast-head time { flex: 0 0 auto; color: var(--muted); font-size: .75rem; }
.broadcast-item .broadcast-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0; font-size: .88rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.broadcast-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.broadcast-status { font-size: .75rem; color: var(--muted); }
.broadcast-status.ok { color: var(--success); }
.broadcast-status.danger { color: var(--danger); }
.broadcast-actions { display: inline-flex; gap: 14px; }
.link-button { padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.link-button.danger { color: var(--danger); }
.link-button:disabled { opacity: .5; cursor: default; }
.broadcast-recipients { margin-top: 6px; font-size: .78rem; }
.broadcast-recipients summary { color: var(--muted); cursor: pointer; }
.broadcast-recipients ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.broadcast-recipients li span { margin-right: 4px; }
.broadcast-recipients li.sent span { color: var(--success); }
.broadcast-recipients li.failed { color: var(--danger); }
/* Admin chats */
#admin-chats:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
.chat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--panel-2); color: var(--text); text-align: left; cursor: pointer; }
.chat-row-copy { min-width: 0; flex: 1; }
.chat-row-copy strong { display: block; font-size: .9rem; font-weight: 600; }
.chat-row-copy strong small { color: var(--muted); font-weight: 500; }
.chat-row-copy > small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-end { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.chat-row-end time { color: var(--muted); font-size: .72rem; }
.chat-dialog { width: min(calc(100% - 20px), 520px); }
.chat-thread { display: flex; flex-direction: column; gap: 8px; max-height: min(62vh, 560px); margin-top: 12px; padding: 4px 2px; overflow-y: auto; }
.chat-message { max-width: 82%; padding: 8px 12px; border-radius: 16px; background: var(--panel-2); }
.chat-message p { margin: 0; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message time, .chat-label { display: block; color: var(--muted); font-size: .7rem; }
.chat-message time { margin-top: 4px; text-align: right; }
.chat-label { margin-bottom: 2px; font-weight: 600; }
.chat-message.in { align-self: flex-start; border-bottom-left-radius: 6px; }
.chat-message.out { align-self: flex-end; border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.chat-message.broadcast { align-self: center; max-width: 92%; border: 1px dashed var(--border); background: transparent; }
.chat-message.unknown p { color: var(--muted); font-style: italic; }
.chat-hint { margin: 10px 0 0; font-size: .78rem; }
.admin-collapsible:not(.hidden) { margin-top: 12px; }
.broadcast-item.has-chat { cursor: pointer; }
.broadcast-item.has-chat:active { background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); }
.recipient-chat { padding: 0; font-size: inherit; font-weight: 500; color: inherit; }
.broadcast-recipients li.failed .recipient-chat { color: var(--danger); }
.chat-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.chat-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); color: var(--text); font: inherit; font-size: .92rem; line-height: 1.4; }
.chat-send { flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 1.1rem; cursor: pointer; }
.chat-send:disabled { opacity: .6; cursor: default; }
#admin-default-policy { width: 100%; margin: 12px 0 8px; font: inherit; }

/* Referral program */
.tariff-offer { margin: 0 0 12px; padding: 10px 12px; border-radius: 11px; background: var(--panel-2); font-size: .86rem; }
.tariff-offer a { color: inherit; }
.tariff-row s { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: 6px; }
.referral-body { display: grid; gap: 10px; padding: 0 18px 16px 60px; }
.referral-body .form-hint { margin: 0; }
#referral-terms { padding-bottom: 12px; }
#referral-status:empty { display: none; }
@media (max-width: 380px) { .referral-body { padding-left: 18px; } }
.profiles-extra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.profiles-extra-button { flex: 1 1 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); color: var(--text); font: inherit; font-size: .9rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.profiles-extra-button.hidden { display: none; }
.profiles-extra-button:active { transform: translateY(1px); }
.profiles-extra-icon { display: grid; place-items: center; color: var(--accent); }
.profiles-extra-button.channel .profiles-extra-icon { color: #2aabee; }
.referral-body .copy-row input { font-size: .82rem; }
.referral-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.referral-actions .tariff-pay, .referral-actions .secondary-button { flex: 1 1 100%; min-height: 44px; }
.referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.referral-stats div { padding: 10px; border-radius: 11px; background: var(--panel-2); text-align: center; }
.referral-stats strong { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.referral-stats span { color: var(--muted); font-size: .74rem; }
.admin-referral-form { display: grid; gap: 8px; margin-top: 8px; }
.admin-referral-form input[type="number"] { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; background: var(--panel-2); color: var(--text); }
.admin-referral-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.admin-referral-toggle input { width: 20px; height: 20px; }
.admin-referral-info { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
.client-apps { display: grid; gap: 8px; padding: 0 18px 14px 60px; }
.client-app-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-2); color: var(--text); font-weight: 650; font-size: .9rem; text-decoration: none; }
.client-app-link small { color: var(--muted); font-size: .74rem; font-weight: 500; }
.client-app-link:active { transform: translateY(1px); }
@media (max-width: 380px) { .client-apps { padding-left: 18px; } }

/* Rule origin badges and presets (folders of rules made by dragging one rule onto another). */
#resources { grid-template-columns: minmax(0, 1fr); }
.rule-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 600; line-height: 1.5; vertical-align: .08em; white-space: nowrap; letter-spacing: 0; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.rule-badge.mine { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.rule-badge.shared { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.rule-badge.global { background: color-mix(in srgb, #e3a008 18%, transparent); color: #c98a00; }
.resource-row.fixed strong { font-size: .92rem; }
.resource-drag-hint { margin: 12px 0 2px; }
#resources .resource-row[data-resource] .resource-copy, .drag-handle { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.drag-handle { flex: 0 0 auto; display: grid; place-items: center; width: 18px; min-height: 36px; margin: -4px 0 -4px -4px; color: var(--muted); opacity: .5; cursor: grab; touch-action: none; }
.routing-locked .drag-handle { display: none; }
.resource-row { transition: background .15s ease, box-shadow .15s ease, opacity .15s ease; border-radius: 2px; }
.resource-row.drag-source { opacity: .3; }
.resource-row.drop-target { border-radius: 14px; background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 13%, transparent); }
.preset-leave { flex: 0 0 auto; margin-right: auto; min-height: 36px; padding: 0; white-space: nowrap; }
.resource-action:has(.preset-leave) { justify-content: space-between; }

.preset { margin: 12px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 20px; background: color-mix(in srgb, var(--accent) 5%, var(--panel-2)); transition: box-shadow .15s ease, transform .15s ease; }
.preset:first-child { margin-top: 4px; }
.preset.drop-target { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.015); }
.preset-head { display: flex; align-items: center; gap: 10px; }
.preset-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.preset-toggle .resource-copy { min-width: 0; }
.preset-toggle small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-icon { flex: 0 0 44px; height: 44px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 3px; padding: 5px; border-radius: 13px; background: color-mix(in srgb, var(--muted) 20%, var(--panel)); }
.preset-icon span { display: grid; place-items: center; border-radius: 5px; background: var(--panel); color: var(--accent); font-size: .62rem; font-weight: 700; line-height: 1; }
.preset-chevron { flex: 0 0 auto; color: var(--muted); transition: transform .2s ease; }
.preset.open .preset-chevron { transform: rotate(90deg); }
.preset > .resource-action { margin-top: 10px; }
.preset-mixed { margin-right: auto; font-size: .75rem; }
.preset:not(.enabled) .preset-route { opacity: .38; pointer-events: none; }
.preset-body { display: none; margin-top: 12px; border-top: 1px solid var(--border); }
.preset.open .preset-body { display: block; }
.preset-tools { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; }
.preset-name { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); color: var(--text); }
.preset-tools .profile-action-button { flex: 0 0 auto; padding: 0 4px; }
.preset-body .resource-row:last-child { padding-bottom: 2px; }
.switch input:indeterminate + .switch-track { background: color-mix(in srgb, var(--accent) 50%, #3b4557); }
.switch input:indeterminate + .switch-track::after { transform: translateX(9px); }

.rule-drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; max-width: min(78vw, 300px); padding: 10px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 18px 44px rgba(0,0,0,.32); pointer-events: none; font-size: .9rem; }
.rule-drag-ghost strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-drag-ghost small { display: block; color: var(--accent); font-size: .75rem; margin-top: 2px; }
.rule-drag-ghost small:empty { display: none; }
.rule-drag-ghost.leaving small { color: var(--danger); }
body.rule-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
@keyframes rule-jiggle { 0%, 100% { transform: rotate(-.35deg); } 50% { transform: rotate(.35deg); } }
@media (prefers-reduced-motion: no-preference) {
  body.rule-dragging #resources .resource-row[data-resource]:not(.drag-source):not(.drop-target) { animation: rule-jiggle .3s ease-in-out infinite; }
  body.rule-dragging #resources .resource-row[data-resource]:nth-child(even):not(.drag-source) { animation-delay: -.15s; }
}
.resource-action:has(.preset-leave) .resource-route { flex: 0 0 auto; }

/* Subscription (Happ) screens */
.sub-card { display: grid; gap: 12px; }
.sub-status { display: flex; align-items: center; gap: 12px; }
.sub-status .network-dot { width: 10px; height: 10px; }
.sub-status-copy { display: grid; gap: 2px; min-width: 0; }
.sub-status-copy small { color: var(--muted); font-size: .8rem; }
.sub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-actions .secondary-button { width: 100%; padding: 0 12px; }
.sub-card .form-hint { margin-top: 0; }
.steps { display: grid; gap: 12px; margin: 4px 0 14px; padding-left: 22px; }
.steps li { display: grid; gap: 2px; padding-left: 4px; }
.steps small { color: var(--muted); font-size: .8rem; }
.section > .client-apps { padding: 0; }
.device-list { display: grid; gap: 10px; margin-top: 14px; }
.device-row { display: flex; align-items: center; gap: 12px; padding: 14px; background: color-mix(in srgb, var(--panel) 95%, transparent); border: 1px solid var(--border); border-radius: 20px; }
.device-row-copy { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.device-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-row-copy small { color: var(--muted); font-size: .76rem; }
.device-row .mini-button { flex: 0 0 auto; }
.form-hint.error, #admin-panel-status.error { color: var(--danger); }
a.save-button { display: grid; place-items: center; text-decoration: none; }
.state-card .secondary-button { width: 100%; margin-top: 10px; }
/* Four tabs (with «Управление») fit one row on a phone. */
.main-tabs { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; padding-left: 10px; padding-right: 10px; }
.steps { list-style: none; counter-reset: step; padding-left: 0; }
.steps li { position: relative; padding-left: 38px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--accent); font-size: .8rem; font-weight: 700; }