/* =====================================================================
   vpn.how — Design Tokens (redesign #2 «Премиум-тех»)
   Layer OVER Bootstrap 5.3 + theme.css (loaded after theme.css).
   Palette: ink #0A0E14 + mint #19E3B1 — monochrome + 1 accent.
   Scope rule: this file adds VOCABULARY + safe global brand touches
   (heading font, ::selection). The premium dark look is OPT-IN per
   section via .theme-ink — the still-light pages stay untouched until
   redesigned page-by-page. Do NOT repoint --primary to mint globally
   (mint text on white is unreadable); mint becomes primary only inside
   .theme-ink.
   ===================================================================== */

:root {
  /* --- Brand primitives --------------------------------------------- */
  --ink:          #0A0E14;   /* page base (dark canvas) */
  --ink-2:        #11161F;   /* slightly raised ink */
  --surface-ink:  #1A2230;   /* card surface on ink */
  --surface-ink-2:#222C3A;   /* elevated / hover on ink */
  --off-white:    #F5F6F7;   /* inverse text base */
  --muted:        #6B7689;   /* muted neutral */

  --mint:         #19E3B1;   /* THE accent — on dark + as fills */
  --mint-bright:  #3BEBC0;   /* hover / active */
  --mint-deep:    #0A8F6E;   /* accent text/icons on LIGHT surfaces */
  --mint-soft:    rgba(25,227,177,.12); /* tint fill */
  --on-mint:      #06231B;   /* text on a mint fill */
  --mint-rgb:     25,227,177;

  /* --- Typography ---------------------------------------------------- */
  --font-head: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.55rem + 3.4vw, 4rem);
  --fs-h1:      clamp(2rem, 1.5rem + 1.9vw, 3rem);
  --fs-h2:      clamp(1.55rem, 1.25rem + 1.15vw, 2.25rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + .55vw, 1.6rem);
  --fs-h4:      1.25rem;
  --fs-lead:    clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --tracking-tight: -.02em;
  --tracking-wide:  .04em;

  /* --- Spacing (4 / 8 base) ----------------------------------------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* --- Radii --------------------------------------------------------- */
  --radius-xs: 4px;  --radius-sm: 8px;   --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 20px;  --radius-2xl: 28px; --radius-pill: 999px;

  /* --- Shadows (light surfaces) + mint glow ------------------------- */
  --shadow-1: 0 1px 2px rgba(10,14,20,.06);
  --shadow-2: 0 6px 16px -4px rgba(10,14,20,.10);
  --shadow-3: 0 18px 40px -12px rgba(10,14,20,.18);
  --glow-mint: 0 8px 30px -8px rgba(25,227,177,.35);

  /* --- Motion / focus ----------------------------------------------- */
  --ease-out:    cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --dur-1: .15s; --dur-2: .25s; --dur-3: .4s;
  --focus-ring: 0 0 0 3px rgba(25,227,177,.45);
}

/* === Brand «ink» canvas — OPT-IN per section (hero etc., Step 3) ======
   Wrap a redesigned block in .theme-ink to get the premium dark look.
   Re-maps theme.css --vpn-* + Bootstrap vars so existing components
   (cards, .btn-primary, text, borders) adapt automatically. Scoped:
   the rest of the (light) site is unaffected. */
.theme-ink {
  --vpn-surface:    var(--surface-ink);
  --vpn-surface-2:  var(--surface-ink-2);
  --vpn-surface-3:  #2A3445;
  --vpn-text:       var(--off-white);
  --vpn-text-muted: #8a94a6;
  --vpn-border:     rgba(245,246,247,.10);
  /* accent → mint, only inside the canvas */
  --vpn-primary:    var(--mint);
  --primary:        var(--mint);
  --bs-primary:     var(--mint);
  --bs-primary-rgb: var(--mint-rgb);
  --bs-body-color:      var(--off-white);
  --bs-body-bg:         var(--ink);
  --bs-emphasis-color:  var(--off-white);
  --bs-secondary-color: #8a94a6;
  --bs-border-color:    rgba(245,246,247,.12);
  --bs-link-color:        var(--mint);
  --bs-link-hover-color:  var(--mint-bright);
  background-color: var(--ink);
  color: var(--off-white);
}
.theme-ink a { color: var(--mint); }
.theme-ink a:hover { color: var(--mint-bright); }
.theme-ink .btn-primary {
  --bs-btn-color: var(--ink);            --bs-btn-bg: var(--mint);          --bs-btn-border-color: var(--mint);
  --bs-btn-hover-color: var(--ink);      --bs-btn-hover-bg: var(--mint-bright); --bs-btn-hover-border-color: var(--mint-bright);
  --bs-btn-active-color: var(--ink);     --bs-btn-active-bg: var(--mint-bright);
  font-weight: 600;
}

