/* ==========================================================================
   main-theme.css — DARK NEUMORPHISM / Soft UI  ·  2026-10-18
   Reference art: https://www.freepik.com flat-design-ui-ux-elements kit
   Strict palette (per client spec):
     body bg      #0b0d1b → #111328
     surfaces     soft dark-purple → navy gradients, radius 20–24px
     CTA          #ff9a44 → #fc6076 (warm LOGIN gradient)
     icons/neon   #00f2fe → #4facfe (neon blue)
     shadows      dual-dark neumorphic + edge light + hover glow
   Pipeline: ①reset → ②tokens → ③ambient → ④tag styling → ⑤recipes → ⑥bridge
   IMPORTANT: never apply backdrop-filter/filter to .tunnel-heading /
   .settings-top / .management-page>.topbar — they host the fixed sidebar
   include; a filter becomes its positioning ancestor and collapses it.
   ========================================================================== */

/* ==========================================================================
   ①  RESET & NORMALIZATION
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video,canvas{display:block;max-width:100%}
figure{margin:0}
ul,ol{list-style:none}
blockquote,q{quotes:none}
fieldset{border:0;min-width:0}
legend{padding:0}
a{text-decoration:none}
button{border:0;background:none;cursor:pointer;appearance:none;-webkit-appearance:none}
input,select,textarea{appearance:none;-webkit-appearance:none}
input[type="checkbox"],input[type="radio"]{appearance:auto;-webkit-appearance:auto}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;height:1px;background:rgba(224,228,255,.10)}
abbr[title]{text-decoration:underline dotted}
b,strong{font-weight:700}
small{font-size:.85em}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em}
[hidden]{display:none!important}
:where(:root)::-webkit-scrollbar{width:10px;height:10px}
:where(:root)::-webkit-scrollbar-track{background:transparent}
:where(:root)::-webkit-scrollbar-thumb{background:rgba(var(--icon-rgb,79,172,254),.35);border-radius:8px;border:3px solid transparent;background-clip:content-box}

/* ==========================================================================
   ②  DESIGN TOKENS — client-spec palette, one source of truth
   ========================================================================== */
:root{
  /* canvas */
  --page-bg-0:#0b0d1b;
  --page-bg-1:#111328;
  --page-bg-2:#0a0c18;            /* deepest stop */

  /* neumorphic shadows (client-specified recipe) */
  --ns-out:8px 8px 16px rgba(5,6,14,.6),-8px -8px 16px rgba(25,30,60,.4),inset 1px 1px 1px rgba(255,255,255,.1);
  --ns-out-lg:12px 12px 26px rgba(5,6,14,.62),-10px -10px 22px rgba(25,30,60,.42),inset 1px 1px 1px rgba(255,255,255,.12);
  --ns-raised:6px 6px 14px rgba(5,6,14,.55),-6px -6px 14px rgba(25,30,60,.38),inset 1px 1px 1px rgba(255,255,255,.10);
  --ns-in:inset 6px 6px 14px rgba(5,6,14,.6),inset -6px -6px 14px rgba(25,30,60,.4);
  --ns-in-sm:inset 3px 3px 8px rgba(5,6,14,.55),inset -3px -3px 8px rgba(25,30,60,.35);

  /* surfaces */
  --n-card:linear-gradient(145deg,#23224a,#151733);       /* raised card      */
  --n-card-soft:linear-gradient(145deg,#1d1f3e,#14162c);  /* secondary card   */
  --n-deboss:linear-gradient(145deg,#0d0f22,#161930);     /* wells / inputs   */
  --n-shell:linear-gradient(180deg,#111328,#0b0d1b);      /* big containers   */

  /* accents */
  --hot:linear-gradient(135deg,#ff9a44,#fc6076);          /* warm CTA         */
  --icon:linear-gradient(135deg,#00f2fe,#4facfe);         /* neon icon ribbon */
  --neon:#4facfe;
  --hot-rgb:255,154,68;
  --pink-rgb:252,96,118;
  --neon-rgb:0,242,254;
  --icon-rgb:79,172,254;
  --accent-rgb:79,172,254;        /* generic ring/border tint        */

  /* lines */
  --line:rgba(224,228,255,.10);
  --line-strong:rgba(224,228,255,.22);
  --line-faint:rgba(224,228,255,.07);

  /* text */
  --text:#f2f3ff;
  --text-soft:#cdd2f2;
  --muted:#9aa1cc;

  /* shape & motion */
  --r-lg:24px;
  --r-md:20px;
  --r-sm:14px;
  --speed:.2s;

  /* legacy aliases (glass-era plumbing kept alive) */
  --glass-panel:#1b1d3a;            /* solid base of big sheets */
  --glass-panel-strong:#1d1f3e;
  --glass-line:rgba(224,228,255,.10);
  --glass-line-soft:rgba(224,228,255,.10);
  --glass-line-faint:rgba(224,228,255,.07);
  --glass-blur:0px;
  --glass-sat:100%;
  --glass-noise:none;
  --glass-field:#0e1024;
  --glass-shadow:var(--ns-out-lg);
  --glass-shadow-lg:var(--ns-out-lg);
  --glass-hover-line:rgba(224,228,255,.22);
}

/* ==========================================================================
   ③  AMBIENT GLOW — two in-palette orbs breathe behind everything
   ========================================================================== */
html::before,
body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  z-index:-1;
  will-change:transform;
}
html::before{
  width:560px;height:560px;top:-190px;left:-140px;
  background:radial-gradient(circle at 42% 46%,#3644b8 0%,#3644b8 46%,transparent 72%);
  filter:blur(100px);opacity:.34;
  animation:g-orb-a 36s ease-in-out infinite alternate;
}
body::before{
  width:500px;height:500px;bottom:-180px;right:-120px;
  background:radial-gradient(circle at 55% 50%,#00c8d8 0%,#00c8d8 44%,transparent 72%);
  filter:blur(100px);opacity:.14;
  animation:g-orb-b 44s ease-in-out infinite alternate;
}
body::after{
  width:430px;height:430px;top:32%;right:-190px;
  background:radial-gradient(circle at 50% 48%,#e0587c 0%,#e0587c 42%,transparent 72%);
  filter:blur(100px);opacity:.12;
  animation:g-orb-c 52s ease-in-out infinite alternate;
}
html{position:relative}
body{position:relative;z-index:0}
@keyframes g-orb-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(70px,60px,0) scale(1.1)}}
@keyframes g-orb-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-80px,-55px,0) scale(1.12)}}
@keyframes g-orb-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-60px,-70px,0) scale(1.14)}}
@media (prefers-reduced-motion:reduce){html::before,body::before,body::after{animation:none}}
@media (max-width:720px){
  html::before,body::before,body::after{filter:blur(70px);opacity:.24}
  html::before{width:340px;height:340px}
  body::before{width:320px;height:320px}
  body::after{width:260px;height:260px}
}

/* ==========================================================================
   ①c  GLOBAL ACTION RESET — every <a> and <button> obeys the theme
   :where(html) keeps specificity at 0 so page-level skins still win their
   own wars; the three non-negotiable properties carry !important.
   ========================================================================== */

