/* public/style.css */
:root{
  --primary:#6985c0;
  --bg:#f6f7fb;
  --muted:#666;
  --black:#111;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Syne", Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--black);
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:#fff;
  border-bottom:2px solid #ddd;
}

.logo-border{
  border:3px solid #000;
  padding:6px 18px;
  position:relative;
  overflow:hidden;
  display:inline-block;
  border-radius:6px;
  background: #fff;
}

.logo-gradient{
  font-weight:700;
  font-size:20px;
  background:linear-gradient(90deg,#ff8a00,#e52e71,#00c6ff,#8e2de2);
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: gradMove 6s linear infinite;
  position:relative;
  z-index:2;
}

.logo-spark{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.0) 8px);
  mix-blend-mode:screen;
  opacity:0.85;
  animation: sparkMove 2.5s linear infinite;
}

@keyframes gradMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes sparkMove{
  0%{transform:translate(-30%,-30%)}
  50%{transform:translate(40%,40%) scale(1.1)}
  100%{transform:translate(-30%,-30%)}
}

.header-right a{
  margin-left:18px;
  text-decoration:none;
  color:var(--black);
  font-weight:600;
}
main{padding:40px 16px; display:flex; justify-content:center;}
.box{
  width:100%;
  max-width:820px;
  background:#fff;
  border-radius:10px;
  padding:22px;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
  text-align:left;
}

h1{margin:0 0 12px 0; color:var(--primary);}

.form-row{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
input#licenseKey{
  flex:1;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #d0d4df;
  font-size:15px;
}
button#verifyBtn{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
button#verifyBtn:hover{filter:brightness(.95)}

.status{
  margin-top:8px;
  font-weight:600;
  color:var(--muted);
}

.output{
  margin-top:16px;
  background:#f4f6fb;
  padding:12px;
  border-radius:8px;
  max-height:380px;
  overflow:auto;
  font-family:monospace;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}

/* Make a nicer grid view for license details (injection via JS will create it) */
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.kv{padding:8px; background:#fff; border-radius:6px; border:1px solid #e6e8f0}
.kv b{display:block; color:#333; margin-bottom:6px; font-weight:700}
.kv small{color:#666}

/* footer */
footer{margin-top:18px; padding:14px 8px; text-align:center; background:#111; color:#fff;}