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

.subtitles-page{
  --max:980px; --fg:#111; --muted:#6b6b6b; --line:#eaeaea; --brand:#111;
  --pro:#19d3c5; --pro-d:#0fb5a8; --blue:#00b0ff; --blue-d:#0086c6;
  --ok:#0a7f3f; --okbg:#f2fcf6; --warn:#a30; --card:#fff;
}

/* Reset-ish (scoped) */
.subtitles-page *{ box-sizing:border-box; }

.subtitles-page{
  margin:0;
  font:16px/1.6 system-ui;
  color:var(--fg);
  background:#fafafa;
}

/* Container */
.subtitles-page .container{
  max-width:var(--max);
  margin:0 auto;
  padding:20px;
}

.subtitles-page h1{ margin:0 0 8px; }
.subtitles-page .subtle{ color:var(--muted); font-size:14px; }

/* Section */
.subtitles-page .section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  margin:18px 0;
  padding:18px;
}

.subtitles-page .section .title{
  font-weight:800;
  margin:0 0 10px;
}

/* Buttons */
.subtitles-page button{
  padding:12px 16px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  border-radius:12px;
  cursor:pointer;
}

.subtitles-page button.ghost{
  background:#fff;
  color:var(--brand);
}

.subtitles-page button.small{
  padding:8px 12px;
  border-radius:10px;
  font-size:14px;
}

/* Account row */
.subtitles-page .account-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.subtitles-page #email{
  flex:1;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  min-width:240px;
}

.subtitles-page .status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid #d9f0e2;
  background:var(--okbg);
  color:var(--ok);
  font-size:13px;
}

/* Pricing */
.subtitles-page .pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:10px 0;
}

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

.subtitles-page .plan{
  border-radius:18px;
  color:#fff;
  padding:20px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:160px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}

.subtitles-page .plan:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.subtitles-page .plan .name{ font-weight:700; opacity:.95; }
.subtitles-page .plan .price{ font-size:32px; font-weight:800; letter-spacing:.2px; }
.subtitles-page .plan .sub{ opacity:.95; font-size:13px; }

.subtitles-page .plan button{
  align-self:flex-start;
  border-color:#fff;
  background:#fff;
  color:#111;
  border-radius:10px;
  padding:10px 14px;
}

.subtitles-page .plan .best{
  position:absolute;
  top:10px;
  right:10px;
  background:#fff;
  color:#111;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
}

.subtitles-page .plan.free{ background:#444; }
.subtitles-page .plan.pro{ background:linear-gradient(135deg,var(--pro),var(--pro-d)); }
.subtitles-page .plan.max{ background:linear-gradient(135deg,var(--blue),var(--blue-d)); }

/* Studio */
.subtitles-page .studio-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

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

.subtitles-page .card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:16px;
}

/* Dropzone */
.subtitles-page .drop{
  border:2px dashed #cfd3d6;
  border-radius:14px;
  background:#fcfcfc;
  padding:24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}

.subtitles-page .drop:hover{
  border-color:#999;
  background:#f9f9f9;
}

.subtitles-page .drop.drag{
  border-color:#111;
  background:#f3f3f3;
}

.subtitles-page .drop .ico{
  font-size:40px;
  line-height:1;
}

.subtitles-page .drop .lead{
  font-weight:700;
  margin:6px 0;
}

.subtitles-page .drop .hint{
  color:var(--muted);
  font-size:13px;
}

.subtitles-page .drop input[type=file]{ display:none; }

.subtitles-page .filepill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  margin-top:10px;
}

.subtitles-page .filepill button{
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
  padding:0 0 0 4px;
}

/* Select */
.subtitles-page #lang{
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
}

/* Progress */
.subtitles-page .progress{
  height:10px;
  background:#f0f0f0;
  border-radius:999px;
  overflow:hidden;
}

.subtitles-page .progress > span{
  display:block;
  height:100%;
  width:0%;
  background:#222;
  transition:width .2s;
}

/* Messages & downloads */
.subtitles-page #msg{
  white-space:pre-line;
  color:#333;
  margin:8px 0;
}

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

.subtitles-page .bad{ color:var(--warn); }
.subtitles-page .dim{ opacity:.75; }

/* Lock overlay when quota is 0 */
.subtitles-page .locked{ position:relative; }
.subtitles-page .locked::after{
  content:"Subscribe or come back tomorrow";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.75);
  color:#111;
  font-weight:800;
  border-radius:14px;
  letter-spacing:.2px;
}

/* FAQ */
.subtitles-page .faq{ margin-top:8px; }

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

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

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

.subtitles-page .qa .q{ font-weight:700; }

.subtitles-page .qa[open]{
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.subtitles-page .qa .a{
  border-top:1px solid var(--line);
  padding:12px 14px;
  color:#333;
  background:#fcfcfc;
}