@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
  --bg:#0f0f0f;
  --panel:#1a1a1a;
  --border:#2a2a2a;
  --text:#e7e7e7;
  --muted:#7d7d7d;
  --accent:#6ab3b1;
  --accent-hover:#7bc5c3;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-family:"Montserrat",system-ui,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow-x:hidden;
  
}

.info-btn{
  position:fixed;
  top:20px;
  right:20px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:20;
}
.info-btn svg{fill: #fff; stroke: #fff;transition:transform .2s ease,opacity .2s ease; border-radius: 50%;}
.info-btn:hover svg{transform:scale(1.1);opacity:.85;  background:var(--accent-hover);}

.dropzone{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  cursor:pointer;
  text-align:center;
  z-index:5;
  transition: all .5s;
}
.dropzone:hover,.dropzone.hover{
  background:#181818;
  transform:scale(1.02);
}
.dropzone.hide{opacity:0;pointer-events:none}
.dropzone p{
  color:var(--muted);
  font-size:1.2rem;
  font-family:"Inter",sans-serif;
  pointer-events:none;
  user-select: none;
}

.thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:2rem;
}
.page-card{
  width:150px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px;
  overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.page-card:hover{border-color:var(--accent);transform:scale(1.03)}
.page-card.dragging{opacity:.5;transform:scale(.97);border-color:var(--accent)}
.page-label{font-size:.8rem;color:var(--muted);margin-bottom:6px}
.page-card canvas{
  display:block;
  max-width:100%;
  border-radius:4px;
  background:#121212;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.thumb-tools{
  display:flex;
  justify-content:space-between;
  padding:4px 2px;
  margin-top:6px;
}
.thumb-tools button{
  background:none;
  border:none;
  color:var(--muted);
  font-size:.95rem;
  cursor:pointer;
  transition:color .2s,transform .2s;
}
.thumb-tools button:hover{color:var(--accent);transform:scale(1.15)}
.download-btn{
  margin-top:1.5rem;
  background:var(--accent);
  color:#0f0f0f;
  border:none;
  border-radius:6px;
  padding:.7rem 1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease,transform .2s ease;
}
.download-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10;
}
.modal.hidden{display:none}
.modal-content{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.5rem;
  text-align:center;
  width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
#previewCanvas{
  width:100%;
  background:#121212;
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:1rem;
}
.modal-actions{display:flex;gap:.6rem;justify-content:center;margin-bottom:1rem}
button{
  background:var(--accent);
  color:#0f0f0f;
  border:none;
  border-radius:6px;
  padding:.6rem 1.2rem;
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease,transform .15s ease;
}
button:not(#infoBtn):hover{background:var(--accent-hover);transform:translateY(-2px)}
.close-btn{background:none;color:var(--muted);padding:.5rem 1rem}
.close-btn:hover{color:var(--text)}

.info-content{
  max-width:480px;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:2rem;
  color:var(--text);
  box-shadow:0 10px 35px rgba(0,0,0,.6);
  animation:fadeInUp .4s ease;
}
.info-content h2{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:1.6rem;
  text-align:center;
  margin:0 0 1.5rem;
}
.info-content .highlight{color:var(--accent)}
.info-steps{display:flex;flex-direction:column;gap:1rem}
.step{display:flex;align-items:flex-start;gap:.75rem}
.step-icon{font-size:1.3rem;line-height:1.4rem;margin-top:2px}
.step-text{font-family:"Inter",sans-serif;font-size:.95rem;color:var(--muted);line-height:1.5}
.step-text strong{color:var(--text)}
.info-footer{text-align:center;margin-top:1.8rem}
.info-footer .tagline{color:var(--muted);font-size:.85rem;margin-bottom:.8rem;letter-spacing:.5px}
.info-footer .close-btn{background:var(--accent);color:#0f0f0f;font-weight:600;border:none;border-radius:6px;padding:.6rem 1.4rem;cursor:pointer;transition:background .25s ease,transform .15s ease}
.info-footer .close-btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.merge-content{max-width:400px;text-align:center}
.merge-list{
  margin:1rem 0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.5rem;
  max-height:180px;
  overflow-y:auto;
}
.merge-item{padding:.4rem .6rem;border-bottom:1px solid var(--border);font-family:"Inter",sans-serif;color:var(--text)}
.merge-item:last-child{border-bottom:none}
.merge-actions{display:flex;justify-content:center;gap:.6rem;margin-top:1rem}
.merge-options{margin-top:1rem;font-size:.9rem;color:var(--muted);font-family:"Inter",sans-serif}

.page-nav{
  position:fixed;
  bottom:80px;
  left:0;right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  font-family:"Inter",sans-serif;
  color:var(--muted);
  z-index:15;
}
.nav-btn{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:6px;
  padding:.4rem 1rem;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease,color .2s ease;
}
.nav-btn:hover{background:var(--accent);color:#0f0f0f;transform:translateY(-2px)}
.nav-status{font-size:.9rem;color:var(--muted)}

.tooltip{
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:.6rem 1rem;
  border-radius:6px;
  font-size:.9rem;
  font-family:"Inter",sans-serif;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  opacity:0;
  transition:opacity .6s ease,transform .6s ease;
  pointer-events:none;
  z-index:99;
}
.tooltip.show{opacity:1;transform:translateX(-50%) translateY(-5px)}

footer.bottom-bar{
  position:fixed;
  bottom:20px;
  left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 2rem;
  color:var(--muted);
  font-family:"Inter",sans-serif;
  font-size:.9rem;
  pointer-events:none;
  z-index:12;
}
.left-info{color:var(--muted);pointer-events:auto}
.center-info a {color:var(--muted);pointer-events:auto; text-decoration: none; margin-left: -100px;}
.right-brand{text-align:right;pointer-events:auto}
.brand-title{margin:0;font-size:1.4rem;font-weight:600;color:var(--text);letter-spacing:.5px}
.brand-tagline{margin:0;color:var(--muted);font-size:.85rem}

#saveFilename{
  width:100%;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.6rem .8rem;
  font-family:"Inter",sans-serif;
  font-size:.95rem;
  margin-bottom:1rem;
}
#saveFilename:focus{outline:none;border-color:var(--accent)}

@media(max-width:720px){
  .modal-content{width:90vw;max-width:420px}
  .thumbs{gap:.8rem}
  .page-card{width:140px}
  footer.bottom-bar{
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    text-align:center;
    font-size:.85rem;
  }
}

.bmc-circle{
  position:fixed;
  top:1rem;
  left:1rem;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  text-decoration:none;
  isolation:isolate;
  z-index:9999;
}
.bmc-ring{
  position:absolute;
  inset:0;
  animation:bmc-spin 12s linear infinite;
}
.bmc-text{
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  fill:var(--accent);
  user-select: none;
}
.bmc-center{
  width:56%;
  height:56%;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.1),rgba(0,0,0,0)),
             linear-gradient(180deg,#1b1b2a,#0b0b10);
  box-shadow:0 0 0 1px #0b0b10 inset,0 0 12px var(--accent);
  display:grid;
  place-items:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.bmc-cup{width:60%;height:60%;display:block}
.bmc-circle:hover .bmc-center{
  transform:scale(1.1);
  box-shadow:0 0 0 1px #0b0b10 inset,0 0 20px var(--accent);
}
@keyframes bmc-spin{to{transform:rotate(360deg)}}
.bmc-circle{opacity:0;animation:fadeInBMC .6s ease forwards .5s}
@keyframes fadeInBMC{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

.seo-summary{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  visibility:hidden;
}