*{box-sizing:border-box}
:root{--green:#39ff14;--green2:#18b900;--bg:#040604;--card:rgba(8,14,10,.86);--text:#f4fff2;--muted:#b8c7b4;--line:rgba(57,255,20,.25)}
html,body{
margin:0;
min-height:100%;
font-family:Arial,Helvetica,sans-serif;
background:
linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.78)),
url('background.jpg');
background-size:cover;
background-position:center;
background-attachment:fixed;
color:var(--text)
}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:100% 4px;pointer-events:none;mix-blend-mode:screen}
.app-shell{width:min(980px,94vw);margin:0 auto;padding:22px 0 18px}
.hero{text-align:center;padding:8px 0 12px}
.logo{width:min(390px,88vw);height:auto;filter:drop-shadow(0 0 18px rgba(57,255,20,.38))}
h1{margin:10px 0 8px;font-size:clamp(30px,7vw,62px);line-height:1;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 8px rgba(57,255,20,.75),0 0 32px rgba(57,255,20,.35)}
.lead{margin:0;color:var(--muted);font-size:clamp(15px,3.5vw,19px)}
.search-card{margin:18px auto 0;padding:clamp(16px,4vw,28px);background:linear-gradient(180deg,rgba(9,16,11,.94),rgba(3,4,3,.92));border:1px solid var(--line);border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 18px 70px rgba(0,0,0,.55),0 0 50px rgba(57,255,20,.10)}
label{display:block;margin-bottom:10px;color:var(--green);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
input[type=search],input[type=password],input[type=text],input[type=file]{width:100%;border:1px solid rgba(57,255,20,.38);border-radius:15px;background:#050805;color:var(--text);padding:15px 16px;font-size:18px;outline:none;box-shadow:0 0 18px rgba(57,255,20,.08) inset}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(57,255,20,.12),0 0 22px rgba(57,255,20,.10) inset}
button,.btn{border:0;border-radius:15px;background:linear-gradient(180deg,var(--green),var(--green2));color:#001800;font-weight:900;padding:14px 18px;font-size:16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 22px rgba(57,255,20,.25)}
button:hover,.btn:hover{filter:brightness(1.08)}
.hint{color:var(--muted);margin:10px 0 0}
.results{margin-top:20px;display:grid;gap:10px}
.count{color:var(--green);font-weight:800}
.song,.empty{padding:14px 16px;border:1px solid rgba(57,255,20,.18);border-radius:16px;background:rgba(255,255,255,.045)}
.song{font-size:18px}
.song strong{color:#fff}
.empty{color:var(--muted);text-align:center}
footer{text-align:center;color:var(--muted);padding:18px 10px 28px}
footer a{color:var(--green);font-weight:800;text-decoration:none}
.empty a{
color:#ffffff;
text-decoration:none;
font-weight:700;
}
.admin-top{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.admin-top img{width:190px;max-width:52vw}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.panel h2{margin:0 0 10px;color:var(--green)}
.panel p{color:var(--muted)}
.msg{padding:12px 14px;border-radius:14px;margin:0 0 14px;background:rgba(57,255,20,.12);border:1px solid rgba(57,255,20,.28)}
.err{background:rgba(255,50,50,.12);border-color:rgba(255,80,80,.35)}
.small{font-size:13px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:760px){
  .search-row{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  h1{font-size:clamp(28px,10vw,44px)}
  .app-shell{padding-top:10px}
}
@media (orientation:landscape) and (max-height:520px){
  .app-shell{width:min(1060px,96vw);padding-top:6px}
  .hero{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:18px;padding:4px 0}
  .logo{width:min(220px,32vw)}
  .search-card{margin-top:8px}
  h1{font-size:clamp(26px,6vw,46px)}
}
@media (max-width: 600px){

  h1{
    font-size:42px;
    line-height:1.1;
  }

  .logo{
    width:min(320px,92vw);
  }

  .search-card{
    padding:18px;
  }

  input[type=search]{
    font-size:18px;
    padding:16px;
  }

  .song{
    font-size:18px;
  }

  .seo-block{
    font-size:16px;
    line-height:1.6;
  }

}
.song.song-editable{
  position:relative !important;
  display:block !important;
  padding:14px 70px 14px 16px !important;
}

.song.song-editable .song-text{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
}

.song.song-editable .song-marquee{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  animation:none !important;
  transform:none !important;
}

.song.song-editable .edit-icon{
  position:absolute !important;
  right:18px !important;
  top:16px !important;
  display:block !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-size:24px !important;
  line-height:1 !important;
  z-index:9999 !important;
}
.delete-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.delete-box{
  width:min(360px,92vw);
  background:linear-gradient(180deg,rgba(9,16,11,.98),rgba(3,4,3,.98));
  border:1px solid rgba(57,255,20,.45);
  border-radius:22px;
  padding:22px;
  text-align:center;
  box-shadow:0 0 40px rgba(57,255,20,.22);
}

.delete-box h2{
  margin:0 0 10px;
  color:#ffffff;
  font-size:24px;
}

.delete-box p{
  color:#b8b8b8;
  margin:0 0 18px;
  line-height:1.5;
}

.delete-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}

.delete-confirm,
.delete-cancel{
  min-width:110px;
  border:none;
  border-radius:12px;
  padding:12px 18px;
  cursor:pointer;
  font-size:16px;
  background:#111;
  color:#fff;
  transition:.2s ease;
}

.delete-confirm.active,
.delete-cancel.active{
  outline:2px solid #39ff14;
  box-shadow:0 0 18px rgba(57,255,20,.75);
}

.song{
  transition:
    opacity .35s ease,
    transform .35s ease,
    max-height .35s ease,
    margin .35s ease,
    padding .35s ease;
}

.song-removing{
  opacity:0;
  transform:translateX(40px);
  max-height:0;
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin:0 !important;
  overflow:hidden;
}

.floating-search{
  position:fixed;
  top:10px;
  left:50%;
  transform:translate(-50%, -130%);
  width:min(900px,94vw);
  z-index:99999;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(9,16,11,.98),rgba(3,4,3,.98));
  border:1px solid rgba(57,255,20,.45);
  border-radius:20px;
  padding:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 30px rgba(57,255,20,.16);
  transition:opacity .2s ease, transform .2s ease;
}

.floating-search.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}

.floating-search label{
  font-size:13px;
  margin-bottom:6px;
}

.floating-search input[type=search]{
  padding:12px 14px;
  font-size:17px;
}

.results-card{
  margin-top:18px !important;
}

@media (max-width:600px){
  .floating-search{
    top:6px;
    width:96vw;
    padding:10px;
    border-radius:16px;
  }

  .floating-search label{
    font-size:12px;
  }

  .floating-search input[type=search]{
    font-size:16px;
    padding:11px 12px;
  }
}