/* ===============================
   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);
  }
  
  /* 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; }
  
  /* Links & Buttons */
  a{ color:var(--brand-2); text-decoration:none; }
  a:hover{ opacity:.9; }
  
  .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; }
  
  /* Distinct Log in button (same size as .small) */
  .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; }
  
  /* 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; }
  
  /* 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; }
  
  /* 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; } }