/* ===== The Enlighter - Science Media Library ===== */
:root{
  --paper: #ffffff;          /* champagne / old newsprint */
  --paper-2: #ffffff;
  --ink:#1c1a13;
  --ink-soft:#3b362a;
  --muted:#6b6450;
  --rule:#333;
  --accent:#8a1a1a;         /* deep newspaper red */
  --gold:#a07a26;
  --free:#1f6b3a;
  --paid:#8a1a1a;
  --shadow:0 10px 30px rgba(40,30,10,.12);
  --radius:10px;
  --serif:'Playfair Display', 'Times New Roman', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  /*background-color:var(--paper);*/
  background-color: #ffffff !important;
  /*background-image:*/
  /*  radial-gradient(rgba(60,40,10,.06) 1px, transparent 1px),*/
  /*  radial-gradient(rgba(60,40,10,.05) 1px, transparent 1px),*/
  /*  linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.04)),*/
  /*  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");*/
  /*background-size: 3px 3px, 5px 5px, auto, 240px 240px;*/
  /*background-position: 0 0, 1px 2px, 0 0, 0 0;*/
  min-height:100vh;
  line-height:1.55;
}
.search-wishlist{
    display: none !important;
}

/* Typography */
h1,h2,h3,h4,h5,.serif{font-family:"Times New Roman", Times, serif; letter-spacing:.2px}
h1{font-weight:800}
.section-title{
  font-family: "Times New Roman", Times, serif; font-weight:800;
  font-size:clamp(1.4rem, 2vw + 1rem, 2rem);
  border-bottom:2px double var(--rule);
  padding-bottom:.5rem; margin-bottom:1.25rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.25em; font-size:.72rem;
  color:var(--muted); font-weight:600;
}

/* ===== Header / Masthead ===== */
.masthead{
  /*background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));*/
  border-bottom:3px double var(--ink);
}
.masthead-top{
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:var(--ink-soft);
  padding:.45rem 0; border-bottom:1px solid var(--rule);
}
.masthead-main{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 0 .9rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink);
}
.brand-logo{
  width:54px;height:54px;border-radius:50%;
  background:var(--paper-2);
  display:grid;place-items:center;
  border:2px solid var(--ink);
  font-family:var(--serif); font-weight:900; font-size:1.4rem;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.brand-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand-title{font-family:var(--serif); font-weight:900; font-size:1.9rem; line-height:1}
.brand-sub{font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted)}

.search-wrap{flex:1; max-width:560px; margin:0 auto;}
.search-bar{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--rule); border-radius:999px;
  padding:.35rem .35rem .35rem 1rem; box-shadow:var(--shadow);
}
.search-bar input{
  border:0; outline:0; background:transparent; flex:1; font-size:.95rem; color:var(--ink);
}
.search-bar button{
  border:0; background:var(--ink); color:#fff; border-radius:999px;
  padding:.5rem .95rem; font-weight:600; cursor:pointer;
}
.search-bar button:hover{background:var(--accent)}

.header-actions{display:flex; align-items:center; gap:.4rem}
.icon-btn{
  background:transparent;border:1px solid var(--rule);color:var(--ink);
  width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;
  text-decoration:none;
}
.icon-btn:hover{background:var(--paper-2)}

.nav-rule{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.25);
}
.main-nav{
  display:flex; gap:1.25rem; align-items:center; justify-content:center;
  padding:.6rem 0; flex-wrap:wrap;
}
.main-nav a{
  color:var(--ink); text-decoration:none; font-weight:600;
  text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
  padding:.25rem .1rem; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active{border-color:var(--accent); color:var(--accent)}

.menu-toggle{display:none}
@media (max-width: 860px){
  .masthead-main{flex-wrap:wrap; gap:.75rem}
  .search-wrap{order:3; flex-basis:100%; max-width:none}
  .menu-toggle{display:inline-grid}
  .main-nav{display:none; flex-direction:column; align-items:flex-start; padding:.5rem 1rem 1rem}
  .main-nav.open{display:flex}
  .main-nav a{width:100%; padding:.5rem 0; border-bottom:1px dashed var(--rule)}
}

/* ===== Hero ===== */
.hero{
  border:1px solid var(--rule); border-radius:var(--radius);
  background:rgba(255,255,255,.35);
  padding:clamp(1.25rem, 3vw, 2.5rem);
  box-shadow:var(--shadow);
  margin:1.5rem 0;
}
.hero h1{font-size:clamp(1.8rem, 3vw + 1rem, 3.2rem); margin:0 0 .5rem}
.hero p{color:var(--ink-soft); max-width:64ch}
.hero .cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}

