:root{--bg:#0c0f14;--card:#131a22;--muted:#8aa0b5;--text:#e9f0f7;--accent:#4cc3ff;--bad:#ff4c6a;--ok:#66ffb3;}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
body{margin:0;background:var(--bg);color:var(--text);} 
.bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.card{width:min(520px,100%);background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 18px 16px;box-shadow:0 18px 50px rgba(0,0,0,.5);} 
h1{margin:0 0 6px;font-size:22px;}
.muted{color:var(--muted);} .small{font-size:12px;}
.form{display:grid;gap:10px;margin-top:14px;}
label{font-size:13px;color:var(--muted);} 
input,textarea{width:100%;background:#0b1118;color:var(--text);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:10px 12px;outline:none;}
textarea{resize:vertical;}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b1118;color:var(--text);cursor:pointer;text-decoration:none;}
button:hover,.btn:hover{border-color:rgba(255,255,255,.22);} 
.btn.google{background:linear-gradient(180deg, rgba(76,195,255,.18), rgba(76,195,255,.05));border-color:rgba(76,195,255,.35);} 
.btn.danger{border-color:rgba(255,76,106,.5);} 
.alert{background:rgba(255,76,106,.12);border:1px solid rgba(255,76,106,.35);padding:10px 12px;border-radius:10px;margin-top:12px;}
.sep{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:12px;}
.sep:before,.sep:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08);} 
.footer{position:fixed;bottom:10px;left:0;right:0;text-align:center;color:rgba(255,255,255,.35);font-size:12px;}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);backdrop-filter: blur(6px);position:sticky;top:0;z-index:10;}
.brand{font-weight:700;}
.top-actions{display:flex;gap:10px;align-items:center;}
.wrap{padding:16px;display:grid;gap:14px;max-width:1100px;margin:0 auto;}
.panel{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;}
.row{display:flex;align-items:center;} .between{justify-content:space-between;} .gap{gap:10px;} .grow{flex:1;}
.list{display:grid;gap:10px;margin-top:10px;}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.15);} 
.item-title{font-weight:650;}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:12px;}
.pill.bad{border-color:rgba(255,76,106,.45);color:#ff9aab;}

.link{color:var(--accent);text-decoration:none;}
.link:hover{text-decoration:underline;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width: 900px){.grid2{grid-template-columns:1fr;}}

.preview{width:100%;max-height:320px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#0b1118;}
.box{padding:10px;border:1px dashed rgba(255,255,255,.16);border-radius:12px;background:rgba(0,0,0,.10);}

.chapters{display:grid;gap:12px;margin-top:10px;}
.chapter{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(0,0,0,.15);} 

/* --- Custom Audio Player (ap*) --- */
:root{
  --ap-bg: rgba(0,0,0,0.25);
  --ap-border: rgba(255,255,255,0.12);
  --ap-btn-bg: rgba(255,255,255,0.10);
  --ap-btn-fg: rgba(255,255,255,0.92);
  --ap-btn-border: rgba(255,255,255,0.16);
  --ap-play-bg: rgba(40,160,90,0.55);
  --ap-pause-bg: rgba(200,150,40,0.55);
  --ap-stop-bg: rgba(200,70,70,0.55);
  --ap-time: rgba(255,255,255,0.85);
}

.apWrap{
  background: var(--ap-bg);
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  padding: 10px;
}

.apRow{ display:flex; align-items:center; }
.apControls{ gap:8px; justify-content:flex-start; }

.apBtn{
  appearance:none;
  border: 1px solid var(--ap-btn-border);
  background: var(--ap-btn-bg);
  color: var(--ap-btn-fg);
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 700;
}
.apBtn:hover{ filter: brightness(1.08); }
.apBtn:active{ transform: translateY(1px); }

.apBtnPlay{ background: var(--ap-play-bg); }
.apBtnPause{ background: var(--ap-pause-bg); }
.apBtnStop{ background: var(--ap-stop-bg); }

.apTime{
  margin-left:auto;
  color: var(--ap-time);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.apSeek{
  width: 100%;
  margin-top: 10px;
}