:root{--bg:#0b0b12;--card:#131325;--text:#e8e8f2;--muted:#9aa;--accent:#ffd166;--good:#06d6a0;--warn:#ef476f;--ring:#7c5cff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:
  radial-gradient(1200px 800px at 10% -10%,#1e1b4b22,transparent),
  radial-gradient(900px 600px at 110% 10%,#2dd4bf15,transparent),
  var(--bg);color:var(--text);overflow-y:auto}
  
a {color: inherit;}

.container{width:100%;max-width:1100px;padding:0 16px;margin:0 auto}

header {
  padding: 10px 16px 8px;
  display: flex;
  justify-content: flex-start;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight:800;
  line-height: 1.4; /* tighter vertical spacing */
}

.brand span {
  display: inline-block;
}

.brand .subtitle {
  display: block;
  font-size: 0.70em;
  color: #646464;
  margin-top: -2px; /* pulls it closer */
}

.brand .amulet{font-size:26px;filter:drop-shadow(0 0 6px #ffd16688)}

.card{background:linear-gradient(160deg,#1d1b34,#0b0b14);border:1px solid #ffffff10;border-radius:14px;box-shadow:0 8px 28px #00000060;padding:14px}
main{max-width:1100px;margin:6px auto 36px;display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:980px){.row{grid-template-columns:2fr 1fr}}

label{font-size:13px;color:var(--muted)}
input[type="text"], select{width:100%;padding:12px;border-radius:12px;border:1px solid #ffffff12;background:#0f1022;color:var(--text);outline:none;transition:.15s}
input::placeholder{color:#6f6f78}
input[type="text"]:focus, select:focus{box-shadow:0 0 0 3px #7c5cff22}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
button{background:linear-gradient(180deg,#322a63,#1b1740);border:1px solid #7c5cff44;color:#fff;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.3px;transition:transform .06s ease, box-shadow .2s}
button:hover{box-shadow:0 6px 14px #7c5cff33}
button:active{transform:translateY(1px)}
.ghost{background:#13132a;border:1px solid #ffffff12;color:#c9c9df}
.good{background:linear-gradient(180deg,#1f7a69,#115e50);border-color:#06d6a033}
.warn{background:linear-gradient(180deg,#7a1f38,#5e1127);border-color:#ef476f55}

/* Restore button color as requested */
.restore-btn{background:linear-gradient(90deg,#1b2a45,#15314a);border:1px solid #7c5cff44;color:#fff;padding:8px 10px;border-radius:10px;font-weight:700}

.options{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.opt{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#cfd0f1;background:#0f1022;border:1px solid #ffffff10;padding:8px 10px;border-radius:12px}

.stage{position:relative;min-height:220px;overflow:hidden}
.ticker{font-size:20px;line-height:1.35;word-break:break-word;overflow-wrap:anywhere}
.ticker b{color:var(--accent)}
.sub{color:var(--muted);font-size:13px}
.errorMsg{color:#ef476f;font-size:18px;font-weight:800;text-align:center;margin-top:10px}

.log{max-height:360px;overflow:auto;border:1px dashed #ffffff14;border-radius:12px;padding:8px;background:#0f1022}
.entry{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px dashed #ffffff10}
.entry:last-child{border-bottom:none}
.badge{font-size:20px;filter:drop-shadow(0 0 6px #ffffff33)}
.name{font-weight:700}
.small{font-size:12px;color:#a5a6cc}

.progress{height:10px;background:#ffffff14;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ef476f,#06d6a0,#118ab2);filter:saturate(1.2);box-shadow:0 0 14px #ffd16666 inset;transition:width .2s linear}

footer{opacity:.85;text-align:center;padding:14px 10px;font-size:12px;color:#a6a6c7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tabs{display:flex;gap:8px;align-items:center}
.tab-btn{padding:8px 12px;background:transparent;border:1px solid #ffffff12;border-radius:8px;color:var(--text);cursor:pointer}
.tab-btn.active{background:linear-gradient(90deg,#16162b,#0d0d16);box-shadow:0 6px 16px #00000060}

.gif-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
}

#beniImg {
  max-width: 100%;
  height: auto;
  max-height: 70vh; /* prevents tall overflow on phones */
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(200,200,255,0.15);
  box-shadow: 0 0 18px rgba(200,200,255,0.10);
}

/* Settings button + panel (div-based; no <details/summary>) */
.settings-btn{padding:8px 10px;border-radius:10px;border:1px solid #ffffff12;background:#13132a;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.settings-btn.open{background:linear-gradient(90deg,#1b2a45,#15314a);border-color:#7c5cff44}
.settings-panel{border:1px solid #ffffff10;border-radius:12px;padding:12px;background:#0f1022;margin-top:8px}



/* Base row */
.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* Used when the row contains two logical sides */
.settings-row.split {
  justify-content: space-between;
}

/* Groups of controls that should stay together */
.inline-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Label alignment */
.settings-row > label {
  margin: 0;
  white-space: nowrap;
}

/* Inputs */
.settings-row input[type="text"] {
  max-width: 260px;
}

/* Selects should size to content, not stretch */
.settings-row select {
  width: auto;
  min-width: 120px;
}

/* Prevent right-side button from stretching */
.settings-row.split > button {
  flex-shrink: 0;
}

/* Right-side icons for log actions */
.log-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn{
  background:none;
  border:none;
  cursor:pointer;

  font-size:22px;
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  line-height:1;
  font-variant-emoji: emoji;
  padding:0;

  opacity:.75;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;

}

@media (hover: hover) {
  .icon-btn:hover{
    opacity:1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px rgba(255,255,255,.45));
  }
}

.icon-btn:active{
  transform: scale(1.05);
}

@media (max-width: 600px){
  .icon-btn{
    font-size:18px;
    width:26px;
    height:26px;
  }
}

#audioSelect {
  width: auto;
  min-width: 0;
}

.share-url {
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #777;
  background: #111;
  color: #eee;
}

.from-line {
  margin-top: 1px;
  font-size: 0.75em;
  color: #646464;
  font-style: italic;
  text-align: right;
  opacity: 0.85;
}

.from-line.hidden {
  display: none;
}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal{background:var(--card);border-radius:12px;padding:14px;max-width:520px;width:92%;box-shadow:0 12px 40px rgba(0,0,0,0.7)}
.modal h3{margin:0 0 8px 0}
.modal .buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.hidden{display:none!important}

.start-glow {
  position: relative;
  z-index: 1;
}

.start-glow::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 16px;
  background: radial-gradient(
    circle,
    rgba(255, 210, 120, 0.75),
    rgba(255, 180, 80, 0.35),
    rgba(255, 180, 80, 0.0) 70%
  );
  filter: blur(10px);
  opacity: 0;
  animation: heartbeatGlow 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heartbeatGlow {
  0%   { opacity: 0; transform: scale(0.95); }
  10%  { opacity: 0.6; transform: scale(1.05); }
  20%  { opacity: 0.1; transform: scale(1.0); }
  35%  { opacity: 0.5; transform: scale(1.03); }
  60%  { opacity: 0.12; transform: scale(1); }
  100% { opacity: 0; }
}