:root {
  --bg: #040812;
  --panel: rgba(4, 13, 24, 0.78);
  --panel-2: rgba(8, 25, 43, 0.74);
  --text: #edf6ff;
  --muted: #bdd0df;
  --line: rgba(255, 69, 92, 0.36);
  --ok: #ff4d68;
  --danger: #e16476;
  --brand: #ffb12b;
  --brand-2: #ff6d1a;
  --button-text: #0b0803;
  --glow: rgba(255, 55, 83, 0.44);
}

:root[data-theme="light"] {
  --bg: #122116;
  --panel: rgba(19, 58, 39, 0.72);
  --panel-2: rgba(31, 82, 48, 0.7);
  --text: #fff8dc;
  --muted: #e4e8cf;
  --line: rgba(255, 192, 85, 0.44);
  --brand: #ffc633;
  --brand-2: #ff8a00;
  --button-text: #090604;
  --glow: rgba(255, 165, 24, 0.46);
}

* {
  box-sizing: border-box;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 177, 61, 0); }
  50% { box-shadow: 0 0 20px 2px rgba(255, 177, 61, 0.24); }
  100% { box-shadow: 0 0 0 0 rgba(255, 177, 61, 0); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

body {
  margin: 0;
  font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  line-height: 1.45;
  background:
    linear-gradient(180deg, rgba(1, 5, 12, 0.28), rgba(1, 5, 12, 0.72)),
    radial-gradient(760px 420px at 52% 22%, rgba(62, 145, 214, 0.18), transparent 66%),
    radial-gradient(520px 260px at 13% 77%, rgba(255, 32, 78, 0.18), transparent 68%),
    radial-gradient(520px 260px at 88% 80%, rgba(255, 32, 78, 0.16), transparent 68%),
    url("/static/night-forest-bg-new.png") center / cover fixed no-repeat,
    var(--bg);
}

:root[data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(9, 35, 20, 0.34), rgba(7, 24, 16, 0.58)),
    radial-gradient(900px 520px at 50% 18%, rgba(255, 216, 120, 0.18), transparent 62%),
    url("/static/forest-bg-new.png") center / cover fixed no-repeat,
    var(--bg);
}

.container {
  width: 100%;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

.topbar {
  background: rgba(4, 9, 17, 0.78);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}

:root[data-theme="light"] .topbar {
  background: rgba(20, 60, 37, 0.64);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 250px;
}

.brand-logo {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
  border: 2px solid rgba(255, 219, 71, 0.98);
  background: #07130f;
  box-shadow: 0 0 0 1px rgba(255, 142, 0, 0.38), 0 0 24px rgba(255, 198, 51, 0.62);
}

.brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  display: block;
}

.brand small {
  color: #c8d9e7;
  font-size: 12px;
  font-weight: 600;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 18px rgba(255, 68, 92, 0.82);
}

