* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #0c0c0d;
  --ink:     #f0ede8;
  --ink2:    #8a8680;
  --ink3:    #4a4845;
  --surface: #141416;
  --border:  rgba(240,237,232,0.07);
  --gold:    #c9a96e;
  --gold2:   #e8c98a;
  --red:     #c96e6e;
  --mono:    'DM Mono', monospace;
  --serif:   'Fraunces', Georgia, serif;
}
body { background:var(--bg); color:var(--ink); font-family:var(--mono); min-height:100vh; overflow-x:hidden; }
body::before {
  content:''; position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:.03; pointer-events:none; z-index:9999;
}

/* LOADING */
#loading { display:none; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:16px; }
#loading.show { display:flex; }
.spinner { width:30px; height:30px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
.loading-title { font-family:var(--serif); font-size:20px; font-weight:300; font-style:italic; color:var(--gold); }
.loading-sub { font-size:12px; color:var(--ink3); letter-spacing:.05em; }

/* WELCOME */
#welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:40px 20px; text-align:center; }
.eyebrow { font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.w-title { font-family:var(--serif); font-size:clamp(48px,7vw,88px); font-weight:300; line-height:.9; color:var(--ink); margin-bottom:10px; }
.w-title em { font-style:italic; color:var(--gold); }
.w-sub { font-size:12px; color:var(--ink3); margin-bottom:44px; letter-spacing:.05em; }

.btn-retomar {
  display:none; align-items:center; gap:14px;
  background:rgba(201,169,110,.08); border:1px solid rgba(201,169,110,.3);
  border-radius:4px; padding:16px 24px; cursor:pointer;
  max-width:400px; width:100%; margin-bottom:14px; text-align:left;
  transition:background .2s, border-color .2s;
}
.btn-retomar:hover { background:rgba(201,169,110,.14); border-color:var(--gold); }
.btn-retomar.show { display:flex; }
.btn-retomar-icon { font-size:20px; flex-shrink:0; }
.retomar-title { font-family:var(--serif); font-size:15px; font-weight:300; color:var(--gold); display:block; margin-bottom:2px; }
.retomar-desc { font-size:11px; color:var(--ink3); display:block; }

.divider { display:none; align-items:center; gap:12px; max-width:400px; width:100%; margin-bottom:14px; }
.divider.show { display:flex; }
.div-line { flex:1; height:1px; background:var(--border); }
.div-text { font-size:11px; color:var(--ink3); letter-spacing:.08em; }

.pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:400px; width:100%; margin-bottom:20px; }
.pick-btn {
  background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:22px 18px; cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s;
}
.pick-btn:hover { border-color:var(--gold); }
.pick-btn.selected { border-color:var(--gold); background:rgba(201,169,110,.06); }
.pick-btn.selected .pick-icon { color:var(--gold); }
.pick-icon { font-size:20px; margin-bottom:10px; color:var(--ink3); display:block; transition:color .2s; }
.pick-label { font-family:var(--serif); font-size:16px; font-weight:300; color:var(--ink); display:block; margin-bottom:3px; }
.pick-desc { font-size:11px; color:var(--ink3); display:block; }
.pick-status { font-size:11px; color:var(--gold); margin-top:6px; display:block; min-height:14px; }

.btn-enter {
  background:var(--gold); color:#0c0c0d; border:none; border-radius:3px;
  padding:12px 34px; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; transition:background .2s, transform .1s;
  opacity:.4; pointer-events:none;
}
.btn-enter.ready { opacity:1; pointer-events:all; }
.btn-enter.ready:hover { background:var(--gold2); transform:translateY(-1px); }
.w-note { font-size:11px; color:var(--ink3); margin-top:16px; max-width:340px; line-height:1.7; }

/* APP */
#app { display:none; flex-direction:column; min-height:100vh; }
#app.show { display:flex; }

.topbar {
  display:flex; align-items:center; padding:0 24px; height:50px;
  border-bottom:1px solid var(--border); background:var(--bg);
  position:sticky; top:0; z-index:50; gap:0; flex-shrink:0;
}
.topbar-logo { font-family:var(--serif); font-size:16px; font-weight:300; font-style:italic; color:var(--gold); margin-right:28px; flex-shrink:0; }
.tabs { display:flex; flex:1; }
.tab-btn {
  background:none; border:none; padding:0 18px; height:50px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink3); cursor:pointer; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s; margin-bottom:-1px;
}
.tab-btn:hover { color:var(--ink2); }
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold); }

.topbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.t-search { display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:0 10px; }
.t-search input { background:none; border:none; outline:none; color:var(--ink); font-family:var(--mono); font-size:12px; padding:6px 0; width:170px; }
.t-search input::placeholder { color:var(--ink3); }
.s-ic { color:var(--ink3); font-size:13px; }
.btn-trocar { background:none; border:1px solid var(--border); border-radius:3px; padding:5px 10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); cursor:pointer; transition:color .15s, border-color .15s; }
.btn-trocar:hover { color:var(--gold); border-color:var(--gold); }

.page { display:none; flex:1; flex-direction:column; }
.page.active { display:flex; }

.sec-header { padding:20px 24px 12px; display:flex; align-items:baseline; gap:10px; flex-shrink:0; }
.sec-title { font-family:var(--serif); font-size:24px; font-weight:300; color:var(--ink); }
.sec-count { font-size:11px; color:var(--ink3); }

/* Cursos */
.cursos-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px; background:var(--border); border-top:1px solid var(--border);
  overflow-y:auto; flex:1; align-content:start;
}
.curso-card {
  background:var(--bg); padding:16px 18px; cursor:pointer; position:relative;
  transition:background .15s; overflow:hidden; animation:fadeUp .3s ease both;
}
.curso-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); transform:scaleY(0); transition:transform .2s; transform-origin:bottom;
}
.curso-card:hover { background:var(--surface); }
.curso-card:hover::before { transform:scaleY(1); }
.c-num { font-size:10px; color:var(--ink3); letter-spacing:.08em; margin-bottom:7px; }
.c-nome { font-family:var(--serif); font-size:14px; font-weight:300; color:var(--ink); margin-bottom:9px; line-height:1.3; }
.c-foot { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ink3); }
.c-prog { font-size:10px; color:var(--gold); background:rgba(201,169,110,.1); padding:2px 6px; border-radius:2px; }

