/* ========= RESET & BASE ========= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1117;--bg2:#1a1d27;--bg3:#252836;
  --fg:#e0e0e0;--fg2:#9a9fb0;
  --accent:#6c63ff;--accent2:#8b83ff;
  --red:#e74c5f;--red2:#ff6b7a;
  --green:#2ecc71;--yellow:#f39c12;
  --border:#2e3140;
  --radius:8px;
}
html{font-size:14px}
body{background:var(--bg);color:var(--fg);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;min-height:100vh}
a{color:var(--accent2);text-decoration:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ========= UTILITIES ========= */
.hidden{display:none!important}
.screen{width:100%;min-height:100vh}
.error{color:var(--red);font-size:.85rem;margin-top:.5rem}
.badge{background:var(--bg3);padding:2px 10px;border-radius:12px;font-size:.8rem;color:var(--fg2)}
.info-text{font-size:.85rem;color:var(--fg2);margin-left:1rem}
.server-time{font-size:.85rem;color:var(--accent2);margin-bottom:.6rem;font-family:monospace}

/* ========= LOGIN ========= */
.login-box{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bg2);padding:2.5rem;border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.4);width:340px;text-align:center
}
.login-box h1{margin-bottom:1.5rem;font-size:1.5rem;color:var(--accent2)}
.login-box input{
  display:block;width:100%;padding:.7rem 1rem;margin-bottom:.8rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--fg);font-size:.95rem;outline:none
}
.login-box input:focus{border-color:var(--accent)}
.login-box button{
  width:100%;padding:.7rem;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius);cursor:pointer;font-size:1rem;font-weight:600;
  transition:background .2s
}
.login-box button:hover{background:var(--accent2)}

/* ========= HEADER ========= */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1.5rem;background:var(--bg2);border-bottom:1px solid var(--border)
}
.header-left{display:flex;align-items:center;gap:1rem}
header h1{font-size:1.2rem;font-weight:700;color:var(--accent2)}
.header-right{display:flex;align-items:center;gap:.8rem}

.status-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.status-dot.online{background:var(--green);box-shadow:0 0 6px var(--green)}
.status-dot.offline{background:var(--red)}

/* ========= BUTTONS ========= */
.btn{
  padding:.4rem .9rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg3);color:var(--fg);cursor:pointer;font-size:.85rem;transition:all .15s
}
.btn:hover{border-color:var(--accent);color:var(--accent2)}
.btn-sm{padding:.3rem .6rem;font-size:.8rem}
.btn-red{border-color:var(--red);color:var(--red)}
.btn-red:hover{background:var(--red);color:#fff}
.btn-green{border-color:var(--green);color:var(--green)}
.btn-green:hover{background:var(--green);color:#fff}
.btn-yellow{border-color:var(--yellow);color:var(--yellow)}
.btn-yellow:hover{background:var(--yellow);color:#fff}
.btn-action{
  padding:.25rem .6rem;background:var(--red);color:#fff;border:none;
  border-radius:4px;cursor:pointer;font-size:.8rem;font-weight:600;
  transition:background .15s
}
.btn-action:hover{background:var(--red2)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}

/* ========= TABS ========= */
.tabs{display:flex;gap:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1rem}
.tab{
  padding:.6rem 1.2rem;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--fg2);cursor:pointer;font-size:.9rem;transition:all .15s
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--accent2);border-bottom-color:var(--accent)}

.tab-content{display:none;padding:1rem 1.5rem}
.tab-content.active{display:block}

/* ========= TOOLBAR ========= */
.toolbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
.toolbar select,.toolbar input[type=text]{
  padding:.4rem .6rem;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--fg);font-size:.85rem;outline:none
}
.toolbar select:focus,.toolbar input:focus{border-color:var(--accent)}
.search-input{min-width:220px}

/* ========= TABLES ========= */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{
  position:sticky;top:0;background:var(--bg2);color:var(--fg2);
  padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--border);
  font-weight:600;white-space:nowrap;user-select:none
}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--accent2)}
tbody td{padding:.45rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:hover{background:var(--bg3)}
td.email{max-width:220px;overflow:hidden;text-overflow:ellipsis}
td.uuid{max-width:140px;overflow:hidden;text-overflow:ellipsis;font-family:monospace;font-size:.8rem;color:var(--fg2)}

/* ========= PAGINATION ========= */
.pagination{display:flex;align-items:center;gap:.3rem;padding:.8rem 0;flex-wrap:wrap}
.pagination button{
  padding:.3rem .6rem;background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;color:var(--fg);cursor:pointer;font-size:.8rem
}
.pagination button:hover{border-color:var(--accent)}
.pagination button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination .page-info{font-size:.8rem;color:var(--fg2);margin:0 .5rem}

/* ========= CHARTS ========= */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.chart-card{background:var(--bg2);padding:1rem;border-radius:var(--radius);border:1px solid var(--border)}
.chart-card h3{font-size:.95rem;margin-bottom:.8rem;color:var(--fg2)}
#currency-table-wrap{background:var(--bg2);padding:1rem;border-radius:var(--radius);border:1px solid var(--border)}
#currency-table-wrap h3{font-size:.95rem;margin-bottom:.5rem;color:var(--fg2)}

/* ========= LOG BOX ========= */
.log-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;font-family:'Cascadia Code','Fira Code',monospace;font-size:.8rem;
  line-height:1.5;max-height:600px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;
  color:var(--fg2)
}

/* ========= MODAL ========= */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;
  align-items:center;justify-content:center;z-index:1000
}
.modal-content{
  background:var(--bg2);padding:1.5rem;border-radius:var(--radius);
  max-width:700px;width:90%;max-height:80vh;overflow-y:auto;
  border:1px solid var(--border)
}
.modal-content h2{margin-bottom:1rem;font-size:1.1rem;color:var(--accent2)}
.modal-content pre{
  background:var(--bg);padding:1rem;border-radius:4px;font-size:.8rem;
  max-height:50vh;overflow-y:auto;white-space:pre-wrap;word-break:break-all;
  margin-bottom:1rem
}

/* ========= RESPONSIVE ========= */
@media(max-width:768px){
  .charts-grid{grid-template-columns:1fr}
  .tabs{overflow-x:auto}
  header{flex-wrap:wrap;gap:.5rem}
}