/* ===== Buttons ===== */
.btn-news{
  background:var(--ink); color:#fff; border:0; border-radius:8px;
  padding:.65rem 1.05rem; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
}
.btn-news:hover{background:var(--accent); color:#fff}
.btn-outline{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  border-radius:8px; padding:.6rem 1rem; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-danger-soft{
  background:#fff; color:var(--accent); border:1px solid var(--accent);
  border-radius:8px; padding:.45rem .8rem; font-weight:600; cursor:pointer;
}
.btn-danger-soft:hover{background:var(--accent); color:#fff}

/* ===== Category cards ===== */
.cat-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));}
.cat-card{
  background:rgba(255,255,255,.55); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1rem; text-align:center;
  text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(60,40,10,.06);
}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.cat-icon{
  width:54px;height:54px;border-radius:50%;
  background:var(--paper-2); display:grid;place-items:center;
  margin:0 auto .6rem; color:var(--accent); font-size:1.3rem;
  border:1px solid var(--rule);
}
.cat-card h5{margin:.2rem 0 .15rem; font-family:var(--serif)}
.cat-card small{color:var(--muted)}

/* ===== Media cards ===== */
.media-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
.media-card{
  background:#fff; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 4px 14px rgba(60,40,10,.08); transition:transform .15s ease;
}
.media-card:hover{transform:translateY(-3px)}
.thumb{
  aspect-ratio:18/10; background:linear-gradient(135deg,#d9c89a,#b89b5e);
  position:relative; display:grid; place-items:center; color:#fff;
  font-family:var(--serif); font-size:1.6rem;
  border-bottom:1px solid var(--rule);
}
.thumb i{font-size:2.4rem; opacity:.9}
.badge-pill{
  position:absolute; top:.55rem; left:.55rem;
  font-size:.7rem; padding:.2rem .55rem; border-radius:999px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:#fff; color:var(--ink); border:1px solid var(--rule);
}
.badge-free{background:var(--free); color:#fff; border-color:var(--free)}
.badge-paid{background:var(--paid); color:#fff; border-color:var(--paid)}
.wishlist{
  position:absolute; top:.55rem; right:.55rem;
  width:34px;height:34px;border-radius:50%; border:1px solid var(--rule);
  background:#fff; display:none !important;place-items:center; cursor:pointer; color:var(--muted);
}
.wishlist.active{color:var(--accent); border-color:var(--accent)}
.wishlist:hover{color:var(--accent)}
.wishlist i{
    font-size: 20px;
}
.media-body{padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1}
.media-body .cat{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.15em}
.media-body h6{margin:0; font-family:var(--serif); font-size:1.05rem; line-height:1.3}
.media-meta{display:flex; justify-content:end; align-items:center; margin-top:auto; padding-top:.5rem; font-size:.85rem; color:var(--ink-soft)}
.price{font-weight:700}
.price.free{color:var(--free)}
.price.paid{color:var(--paid)}

/* ===== Forms / Auth ===== */
.auth-wrap{
  max-width:440px; margin:3rem auto; background:#fff;
  border:1px solid var(--rule); border-radius:var(--radius); padding:2rem;
  box-shadow:var(--shadow);
}
.auth-wrap h2{font-family:var(--serif); margin-bottom:.25rem}
.auth-wrap p.lead{color:var(--muted); margin-bottom:1.25rem; font-size:.92rem}
.form-label{font-weight:600; font-size:.85rem; color:var(--ink-soft)}
.form-control, .form-select{
  background:#fff !important; border:1px solid var(--rule) !important;
  border-radius:8px !important; color:var(--ink) !important;
}
.form-control:focus, .form-select:focus{
  border-color:var(--ink) !important; box-shadow:0 0 0 .15rem rgba(28,26,19,.12) !important;
}
.divider{display:flex; align-items:center; gap:.5rem; color:var(--muted); margin:1rem 0; font-size:.8rem}
.divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--rule)}

/* ===== Dashboard ===== */
.dash-layout{display:grid; grid-template-columns: 240px 1fr; gap:1.25rem; margin:1.5rem 0}
.dash-side{
  background:#fff; border:1px solid var(--rule);
  border-radius:var(--radius); padding:1rem; height:fit-content; box-shadow:var(--shadow);
}
.dash-side .user{
  display:flex; align-items:center; gap:.6rem; padding-bottom:.75rem; border-bottom:1px dashed var(--rule); margin-bottom:.75rem;
}
.avatar{
  width:42px;height:42px;border-radius:50%; background:var(--paper-2);
  display:grid; place-items:center; font-weight:700; color:var(--ink); border:1px solid var(--rule);
}
.side-nav{display:flex; flex-direction:column; gap:.25rem}
.side-nav a, .side-nav button{
  display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem;
  border-radius:8px; color:var(--ink); text-decoration:none; background:transparent;
  border:0; text-align:left; font-weight:600; font-size:.9rem; cursor:pointer; width:100%;
}
.side-nav a:hover, .side-nav button:hover{background:var(--paper-2)}
.side-nav .active{background:var(--ink); color:#fff}
.side-nav .active i{color:#fff}
.dash-main{
  background:rgba(255,253,245,.7); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
}
.tab-panel{display:none}
.tab-panel.active{display:block; animation: fade .2s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

@media (max-width: 860px){
  .dash-layout{grid-template-columns:1fr}
  .brand img{
      width: 165px !important;
  }
}
#id-wishlist{
    position: static !important;
}
/* ===== Admin ===== */
.admin-layout{display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 70px)}
.admin-side{
  background:#1c1a13; color:#f1e7c8; padding:1.25rem 1rem;min-height: 100vh;
}
.admin-side .brand-title{color:#f1e7c8; font-size:1.3rem}
.admin-side .side-nav a{color:#e7ddbf}
.admin-side .side-nav a:hover{background:rgba(255,255,255,.06)}
.admin-side .side-nav a.active{background:var(--accent); color:#fff}
.admin-main{padding:1.5rem; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; padding:.75rem 1rem;
  border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:1rem;
}
.stat-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); margin-bottom:1.25rem}
.stat-card{
  background:#fff; border:1px solid var(--rule);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}
.stat-card .label{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.15em}
.stat-card .value{font-family:var(--serif); font-size:1.8rem; font-weight:800}
.stat-card .delta{font-size:.78rem; color:var(--free)}

.table-news{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
}
.table-news th, .table-news td{padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--rule); font-size:.92rem}
.table-news th{background:var(--paper-2); font-family:var(--serif); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem}
.table-news tr:last-child td{border-bottom:0}
.table-actions{display:flex; gap:.35rem; flex-wrap:wrap}
.chip{
  display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700;
  background:var(--paper-2); color:var(--ink); border:1px solid var(--rule);
}
.chip.free{background:var(--free); color:#fff; border-color:var(--free)}
.chip.paid{background:var(--paid); color:#fff; border-color:var(--paid)}

.admin-burger{display:none}
@media (max-width: 860px){
  .admin-layout{grid-template-columns:1fr}
  .admin-side{display:none}
  .admin-side.open{display:block}
  .admin-burger{display:inline-grid}
  .table-wrap{overflow-x:auto}
}

/* ===== Details page ===== */
.details-grid{display:grid;
/*grid-template-columns: 1.6fr 1fr; */
gap:1.5rem;
margin:1.5rem 0}
@media (max-width: 860px){ .details-grid{grid-template-columns:1fr} }
.player{
  aspect-ratio:24/6; background:linear-gradient(135deg,#2b2618,#5e4b22);
  border-radius:var(--radius); display:grid; place-items:center; color:#f1e7c8;
  border:1px solid var(--rule); position:relative; overflow:hidden;
}
.player i{font-size:4rem; opacity:.9}
.purchase-card{
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius);
  padding:1.25rem; box-shadow:var(--shadow); position:sticky; top:1rem;
}
.purchase-card .big-price{font-family:var(--serif); font-size:2.2rem; font-weight:800}

/* ===== Footer ===== */
.footer{
  margin-top:3rem; border-top:3px double #ffffff; padding:1.25rem 0;
  font-size:.85rem; color:#fff; text-align:center;background: #333;
}
.footer .container-news .muted{
    color: #fff !important;
}
/* ===== Utilities ===== */
.container-news{max-width:1300px; margin:0 auto; padding:0 1rem}
.row-gap{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.muted{color:var(--muted)}
.divider-double{border-top:3px double var(--rule); margin:1.5rem 0}
.empty{padding:2rem; text-align:center; color:var(--muted)}