/* assets/style.css */
:root{--bg:#071024;--card:#08172a;--muted:#9aa8c6;--accent:#22c55e;--text:#e6eef8}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#020617 0%,#071636 100%);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px}
.container{max-width:1000px;margin:12px auto;padding:12px}
.card{background:var(--card);padding:14px;border-radius:12px;margin-bottom:12px;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
.row{display:flex;gap:8px;align-items:center}
input{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#071b2b;color:var(--text)}
.btn,button{background:var(--accent);color:#012018;border:0;padding:10px 12px;border-radius:8px;font-weight:700}
.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.03);font-size:14px}
.logs{background:#02101a;padding:10px;border-radius:6px;color:#cfeef5}
.login-card{max-width:420px;margin:80px auto;padding:18px;background:var(--card);border-radius:12px}
.number-box{background:#021826;padding:12px;border-radius:8px;margin-bottom:10px;border:1px solid #063441}
.countdown{color:#fca5a5;font-weight:700}
.small{color:var(--muted)}
.error{color:#ffccd5}
.hint{color:var(--muted)}
.copy-btn, .del-btn {
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 6px;
}

.copy-btn {
    background: #0ea5e9;
    color: white;
}
.copy-btn:hover {
    background: #0284c7;
}

.del-btn {
    background: #ef4444;
    color: white;
}
.del-btn:hover {
    background: #dc2626;
}
/* ===== Auto Generate Button States ===== */
#toggleAutoGenerate {
  transition: all 0.25s ease;
  font-weight: bold;
}

/* START state */
#toggleAutoGenerate.start {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #022c22;
}

/* RUNNING state */
#toggleAutoGenerate.running {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #2a0a00;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}