:root{
  --bg:#0f0f10;
  --card:#181818;
  --muted:#bdbdbd;
  --accent:#4CAF50;
  --accent-2:#45a049;
  --menu:#2a2a3a;
  --radius:12px;
  --maxwidth:1100px;
  --text-color: #eee;
}

/* Temas de Leitura */
body.theme-light {
  --bg: #f4f4f4;
  --card: #ffffff;
  --text-color: #333;
  --muted: #555;
  --menu: #e0e0e0;
}
body.theme-sepia {
  --bg: #fbf0d9;
  --card: #f8e7c9;
  --text-color: #5b4636;
  --muted: #8a6c4c;
  --menu: #e6d5b8;
}

/* base */
html,body{height:100%;margin:0;font-family:"Inter","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text-color);scroll-behavior:smooth; transition: background 0.3s, color 0.3s;}
.wrap{max-width:var(--maxwidth);margin:0 auto;padding:28px;}

/* header */
header{text-align:center;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:16px;padding:28px 16px;margin-bottom:30px;}
h1{margin:0;font-size:2.2rem;letter-spacing:0.4px;background:linear-gradient(90deg,#4CAF50,#7FFF00);-webkit-background-clip:text;color:transparent;}
p.lead{margin:10px 0 0;color:var(--muted);}

/* Botão do Menu */
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1100;
  background: var(--menu);
  color: var(--accent);
  border: none;
  border-radius: 8px;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* menu */
nav.menu{position:fixed;top:0;left:0;height:100%;width:260px;background:var(--menu);box-shadow:4px 0 14px rgba(0,0,0,0.6);display:flex;flex-direction:column;align-items:center;padding-top:40px;z-index:1000;transform: translateX(-100%);transition:transform .3s ease;}
nav.menu.active { transform: translateX(0); }
nav.menu h2{color:var(--accent);margin-bottom:20px;}
nav.menu a{color:#ccc;text-decoration:none;margin:8px 0;font-weight:600;padding:8px 12px;border-radius:8px;width:90%;text-align:center;}
nav.menu a:hover{color:#fff;background:rgba(0,0,0,0.12);}
body.theme-light nav.menu a { color: #555; }
body.theme-sepia nav.menu a { color: #5b4636; }


/* main */
main{transition:margin-left .3s ease; padding-top: 60px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:18px 0;}
.chapter{background: var(--card); border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(0,0,0,0.6);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:120px;border:1px solid rgba(255,255,255,0.02);transition:transform .3s ease,box-shadow .3s ease;}
.chapter:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.7);}
.chapter h2{margin:0 0 10px;font-size:1.05rem}
.chapter .actions{text-align:center}
.btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600;transition:background .2s;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--accent-2);}

/* Páginas secundárias e de capítulo */
.page-content { background: var(--card); padding: 28px; border-radius: var(--radius); }
.pix-section, .instructions, .character-list { margin-top: 30px; }
.pix-code { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; word-wrap: break-word; }
.character-item { margin-bottom: 20px; }
.character-item h3 { color: var(--accent); }

/* footer */
footer{text-align:center;margin:40px 0;color:var(--muted);}

/* responsive */
@media(max-width:700px){
  .wrap { padding: 15px; }
  main { padding-top: 50px; }
}