/* ===== design tokens & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b1120;
  --card:#111827;
  --card2:#0f172a;
  --card-border:#1e293b;
  --text:#e2e8f0;
  --text-dim:#94a3b8;
  --green:#22c55e;--yellow:#eab308;--red:#ef4444;
  --blue:#3b82f6;--purple:#a855f7;--cyan:#06b6d4;
  --green-bg:rgba(34,197,94,.12);
  --yellow-bg:rgba(234,179,8,.12);
  --red-bg:rgba(239,68,68,.12);
  --blue-bg:rgba(59,130,246,.08);
  --max-width:1600px;
}
html,body{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit}
input,select,button{-webkit-appearance:none;appearance:none}

/* ===== login ===== */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-box{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:36px 28px;width:100%;max-width:380px;text-align:center}
.login-box h1{font-size:18px;margin-bottom:8px}
.login-box p{font-size:13px;color:var(--text-dim);margin-bottom:24px}
.login-box input{width:100%;padding:12px 16px;background:#1e293b;border:1px solid #334155;border-radius:8px;color:var(--text);font-size:16px;outline:none}
.login-box input:focus{border-color:var(--blue)}
.login-box button{width:100%;padding:12px;background:var(--blue);border:none;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;margin-top:12px;font-weight:600}
.login-box button:hover{opacity:.9}
.login-error{color:var(--red);font-size:13px;margin-top:8px}

/* ===== header ===== */
.header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--card-border);
  background:var(--card);
  position:sticky;top:0;z-index:100;
  flex-wrap:wrap;
}
.header-left{display:flex;align-items:center;gap:10px;min-width:0}
.header-left h1{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-left .logo{font-size:22px;flex-shrink:0}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-right button{
  padding:7px 12px;
  border-radius:6px;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--text-dim);
  font-size:12px;
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.header-right button:hover{background:#1e293b;color:var(--text)}
.header-right .refresh-btn{border-color:var(--blue);color:var(--blue)}
.header-right .refresh-btn:hover{background:rgba(59,130,246,.1)}
.countdown{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== main layout ===== */
.main{padding:20px 20px 40px;max-width:var(--max-width);margin:0 auto}

/* ===== tabs ===== */
.tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--card-border);
  margin:-20px -20px 20px;
  padding:0 20px;
  background:var(--card);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:12px 18px;
  background:none;border:none;
  color:var(--text-dim);
  font-size:13px;font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ===== buttons (shared) ===== */
.btn{padding:8px 16px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-secondary{background:#334155;color:var(--text)}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-group{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}

/* ===== modal ===== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:200;
  backdrop-filter:blur(4px);
  padding:16px;
}
.modal{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  width:100%;max-width:720px;
  max-height:90vh;overflow-y:auto;
  padding:0;
}
.modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--card);
  border-radius:16px 16px 0 0;z-index:1;
}
.modal-header h2{font-size:15px}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}
.modal-close:hover{background:#1e293b;color:var(--text)}
.modal-body{padding:20px}
.modal-body h3{font-size:13px;font-weight:600;margin:16px 0 8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px}
.modal-body h3:first-child{margin-top:0}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px}
.form-row input,.form-row select{width:100%;padding:9px 12px;background:#1e293b;border:1px solid #334155;border-radius:6px;color:var(--text);font-size:13px;outline:none}
.form-row input:focus,.form-row select:focus{border-color:var(--blue)}
.form-row-inline{display:flex;gap:8px;flex-wrap:wrap}
.form-row-inline .form-row{flex:1 1 160px}

/* ===== spinner / animations ===== */
.spinner{width:14px;height:14px;border:2px solid var(--card-border);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== responsive overrides ===== */
@media (max-width:768px){
  .main{padding:14px 14px 32px}
  .tabs{margin:-14px -14px 14px;padding:0 14px}
  .header{padding:10px 14px}
  .header-left h1{font-size:13px}
  .header-left .logo{font-size:18px}
  .header-right button{padding:6px 10px;font-size:11px}
  .modal{max-height:95vh}
  .modal-header{padding:12px 14px}
  .modal-body{padding:14px}
}
@media (max-width:480px){
  .header-left h1{display:none}
  .countdown{display:none}
}