/* ===============================
   CryptoAlphaTradingAI – Global Styles
   =============================== */

/* Base (Dark by default) */
:root{
  --bg:#0b0e12;
  --panel:#121820;
  --panel-2:#151d27;
  --text:#eaf1fb;
  --muted:#98a6b5;
  --border:#1f2a38;
  --brand:#70ffa7;
  --brand-2:#6ac6ff;
  --accent:#7b7bff;
  --accent-2:#4aa3ff;
  --danger:#ff6a6a;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --fab-size:54px;
  --chat-width:330px;
  --chat-height:440px;
  --z-chat:99999;
}

/* Light theme overrides */
.theme-light{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-2:#f2f6fb;
  --text:#0d1b2a;
  --muted:#5a6b7c;
  --border:#d8e0ea;
  --brand:#0bbf74;
  --brand-2:#0b84ff;
  --accent:#5b6bff;
  --accent-2:#2a9bff;
  --danger:#e53935;
  --shadow:0 18px 50px rgba(0,0,0,.08);
}

/* Dark-mode explicit class (kept for compatibility) */
.theme-dark{}

/* Global */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, #0e131a 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.theme-light body{
  background:linear-gradient(180deg, var(--bg) 0%, #eef3f9 100%);
}

/* Utilities */
.container{ max-width:1180px; margin-inline:auto; padding-inline:22px; }
.muted{ color:var(--muted); }
.mt-16{ margin-top:16px; }
.fineprint{ font-size:.9rem; }
a{ color:var(--brand-2); text-decoration:none; }
a:hover{ opacity:.9; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel);
  color:var(--text); cursor:pointer; transition:.18s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:linear-gradient(135deg, var(--brand), #39d38e);
  border-color:transparent; color:#02150b; font-weight:700;
}
.btn-outline{ background:transparent; border-color:var(--border); }
.btn-ghost{ background:transparent; border-color:transparent; opacity:.9; }
.btn.small{ padding:6px 10px; font-size:12px; border-radius:10px; }

.btn-login{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent;
  color:#041018;
  font-weight:800;
  letter-spacing:.2px;
}
.btn-login.small{ padding:6px 10px; font-size:12px; border-radius:10px; }
.btn-login:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(74,163,255,.35); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:60; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(9,12,16,.6); border-bottom:1px solid rgba(255,255,255,.06);
}
.theme-light .site-header{ background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.logo-mark{
  width:32px; height:32px; display:inline-grid; place-items:center;
  border-radius:8px; background:linear-gradient(135deg, var(--brand-2), var(--brand));
  color:#031410; font-weight:900;
}
.logo-text{ font-weight:800; letter-spacing:.2px; }

.main-nav{ display:flex; gap:18px; }
.main-nav a{ color:var(--text); opacity:.85; padding:8px 6px; border-radius:8px; }
.main-nav a:hover{ background:rgba(255,255,255,.05); opacity:1; }
.theme-light .main-nav a:hover{ background:rgba(0,0,0,.04); }

/* Header actions */
.header-cta{ display:flex; align-items:center; gap:12px; }
.auth-group{ display:flex; gap:8px; align-items:center; }

/* Mobile toggle */
.mobile-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text);
}
.mobile-toggle svg{ width:20px; height:20px; }

/* Mobile panel */
.mobile-panel{
  position:fixed; top:68px; left:0; right:0; z-index:55;
  background:rgba(14,19,26,.98); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transform-origin:top center;
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.theme-light .mobile-panel{ background:rgba(255,255,255,.98); border-bottom:1px solid rgba(0,0,0,.06); }
.mobile-panel.open{ max-height:70vh; }
.mobile-panel .inner{ padding:12px 22px 18px; display:grid; gap:10px; }
.mobile-links a{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); border:1px solid transparent; }
.mobile-links a:hover{ background:rgba(255,255,255,.06); border-color:var(--border); }
.theme-light .mobile-links a:hover{ background:rgba(0,0,0,.04); }
.mobile-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Theme switch (visual) */
.theme-switch-input{ display:none; }
.theme-switch{
  width:42px; height:24px; border-radius:999px; border:1px solid var(--border); cursor:pointer;
  position:relative; background:var(--panel-2);
}
.theme-switch::after{
  content:""; position:absolute; width:18px; height:18px; border-radius:999px;
  top:2px; left:2px; background:var(--brand-2); transition:left .18s ease;
}
.theme-switch-input:checked + .theme-switch::after{ left:22px; }

