/* === TrustEx UI: bright + dark, header, buttons, hero, drawer, modal === */
:root{
  --bg:#f7fafc; --text:#0f172a; --muted:#6b7280; --white:#fff;
  --brand1:#14c9a3; --brand2:#3b82f6; --brand3:#a855f7; --brand4:#22c55e; --brand5:#f59e0b;
  --glass: rgba(255,255,255,.75); --line:#e5e7eb; --shadow: 0 16px 50px rgba(20,201,163,.22);
  --radius: 18px;
}
html[data-theme="dark"]{
  --bg:#0b1020; --text:#e5e7eb; --muted:#a1a1aa; --white:#0f172a; --line:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.tx-body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg)}
:focus-visible{outline:2px solid var(--brand2); outline-offset:2px}

.tx-container{max-width:1140px;margin:0 auto;padding:0 16px}

/* Header */
.tx-header{position:sticky;top:0;background:linear-gradient(90deg,#ffffffd0,#ffffffea);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:1200}
html[data-theme="dark"] .tx-header{background:linear-gradient(90deg,#0b1020cc,#0b1020e0)}
.tx-header-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:10px}
.tx-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.tx-logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand1),var(--brand2));box-shadow:0 8px 20px rgba(59,130,246,.35)}
.tx-brand-text{font-weight:800;font-size:20px;color:var(--text)}
.tx-dot{color:#94a3b8}
.tx-nav{display:none;gap:22px}
.tx-nav a{color:#334155;text-decoration:none;font-weight:600}
html[data-theme="dark"] .tx-nav a{color:#cbd5e1}
.tx-nav a:hover{color:#075985}
@media(min-width:900px){.tx-nav{display:flex}}

.tx-nav-right{display:flex;align-items:center;gap:10px}

/* Lang dropdown */
.lang-switch{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:.5rem .7rem;border-radius:12px;border:1px solid var(--line);background:var(--white);font-weight:700}
html[data-theme="dark"] .lang-btn{background:#111827;color:#e5e7eb}
.lang-menu{position:absolute;right:0;top:110%;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:6px;display:none;min-width:140px}
.lang-menu a{display:flex;align-items:center;gap:8px;padding:.5rem;border-radius:10px;color:#1f2937;text-decoration:none;font-weight:700}
.lang-menu a:hover{background:#eef2ff}
.lang-switch.open .lang-menu{display:block}

/* Theme toggle (icon colors fixed for both themes) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--white);cursor:pointer;color:#0f172a}
.theme-toggle .icon-moon{display:none}
html[data-theme="dark"] .theme-toggle{color:#e5e7eb;background:#111827;border-color:#1f2937;box-shadow:inset 0 0 0 2px rgba(255,255,255,.04)}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-moon{display:block;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.theme-toggle svg{display:block;fill:currentColor;stroke:none}

/* Burger */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--white);color:var(--text)
}
html[data-theme="dark"] .nav-toggle{background:#111827;color:#e5e7eb;border-color:#1f2937}
@media(min-width:900px){.nav-toggle{display:none}}

/* Buttons (login + register unified) */
.tx-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.2rem;border-radius:14px;font-weight:700;text-decoration:none;transition:transform .12s ease,box-shadow .2s,filter .2s}
.tx-btn:active{transform:translateY(1px)}
.tx-btn .icon{width:18px;height:18px;margin-right:8px;flex:0 0 auto}
.tx-btn-primary{color:#fff;background:linear-gradient(135deg,var(--brand2),var(--brand3));box-shadow:0 15px 35px rgba(59,130,246,.35)}
.tx-btn-primary:hover{filter:saturate(1.08)}
.tx-btn-ghost{color:var(--text);background:transparent;border:1px solid var(--line)}
.tx-btn-white{background:#fff;color:#0f172a;border:1px solid(var(--line))}
.w-full{width:100%}

/* Hero */
.tx-hero{position:relative;color:#fff;background:
  radial-gradient(1200px 400px at 10% 10%, #14c9a320, transparent),
  radial-gradient(1200px 400px at 90% 90%, #3b82f620, transparent),
  linear-gradient(135deg, #0aa287, #3b82f6 45%, #8b5cf6)}
html[data-theme="dark"] .tx-hero{filter:saturate(1.05)}
.tx-hero-bg{position:absolute;inset:0;opacity:.25;background-image:radial-gradient(800px 300px at 30% 20%, #fff, transparent)}
.tx-hero-grid{position:relative;display:grid;grid-template-columns:1fr;gap:24px;padding:48px 0}
@media(min-width:996px){.tx-hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;padding:80px 0}}
.tx-hero-text .badge{display:inline-flex;gap:8px;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.15);backdrop-filter:blur(4px)}
.tx-hero h1{margin:.6rem 0 0;font-size:38px;line-height:1.15}
@media(min-width:720px){.tx-hero h1{font-size:54px}}
.tx-hero p{opacity:.9;max-width:640px}
.tx-hero .actions{display:flex;gap:10px;margin-top:16px}
.tx-hero .ticks{display:flex;gap:22px;opacity:.9;list-style:none;padding:0;margin:18px 0 0}
.tx-hero .ticks li{display:flex;gap:8px;align-items:center}

/* Exchange card */
.tx-exch{margin-top:-40px}
.tx-exch .card{background:var(--glass);backdrop-filter:blur(12px);border-radius:22px;box-shadow:var(--shadow);padding:18px;border:1px solid #ffffff80}
@media(min-width:720px){.tx-exch .card{padding:22px}}
.tx-exch h3{margin:4px 0 10px;font-size:22px}

.seg{display:flex;background:#eef2ff;border-radius:14px;padding:6px;gap:6px;margin-bottom:10px}
.seg button{flex:1;border:0;border-radius:10px;padding:.6rem .9rem;font-weight:700;color:#334155;background:transparent;cursor:pointer}
.seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--brand4),var(--brand2));color:#fff}

.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr;gap:16px}}
.form-grid .full{grid-column:1/-1}

.label{font-size:11px;letter-spacing:.04em;font-weight:800;color:#64748b;text-transform:uppercase;margin:2px 0}
.field{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px;outline:none}
.field:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.field.out{display:flex;align-items:center;justify-content:space-between}
.field .code{font-size:12px;color:#64748b}
.field.flex{display:flex;align-items:center;justify-content:space-between}
.field .strong{font-weight:800}
.field .link{color:#2563eb;text-decoration:none;font-weight:700}

.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pill{border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem;display:flex;gap:.5rem;align-items:center;cursor:pointer;background:#fff;transition:box-shadow .2s,border .2s}
.pill small{opacity:.6}
.pill[data-active="true"]{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.2)}

.hint{font-size:12px;color:#6b7280;margin-top:6px}

/* Features */
.tx-features{padding:56px 0}
.tx-features .center{text-align:center}
.tx-features h2{font-size:32px;margin:0}
.tx-features .muted{color:var(--muted)}
.tx-features .grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:900px){.tx-features .grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
html[data-theme="dark"] .tile{background:#0f172a;border-color:#1f2937;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.tile .tag{display:inline-block;background:linear-gradient(135deg,var(--brand5),var(--brand4));color:#fff;font-weight:800;border-radius:999px;padding:.25rem .55rem;font-size:12px}
.tile h3{margin:6px 0 4px}
.tile p{color:var(--muted);margin:0}

/* How */
.tx-how{padding:64px 0;background:#fff}
html[data-theme="dark"] .tx-how{background:#0b1020}
.tx-how .two{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:996px){.tx-how .two{grid-template-columns:1.1fr .9fr}}
.steps{list-style:none;padding:0;margin:16px 0 0}
.steps li{margin:10px 0}
.note{font-size:12px;color:var(--muted);margin-top:8px}
.panel{background:#0b1020;color:#fff;border-radius:20px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.panel .row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;margin:8px 0}
.panel .sub{font-size:12px;opacity:.8;margin-top:6px}

/* Reviews */
.tx-reviews{padding:60px 0;background:linear-gradient(180deg,#ffffff 0,#f4f7ff 100%)}
html[data-theme="dark"] .tx-reviews{background:linear-gradient(180deg,#0b1020 0,#0f172a 100%)}
.tx-reviews-head{text-align:center}
.tx-reviews h2{font-size:32px;margin:0 0 6px}
.tx-reviews .muted{color:var(--muted)}
.tx-reviews-grid{margin-top:20px;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.tx-reviews-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.rev{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
html[data-theme="dark"] .rev{background:#0f172a;border-color:#1f2937;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rev-top{display:flex;align-items:center;gap:10px}
.rev .avatar{width:36px;height:36px;border-radius:999px;background:linear-gradient(135deg,var(--brand1),var(--brand2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.rev .name{font-weight:800}
.rev .pair{font-size:12px;color:#64748b}
.rev .stars{margin-left:auto;color:#f59e0b;letter-spacing:2px;font-weight:800}
.rev blockquote{margin:10px 0 6px;color:#1f2937}
html[data-theme="dark"] .rev blockquote{color:#e5e7eb}
.rev .meta{font-size:12px;color:#6b7280}
.tx-reviews-cta{display:flex;gap:10px;justify-content:center;margin-top:16px}

/* FAQ */
.tx-faq{padding:64px 0;background:#fff}
html[data-theme="dark"] .tx-faq{background:#0b1020}
.tx-faq h2{font-size:32px;margin:0 0 10px}
.tx-faq details{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
html[data-theme="dark"] .tx-faq details{background:#111827;border-color:#1f2937}
.tx-faq summary{cursor:pointer;font-weight:800}
.tx-faq p{margin:8px 0 0;color:#475569}
html[data-theme="dark"] .tx-faq p{color:#cbd5e1}

/* Footer */
.tx-footer{border-top:1px solid var(--line);background:#fff}
html[data-theme="dark"] .tx-footer{background:#0b1020}
.tx-footer-grid{display:grid;grid-template-columns:1fr;gap:18px;padding:24px 0}
@media(min-width:900px){.tx-footer-grid{grid-template-columns:2fr 1fr 1fr}}
.tx-footer .muted{color:var(--muted);max-width:520px}
.tx-chips{display:flex;gap:8px;margin-top:8px}
.chip{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;padding:.35rem .6rem;border-radius:999px;text-decoration:none;font-weight:700}
.tx-copy{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;color:#64748b;font-size:13px}

/* Modal (поверх всего для кликабельности) */
.modal{position:fixed;inset:0;display:none;z-index:1600 !important}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal-card{position:relative;z-index:1;max-width:420px;margin:8vh auto;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.25);padding:18px}
@media(min-width:420px){.modal-card{max-width:480px}}
.modal-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:22px;cursor:pointer;color:#64748b}
.modal-form{display:grid;gap:10px;margin-top:8px}
.modal-form label{display:grid;gap:6px}
.modal-form input{padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:#111827}
.modal-form .modal-help{display:flex;justify-content:center;margin-top:6px}
.modal-form .modal-help a{text-decoration:none;color:#2563eb;font-weight:700}

/* A11y & utils */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Mobile drawer ===== */
@media(max-width:899px){
  .tx-nav{display:none !important}
  .tx-nav-right{display:none !important}

  .mobile-menu{
    position:fixed;inset:64px 0 0 0;display:none;z-index:1100;
    background:var(--white);border-top:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.12)
  }
  html[data-theme="dark"] .mobile-menu{background:#0b1020}
  html.mobile-open .mobile-menu{display:block}

  .mobile-menu-inner{padding:16px;display:grid;gap:14px}
  .mobile-nav{display:grid;gap:10px}
  .menu-btn{
    display:block;text-decoration:none;font-weight:800;padding:12px 14px;border-radius:14px;
    background:#fff;color:#0f172a;border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.05)
  }
  .menu-btn:active{transform:translateY(1px)}
  html[data-theme="dark"] .menu-btn{
    background:#111827;color:#e5e7eb;border-color:#1f2937;box-shadow:0 10px 24px rgba(0,0,0,.35)
  }

  .mobile-langs{display:flex;gap:8px;flex-wrap:wrap}
  .lang-pill{border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3;border-radius:999px;padding:.5rem .7rem;font-weight:800}
  html[data-theme="dark"] .lang-pill{background:#1f2937;border-color:#374151;color:#e5e7eb}

  .theme-row{
    display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:14px;
    background:#fff;border:1px solid var(--line);color:#0f172a
  }
  .theme-row .icon-moon{display:none}
  html[data-theme="dark"] .theme-row{background:#111827;border-color:#1f2937;color:#e5e7eb}
  html[data-theme="dark"] .theme-row .icon-sun{display:none}
  html[data-theme="dark"] .theme-row .icon-moon{display:block;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}

  /* backdrop под меню */
  .mobile-backdrop{
    position:fixed;inset:64px 0 0 0;z-index:1000;background:rgba(0,0,0,.45);display:none
  }
  @supports(backdrop-filter:blur(2px)){ .mobile-backdrop{ backdrop-filter:saturate(120%) blur(2px) } }
  html.mobile-open .mobile-backdrop{display:block}

  /* auth в мобильном меню */
  .mobile-auth{display:grid;gap:10px}
}

/* ===== Mobile profile icon & menu (отдельно от дроуэра) ===== */
@media (max-width: 899px){
  .profile-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-left:8px;
    border-radius:12px; border:1px solid var(--line);
    background:var(--white); color:var(--text); cursor:pointer;
  }
  html[data-theme="dark"] .profile-toggle{
    background:#111827; border-color:#1f2937; color:#e5e7eb;
  }
  .profile-toggle .avatar{
    width:24px; height:24px; border-radius:999px; font-size:12px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg,var(--brand1),var(--brand2));
  }

  .profile-menu-mobile{
    position:fixed; top:64px; left:16px; z-index:1500;
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    min-width:180px; padding:8px; display:block;
  }
  .profile-menu-mobile[hidden]{ display:none !important; }

  .profile-menu-mobile a,
  .profile-menu-mobile button{
    display:flex; align-items:center; gap:8px; width:100%;
    padding:.55rem .6rem; border-radius:10px;
    text-decoration:none; font-weight:700; color:#1f2937;
    background:transparent; border:0; cursor:pointer;
  }
  .profile-menu-mobile a:hover,
  .profile-menu-mobile button:hover{ background:#eef2ff; }

  html[data-theme="dark"] .profile-menu-mobile{
    background:#111827; border-color:#1f2937;
  }
  html[data-theme="dark"] .profile-menu-mobile a,
  html[data-theme="dark"] .profile-menu-mobile button{ color:#e5e7eb; }
  html[data-theme="dark"] .profile-menu-mobile a:hover,
  html[data-theme="dark"] .profile-menu-mobile button:hover{ background:#1f2937; }

  .profile-backdrop{
    position:fixed; inset:64px 0 0 0; z-index:1400;
    background:rgba(0,0,0,.45);
  }
  .profile-backdrop[hidden]{ display:none !important; }

  /* не дублируем профиль в дроуэре */
  #userBoxMobile{ display:none !important; }
}

/* Small polish */
html[data-theme="light"], html[data-theme="dark"]{transition:background-color .15s ease, color .15s ease}
/* Force desktop state (>=900px) */
@media (min-width: 900px){
  .nav-toggle{ display: none !important; }
  .mobile-menu{ display: none !important; }
  .mobile-backdrop{ display: none !important; }
  .tx-nav{ display: flex !important; }
  .tx-nav-right{ display: flex !important; }

  /* мобильные профильные элементы не нужны на десктопе */
  .profile-toggle,
  .profile-menu-mobile,
  .profile-backdrop{ display:none !important; }
}

/* === Unify "Регистрация" to look exactly like "Войти" === */
[data-open-login].tx-btn,
[data-open-register].tx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.2rem;border-radius:14px;font-weight:700;text-decoration:none;
  color:#fff; background:linear-gradient(135deg,var(--brand2),var(--brand3));
  border:0; box-shadow:0 15px 35px rgba(59,130,246,.35);
  transition:transform .12s ease, box-shadow .2s, filter .2s;
}
[data-open-login].tx-btn:hover,
[data-open-register].tx-btn:hover{ filter:saturate(1.08); }
[data-open-login].tx-btn:active,
[data-open-register].tx-btn:active{ transform:translateY(1px); }
[data-open-login].tx-btn:focus-visible,
[data-open-register].tx-btn:focus-visible{
  outline:2px solid rgba(59,130,246,.35); outline-offset:2px;
}

/* Icons inside both buttons */
[data-open-login].tx-btn .icon,
[data-open-register].tx-btn .icon{
  width:18px; height:18px; margin-right:8px; flex:0 0 auto;
  fill:currentColor; stroke:none;
}

/* Mobile: full width for both */
.mobile-auth [data-open-login].tx-btn,
.mobile-auth [data-open-register].tx-btn{ width:100%; justify-content:center; }

/* === White style for both auth buttons (Login & Register) === */
[data-open-login].tx-btn,
[data-open-register].tx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.2rem; border-radius:14px; font-weight:700; text-decoration:none;
  color:var(--text); background:#fff; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .2s, background .2s, color .2s;
}
[data-open-login].tx-btn:hover,
[data-open-register].tx-btn:hover{
  background:#f9fafb; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
[data-open-login].tx-btn:active,
[data-open-register].tx-btn:active{ transform:translateY(1px); }
[data-open-login].tx-btn:focus-visible,
[data-open-register].tx-btn:focus-visible{
  outline:2px solid var(--brand2); outline-offset:2px;
}
.mobile-auth [data-open-login].tx-btn,
.mobile-auth [data-open-register].tx-btn{ width:100%; justify-content:center; }

/* === Compact mobile drawer === */
@media (max-width: 899px){
  .mobile-menu-inner{ padding:12px; gap:10px; }
  .mobile-auth{ display:grid; gap:8px; }
  .mobile-auth .tx-btn{ padding:.7rem 1rem; font-size:15px; border-radius:12px; }
}

/* === White auth buttons in dark theme: text/icon forced black === */
html[data-theme="dark"] [data-open-login].tx-btn,
html[data-theme="dark"] [data-open-register].tx-btn{
  background:#fff; color:#0f172a;
}
html[data-theme="dark"] [data-open-login].tx-btn .icon,
html[data-theme="dark"] [data-open-register].tx-btn .icon{ fill:#0f172a; }

/* Profile box (desktop) */
.user-box{ position:relative; }
.user-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.45rem .6rem; border-radius:12px;
  border:1px solid var(--line); background:var(--white); color:var(--text);
  font-weight:700; cursor:pointer;
}
.user-btn .avatar{
  width:24px; height:24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-weight:800; font-size:12px;
}
.user-menu{
  position:absolute; right:0; top:110%;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  /* по умолчанию скрыто */
  display:none;
  gap:6px; padding:8px; min-width:160px;
}
/* показываем, когда кнопка в состоянии expanded */
.user-btn[aria-expanded="true"] + .user-menu{ display:grid; }
/* если стоит hidden — скрываем в любом случае (страховка против переопределений) */
.user-menu[hidden]{ display:none !important; }

.user-menu a, .user-menu button{
  display:flex; align-items:center; gap:8px; padding:.5rem .6rem;
  border-radius:10px; text-decoration:none; font-weight:700; color:#1f2937; background:transparent; border:0; cursor:pointer;
}
.user-menu a:hover, .user-menu button:hover{ background:#eef2ff; }

html[data-theme="dark"] .user-btn{ background:#111827; color:#e5e7eb; border-color:#1f2937; }
html[data-theme="dark"] .user-menu{ background:#111827; border-color:#1f2937; }
html[data-theme="dark"] .user-menu a, html[data-theme="dark"] .user-menu button{ color:#e5e7eb; }
html[data-theme="dark"] .user-menu a:hover, html[data-theme="dark"] .user-menu button:hover{ background:#1f2937; }

/* Profile box (mobile) */
@media (max-width:899px){
  .user-box-mobile{ display:grid; gap:10px; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--white); }
  html[data-theme="dark"] .user-box-mobile{ background:#111827; border-color:#1f2937; }
  .user-box-mobile .ub-top{ display:flex; align-items:center; gap:10px; }
  .user-box-mobile .avatar{
    width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-weight:800; font-size:13px;
  }
  .user-box-mobile .ub-menu{ display:grid; gap:6px; }
  .user-box-mobile .ub-menu a, .user-box-mobile .ub-menu button{
    display:block; text-align:left; padding:10px 12px; border-radius:10px;
    background:#fff; color:#0f172a; border:1px solid var(--line); font-weight:700;
  }
  html[data-theme="dark"] .user-box-mobile .ub-menu a,
  html[data-theme="dark"] .user-box-mobile .ub-menu button{
    background:#0f172a; color:#e5e7eb; border-color:#1f2937;
  }
}

/* Спрячем блок с кнопками, если залогинен (JS добавит класс .is-auth) */
.tx-nav-right.is-auth [data-open-login].tx-btn,
.tx-nav-right.is-auth [data-open-register].tx-btn { display:none !important; }

/* Профиль по умолчанию скрыт, показываем только когда JS снимет [hidden] */
.user-box,
.user-box-mobile{ display:none; }
.user-box:not([hidden]),
.user-box-mobile:not([hidden]){ display:block; }
/* скрываем мобильные кнопки входа/регистрации, когда пользователь авторизован */
html.is-auth .mobile-auth { display: none !important; }

/* показываем/прячем мобильную кнопку профиля */
#profileToggleMobile[hidden] { display: none !important; }

@media (max-width: 899px){
  /* кнопка профиля рядом с бургером */
  .profile-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-left:8px;
    border-radius:12px; border:1px solid var(--line);
    background:var(--white); color:var(--text); cursor:pointer;
  }
  html[data-theme="dark"] .profile-toggle{
    background:#111827; border-color:#1f2937; color:#e5e7eb;
  }
  .profile-toggle .avatar{
    width:24px; height:24px; border-radius:999px; font-size:12px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg,var(--brand1),var(--brand2));
  }

  /* выпадающее меню профиля */
  .profile-menu-mobile{
    position:fixed; top:64px; left:16px; z-index:1500;
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    min-width:180px; padding:8px;
  }
  .profile-menu-mobile[hidden]{ display:none !important; }

  .profile-menu-mobile a,
  .profile-menu-mobile button{
    display:flex; align-items:center; gap:8px; width:100%;
    padding:.55rem .6rem; border-radius:10px;
    text-decoration:none; font-weight:700; color:#1f2937;
    background:transparent; border:0; cursor:pointer;
  }
  .profile-menu-mobile a:hover,
  .profile-menu-mobile button:hover{ background:#eef2ff; }

  html[data-theme="dark"] .profile-menu-mobile{
    background:#111827; border-color:#1f2937;
  }
  html[data-theme="dark"] .profile-menu-mobile a,
  html[data-theme="dark"] .profile-menu-mobile button{ color:#e5e7eb; }
  html[data-theme="dark"] .profile-menu-mobile a:hover,
  html[data-theme="dark"] .profile-menu-mobile button:hover{ background:#1f2937; }

  /* бэкдроп для клика вне меню */
  .profile-backdrop{
    position:fixed; inset:64px 0 0 0; z-index:1400;
    background:rgba(0,0,0,.45);
  }
  .profile-backdrop[hidden]{ display:none !important; }

  /* не дублируем профильный блок внутри дроуэра */
  #userBoxMobile{ display:none !important; }
}
/* правый блок действий в шапке (только мобайл) */
.tx-actions{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
}
@media (min-width:900px){ .tx-actions{ display:none; } }

/* кнопка профиля рядом с бургером */
.profile-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--white); color:var(--text); cursor:pointer;
}
html[data-theme="dark"] .profile-toggle{
  background:#111827; border-color:#1f2937; color:#e5e7eb;
}
.profile-toggle .avatar{
  width:24px; height:24px; border-radius:999px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
}
#profileToggleMobile[hidden]{ display:none !important; }

/* выпадающее меню профиля — по умолчанию невидимо, позицию ставит JS */
.profile-menu-mobile{
  position:fixed; /* координаты ставим JS по rect кнопки */
  z-index:1500;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  min-width:180px; padding:8px;
}
.profile-menu-mobile[hidden]{ display:none !important; }
.profile-menu-mobile a,
.profile-menu-mobile button{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:.55rem .6rem; border-radius:10px;
  text-decoration:none; font-weight:700; color:#1f2937;
  background:transparent; border:0; cursor:pointer;
}
.profile-menu-mobile a:hover,
.profile-menu-mobile button:hover{ background:#eef2ff; }

html[data-theme="dark"] .profile-menu-mobile{
  background:#111827; border-color:#1f2937;
}
html[data-theme="dark"] .profile-menu-mobile a,
html[data-theme="dark"] .profile-menu-mobile button{ color:#e5e7eb; }
html[data-theme="dark"] .profile-menu-mobile a:hover,
html[data-theme="dark"] .profile-menu-mobile button:hover{ background:#1f2937; }

/* бэкдроп для клика вне меню */
.profile-backdrop{
  position:fixed; inset:64px 0 0 0; z-index:1400;
  background:rgba(0,0,0,.45);
}
.profile-backdrop[hidden]{ display:none !important; }

/* прячем мобильные auth-кнопки после входа */
html.is-auth .mobile-auth{ display:none !important; }

/* не дублировать старый профильный блок в дроуэре */
@media (max-width:899px){
  #userBoxMobile{ display:none !important; }
}
/* === Убираем отступ между шапкой и hero === */
.tx-hero,
#trustex-hero {
  margin-top: 0;
  padding-top: 0;
}

.tx-header {
  margin-bottom: 0;
}
/* === Виджет оператора сбоку (плашка прилегает к правому краю) === */
.op-widget{
  position: fixed;
  top: 40%;
  right: 0;
  transform: translateY(-50%) rotate(-90deg); /* Плашка боком */
  transform-origin: top right;
  z-index: 1100;
}

.op-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px 12px 0 0;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

[data-theme="dark"] .op-card{
  background: #1f1f1f;
  border-color: #444;
}

.op-ico{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}

.op-title{
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
}

.op-online .op-ico{ color: #0e7f2d; background: rgba(14,127,45,.1); }
.op-offline .op-ico{ color: #a11d1d; background: rgba(161,29,29,.1); }

@keyframes opPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .9; }
  100% { transform: scale(1); opacity: 1; }
}
.op-offline .op-ico{ animation: opPulse 1.8s ease-in-out infinite; }

@media (max-width: 980px){
  .op-widget{ display:none; }
}