/* =========================================
   burnin-subtitles.css
   Scope: .burnin-page
========================================= */

.burnin-page{
  /* THEME: Cinematic (black + yellow) */
  --bg:#0a0a0a; --panel:#121212; --panel2:#161616;
  --ink:#eaeaea; --muted:#a0a0a0; --line:#242424;
  --accent:#ffd400; --accent-d:#c7a800;
  --good:#2dd4bf; --bad:#ff4d4d;
  --chip:#1c1c1c; --shade:0 10px 30px rgba(0,0,0,.35);
}

.burnin-page *{ box-sizing:border-box; }

.burnin-page{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif;
}

.burnin-page .container{
  max-width:1080px;
  margin:0 auto;
  padding:22px;
}

/* Hero */
.burnin-page .hero{
  background:linear-gradient(180deg,#0b0b0b,#0a0a0a);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px;
  box-shadow:var(--shade);
}

.burnin-page .hero h1{
  margin:0 0 6px;
  font-size:32px;
  letter-spacing:.2px;
}

.burnin-page .hero .tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:var(--chip);
  border:1px solid var(--line);
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
}

.burnin-page .small{ font-size:13px; color:var(--muted); }

.burnin-page .kbd{
  background:#1a1a1a;
  border:1px solid #2b2b2b;
  padding:2px 8px;
  border-radius:6px;
  font-size:12px;
  color:#cfcfcf;
}

.burnin-page .brand-chip{
  display:inline-block;
  font-weight:900;
  letter-spacing:.5px;
  color:#000;
  background:var(--accent);
  padding:2px 8px;
  border-radius:6px;
}

/* Pricing */
.burnin-page .pricing-strip{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:16px;
}

@media (max-width:900px){
  .burnin-page .pricing-strip{ grid-template-columns:1fr; }
}

.burnin-page .plan{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:140px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.burnin-page .plan .name{ font-weight:800; color:#fff; }
.burnin-page .plan .price{ font-size:28px; font-weight:900; }
.burnin-page .plan .sub{ color:var(--muted); font-size:13px; }

.burnin-page .plan .cta{
  margin-top:auto;
  align-self:flex-start;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#000;
  font-weight:800;
}

.burnin-page .plan .cta.ghost{
  background:transparent;
  color:var(--accent);
}

.burnin-page .plan.best{
  outline:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(255,212,0,.1);
}

.burnin-page .plan .badge{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--accent);
  color:#000;
  font-weight:900;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
}

/* Sections */
.burnin-page .section{ margin-top:18px; }
.burnin-page .section .title{
  font-weight:900;
  letter-spacing:.2px;
  margin:0 0 10px;
}

.burnin-page .panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shade);
}

/* Grid */
.burnin-page .grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}

@media (max-width:900px){
  .burnin-page .grid{ grid-template-columns:1fr; }
}

/* Drop */
.burnin-page .drop{
  border:2px dashed #2a2a2a;
  border-radius:14px;
  background:var(--panel2);
  padding:22px;
  text-align:center;
  cursor:pointer;
  transition:.15s;
}

.burnin-page .drop:hover{ border-color:#555; }
.burnin-page .drop.drag{ border-color:var(--accent); }

.burnin-page .drop .ico{ font-size:40px; }
.burnin-page .drop input[type=file]{ display:none; }

/* Controls */
.burnin-page .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:12px 0;
}

.burnin-page select,
.burnin-page input[type=email]{
  background:#0e0e0e;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  outline:none;
}

.burnin-page button{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#000;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.burnin-page button.ghost{
  background:transparent;
  color:var(--accent);
}

.burnin-page button[disabled]{
  opacity:.5;
  cursor:not-allowed;
}

/* Progress */
.burnin-page .progress{
  height:10px;
  background:#161616;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #1f1f1f;
}

.burnin-page .progress > span{
  display:block;
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .2s;
}

.burnin-page .bar-note{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.burnin-page .actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

/* Pills */
.burnin-page .pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:#0f1a0f;
  border:1px solid #1e3828;
  color:#b6f1d8;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
}

.burnin-page .pill.bad{
  background:#1b0d0d;
  border-color:#432121;
  color:#ff9d9d;
}

/* Locked overlay */
.burnin-page .locked{ position:relative; }
.burnin-page .locked::after{
  content:"Subscribe or come back tomorrow";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(0deg, rgba(10,10,10,.9), rgba(10,10,10,.7));
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  border-radius:14px;
}

/* Tips / FAQ */
.burnin-page .tip-list{ margin:6px 0 0 18px; }

.burnin-page details.qa{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  margin:10px 0;
  overflow:hidden;
}

.burnin-page details.qa > summary{
  cursor:pointer;
  padding:12px 14px;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}

.burnin-page details.qa > summary::-webkit-details-marker{ display:none; }

.burnin-page details.qa .a{
  border-top:1px solid var(--line);
  padding:12px 14px;
  color:#ddd;
  background:#0f0f0f;
}