:root{

      --bg:#0b0f16; --card:#0c1320; --line:#1a2536;

      --accent:#0ef0b6; --muted:#8ea0be; --text:#e6eefb;

      --navW: 250px;

    }

    *{box-sizing:border-box}

    html,body{margin:0}

    body{

      background:radial-gradient(1200px 600px at 70% -10%,#132033 0%,#0b0f16 60%);

      color:var(--text);

      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

      overflow-x:hidden;

      padding-left: var(--navW);

    }

    div#logoStats {

    text-align: center;

}

    .sideMenu{

  position: fixed;

  left: 0;

  top: 0;

  width: var(--navW);

  height: 100vh;

  z-index: 999;

  padding: 14px 12px;



  background: linear-gradient(180deg, rgba(12,19,32,.98), rgba(12,19,32,.88));

  border-right: 1px solid var(--line);

  box-shadow: 10px 0 30px rgba(0,0,0,.25);

  backdrop-filter: blur(6px);

  display: flex;

  flex-direction: column;

}

.sideMenu .logoutLink{

  margin-top: auto;

}

.sideMenu .menuTitle{

  display:flex;

  align-items:center;

  gap:10px;

  font-weight: 800;

  margin: 4px 6px 12px;

}



.sideMenu .menuTitle .dot{

  width:10px;height:10px;border-radius:50%;

  background:var(--accent);

  box-shadow:0 0 18px rgba(14,240,182,.45);

}



.sideMenu a{

  display:flex;

  align-items:center;

  gap:10px;

  padding: 10px 10px;

  border-radius: 12px;

  text-decoration: none;

  color: #cfe6ff;

  border: 1px solid #20324e;

  background:#0d1a2d;

  margin: 8px 6px;

}



.sideMenu a:hover{ border-color:#2b436a; }

.sideMenu .menuDisabled{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: #4a6080;
  border: 1px solid #172030;
  background:#0a1220;
  margin: 8px 6px;
  cursor: not-allowed;
  opacity: 0.55;
  user-select: none;
}



.sideMenu a.active{

  border-color: rgba(78, 188, 255, 0.55);

  box-shadow: 0 0 0 1px rgba(14,240,182,.18) inset;

}



.sideMenu .menuHint{

  margin: 12px 10px 0;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.35;

}



/* Responsive: collapse left padding if you want, or keep it */

@media (max-width: 900px){

  :root{ --navW: 180px; }

}

@media (max-width: 640px){

  /* optional: overlay menu on small screens */

  body{ padding-left: 0; }

  .sideMenu{

    width: 100%;

    height: auto;

    position: sticky;

    top: 0;

    border-right: none;

    border-bottom: 1px solid var(--line);

    box-shadow: 0 8px 30px rgba(0,0,0,.25);

    display:flex;

    align-items:center;

    gap:8px;

    overflow-x:auto;

  }

  .sideMenu .menuTitle{ margin:0 6px; white-space:nowrap; }

  .sideMenu a{ white-space:nowrap; margin: 6px 0; }

  .sideMenu .menuHint{ display:none; }

}



 

    .app{padding:12px;background: radial-gradient(1200px 600px at 50% -10%, #4b586b 0%, #070d16 60%);}

    .card{

      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));

      border:1px solid var(--line);

      border-radius:16px;

      box-shadow:0 8px 30px rgba(0,0,0,.25);

      margin-bottom:12px;

    }

.hero{

  position: relative;   

  overflow: hidden;

  height: 6vw;

}



.hero img{ width:100%; height:auto; display:block; }



.logo{

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  z-index: 5;

  pointer-events: none;

}



.logo img{

  display: block;

  height: 6vw;      

  width: auto;

}

.btLang {

    text-align: center;

}

.btLang a {

    text-align: center;

    display: block;

}

    .top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;flex-wrap:wrap;text-transform: capitalize}

    .brand{display:flex;gap:10px;align-items:center;font-weight:800}

    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(14,240,182,.45)}

    .meta{display:flex;gap:18px;color:var(--muted);font-size:12px;flex-wrap:wrap}



    .menu{display:flex;gap:8px;align-items:center}

    .menu a{

      display:inline-flex;align-items:center;gap:8px;

      height:36px;padding:8px 12px;border-radius:12px;

      background:#0d1a2d;border:1px solid #20324e;color:#cfe6ff;

      text-decoration:none;

    }

    .menu a:hover{border-color:#2b436a}



    .toolbar{padding:8px 12px;position:sticky;top:0;z-index:20}

    .toolbar .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}

    .ctrl{

      height:36px;padding:8px 10px;border-radius:10px;

      background:#0c1320;border:1px solid #162338;color:#cfe6ff;outline:none;

      max-width:100%;

    }

    a {

    color: #e8a44d;

    text-decoration: none;

}

    .button{

      display:inline-flex;align-items:center;gap:8px;

      background:#0d1a2d;border:1px solid #20324e;

      padding:8px 12px;border-radius:12px;color:#cfe6ff;cursor:pointer;height:36px;

    }

    .button:hover{border-color:#2b436a}

    .sub{color:#9fb2d2;font-size:12px}



    .section{padding:12px}

    .sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}

    .sectionHead .title{font-weight:800}

    .sectionHead .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}



    table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto}

    thead th{

      position:sticky; top:0; z-index:2;

      background:#192a4b; color:#cfe6ff;

      font-weight:700; font-size:12px; text-align:left; padding:10px 10px;

      border-bottom:1px solid #162338; white-space:nowrap;

    }

    tbody td{

      font-size:12px;color:#e6eefb;padding:8px 10px;border-bottom:1px solid #132033;vertical-align:top;

      word-break:break-word; overflow-wrap:anywhere;

    }

    tbody tr:hover{background:rgba(14,240,182,.05)}

    .scroller{max-height:70vh;overflow-y:auto;overflow-x:hidden}

    .scroller{ scrollbar-width:thin; scrollbar-color:#2b3a54 #0b1220 }

    .scroller::-webkit-scrollbar{ width:10px;height:10px }

    .scroller::-webkit-scrollbar-track{ background:#0b1220;border-radius:8px }

    .scroller::-webkit-scrollbar-thumb{

      background:linear-gradient(180deg,#26334b,#2b3a54);border:1px solid #1a2536;border-radius:8px

    }

    .scroller::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#31425f,#394e72) }



    th.sortable{cursor:pointer}

    th.sortable::after{content:'⇅';opacity:.35;font-size:11px;margin-left:6px}

    th.sortable.sort-asc::after{content:'↑';opacity:.9}

    th.sortable.sort-desc::after{content:'↓';opacity:.9}



    .footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;color:#8ea0be;font-size:12px;height:56px}