/* ===========================
   LyricChain.app — style.css
   Graphite + Neon Cyan theme
   =========================== */

:root{ --bg1:#0f0f10; --bg2:#181616; --accent:#ffb300; --accent2:#ff9800; --text:#fff7e6; --muted:#c9bd9e; --glass:rgba(255,255,255,0.06); --glass2:rgba(255,255,255,0.12); --shadow:0 10px 30px rgba(0,0,0,0.45); }

/* BACKGROUND: layered gradient + animated glow */
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -20%, rgba(40,240,255,0.10) 0, transparent 60%),
    radial-gradient(1200px 800px at 120% 10%, rgba(24,199,212,0.10) 0, transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  position: relative;
  overflow-x:hidden;
}

/* Subtle animated cyan glow blobs */
body::before{
  content:"";
  position:fixed; inset:-200px;
  background:
    radial-gradient(circle at 30% 20%, rgba(40,240,255,0.10) 0 20%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(24,199,212,0.10) 0 18%, transparent 50%);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-1;
}
@keyframes drift{
  from{ transform: translate3d(-2%, -1%, 0) scale(1); }
  to  { transform: translate3d(1%, 2%, 0)  scale(1.05); }
}

/* Typography + base */
h1,h2,h3{margin:0}

/* Glass card */
.glass{
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass2);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Top bar */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; margin:16px;
}
.topbar h1{
  letter-spacing:.5px;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(40,240,255,0.15);
}

.spacer{flex:1}

/* Buttons */
.ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--glass2);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.ghost:hover{ background:var(--glass2) }

button{ transition: transform .04s ease }
button:active{ transform: translateY(1px) }

.full{
  width:100%; padding:12px 14px; border:none; border-radius:10px; font-weight:700; cursor:pointer;
  background: linear-gradient(90deg, var(--accent), #7ff7ff); color:#00353a;
  box-shadow: 0 6px 18px rgba(40,240,255,0.25);
}
.full:hover{ background: linear-gradient(90deg, var(--accent2), var(--accent)) }

/* Layout */
.main{ padding:16px; display:flex; flex-direction:column; gap:16px }

/* Rules panel */
.rules{ padding:16px }
.rules-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:10px }
.rules-body ul{ margin:0; padding-left:20px; color:var(--muted) }

/* Share row */
.share{ display:flex; gap:8px }
.share input{
  flex:1; padding:10px; border-radius:8px; border:1px solid var(--glass2);
  background:rgba(8,17,22,0.6); color:var(--text);
}

/* Lyrics area */
.lyrics{ padding:16px }
.lyrics-list{
  display:flex; flex-direction:column; gap:8px; padding:8px; min-height:160px;
  background:rgba(5,10,14,0.55); border-radius:12px; outline:1px solid rgba(40,240,255,0.08);
}
.lyrics-list p{
  margin:0; padding:10px 12px; border-radius:10px; animation:fadeIn .35s ease;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
}
.lyrics-list p:hover{ box-shadow: 0 0 0 1px rgba(40,240,255,0.25) inset }

.empty{ color:var(--muted) }

/* Add line form */
.add-line{ margin-top:12px; display:flex; gap:8px; align-items:center }
.add-line input{
  flex:1; padding:12px 14px; border:1px solid var(--glass2); border-radius:10px;
  background:rgba(8,17,22,0.6); color:var(--text);
}
.add-line input:focus{
  outline:none; border-color: rgba(40,240,255,0.6);
  box-shadow: 0 0 0 3px rgba(40,240,255,0.18);
}
.add-line button{
  padding:12px 16px; border:none; border-radius:10px; cursor:pointer; font-weight:700;
  background: linear-gradient(90deg, var(--accent), #7ff7ff);
  color:#00353a; text-shadow:0 1px 0 rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(40,240,255,0.25);
  transition: transform .06s ease, box-shadow .2s ease;
}
.add-line button:hover{ background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow:0 8px 22px rgba(40,240,255,0.35) }
.add-line button:active{ transform: translateY(1px) }

/* Errors */
.error{
  margin-top:10px; padding:10px 12px; border-left:4px solid #ff5252;
  background:rgba(255,82,82,0.12); border-radius:8px;
}

/* Modal */
.modal{ position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,0.55) }
.modal.hidden{ display:none }
.modal-content{ width:min(720px, 92vw); padding:16px }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }

/* Animations */
@keyframes fadeIn { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* --- Optional theme presets (commented) ---


*/