.nav {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.menu-toggle {
  display: none;
  border: 1px solid var(--brand-2);
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: var(--button-text);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}

.nav a:hover {
  color: var(--button-text);
  background: rgba(255, 177, 43, 0.94);
}

.topbar-actions {
  min-width: 80px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(12, 32, 24, 0.68);
  color: var(--muted);
  font-size: 12px;
  transition: border-color 180ms ease, opacity 180ms ease;
}

:root[data-theme="light"] .status-pill {
  background: rgba(255, 255, 255, 0.92);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9aa681;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.status-dot.ok {
  background: #ffc342;
  box-shadow: 0 0 12px rgba(255, 195, 66, 0.86);
  animation: pulseGlow 2.3s ease-in-out infinite;
}

.status-dot.bad {
  background: #e16476;
  box-shadow: 0 0 10px rgba(225, 100, 118, 0.55);
}

.status-pill.loading {
  border-color: rgba(255, 183, 72, 0.28);
}

.status-pill.loading [data-status-text] {
  color: transparent;
  border-radius: 6px;
  min-width: 120px;
  background: linear-gradient(90deg, rgba(70, 102, 64, 0.24) 25%, rgba(255, 211, 128, 0.48) 50%, rgba(70, 102, 64, 0.24) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}

.theme-toggle {
  min-width: 68px;
}

.admin-monitor-link {
  white-space: nowrap;
}

.page-main {
  flex: 1 0 auto;
  padding-top: 28px;
  padding-bottom: 32px;
}

.hero {
  background: linear-gradient(140deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 0 0 1px rgba(255, 190, 91, 0.06) inset, 0 14px 34px rgba(0, 0, 0, 0.28);
}

.hero h1 {
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 34px;
}

.hero p {
  max-width: 820px;
  color: #d6dfcc;
}

.kicker {
  color: #ffd45f;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
  font-weight: 700;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card {
  margin-top: 20px;
  background: linear-gradient(160deg, rgba(5, 18, 33, 0.86), rgba(4, 10, 20, 0.84));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 190, 91, 0.05) inset;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 184, 76, 0.54);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 190, 91, 0.1) inset;
}

.narrow {
  max-width: 560px;
}

.form {
  display: grid;
  gap: 12px;
}

.row-form {
  grid-template-columns: 1fr 150px 190px 130px auto;
  align-items: end;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.dashboard-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-grid-single .dashboard-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.dashboard-tabs .tab-btn[data-tab-target="key"],
.dashboard-main > section[data-key-section][data-tab-section="key"] {
  display: none !important;
}

.tab-btn {
  border: 1px solid var(--line);
  background: rgba(14, 46, 33, 0.74);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.tab-btn:hover {
  color: var(--text);
  border-color: rgba(255, 184, 76, 0.54);
}

.tab-btn.active {
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: var(--button-text);
  border-color: rgba(255, 184, 76, 0.78);
  font-weight: 700;
}

.dashboard-main,
.dashboard-side {
  display: grid;
  gap: 0;
}

.profile-card h2 {
  margin: 0;
}

.profile-user {
  display: flex;
  gap: 12px;
  align-items: center;
}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #1e563d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-actions,
.profile-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.profile-actions {
  gap: 10px;
  margin-top: 18px;
}

.profile-status-row {
  gap: 8px;
  margin-top: 20px;
}

.profile-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

input,
select {
  border: 1px solid var(--line);
  background: rgba(9, 15, 30, 0.85);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 173, 50, 0.18), 0 0 18px rgba(255, 173, 50, 0.24);
}

.checkline {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
}

.checkline input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.btn {
  border: 1px solid var(--brand);
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: var(--button-text);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.btn:hover {
  background: linear-gradient(120deg, #ffd65f, var(--brand-2));
  border-color: var(--brand-2);
  box-shadow: 0 0 20px var(--glow);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.secondary {
  background: linear-gradient(120deg, #ffd65f, #ff8a00);
  border-color: #ff8a00;
  color: var(--button-text);
}

.btn.ghost {
  background: linear-gradient(120deg, rgba(255, 203, 58, 0.96), rgba(255, 136, 0, 0.94));
  color: var(--button-text);
  border-color: rgba(255, 217, 95, 0.96);
}

.btn.danger {
  background: linear-gradient(120deg, var(--danger), #cc3f56);
  border-color: #cc3f56;
  color: #fff;
}

.error {
  background: rgba(217, 91, 106, 0.16);
  border: 1px solid rgba(217, 91, 106, 0.45);
  color: #ffb5c0;
  border-radius: 10px;
  padding: 10px;
}

.success-note {
  background: rgba(36, 98, 61, 0.24);
  border: 1px solid rgba(255, 210, 89, 0.44);
  color: #fff0bf;
  border-radius: 10px;
  padding: 10px;
}

.payment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.payment-result {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.admin-wide-card {
  width: calc(100vw - 8px);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 14px;
}

.admin-wide-card:hover {
  transform: translateX(-50%) translateY(-1px);
}

.admin-bulkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-searchbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 420px) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-searchbar label {
  font-weight: 700;
  color: var(--text);
}

.admin-searchbar input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
}

.admin-select-all {
  width: auto;
  grid-template-columns: 18px auto;
  align-items: center;
}

.admin-users-table {
  min-width: 0;
  table-layout: fixed;
  font-size: 15px;
}

.admin-users-table th,
.admin-users-table td {
  padding: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-users-table input[type="email"],
.admin-users-table input[type="text"],
.admin-users-table input[type="password"] {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 14px;
}

.admin-users-table .password-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.admin-users-table input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 14px;
}

.admin-users-table .icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 8px;
}

.admin-users-table .btn {
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.admin-users-table .badge {
  max-width: 100%;
  white-space: nowrap;
}

.admin-users-table .small {
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-users-table .check-row {
  grid-template-columns: 16px auto;
  gap: 4px;
}

.admin-users-table .col-drag { width: 30px; }
.admin-users-table .col-select { width: 30px; }
.admin-users-table .col-id { width: 34px; }
.admin-users-table .col-email { width: 18%; }
.admin-users-table .col-name { width: 13%; }
.admin-users-table .col-password { width: 16%; }
.admin-users-table .col-access { width: 11%; }
.admin-users-table .col-days { width: 9%; }
.admin-users-table .col-device-limit { width: 5%; }
.admin-users-table .col-online { width: 8%; }
.admin-users-table .col-traffic { width: 9%; }
.admin-users-table .col-role { width: 8%; }
.admin-users-table .col-created { width: 11%; }
.admin-users-table .col-actions { width: 11%; }

.admin-wide-card .table-wrap {
  overflow-x: auto;
}

.key-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.key-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 24, 39, 0.78);
  padding: 14px;
  margin-top: 10px;
}

.key-card p {
  margin: 8px 0;
}

.key-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 740px;
  background: rgba(5, 15, 28, 0.86);
}

.card .table-wrap {
  overflow-x: hidden;
  max-width: 100%;
}

.card table {
  min-width: 0;
  table-layout: fixed;
}

.card th,
.card td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card .mono,
.card .break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-wide-card .table-wrap {
  overflow-x: auto;
}

.admin-wide-card .admin-users-table {
  width: 100%;
  min-width: 1980px;
}

.admin-wide-card .admin-users-table .col-drag { width: 28px; }
.admin-wide-card .admin-users-table .col-select { width: 26px; }
.admin-wide-card .admin-users-table .col-id { width: 30px; }
.admin-wide-card .admin-users-table .col-email { width: 13%; }
.admin-wide-card .admin-users-table .col-name { width: 8%; }
.admin-wide-card .admin-users-table .col-password { width: 10%; }
.admin-wide-card .admin-users-table .col-access { width: 10%; }
.admin-wide-card .admin-users-table .col-days { width: 7%; }
.admin-wide-card .admin-users-table .col-device-limit { width: 4%; }
.admin-wide-card .admin-users-table .col-online { width: 6%; }
.admin-wide-card .admin-users-table .col-traffic { width: 8%; }
.admin-wide-card .admin-users-table .col-role { width: 5%; }
.admin-wide-card .admin-users-table .col-created { width: 8%; }
.admin-wide-card .admin-users-table .col-actions { width: 17%; }

.admin-wide-card .admin-users-table th,
.admin-wide-card .admin-users-table td {
  word-break: normal;
}

.admin-wide-card .admin-users-table .btn.danger {
  padding-left: 8px;
  padding-right: 8px;
}

.admin-wide-card .admin-actions-row .btn {
  padding-left: 7px;
  padding-right: 7px;
  font-size: 13px;
}

.drag-handle {
  width: 24px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 177, 43, 0.14);
  color: var(--brand);
  cursor: grab;
  font-weight: 800;
}

.admin-users-table tr.is-dragging {
  opacity: 0.62;
}

.admin-users-table .admin-copy-key {
  margin-right: 0;
}

.admin-actions-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.admin-actions-row .inline-form {
  display: inline-flex;
  margin: 0;
}

.admin-actions-cell {
  overflow: visible !important;
}

.admin-filter-head th {
  padding: 4px;
  background: rgba(255, 177, 43, 0.08);
}

.admin-filter-head input,
.admin-filter-head select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 6px;
  font-size: 12px;
  border-radius: 7px;
}

.admin-filter-reset {
  width: 100%;
  padding: 7px 5px !important;
  font-size: 12px !important;
}

.referral-card .profile-head > div:first-child > p.muted {
  display: none;
}

.referral-terms-current {
  margin-top: 0;
}

.days-control {
  display: block;
}

.access-days-select {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 184, 76, 0.62);
  background: rgba(2, 13, 26, 0.76);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
}

.badge.danger-badge {
  background: rgba(225, 100, 118, 0.24);
  color: #ffd0d7;
  border: 1px solid rgba(225, 100, 118, 0.56);
}

.subscription-hours {
  border-color: rgba(255, 184, 76, 0.55);
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 10px;
  vertical-align: top;
}

th {
  font-size: 12px;
  color: #d3dff0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.break {
  word-break: break-all;
}

.inline-form {
  margin: 0;
}

.qr-row {
  margin-top: 10px;
}

.qr-image {
  width: 320px;
  height: 320px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
}

.qr-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 244, 216, 0.08);
  border: 1px solid rgba(255, 184, 76, 0.28);
}

.qr-frame.compact .qr-image {
  width: 180px;
  height: 180px;
}

.qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 1px dashed rgba(255, 184, 76, 0.46);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  padding: 18px;
  background: rgba(6, 20, 15, 0.2);
}

.copy-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.qr-actions form {
  margin: 0;
}

.grid.two {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.feature {
  border: 1px solid var(--line);
  background: rgba(7, 24, 42, 0.78);
  border-radius: 12px;
  padding: 14px;
}

.feature h4 {
  margin: 0 0 8px;
}

.feature p {
  margin: 0;
  color: var(--muted);
}

.tariffs-page {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.tariff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.tariff-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 24, 39, 0.78);
}

.tariff-card.featured {
  border-color: rgba(255, 177, 61, 0.72);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 177, 61, 0.12) inset;
}

.tariff-card h2 {
  margin: 0 0 8px;
}

.tariff-price {
  min-width: 140px;
  text-align: left;
}

.tariff-price strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: #ffdc73;
}

.tariff-price span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

:root[data-theme="light"] .tariff-card {
  background: rgba(16, 50, 35, 0.76);
}

.referral-card {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.referral-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.referral-link-source {
  position: static;
  width: auto;
  height: auto;
  padding: 12px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 14, 26, 0.66);
  color: var(--text);
  overflow-wrap: anywhere;
  font-family: "JetBrains Mono", "Consolas", monospace;
}

.subscription-card {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.subscription-link-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.subscription-link-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(4, 14, 26, 0.46);
}

.subscription-link-item .inline-form {
  margin: 0;
}

.subscription-link-source {
  position: static;
  width: auto;
  height: auto;
  padding: 10px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 14, 26, 0.66);
  color: var(--text);
  overflow-wrap: anywhere;
  white-space: normal;
  clip: auto;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.subscription-qr-frame {
  max-width: 292px;
  padding: 14px;
}

.subscription-qr-image {
  width: 260px;
  height: 260px;
}

.subscription-profile-list {
  display: grid;
  gap: 0;
}

.subscription-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 14px 0;
}

.subscription-profile-row:first-child {
  padding-top: 0;
}

.subscription-profile-row-reserve {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 24px;
}

.subscription-profile-copy {
  min-width: 0;
}

.subscription-profile-copy h3 {
  margin: 10px 0 8px;
}

.subscription-profile-copy .btn {
  margin-top: 12px;
}

