/* ===== index.html ===== */
:root{
      --bg:#0d1724;
      --panel:#111f2f;
      --panel2:#0f1b2a;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.48);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --good:#21c88a;
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:14px;
      --radius2:18px;

      --sidebarCollapsed:74px;
      --sidebarExpanded:290px;
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
                  radial-gradient(900px 520px at 90% 20%, rgba(33,200,138,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    .app{min-height:100vh;display:flex;}

    /* SIDEBAR */
    .sidebar{
      width:var(--sidebarExpanded); /* abierto por default */
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky;top:0;height:100vh;
      padding:14px 12px;
      display:flex;flex-direction:column;
      gap:10px;
      transition: width .18s ease;
      overflow:hidden;
          overflow-y:auto;
      overscroll-behavior:contain;
      scrollbar-gutter: stable;
    }
    body.sidebar-collapsed .sidebar{width:var(--sidebarCollapsed);}

    
    .sidebarOverlay{
      position:fixed;inset:0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
      z-index: 40;
      display:none;
    }

    /* Mobile: sidebar becomes off-canvas drawer */
    @media (max-width: 992px){
      .sidebar{
        position:fixed;left:0;top:0;bottom:0;
        z-index: 50;
        transform: translateX(-105%);
        width: min(86vw, 320px);
        max-width: 320px;
        transition: transform .18s ease, width .18s ease;
      }
      body.sidebar-open .sidebar{ transform: translateX(0); }
      body.sidebar-open .sidebarOverlay{ display:block; }
      /* In mobile mode, ignore collapsed width and always use drawer width */
      body.sidebar-collapsed .sidebar{ width: min(86vw, 320px); }
    }
.brandRow{
      display:flex;align-items:center;gap:10px;
      height:44px;padding:0 10px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      box-shadow: var(--shadow);
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{
      font-weight:800;letter-spacing:.6px;font-size:12px;opacity:.95;
      white-space:nowrap;
    }
    body.sidebar-collapsed .brandText{display:none;}

    .navGroup{margin-top:6px;}
    .navItem{
      display:flex;align-items:center;gap:12px;
      padding:12px 12px;
      border-radius:14px;
      color:var(--muted);
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
      transition:.14s ease;
    }
    .navItem:hover{
      background: rgba(255,255,255,.05);
      border-color: var(--border);
      color:var(--text);
    }
    .navItem.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .navItem .ico{
      width:26px;display:flex;justify-content:center;
      font-size:16px;
      flex:0 0 auto;
    }
    .navItem .lbl{
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    body.sidebar-collapsed .navItem .lbl{display:none;}

    .navItem .chev{
      margin-left:auto;
      color:rgba(234,240,255,.35);
      font-size:12px;
    }
    body.sidebar-collapsed .navItem .chev{display:none;}

    .divider{
      height:1px;background:rgba(255,255,255,.08);
      margin:8px 6px;
    }
    .spacer{flex:1;}

    .shareTitle{
      padding:10px 12px 6px 12px;
      color:var(--muted);
      font-weight:800;
      white-space:nowrap;
    }
    body.sidebar-collapsed .shareTitle{display:none;}

    .shareRow{
      display:flex;gap:10px;
      padding:8px 12px 0 12px;
    }
    .shareBtn{
      width:38px;height:38px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color:var(--muted);
      transition:.14s ease;
    }
    .shareBtn:hover{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.05);}
    body.sidebar-collapsed .shareRow{justify-content:center;padding-left:0;padding-right:0;}

    /* CONTENT */
    .content{flex:1;display:flex;flex-direction:column;}

    .topbar{
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
    }
    .leftTop{display:flex;align-items:center;gap:12px;}
    .hamb{
      width:44px;height:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text);
      cursor:pointer;
    }

    .topwidgets{
      display:flex;gap:10px;align-items:center;
      flex-wrap:wrap;justify-content:center;
    }
    .tw{
      min-width:190px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .dot{
      width:9px;height:9px;border-radius:99px;background:var(--blue);
      box-shadow:0 0 0 4px rgba(45,140,255,.16);
      flex:0 0 auto;
    }
    .tw .k{
      font-size:12px;color:var(--muted);line-height:1.1;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      max-width:128px;
    }
    .tw .v{font-weight:800;letter-spacing:.2px;line-height:1.1;font-size:14px;}
    .tw select{
      background: transparent;color: var(--text);
      border:0;outline:none;font-weight:800;
      padding-right:22px;cursor:pointer;
    }
    .tw option{color:#0b1220;}
    .rightTop{display:flex;align-items:center;gap:10px;}
    .pill{
      width:44px;height:44px;border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      background: linear-gradient(180deg,#ffcc00,#ffdd55);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      box-shadow:0 10px 20px rgba(0,0,0,.28);
    }

    .main{padding:18px;}
    .grid{
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:16px;
      align-items:start;
    }
    @media (max-width: 1200px){
      .grid{grid-template-columns: 1fr;}
      .sidebar{position:fixed;left:0;top:0;z-index:20;}
      body.sidebar-collapsed .sidebar{transform:translateX(-100%); width:var(--sidebarExpanded);}
      .sidebar{transform:translateX(0); transition:transform .18s ease;}
    }

    .cardx{
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
    }
    .cardx-body{padding:18px;}
    .title{font-size:40px;font-weight:900;letter-spacing:.3px;margin:2px 0 14px 0;}

    .statsbar{
      border:1px solid var(--border2);
      border-radius:14px;
      padding:12px;
      background: rgba(10,18,30,.35);
    }
    .stat{padding:8px 10px;border-right:1px solid rgba(255,255,255,.08);}
    .stat:last-child{border-right:0;}
    .stat .label{color:var(--muted);font-size:13px;margin-bottom:4px;}
    .stat .value{font-weight:900;letter-spacing:.2px;font-size:16px;}
    .stat .dash{font-weight:900;font-size:16px;color:var(--muted);}

    .section{
      margin-top:14px;
      border:1px solid var(--border2);
      border-radius:14px;
      overflow:hidden;
      background: rgba(10,18,30,.30);
    }
    .section-h{
      padding:14px 16px;
      display:flex;align-items:center;justify-content:space-between;
      font-weight:900;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .badge-round{
      width:22px;height:22px;border-radius:99px;
      display:inline-flex;align-items:center;justify-content:center;
      background: rgba(45,140,255,.14);
      border:1px solid rgba(45,140,255,.32);
      color:#cfe3ff;
      font-size:12px;font-weight:900;
    }
    .emptybox{
      margin:16px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding:24px 20px;
      color:var(--muted);
      font-weight:900;
      min-height:84px;
      display:flex;align-items:center;
    }
    .bigvoid{
      height:420px;
      border-top:1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.10));
    }

    .rightStack{
      display:flex;flex-direction:column;gap:16px;
      position:sticky;top:84px;
    }
    @media (max-width: 1200px){.rightStack{position:static;}}

    .gaugeWrap{padding:18px;}
    .gauge{
      width:260px;max-width:100%;
      margin:0 auto 10px auto;
      position:relative;
      aspect-ratio: 2 / 1;
    }
    .gauge svg{width:100%;height:100%;}
    .centerText{
      position:absolute;left:50%;top:62%;
      transform:translate(-50%,-50%);
      text-align:center;width:80%;
    }
    .centerText .t{font-weight:900;font-size:14px;margin-bottom:4px;}
    .centerText .v{font-weight:1000;font-size:28px;letter-spacing:.4px;}
    .depositText{text-align:center;font-weight:900;margin:12px 0 10px 0;}
    .btn-primaryx{
      background: var(--blue);
      border:1px solid rgba(45,140,255,.55);
      color:#fff;font-weight:900;border-radius:12px;
      padding:11px 14px;width:100%;
      box-shadow: 0 12px 24px rgba(45,140,255,.18);
    }
    .btn-primaryx:hover{background:var(--blue2);}

    .tabs{display:flex;gap:10px;padding:14px;padding-bottom:0;}
    .tabbtn{
      flex:1;border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      font-weight:1000;
      color:var(--muted);
      display:flex;align-items:center;justify-content:center;gap:8px;
      cursor:pointer;user-select:none;
    }
    .tabbtn.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .searchRow{
      padding:12px 14px 14px 14px;
      display:flex;gap:10px;
    }
    .searchRow .form-control{
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color: var(--text);
      border-radius:12px;
      padding:10px 12px;
    }
    .searchRow .form-control::placeholder{color:rgba(234,240,255,.42);}
    .btn-join{
      border-radius:12px;
      border:1px solid rgba(45,140,255,.45);
      background: rgba(45,140,255,.12);
      color:#cfe3ff;
      font-weight:900;
      padding:10px 14px;
      white-space:nowrap;
    }
    .filters{
      padding:0 14px 12px 14px;
      display:flex;gap:8px;flex-wrap:wrap;align-items:center;
    }
    .chip{
      font-size:12px;color:var(--muted);
      font-weight:900;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding:6px 10px;border-radius:999px;
      cursor:pointer;
    }
    .chip.active{
      color:#cfe3ff;
      border-color: rgba(45,140,255,.35);
      background: rgba(45,140,255,.14);
    }
    .tbl{padding:0 10px 14px 10px;}
    table{
      width:100%;
      border-collapse:separate;border-spacing:0;
      overflow:hidden;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
    }
    thead th{
      font-size:12px;color:var(--muted);
      font-weight:1000;
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      white-space:nowrap;
    }
    tbody td{
      padding:12px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      font-weight:900;
      color:var(--text);
      font-size:13px;
      vertical-align:middle;
    }
    tbody tr:last-child td{border-bottom:0;}
    .avatar{
      width:26px;height:26px;border-radius:8px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      display:inline-flex;align-items:center;justify-content:center;
      margin-right:10px;
      color:var(--muted);
    }
    .pct{color: var(--good);font-weight:1000;}


/* ===== depositos.html ===== */
:root{
      --bg:#0d1724;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.48);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --good:#63d4a4;
      --panel: rgba(255,255,255,.03);
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:14px;
      --radius2:18px;

      --sidebarW:74px;
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
                  radial-gradient(900px 520px at 90% 20%, rgba(33,200,138,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    .app{min-height:100vh;display:flex;}

    /* LEFT ICON SIDEBAR (como screenshot de depósito) */
    .sidebar{
      width:var(--sidebarW);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky; top:0; height:100vh;
      padding:14px 10px;
      display:flex; flex-direction:column;
      gap:12px;
      overflow:hidden;
    }
    .navicon{
      width:44px;height:44px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);
      border:1px solid transparent;
      transition:.15s ease;
      margin:0 auto;
    }
    .navicon:hover{background: rgba(255,255,255,.05); border-color: var(--border); color:var(--text);}
    .navicon.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .sidebar .spacer{flex:1;}

    /* CONTENT */
    .content{flex:1;display:flex;flex-direction:column;}

    /* TOPBAR */
    .topbar{
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
    }
    .leftTop{display:flex;align-items:center;gap:12px;}
    .hamb{
      width:44px;height:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text);
    }

    .brandRow{
      display:flex;align-items:center;gap:10px;
      padding:0 10px;
      height:44px;border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{font-weight:900;letter-spacing:.6px;font-size:12px;opacity:.95;white-space:nowrap;}

    .topwidgets{
      display:flex;gap:10px;align-items:center;
      flex-wrap:wrap;justify-content:center;
    }
    .tw{
      min-width:190px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .dot{width:9px;height:9px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px rgba(45,140,255,.16);}
    .tw .k{font-size:12px;color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px;}
    .tw .v{font-weight:900;letter-spacing:.2px;line-height:1.1;font-size:14px;}
    .tw select{background: transparent;color: var(--text);border:0;outline:none;font-weight:900;padding-right:22px;cursor:pointer;}
    .tw option{color:#0b1220;}

    .rightTop{display:flex;align-items:center;gap:10px;}
    .pill{
      width:44px;height:44px;border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      background: linear-gradient(180deg,#ffcc00,#ffdd55);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      box-shadow:0 10px 20px rgba(0,0,0,.28);
    }

    /* MAIN GRID */
    .main{padding:18px;}
    .grid{
      display:grid;
      grid-template-columns: 1fr 380px;
      gap:16px;
      align-items:start;
    }
    @media (max-width: 1200px){
      .grid{grid-template-columns: 1fr;}
    }

    /* CARDS */
    .cardx{
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
    }
    .cardx-body{padding:22px;}

    /* Deposit form area */
    .pageTitle{
      font-size:22px;
      font-weight:900;
      margin:10px 0 14px 0;
    }

    .methodRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin: 0 0 14px 0;
    }
    .methodBtn{
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:900;
      padding:10px 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      user-select:none;
      transition:.14s ease;
    }
    .methodBtn:hover{
      color:var(--text);
      border-color: var(--border);
      background: rgba(255,255,255,.05);
    }
    .methodBtn.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }

    .fieldLabel{
      font-weight:900;
      margin-bottom:6px;
      color:var(--text);
    }

    .inputx{
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color: var(--text);
      border-radius:12px;
      padding:12px 14px;
      height:48px;
    }
    .inputx::placeholder{color:rgba(234,240,255,.38);}
    .btnContinue{
      height:48px;
      border-radius:12px;
      font-weight:900;
      background: var(--blue);
      border:1px solid rgba(45,140,255,.55);
      box-shadow: 0 12px 24px rgba(45,140,255,.18);
    }
    .btnContinue:hover{background:var(--blue2);}

    .alertx{
      display:none;
      margin-top:14px;
      border-radius:12px;
      border:1px solid rgba(99,212,164,.35);
      background: rgba(99,212,164,.10);
      color:#d9fff0;
      padding:12px 14px;
      font-weight:800;
    }

    /* Right card "SUBIR DOCUMENTOS" */
    .docCard{padding:16px;}
    .docImg{
      width:100%;
      height:150px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1200&q=60');
      background-size:cover;
      background-position:center;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      margin-bottom:14px;
    }
    .docTitle{font-size:22px;font-weight:1000;margin-bottom:6px;}
    .docSub{color:var(--muted);font-weight:800;margin-bottom:12px;}
    .btnDoc{
      height:40px;
      border-radius:12px;
      font-weight:900;
      background: rgba(99,212,164,.18);
      border:1px solid rgba(99,212,164,.38);
      color:#d9fff0;
      padding:0 14px;
    }
    .btnDoc:hover{background: rgba(99,212,164,.26);}

    /* Sections hide/show */
    .methodPanel{display:none;}
    .methodPanel.active{display:block;}


/* ===== retiros.html ===== */
:root{
      --bg:#0d1724;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.48);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --good:#63d4a4;
      --panel: rgba(255,255,255,.03);
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:14px;
      --radius2:18px;
      --sidebarW:74px;
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
                  radial-gradient(900px 520px at 90% 20%, rgba(33,200,138,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    .app{min-height:100vh;display:flex;}

    /* LEFT ICON SIDEBAR */
    .sidebar{
      width:var(--sidebarW);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky; top:0; height:100vh;
      padding:14px 10px;
      display:flex; flex-direction:column;
      gap:12px;
      overflow:hidden;
    }
    .navicon{
      width:44px;height:44px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);
      border:1px solid transparent;
      transition:.15s ease;
      margin:0 auto;
    }
    .navicon:hover{background: rgba(255,255,255,.05); border-color: var(--border); color:var(--text);}
    .navicon.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .sidebar .spacer{flex:1;}

    /* CONTENT */
    .content{flex:1;display:flex;flex-direction:column;}

    /* TOPBAR */
    .topbar{
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
    }
    .leftTop{display:flex;align-items:center;gap:12px;}
    .hamb{
      width:44px;height:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text);
    }

    .brandRow{
      display:flex;align-items:center;gap:10px;
      padding:0 10px;
      height:44px;border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{font-weight:900;letter-spacing:.6px;font-size:12px;opacity:.95;white-space:nowrap;}

    .topwidgets{
      display:flex;gap:10px;align-items:center;
      flex-wrap:wrap;justify-content:center;
    }
    .tw{
      min-width:190px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .dot{width:9px;height:9px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px rgba(45,140,255,.16);}
    .tw .k{font-size:12px;color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px;}
    .tw .v{font-weight:900;letter-spacing:.2px;line-height:1.1;font-size:14px;}
    .tw select{background: transparent;color: var(--text);border:0;outline:none;font-weight:900;padding-right:22px;cursor:pointer;}
    .tw option{color:#0b1220;}

    .rightTop{display:flex;align-items:center;gap:10px;}
    .pill{
      width:44px;height:44px;border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      background: linear-gradient(180deg,#ffcc00,#ffdd55);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      box-shadow:0 10px 20px rgba(0,0,0,.28);
    }

    /* MAIN GRID */
    .main{padding:18px;}
    .grid{
      display:grid;
      grid-template-columns: 1fr 380px;
      gap:16px;
      align-items:start;
    }
    @media (max-width: 1200px){
      .grid{grid-template-columns: 1fr;}
    }

    /* CARDS */
    .cardx{
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
    }
    .cardx-body{padding:22px;}

    /* Method big selector (top) */
    .methodBig{
      border-radius:14px;
      border:1px solid rgba(45,140,255,.55);
      background: rgba(45,140,255,.08);
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:#cfe3ff;
      font-weight:900;
      text-decoration:none;
      user-select:none;
      margin-bottom:18px;
    }
    .methodBig .icon{
      width:26px;height:26px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(45,140,255,.18);
      border:1px solid rgba(45,140,255,.35);
    }

    .h1{
      font-size:22px;
      font-weight:1000;
      margin: 0 0 12px 0;
    }
    .fieldLabel{
      font-weight:900;
      margin-bottom:6px;
      color:var(--text);
    }
    .inputx{
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color: var(--text);
      border-radius:12px;
      padding:12px 14px;
      height:48px;
    }
    .inputx::placeholder{color:rgba(234,240,255,.38);}

    .hint{
      margin-top:8px;
      color:var(--muted2);
      font-weight:800;
      font-size:13px;
    }

    .rulesTitle{
      margin:18px 0 10px 0;
      font-size:22px;
      font-weight:1000;
    }
    .rules{
      color:var(--text);
      font-weight:700;
      line-height:1.5;
    }
    .rules li{margin-bottom:10px;color:rgba(234,240,255,.85);}

    .checkRow{
      margin-top:14px;
      display:flex;
      gap:12px;
      align-items:flex-start;
      color:rgba(234,240,255,.85);
      font-weight:800;
    }
    .checkRow input{
      width:18px;height:18px;margin-top:2px;
      accent-color: var(--blue);
    }

    .btnWithdraw{
      margin-top:16px;
      height:48px;
      width:520px;
      max-width:100%;
      border-radius:12px;
      font-weight:1000;
      background: rgba(45,140,255,.20);
      border:1px solid rgba(45,140,255,.28);
      color: rgba(234,240,255,.60);
    }
    .btnWithdraw.enabled{
      background: rgba(45,140,255,.92);
      border-color: rgba(45,140,255,.65);
      color:#fff;
      box-shadow: 0 12px 24px rgba(45,140,255,.18);
    }
    .btnWithdraw.enabled:hover{background: var(--blue2);}

    .histTitle{
      margin-top:18px;
      font-size:22px;
      font-weight:1000;
    }
    .histBox{
      margin-top:10px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding:22px;
      color:var(--muted);
      font-weight:900;
    }

    /* Right card "SUBIR DOCUMENTOS" */
    .docCard{padding:16px;}
    .docImg{
      width:100%;
      height:150px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1200&q=60');
      background-size:cover;
      background-position:center;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      margin-bottom:14px;
    }
    .docTitle{font-size:22px;font-weight:1000;margin-bottom:6px;}
    .docSub{color:var(--muted);font-weight:800;margin-bottom:12px;}
    .btnDoc{
      height:40px;
      border-radius:12px;
      font-weight:900;
      background: rgba(99,212,164,.18);
      border:1px solid rgba(99,212,164,.38);
      color:#d9fff0;
      padding:0 14px;
    }
    .btnDoc:hover{background: rgba(99,212,164,.26);}

    .toastx{
      display:none;
      margin-top:14px;
      border-radius:12px;
      border:1px solid rgba(99,212,164,.35);
      background: rgba(99,212,164,.10);
      color:#d9fff0;
      padding:12px 14px;
      font-weight:900;
    }


/* ===== historial.html ===== */
:root{
      --bg:#0d1724;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.48);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --good:#21c88a;
      --bad:#ff5a6a;
      --panel: rgba(255,255,255,.03);
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:14px;
      --radius2:18px;
      --sidebarW:74px;
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
                  radial-gradient(900px 520px at 90% 20%, rgba(33,200,138,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }
    .app{min-height:100vh;display:flex;}

    /* Sidebar */
    .sidebar{
      width:var(--sidebarW);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky; top:0; height:100vh;
      padding:14px 10px;
      display:flex; flex-direction:column;
      gap:12px;
      overflow:hidden;
    }
    .navicon{
      width:44px;height:44px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);
      border:1px solid transparent;
      transition:.15s ease;
      margin:0 auto;
    }
    .navicon:hover{background: rgba(255,255,255,.05); border-color: var(--border); color:var(--text);}
    .navicon.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .sidebar .spacer{flex:1;}

    /* Content */
    .content{flex:1;display:flex;flex-direction:column;}

    /* Topbar */
    .topbar{
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
    }
    .leftTop{display:flex;align-items:center;gap:12px;}
    .hamb{
      width:44px;height:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text);
    }
    .brandRow{
      display:flex;align-items:center;gap:10px;
      padding:0 10px;
      height:44px;border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{font-weight:900;letter-spacing:.6px;font-size:12px;opacity:.95;white-space:nowrap;}

    .topwidgets{
      display:flex;gap:10px;align-items:center;
      flex-wrap:wrap;justify-content:center;
    }
    .tw{
      min-width:190px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .dot{width:9px;height:9px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px rgba(45,140,255,.16);}
    .tw .k{font-size:12px;color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px;}
    .tw .v{font-weight:900;letter-spacing:.2px;line-height:1.1;font-size:14px;}
    .tw select{background: transparent;color: var(--text);border:0;outline:none;font-weight:900;padding-right:22px;cursor:pointer;}
    .tw option{color:#0b1220;}

    .rightTop{display:flex;align-items:center;gap:10px;}
    .pill{
      width:44px;height:44px;border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      background: linear-gradient(180deg,#ffcc00,#ffdd55);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      box-shadow:0 10px 20px rgba(0,0,0,.28);
    }

    /* Main grid */
    .main{padding:18px;}
    .grid{
      display:grid;
      grid-template-columns: 1fr 380px;
      gap:16px;
      align-items:start;
    }
    @media (max-width:1200px){ .grid{grid-template-columns:1fr;} }

    .cardx{
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
    }
    .cardx-body{padding:22px;}

    .title{
      font-size:30px;
      font-weight:1000;
      margin: 0 0 14px 0;
    }

    /* Tabs */
    .tabsRow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
    .tabbtn{
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:1000;
      padding:10px 12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      user-select:none;
      transition:.14s ease;
    }
    .tabbtn:hover{color:var(--text);border-color:var(--border);background: rgba(255,255,255,.05);}
    .tabbtn.active{background: rgba(45,140,255,.14);border-color: rgba(45,140,255,.35);color:#cfe3ff;}

    /* Filters */
    .filters{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:end;
      margin-bottom:14px;
    }
    .fieldLabel{
      font-weight:900;
      margin-bottom:6px;
      color:var(--text);
      font-size:13px;
    }
    .inputx{
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.10);
      color: var(--text);
      border-radius:12px;
      padding:10px 12px;
      height:44px;
      min-width: 210px;
    }
    .inputx::placeholder{color:rgba(234,240,255,.38);}
    .inputx.small{min-width:160px;}
    .btnx{
      height:44px;
      border-radius:12px;
      font-weight:1000;
      background: rgba(45,140,255,.92);
      border:1px solid rgba(45,140,255,.65);
      color:#fff;
      padding:0 14px;
      box-shadow: 0 12px 24px rgba(45,140,255,.18);
    }
    .btnx:hover{background:var(--blue2);}

    /* Table */
    .tableWrap{
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      overflow:hidden;
    }
    table{width:100%; border-collapse:separate; border-spacing:0;}
    thead th{
      font-size:12px;
      color:var(--muted);
      font-weight:1000;
      padding:10px 10px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      white-space:nowrap;
    }
    tbody td{
      padding:12px 10px;
      border-bottom:1px solid rgba(255,255,255,.06);
      font-weight:900;
      color:rgba(234,240,255,.90);
      font-size:13px;
      vertical-align:middle;
      white-space:nowrap;
    }
    tbody tr:hover td{background: rgba(255,255,255,.02);}
    tbody tr:last-child td{border-bottom:0;}

    .badgeSide{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px;
      border-radius:999px;
      font-weight:1000;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-size:12px;
    }
    .badgeSide.buy{
      border-color: rgba(33,200,138,.28);
      background: rgba(33,200,138,.10);
      color:#cffff0;
    }
    .badgeSide.sell{
      border-color: rgba(255,90,106,.28);
      background: rgba(255,90,106,.10);
      color:#ffe0e4;
    }
    .profit.good{color: var(--good); font-weight:1000;}
    .profit.bad{color: var(--bad); font-weight:1000;}
    .status{
      display:inline-flex;align-items:center;gap:8px;
      font-weight:1000;
      color:var(--muted);
    }
    .dotS{
      width:8px;height:8px;border-radius:99px;
      background: rgba(255,255,255,.25);
      box-shadow:0 0 0 4px rgba(255,255,255,.08);
    }
    .dotS.open{background: var(--blue); box-shadow:0 0 0 4px rgba(45,140,255,.14);}
    .dotS.closed{background: rgba(255,255,255,.55); box-shadow:0 0 0 4px rgba(255,255,255,.10);}

    /* Pagination */
    .pager{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:12px;
      color:var(--muted2);
      font-weight:900;
      font-size:12px;
    }
    .pager .pbtn{
      border-radius:10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:1000;
      padding:8px 10px;
      cursor:pointer;
      user-select:none;
    }
    .pager .pbtn:hover{color:var(--text);border-color:var(--border);background: rgba(255,255,255,.05);}

    /* Right card "SUBIR DOCUMENTOS" */
    .docCard{padding:16px;}
    .docImg{
      width:100%;
      height:150px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1200&q=60');
      background-size:cover;
      background-position:center;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      margin-bottom:14px;
    }
    .docTitle{font-size:22px;font-weight:1000;margin-bottom:6px;}
    .docSub{color:var(--muted);font-weight:800;margin-bottom:12px;}
    .btnDoc{
      height:40px;
      border-radius:12px;
      font-weight:900;
      background: rgba(99,212,164,.18);
      border:1px solid rgba(99,212,164,.38);
      color:#d9fff0;
      padding:0 14px;
    }
    .btnDoc:hover{background: rgba(99,212,164,.26);}

    .emptyBox{
      padding:22px;
      color:var(--muted);
      font-weight:900;
      text-align:center;
    }


/* ===== configuracion.html ===== */
:root{
      --bg:#0d1724;
      --panel:#13243a;
      --panel-soft:#17283f;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.08);
      --text:#eef4ff;
      --muted:rgba(238,244,255,.62);
      --muted2:rgba(238,244,255,.45);
      --blue:#3b8ef3;
      --blue2:#2f7de0;
      --good:#72dfad;
      --sidebarW:62px;
      --shadow:0 10px 26px rgba(0,0,0,.28);
      --radius:14px;
      --radius2:18px;
    }

    html,body{height:100%;}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1000px 500px at 20% 0%, rgba(59,142,243,.10), transparent 55%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    .app{
      min-height:100vh;
      display:flex;
    }

    /* Sidebar */
    .sidebar{
      width:var(--sidebarW);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky;
      top:0;
      height:100vh;
      padding:10px 6px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .navicon{
      width:42px;
      height:42px;
      border-radius:12px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      border:1px solid transparent;
      transition:.15s ease;
      cursor:pointer;
    }
    .navicon:hover{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border-color:var(--border);
    }
    .navicon.active{
      color:#dbe9ff;
      background:rgba(59,142,243,.14);
      border-color:rgba(59,142,243,.28);
    }
    .sidebar .spacer{flex:1;}

    /* Content */
    .content{
      flex:1;
      display:flex;
      flex-direction:column;
    }

    /* Topbar */
    .topbar{
      height:66px;
      border-bottom:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 18px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      position:sticky;
      top:0;
      z-index:5;
      backdrop-filter: blur(10px);
    }
    .leftTop{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .hamb{
      width:42px;height:42px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      color:var(--text);
    }
    .brand{
      display:flex;align-items:center;gap:10px;
      color:var(--text);
      font-weight:900;
      letter-spacing:.6px;
      font-size:12px;
      opacity:.9;
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #95f26b;
      filter:drop-shadow(0 4px 8px rgba(149,242,107,.20));
    }

    .topwidgets{
      display:flex;
      gap:0;
      align-items:center;
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      background:rgba(255,255,255,.025);
    }
    .tw{
      min-width:150px;
      padding:8px 14px;
      border-right:1px solid var(--border);
      display:flex;
      gap:8px;
      align-items:flex-start;
    }
    .tw:last-child{border-right:0;}
    .dot{
      width:8px;height:8px;border-radius:99px;background:var(--blue);margin-top:7px;
      flex:0 0 auto;
    }
    .tw .k{
      color:var(--muted);
      font-size:11px;
      line-height:1.1;
      font-weight:700;
    }
    .tw .v{
      font-size:16px;
      line-height:1.05;
      font-weight:1000;
      color:#fff;
    }
    .tw select{
      background:transparent;
      color:#fff;
      border:0;
      outline:none;
      font-weight:900;
      width:100%;
    }
    .tw option{color:#111;}
    .rightTop{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .pill{
      width:42px;height:42px;border-radius:14px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      background:linear-gradient(180deg,#ffd43b,#f7c928);
    }

    /* Main */
    .main{
      padding:18px;
    }
    .grid{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:18px;
      align-items:start;
    }
    @media (max-width:1200px){
      .grid{grid-template-columns:1fr;}
    }

    .cardx{
      border:1px solid var(--border);
      border-radius:var(--radius2);
      background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
      box-shadow:var(--shadow);
    }
    .cardx-body{padding:22px;}

    /* Tabs */
    .settingsTabs{
      display:flex;
      gap:0;
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      width:max-content;
      max-width:100%;
      margin-bottom:26px;
      background:rgba(255,255,255,.02);
    }
    .stab{
      min-width:160px;
      padding:14px 14px 12px;
      border-right:1px solid var(--border);
      text-align:center;
      cursor:pointer;
      color:var(--muted);
      font-weight:900;
      transition:.15s ease;
      user-select:none;
    }
    .stab:last-child{border-right:0;}
    .stab i{
      display:block;
      font-size:20px;
      margin-bottom:8px;
    }
    .stab.active{
      background:var(--blue);
      color:#fff;
    }

    .sectionTitle{
      font-size:38px;
      line-height:1.05;
      font-weight:1000;
      margin:0 0 26px 0;
      letter-spacing:-.5px;
    }

    /* Form */
    .view{display:none;}
    .view.active{display:block;}

    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
      max-width:660px;
    }
    .form-grid.one{
      grid-template-columns:minmax(0,660px);
    }
    .form-grid .full{
      grid-column:1 / -1;
    }
    @media (max-width:768px){
      .form-grid{grid-template-columns:1fr;}
    }

    .field label{
      display:block;
      margin-bottom:6px;
      font-size:14px;
      font-weight:900;
      color:#fff;
    }
    .inputx, .selectx{
      width:100%;
      height:54px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.02);
      color:#f4f7ff;
      padding:0 14px;
      outline:none;
      font-size:16px;
      box-shadow:none;
    }
    .inputx::placeholder{color:rgba(255,255,255,.34);}
    .input-wrap{
      position:relative;
    }
    .input-wrap .eye{
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      color:var(--muted2);
      cursor:pointer;
      font-size:20px;
    }

    .btnPrimary{
      margin-top:24px;
      width:460px;
      max-width:100%;
      height:48px;
      border-radius:10px;
      border:1px solid rgba(59,142,243,.55);
      background:var(--blue);
      color:#fff;
      font-weight:1000;
      font-size:16px;
      box-shadow:0 12px 22px rgba(59,142,243,.16);
    }
    .btnPrimary:hover{background:var(--blue2);}

    /* Notification table */
    .notif-wrap{
      max-width:670px;
    }
    .lang-select{
      width:325px;
      max-width:100%;
      margin-bottom:12px;
    }
    .notif-head, .notif-row{
      display:grid;
      grid-template-columns: 1.4fr .8fr .8fr .8fr;
      align-items:center;
      gap:12px;
    }
    .notif-head{
      color:#fff;
      font-weight:1000;
      margin:8px 0 6px;
      padding:0 10px;
    }
    .notif-row{
      min-height:54px;
      border:1px solid var(--border2);
      border-radius:6px;
      margin-bottom:10px;
      padding:0 10px;
      background:rgba(255,255,255,.015);
    }
    .notif-row .name{
      font-weight:900;
      font-size:16px;
      line-height:1.1;
    }
    .checkCell{
      display:flex;
      justify-content:center;
    }
    .checkCell input{
      width:20px;
      height:20px;
      accent-color: var(--blue);
      cursor:pointer;
    }

    /* Right card */
    .docCard{padding:16px;}
    .docImg{
      width:100%;
      height:145px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18)),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1200&q=60');
      background-size:cover;
      background-position:center;
      margin-bottom:14px;
      box-shadow:0 14px 28px rgba(0,0,0,.24);
    }
    .docTitle{
      font-size:20px;
      font-weight:1000;
      margin-bottom:8px;
    }
    .docSub{
      color:#fff;
      font-weight:800;
      line-height:1.3;
      margin-bottom:14px;
      font-size:14px;
    }
    .btnDoc{
      height:40px;
      padding:0 16px;
      border-radius:10px;
      border:1px solid rgba(114,223,173,.40);
      background:rgba(114,223,173,.18);
      color:#dfffee;
      font-weight:1000;
    }

    .saveMsg{
      display:none;
      margin-top:14px;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(114,223,173,.35);
      background:rgba(114,223,173,.12);
      color:#dfffee;
      font-weight:900;
      max-width:660px;
    }


/* ===== soporte.html ===== */
:root{
      --bg:#0d1724;
      --border:rgba(255,255,255,.10);
      --border2:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.48);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --good:#63d4a4;
      --shadow:0 10px 26px rgba(0,0,0,.35);
      --radius:14px;
      --radius2:18px;
      --sidebarW:74px;
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
                  radial-gradient(900px 520px at 90% 20%, rgba(33,200,138,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }

    .app{min-height:100vh;display:flex;}

    /* Sidebar */
    .sidebar{
      width:var(--sidebarW);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-right:1px solid var(--border);
      position:sticky; top:0; height:100vh;
      padding:14px 10px;
      display:flex; flex-direction:column;
      gap:12px;
      overflow:hidden;
    }
    .navicon{
      width:44px;height:44px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      color:var(--muted);
      border:1px solid transparent;
      transition:.15s ease;
      margin:0 auto;
      cursor:pointer;
    }
    .navicon:hover{background: rgba(255,255,255,.05); border-color: var(--border); color:var(--text);}
    .navicon.active{
      background: rgba(45,140,255,.14);
      border-color: rgba(45,140,255,.35);
      color:#cfe3ff;
    }
    .sidebar .spacer{flex:1;}

    /* Content */
    .content{flex:1;display:flex;flex-direction:column;}

    /* Topbar */
    .topbar{
      height:66px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 18px;
      border-bottom:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter: blur(10px);
    }
    .leftTop{display:flex;align-items:center;gap:12px;}
    .hamb{
      width:44px;height:44px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      color:var(--text);
    }

    .brandRow{
      display:flex;align-items:center;gap:10px;
      padding:0 10px;
      height:44px;border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{font-weight:900;letter-spacing:.6px;font-size:12px;opacity:.95;white-space:nowrap;}

    .topwidgets{
      display:flex;gap:10px;align-items:center;
      flex-wrap:wrap;justify-content:center;
    }
    .tw{
      min-width:190px;
      border-radius:12px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      padding:10px 12px;
      display:flex;align-items:center;gap:10px;
    }
    .dot{width:9px;height:9px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px rgba(45,140,255,.16);}
    .tw .k{font-size:12px;color:var(--muted);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px;}
    .tw .v{font-weight:900;letter-spacing:.2px;line-height:1.1;font-size:14px;}
    .tw select{background: transparent;color: var(--text);border:0;outline:none;font-weight:900;padding-right:22px;cursor:pointer;}
    .tw option{color:#0b1220;}

    .rightTop{display:flex;align-items:center;gap:10px;}
    .pill{
      width:44px;height:44px;border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      color:var(--text);
    }
    .flag{
      width:26px;height:26px;border-radius:99px;
      background: linear-gradient(180deg,#ffcc00,#ffdd55);
      display:flex;align-items:center;justify-content:center;
      font-size:14px;
      box-shadow:0 10px 20px rgba(0,0,0,.28);
    }

    /* Main */
    .main{padding:18px;}
    .grid{
      display:grid;
      grid-template-columns: 1fr 380px;
      gap:16px;
      align-items:start;
    }
    @media (max-width: 1200px){
      .grid{grid-template-columns: 1fr;}
    }

    .cardx{
      border-radius: var(--radius2);
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
    }
    .cardx-body{padding:22px;}

    .title{
      font-size:40px;
      font-weight:1000;
      margin:0 0 14px 0;
      letter-spacing:-.6px;
    }

    .hero{
      width:100%;
      height:220px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)),
        url('https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&w=1600&q=60');
      background-size:cover;
      background-position:center;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      margin-bottom:16px;
    }

    /* Tab buttons like screenshot */
    .contactTabs{
      display:flex;
      gap:10px;
      width:max-content;
      max-width:100%;
      border-radius:12px;
      margin-bottom:14px;
    }
    .ctab{
      display:flex;
      align-items:center;
      gap:10px;
      height:54px;
      padding:0 18px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:1000;
      cursor:pointer;
      user-select:none;
      transition:.15s ease;
      min-width: 210px;
      justify-content:center;
    }
    .ctab i{font-size:18px;}
    .ctab.active{
      background: rgba(45,140,255,.95);
      border-color: rgba(45,140,255,.55);
      color:#fff;
      box-shadow: 0 14px 24px rgba(45,140,255,.16);
    }

    .fieldLabel{
      font-weight:1000;
      margin:14px 0 6px 0;
      color:#fff;
      font-size:14px;
    }
    .inputx, .selectx, .areax{
      width:100%;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.02);
      color: var(--text);
      padding:12px 14px;
      outline:none;
    }
    .inputx, .selectx{height:54px;}
    .areax{min-height:150px; resize:none;}
    .inputx::placeholder, .areax::placeholder{color: rgba(234,240,255,.32);}

    .btnSend{
      margin-top:18px;
      width:520px;
      max-width:100%;
      height:48px;
      border-radius:10px;
      font-weight:1000;
      background: rgba(45,140,255,.95);
      border:1px solid rgba(45,140,255,.55);
      color:#fff;
      box-shadow: 0 14px 24px rgba(45,140,255,.16);
    }
    .btnSend:hover{background:var(--blue2);}

    .success{
      display:none;
      margin-top:14px;
      padding:12px 14px;
      border-radius:12px;
      border:1px solid rgba(99,212,164,.35);
      background: rgba(99,212,164,.10);
      color:#d9fff0;
      font-weight:1000;
    }

    /* Right card */
    .docCard{padding:16px;}
    .docImg{
      width:100%;
      height:150px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1200&q=60');
      background-size:cover;
      background-position:center;
      box-shadow: 0 14px 28px rgba(0,0,0,.28);
      margin-bottom:14px;
    }
    .docTitle{font-size:22px;font-weight:1000;margin-bottom:6px;}
    .docSub{color:var(--muted);font-weight:800;margin-bottom:12px;}
    .btnDoc{
      height:40px;
      border-radius:12px;
      font-weight:900;
      background: rgba(99,212,164,.18);
      border:1px solid rgba(99,212,164,.38);
      color:#d9fff0;
      padding:0 14px;
    }
    .btnDoc:hover{background: rgba(99,212,164,.26);}

    .view{display:none;}
    .view.active{display:block;}


/* ===== login.html ===== */
:root{
      --bg:#0d1724;
      --panel:#102033;
      --border:rgba(255,255,255,.12);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.45);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --shadow:0 12px 34px rgba(0,0,0,.35);
      --radius:14px;
    }

    html,body{height:100%;}
    body{
      margin:0;
      background:
        radial-gradient(1200px 650px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
        radial-gradient(900px 520px at 90% 30%, rgba(33,200,138,.10), transparent 60%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* Layout */
    .split{
      min-height:100vh;
      display:grid;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 992px){
      .split{grid-template-columns: 1fr;}
      .rightPane{display:none;}
    }

    .leftPane{
      padding:28px 26px;
      position:relative;
    }

    .topLeftBrand{
      display:flex;
      align-items:center;
      gap:10px;
      position:absolute;
      left:22px;
      top:18px;
      opacity:.95;
      user-select:none;
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{
      font-weight:1000;
      letter-spacing:.6px;
      font-size:12px;
      opacity:.9;
      white-space:nowrap;
    }

    .topRightControls{
      position:absolute;
      right:22px;
      top:18px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .pill{
      width:52px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }
    .pill .moon{
      width:28px;height:28px;border-radius:99px;
      background: rgba(45,140,255,.22);
      border:1px solid rgba(45,140,255,.35);
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 12px 22px rgba(45,140,255,.14);
    }
    .flag{
      width:28px;height:28px;border-radius:99px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      font-size:14px;
    }

    /* Form block */
    .formWrap{
      max-width: 560px;
      margin: 0 auto;
      padding-top: 140px;
    }

    .h1{
      font-size:36px;
      font-weight:1000;
      letter-spacing:-.5px;
      margin:0;
    }
    .sub{
      margin-top:4px;
      color:var(--muted);
      font-weight:800;
    }

    .label{
      margin-top:22px;
      margin-bottom:8px;
      font-weight:1000;
      color:#fff;
      font-size:14px;
    }

    .inputWrap{
      position:relative;
    }

    .inputx{
      width:100%;
      height:56px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.02);
      color: var(--text);
      padding: 0 44px 0 56px;
      outline:none;
      font-size:16px;
    }
    .inputx::placeholder{color: rgba(234,240,255,.30);}

    .iconLeft{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      color: rgba(234,240,255,.55);
      font-size:18px;
      pointer-events:none;
    }
    .iconRight{
      position:absolute;
      right:16px;
      top:50%;
      transform:translateY(-50%);
      color: rgba(234,240,255,.55);
      font-size:18px;
      cursor:pointer;
      user-select:none;
    }

    .forgot{
      display:block;
      margin:14px 0 0;
      text-align:center;
      color: rgba(45,140,255,.95);
      font-weight:900;
      text-decoration:none;
    }
    .forgot:hover{color:#82b7ff;}

    .btnLogin{
      margin-top:18px;
      width:100%;
      height:54px;
      border-radius:12px;
      border:1px solid rgba(45,140,255,.55);
      background: rgba(45,140,255,.95);
      color:#fff;
      font-weight:1000;
      font-size:16px;
      box-shadow: 0 16px 28px rgba(45,140,255,.16);
    }
    .btnLogin:hover{background: var(--blue2);}

    .register{
      margin-top:18px;
      text-align:center;
      color: rgba(234,240,255,.78);
      font-weight:900;
    }
    .register a{
      color: rgba(45,140,255,.95);
      text-decoration:none;
      font-weight:1000;
    }
    .register a:hover{color:#82b7ff;}

    .fineprint{
      margin-top:28px;
      font-size:12px;
      color: rgba(234,240,255,.70);
      line-height:1.45;
    }
    .fineprint a{color: rgba(45,140,255,.95); text-decoration:none; font-weight:900;}
    .fineprint a:hover{color:#82b7ff;}
    .tiny{
      margin-top:16px;
      text-align:center;
      font-size:12px;
      color: rgba(234,240,255,.55);
      line-height:1.45;
    }
    .tiny a{color: rgba(45,140,255,.95); text-decoration:none; font-weight:900;}

    /* Right panel */
    .rightPane{
      border-left:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }

    .logoWrap{
      text-align:center;
      user-select:none;
    }
    .bigMark{
      width:120px;
      height:120px;
      margin:0 auto 18px;
      position:relative;
    }
    .bigMark:before{
      content:"";
      position:absolute;
      left:50%;
      top:10px;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:52px solid transparent;
      border-right:52px solid transparent;
      border-top:92px solid rgba(255,255,255,.85);
      filter: drop-shadow(0 14px 24px rgba(0,0,0,.25));
      opacity:.9;
    }
    .bigMark:after{
      content:"";
      position:absolute;
      left:50%;
      top:26px;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:44px solid transparent;
      border-right:44px solid transparent;
      border-top:78px solid rgba(124,255,107,.85);
      opacity:.95;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .bigTitle{
      font-size:56px;
      font-weight:300;
      letter-spacing:4px;
      margin:0;
      color: rgba(255,255,255,.92);
    }

    .miniBrand{
      margin-top:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      opacity:.8;
    }
    .miniTri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
    }
    .miniText{
      font-weight:1000;
      letter-spacing:.6px;
      font-size:12px;
    }


/* ===== registro.html ===== */
:root{
      --bg:#0d1724;
      --border:rgba(255,255,255,.14);
      --text:#eaf0ff;
      --muted:rgba(234,240,255,.62);
      --muted2:rgba(234,240,255,.45);
      --blue:#2d8cff;
      --blue2:#1f6fe0;
      --shadow:0 14px 34px rgba(0,0,0,.32);
      --radius:14px;
    }

    html,body{height:100%;}
    body{
      margin:0;
      background:
        radial-gradient(1200px 650px at 20% 0%, rgba(45,140,255,.12), transparent 55%),
        radial-gradient(900px 520px at 90% 30%, rgba(33,200,138,.10), transparent 60%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* Layout */
    .split{
      min-height:100vh;
      display:grid;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 992px){
      .split{grid-template-columns: 1fr;}
      .rightPane{display:none;}
    }

    .leftPane{
      padding:28px 26px;
      position:relative;
    }

    .topLeftBrand{
      display:flex;
      align-items:center;
      gap:10px;
      position:absolute;
      left:22px;
      top:18px;
      opacity:.95;
      user-select:none;
    }
    .tri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
      filter: drop-shadow(0 6px 10px rgba(124,255,107,.18));
    }
    .brandText{
      font-weight:1000;
      letter-spacing:.6px;
      font-size:12px;
      opacity:.9;
      white-space:nowrap;
    }

    .topRightControls{
      position:absolute;
      right:22px;
      top:18px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .pill{
      width:52px;
      height:46px;
      border-radius:14px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }
    .pill .moon{
      width:28px;height:28px;border-radius:99px;
      background: rgba(45,140,255,.22);
      border:1px solid rgba(45,140,255,.35);
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 12px 22px rgba(45,140,255,.14);
    }
    .flag{
      width:28px;height:28px;border-radius:99px;
      display:flex;align-items:center;justify-content:center;
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      font-size:14px;
    }

    /* Form */
    .formWrap{
      max-width: 640px;
      margin: 0 auto;
      padding-top: 120px;
    }

    .badgeCode{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:28px;
      padding:0 14px;
      border-radius:10px;
      background: rgba(45,140,255,.95);
      border:1px solid rgba(45,140,255,.55);
      color:#fff;
      font-weight:1000;
      font-size:12px;
      box-shadow: 0 14px 24px rgba(45,140,255,.14);
      margin-bottom:14px;
    }

    .h1{
      font-size:32px;
      font-weight:1000;
      letter-spacing:-.5px;
      margin:0 0 18px 0;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
    }
    @media (max-width: 600px){
      .grid2{grid-template-columns: 1fr;}
    }

    .label{
      margin-top:14px;
      margin-bottom:8px;
      font-weight:1000;
      color:#fff;
      font-size:14px;
    }

    .inputWrap{
      position:relative;
    }

    .inputx{
      width:100%;
      height:56px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.02);
      color: var(--text);
      padding: 0 44px 0 56px;
      outline:none;
      font-size:16px;
    }
    .inputx::placeholder{color: rgba(234,240,255,.30);}

    .inputx.noIcon{
      padding-left:16px;
      padding-right:16px;
    }

    .iconLeft{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      color: rgba(234,240,255,.55);
      font-size:18px;
      pointer-events:none;
    }
    .iconRight{
      position:absolute;
      right:16px;
      top:50%;
      transform:translateY(-50%);
      color: rgba(234,240,255,.55);
      font-size:18px;
      cursor:pointer;
      user-select:none;
    }

    .rowPhone{
      display:grid;
      grid-template-columns: 140px 1fr;
      gap:14px;
    }

    .selectx{
      width:100%;
      height:56px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.02);
      color: var(--text);
      padding: 0 14px;
      outline:none;
      font-size:16px;
      appearance:none;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(234,240,255,.65) 50%),
        linear-gradient(135deg, rgba(234,240,255,.65) 50%, transparent 50%);
      background-position:
        calc(100% - 22px) 23px,
        calc(100% - 16px) 23px;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }
    .selectx option{color:#0b1220;}

    .btnBig{
      margin-top:18px;
      width:100%;
      height:54px;
      border-radius:12px;
      border:1px solid rgba(45,140,255,.55);
      background: rgba(45,140,255,.95);
      color:#fff;
      font-weight:1000;
      font-size:16px;
      box-shadow: 0 16px 28px rgba(45,140,255,.16);
    }
    .btnBig:hover{background: var(--blue2);}

    .fine{
      margin-top:16px;
      font-size:12px;
      color: rgba(234,240,255,.70);
      line-height:1.45;
      max-width: 620px;
    }
    .fine a{color: rgba(45,140,255,.95); text-decoration:none; font-weight:900;}
    .fine a:hover{color:#82b7ff;}

    .learn{
      margin-top:16px;
      font-size:12px;
      color: rgba(234,240,255,.70);
      line-height:1.45;
      max-width: 620px;
    }
    .learn a{color: rgba(45,140,255,.95); text-decoration:none; font-weight:900;}

    .loginLink{
      margin-top:18px;
      text-align:center;
      font-weight:1000;
      color: rgba(234,240,255,.78);
    }
    .loginLink a{
      color: rgba(45,140,255,.95);
      text-decoration:none;
      font-weight:1000;
    }
    .loginLink a:hover{color:#82b7ff;}

    /* Right panel */
    .rightPane{
      border-left:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    .logoWrap{text-align:center; user-select:none;}
    .bigMark{
      width:120px;
      height:120px;
      margin:0 auto 18px;
      position:relative;
    }
    .bigMark:before{
      content:"";
      position:absolute;
      left:50%;
      top:10px;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:52px solid transparent;
      border-right:52px solid transparent;
      border-top:92px solid rgba(255,255,255,.85);
      filter: drop-shadow(0 14px 24px rgba(0,0,0,.25));
      opacity:.9;
    }
    .bigMark:after{
      content:"";
      position:absolute;
      left:50%;
      top:26px;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:44px solid transparent;
      border-right:44px solid transparent;
      border-top:78px solid rgba(124,255,107,.85);
      opacity:.95;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
    .bigTitle{
      font-size:56px;
      font-weight:300;
      letter-spacing:4px;
      margin:0;
      color: rgba(255,255,255,.92);
    }
    .miniBrand{
      margin-top:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      opacity:.8;
    }
    .miniTri{
      width:0;height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:14px solid #7CFF6B;
    }
    .miniText{
      font-weight:1000;
      letter-spacing:.6px;
      font-size:12px;
    }