/* --- links: no browser purple, no underline, one motion language ---------- */
:where(html) a,
:where(html) a:visited{
  color:#8fc6ff;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
}
:where(html) a:hover{color:#b9dcff;text-shadow:0 0 14px rgba(79,172,254,.35)}
:where(html) a:active{color:#d6ecff}
:where(html) a:focus-visible{outline:2px solid rgba(79,172,254,.7) !important;outline-offset:2px;border-radius:6px}

/* --- buttons: browser chrome is forbidden ---------------------------------- */
:where(html) button,
:where(html) input[type="submit"],
:where(html) input[type="button"],
:where(html) input[type="reset"]{
  border:0 !important;
  outline:0 !important;
  font-family:inherit !important;      /* exact global typeface */
  color:inherit;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
:where(html) button::-moz-focus-inner{border:0}
:where(html) :is(button,input[type="submit"],input[type="button"],input[type="reset"]):disabled{
  opacity:.45;cursor:default;transform:none !important;box-shadow:none !important;
}

/* ==========================================================================
   ④  GLOBAL TAG STYLING
   ========================================================================== */
body{
  min-height:100vh;
  font:14px/1.75 "Vazirmatn",Inter,"Segoe UI",Tahoma,system-ui,sans-serif;
  color:var(--text);
  letter-spacing:.01em;
  overflow-x:hidden;
  --tonergb:var(--icon-rgb,79,172,254);
  --tone:var(--neon,#4facfe);
  background:
    radial-gradient(1000px 560px at 84% -12%,rgba(54,68,184,.20),transparent 62%),
    radial-gradient(860px 520px at -12% 22%,rgba(0,200,216,.08),transparent 66%),
    radial-gradient(1200px 700px at 52% 118%,rgba(224,88,124,.07),transparent 62%),
    linear-gradient(180deg,#111328,#0b0d1b 46%,#0a0c18);
  background-attachment:fixed;
}
::selection{background:rgba(79,172,254,.38);color:#fff}

h1{font-size:clamp(21px,3.2vw,27px);font-weight:800;line-height:1.5;letter-spacing:0;color:var(--text)}
h2{font-size:clamp(17px,2.4vw,20px);font-weight:750;line-height:1.6}
h3{font-size:clamp(14.5px,2vw,16px);font-weight:700}
h4,h5,h6{font-size:clamp(13px,1.6vw,14.5px);font-weight:700}
h1,h2,h3{word-wrap:break-word}

p{color:var(--text-soft);line-height:1.85;overflow-wrap:break-word}
small{color:var(--muted)}
dt{font-weight:700;color:var(--text-soft)}
dd{margin-inline-start:0;color:var(--muted)}

a{color:#6fc2ff;transition:color var(--speed),opacity var(--speed),text-shadow var(--speed)}
a:hover{color:#9ad8ff;text-shadow:0 0 14px rgba(79,172,254,.40)}
a:focus-visible{outline:2px solid rgba(79,172,254,.7);outline-offset:2px;border-radius:6px}

/* ==========================================================================
   ⑤  SURFACE RECIPES — neumorphic raised sheets (no glass, no blur)
   ========================================================================== */
.glass,.glass-card,.glass-panel,
article,main>section,main>aside,dialog,.modal-content,form[role="dialog"]{
  position:relative;
  isolation:isolate;
  background:var(--n-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--ns-out-lg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:border-color var(--speed),box-shadow var(--speed),transform var(--speed);
}
.glass-card:hover,.glass-panel:hover{
  border-color:var(--line-strong);
  box-shadow:
    var(--ns-out-lg),
    0 0 26px rgba(79,172,254,.14);
  transform:translateY(-2px);
}
main>section,main>aside{padding:16px 18px;margin-bottom:16px}

/* --- forms: debossed wells ------------------------------------------------ */
label,legend{color:#c3c8ee;font-size:13px;font-weight:600}
input,textarea,select{
  width:100%;
  min-height:42px;
  padding:10px 14px;
  border-radius:var(--r-md);
  border:1px solid rgba(224,228,255,.10);
  background:var(--n-deboss);
  color:var(--text);
  font:inherit;letter-spacing:.01em;
  box-shadow:var(--ns-in);
  transition:border-color var(--speed),box-shadow var(--speed),background-color var(--speed);
}
textarea{min-height:96px;resize:vertical;line-height:1.8}
select{cursor:pointer;background-image:none}
input::placeholder,textarea::placeholder{color:#6f769f}
input:hover,textarea:hover,select:hover{
  border-color:rgba(79,172,254,.35);
  box-shadow:var(--ns-in),0 0 0 1px rgba(79,172,254,.14);
}
input:focus,textarea:focus,select:focus{
  outline:0;
  border-color:rgba(0,242,254,.55);
  box-shadow:
    var(--ns-in),
    0 0 0 3px rgba(79,172,254,.20),
    0 0 26px rgba(0,242,254,.16);
}
input[type="checkbox"],input[type="radio"]{width:auto;min-height:0;accent-color:#4facfe}
input[type="range"]{accent-color:#4facfe;box-shadow:none}
input[type="color"]{padding:2px;cursor:pointer}
input[type="file"]{cursor:pointer}
input[type="file"]::file-selector-button{
  margin-inline-end:12px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:#1d1f3e;color:var(--text);transition:background-color var(--speed);
}
input[type="file"]::file-selector-button:hover{background:#23224a}

/* --- buttons: raised soft tiles, warm gradient for the primary action ----- */
/* anchor/submit-action classes adopt the same button recipe (user request) */
:is(
  button,
  a[class*="btn"],
  a.nav-link,
  .auth-switch>a,
  a.renewal-back,
  a.login-link,
  summary,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 18px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:#1d1f3e;
  color:#dfe3ff;font:600 13px/1.4 inherit;letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:var(--ns-raised);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:transform .18s ease,border-color var(--speed),background-color var(--speed),box-shadow var(--speed),color var(--speed);
}
/* submit/reset inputs must not inherit the full-width field look */
:is(input[type="submit"],input[type="button"],input[type="reset"]){width:auto;background-color:#1d1f3e}
:is(
  button,
  a[class*="btn"],
  a.nav-link,
  .auth-switch>a,
  a.renewal-back,
  a.login-link,
  summary,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):hover{
  background:#23224a;
  border-color:var(--line-strong);color:#fff;transform:translateY(-1px);
  box-shadow:
    var(--ns-raised),
    0 0 22px rgba(79,172,254,.20);
}
:is(
  button,
  a[class*="btn"],
  a.nav-link,
  .auth-switch>a,
  a.renewal-back,
  a.login-link,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):active{transform:translateY(0) scale(.98);box-shadow:var(--ns-in)}
:is(
  button,
  a[class*="btn"],
  a.nav-link,
  .auth-switch>a,
  a.renewal-back,
  a.login-link,
  summary,
  input[type="submit"],
  input[type="button"],
  input[type="reset"]
):focus-visible{
  outline:0;border-color:rgba(0,242,254,.6);
  box-shadow:0 0 0 3px rgba(79,172,254,.24),0 0 24px rgba(0,242,254,.20);
}
/* primary action = warm gradient CTA (LOGIN style) */
button[type="submit"],button.primary,.btn-primary,a.hero-button,input[type="submit"].btn-primary{
  background:var(--hot)!important;
  border-color:rgba(252,96,118,.45)!important;color:#fff!important;
  box-shadow:0 14px 34px -10px rgba(252,96,118,.45),0 0 28px rgba(255,154,68,.22),inset 0 1px 0 rgba(255,255,255,.25)!important;
  text-shadow:0 1px 2px rgba(40,14,28,.35);
}
button[type="submit"]:hover,button.primary:hover,.btn-primary:hover,a.hero-button:hover,input[type="submit"].btn-primary:hover{
  background:linear-gradient(135deg,#ffab60,#fc6f88)!important;
  border-color:rgba(252,96,118,.65)!important;
  box-shadow:0 18px 40px -10px rgba(252,96,118,.6),0 0 40px rgba(255,154,68,.35),inset 0 1px 0 rgba(255,255,255,.3)!important;
  transform:translateY(-1px);
}
button[type="submit"]:active,button.primary:active{box-shadow:inset 4px 4px 12px rgba(120,30,40,.45)!important}
button:disabled{opacity:.45;cursor:default;transform:none!important;box-shadow:none!important}

/* --- tables ---------------------------------------------------------------- */
table{width:100%;font-size:13px;color:var(--text-soft)}
table th{
  padding:10px 12px;text-align:start;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line-faint);
  white-space:nowrap;
}
table td{padding:10px 12px;border-bottom:1px solid var(--line-faint);vertical-align:middle}
table tbody tr{transition:background-color var(--speed)}
table tbody tr:hover{background:rgba(79,172,254,.06)}

/* --- semantic chrome -------------------------------------------------------- */
header,footer{color:var(--text)}
nav a{display:inline-flex;align-items:center;gap:8px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--n-card-soft);
  box-shadow:var(--ns-out);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
details>summary{border-radius:var(--r-md)}
details[open]>summary{border-start-end-radius:var(--r-md);border-start-start-radius:var(--r-md)}
dialog::backdrop{background:rgba(5,6,14,.66);backdrop-filter:blur(6px)}

/* --- media ------------------------------------------------------------------ */
img{border-radius:var(--r-sm)}
video{border-radius:var(--r-md)}

/* ==========================================================================
   ⑤b  FALLBACK removed: every surface is solid by design now
   ========================================================================== */

/* ==========================================================================
   ⑥  BRIDGE LAYER — the panel's existing class names adopt the theme
   ========================================================================== */

/* --- page shell & tabs ---------------------------------------------------- */
html[data-panel-ui] body{
  position:relative;z-index:0;
  --tonergb:79,172,254;
  --tone:#4facfe;
  --ui-bg:#0b0d1b;--ui-surface:#1d1f3e;--ui-surface-2:#23224a;
  --ui-border:rgba(224,228,255,.10);--ui-border-strong:rgba(224,228,255,.22);
  --ui-text:var(--text);--ui-muted:var(--muted);
  background:
    radial-gradient(1000px 560px at 84% -12%,rgba(54,68,184,.20),transparent 62%),
    radial-gradient(860px 520px at -12% 22%,rgba(0,200,216,.08),transparent 66%),
    linear-gradient(180deg,#111328,#0b0d1b 46%,#0a0c18) !important;
  background-attachment:fixed;
}
html[data-panel-ui] body ::selection{background:rgba(79,172,254,.38);color:#fff}
html[data-panel-ui] body a:not(.btn){color:#6fc2ff}
html[data-panel-ui] body a:not(.btn):hover{color:#9ad8ff;text-shadow:0 0 14px rgba(79,172,254,.40)}

/* --- tone system is retired: every page wears the single Soft-UI palette --- */
html[data-panel-ui] body[data-page-tone],
html[data-panel-ui] body[data-page-tone="violet"],
html[data-panel-ui] body[data-page-tone="blue"],
html[data-panel-ui] body[data-page-tone="cyan"],
html[data-panel-ui] body[data-page-tone="teal"],
html[data-panel-ui] body[data-page-tone="emerald"],
html[data-panel-ui] body[data-page-tone="amber"],
html[data-panel-ui] body[data-page-tone="rose"],
html[data-panel-ui] body[data-page-tone="indigo"]{
  --neon:#4facfe !important;
  --violet-grad:var(--icon) !important;
  --tone:#4facfe !important;
  --tonergb:79,172,254 !important;
}
html[data-panel-ui] body{--page-rgb:79,172,254 !important;--page-color:#4facfe !important}
html:has(body)::before{background:radial-gradient(circle at 42% 46%,#3644b8 0%,#3644b8 46%,transparent 72%)}

/* --- soft card family: headings, cards, chips, notes, dialogs -------------- */
html[data-panel-ui] body :is(
  .tunnel-heading,.settings-top,.management-page>.topbar,
  .tunnel-card,.workspace-editor,.settings-card,.reseller-card,
  .inline-connection-workspace,.bs-directory,.crm-finance-hero,
  .collapsible-item,.tunnel-flow,.tunnel-note,.reseller-controls,
  .purchase-admin-actions,.tunnel-saved,
  .modal-content,.admin-toast
  /* NOTE: #adminActivityPanel deliberately excluded — it must stay
     position:fixed (admin-notifications.css); forcing relative here broke
     it into the page flow (panel opened at the top of the site). */
){
  position:relative;
  isolation:isolate;
  background:var(--n-card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--ns-out-lg) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body :is(.tunnel-heading,.settings-top,.management-page>.topbar){
  /* NO backdrop-filter: these bars host the fixed sidebar include */
  background:var(--n-card) !important;
  box-shadow:var(--ns-out) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* card hover = gentle glow, no lift for the big shells */
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card,.crm-finance-hero):hover{
  border-color:var(--line-strong) !important;
  box-shadow:var(--ns-out-lg),0 0 24px rgba(79,172,254,.10) !important;
}
/* inner receipt tiles of the finance pages adopt the secondary card look */
html[data-panel-ui] body .crm-receipt{
  background:var(--n-card-soft) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--ns-out) !important;
}
html[data-panel-ui] body .crm-receipt:hover{border-color:var(--line-strong) !important}
/* card header bands */
html[data-panel-ui] body :is(.tunnel-card,.workspace-editor,.settings-card,.reseller-card)>h2:first-child{
  background:linear-gradient(180deg,rgba(224,228,255,.05),transparent) !important;
  border-bottom:1px solid var(--line-faint) !important;
}
html[data-panel-ui] body .settings-card>.ui-card-header-row{
  background:linear-gradient(180deg,rgba(224,228,255,.04),transparent) !important;
}

/* --- stats tiles ----------------------------------------------------------- */
html[data-panel-ui] body :is(.finance-stat,.purchase-admin-stats article),
html[data-panel-ui] body .stat{
  background:var(--n-card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--ns-out) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body .finance-stat strong{color:#eef0ff}
html[data-panel-ui] body .stat-icon{
  background:var(--icon) !important;
  border-radius:14px;
  color:#fff !important;
  box-shadow:0 10px 24px -8px rgba(79,172,254,.55),inset 0 1px 1px rgba(255,255,255,.35);
}

/* --- sidebar: debossed rail, raised active item ---------------------------- */
html[data-panel-ui] body .crm-sidebar{
  background:var(--n-card-soft) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--ns-out) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body .crm-nav-item{
  border-radius:12px;
  transition:background-color var(--speed),box-shadow var(--speed),color var(--speed);
}
html[data-panel-ui] body .crm-nav-item:hover{
  background:#23224a;
  box-shadow:var(--ns-raised);
  color:#fff;
}
html[data-panel-ui] body .crm-nav-item.is-current{
  background:#23224a;
  box-shadow:var(--ns-raised),0 0 20px rgba(79,172,254,.25);
  color:#fff;
  border-inline-start:3px solid #4facfe;
}
/* colored user-operation buttons in the admin sidebar */
html[data-panel-ui] body #managementNavigation .btn-user-create{
  background-color:rgba(34,197,94,.15) !important;border:1px solid rgba(34,197,94,.55) !important;color:#b9f6cf !important;
}
html[data-panel-ui] body #managementNavigation .btn-user-create:hover{
  background-color:#22c55e !important;border-color:#22c55e !important;color:#fff !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(34,197,94,.28) !important;
}
html[data-panel-ui] body #managementNavigation .btn-user-renew{
  background-color:rgba(255,193,7,.14) !important;border:1px solid rgba(255,193,7,.55) !important;color:#ffe28a !important;
}
html[data-panel-ui] body #managementNavigation .btn-user-renew:hover{
  background-color:#ffc107 !important;border-color:#ffc107 !important;color:#1d1f3e !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(255,193,7,.28) !important;
}
html[data-panel-ui] body #managementNavigation .btn-user-sync{
  background-color:rgba(167,139,250,.16) !important;border:1px solid rgba(167,139,250,.55) !important;color:#ddd6fe !important;
}
html[data-panel-ui] body #managementNavigation .btn-user-sync:hover{
  background-color:#a78bfa !important;border-color:#a78bfa !important;color:#fff !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(167,139,250,.3) !important;
}
/* one color per workspace tab */
html[data-panel-ui] body #managementNavigation .crm-tone-blue{--tone:#4facfe;--tone-rgb:79,172,254}
html[data-panel-ui] body #managementNavigation .crm-tone-yellow{--tone:#fbbf24;--tone-rgb:251,191,36}
html[data-panel-ui] body #managementNavigation .crm-tone-emerald{--tone:#34d399;--tone-rgb:52,211,153}
html[data-panel-ui] body #managementNavigation .crm-tone-pink{--tone:#ec4899;--tone-rgb:236,72,153}
html[data-panel-ui] body #managementNavigation .crm-tone-orange{--tone:#ff9a44;--tone-rgb:255,154,68}
html[data-panel-ui] body #managementNavigation .crm-tone-cyan{--tone:#00f2fe;--tone-rgb:0,242,254}
html[data-panel-ui] body #managementNavigation .crm-tone-purple{--tone:#a78bfa;--tone-rgb:167,139,250}
html[data-panel-ui] body #managementNavigation .crm-tone-coral{--tone:#fc6076;--tone-rgb:252,96,118}
html[data-panel-ui] body #managementNavigation .crm-tone-sky{--tone:#38bdf8;--tone-rgb:56,189,248}
html[data-panel-ui] body #managementNavigation .crm-tone-lime{--tone:#a3e635;--tone-rgb:163,230,53}
html[data-panel-ui] body #managementNavigation .crm-tone-teal{--tone:#2dd4bf;--tone-rgb:45,212,191}
html[data-panel-ui] body #managementNavigation .crm-tone-fuchsia{--tone:#e879f9;--tone-rgb:232,121,249}
html[data-panel-ui] body #managementNavigation .crm-tone-magenta{--tone:#d946ef;--tone-rgb:217,70,239}
html[data-panel-ui] body #managementNavigation .crm-tone-indigo{--tone:#818cf8;--tone-rgb:129,140,248}
html[data-panel-ui] body #managementNavigation [class*="crm-tone-"]{
  background-color:rgba(var(--tone-rgb),.09) !important;
  border-color:rgba(var(--tone-rgb),.4) !important;
  color:var(--tone) !important;
}
html[data-panel-ui] body #managementNavigation [class*="crm-tone-"]:hover{
  background-color:rgba(var(--tone-rgb),.28) !important;
  border-color:var(--tone) !important;
  color:#fff !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(var(--tone-rgb),.3) !important;
}
html[data-panel-ui] body #managementNavigation .crm-nav-item.is-current{
  background:#23224a !important;
  border-color:var(--tone,#4facfe) !important;
  color:#fff !important;
}

/* --- buttons bridge ---------------------------------------------------------- */
html[data-panel-ui] body :is(.btn-primary,.tunnel-primary){
  background:var(--hot) !important;
  border-color:rgba(252,96,118,.45) !important;
  color:#fff !important;
  box-shadow:0 14px 34px -10px rgba(252,96,118,.45),0 0 28px rgba(255,154,68,.22),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html[data-panel-ui] body :is(.btn-primary,.tunnel-primary):hover{
  background:linear-gradient(135deg,#ffab60,#fc6f88) !important;
  border-color:rgba(252,96,118,.65) !important;
  box-shadow:0 18px 40px -10px rgba(252,96,118,.6),0 0 40px rgba(255,154,68,.35),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html[data-panel-ui] body :is(.btn-outline-secondary,.btn-secondary,.btn-outline-primary,.tunnel-secondary,.management-editor-trigger){
  background:#1d1f3e !important;
  border-color:var(--line) !important;
  color:#dfe3ff !important;
  box-shadow:var(--ns-raised) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body :is(.btn-outline-secondary,.btn-secondary,.btn-outline-primary,.tunnel-secondary,.management-editor-trigger):hover{
  background:#23224a !important;
  border-color:var(--line-strong) !important;
  color:#fff !important;
  box-shadow:var(--ns-raised),0 0 22px rgba(79,172,254,.20) !important;
}
html[data-panel-ui] body .btn{border-radius:var(--r-md)}

/* --- fields bridge ------------------------------------------------------------ */
html[data-panel-ui] body :is(.form-control,.form-select){
  background:var(--n-deboss) !important;
  border:1px solid rgba(224,228,255,.10) !important;
  border-radius:var(--r-md) !important;
  color:var(--text) !important;
  box-shadow:var(--ns-in) !important;
  transition:border-color var(--speed),box-shadow var(--speed),background-color var(--speed);
}
html[data-panel-ui] body :is(.form-control,.form-select):hover{
  border-color:rgba(79,172,254,.35) !important;
  box-shadow:var(--ns-in),0 0 0 1px rgba(79,172,254,.14) !important;
}
html[data-panel-ui] body :is(.form-control,.form-select):focus{
  border-color:rgba(0,242,254,.55) !important;
  box-shadow:var(--ns-in),0 0 0 3px rgba(79,172,254,.20),0 0 26px rgba(0,242,254,.16) !important;
  color:#fff !important;
}
html[data-panel-ui] body .form-label{color:#c3c8ee}

/* --- modals & toasts ----------------------------------------------------------- */
html[data-panel-ui] body .modal-content{
  background:var(--n-card) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:var(--ns-out-lg) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body .admin-toast,html[data-panel-ui] body #adminActivityPanel{
  background:var(--n-card) !important;
  border-color:var(--line-strong) !important;
  box-shadow:var(--ns-out-lg) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body #adminActivityButton{
  background:#1d1f3e !important;
  border-color:var(--line) !important;color:#dfe3ff !important;
  box-shadow:var(--ns-raised) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body #adminActivityButton:hover{
  border-color:var(--line-strong) !important;
  box-shadow:var(--ns-raised),0 0 22px rgba(79,172,254,.20) !important;
}

/* --- auth shell ------------------------------------------------------------------ */
html[data-panel-ui] body.auth-page .auth-shell{
  background:var(--n-card) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:var(--ns-out-lg) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* --- revenue chart bars: neon ribbon ---------------------------------------------- */
html[data-panel-ui] body .portal-chart-bar i{
  display:block;
  width:min(100%,56px);                /* a single month must not cover the whole chart */
  margin-inline:auto;
  background:var(--icon);
  border-radius:10px 10px 0 0;
  min-height:4px;
  box-shadow:0 10px 24px -8px rgba(79,172,254,.55),inset 0 1px 1px rgba(255,255,255,.35);
}
html[data-panel-ui] body .portal-chart-bar i.chart-height-0{height:6px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-1{height:16px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-2{height:32px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-3{height:48px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-4{height:64px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-5{height:80px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-6{height:96px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-7{height:112px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-8{height:128px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-9{height:142px}
html[data-panel-ui] body .portal-chart-bar i.chart-height-10{height:156px}

/* floating activity pill: pastel blue gradient chip
   NOTE: the button/panel/toasts render inside header.tunnel-heading. Content
   cards (main>section) stack later in DOM and swallow the pill's z-index,
   unless the header itself holds an elevated layer. */
html[data-panel-ui] body main.tunnel-page > header.tunnel-heading{
  z-index:40;
}
html[data-panel-ui] body #adminActivityButton{
  background:linear-gradient(135deg,#9dc7ff,#6da2fb) !important;
  border:1px solid rgba(255,255,255,.32) !important;
  color:#fff !important;   
  box-shadow:var(--ns-raised),0 8px 18px -8px rgba(109,162,251,.55) !important;
}

/* --- link-tiles: anchor cards & rows become Soft-UI tiles (layout-safe) ----- */html[data-panel-ui] body :is(a.reseller-tool,a.support-link,a.portal-card,a.reseller-tool-locked){
  background:var(--n-card-soft) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--ns-out) !important;
  text-decoration:none !important;
  color:var(--text-soft) !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-panel-ui] body :is(a.reseller-tool,a.support-link,a.portal-card):hover{
  background:var(--n-card) !important;
  border-color:var(--line-strong) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--ns-out),0 0 24px rgba(79,172,254,.16) !important;
}
html[data-panel-ui] body :is(a.reseller-tool,a.support-link,a.portal-card):active{
  transform:translateY(0) !important;
  box-shadow:var(--ns-in) !important;
}
html[data-panel-ui] body a.reseller-tool-locked{
  opacity:.55;
  cursor:not-allowed;
}
html[data-panel-ui] body a.reseller-tool-locked:hover{
  box-shadow:var(--ns-out) !important;
  transform:none !important;
}

/* --- micro details ------------------------------------------------------------------ */
html[data-panel-ui] body ::-webkit-scrollbar-thumb{background:rgba(79,172,254,.35);border-radius:8px;border:3px solid transparent;background-clip:content-box}
html[data-panel-ui] body .form-check-input:checked{background-color:#4facfe;border-color:#00f2fe}
html[data-panel-ui] body .finance-scope a:not(.btn){
  background:var(--n-card-soft) !important;
  border:1px solid var(--line) !important;
  color:#cdd2f2 !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:var(--ns-raised);
}
html[data-panel-ui] body .finance-scope a.is-active:not(.btn){
  background:#23224a !important;
  border-color:rgba(79,172,254,.55) !important;color:#fff !important;
  box-shadow:var(--ns-raised),0 0 22px rgba(79,172,254,.25) !important;
}

/* --- green copy-link pill (لینک عمومی دانلود اندروید) ---------------------- */
html[data-panel-ui] body .btn.tunnel-green{
  border:1px solid rgba(34,197,94,.4) !important;
  background:linear-gradient(135deg,#4ade80,#16a34a) !important;
  color:#fff !important;font-weight:600;
  min-height:var(--ui-control-height,40px);padding:0 16px;
  border-radius:var(--ui-control-radius,999px);
  box-shadow:0 10px 26px -8px rgba(22,163,74,.55);
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
}
html[data-panel-ui] body .btn.tunnel-green:hover{
  background:linear-gradient(135deg,#4ade80,#16a34a) !important;filter:brightness(1.07);
}
html[data-panel-ui] body .btn.tunnel-green .copy-state{font-size:.72rem;color:#eafff2}
html[data-panel-ui] body .btn.tunnel-green.copied{box-shadow:var(--ns-raised),0 0 22px rgba(34,197,94,.45)}


/* --- bootstrap semantic lockdown: vendor utilities join the palette ------- */
html[data-panel-ui] body{
  --bs-green:#4facfe;--bs-teal:#00f2fe;--bs-cyan:#00f2fe;
  --bs-success:#4facfe;--bs-success-rgb:79,172,254;
  --bs-info:#4facfe;--bs-info-rgb:79,172,254;
  --bs-warning:#ff9a44;--bs-warning-rgb:255,154,68;
  --bs-danger:#fc6076;--bs-danger-rgb:252,96,118;
  --bs-primary:#4facfe;--bs-primary-rgb:79,172,254;
}
html[data-panel-ui] body .bg-success{
  background-color:#4facfe !important;border-color:#4facfe !important;color:#fff !important;
}
html[data-panel-ui] body .btn-success,
html[data-panel-ui] body .btn-outline-success{
  --bs-btn-bg:#1d1f3e;--bs-btn-border-color:rgba(79,172,254,.4);
  --bs-btn-hover-bg:#23224a;--bs-btn-hover-border-color:rgba(79,172,254,.6);
  --bs-btn-active-bg:#23224a;--bs-btn-active-border-color:rgba(79,172,254,.6);
  --bs-btn-disabled-bg:#1d1f3e;--bs-btn-disabled-border-color:rgba(79,172,254,.25);
  --bs-btn-color:#bfe6ff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-disabled-color:#9fb8d9;
  background-color:#1d1f3e !important;border:1px solid rgba(79,172,254,.4) !important;color:#bfe6ff !important;
}
html[data-panel-ui] body .btn-success:hover,
html[data-panel-ui] body .btn-outline-success:hover{
  background-color:#23224a !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(79,172,254,.2) !important;
}
html[data-panel-ui] body :is(.btn-danger,.btn-outline-danger,.tunnel-delete,.server-remove,.wg-button-danger){
  background-color:#fc6076 !important;border-color:#fc6076 !important;color:#fff !important;
  --bs-btn-hover-bg:#ff7a8d;--bs-btn-hover-border-color:#ff7a8d;
  --bs-btn-active-bg:#c2455c;--bs-btn-active-border-color:#c2455c;
}
html[data-panel-ui] body .text-success{color:#4facfe!important}
html[data-panel-ui] body .border-success{border-color:#4facfe!important}
html[data-panel-ui] body .text-bg-success{background-color:rgba(79,172,254,.16)!important;border:1px solid rgba(79,172,254,.45);color:#bfe6ff!important}
html[data-panel-ui] body .btn-info{background-color:#1d1f3e;border:1px solid rgba(0,242,254,.4);color:#cfe6ff}
html[data-panel-ui] body .btn-info:hover{background-color:#23224a;box-shadow:var(--ns-raised),0 0 20px rgba(0,242,254,.2)}
html[data-panel-ui] body .text-info{color:#00f2fe!important}
html[data-panel-ui] body .btn-danger{background-color:#fc6076 !important;border-color:#fc6076 !important;color:#fff !important}
html[data-panel-ui] body .text-danger{color:#fc6076!important}
html[data-panel-ui] body .btn-warning{background-color:#1d1f3e;border:1px solid rgba(255,154,68,.4);color:#ffdcae}
html[data-panel-ui] body .btn-warning:hover{background-color:#23224a;box-shadow:var(--ns-raised),0 0 20px rgba(255,154,68,.2)}
html[data-panel-ui] body .text-warning{color:#ff9a44!important}
html[data-panel-ui] body .alert-success{background:#0e2e4f;border-color:rgba(79,172,254,.45);color:#bfe6ff}
html[data-panel-ui] body .alert-danger{background:#2a1520;border-color:rgba(252,96,118,.45);color:#ffd2da}
html[data-panel-ui] body .alert-warning{background:#2a1c10;border-color:rgba(255,154,68,.45);color:#ffdcae}
html[data-panel-ui] body .alert-info{background:#0e2e4f;border-color:rgba(0,242,254,.40);color:#cfe6ff}

/* end of main-theme.css — Dark Neumorphism build 20261018 */

/* ========================================================================== */
/* ⑦ FINANCE PAYMENTS PAGE - every <a> adopts the warm CTA pill (user ref)     */
/* scope: finance-hero pages AND the resellers workspace (main.bs-workspace)   */
/* reseller-row-actions: the whole actions cell shares the same warm pill so   */
/* its three buttons (anchor or button) never clash (user ref, 20261019)       */
html[data-panel-ui] body:is(:has(.crm-finance-hero),:has(main.bs-workspace)) :is(main a:not(.crm-sidebar a),main.bs-workspace .reseller-row-actions .btn){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:8px 20px;
  border:0 !important;border-radius:999px !important;
  background:var(--hot) !important;
  color:#fff !important;text-decoration:none !important;
  white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(252,96,118,.5),0 0 26px rgba(255,154,68,.25),inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
html[data-panel-ui] body:is(:has(.crm-finance-hero),:has(main.bs-workspace)) :is(main a:not(.crm-sidebar a),main.bs-workspace .reseller-row-actions .btn):hover{
  filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 18px 40px -10px rgba(252,96,118,.6),0 0 38px rgba(255,154,68,.35),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html[data-panel-ui] body:is(:has(.crm-finance-hero),:has(main.bs-workspace)) :is(main a:not(.crm-sidebar a),main.bs-workspace .reseller-row-actions .btn):active{
  transform:translateY(0) scale(.98);
  box-shadow:inset 4px 4px 10px rgba(180,40,60,.45),inset -2px -2px 8px rgba(255,255,255,.15) !important;
}
/* current subpage chips/tabs stay marked with a white ring on the hot pill    */
html[data-panel-ui] body:has(.crm-finance-hero) .finance-scope a.is-active,
html[data-panel-ui] body:has(.crm-finance-hero) .nav-pills a.nav-link.active{
  box-shadow:0 14px 34px -8px rgba(252,96,118,.65),0 0 30px rgba(79,172,254,.3),inset 0 0 0 2px rgba(255,255,255,.55) !important;
}
/* heavier selector beats the older soft-tile rule for the active chip itself  */
html[data-panel-ui] body:has(.crm-finance-hero) main .finance-scope a.is-active,
html[data-panel-ui] body:has(.crm-finance-hero) main .nav-pills a.nav-link.active{
  background:var(--hot) !important;
}
/* --- resellers workspace: summary stat cards join the soft-card family ------ */
html[data-panel-ui] body .reseller-summary-row .card{
  background:var(--n-card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--ns-out) !important;
}
html[data-panel-ui] body .reseller-summary-row .card:hover{
  border-color:var(--line-strong) !important;
  box-shadow:var(--ns-out),0 0 24px rgba(79,172,254,.10) !important;
}
/* outline-success action avoids the loud solid neon tile (row actions) ------- */
html[data-panel-ui] body .btn-outline-success{
  background:#1d1f3e !important;
  border:1px solid rgba(79,172,254,.4) !important;
  color:#bfe6ff !important;
}
html[data-panel-ui] body .btn-outline-success:hover{
  background:#23224a !important;
  box-shadow:var(--ns-raised),0 0 20px rgba(79,172,254,.20) !important;
}
/* current subpage chips/tabs stay marked with a white ring on the hot pill    */
html[data-panel-ui] body:has(.crm-finance-hero) .finance-scope a.is-active,
html[data-panel-ui] body:has(.crm-finance-hero) .nav-pills a.nav-link.active{
  box-shadow:0 14px 34px -8px rgba(252,96,118,.65),0 0 30px rgba(79,172,254,.3),inset 0 0 0 2px rgba(255,255,255,.55) !important;
}
/* heavier selector beats the older soft-tile rule for the active chip itself  */
html[data-panel-ui] body:has(.crm-finance-hero) main .finance-scope a.is-active,
html[data-panel-ui] body:has(.crm-finance-hero) main .nav-pills a.nav-link.active{
  background:var(--hot) !important;
}



/* --- reseller summary tiles: tone identity --------------------------------  */
/* green = active · red = needs-activation · blue = total                      */
html[data-panel-ui] body .reseller-summary-row .card.bg-primary{
  background:linear-gradient(140deg,rgba(79,172,254,.15),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #4facfe35 !important;
}
html[data-panel-ui] body .reseller-summary-row .card.bg-success{
  background:linear-gradient(140deg,rgba(52,211,153,.17),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #34d39940 !important;
}
html[data-panel-ui] body .reseller-summary-row .card.bg-danger{
  background:linear-gradient(140deg,rgba(251,113,133,.17),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #fb718540 !important;
}
html[data-panel-ui] body .reseller-summary-row .card.bg-primary .fs-4{color:#9ac9ff}
html[data-panel-ui] body .reseller-summary-row .card.bg-success .fs-4{color:#6ee7b7}
html[data-panel-ui] body .reseller-summary-row .card.bg-danger .fs-4{color:#fecdd3}

/* --- reseller table status badge pulses with its tone ----------------------  */
/* فعال = pastel green blinking · غیرفعال = pastel red blinking (keyframe family
   shared with the live user dots; global reduced-motion rule silences it).    */
html[data-panel-ui] body .reseller-status-badge.text-bg-success{
  background:rgba(52,211,153,.16) !important;
  color:#6ee7b7 !important;
  border:1px solid #34d39955 !important;
  box-shadow:0 0 8px #34d39960 !important;
  animation:user-dot-blink 1.2s ease-in-out infinite !important;
}
html[data-panel-ui] body .reseller-status-badge.text-bg-danger{
  background:rgba(251,113,133,.16) !important;
  color:#fecdd3 !important;
  border:1px solid #fb718555 !important;
  box-shadow:0 0 8px #fc607680 !important;
  animation:user-dot-blink 1.2s ease-in-out infinite !important;
}

/* activity pill count chip: white digit like the label */
html[data-panel-ui] body #adminActivityCount{
  color:#fff !important;
  font-weight:700;
  margin-inline-start:.15rem;
}

/* --- purchase-admin summary tiles: tone identity ---------------------------  */
/* yellow=pending review · green=approved · red=rejected · orange=awaiting pay  */
html[data-panel-ui] body .purchase-admin-stats article.border-warning{
  background:linear-gradient(140deg,rgba(251,191,36,.16),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #fbbf2438 !important;
}
html[data-panel-ui] body .purchase-admin-stats article.border-success{
  background:linear-gradient(140deg,rgba(52,211,153,.17),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #34d39940 !important;
}
html[data-panel-ui] body .purchase-admin-stats article.border-danger{
  background:linear-gradient(140deg,rgba(251,113,133,.17),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #fb718540 !important;
}
html[data-panel-ui] body .purchase-admin-stats article.border-info{
  background:linear-gradient(140deg,rgba(255,154,68,.17),rgba(21,34,54,.55) 52%,#152236) !important;
  border:1px solid #ff9a4438 !important;
}
html[data-panel-ui] body .purchase-admin-stats article.border-warning strong{color:#fde68a}
html[data-panel-ui] body .purchase-admin-stats article.border-success strong{color:#6ee7b7}
html[data-panel-ui] body .purchase-admin-stats article.border-danger strong{color:#fecdd3}
html[data-panel-ui] body .purchase-admin-stats article.border-info strong{color:#fdba74}

/* --- native dialogs: always dead-center ------------------------------------  */
/* Global margin resets beat the UA `margin:auto` centering and, with the RTL
   inline-start, pin every <dialog> to the right edge. Anchor it explicitly.    */
html[data-panel-ui] body dialog[open]{
  position:fixed !important;
  inset:0 !important;
  margin:auto !important;
}
html[data-panel-ui] body .tunnel-found{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-faint)}
html[data-panel-ui] body .tunnel-found h4{margin:0 0 10px;color:#cdd2f2;font-size:.78rem}
html[data-panel-ui] body .tunnel-found ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
html[data-panel-ui] body .tunnel-found li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--n-deboss);font-size:.75rem;color:#cdd2f2;overflow-wrap:anywhere}
html[data-panel-ui] body .tunnel-found li.is-linked{border-color:#34d39955 !important;box-shadow:0 0 16px rgba(52,211,153,.12) !important}
html[data-panel-ui] body .tunnel-found .tunnel-kind{color:#9beaff;font-weight:700}
html[data-panel-ui] body .tunnel-found .tunnel-name{color:#f2f3ff;font-weight:600}
html[data-panel-ui] body .tunnel-found .tunnel-remote{color:#9aa1cc}
html[data-panel-ui] body .tunnel-found .tunnel-linked-badge{padding:.18rem .5rem;border:1px solid #34d39955;border-radius:999px;background:rgba(52,211,153,.14);color:#6ee7b7;font-size:.66rem;font-weight:700}
html[data-panel-ui] body .tunnel-found .tunnel-off{padding:.18rem .5rem;border:1px solid #ff9a4455;border-radius:999px;background:rgba(255,154,68,.13);color:#fdba74;font-size:.66rem;font-weight:700}
html[data-panel-ui] body .tunnel-found .tunnel-empty{margin:0;color:#9aa1cc;font-size:.72rem}
/* --- tunnel editor dialog (native <dialog>) joins the theme family ---------  */
/* Same soft-card recipe everywhere: no off-palette blue band, no stray cards.  */
html[data-panel-ui] body .management-editor-dialog{
  background:var(--n-card) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 30px 90px rgba(5,6,20,.82) !important;
  color:#f2f3ff;
}
html[data-panel-ui] body .management-editor-dialog::backdrop{background:#050c18d9 !important;backdrop-filter:blur(7px)}
html[data-panel-ui] body .management-editor-header{
  background:var(--n-card) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 8px 22px -14px rgba(5,6,20,.8) !important;
}
html[data-panel-ui] body .management-editor-header h2{color:#f2f3ff !important}
html[data-panel-ui] body .management-editor-close{border:1px solid var(--line) !important;border-radius:999px !important;background:#1d1f3e !important;color:#fff !important}
html[data-panel-ui] body .management-editor-close:hover{background:#23224a !important;color:#fff !important}
/* the moved-in wrapper only carried a title duplicating the dialog headline */
html[data-panel-ui] body .management-editor-body section.tunnel-card>h2:first-child{display:none !important}
/* the in-dialog wrapper must not re-box (soft family paints .tunnel-card) */
html[data-panel-ui] body .management-editor-body>.tunnel-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* --- management editor trigger joins the hot pill family -------------------  */
/* Page-level triggers (tunnel create, purchase settings, reseller controls)
   match the other action buttons: warm gradient pill, not the outline family.  */
html[data-panel-ui] body main.tunnel-page .management-editor-trigger{
  background:var(--hot) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  color:#fff !important;
  box-shadow:0 10px 26px -8px rgba(252,96,118,.55) !important;
}
html[data-panel-ui] body main.tunnel-page .management-editor-trigger::before{
  background:transparent !important;
  box-shadow:none !important;
}
/* tunnel plan row actions: full-round pills like the rest of the panel */
html[data-panel-ui] body .tunnel-plan-actions :is(a,button){
  border-radius:999px !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
  background:var(--hot) !important;
  box-shadow:0 14px 34px -10px rgba(252,96,118,.5),0 0 26px rgba(255,154,68,.25),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-panel-ui] body .tunnel-plan-actions :is(a,button) i{
  color:#fff !important;
}
html[data-panel-ui] body .tunnel-plan-actions :is(a,button):hover{
  background:linear-gradient(135deg,#ffab60,#fc6f88) !important;
  border-color:rgba(252,96,118,.65) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 18px 40px -10px rgba(252,96,118,.6),0 0 40px rgba(255,154,68,.35),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* --------------------------------------------------------------------------
   tunnel page: the "+ افزودن مسیر جدید" trigger floated to the far end of the
   header row on desktop, detached from its title. Pair it with the title.
   -------------------------------------------------------------------------- */
html[data-panel-ui] body main.tunnel-page .ui-card-header-row:has(> .management-editor-trigger){
  justify-content:flex-start;
  row-gap:10px;
}
/* --------------------------------------------------------------------------
   scan → «ارتباط پایدار»: when the preflight proves no live tunnel between the
   two routers, offer the one-click stable WireGuard build.
   -------------------------------------------------------------------------- */
html[data-panel-ui] body .tunnel-stable{
  margin-top:14px;
  padding:16px 18px;
  border:1px solid rgba(252,96,118,.28);
  border-radius:var(--r-lg, 20px);
  background:linear-gradient(145deg,rgba(255,154,68,.07),rgba(252,96,118,.05));
}
html[data-panel-ui] body .tunnel-stable h3{
  margin:0 0 8px;
  font-size:.95rem;
  font-weight:700;
  color:#ffd9c2;
}
html[data-panel-ui] body .tunnel-stable p{
  margin:0 0 12px;
  font-size:.82rem;
  line-height:2;
  color:#c8cdf0;
}
html[data-panel-ui] body .tunnel-stable form{
  margin:0 0 10px;
}
html[data-panel-ui] body .tunnel-stable button{
  min-height:40px;
  border:0;
  border-radius:999px;
  font-weight:700;
}
html[data-panel-ui] body .tunnel-stable button i{
  color:#fff;
}
html[data-panel-ui] body .tunnel-stable small{
  display:block;
  font-size:.72rem;
  color:#8f95c2;
}
/* --------------------------------------------------------------------------
   general-settings: segmented tab pills — deep debossed track + neon active.
   Selectors match bootstrap-site's specificity shape and are loaded after it.
   -------------------------------------------------------------------------- */
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]){
  gap:6px !important;
  padding:6px !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:var(--n-deboss) !important;
  box-shadow:var(--ns-in-sm) !important;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.nav-link,[role=tab],a,button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px !important;
  margin:0 !important;
  padding:.4rem 1.05rem !important;
  border:1px solid transparent !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#a9b1dd !important;
  font-weight:600 !important;
  white-space:nowrap;
  transition:filter .18s, background .18s, color .18s, box-shadow .18s;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.nav-link,[role=tab],a,button) i{
  font-size:.85em !important;
  color:#7f88c2 !important;
  transition:color .18s;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.nav-link,[role=tab],a,button):hover{
  background:var(--n-card-soft) !important;
  border-color:var(--line) !important;
  color:#e9edff !important;
  box-shadow:var(--ns-raised) !important;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.nav-link,[role=tab],a,button):hover i{
  color:#00f2fe !important;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.active,[aria-selected=true]){
  background:linear-gradient(135deg,#00f2fe,#4facfe) !important;
  border-color:rgba(0,242,254,.5) !important;
  color:#062033 !important;
  box-shadow:0 10px 26px -8px rgba(79,172,254,.55),0 0 22px rgba(0,242,254,.28) !important;
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.active,[aria-selected=true]):hover{
  filter:brightness(1.06);
}
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.active,[aria-selected=true]) i{
  color:#062033 !important;
}
/* the legacy .color-tabs dot (::before) doubles as a stray glyph in front of
   each tab's FA icon — tabs carry their own icon now, retire the dot */
html[data-panel-ui] body :is(.crm-tabs,[role=tablist]) :is(.nav-link,[role=tab],a,button)::before{
  content:none !important;
}
@media (max-width:700px){
  /* multi-row grid track: soften the extreme pill ends at narrow widths */
  html[data-panel-ui] body .crm-tabs{border-radius:22px !important}
}
/* --------------------------------------------------------------------------
   wireguard header: the icon belongs to the title line (like the tab chips),
   kicker above, subtitle below — no tall side-tile spanning three lines.
   -------------------------------------------------------------------------- */
html[data-panel-ui] body .wireguard-page .wg-page-header .wg-header-body{display:block}
html[data-panel-ui] body .wireguard-page .wg-heading-row{
  display:flex;
  align-items:center;
  gap:10px;
}
html[data-panel-ui] body .wireguard-page .wg-heading-row h1{display:flex;align-items:center}
html[data-panel-ui] body .wireguard-page .wg-page-header .wg-header-icon{
  width:38px !important;
  height:34px !important;
  border-radius:12px !important;
  font-size:.95rem !important;
  flex:0 0 auto;
}
/* --------------------------------------------------------------------------
   login page: ghost eye-toggle (icon only), pastel-blue reseller link,
   live showcase slider.
   -------------------------------------------------------------------------- */
html[data-panel-ui] body.auth-page .auth-password-toggle.btn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#7f9bc4 !important;
  transition:color .16s, transform .16s;
}
html[data-panel-ui] body.auth-page .auth-password-toggle.btn:hover,
html[data-panel-ui] body.auth-page .auth-password-toggle.btn[aria-pressed="true"]{
  background:transparent !important;
  color:#9beaff !important;
  transform:translateY(-1px);
}
html[data-panel-ui] body.auth-page .auth-password-toggle.btn:focus-visible{
  background:transparent !important;
  color:#9beaff !important;
  outline:2px solid rgba(79,172,254,.4) !important;
  outline-offset:2px;
  border-radius:10px;
}
html[data-panel-ui] body.auth-page .auth-password-toggle svg{
  width:17px;height:17px;
}
html[data-panel-ui] body.auth-page .auth-switch a{
  color:#132350 !important;
  font-weight:700;
  background:#9db8f7 !important;
  border:0;
  border-radius:999px;
  padding:.32rem .85rem;
  text-decoration:none;
  box-shadow:0 8px 20px -8px rgba(157,184,247,.5) !important;
  transition:filter .16s, transform .16s;
}
html[data-panel-ui] body.auth-page .auth-switch a:hover{
  color:#0d1a33 !important;
  background:#b3c9ff !important;
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(157,184,247,.6) !important;
}
html[data-panel-ui] body.auth-page .auth-slider{
  position:relative;
  display:grid;
  min-height:172px;
  margin:14px 0 2px;
}
html[data-panel-ui] body.auth-page .auth-slide{
  grid-area:1/1;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;
}
html[data-panel-ui] body.auth-page .auth-slide.active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
html[data-panel-ui] body.auth-page .auth-slide-art{
  flex:0 0 44%;
  max-width:225px;
  display:grid;
  place-items:center;
  animation:auth-float 5.2s ease-in-out infinite;
}
html[data-panel-ui] body.auth-page .auth-slide-art img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 16px 30px rgba(3,10,30,.5));
}
@keyframes auth-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
html[data-panel-ui] body.auth-page .auth-slide-copy{
  min-width:0;
  flex:1 1 auto;
}
html[data-panel-ui] body.auth-page .auth-slide .auth-pill i{
  background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,.8);
}
html[data-panel-ui] body.auth-page .auth-slide h2{
  margin:.5rem 0 .4rem;
  color:#eef2ff;
}
html[data-panel-ui] body.auth-page .auth-slide p{
  margin:0;
  color:#8ea0c8;
  line-height:1.9;
}
html[data-panel-ui] body.auth-page .auth-slider-dots{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-top:14px;
}
html[data-panel-ui] body.auth-page .auth-dot,
html[data-panel-ui] body.auth-page .auth-dot:active{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(140,160,220,.35) !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:width .25s, background .25s;
}
html[data-panel-ui] body.auth-page .auth-dot.active,
html[data-panel-ui] body.auth-page .auth-dot.active:hover{
  width:22px !important;
  background:linear-gradient(135deg,#00f2fe,#4facfe) !important;
  box-shadow:0 0 10px rgba(0,242,254,.5) !important;
}
/* ------------------------------------------------------------------ */
/* login surfaces → panel palette (matching the neumorphic admin look) */
/* ------------------------------------------------------------------ */
html[data-panel-ui] body.auth-page{
  background:
    radial-gradient(circle at 12% 12%,#1c1f42 0,transparent 26%),
    radial-gradient(circle at 88% 84%,#141a44 0,transparent 23%),
    linear-gradient(160deg,#0b0d1b,#111328) !important;
}
html[data-panel-ui] body.auth-page .auth-shell{
  border-color:#2c2f5b !important;
  border-radius:22px !important;
  min-height:566px !important;
}
html[data-panel-ui] body.auth-page .auth-form-panel{
  background:linear-gradient(155deg,#181a3b 0%,#12142f 100%) !important;
}
html[data-panel-ui] body.auth-page .auth-showcase{
  background:linear-gradient(155deg,#212150 0%,#181b40 48%,#121431 100%) !important;
}
html[data-panel-ui] body.auth-page .auth-showcase-content{
  min-height:566px !important;
  padding:34px 40px 26px !important;
  justify-content:space-between !important;
}
html[data-panel-ui] body.auth-page .auth-slider{
  margin:auto 0 !important;
  min-height:190px !important;
}
html[data-panel-ui] body.auth-page .auth-slider-dots{
  margin-top:0 !important;
}
html[data-panel-ui] body.auth-page .auth-system-status{
  margin-top:20px !important;
  padding-top:16px !important;
}
html[data-panel-ui] body.auth-page .auth-slide-art{
  flex:0 0 40%;
  max-width:222px;
}
html[data-panel-ui] body.auth-page .auth-slide .auth-pill{
  margin-bottom:10px !important;
}
html[data-panel-ui] body.auth-page .auth-slide h2{
  font-size:clamp(20px,2vw,24px) !important;
  font-weight:800 !important;
  line-height:1.75 !important;
  letter-spacing:-.02em;
}
html[data-panel-ui] body.auth-page .auth-slide p{
  font-size:13.5px !important;
}
html[data-panel-ui] body.auth-page .auth-input-wrap .form-control{
  background:#10122a !important;
  border-color:#2c2f5b !important;
}
html[data-panel-ui] body.auth-page .auth-input-wrap .form-control:hover{
  background:#131532 !important;
  border-color:#3a3d7a !important;
}
html[data-panel-ui] body.auth-page .auth-remember .form-check-input{
  background-color:#10122a;
  border-color:#3a3d7a;
}
html[data-panel-ui] body.auth-page .auth-switch{
  border-top-color:#2c2f5b !important;
}
/* status dot: pulsing green */
html[data-panel-ui] body.auth-page .auth-system-status i{
  background:#4ade80 !important;
  box-shadow:0 0 0 4px rgba(74,222,128,.14),0 0 12px rgba(74,222,128,.65) !important;
  transition:opacity .28s ease;
}
html[data-panel-ui] body.auth-page .auth-system-status i.auth-dot-off{
  opacity:.22;
}
/* responsive: mid range (992–1120) — showcase is visible but narrower */
@media (max-width:1119.98px){
  html[data-panel-ui] body.auth-page .auth-showcase-content{
    padding:28px 30px 22px !important;
  }
  html[data-panel-ui] body.auth-page .auth-slide-art{
    flex:0 0 38%;
    max-width:186px;
  }
  html[data-panel-ui] body.auth-page .auth-slide h2{
    font-size:clamp(18px,1.9vw,22px) !important;
  }
  html[data-panel-ui] body.auth-page .auth-slider{
    min-height:170px !important;
  }
}
/* responsive: short viewports — keep the shell vertically compact */
@media (max-height:660px) and (min-width:992px){
  html[data-panel-ui] body.auth-page .auth-shell{
    min-height:auto !important;
  }
  html[data-panel-ui] body.auth-page .auth-showcase-content{
    min-height:auto !important;
    padding:22px 34px 18px !important;
  }
  html[data-panel-ui] body.auth-page .auth-slider{
    margin:14px 0 !important;
    min-height:140px !important;
  }
  html[data-panel-ui] body.auth-page .auth-form-panel{
    padding:30px 44px !important;
  }
}
/* responsive: very narrow — breathing room on the form */
@media (max-width:575.98px){
  html[data-panel-ui] body.auth-page .auth-form-panel{
    padding:34px 16px 28px !important;
  }
  html[data-panel-ui] body.auth-page .auth-input-wrap .form-control{
    height:44px !important;
    min-height:44px !important;
    font-size:14px !important;
  }
  html[data-panel-ui] body.auth-page .auth-submit.btn{
    height:46px !important;
    min-height:46px !important;
  }
  html[data-panel-ui] body.auth-page .auth-password-wrap .form-control{
    padding-left:46px !important;
  }
}
/* Center the creator credit on the content column beside the desktop rail. */
@media (min-width:1180px){
  html[data-panel-ui] body:has(.crm-sidebar) > .creator-footer{
    width:calc(100% - 270px);
    margin-inline-start:246px;
    margin-inline-end:24px;
    box-sizing:border-box;
  }
}
/* Shared Subscription identity: the SVG owns its tile and colors. */
html[data-panel-ui] body .subscription-logo{
  display:block;width:100%;height:100%;object-fit:contain;flex-shrink:0;
}
html[data-panel-ui] body :is(.crm-brand-mark,.auth-brand-mark,.brand-icon,.login-logo,.reseller-brand-icon,.purchase-brand > span){
  padding:0 !important;background:transparent !important;border:0 !important;
  box-shadow:none !important;overflow:visible;
}
html[data-panel-ui] body .login-logo .subscription-logo{width:64px;height:64px;margin:auto}
/* brand tile: clean neon mark */
html[data-panel-ui] body.auth-page .auth-brand-mark{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-panel-ui] body.auth-page .auth-brand-mark svg{
  width:25px;
  height:25px;
  color:#0a1530 !important;
}
/* --------------------------------------------------------------------------
   tunnel page: responsiveness polish — long hosts must never spill their row
   -------------------------------------------------------------------------- */
html[data-panel-ui] body main.tunnel-page .tunnel-saved > div{min-width:0}
html[data-panel-ui] body main.tunnel-page .tunnel-saved p bdi{overflow-wrap:anywhere}
html[data-panel-ui] body main.tunnel-page .tunnel-saved .tunnel-plan-actions{margin-inline-start:0}
@media (max-width:700px){
  html[data-panel-ui] body main.tunnel-page .tunnel-saved > div{flex:1 1 100%}
  html[data-panel-ui] body main.tunnel-page .tunnel-saved .tunnel-plan-actions{width:100%}
}
/* ==========================================================================
   ×-icons: white on every page
   Bootstrap's .btn-close ships a baked-in BLACK svg (and our global button
   reset fights it), so the glyph vanishes or stays dark on the theme. Draw
   it ourselves: pure white × in the familiar 34px pill, white on hover.
   ========================================================================== */
html[data-panel-ui] body .btn-close{
  position:absolute;
  background:none !important;
  background-image:none !important;
  color:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:1 !important;
  filter:none !important;
}
html[data-panel-ui] body .btn-close::before{
  content:"\00d7";
  font-weight:700;
  font-size:19px;
  line-height:1;
  color:#fff !important;
}
html[data-panel-ui] body .btn-close:hover{
  background-color:#ffffff14 !important;
  opacity:1;
}
/* RTL headers: title hugs the start (right), the × takes the far end (left) */
html[data-panel-ui] body .modal-header .btn-close{
  top:.75rem;
  right:auto !important;
  left:.75rem !important;
  margin:0 !important;
}
/* companion ×-controls across management dialogs, menus and drawers: white */
html[data-panel-ui] body :is(.offcanvas-close,.button-40.button-40-compact,.button-40-surface){
  color:#fff !important;
}
/* ==========================================================================
   reseller access modal: one button family
   The form buttons previously rendered as boxed 20px buttons while the
   links were hot pills. Unify: every control in the modal is the same warm
   pill (999px, white text), destructive ones keep the red-solid tint and
   all icons are explicit white FA marks.
   ========================================================================== */
html[data-panel-ui] body .reseller-controls :is(button,a.btn){
  border:0 !important;
  border-radius:999px !important;
  min-height:38px !important;
  background:var(--hot) !important;
  color:#fff !important;
  box-shadow:0 14px 34px -10px rgba(252,96,118,.5),0 0 26px rgba(255,154,68,.25),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
html[data-panel-ui] body .reseller-controls :is(button,a.btn) i{
  color:#fff !important;
}
html[data-panel-ui] body .reseller-controls :is(button,a.btn):hover{
  filter:brightness(1.07) !important;
  box-shadow:0 18px 40px -10px rgba(252,96,118,.6),0 0 38px rgba(255,154,68,.35),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* ==========================================================================
   tunnel editor: tidy protocol picker
   The legend + 4 chips used a free grid that scattered tiles at different
   columns. Stack them as uniform neon-tick pills in one wrapping row.
   ========================================================================== */
html[data-panel-ui] body .tunnel-protocols{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 16px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  background:var(--n-deboss) !important;
}
html[data-panel-ui] body .tunnel-protocols legend{
  float:inline-start;
  flex-basis:100%;
  padding:0 0 4px;
  color:#9aa1cc;
  font-size:.78rem;
  font-weight:600;
}
html[data-panel-ui] body .tunnel-protocols label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:.6rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--n-card-soft);
  font-size:.8rem;
  font-weight:600;
  color:#e6eaff;
  cursor:pointer;
  transition:filter .16s, border-color .16s;
}
html[data-panel-ui] body .tunnel-protocols label:has(input:checked){
  border-color:#00f2fe66;
  box-shadow:0 0 18px -6px rgba(0,242,254,.35);
}
html[data-panel-ui] body .tunnel-protocols label:hover{
  filter:brightness(1.12);
}
html[data-panel-ui] body .tunnel-protocols input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#00f2fe;
}

/* --------------------------------------------------------------------------
   router-api page: single settings layout (SSH-like), field sizing, reactions
   -------------------------------------------------------------------------- */
html[data-panel-ui] body.router-api-page .workspace-editor{
  /* match the header width: fluid inside main's padding (no 880px cap) */
  max-width:none;
}
html[data-panel-ui] body.router-api-page .tunnel-fields{
  grid-template-columns:minmax(260px,1.6fr) minmax(140px,.55fr);
  align-items:end;
}
html[data-panel-ui] body.router-api-page .tunnel-fields .form-label{
  transition:color .15s;
}
html[data-panel-ui] body.router-api-page .tunnel-fields input{
  transition:border-color .15s, box-shadow .15s, background .15s;
}
html[data-panel-ui] body.router-api-page .tunnel-fields input:hover{
  border-color:#5a5f8f !important;
}
html[data-panel-ui] body.router-api-page .tunnel-fields input:focus{
  outline:none !important;
  border-color:rgba(0,242,254,.55) !important;
  box-shadow:0 0 0 3px rgba(0,242,254,.14) !important;
}
html[data-panel-ui] body.router-api-page .tunnel-fields .form-label:focus-within{
  color:#9beaff;
}
html[data-panel-ui] body.router-api-page .rapi-span{
  grid-column:1/-1;
}
html[data-panel-ui] body.router-api-page .rapi-tls{
  grid-column:1/-1;
  display:flex !important;
  flex-direction:row !important;
  accent-color:#00f2fe;
  align-items:center;
  gap:9px;
  min-height:24px;
  margin:2px 0 4px;
  color:#cdd2f2;
  font-size:12.5px;
  cursor:pointer;
}
html[data-panel-ui] body.router-api-page .rapi-tls .form-check-input{
  width:17px;
  height:17px;
  margin:0;
  border-color:#454a70;
  background-color:#0d0f20;
  box-shadow:none;
  transition:background .15s, border-color .15s;
}
html[data-panel-ui] body.router-api-page .rapi-tls .form-check-input:checked{
  background-color:transparent;
  border-color:rgba(0,242,254,.6);
}
html[data-panel-ui] body.router-api-page .workspace-help{
  font-size:12.5px;
  line-height:2;
}
@media (max-width:679.98px){
  html[data-panel-ui] body.router-api-page .tunnel-fields{
    grid-template-columns:1fr !important;
  }
}

html[data-panel-ui] body.router-api-page .tunnel-fields input,
html[data-panel-ui] body.router-api-page .tunnel-fields select{
  width:100% !important;
  max-width:none !important;
}

html[data-panel-ui] body.router-api-page .tunnel-fields input.form-check-input{
  width:17px !important;
  max-width:17px !important;
  flex:0 0 17px;
}
html[data-panel-ui] body.router-api-page .rapi-tls{
  width:100%;
}

/* Support chat shares the site's surfaces and control palette. */
html[data-panel-ui] body.support-chat-page{color:var(--text)}
.support-chat-page .support-header{
  background:var(--n-card-soft);
  border-color:var(--line);
  box-shadow:var(--ns-out);
}
.support-chat-page .support-header h1 span{
  background:var(--icon);color:var(--page-bg-0);box-shadow:var(--ns-raised);
}
.support-chat-page .support-header .btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.support-chat-page .support-layout{gap:16px;padding:16px;box-sizing:border-box}
.support-chat-page :is(.support-threads,.support-person,.support-compose){border-color:var(--line)}
.support-chat-page :is(.support-threads h2,.support-person h2){color:var(--text)}
.support-chat-page :is(.support-threads input,.support-compose textarea){
  background:var(--n-deboss);color:var(--text);border-color:var(--line);box-shadow:var(--ns-in-sm);
}
.support-chat-page :is(.support-threads input,.support-compose textarea)::placeholder{color:var(--muted);opacity:1}
.support-chat-page :is(.support-muted,.support-thread small,.support-person small,.support-file-row){color:var(--muted)}
.support-chat-page .support-thread{color:var(--text-soft)}
.support-chat-page :is(.support-thread.selected,.support-thread:hover){background:var(--n-card-soft)}
.support-chat-page .support-avatar{background:var(--icon);color:var(--page-bg-0)}
.support-chat-page .support-message{background:var(--n-card-soft);color:var(--text)}
.support-chat-page .support-message.mine{background:var(--n-card);border-color:var(--line-strong)}
.support-chat-page .support-message small{color:var(--muted)}
.support-chat-page .support-attach{background:var(--n-card);color:var(--neon);box-shadow:var(--ns-raised)}
.support-chat-page .support-placeholder{color:var(--muted)}
@media(max-width:760px){.support-chat-page .support-layout{padding:12px}}