/* === Brand components / utilities (opt-in) =========================== */
.btn-mint {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; line-height: 1;
  border: 0; border-radius: var(--radius-pill);
  padding: .8rem 1.5rem; cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn-mint:hover { background: var(--mint-bright); color: var(--ink); transform: translateY(-1px); box-shadow: var(--glow-mint); }
.btn-mint:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: inherit;
  font-weight: 600; border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: .8rem 1.5rem; cursor: pointer; opacity: .8;
  transition: opacity var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.btn-ghost:hover { opacity: 1; background: rgba(127,127,127,.08); }

.font-head { font-family: var(--font-head); }
.font-body { font-family: var(--font-body); }
.text-mint     { color: var(--mint); }
.text-mint-ink { color: var(--mint-deep); }      /* mint on light surfaces */
.bg-ink        { background: var(--ink); color: var(--off-white); }

.surface-card {
  background: var(--vpn-surface); border: 1px solid var(--vpn-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--mint-deep);
}
.theme-ink .eyebrow { color: var(--mint); }
.chip-mint {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mint-soft); color: var(--mint-deep);
  font-size: var(--fs-sm); font-weight: 600;
  padding: .3rem .8rem; border-radius: var(--radius-pill);
}
.theme-ink .chip-mint { color: var(--mint); }

/* === Safe GLOBAL brand touches (verified to work on the light site) == */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-head); }
::selection { background: var(--mint); color: var(--ink); }

