/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&family=Roboto:wght@300;400;500&display=swap');

/* Frameworks in a lower-priority layer */
@layer framework {
  @import url('https://unpkg.com/ungrid/ungrid.min.css');               /* tiny grid */
  @import url('https://unpkg.com/purecss@2.2.0/build/pure-min.css');    /* lean forms */
  @import url('https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css'); /* components */
}

/* Your stuff wins */
@layer base, components, utilities;

/* Base dark theme */
@layer base {
  :root {
    --bg:#0c0c0c; --bg-elev:#141414; --text:#e6e6e6; --muted:#a8a8a8;
    --accent:#ffffff; --border:#2a2a2a; --link:#f5f5f5;
  }
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);line-height:1.6;
    font-family: Roboto, system-ui, -apple-system, Segoe UI, Noto Sans, Arial, sans-serif;}
  h1,h2,h3,h4,h5,h6{font-family: Inter, sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
  a{color:var(--link)} a:hover{text-decoration:underline}
  .container{max-width:1024px;margin:0 auto;padding:0 1rem}
  .center{text-align:center}.small{font-size:.9rem;color:var(--muted)}
  nav{background:var(--bg-elev);border-bottom:1px solid var(--border)}
  .logo{height:36px}
  .site-footer{margin-top:3rem;padding:2rem 0;border-top:1px solid var(--border);background:var(--bg-elev)}
  .card{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:1rem}
  .btn,button,input[type=submit]{background:var(--text);color:#000;border:none;border-radius:4px;padding:.6rem 1rem;cursor:pointer}
  .btn.outline{background:transparent;color:var(--text);border:1px solid var(--border)}
  input,textarea,select{background:#0f0f0f;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.6rem;width:100%}
  .grid{display:grid;gap:1rem}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}
  @media (max-width:800px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
}
@layer components {
  .album-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
  .thumbs{display:flex;gap:.5rem;margin-top:.5rem}
  .thumbs img{width:60px;height:60px;object-fit:cover;border:1px solid var(--border);border-radius:4px}
  .overlay{position:relative}.overlay::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
}
@layer utilities {.mt-8{margin-top:2rem}.mb-2{margin-bottom:.5rem}.hidden{display:none}}