/* Player */
#player-view { display:none; flex:1; }
#player-view.on { display:flex; }
.pl-main { flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--border); overflow:hidden; }
.pl-topbar { display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.back-btn { background:none; border:none; font-family:var(--mono); font-size:11px; color:var(--gold); cursor:pointer; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:5px; padding:0; flex-shrink:0; }
.back-btn:hover { color:var(--gold2); }
.pl-curso-nome { font-family:var(--serif); font-size:13px; font-weight:300; font-style:italic; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.video-wrap { background:#000; flex-shrink:0; }
video { width:100%; display:block; max-height:60vh; }
.pl-info { padding:13px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.pl-vtitle { font-family:var(--serif); font-size:17px; font-weight:300; color:var(--ink); margin-bottom:3px; }
.pl-vmeta { font-size:11px; color:var(--ink3); }

/* Playlist sidebar */
.playlist { width:290px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.pl-head { padding:11px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.pl-head-title { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }
.pl-head-count { font-size:11px; color:var(--ink3); }
.pl-body { overflow-y:auto; flex:1; }
.pl-group { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); padding:10px 16px 3px; border-top:1px solid var(--border); }
.pl-item { display:flex; align-items:center; gap:9px; padding:9px 16px; cursor:pointer; border-left:2px solid transparent; transition:background .1s; }
.pl-item:hover { background:var(--surface); }
.pl-item.playing { background:rgba(201,169,110,.06); border-left-color:var(--gold); }
.pl-n { font-size:10px; color:var(--ink3); min-width:18px; text-align:right; flex-shrink:0; }
.pl-nm { font-size:12px; color:var(--ink2); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-item.playing .pl-nm { color:var(--ink); }

/* Livros */
.livros-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.livros-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px; background:var(--border); border-top:1px solid var(--border);
  overflow-y:auto; flex:1; align-content:start;
}
.livro-card { background:var(--bg); padding:16px 14px; cursor:pointer; display:flex; flex-direction:column; transition:background .15s; position:relative; animation:fadeUp .3s ease both; }
.livro-card:hover { background:var(--surface); }
.l-spine { position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--red); opacity:0; transition:opacity .2s; }
.livro-card:hover .l-spine { opacity:1; }
.l-icon { font-size:22px; margin-bottom:10px; opacity:.3; }
.l-nome { font-family:var(--serif); font-size:12px; font-weight:300; color:var(--ink); line-height:1.45; margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.l-pasta { font-size:10px; color:var(--ink3); margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* PDF */
#pdf-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
#pdf-view.on { display:flex; }
.pdf-topbar { display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.pdf-titulo { font-family:var(--serif); font-size:13px; font-weight:300; font-style:italic; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
iframe.pdf-frame { flex:1; border:none; }

.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink3); padding:60px 20px; text-align:center; flex:1; }
.empty-icon { font-size:36px; opacity:.2; }
.empty-text { font-size:13px; line-height:1.8; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin   { to{transform:rotate(360deg)} }

/* ── FAVORITO ── */
.fav-btn {
  position:absolute; top:8px; right:10px;
  background:none; border:none; font-size:14px;
  color:var(--ink3); cursor:pointer; padding:2px;
  transition:color .15s, transform .15s; z-index:2;
  line-height:1;
}
.fav-btn:hover { color:var(--red); transform:scale(1.2); }
.fav-btn.on { color:var(--red); }
.curso-card, .livro-card { position:relative; }

/* ── BARRA DE PROGRESSO DO CURSO ── */
.c-prog-bar {
  height:2px; background:var(--border);
  border-radius:2px; margin:8px 0 6px; overflow:hidden;
}
.c-prog-fill {
  height:100%; background:var(--gold);
  border-radius:2px; width:0%;
  transition:width .4s ease;
}
.c-pct { font-size:10px; color:var(--ink3); }
.c-foot { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--ink3); gap:6px; flex-wrap:wrap; }

/* ── PLAYLIST CHECK ── */
.pl-check {
  background:none; border:1.5px solid var(--ink3);
  border-radius:2px; width:16px; height:16px;
  font-size:9px; color:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .15s; padding:0;
}
.pl-check:hover { border-color:var(--gold); color:var(--gold); }
.pl-check.on { background:var(--gold); border-color:var(--gold); color:#0c0c0d; }
.pl-item.done .pl-nm { text-decoration:line-through; color:var(--ink3); opacity:.6; }

/* ── CONTROLES DO PLAYER ── */
.pl-controls {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.ctrl-btn {
  background:var(--surface); border:1px solid var(--border);
  border-radius:3px; padding:5px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink2); cursor:pointer; transition:color .15s, border-color .15s;
  white-space:nowrap;
}
.ctrl-btn:hover { color:var(--gold); border-color:var(--gold); }
.ctrl-btn.active { color:var(--gold); border-color:rgba(201,169,110,.4); background:rgba(201,169,110,.08); }
.ctrl-sep { flex:1; }
.kbd-hint { font-size:10px; color:var(--ink3); letter-spacing:.04em; }

/* ── PAINEL DE NOTAS ── */
.notas-panel {
  display:none; flex-direction:column;
  border-top:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
  max-height:200px;
}
.notas-panel.open { display:flex; }
.notas-head { display:flex; align-items:center; justify-content:space-between; padding:8px 18px; border-bottom:1px solid var(--border); }
.notas-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); }
.notas-save { background:var(--gold); color:#0c0c0d; border:none; border-radius:2px; padding:4px 10px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .15s; }
.notas-save:hover { background:var(--gold2); }
#nota-text { flex:1; background:none; border:none; outline:none; color:var(--ink); font-family:var(--mono); font-size:12px; padding:12px 18px; resize:none; line-height:1.7; }
#nota-text::placeholder { color:var(--ink3); }

/* ── HISTÓRICO ── */
.hist-grid { display:flex; flex-direction:column; overflow-y:auto; flex:1; }
.hist-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 24px; cursor:pointer; border-bottom:1px solid var(--border);
  transition:background .15s;
}
.hist-item:hover { background:var(--surface); }
.hist-icon { font-size:16px; flex-shrink:0; opacity:.6; }
.hist-info { flex:1; min-width:0; }
.hist-nome { font-family:var(--serif); font-size:13px; font-weight:300; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-extra { font-size:11px; color:var(--ink3); margin-top:1px; }
.hist-ago { font-size:11px; color:var(--ink3); flex-shrink:0; }

/* ── TAB DISABLED ── */
.tab-btn.tab-disabled { opacity:.3; pointer-events:none; }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--surface); border:1px solid var(--border);
  color:var(--ink2); font-family:var(--mono); font-size:12px;
  padding:9px 20px; border-radius:3px;
  opacity:0; transition:opacity .25s, transform .25s;
  pointer-events:none; z-index:9998; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }