@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Playfair+Display:ital,wght@0,500;0,700;1,600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --bg:#0e0b0f; --bg-alt:#18121a; --bg-card:#1d1620;
  --text:#e8dfc8; --text-dim:#a89a8a;
  --blood:#9b2226; --blood-bright:#c23b3b;
  --violet:#5b2a5e; --glow:#4e6b5c; --glow-bright:#7fa88f;
  --border:#3a2a30; --radius:3px;
}
[data-theme="lectura"]{
  --bg:#ece4d3; --bg-alt:#ddd2ba; --bg-card:#e6dcc6;
  --text:#241b1d; --text-dim:#5c4f45;
  --blood:#7a1f22; --blood-bright:#8f2b2b;
  --violet:#4a2350; --glow:#3d5a4d; --glow-bright:#2f4a3f;
  --border:#b8a988;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Crimson Text',serif;transition:background .4s,color .4s;}
h1,h2,h3,.display{font-family:'Playfair Display',serif;}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:inherit;}
::selection{background:var(--blood);color:#fff;}

header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--bg) 80%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.logo{font-family:'UnifrakturCook',cursive;font-size:26px;color:var(--text);text-shadow:0 0 6px var(--blood),0 0 14px var(--blood);animation:flicker 5s infinite;}
@keyframes flicker{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;text-shadow:0 0 6px var(--blood),0 0 14px var(--blood);}
  20%,24%,55%{opacity:.82;text-shadow:0 0 2px var(--blood);}
}
nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
nav a{color:var(--text-dim);font-family:'IBM Plex Mono',monospace;font-size:14px;}
nav a:hover{color:var(--blood-bright);}
.btn{border:1px solid var(--border);background:var(--bg-alt);color:var(--text);padding:8px 14px;border-radius:var(--radius);font-size:14px;transition:.2s;display:inline-block;}
.btn:hover{border-color:var(--blood-bright);color:var(--blood-bright);}
.btn-primary{background:var(--blood);border-color:var(--blood);color:#f4ece1;}
.btn-primary:hover{background:var(--blood-bright);color:#fff;}
.user-chip{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--violet);border-radius:20px;font-size:14px;}
.user-chip b{color:var(--glow-bright);}

.hero{padding:80px 20px 60px;text-align:center;position:relative;overflow:hidden;background-size:cover;background-position:center;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,8,10,.55), rgba(10,8,10,.9));}
.hero-inner{position:relative;z-index:2;}
.hero h1{font-size:clamp(28px,5vw,50px);margin:0 0 14px;font-style:italic;}
.hero p{color:var(--text-dim);max-width:560px;margin:0 auto 26px;font-size:19px;}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.filter-bar{max-width:1100px;margin:0 auto;padding:30px 20px 20px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--border);background:var(--bg-alt);color:var(--text-dim);padding:6px 12px;border-radius:20px;font-size:13px;transition:.2s;}
.chip.active,.chip:hover{border-color:var(--glow-bright);color:var(--glow-bright);}
select{background:var(--bg-alt);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:var(--radius);font-size:14px;}

.feed{max-width:1100px;margin:0 auto;padding:10px 20px 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;transition:.2s;}
.card:hover{transform:translateY(-3px);border-color:var(--blood);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.badge{position:absolute;top:-10px;left:14px;background:var(--violet);color:#f4ece1;font-size:11px;padding:3px 9px;border-radius:12px;}
.card img{width:100%;height:150px;object-fit:cover;border-radius:2px;border:1px solid var(--border);}
.card h3{margin:6px 0 0;font-size:20px;}
.card p{color:var(--text-dim);font-size:15px;margin:0;line-height:1.4;max-height:4.2em;overflow:hidden;}
.meta-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);margin-top:auto;}
.stats{display:flex;gap:12px;}
.empty{text-align:center;padding:60px 20px;color:var(--text-dim);grid-column:1/-1;}

.container-narrow{max-width:760px;margin:0 auto;padding:30px 20px 80px;}
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px;}
input[type=text],input[type=password],input[type=email],textarea,select.full{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px;border-radius:var(--radius);font-family:'Crimson Text',serif;font-size:15px;}
textarea{min-height:160px;resize:vertical;}
.error-msg{background:rgba(155,34,38,.18);border:1px solid var(--blood);color:var(--blood-bright);padding:10px 12px;border-radius:var(--radius);font-size:14px;margin-bottom:16px;}
.info-banner{background:rgba(91,42,94,.25);border:1px solid var(--violet);padding:10px 12px;border-radius:var(--radius);font-size:13px;color:var(--text-dim);margin-bottom:16px;}
.file-hint{font-size:12px;color:var(--text-dim);margin-top:4px;}

.detail-hero{font-size:12px;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;}
.detail-body{white-space:pre-wrap;line-height:1.7;font-size:18px;margin:20px 0;}
.detail-img{max-width:100%;border-radius:2px;border:1px solid var(--border);margin:14px 0;}
.detail-video{max-width:100%;border-radius:2px;border:1px solid var(--border);margin:14px 0;}
.stars{display:flex;gap:4px;font-size:26px;}
.star{color:var(--border);background:none;border:none;padding:0;}
.star.filled{color:var(--blood-bright);}
.rating-row{display:flex;align-items:center;gap:14px;margin:16px 0;flex-wrap:wrap;}
.comment{border-top:1px solid var(--border);padding:12px 0;}
.comment b{color:var(--glow-bright);}
.comment span{color:var(--text-dim);font-size:12px;}
.share-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}

footer{text-align:center;padding:30px;color:var(--text-dim);font-size:13px;border-top:1px solid var(--border);}

@media(max-width:640px){
  header{padding:12px 14px;}
  .hero{padding:50px 16px 40px;}
  .filter-bar{flex-direction:column;align-items:stretch;}
  .feed{grid-template-columns:1fr;padding:10px 14px 60px;}
}