:root{
  --bg:#0f1115; --panel:#171a21; --muted:#a1a6b3; --text:#f5f7ff; --brand:#4da3ff; --accent:#70ffa1;
  --radius:16px; --space:16px; --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Arial}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--space)}
.site-header,.site-footer{padding:24px 0;background:transparent}
h1,h2{margin:8px 0 6px}
.muted{color:var(--muted)}
.hint{color:var(--muted);margin-top:8px}
.hint.small{font-size:12px}

.uploader, .editor, .frames{
  background:var(--panel);border-radius:var(--radius);padding:24px;margin:16px 0;box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.file-label{
  display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border:1px dashed #3a3f4b;border-radius:12px;cursor:pointer;
}
.file-label input{display:none}
.file-label span{color:#fff}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); /* wider cards */
  gap:20px;
  margin-top:16px;
}
.frame-card{
  background:#12151b;border:1px solid #2a2f3b;border-radius:12px;padding:8px;cursor:pointer;transition:transform .12s ease,border .12s ease
}
.frame-card:hover{transform:translateY(-2px);border-color:#3b4252}
.frame-card img{
  width:100%;
  height:220px;          
  object-fit:contain;
  background:#0c0e13;
  border-radius:8px;
  transition:transform .2s ease;
}
.frame-card:hover img{
  transform:scale(1.05); /* subtle zoom on hover */
}
.frame-name{font-size:12px;color:var(--muted);margin-top:6px}
.canvas-wrap{
  width:100%;max-width:560px;margin:0 auto;border-radius:16px;overflow:hidden;background:#0c0e13;border:1px solid #242a36
}
canvas{width:100%;height:auto;display:block}
.controls{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin:16px 0
}
.control{display:flex;flex-direction:column;gap:6px;min-width:160px}
input[type="range"]{width:100%}
.actions{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap}
button{
  appearance:none;border:none;border-radius:12px;padding:12px 16px;background:#242a36;color:#fff;cursor:pointer
}
button.primary{background:var(--brand)}
button:disabled{opacity:.5;cursor:not-allowed}
.hidden{display:none}

/* Voting Demo CTA */
.voting-demo-link {
  text-align: left;
  margin: 1.2rem 0 1.8rem;
}

.voting-demo-btn {
  display: inline-block;
  background: #0059ff;
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: all 0.2s ease;
}

.voting-demo-btn:hover {
  background: #003fcc;
  transform: translateY(-2px);
}

.voting-demo-btn:active {
  transform: translateY(0px);
}


@media (max-width:640px){
  .frame-card img{height:180px}
}