:root{
  --bg:#0b1020; --card:#111a2d; --text:#ecf2ff; --muted:#a4b1ce; --accent:#ffd166; --border:#223055;
}

/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}

.container{max-width:1000px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}

/* Botões e badges */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--border);background:#2b3e6c;color:#fff;
  text-decoration:none;font-weight:700;line-height:1;cursor:pointer
}
.btn:active{transform:translateY(1px)}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--border);
  background:#0d1529;color:var(--muted);font-size:12px;line-height:1
}

/* Navbar */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.nav-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Grid do dashboard */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-card{display:flex;flex-direction:column}
.thumb{display:block;width:100%;height:200px;object-fit:cover;background:#0d1529;border-radius:10px;border:1px solid var(--border)}
.thumb.locked{filter:grayscale(1) brightness(.75)}

/* Listas (ebooks/kids) */
.ebook-row,.kid-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.ebook-cover,.kid-cover{width:110px;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#0d1529;flex-shrink:0}
.ebook-title,.kid-title{font-weight:700;font-size:1rem}
.ebook-actions,.kid-actions{margin-left:auto}
audio{width:100%;max-width:100%}

/* Grade de álbuns */
.albums{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.album-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;text-decoration:none;color:#fff;display:block}
.album-cover{width:100%;height:220px;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:#0d1529}

/* Hero do álbum */
.album-hero{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.hero-cover{width:260px;height:260px;object-fit:cover;border-radius:14px;border:1px solid var(--border);background:#0d1529}

/* Plan badge — curto e destacado */
.plan-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  font-weight:800; line-height:1; white-space:nowrap; text-transform:lowercase;
  border:1px solid var(--border);
}
.plan-basic{
  color:#2dde88;background:rgba(23,66,46,.45);border-color:#2dde88;
  box-shadow:inset 0 0 0 1px rgba(45,222,136,.25), 0 0 10px rgba(45,222,136,.12);
}
.plan-premium{
  color:#1d1600;background:linear-gradient(135deg,#f7d36b 0%,#e9b949 55%,#caa63a 100%);
  border-color:#e9b949; text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 12px rgba(233,185,73,.25);
}

/* ------------ Breakpoints ------------ */

/* <= 1024px: 2 colunas no dashboard, 3 colunas nos álbuns */
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .albums{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* <= 768px: mobile principal */
@media (max-width:768px){
  .container{padding-left:14px;padding-right:14px}

  /* Navbar em duas linhas */
  .nav{flex-direction:column;align-items:stretch}
  .nav > .nav-actions{width:100%;display:flex;flex-wrap:wrap}
  .nav > .nav-actions:first-of-type{justify-content:flex-start}
  .nav > .nav-actions:last-of-type{justify-content:space-between}
  .nav .btn{flex:0 0 auto}

  /* Dashboard: 1 card por linha e imagem maior */
  .grid-3{grid-template-columns:1fr}
  .thumb{height:240px}

  /* Inputs e formulários no topo */
  .nav input[type="text"], .nav input[type="search"], .nav input[type="email"]{
    flex:1 1 100%; min-width:0; width:100%;
    padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:#0d1529; color:#fff;
  }
  .nav form{width:100%}

  /* Linhas viram colunas e botões crescem */
  .ebook-row,.kid-row{flex-direction:column;align-items:flex-start}
  .ebook-cover,.kid-cover{width:180px;height:240px}
  .ebook-actions,.kid-actions{margin-left:0;margin-top:8px}
  .dash-card .btn-row .btn{flex:1 1 auto;width:100%}

  /* Álbuns: 2 colunas */
  .albums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .album-cover{height:260px}

  /* Hero do álbum ocupa largura inteira */
  .hero-cover{width:100%;height:300px}
}

/* <= 480px: refinamentos finais */
@media (max-width:480px){
  .thumb{height:260px}
  .albums{grid-template-columns:1fr}
  .album-cover{height:300px}
}