.subscription-qr-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.subscription-qr-panel {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.subscription-qr-panel[hidden] {
  display: none;
}

.subscription-qr-toggle [data-qr-show][hidden] {
  display: none !important;
}

.qr-hide-btn {
  width: 100%;
  max-width: 220px;
}

.subscription-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.adblock-toggle-form,
.subscription-refresh-form {
  display: flex;
}

.subscription-refresh-form {
  justify-content: flex-end;
  margin: 0;
}

.scenario-grid {
  margin-top: 8px;
}

.scenario-grid .scenario-card {
  min-width: 0;
}

.auto-connect-form {
  margin-bottom: 14px;
}

.auto-connect-btn {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: var(--brand-2);
  color: var(--button-text);
}

.scenario-card {
  border: 1px solid var(--line);
  background: rgba(5, 24, 39, 0.78);
  border-radius: 12px;
  padding: 14px;
  transition: border-color 150ms ease, box-shadow 170ms ease;
}

.qr-profile-card {
  align-items: flex-start;
}

.scenario-card:hover {
  border-color: rgba(255, 184, 76, 0.55);
  box-shadow: 0 0 20px rgba(255, 177, 61, 0.14);
}

.scenario-card h4 {
  margin: 0 0 8px;
}

.device-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.device-choice form {
  margin-top: 4px;
}

.device-key-line {
  margin: 0;
  font-size: 13px;
  color: #d9e4cb;
}

.device-sub-line {
  margin: 2px 0 4px;
  font-size: 11px;
  opacity: 0.92;
}

.small {
  font-size: 12px;
}

.device-figure {
  position: relative;
  width: 78px;
  height: 78px;
  margin-bottom: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 184, 76, 0.48);
  background: linear-gradient(160deg, rgba(23, 65, 96, 0.42), rgba(255, 61, 95, 0.1));
  box-shadow: inset 0 0 18px rgba(255, 61, 95, 0.13);
}

.device-figure.phone {
  width: 52px;
  height: 84px;
  border-radius: 12px;
}

.device-phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255, 214, 139, 0.82);
}

.device-phone-home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255, 214, 139, 0.62);
}

.device-figure.desktop {
  width: 88px;
  height: 70px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-screen {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 195, 95, 0.58);
  background: linear-gradient(160deg, rgba(9, 32, 56, 0.92), rgba(22, 67, 98, 0.66));
}

.device-stand {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255, 214, 139, 0.82);
}

.client-help {
  display: grid;
  gap: 10px;
}

.client-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(7, 24, 42, 0.78);
  transition: border-color 150ms ease, transform 120ms ease;
}

.client-item h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.client-item p {
  margin: 0 0 10px;
}

.client-item:hover {
  border-color: rgba(255, 184, 76, 0.52);
  transform: translateY(-1px);
}

.client-download {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
}

.advanced-block {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}

.advanced-block summary {
  cursor: pointer;
  color: #d8c99b;
}

.compact-top {
  margin-top: 12px;
}

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

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.badge.ok {
  background: rgba(47, 207, 159, 0.2);
  color: #95f0d1;
  border: 1px solid rgba(47, 207, 159, 0.4);
}

.badge.muted {
  background: rgba(155, 168, 199, 0.15);
  color: #c3d0ea;
  border: 1px solid rgba(155, 168, 199, 0.3);
}

.footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
  background: rgba(4, 9, 17, 0.78);
  backdrop-filter: blur(12px);
}

:root[data-theme="light"] .footer {
  background: rgba(20, 60, 37, 0.64);
}

.footer-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.footer-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.footer-docs a {
  border: 1px solid rgba(255, 190, 91, 0.42);
  border-radius: 999px;
  padding: 7px 11px;
  color: #ffdc73;
  background: rgba(8, 29, 50, 0.66);
  text-decoration: none;
  font-weight: 700;
}

.footer-docs a:hover {
  color: var(--button-text);
  background: rgba(255, 196, 46, 0.96);
}

.footer-support {
  color: #d7e6f4;
  font-weight: 700;
}

.footer-support a {
  color: #ffdc73;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 220, 115, 0.45);
}

.footer-support a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

:root[data-theme="light"] .card {
  background: linear-gradient(160deg, rgba(13, 36, 26, 0.84), rgba(8, 27, 21, 0.82));
}

:root[data-theme="light"] .hero {
  background: linear-gradient(140deg, var(--panel), var(--panel-2));
}

:root[data-theme="light"] table {
  background: rgba(11, 32, 24, 0.86);
}

:root[data-theme="light"] th {
  color: #d8c99b;
}

:root[data-theme="light"] .key-card {
  background: #102d22;
}

:root[data-theme="light"] .feature {
  background: rgba(17, 50, 35, 0.82);
}

:root[data-theme="light"] .scenario-card {
  background: rgba(16, 50, 35, 0.76);
}

:root[data-theme="light"] .client-item {
  background: rgba(14, 45, 32, 0.78);
}

:root[data-theme="light"] .device-figure {
  background: linear-gradient(160deg, rgba(39, 96, 56, 0.36), rgba(255, 177, 61, 0.1));
  box-shadow: inset 0 0 18px rgba(255, 177, 61, 0.12);
}

:root[data-theme="light"] .device-screen {
  background: linear-gradient(160deg, rgba(15, 54, 34, 0.92), rgba(45, 104, 57, 0.66));
}

:root[data-theme="light"] .footer-docs a {
  background: rgba(18, 55, 34, 0.62);
}

:root[data-theme="light"] .footer-support {
  color: #f1e9bf;
}

.action-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  max-width: min(88vw, 360px);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.action-toast.ok {
  color: #bdf6e4;
  background: rgba(22, 68, 55, 0.9);
  border-color: rgba(47, 207, 159, 0.42);
}

.action-toast.error {
  color: #ffd0d7;
  background: rgba(89, 31, 43, 0.92);
  border-color: rgba(225, 100, 118, 0.48);
}

.action-toast.show {
  opacity: 1;
  transform: translateY(0);
}

a {
  color: #ffd45f;
}

.admin-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 35;
  min-width: 88px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
}

.document-page {
  max-width: 980px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.96);
  color: #172018;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  min-height: 78vh;
  padding: 64px 74px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.legal-document {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.7;
}

.legal-document h1 {
  margin-top: 0;
  font-size: 34px;
}

.legal-document h2 {
  margin-top: 28px;
}

.doc-meta {
  color: #546054;
  font-size: 14px;
}

.document-page .muted,
.document-page p,
.document-page h2,
.document-page h3 {
  color: #172018;
}

.document-page a {
  color: #b35f0a;
}