/* === Brand dark navbar (global) — <nav> carries data-bs-theme="dark" === */
.navbar[data-bs-theme="dark"] {
  background: rgba(10,14,20,.82) !important;
  border-bottom: 1px solid rgba(245,246,247,.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.navbar[data-bs-theme="dark"] .nav-link:hover,
.navbar[data-bs-theme="dark"] .nav-link.active { color: var(--mint) !important; background: rgba(25,227,177,.08); }
.navbar[data-bs-theme="dark"] .nav-link.active::after { background: var(--mint) !important; }
.navbar[data-bs-theme="dark"] .text-primary { color: var(--mint) !important; }
@media (max-width:991.98px) {
  .navbar[data-bs-theme="dark"] .navbar-collapse {
    background: rgba(10,14,20,.98); border-radius: 0 0 14px 14px;
    padding: .5rem 1rem 1rem; margin: .4rem -1rem 0;
  }
}

/* === Brand dark footer (global) === */
.page-footer { background: #0A0E14 !important; border-top: 1px solid rgba(245,246,247,.08); color: #8a94a6; }
.page-footer h5 { color: #F5F6F7; }
.page-footer a { color: #aeb6c2; }
.page-footer a:hover { color: var(--mint); }
.page-footer .footer-copyright { color: #6B7689; border-top: 1px solid rgba(245,246,247,.06); margin-top: 1rem; }
.page-footer .footer-copyright a { color: #aeb6c2; }

/* =====================================================================
   GLOBAL dark base (ink/mint) — covers EVERY m.tpl page uniformly:
   cabinet sub-views, forms, modals, tables, etc. Per-page <style>
   overrides add polish on top; this is the site-wide safety net.
   Scoped to `main` for content; modals/dropdowns/breadcrumb global.
   ===================================================================== */
body { background: #0A0E14; color: #C5CAD3; }
main h1, main h2, main h3, main h4, main h5, main h6 { color: #F5F6F7; }
main hr { border-color: rgba(245,246,247,.10); opacity: 1; }
main a:not(.btn) { color: #19E3B1; }
main a:not(.btn):hover { color: #3BEBC0; }
main .text-muted { color: #8a94a6 !important; }
main .text-dark { color: #C5CAD3 !important; }
main .text-primary { color: #19E3B1 !important; }
main .border, main .border-top, main .border-bottom, main .border-start, main .border-end { border-color: rgba(245,246,247,.10) !important; }

main .card { background: #1A2230; border-color: rgba(245,246,247,.08); color: #C5CAD3; }
main .card-header, main .card-footer { background: rgba(245,246,247,.02); border-color: rgba(245,246,247,.08); }
main .bg-light, main .card.bg-light { background: #11161F !important; color: #C5CAD3 !important; }
main .bg-white { background: #1A2230 !important; }

main .table { color: #C5CAD3; --bs-table-bg: transparent; --bs-table-color: #C5CAD3; --bs-table-striped-color: #C5CAD3; --bs-table-striped-bg: rgba(245,246,247,.03); }
main .table > :not(caption) > * > * { border-color: rgba(245,246,247,.08); }
main .table thead th { color: #8a94a6; border-bottom-color: rgba(245,246,247,.14); }
main .table-hover > tbody > tr:hover > * { background: rgba(25,227,177,.06); color: #F5F6F7; }

main .form-control, main .form-select, main textarea { background: #11161F; color: #F5F6F7; border-color: rgba(245,246,247,.14); }
main .form-control:focus, main .form-select:focus { background: #11161F; color: #F5F6F7; border-color: #19E3B1; box-shadow: 0 0 0 3px rgba(25,227,177,.18); }
main .form-control::placeholder { color: #6B7689; }
main .input-group-text { background: #1A2230; color: #aeb6c2; border-color: rgba(245,246,247,.14); }
main .form-label, main .form-check-label, main .col-form-label { color: #C5CAD3; }

main .btn-primary { --bs-btn-bg: #19E3B1; --bs-btn-border-color: #19E3B1; --bs-btn-color: #0A0E14; --bs-btn-hover-bg: #3BEBC0; --bs-btn-hover-border-color: #3BEBC0; --bs-btn-hover-color: #0A0E14; --bs-btn-active-bg: #3BEBC0; --bs-btn-active-color: #0A0E14; box-shadow: none; }
main .btn-outline-primary { --bs-btn-color: #19E3B1; --bs-btn-border-color: #19E3B1; --bs-btn-hover-bg: #19E3B1; --bs-btn-hover-color: #0A0E14; --bs-btn-hover-border-color: #19E3B1; }
main .btn-outline-secondary, main .btn-light { --bs-btn-color: #C5CAD3; --bs-btn-border-color: rgba(245,246,247,.18); --bs-btn-bg: transparent; --bs-btn-hover-bg: rgba(255,255,255,.06); --bs-btn-hover-color: #F5F6F7; --bs-btn-hover-border-color: rgba(245,246,247,.28); }
main .btn-link { color: #19E3B1; }

.modal-content { background: #11161F; border: 1px solid rgba(245,246,247,.10); color: #C5CAD3; }
.modal-header, .modal-footer { border-color: rgba(245,246,247,.08); }
.modal-title { color: #F5F6F7; }
.modal .btn-close { filter: invert(1) grayscale(1) brightness(1.7); }

.dropdown-menu { background: #1A2230; border-color: rgba(245,246,247,.10); }
.dropdown-menu .dropdown-item { color: #C5CAD3; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: rgba(25,227,177,.10); color: #19E3B1; }
.dropdown-divider { border-color: rgba(245,246,247,.08); }

main .list-group-item { background: #1A2230; border-color: rgba(245,246,247,.08); color: #C5CAD3; }

main .nav-tabs { border-bottom-color: rgba(245,246,247,.12); }
main .nav-tabs .nav-link { color: #aeb6c2; border-color: transparent; background: transparent; }
main .nav-tabs .nav-link:hover { border-color: rgba(245,246,247,.10); color: #F5F6F7; }
main .nav-tabs .nav-link.active { color: #19E3B1; background: transparent; border-color: transparent transparent #19E3B1; }
main .nav-pills .nav-link { color: #aeb6c2; }
main .nav-pills .nav-link.active { background: #19E3B1 !important; color: #0A0E14 !important; }
main .nav-pills .nav-link.active i { color: #0A0E14 !important; }

main .alert { border-color: rgba(245,246,247,.10); }
main .alert-success { background: rgba(25,227,177,.10); color: #c2e9dd; border-color: rgba(25,227,177,.25); }
main .alert-info { background: rgba(25,227,177,.08); color: #c2c9d4; border-color: rgba(25,227,177,.2); }
main .alert-warning { background: rgba(245,200,66,.10); color: #f0d499; border-color: rgba(245,200,66,.25); }
main .alert-danger { background: rgba(239,68,68,.10); color: #f0a3a3; border-color: rgba(239,68,68,.25); }

.pagination .page-link { background: #1A2230; border-color: rgba(245,246,247,.10); color: #c2c9d4; }
.pagination .page-link:hover { background: rgba(25,227,177,.12); color: #19E3B1; border-color: rgba(25,227,177,.3); }
.pagination .page-item.active .page-link { background: #19E3B1; border-color: #19E3B1; color: #0A0E14; }
.pagination .page-item.disabled .page-link { background: #14181f; color: #4a5260; }

main .accordion-item { background: #1A2230; border-color: rgba(245,246,247,.08); }
main .accordion-button { background: #1A2230; color: #F5F6F7; }
main .accordion-button:not(.collapsed) { background: rgba(25,227,177,.08); color: #19E3B1; box-shadow: none; }
main .accordion-body { color: #C5CAD3; }

/* === Stylish, uniform breadcrumbs (global) === */
.breadcrumb { background: transparent !important; padding: .85rem 0 .4rem !important; margin: 0 0 1.1rem; font-size: .82rem; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item { white-space: nowrap; }
.breadcrumb-item a { color: #8a94a6 !important; text-decoration: none; transition: color .2s ease; display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumb-item a:hover { color: #19E3B1 !important; }
.breadcrumb-item.active a, .breadcrumb-item.active { color: #6B7689 !important; pointer-events: none; }
.breadcrumb-item + .breadcrumb-item { padding-left: .55rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: #4a5260; padding-right: .55rem; font-size: 1.1em; line-height: 1; }
@media (max-width: 575px) { .breadcrumb { font-size: .78rem; padding: .6rem 0 .3rem !important; margin-bottom: .85rem; } }

/* =====================================================================
   DataTables (ink/mint). Default DT styling; datatables.min.css /
   rg_datatables.min.css load AFTER tokens.css (in templates) → use
   !important to win. Covers wrapper/filter/length/info/paginate/table.
   ===================================================================== */
.dataTables_wrapper { color: #C5CAD3 !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper label { color: #8a94a6 !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  background: #11161F !important; color: #F5F6F7 !important;
  border: 1px solid rgba(245,246,247,.14) !important; border-radius: 8px !important; padding: .28rem .6rem !important; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus {
  border-color: #19E3B1 !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(25,227,177,.18) !important; }
.dataTables_wrapper .dataTables_length select option { background: #11161F; color: #F5F6F7; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #c2c9d4 !important; background: transparent !important;
  border: 1px solid transparent !important; border-radius: 8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #19E3B1 !important; background: rgba(25,227,177,.12) !important; border-color: rgba(25,227,177,.3) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #0A0E14 !important; background: #19E3B1 !important; border-color: #19E3B1 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #4a5260 !important; background: transparent !important; border-color: transparent !important; }

table.dataTable { color: #C5CAD3 !important; border-color: rgba(245,246,247,.08) !important; }
table.dataTable thead th, table.dataTable thead td {
  color: #8a94a6 !important; border-bottom: 1px solid rgba(245,246,247,.14) !important; }
table.dataTable tbody th, table.dataTable tbody td { border-color: rgba(245,246,247,.06) !important; }
table.dataTable.row-border tbody td, table.dataTable.row-border tbody th,
table.dataTable.display tbody td, table.dataTable.display tbody th { border-top-color: rgba(245,246,247,.06) !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: rgba(245,246,247,.025) !important; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover, table.dataTable.hover tbody tr.odd:hover {
  background-color: rgba(25,227,177,.07) !important; color: #F5F6F7 !important; }
table.dataTable tfoot th, table.dataTable tfoot td {
  color: #C5CAD3 !important; border-top: 1px solid rgba(245,246,247,.12) !important; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { color: #19E3B1 !important; }
.dataTables_wrapper .dataTables_processing {
  background: #1A2230 !important; color: #C5CAD3 !important; border: 1px solid rgba(245,246,247,.10) !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; }
.dataTables_scrollHead, .dataTables_scrollBody { border-color: rgba(245,246,247,.08) !important; }

/* =====================================================================
   Cabinet / forms / buttons polish — direct props + !important to beat
   theme.css (which sets color/bg directly) and inline styles.
   ===================================================================== */
/* Unify primary action buttons → mint */
main .btn-primary, main .btn-success, main .btn-info {
  background-color: #19E3B1 !important; border-color: #19E3B1 !important; color: #0A0E14 !important; box-shadow: none !important; }
main .btn-primary:hover, main .btn-success:hover, main .btn-info:hover,
main .btn-primary:focus, main .btn-success:focus, main .btn-info:focus,
main .btn-primary:active, main .btn-success:active, main .btn-info:active {
  background-color: #3BEBC0 !important; border-color: #3BEBC0 !important; color: #0A0E14 !important; }
main .btn-outline-primary { background-color: transparent !important; border-color: #19E3B1 !important; color: #19E3B1 !important; }
main .btn-outline-primary:hover { background-color: #19E3B1 !important; color: #0A0E14 !important; }
.dt-button, .dataTables_wrapper .dt-buttons .btn, .buttons-csv, .buttons-excel {
  background: #19E3B1 !important; border-color: #19E3B1 !important; color: #0A0E14 !important; }

/* Period / currency selector cards (buyvpn) */
.period-card, .currency-card {
  background: #11161F !important; border-color: rgba(245,246,247,.14) !important; color: #C5CAD3 !important; }
.period-card:hover, .currency-card:hover {
  border-color: rgba(25,227,177,.5) !important; background: rgba(25,227,177,.06) !important; }
.period-option input:checked ~ .period-card, .period-option.active .period-card,
.currency-option input:checked ~ .currency-card, .currency-option.active .currency-card {
  background: #19E3B1 !important; border-color: #19E3B1 !important; color: #0A0E14 !important; box-shadow: 0 4px 16px rgba(25,227,177,.25) !important; }
.currency-option.disabled .currency-card { opacity: .45 !important; }

/* Disabled / readonly inputs → dark (not white) */
main .form-control:disabled, main .form-control[readonly], main .form-control[disabled],
main .form-control.disabled, main .form-select:disabled {
  background-color: #161C26 !important; color: #8a94a6 !important; border-color: rgba(245,246,247,.10) !important; opacity: 1 !important; }

/* Tables — fix light thead bg (theme.css .table thead th) + DataTables body */
main .table, table.dataTable {
  --bs-table-bg: transparent !important; --bs-table-color: #C5CAD3 !important;
  --bs-table-striped-bg: rgba(245,246,247,.03) !important; --bs-table-striped-color: #C5CAD3 !important;
  background-color: transparent !important; }
main .table thead th, main .table thead td, table.dataTable thead th, table.dataTable thead td {
  background-color: rgba(245,246,247,.035) !important; color: #8a94a6 !important; border-bottom: 1px solid rgba(245,246,247,.14) !important; }
main .table tbody td, main .table tbody th, table.dataTable tbody td, table.dataTable tbody th { background-color: transparent !important; }
main .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(245,246,247,.025) !important; color: #C5CAD3 !important; }
main .table > :not(:last-child) > :last-child > * { border-bottom-color: rgba(245,246,247,.12) !important; }

/* Router-config support matrix header */
.rcg-seo-matrix th { background: #1A2230 !important; color: #8a94a6 !important; }

/* =====================================================================
   ROOT var flip — the site is dark but theme.css --vpn-* stay LIGHT (no
   data-bs-theme). Templates use var(--vpn-text) (dark) / var(--vpn-surface*)
   (light) heavily → black-text-on-dark + white boxes. Flip them dark/mint
   site-wide. (Navbar re-sets these under its own data-bs-theme=dark.)
   ===================================================================== */
:root {
  --vpn-text: #C5CAD3;
  --vpn-text-muted: #8a94a6;
  --vpn-surface: #1A2230;
  --vpn-surface-2: #11161F;
  --vpn-surface-3: #222C3A;
  --vpn-border: rgba(245,246,247,.10);
  --gray-900: #F5F6F7;
  --vpn-primary: #19E3B1;
  --vpn-primary-light: #3BEBC0;
  --vpn-primary-dark: #0FB488;
  --bs-primary: #19E3B1;
  --bs-primary-rgb: 25,227,177;
  --primary: #19E3B1;
  --accent: #19E3B1;
}
/* DataTables paints background on tbody tr (not the cell) → transparent */
table.dataTable tbody tr { background-color: transparent !important; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: rgba(245,246,247,.025) !important; }
table.dataTable tbody tr.table-danger > * { background-color: rgba(239,68,68,.12) !important; color: #f0a3a3 !important; }
/* plain <label> text (e.g. newsletter checkbox) must be readable */
main label { color: #C5CAD3; }
/* Quantity stepper (−/+) + GEO selectpicker (buyvpn) → uniform dark fields */
main .input-group .btn-outline-secondary { background: #11161F !important; color: #aeb6c2 !important; border-color: rgba(245,246,247,.14) !important; }
main .input-group .btn-outline-secondary:hover { background: rgba(25,227,177,.1) !important; color: #19E3B1 !important; border-color: rgba(25,227,177,.4) !important; }
.bootstrap-select > .btn, .bootstrap-select > .dropdown-toggle, .bootstrap-select button.btn-light {
  background: #11161F !important; color: #F5F6F7 !important; border: 1px solid rgba(245,246,247,.14) !important; box-shadow: none !important; }
.bootstrap-select .dropdown-menu { background: #1A2230 !important; border-color: rgba(245,246,247,.10) !important; }
.bootstrap-select .dropdown-menu li a, .bootstrap-select .dropdown-menu .dropdown-item { color: #C5CAD3 !important; }
.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu .dropdown-item:hover, .bootstrap-select .dropdown-menu .dropdown-item.active { background: rgba(25,227,177,.1) !important; color: #19E3B1 !important; }
.bootstrap-select .bs-searchbox input { background: #11161F !important; color: #F5F6F7 !important; border-color: rgba(245,246,247,.14) !important; }
.bootstrap-select .filter-option-inner-inner { color: #F5F6F7 !important; }

/* =====================================================================
   MODAL-TOAST-INK-V1 — Modals & toasts dark (ink/mint).
   These live OUTSIDE <main>, so the `main …` rules above never reach
   them → white fields & off-brand buttons inside dark modals, plus
   fully-light floating toasts. Mirror the dark treatment scoped to
   .modal / .toast so EVERY modal matches: login/reg/forgot (auth.tpl),
   #popup & #info AJAX bodies (balance_form / change_logpass /
   vpn_instruction / proxy comment / groups), #window, image-gallery —
   and the bottom-left toasts (coupon, review, Telegram). .modal-content
   base is already dark; this covers the contents inside it.
   ===================================================================== */
/* Headings & generic text inside modals */
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 { color: #F5F6F7; }
.modal .text-muted, .modal .form-text { color: #8a94a6 !important; }
.modal .text-dark { color: #C5CAD3 !important; }
.modal .bg-light { background: #11161F !important; color: #C5CAD3 !important; }
.modal .bg-white { background: #1A2230 !important; }
.modal a:not(.btn) { color: #19E3B1; }
.modal a:not(.btn):hover { color: #3BEBC0; }

/* Form fields */
.modal .form-control, .modal .form-select, .modal textarea { background: #11161F; color: #F5F6F7; border-color: rgba(245,246,247,.14); }
.modal .form-control:focus, .modal .form-select:focus { background: #11161F; color: #F5F6F7; border-color: #19E3B1; box-shadow: 0 0 0 3px rgba(25,227,177,.18); }
.modal .form-control::placeholder { color: #6B7689; }
.modal .input-group-text { background: #1A2230; color: #aeb6c2; border-color: rgba(245,246,247,.14); }
.modal .input-group-text a { color: inherit; }
.modal label, .modal .form-label, .modal .col-form-label, .modal .form-check-label { color: #C5CAD3; }

/* Buttons → mint (match the rest of the site) */
.modal .btn-primary, .modal .btn-success, .modal .btn-info {
  background-color: #19E3B1 !important; border-color: #19E3B1 !important; color: #0A0E14 !important; box-shadow: none !important; }
.modal .btn-primary:hover, .modal .btn-success:hover, .modal .btn-info:hover,
.modal .btn-primary:focus, .modal .btn-success:focus, .modal .btn-info:focus,
.modal .btn-primary:active, .modal .btn-success:active, .modal .btn-info:active {
  background-color: #3BEBC0 !important; border-color: #3BEBC0 !important; color: #0A0E14 !important; }
.modal .btn-outline-primary { background-color: transparent !important; border-color: #19E3B1 !important; color: #19E3B1 !important; }
.modal .btn-outline-primary:hover { background-color: #19E3B1 !important; color: #0A0E14 !important; }
.modal .input-group .btn-outline-secondary, .modal .btn-outline-secondary {
  background: #11161F !important; color: #aeb6c2 !important; border-color: rgba(245,246,247,.14) !important; }
.modal .input-group .btn-outline-secondary:hover, .modal .btn-outline-secondary:hover {
  background: rgba(25,227,177,.1) !important; color: #19E3B1 !important; border-color: rgba(25,227,177,.4) !important; }

/* Alerts injected into auth modals (reg/login status messages) */
.modal .alert-success { background: rgba(25,227,177,.12); color: #c2e9dd; border-color: rgba(25,227,177,.25); }
.modal .alert-danger  { background: rgba(239,68,68,.12); color: #f0a3a3; border-color: rgba(239,68,68,.25); }
.modal .alert-warning { background: rgba(245,200,66,.10); color: #f0d499; border-color: rgba(245,200,66,.25); }
.modal .alert-info    { background: rgba(25,227,177,.08); color: #c2c9d4; border-color: rgba(25,227,177,.2); }

/* Tables / cards / code that may appear in AJAX modal bodies */
.modal .table { color: #C5CAD3; --bs-table-bg: transparent; --bs-table-color: #C5CAD3; }
.modal .table thead th { color: #8a94a6; border-bottom-color: rgba(245,246,247,.14); }
.modal .table > :not(caption) > * > * { border-color: rgba(245,246,247,.08); }
.modal .card { background: #1A2230; border-color: rgba(245,246,247,.08); color: #C5CAD3; }
.modal pre, .modal code { background: #11161F; color: #3BEBC0; border: 1px solid rgba(245,246,247,.08); border-radius: 6px; }

/* BS4-style close (×) used across modals/toasts → light & visible */
.modal .close, .toast .close { color: #F5F6F7; opacity: .65; text-shadow: none; }
.modal .close:hover, .toast .close:hover { color: #F5F6F7; opacity: 1; }
/* Close (×) pinned to the top-right CORNER of the modal header (BS4 .close right-align is lost in our CSS stack) */
.modal-header { position: relative; }
.modal-header .close, .modal-header .btn-close { position: absolute !important; top: .5rem; right: .75rem; margin: 0 !important; float: none !important; z-index: 5; }
.modal-header .close { padding: .35rem .65rem !important; font-size: 1.6rem; line-height: 1; }
.modal-header .btn-close { top: .9rem; right: 1rem; padding: .5rem !important; }
.modal-header .modal-title { padding-right: 2.25rem; }

/* Floating toasts (bottom-left): coupon / review / Telegram */
.toast { background: #1A2230; color: #C5CAD3; border: 1px solid rgba(245,246,247,.10); box-shadow: 0 12px 32px rgba(0,0,0,.45); border-radius: 12px; }
.toast-header { background: rgba(245,246,247,.03); color: #F5F6F7; border-bottom-color: rgba(245,246,247,.08); }
.toast-header strong { color: #F5F6F7; }
.toast-body { color: #C5CAD3; }
.toast-body a, .toast-body a:hover { color: #19E3B1; }

/* =====================================================================
   LEAFLET-INK-V1 — Map (homepage #index_maps) ink/mint.
   CARTO dark_all tiles are set in m.tpl. Here we recolor the blue
   circleMarkers → mint via CSS: Leaflet writes stroke/fill as SVG
   presentation attributes, and author CSS overrides those — so no JS
   edit to m.tpl is needed. Plus dark-theme the popups / tooltips / zoom
   & attribution controls so clicking or hovering a server node stays
   on-brand (defaults are white balloons on a dark map).
   ===================================================================== */
.leaflet-interactive { stroke: #3BEBC0; fill: #19E3B1; fill-opacity: .9; }
/* Popup balloon */
.leaflet-popup-content-wrapper { background: #1A2230; color: #C5CAD3; border: 1px solid rgba(245,246,247,.12); box-shadow: 0 12px 32px rgba(0,0,0,.5); border-radius: 12px; }
.leaflet-popup-content { color: #C5CAD3; }
.leaflet-popup-content a { color: #19E3B1; }
.leaflet-popup-tip { background: #1A2230; border: 1px solid rgba(245,246,247,.12); }
.leaflet-container a.leaflet-popup-close-button { color: #8a94a6; }
.leaflet-container a.leaflet-popup-close-button:hover { color: #19E3B1; }
/* Hover tooltip + its directional arrow */
.leaflet-tooltip { background: #1A2230; color: #C5CAD3; border: 1px solid rgba(245,246,247,.12); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.leaflet-tooltip-top:before    { border-top-color: #1A2230; }
.leaflet-tooltip-bottom:before { border-bottom-color: #1A2230; }
.leaflet-tooltip-left:before   { border-left-color: #1A2230; }
.leaflet-tooltip-right:before  { border-right-color: #1A2230; }
/* Zoom +/- control */
.leaflet-bar { border: 1px solid rgba(245,246,247,.10); }
.leaflet-bar a, .leaflet-bar a:link { background: #1A2230; color: #C5CAD3; border-bottom-color: rgba(245,246,247,.12); }
.leaflet-bar a:hover { background: #222C3A; color: #19E3B1; }
.leaflet-bar a.leaflet-disabled { background: #141a24; color: #4a5260; }
/* Attribution */
.leaflet-control-attribution { background: rgba(10,14,20,.72) !important; color: #6B7689; }
.leaflet-control-attribution a { color: #8a94a6; }
.leaflet-control-attribution a:hover { color: #19E3B1; }

/* === Missing flag-icons (dk/no — added as VPN locations after the flag-icons build) === */
.flag-icon-dk { background-image: url(/build/images/flags/dk.svg); }
.flag-icon-no { background-image: url(/build/images/flags/no.svg); }

/* === Mobile navbar (incl. logged-in cabinet) — solid opaque, readable, no green/transparent bleed (2026-06-14) === */
@media (max-width: 991.98px){
  .navbar[data-bs-theme="dark"] .navbar-collapse{
    background: #0A0E14 !important; border: 1px solid rgba(245,246,247,.10);
    border-radius: 14px; padding: .55rem .7rem .9rem; margin: .5rem 0 0;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.85); }
  .navbar[data-bs-theme="dark"] .navbar-collapse .nav-link,
  .navbar[data-bs-theme="dark"] .navbar-collapse .dropdown-item{
    color: #C5CAD3 !important; background: transparent !important; -webkit-tap-highlight-color: transparent;
    border-radius: 10px; padding: .6rem .8rem !important; font-weight: 500; }
  .navbar[data-bs-theme="dark"] .navbar-collapse .nav-link.active,
  .navbar[data-bs-theme="dark"] .navbar-collapse .nav-link:hover,
  .navbar[data-bs-theme="dark"] .navbar-collapse .dropdown-item:hover{
    color: #19E3B1 !important; background: rgba(25,227,177,.10) !important; }
  .navbar[data-bs-theme="dark"] .navbar-collapse .dropdown-menu{
    position: static !important; float: none !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; padding: 0 0 0 .6rem !important; margin: 0; }
  .navbar[data-bs-theme="dark"] .navbar-collapse .dropdown-toggle::after{ color:#8a94a6; }
  .navbar[data-bs-theme="dark"] .navbar-collapse a.text-success{
    display:inline-flex !important; align-items:center; gap:.4rem;
    background: rgba(25,227,177,.10) !important; color:#F5F6F7 !important;
    border:1px solid rgba(25,227,177,.3); border-radius:999px;
    padding:.5rem 1rem !important; font-weight:600; margin:.35rem 0; }
  .navbar[data-bs-theme="dark"] .navbar-collapse a[href="/user.html?buyvpn"]{
    display:inline-flex !important; background:#19E3B1 !important; color:#0A0E14 !important;
    border-radius:999px; padding:.55rem 1.1rem !important; font-weight:600; margin:.35rem 0; }
  .navbar[data-bs-theme="dark"] .navbar-collapse a[href="/user.html?buyvpn"] i{ color:#0A0E14 !important; }
}
/* Hamburger → clearer (border + lang-aware "Menu" label from m.tpl) */
.navbar-toggler{ display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border:1px solid rgba(245,246,247,.22) !important; border-radius:10px; }
.navbar-toggler-label{ color:#C5CAD3; font-size:.85rem; font-weight:600; font-family:var(--font-body,'Inter',sans-serif); }

/* === Stylish "Show expired" switch (cabinet) — no visible input === */
.exp-switch{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none !important; color:#aeb6c2 !important; font-size:.9rem; cursor:pointer; user-select:none; }
.exp-switch:hover{ color:#F5F6F7 !important; }
.exp-switch .exp-track{ width:40px; height:22px; border-radius:999px; background:rgba(245,246,247,.14); border:1px solid rgba(245,246,247,.18); position:relative; transition:background .2s,border-color .2s; flex:none; }
.exp-switch .exp-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#8a94a6; transition:transform .2s,background .2s; }
.exp-switch.on{ color:#19E3B1 !important; }
.exp-switch.on .exp-track{ background:rgba(25,227,177,.25); border-color:#19E3B1; }
.exp-switch.on .exp-knob{ transform:translateX(18px); background:#19E3B1; }
.exp-switch i{ font-size:.95rem; }