:root{
  --bg0:#02050a; --bg1:#041424; --accent1:#00f5a0; --accent2:#5af0ff; --neon:#00ffcc; --line:rgba(255,255,255,0.08);
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:#d8faff}
body,html{height:100%;margin:0;background:linear-gradient(180deg,var(--bg0),var(--bg1));-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;height:100vh;padding:18px;gap:12px}
.topbar {
  display: flex;
  justify-content: space-between; /* brand on left, nav on right */
  align-items: center;
  padding: 8px 16px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  gap: 8px;
}
/* Only apply history styles when the History panel is active */
.panel#history {
  display: none; /* hidden by default */
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.panel#history.active {
  display: flex; /* show when active */
}

.panel#history .left {
  flex: 1;
}

.panel#history .controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#clear_history_btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #d9534f;   /* danger red */
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

#clear_history_btn:hover {
  background: #c9302c;
}

#clear_history_btn:active {
  background: #a52a2a;
}

.tabbtn {
  background: none;
  border: none;
  color: #bfeaff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.tabbtn:hover {
  background: rgba(255,255,255,0.1);
}

.tabbtn.active {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: bold;
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #ccc;
  transition: all 0.3s ease;
}

.check-item .icon {
  font-weight: bold;
  width: 18px;
  text-align: center;
  color: #ff6b6b; /* red for ✖ */
}

.check-item.valid {
  background: rgba(0, 255, 150, 0.15);
  color: #9fffc8;
}

.check-item.valid .icon {
  color: #00ff9d; /* green check */
}
.uploader {
  border: 2px dashed rgba(255,255,255,0.3);
  padding: 16px;
  border-radius: 6px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.uploader.highlight {
  border-color: var(--accent);
  background: rgba(0,255,150,0.05);
}

.brand{display:flex;align-items:center;gap:12px}
.orb{width:34px;height:34px;border-radius:50%;background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 0 30px rgba(90,245,255,0.35)}
.title{font-weight:800}
.main{display:flex;flex-direction:column;gap:12px;flex:1;overflow:hidden}
.panel{display:flex;flex-direction:column;gap:12px;flex:1;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:auto}
.panel:not(.active){display:none}
.left{flex:1}
.right{width:100%;padding-left:0;border-left:none}
@media (min-width:900px){ .panel{flex-direction:row} .right{width:360px;padding-left:12px;border-left:1px dashed var(--line)} }
input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.35);color:#e8fbff;margin:8px 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;color:#022;padding:10px 12px;border-radius:10px;cursor:pointer}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:10px 12px;border-radius:8px;color:#cfefff}
.card{margin-top:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid var(--line)}
.strength{height:18px;border-radius:10px;background:rgba(255,255,255,0.03);overflow:hidden;margin-top:8px}
.fill{height:100%;width:0%;background:linear-gradient(90deg,#ff3b3b,#ffd24a,#2fe089);transition:width .6s}
.preview{background:rgba(2,8,14,0.6);padding:12px;border-radius:8px;color:#cfefff;white-space:pre-wrap;max-height:260px;overflow:auto}
.neon-btn{display:inline-block;border:2px solid var(--neon);color:var(--neon);padding:10px 20px;border-radius:8px;box-shadow:0 0 12px var(--neon);background:transparent;cursor:pointer}
.live-card{margin-top:10px;padding:10px;border-radius:8px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.02)}
.live-actions{max-height:160px;overflow:auto;padding:8px;background:rgba(0,0,0,0.25);border-radius:6px;color:#bfffe8}
.live-item{padding:4px 6px;border-radius:4px;margin-bottom:4px;background:rgba(255,255,255,0.01)}
.pw-row{display:flex;gap:6px;align-items:stretch}
.eye-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;cursor:pointer;color:#dff}
.footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--line);
}

.notes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.note-card {
  flex: 1;
  min-width: 220px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #bfeaff;
  font-size: 13px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #7ecfd8;
}
.small{font-size:12px;color:#aadce6}
.hint{color:#a7efff}

.checklist label{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.02);padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06)}
.disclaimer{margin-top:8px;color:#ffd0d0}

.status{color:#a7efff}
.note{color:#cfefff;opacity:0.95}
.linklike{color:var(--accent2);text-decoration:underline;cursor:pointer}

.uploader{border:1px dashed var(--line);border-radius:8px;padding:12px;text-align:center;background:rgba(255,255,255,0.03);margin-top:8px}
.progressbar{height:12px;background:rgba(255,255,255,0.08);border-radius:8px;overflow:hidden;margin-top:10px}
.progressfill{height:100%;width:0%;background:linear-gradient(90deg,#ff5a5a,#ffd24a,#2fe089);transition:width .4s}

.info-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.rail-card{border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:10px;background:rgba(0,0,0,0.2)}
.rail-title{font-weight:700;color:#5af0ff;margin-bottom:6px}
.rail-body{color:#bfeaff;font-size:13px}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0.35) inset !important;
  -webkit-text-fill-color: #e8fbff !important;
  background-color: rgba(0,0,0,0.35) !important;  /* ✅ keep dark background */
  caret-color: #e8fbff !important;
}