/* Hero */
.hero{ padding:56px 0; }
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; }
.hero-copy h1{ font-size:2.2rem; line-height:1.15; margin:0 0 10px; }
.hero-copy .lead{ color:var(--muted); font-size:1.05rem; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero card */
.hero-card .card{
  background:radial-gradient(1200px 300px at 10% -10%, rgba(106,198,255,.16), transparent 60%),
             radial-gradient(900px 380px at 120% 10%, rgba(112,255,167,.12), transparent 55%),
             var(--panel);
  border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.badge{ background:rgba(112,255,167,.14); color:#caffde; border:1px solid rgba(112,255,167,.35); padding:4px 8px; border-radius:999px; font-size:12px; }
.dot{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.dot-live::before{ content:""; width:8px; height:8px; border-radius:999px; background:#2bff9c; display:inline-block; box-shadow:0 0 10px #2bff9c; }
.signal .pair{ font-weight:800; margin:6px 0 8px; }
.signal .row{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed rgba(255,255,255,.08); padding:6px 0; }
.theme-light .signal .row{ border-bottom-color:rgba(0,0,0,.08); }
.conf{ margin-top:10px; color:var(--muted); }
.foot{ margin-top:6px; font-size:.85rem; color:#90aecf; }

/* Live section */
.backtests{ padding:40px 0 8px; }
.metric-card{
  display:grid; gap:4px; border:1px solid var(--border); background:var(--panel);
  border-radius:14px; padding:12px; max-width:320px;
}
.metric-title{ color:var(--muted); font-size:.9rem; }
.metric-value{ font-size:1.6rem; font-weight:800; color:#9ad1ff; }
.metric-sub{ color:var(--muted); font-size:.9rem; }

/* Plans */
.plans-full{ padding:36px 0 20px; }
.plans-full h2{ margin:0 0 14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.plan{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.plan.featured{
  background:linear-gradient(135deg, rgba(106,198,255,.08), rgba(112,255,167,.08)), var(--panel-2);
  border-color:rgba(112,255,167,.35);
}
.plan h3{ margin:0; font-size:1.15rem; }
.plan .price{ font-size:1.1rem; font-weight:800; color:#9ad1ff; }
.plan .btn{ margin-top:auto; }

/* CTA */
.cta{ padding:32px 0 48px; }
.cta-inner{
  border:1px solid var(--border); border-radius:16px; padding:18px;
  background:linear-gradient(180deg, rgba(106,198,255,.08), rgba(0,0,0,0));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Steps / How */
.how{ padding:40px 0; }
.how h2{ margin-bottom:16px; }
.steps{ margin:0; padding-left:20px; display:grid; gap:8px; }

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06); padding:24px 0;
  background:rgba(9,12,16,.4);
}
.theme-light .site-footer{ border-top:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.5); }
.footer-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.f-links{ display:flex; gap:14px; flex-wrap:wrap; }
.f-brand .logo-mark{ margin-right:8px; }

/* Toasts (bottom-left notifications) */
.toasts{
  position:fixed; left:16px; bottom:16px; right:auto;
  display:flex; flex-direction:column; gap:8px; z-index:9999; pointer-events:none;
}
.toast{
  min-width:220px; max-width:320px; background:rgba(20,22,28,.96); color:#eaf1fb;
  border:1px solid rgba(255,255,255,.08); border-left:5px solid var(--brand);
  border-radius:10px; padding:6px 10px; box-shadow:0 10px 26px rgba(0,0,0,.25);
  font:12px/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 8px;
  pointer-events:auto; animation:toast-in .18s ease-out;
}
.toast.loss{ border-left-color:var(--danger); }
.toast .icon{ font-size:14px; line-height:1; }
.toast .title{ font-weight:700; font-size:12px; }
.toast .meta{ opacity:.85; grid-column:1 / -1; }
.toast .amount{ font-weight:700; }
.toast .close{ margin-left:6px; cursor:pointer; opacity:.6; transition:opacity .15s ease; }
.toast .close:hover{ opacity:1; }
@keyframes toast-in{ from{ transform:translateY(6px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes toast-out{ from{ transform:translateY(0); opacity:1; } to{ transform:translateY(6px); opacity:0; } }

/* Google Translate: keep functionality but hide UI */
.goog-logo-link, .goog-te-gadget img { display:none !important; }
.goog-te-gadget { font-size:0 !important; }
#google_translate_element {
  position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;
}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget-icon,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-xl07Ob-lTBxed,
.VIpgJd-ZVi9od-ORHb-OEVmcd{
  display:block !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
  height:0 !important; min-height:0 !important; max-height:0 !important;
  width:0 !important; max-width:0 !important;
  overflow:hidden !important; position:fixed !important; top:-9999px !important; left:-9999px !important; z-index:-1 !important;
}
.skiptranslate iframe,
iframe[id^="goog-te-banner-frame"],
iframe[id^="goog-gt-tt"]{
  visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
  height:0 !important; width:0 !important; position:fixed !important; top:-9999px !important; left:-9999px !important;
}
html body{ top:0 !important; position:relative !important; }

/* ====== Live Chat (bottom right) ====== */
.ca-chat-fab{
  position:fixed;
  bottom:18px;
  right:18px;
  width:var(--fab-size);
  height:var(--fab-size);
  border-radius:999px;
  background:linear-gradient(140deg, var(--brand), var(--accent-2));
  box-shadow:0 12px 25px rgba(0,0,0,.35);
  color:#020b12;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  cursor:pointer;
  z-index:var(--z-chat);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ca-chat-fab:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.35);
}

.ca-chat-box{
  position:fixed;
  bottom:calc(18px + var(--fab-size) + 8px);
  right:18px;
  width:var(--chat-width);
  max-width:90vw;
  height:var(--chat-height);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.03);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:none;
  flex-direction:column;
  z-index:var(--z-chat);
  overflow:hidden;
}
.ca-chat-box.open{ display:flex; }

.theme-light .ca-chat-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 20px 40px rgba(26,32,44,.16);
}

.ca-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(90deg, rgba(106,198,255,.3), rgba(112,255,167,.0));
  padding:10px 12px 9px;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.theme-light .ca-chat-head{
  border-bottom:1px solid rgba(0,0,0,.06);
  background:linear-gradient(90deg, rgba(11,65,116,.035), rgba(11,191,116,.02));
}
.ca-chat-head strong{ display:block; font-size:.9rem; }
.ca-chat-status{ font-size:.7rem; color:var(--muted); }

.ca-chat-close{
  background:transparent;
  border:none;
  color:inherit;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  opacity:.6;
}
.ca-chat-close:hover{ opacity:1; }

.ca-chat-body{
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ca-chat-body::-webkit-scrollbar{ width:5px; }
.ca-chat-body::-webkit-scrollbar-thumb{
  background:rgba(217,223,230,0.35);
  border-radius:999px;
}

.ca-chat-form{
  display:flex;
  gap:6px;
  padding:10px 10px 10px;
  border-top:1px solid rgba(255,255,255,.04);
  background:rgba(0,0,0,.04);
}
.theme-light .ca-chat-form{
  background:rgba(255,255,255,.75);
  border-top:1px solid rgba(0,0,0,.04);
}
.ca-chat-form input{
  flex:1;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,10,13,.4);
  border-radius:10px;
  padding:8px 10px;
  color:inherit;
  font-family:inherit;
  font-size:.8rem;
}
.theme-light .ca-chat-form input{
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
}
.ca-chat-form input:focus{
  outline:none;
  border-color:rgba(106,198,255,.75);
  box-shadow:0 0 0 3px rgba(106,198,255,.16);
}
.ca-chat-form button{
  border:none;
  background:linear-gradient(130deg, var(--brand), #46cc9f);
  border-radius:10px;
  padding:6px 12px;
  font-weight:600;
  cursor:pointer;
  color:#02150b;
}
.ca-chat-form button:hover{ opacity:.9; }

.ca-chat-msg{
  max-width:90%;
  font-size:.78rem;
  padding:7px 10px;
  border-radius:10px;
  line-height:1.4;
  word-break:break-word;
}
.ca-chat-user{
  margin-left:auto;
  background:linear-gradient(130deg, rgba(106,198,255,.6), rgba(112,255,167,.1));
  border:1px solid rgba(106,198,255,.12);
  color:#041018;
  text-align:right;
}
.theme-light .ca-chat-user{
  background:linear-gradient(130deg, rgba(11,132,255,.12), rgba(11,191,116,.03));
  color:#0d1b2a;
}
.ca-chat-bot{
  background:rgba(13,19,28,.6);
  border:1px solid rgba(255,255,255,.02);
}
.theme-light .ca-chat-bot{
  background:rgba(242,244,249,.95);
  border:1px solid rgba(0,0,0,.03);
}

/* Responsive */
@media (max-width:1100px){
  .hero-inner{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .main-nav{ display:none; }
  .mobile-toggle{ display:inline-flex; }
  .header-cta{ gap:8px; }
  .header-cta .btn.small{ padding:6px 8px; }
}
@media (max-width:640px){
  .grid-4{ grid-template-columns:1fr; }
  .header-inner{ gap:10px; }
  #langSelect{ max-width:150px; }
  .ca-chat-box{
    right:10px;
    bottom:calc(10px + var(--fab-size) + 6px);
    width:95vw;
    max-width:95vw;
  }
  .toasts{ left:10px; right:10px; }
}