.monitor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.xui-monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(680px, 1fr));
  gap: 18px;
  margin-top: 20px;
  width: min(calc(100vw - 24px), 1880px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.xui-monitor-hero {
  width: min(calc(100vw - 24px), 1880px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.xui-monitor-hero:hover {
  transform: translateX(-50%) translateY(-1px);
}

.xui-node-card {
  margin-top: 0;
  min-width: 0;
}

.xui-node-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.xui-node-head h3 {
  margin: 0 0 4px;
}

.xui-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.xui-metric,
.xui-panel {
  border: 1px solid rgba(225, 58, 90, 0.52);
  border-radius: 10px;
  background: rgba(5, 24, 39, 0.78);
  padding: 12px;
  min-width: 0;
}

:root[data-theme="light"] .xui-metric,
:root[data-theme="light"] .xui-panel {
  border-color: rgba(255, 184, 76, 0.42);
  background: rgba(16, 50, 35, 0.76);
}

.xui-metric span,
.xui-metric small {
  display: block;
  color: var(--muted);
  white-space: nowrap;
}

.xui-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
}

.xui-panel-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.xui-panel h4 {
  margin: 0 0 8px;
  color: var(--text);
}

.xui-panel p {
  margin: 6px 0;
}

.xui-nowrap,
.xui-panel,
.xui-metric,
.xui-inbounds-wrap th,
.xui-inbounds-wrap td {
  white-space: nowrap;
}

.xui-port-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.xui-inbounds-wrap {
  margin-top: 12px;
  background: rgba(4, 14, 26, 0.72);
  overflow-x: visible;
}

.xui-inbounds-wrap table {
  font-size: 13px;
  table-layout: auto;
  min-width: 100%;
}

.xui-inbounds-wrap th,
.xui-inbounds-wrap td {
  padding: 8px;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1180px) {
  .topbar-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .topbar-actions {
    margin-left: auto;
    width: 100%;
    justify-content: flex-start;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav {
    width: 100%;
    display: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #102d22;
    padding: 8px;
    margin-top: 4px;
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    width: 100%;
  }

  .grid.two {
    grid-template-columns: 1fr;
  }

  .row-form {
    grid-template-columns: 1fr;
  }

  .profile-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid-single .dashboard-side {
    grid-template-columns: 1fr;
  }

  .admin-searchbar {
    grid-template-columns: 1fr;
  }

  .tariff-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 28px;
  }

  .key-cards {
    display: block;
  }

  .footer-inner {
    min-height: auto;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-docs {
    align-items: stretch;
    flex-direction: column;
  }

  .action-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }

  .admin-float {
    right: 12px;
    bottom: 12px;
  }

  .document-page {
    padding: 28px 22px;
  }

  .xui-monitor-grid,
  .xui-metric-grid,
  .xui-panel-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background-attachment: scroll;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }

  .page-main {
    padding-top: 10px;
    padding-bottom: 18px;
  }

  .topbar {
    position: relative;
  }

  .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .brand-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .brand strong {
    font-size: 17px;
    line-height: 1.05;
    white-space: nowrap;
  }

  .brand small {
    display: none;
  }

  .menu-toggle {
    margin: 0;
    padding: 7px 10px;
    align-self: center;
  }

  .topbar-actions {
    width: auto;
    min-width: 0;
    margin: 0;
    grid-column: 1 / -1;
    gap: 6px;
  }

  .topbar-actions .btn {
    padding: 7px 11px;
    font-size: 13px;
  }

  .nav {
    grid-column: 1 / -1;
    margin: 0;
    padding: 6px;
    gap: 2px;
  }

  .nav a {
    padding: 8px 10px;
    font-size: 14px;
  }

  .hero,
  .card {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
  }

  .card:hover,
  .hero:hover {
    transform: none;
  }

  .hero h1 {
    font-size: 25px;
    line-height: 1.15;
  }

  h2 {
    font-size: 21px;
  }

  h3 {
    font-size: 18px;
  }

  p,
  li {
    font-size: 14px;
  }

  .profile-user {
    align-items: flex-start;
  }

  .avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .profile-user h2 {
    overflow-wrap: anywhere;
  }

  .profile-user .muted {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
  }

  .profile-meta,
  .payment-strip,
  .profile-actions,
  .profile-status-row,
  .qr-actions,
  .referral-stats {
    gap: 6px;
  }

  .badge {
    max-width: 100%;
    padding: 5px 8px;
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .payment-strip form,
  .payment-strip .btn,
  .profile-actions form,
  .profile-actions .btn {
    flex: 1 1 135px;
  }

  .btn {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 13px;
  }

  .referral-card,
  .dashboard-tabs,
  .dashboard-grid,
  .dashboard-main,
  .dashboard-side {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .referral-link-source {
    font-size: 12px;
    padding: 9px;
  }

  .subscription-link-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .subscription-link-source {
    font-size: 11px;
    padding: 9px;
  }

  .subscription-qr-frame {
    max-width: 100%;
  }

  .subscription-qr-image {
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 1;
  }

  .dashboard-tabs {
    gap: 5px;
    margin-top: 12px;
  }

  .tab-btn {
    padding: 7px 10px;
    font-size: 12px;
  }

  .dashboard-grid {
    gap: 0;
    margin-top: 8px;
  }

  .scenario-card,
  .client-item,
  .tariff-card {
    padding: 11px;
    border-radius: 9px;
  }

  .device-figure.desktop {
    width: 72px;
    height: 58px;
  }

  .qr-placeholder {
    width: 100%;
    min-height: 180px;
    padding: 10px;
  }

  .qr-frame {
    width: min(100%, 340px);
  }

  .qr-image,
  .qr-frame.compact .qr-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .client-help {
    gap: 7px;
  }

  .client-item h4 {
    font-size: 14px;
  }

  .client-item p {
    font-size: 13px;
  }

  .tariff-price strong {
    font-size: 28px;
  }

  .footer-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-docs a {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .admin-wide-card {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    margin-left: 50%;
    padding: 10px;
  }

  .admin-bulkbar {
    gap: 7px;
  }

  .admin-bulkbar .btn {
    flex: 1 1 145px;
  }

  .admin-searchbar {
    gap: 6px;
  }

  .admin-users-table,
  .admin-users-table tbody,
  .admin-users-table tr,
  .admin-users-table td {
    display: block;
    width: 100%;
  }

  .admin-users-table {
    background: transparent;
  }

  .admin-users-table thead:first-of-type {
    display: none;
  }

  .admin-filter-head {
    display: block;
    margin-bottom: 10px;
  }

  .admin-filter-head tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .admin-filter-head th {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .admin-filter-head th:nth-child(1),
  .admin-filter-head th:nth-child(2),
  .admin-filter-head th:nth-child(6) {
    display: none;
  }

  .admin-filter-head th:last-child {
    grid-column: 1 / -1;
  }

  .admin-filter-head input,
  .admin-filter-head select {
    height: 38px;
    font-size: 13px;
  }

  .admin-users-table tbody tr {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(5, 18, 33, 0.88);
  }

  .admin-users-table tbody td {
    padding: 5px 0;
    border: 0;
    overflow: visible;
    white-space: normal;
  }

  .admin-users-table tbody td:nth-child(1) {
    display: none;
  }

  .admin-users-table tbody td:nth-child(2) {
    position: absolute;
    top: 9px;
    right: 9px;
    width: auto;
  }

  .admin-users-table tbody td:nth-child(3)::before { content: "ID"; }
  .admin-users-table tbody td:nth-child(4)::before { content: "Email"; }
  .admin-users-table tbody td:nth-child(5)::before { content: "Имя"; }
  .admin-users-table tbody td:nth-child(6)::before { content: "Пароль"; }
  .admin-users-table tbody td:nth-child(7)::before { content: "Доступ"; }
  .admin-users-table tbody td:nth-child(8)::before { content: "Дней"; }
  .admin-users-table tbody td:nth-child(9)::before { content: "IP"; }
  .admin-users-table tbody td:nth-child(10)::before { content: "Статус"; }
  .admin-users-table tbody td:nth-child(11)::before { content: "Трафик"; }
  .admin-users-table tbody td:nth-child(12)::before { content: "Роль"; }
  .admin-users-table tbody td:nth-child(13)::before { content: "Дата регистрации"; }

  .admin-users-table tbody td:nth-child(n+3):nth-child(-n+13)::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .admin-users-table input[type="email"],
  .admin-users-table input[type="text"],
  .admin-users-table input[type="password"],
  .admin-users-table input[type="number"],
  .access-days-select {
    width: 100%;
    font-size: 14px;
  }

  .admin-actions-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .admin-actions-row .btn,
  .admin-actions-row .inline-form {
    width: 100%;
  }

  .admin-actions-row .inline-form .btn {
    width: 100%;
  }

  .xui-monitor-hero,
  .xui-monitor-grid {
    width: calc(100vw - 12px);
  }

  .xui-node-head,
  .monitor-toolbar {
    align-items: flex-start;
  }

  .xui-panel,
  .xui-metric {
    white-space: normal;
  }
}
.connect-hero {
  scroll-margin-top: 90px;
}

.connect-platforms {
  margin-top: 18px;
}

.connect-device {
  scroll-margin-top: 90px;
}

.connect-device h3,
.connect-preparation h3 {
  margin-bottom: 12px;
}

.connect-note,
.connect-check,
.connect-video {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 153, 0, 0.35);
  border-radius: 12px;
  background: rgba(255, 153, 0, 0.08);
}

.connect-device details {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.28);
}

.connect-device summary {
  cursor: pointer;
  font-weight: 700;
}

.connect-device code,
.connect-device kbd,
.connect-preparation code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .connect-platforms .btn {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}

.email-code-copy-card {
  text-align: center;
}

.email-code-large {
  margin: 22px auto;
  padding: 22px 12px;
  max-width: 360px;
  border: 2px solid var(--brand);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: clamp(42px, 10vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  user-select: all;
}

.email-code-copy-button {
  min-width: 220px;
}

.email-code-copy-status {
  margin-top: 16px;
}

.access-unlimited-badge { color:#eaf4ff!important; background:#1769aa!important; border-color:#5aaeff!important; }
.access-paid-badge { color:#eafff4!important; background:#147a48!important; border-color:#45d58d!important; }
.access-expired-badge { color:#fff1f1!important; background:#b4232f!important; border-color:#ff6975!important; }
.access-expired-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(1,8,16,.78); backdrop-filter:blur(7px); }
.access-expired-modal[hidden] { display:none; }
.access-expired-dialog { position:relative; width:min(520px,100%); padding:30px; border:1px solid #ff5a69; border-radius:18px; background:#071727; box-shadow:0 22px 70px rgba(0,0,0,.55); }
.access-expired-dialog h2 { margin:10px 38px 10px 0; }
.access-expired-dialog p { color:var(--muted); line-height:1.6; }
.access-expired-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.access-expired-close { position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(255,255,255,.09); color:#fff; font-size:25px; cursor:pointer; }

/* 2026-06-21: carved wood and antique-gold visual system */
:root {
  --wood-gold: #dca13f;
  --wood-gold-light: #ffd67a;
  --wood-gold-dark: #7f4a11;
  --wood-panel: rgba(5, 11, 17, 0.94);
}

body {
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(154, 83, 26, 0.2), transparent 67%),
    linear-gradient(180deg, rgba(1, 5, 10, 0.3), rgba(1, 5, 10, 0.76)),
    url("/static/night-forest-bg-new.png") center / cover fixed no-repeat,
    #02060b;
}

:root[data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(9, 35, 20, 0.18), rgba(7, 24, 16, 0.42)),
    radial-gradient(900px 520px at 50% 18%, rgba(255, 216, 120, 0.16), transparent 62%),
    url("/static/forest-bg-new.png") center / cover fixed no-repeat,
    var(--bg);
}

.topbar {
  position: relative;
  background:
    radial-gradient(700px 210px at 15% 42%, rgba(125, 65, 19, 0.15), transparent 70%),
    linear-gradient(180deg, rgba(1, 5, 9, 0.99), rgba(3, 11, 18, 0.98));
  border-bottom: 1px solid rgba(197, 123, 31, 0.5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
}

:root[data-theme="light"] .topbar {
  background:
    radial-gradient(820px 230px at 16% 45%, rgba(186, 127, 42, 0.16), transparent 69%),
    radial-gradient(700px 220px at 72% 120%, rgba(51, 119, 65, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(8, 47, 29, 0.99), rgba(5, 34, 23, 0.99));
  border-bottom-color: rgba(205, 142, 48, 0.58);
  box-shadow: 0 12px 34px rgba(0, 18, 9, 0.42);
}

.topbar .container {
  max-width: 1880px;
  padding: 22px 42px;
}

.topbar-inner {
  display: grid;
  grid-template-columns: minmax(440px, 0.85fr) minmax(560px, 1.4fr) auto;
  align-items: center;
  gap: 34px;
  min-height: 168px;
}

.brand {
  min-width: 0;
  gap: 20px;
  align-items: center;
}

.brand-logo {
  width: 134px;
  height: 134px;
  flex: 0 0 134px;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 0 12px rgba(234, 153, 54, 0.28));
  box-shadow: none;
}

.brand strong {
  display: flex;
  flex-direction: column;
  color: var(--wood-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 2.45vw, 49px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: 0.025em;
  text-shadow:
    0 1px 0 #ffdb7d,
    0 2px 0 #60370d,
    0 0 12px rgba(217, 143, 45, 0.22);
}

.brand strong span:last-child {
  margin-top: 6px;
}

.brand small {
  display: block;
  margin-top: 12px;
  color: #e2b25e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 0 #3b2109;
}

.nav {
  align-content: center;
  gap: 12px 30px;
}

.nav a {
  padding: 7px 5px;
  color: #dca13f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 1.55vw, 29px);
  line-height: 1.1;
  text-shadow:
    0 1px 0 #ffe29b,
    0 2px 0 #51300d,
    0 0 10px rgba(217, 143, 45, 0.15);
  transition: color 150ms ease, transform 150ms ease, text-shadow 150ms ease;
}

.nav a:hover {
  color: #ffd77d;
  background: transparent;
  transform: translateY(-1px);
  text-shadow: 0 0 13px rgba(255, 188, 78, 0.58);
}

.topbar-actions {
  min-width: 0;
  gap: 14px;
}

.btn:not(.danger),
.menu-toggle {
  position: relative;
  border: 1px solid #b6761d;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 198, 76, 0.13), rgba(27, 13, 3, 0.16)),
    repeating-linear-gradient(0deg, rgba(255, 214, 121, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(35, 15, 2, 0.09) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #6e3b0b 0%, #2d1604 45%, #63360b 100%);
  color: #f1bd59;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-shadow: 0 1px 0 #422306, 0 0 7px rgba(255, 188, 69, 0.24);
  box-shadow:
    inset 0 0 0 2px rgba(45, 20, 3, 0.9),
    inset 0 0 0 4px rgba(211, 131, 29, 0.34),
    0 5px 13px rgba(0, 0, 0, 0.38);
}

.btn:not(.danger):hover,
.menu-toggle:hover {
  border-color: #e0a340;
  background:
    linear-gradient(180deg, rgba(255, 211, 112, 0.19), rgba(27, 13, 3, 0.12)),
    repeating-linear-gradient(0deg, rgba(255, 214, 121, 0.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(35, 15, 2, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #824a10 0%, #381b05 45%, #75420f 100%);
  color: #ffd477;
  box-shadow:
    inset 0 0 0 2px rgba(45, 20, 3, 0.9),
    inset 0 0 0 4px rgba(230, 157, 51, 0.4),
    0 7px 18px rgba(0, 0, 0, 0.44),
    0 0 16px rgba(211, 132, 36, 0.16);
}

.topbar-actions .btn {
  min-height: 52px;
  padding: 12px 20px;
  font-size: 19px;
  white-space: nowrap;
}

.hero,
.card,
.document-page {
  border-color: rgba(173, 101, 24, 0.58);
  background:
    linear-gradient(145deg, rgba(5, 15, 24, 0.95), rgba(8, 21, 31, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(224, 148, 53, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.34);
}

h1,
h2,
h3,
h4 {
  font-family: Georgia, "Times New Roman", serif;
}

.hero h1,
.card > h2,
.card > h3,
.document-page h1,
.document-page h2 {
  color: #e2aa4a;
  text-shadow: 0 1px 0 #4e2c0a, 0 0 12px rgba(213, 139, 41, 0.13);
}

.kicker {
  color: #f0bd5b;
}

@media (max-width: 1380px) {
  .topbar .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .topbar-inner {
    grid-template-columns: minmax(350px, 0.85fr) minmax(430px, 1.2fr) auto;
    gap: 22px;
    min-height: 142px;
  }

  .brand-logo {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }

  .brand strong {
    font-size: 35px;
  }

  .brand small {
    font-size: 14px;
  }

  .nav {
    gap: 10px 20px;
  }

  .nav a {
    font-size: 22px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbar-actions .btn {
    min-height: 46px;
    padding: 10px 15px;
    font-size: 16px;
  }
}

@media (max-width: 980px) {
  .topbar .container {
    padding: 12px 16px;
  }

  .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 10px;
  }

  .brand {
    gap: 12px;
  }

  .brand-logo {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }

  .brand strong {
    font-size: 25px;
  }

  .brand small {
    margin-top: 6px;
    font-size: 12px;
  }

  .menu-toggle {
    display: inline-flex;
    min-height: 44px;
    margin-left: 0;
    padding: 9px 15px;
    color: #f1bd59;
  }

  .nav {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 10px;
    gap: 3px;
    border-color: rgba(177, 108, 29, 0.55);
    background: rgba(6, 14, 21, 0.98);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    width: 100%;
    padding: 10px 12px;
    font-size: 19px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .topbar-actions .btn {
    min-height: 42px;
    padding: 8px 13px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .topbar-inner {
    padding-top: 0;
    padding-bottom: 0;
  }

  .brand-logo {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .brand strong {
    font-size: 21px;
    white-space: normal;
  }

  .brand small {
    display: block;
    max-width: 210px;
    font-size: 10px;
    white-space: normal;
  }

  .topbar-actions .btn {
    font-size: 13px;
  }
}

/* 2026-06-30: clearer forest backgrounds through more transparent blocks */
.hero,
.card,
.document-page,
.feature,
.tariff-card,
.scenario-card,
.client-item,
.subscription-link-item,
.subscription-link-source,
.referral-link-source,
.xui-panel,
.xui-metric,
.admin-bulkbar,
.payment-strip,
.table-wrap,
table {
  background-color: rgba(4, 12, 22, 0.42);
}

.hero,
.card,
.document-page {
  background:
    linear-gradient(145deg, rgba(5, 15, 24, 0.68), rgba(8, 21, 31, 0.5));
  backdrop-filter: blur(5px);
}

.feature,
.tariff-card,
.scenario-card,
.client-item,
.subscription-link-item,
.xui-panel,
.xui-metric,
.admin-bulkbar,
.payment-strip,
table {
  background: rgba(5, 18, 33, 0.5);
}

.subscription-link-source,
.referral-link-source,
input,
select {
  background: rgba(4, 12, 24, 0.52);
}

:root[data-theme="light"] .hero,
:root[data-theme="light"] .card,
:root[data-theme="light"] .document-page {
  background:
    linear-gradient(145deg, rgba(13, 36, 26, 0.56), rgba(8, 27, 21, 0.42));
}

:root[data-theme="light"] .feature,
:root[data-theme="light"] .tariff-card,
:root[data-theme="light"] .scenario-card,
:root[data-theme="light"] .client-item,
:root[data-theme="light"] .subscription-link-item,
:root[data-theme="light"] .xui-panel,
:root[data-theme="light"] .xui-metric,
:root[data-theme="light"] .admin-bulkbar,
:root[data-theme="light"] .payment-strip,
:root[data-theme="light"] table {
  background: rgba(14, 45, 32, 0.46);
}

:root[data-theme="light"] .subscription-link-source,
:root[data-theme="light"] .referral-link-source,
:root[data-theme="light"] input,
:root[data-theme="light"] select {
  background: rgba(10, 34, 24, 0.5);
}

:root:not([data-theme="light"]) {
  --line: rgba(255, 59, 83, 0.72);
  --brand: #ff405f;
  --brand-2: #a90f2b;
  --button-text: #fff1f4;
  --glow: rgba(255, 54, 83, 0.5);
}

:root:not([data-theme="light"]) .hero,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .document-page,
:root:not([data-theme="light"]) .feature,
:root:not([data-theme="light"]) .tariff-card,
:root:not([data-theme="light"]) .scenario-card,
:root:not([data-theme="light"]) .client-item,
:root:not([data-theme="light"]) .subscription-link-item,
:root:not([data-theme="light"]) .subscription-link-source,
:root:not([data-theme="light"]) .referral-link-source,
:root:not([data-theme="light"]) .xui-panel,
:root:not([data-theme="light"]) .xui-metric,
:root:not([data-theme="light"]) .admin-bulkbar,
:root:not([data-theme="light"]) .payment-strip,
:root:not([data-theme="light"]) .table-wrap,
:root:not([data-theme="light"]) table,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select {
  border-color: rgba(255, 59, 83, 0.72);
}

:root:not([data-theme="light"]) .hero:hover,
:root:not([data-theme="light"]) .card:hover,
:root:not([data-theme="light"]) .scenario-card:hover,
:root:not([data-theme="light"]) .client-item:hover {
  border-color: rgba(255, 88, 111, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 59, 83, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(255, 30, 68, 0.12);
}

:root:not([data-theme="light"]) .btn:not(.danger),
:root:not([data-theme="light"]) .menu-toggle {
  border-color: rgba(255, 73, 101, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 74, 105, 0.24), rgba(79, 5, 22, 0.28)),
    linear-gradient(135deg, rgba(110, 9, 32, 0.96), rgba(18, 7, 17, 0.96) 52%, rgba(126, 11, 37, 0.92));
  color: #ffe9ee;
  font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62), 0 0 10px rgba(255, 68, 99, 0.26);
  box-shadow:
    inset 0 0 0 1px rgba(255, 117, 139, 0.24),
    inset 0 -12px 22px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

:root:not([data-theme="light"]) .btn:not(.danger):hover,
:root:not([data-theme="light"]) .menu-toggle:hover {
  border-color: rgba(255, 107, 128, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 92, 120, 0.32), rgba(96, 6, 27, 0.2)),
    linear-gradient(135deg, rgba(147, 15, 45, 0.98), rgba(30, 8, 22, 0.98) 52%, rgba(167, 18, 50, 0.96));
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 139, 156, 0.32),
    0 10px 22px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 45, 79, 0.24);
}

:root:not([data-theme="light"]) .btn.ghost,
:root:not([data-theme="light"]) .btn.secondary {
  border-color: rgba(255, 73, 101, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 74, 105, 0.18), rgba(67, 5, 20, 0.24)),
    linear-gradient(135deg, rgba(62, 12, 29, 0.98), rgba(18, 8, 18, 0.96) 55%, rgba(88, 10, 31, 0.94));
  color: #ffe9ee;
}

/* 2026-06-30: lighter-theme green glass should show more of the forest */
:root[data-theme="light"] .topbar {
  background:
    radial-gradient(820px 230px at 16% 45%, rgba(186, 127, 42, 0.09), transparent 69%),
    radial-gradient(700px 220px at 72% 120%, rgba(51, 119, 65, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(8, 47, 29, 0.58), rgba(5, 34, 23, 0.46));
}

:root[data-theme="light"] .hero,
:root[data-theme="light"] .card,
:root[data-theme="light"] .document-page {
  background:
    linear-gradient(145deg, rgba(13, 36, 26, 0.38), rgba(8, 27, 21, 0.24));
  backdrop-filter: blur(3px);
}

:root[data-theme="light"] .feature,
:root[data-theme="light"] .tariff-card,
:root[data-theme="light"] .scenario-card,
:root[data-theme="light"] .client-item,
:root[data-theme="light"] .subscription-link-item,
:root[data-theme="light"] .subscription-profile-row,
:root[data-theme="light"] .xui-panel,
:root[data-theme="light"] .xui-metric,
:root[data-theme="light"] .admin-bulkbar,
:root[data-theme="light"] .payment-strip,
:root[data-theme="light"] table {
  background: rgba(14, 45, 32, 0.28);
}

:root[data-theme="light"] .subscription-link-source,
:root[data-theme="light"] .referral-link-source,
:root[data-theme="light"] input,
:root[data-theme="light"] select {
  background: rgba(10, 34, 24, 0.34);
}

@media (max-width: 700px) {
  .subscription-profile-row {
    grid-template-columns: 1fr;
  }

  .subscription-qr-toggle {
    align-items: stretch;
  }

  .subscription-actions-row {
    align-items: stretch;
    flex-direction: column;
  }

  .adblock-toggle-form,
  .subscription-refresh-form {
    justify-content: stretch;
  }

  .adblock-toggle-form .btn,
  .subscription-refresh-form .btn {
    width: 100%;
  }
}

/* 2026-06-30: softer glass at the bottom and lighter dark-theme panels */
:root[data-theme="light"] .footer {
  background:
    radial-gradient(640px 160px at 22% 0%, rgba(255, 202, 84, 0.08), transparent 68%),
    linear-gradient(180deg, rgba(10, 51, 31, 0.28), rgba(5, 30, 21, 0.18));
  backdrop-filter: blur(4px);
}

:root[data-theme="light"] .footer-docs a {
  background: rgba(7, 38, 27, 0.28);
}

:root[data-theme="light"] .footer-support {
  color: rgba(236, 249, 237, 0.84);
}

:root[data-theme="light"] .page-main > .card:last-child,
:root[data-theme="light"] .dashboard-grid .card,
:root[data-theme="light"] .dashboard-side .card,
:root[data-theme="light"] .referral-card {
  background:
    linear-gradient(145deg, rgba(13, 36, 26, 0.28), rgba(8, 27, 21, 0.16));
  backdrop-filter: blur(3px);
}

:root:not([data-theme="light"]) .hero,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .document-page {
  background:
    linear-gradient(145deg, rgba(5, 15, 24, 0.46), rgba(8, 21, 31, 0.28));
  backdrop-filter: blur(4px);
}

:root:not([data-theme="light"]) .feature,
:root:not([data-theme="light"]) .tariff-card,
:root:not([data-theme="light"]) .scenario-card,
:root:not([data-theme="light"]) .client-item,
:root:not([data-theme="light"]) .subscription-link-item,
:root:not([data-theme="light"]) .subscription-profile-row,
:root:not([data-theme="light"]) .xui-panel,
:root:not([data-theme="light"]) .xui-metric,
:root:not([data-theme="light"]) .admin-bulkbar,
:root:not([data-theme="light"]) .payment-strip,
:root:not([data-theme="light"]) .table-wrap,
:root:not([data-theme="light"]) table {
  background: rgba(5, 18, 33, 0.28);
}

:root:not([data-theme="light"]) .subscription-link-source,
:root:not([data-theme="light"]) .referral-link-source,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
  background: rgba(4, 12, 24, 0.32);
}

:root:not([data-theme="light"]) .footer {
  background: rgba(4, 9, 17, 0.38);
  backdrop-filter: blur(5px);
}

/* 2026-06-30: dark theme logo + bronze controls from the new emblem */
.brand-logo-dark {
  display: none;
}

:root:not([data-theme="light"]) .brand-logo-light {
  display: none;
}

:root:not([data-theme="light"]) .brand-logo-dark {
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(255, 173, 57, 0.22))
    drop-shadow(0 0 22px rgba(255, 120, 20, 0.12));
}

:root:not([data-theme="light"]) .topbar {
  background:
    radial-gradient(760px 230px at 15% 42%, rgba(196, 121, 37, 0.1), transparent 70%),
    radial-gradient(620px 210px at 82% 20%, rgba(255, 151, 47, 0.055), transparent 74%),
    linear-gradient(180deg, rgba(1, 5, 9, 0.58), rgba(3, 11, 18, 0.36));
  border-bottom-color: rgba(197, 123, 31, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(5px);
}

:root:not([data-theme="light"]) .btn:not(.danger),
:root:not([data-theme="light"]) .menu-toggle,
:root:not([data-theme="light"]) .tab-button,
:root:not([data-theme="light"]) .tab-link,
:root:not([data-theme="light"]) .admin-filter-reset {
  border-color: rgba(186, 123, 45, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 188, 72, 0.16), rgba(33, 19, 7, 0.18)),
    repeating-linear-gradient(0deg, rgba(255, 214, 121, 0.03) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, rgba(84, 49, 17, 0.96), rgba(19, 12, 8, 0.94) 54%, rgba(100, 58, 20, 0.92));
  color: #f1c875;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 0 rgba(40, 22, 7, 0.88), 0 0 8px rgba(255, 175, 65, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 194, 91, 0.2),
    inset 0 -10px 20px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.3);
}

:root:not([data-theme="light"]) .btn:not(.danger):hover,
:root:not([data-theme="light"]) .menu-toggle:hover,
:root:not([data-theme="light"]) .tab-button:hover,
:root:not([data-theme="light"]) .tab-link:hover,
:root:not([data-theme="light"]) .admin-filter-reset:hover {
  border-color: rgba(235, 168, 73, 0.98);
  background:
    linear-gradient(180deg, rgba(255, 208, 105, 0.24), rgba(39, 22, 7, 0.12)),
    repeating-linear-gradient(0deg, rgba(255, 214, 121, 0.04) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, rgba(116, 70, 25, 0.98), rgba(31, 18, 9, 0.98) 54%, rgba(133, 79, 28, 0.96));
  color: #ffe09a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 213, 124, 0.28),
    0 10px 22px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(219, 142, 45, 0.18);
}

:root:not([data-theme="light"]) .btn.ghost,
:root:not([data-theme="light"]) .btn.secondary {
  border-color: rgba(159, 105, 43, 0.78);
  background:
    linear-gradient(180deg, rgba(221, 151, 58, 0.12), rgba(27, 16, 8, 0.18)),
    linear-gradient(135deg, rgba(51, 34, 20, 0.92), rgba(14, 10, 9, 0.9) 55%, rgba(67, 42, 20, 0.88));
  color: #e8be70;
}

/* 2026-07-01: dark theme moves from yellow/gold to white-blue, legal docs become Word-like pages */
:root:not([data-theme="light"]) {
  --text: #f4fbff;
  --muted: #c9d9ea;
  --line: rgba(132, 191, 255, 0.46);
  --brand: #cfe9ff;
  --brand-2: #82bfff;
  --button-text: #061321;
  --glow: rgba(104, 174, 255, 0.34);
}

:root:not([data-theme="light"]) .brand-logo,
:root:not([data-theme="light"]) .brand-logo-dark {
  width: 134px !important;
  height: 134px !important;
  flex: 0 0 134px !important;
  object-fit: contain;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  background: transparent;
  box-shadow: none;
}

:root:not([data-theme="light"]) .brand strong,
:root:not([data-theme="light"]) .brand small,
:root:not([data-theme="light"]) .nav a,
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) .card > h2,
:root:not([data-theme="light"]) .card > h3,
:root:not([data-theme="light"]) .hero h1,
:root:not([data-theme="light"]) .document-page h1,
:root:not([data-theme="light"]) .document-page h2 {
  color: #f6fbff;
  text-shadow: 0 0 10px rgba(117, 184, 255, 0.18);
}

:root:not([data-theme="light"]) .brand small,
:root:not([data-theme="light"]) .muted,
:root:not([data-theme="light"]) .small {
  color: #c9d9ea;
}

:root:not([data-theme="light"]) .nav a:hover {
  color: #bfe2ff;
  text-shadow: 0 0 14px rgba(126, 190, 255, 0.5);
}

:root:not([data-theme="light"]) .btn:not(.danger),
:root:not([data-theme="light"]) .menu-toggle,
:root:not([data-theme="light"]) .tab-button,
:root:not([data-theme="light"]) .tab-link,
:root:not([data-theme="light"]) .admin-filter-reset,
:root:not([data-theme="light"]) .client-download {
  border-color: rgba(132, 191, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(155, 211, 255, 0.18), rgba(14, 32, 52, 0.26)),
    linear-gradient(135deg, rgba(22, 45, 70, 0.94), rgba(5, 13, 24, 0.9) 55%, rgba(30, 57, 86, 0.9));
  color: #eef8ff;
  font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.68), 0 0 8px rgba(116, 184, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(183, 224, 255, 0.16),
    inset 0 -10px 20px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

:root:not([data-theme="light"]) .btn:not(.danger):hover,
:root:not([data-theme="light"]) .menu-toggle:hover,
:root:not([data-theme="light"]) .tab-button:hover,
:root:not([data-theme="light"]) .tab-link:hover,
:root:not([data-theme="light"]) .admin-filter-reset:hover,
:root:not([data-theme="light"]) .client-download:hover {
  border-color: rgba(190, 226, 255, 0.98);
  background:
    linear-gradient(180deg, rgba(190, 226, 255, 0.26), rgba(18, 39, 63, 0.18)),
    linear-gradient(135deg, rgba(37, 72, 108, 0.98), rgba(8, 18, 32, 0.96) 55%, rgba(48, 88, 126, 0.96));
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(220, 240, 255, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(117, 184, 255, 0.2);
}

:root:not([data-theme="light"]) .btn.ghost,
:root:not([data-theme="light"]) .btn.secondary {
  border-color: rgba(111, 171, 232, 0.66);
  background:
    linear-gradient(180deg, rgba(130, 191, 255, 0.12), rgba(10, 24, 42, 0.16)),
    linear-gradient(135deg, rgba(18, 37, 60, 0.86), rgba(5, 13, 24, 0.84) 55%, rgba(25, 48, 75, 0.82));
  color: #d9efff;
}

:root:not([data-theme="light"]) .badge.ok,
:root:not([data-theme="light"]) .badge.muted,
:root:not([data-theme="light"]) .access-unlimited-badge,
:root:not([data-theme="light"]) .access-paid-badge {
  border-color: rgba(132, 191, 255, 0.5);
  background: rgba(28, 68, 107, 0.34);
  color: #e8f6ff;
}

.document-page.legal-document {
  max-width: 920px;
  margin: 28px auto;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid #e4e7eb !important;
  border-radius: 4px;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  font-family: "Times New Roman", Times, serif;
  line-height: 1.65;
}

.document-page.legal-document h1,
.document-page.legal-document h2,
.document-page.legal-document h3,
.document-page.legal-document h4 {
  color: #111827 !important;
  text-shadow: none !important;
  font-family: "Times New Roman", Times, serif;
}

.document-page.legal-document p,
.document-page.legal-document li,
.document-page.legal-document .doc-meta {
  color: #1f2937 !important;
  text-shadow: none !important;
}

.document-page.legal-document a {
  color: #0645ad !important;
}

/* 2026-07-01: force dark-theme blue borders/white text everywhere */
:root:not([data-theme="light"]) {
  --text: #ffffff;
  --muted: #d7e9ff;
  --line: rgba(106, 184, 255, 0.78);
  --brand: #ffffff;
  --brand-2: #9ed1ff;
  --button-text: #ffffff;
  --glow: rgba(85, 176, 255, 0.48);
}

:root:not([data-theme="light"]) .brand-logo-dark {
  filter:
    drop-shadow(0 0 8px rgba(103, 194, 255, 0.7))
    drop-shadow(0 0 22px rgba(57, 162, 255, 0.45))
    drop-shadow(0 0 42px rgba(32, 119, 255, 0.22)) !important;
}

:root:not([data-theme="light"]) .topbar,
:root:not([data-theme="light"]) .footer,
:root:not([data-theme="light"]) .hero,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .document-page:not(.legal-document),
:root:not([data-theme="light"]) .feature,
:root:not([data-theme="light"]) .tariff-card,
:root:not([data-theme="light"]) .scenario-card,
:root:not([data-theme="light"]) .client-item,
:root:not([data-theme="light"]) .subscription-card,
:root:not([data-theme="light"]) .subscription-profile-row,
:root:not([data-theme="light"]) .subscription-link-item,
:root:not([data-theme="light"]) .subscription-link-source,
:root:not([data-theme="light"]) .referral-link-source,
:root:not([data-theme="light"]) .xui-panel,
:root:not([data-theme="light"]) .xui-metric,
:root:not([data-theme="light"]) .admin-bulkbar,
:root:not([data-theme="light"]) .payment-strip,
:root:not([data-theme="light"]) .table-wrap,
:root:not([data-theme="light"]) table,
:root:not([data-theme="light"]) th,
:root:not([data-theme="light"]) td,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea,
:root:not([data-theme="light"]) .copy-source,
:root:not([data-theme="light"]) .qr-frame {
  border-color: rgba(106, 184, 255, 0.78) !important;
}

:root:not([data-theme="light"]) .topbar {
  border-bottom-color: rgba(106, 184, 255, 0.78) !important;
}

:root:not([data-theme="light"]) .footer {
  border-top-color: rgba(106, 184, 255, 0.78) !important;
}

:root:not([data-theme="light"]) .subscription-profile-row-reserve {
  border-top-color: rgba(106, 184, 255, 0.62) !important;
}

:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) .brand,
:root:not([data-theme="light"]) .brand strong,
:root:not([data-theme="light"]) .brand small,
:root:not([data-theme="light"]) .nav a,
:root:not([data-theme="light"]) .footer-support,
:root:not([data-theme="light"]) .footer-support a,
:root:not([data-theme="light"]) .footer-docs a,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .card p,
:root:not([data-theme="light"]) .card li,
:root:not([data-theme="light"]) .hero,
:root:not([data-theme="light"]) .hero p,
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) label,
:root:not([data-theme="light"]) th,
:root:not([data-theme="light"]) td,
:root:not([data-theme="light"]) .muted,
:root:not([data-theme="light"]) .small,
:root:not([data-theme="light"]) .copy-source,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .muted,
:root:not([data-theme="light"]) .small,
:root:not([data-theme="light"]) .doc-meta {
  color: #d7e9ff !important;
}

:root:not([data-theme="light"]) .btn:not(.danger),
:root:not([data-theme="light"]) .menu-toggle,
:root:not([data-theme="light"]) .tab-button,
:root:not([data-theme="light"]) .tab-link,
:root:not([data-theme="light"]) .admin-filter-reset,
:root:not([data-theme="light"]) .client-download,
:root:not([data-theme="light"]) .footer-docs a {
  border-color: rgba(106, 184, 255, 0.86) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(130, 202, 255, 0.18), rgba(11, 28, 48, 0.22)),
    linear-gradient(135deg, rgba(18, 43, 70, 0.88), rgba(5, 13, 24, 0.84) 55%, rgba(23, 52, 84, 0.84)) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72), 0 0 10px rgba(106, 184, 255, 0.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(199, 232, 255, 0.16),
    0 0 0 1px rgba(106, 184, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

:root:not([data-theme="light"]) .btn:not(.danger):hover,
:root:not([data-theme="light"]) .menu-toggle:hover,
:root:not([data-theme="light"]) .tab-button:hover,
:root:not([data-theme="light"]) .tab-link:hover,
:root:not([data-theme="light"]) .admin-filter-reset:hover,
:root:not([data-theme="light"]) .client-download:hover,
:root:not([data-theme="light"]) .footer-docs a:hover {
  border-color: rgba(190, 226, 255, 1) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(170, 220, 255, 0.26), rgba(17, 40, 66, 0.24)),
    linear-gradient(135deg, rgba(32, 69, 108, 0.94), rgba(7, 18, 33, 0.92) 55%, rgba(40, 82, 123, 0.9)) !important;
}