/*
 * main.css — Chalchitra Vaachana ISL Translator
 * Author      : Gautham K. Dileep
 * Organization: Amrita CREATE, Amrita Vishwa Vidyapeetham
 * Date        : 2026-05-14
 * Copyright   : © 2026 AmritaCREATE. All rights reserved.
 */
    :root{
      /* ChalaChithra Vaachana brand theme — matches chalachitravaachana.org */
      --bg:#f5f8fa;
      --card:#ffffff;
      --card2:#fff5f8;
      --text:#162033;
      --muted:#55627a;
      --stroke:rgba(176,0,78,0.10);
      --stroke2:rgba(176,0,78,0.22);
      --accent:#b0004e;
      --accent2:#b50246;
      --accent3:#c8005c;
      --ok:#16a34a;
      --warn:#ea580c;
      --btnText:#ffffff;
      --btnRadius:18px;
      --btnGrad:linear-gradient(135deg, #b0004e 0%, #c8005c 100%);
      --btnShadow:0 8px 24px rgba(176,0,78,0.28);
      --softGrad:linear-gradient(180deg, rgba(176,0,78,0.06), rgba(245,248,250,0.95));
    }

    *{ box-sizing:border-box; }
select{
  background:linear-gradient(180deg, rgba(15,118,110,0.08), rgba(255,255,255,0.96)), var(--card2);
  color:var(--text);
  border:1px solid rgba(15,118,110,0.28);
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  font-weight:700;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(15,118,110,0.16);
}
select:focus{
  border-color:#14b8a6;
  box-shadow:0 0 0 3px rgba(15,118,110,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
#speechLanguage{
  min-width:170px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(180deg, rgba(15,118,110,0.20), rgba(15,118,110,0.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0, right 12px center;
  background-size:auto, 16px;
  padding-right:42px;
}
.waveWrap{
  display:none;
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(15,118,110,0.20);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(15,118,110,0.08), rgba(255,255,255,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 34px rgba(8,12,24,0.28);
}
.waveWrap.active{ display:block; }
.waveLabel{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f766e;
  margin-bottom:10px;
  font-weight:800;
}
.waveBars{
  height:86px;
  display:flex;
  align-items:flex-end;
  gap:5px;
}
.waveBar{
  flex:1;
  min-width:6px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(100,220,210,.98), rgba(15,118,110,.9));
  box-shadow:0 0 14px rgba(15,118,110,.16);
  transform-origin:center bottom;
  transition:height .09s linear, transform .12s ease, opacity .12s ease;
  opacity:.88;
}
.waveWrap.active .waveBar{
  animation:wavePulse 1.1s ease-in-out infinite;
}
@keyframes wavePulse{
  0%,100%{ opacity:.74; }
  50%{ opacity:1; }
}
    body{
      margin:0;
      font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(900px 420px at 15% -10%, rgba(176,0,78,0.05), transparent 62%),
        radial-gradient(700px 420px at 95% 0%, rgba(176,0,78,0.03), transparent 60%),
        var(--bg);
      color:var(--text);
    }

    .topbar{
      position:sticky; top:0; z-index:20;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.90);
      border-bottom: 1px solid var(--stroke);
    }
    .topbarInner{
      max-width:1200px; margin:0 auto;
      padding:12px 16px;
      display:flex; align-items:center; gap:14px; justify-content:space-between;
    }
    .logos{ display:flex; align-items:center; gap:10px; }
    .logos img{ height:34px; width:auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); }
    .titleWrap{ flex:1; min-width:0; }
    .title{ font-size:16px; font-weight:750; letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Poppins', ui-sans-serif, system-ui, sans-serif; }
    .subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px; border-radius:999px;
      border:1px solid var(--stroke2);
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,244,255,0.98));
      font-size:12px; color:var(--muted);
    }
    .dot{ width:8px; height:8px; border-radius:999px; background:var(--warn); box-shadow:0 0 0 3px rgba(255,204,0,0.20); }

    .wrap{ max-width:1200px; margin:0 auto; padding:16px; }

    .tabBar{
      display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;
    }
    .tabBtn{
      padding:11px 18px; border-radius:16px; border:1px solid var(--stroke2);
      background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(238,244,255,0.98)); color:var(--muted); font-weight:800; cursor:pointer;
      box-shadow:0 8px 18px rgba(176,0,78,0.08);
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
    }
    .tabBtn:hover{
      transform:translateY(-1px);
      border-color:rgba(176,0,78,0.28);
      box-shadow:0 12px 24px rgba(176,0,78,0.14);
    }
    .tabBtn.active{
      color:var(--btnText); border-color: transparent;
      background: var(--btnGrad);
      box-shadow: var(--btnShadow);
    }
    .tabPanel{ display:none; }
    .tabPanel.active{ display:block; }

    /* Avatar toggle buttons */
    .avatarToggleBtn { transition: all .18s ease; }
    .avatarToggleBtn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(176,0,78,0.18); }

    /* Top playback area */
    .playerCard{
      border:1px solid var(--stroke);
      border-radius:22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(238,244,255,0.98));
      overflow:hidden;
      box-shadow: 0 18px 55px rgba(41,51,89,0.12);
    }
    .playerHeader{
      padding:12px 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background: rgba(255,250,252,0.96);
      border-bottom:1px solid var(--stroke);
    }
    .playerHeader .h{
      display:flex; flex-direction:column; gap:2px;
    }
    .playerHeader .h b{ font-size:13px; }
    .playerHeader .h span{ font-size:12px; color:var(--muted); }

    .playerStage{
      position:relative;
      width:100%;
      aspect-ratio: 16 / 9;
      background: #020e0d;
    }
    video#mainVideo{
      width:100%; height:100%;
      object-fit: contain;
      background:#000;
    }

    /* Floating ISL window (draggable + resizable + can move outside playback area) */
    #islFloat{
      position:fixed;
      left: 0px; top: 0px; /* positioned by JS */
      width:360px;
      height:202px;
      border-radius:16px;
      border:1px solid rgba(15,118,110,0.16);
      background: rgba(255,255,255,0.98);
      box-shadow: 0 16px 44px rgba(4,20,18,0.18);
      overflow:hidden;
      touch-action:none;
      backdrop-filter: blur(10px);
      resize: both;
      min-width:220px;
      min-height:140px;
      z-index: 60;
      display:none; /* hide initially until main video plays */
    }

    #islHandle{
      height:28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 10px;
      border-bottom:1px solid rgba(4,20,18,0.10);
      background: linear-gradient(180deg, rgba(15,118,110,0.30), rgba(20,184,166,0.12));
      cursor: grab;
      user-select:none;
    }
    #islHandle:active{ cursor:grabbing; }
    #islHandle .t{
      font-size:12px;
      font-weight:750;
      color:#241947;
      letter-spacing:0.2px;
    }
    #islHandle .s{
      font-size:11px;
      color:#5f547c;
    }

    #islCanvas{
      width:100%;
      height: calc(100% - 28px);
      display:block;
      background: white;
    }

    /* Main grid below video */
    .grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: 1.6fr 0.9fr;
      gap:14px;
      align-items:start;
    }
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      #islFloat{ width:320px; }
    }

    .card{
      border:1px solid var(--stroke);
      border-radius:22px;
      background: rgba(255,255,255,0.98);
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(41,51,89,0.08);
    }
    .cardHead{
      padding:12px 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      border-bottom:1px solid var(--stroke);
      background: rgba(255,250,252,0.96);
    }
    .cardHead b{ font-size:13px; }
    .cardBody{ padding:12px 14px; }

    .row{ display:flex; gap:10px; }
    input[type=text], textarea{
      flex:1;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid var(--stroke2);
      outline:none;
      background: rgba(255,255,255,0.98);
      color:var(--text);
      font-size:14px;
    }
    input[type=text]::placeholder, textarea::placeholder{ color: rgba(88,79,122,0.72); }
    textarea{ width:100%; min-height:160px; resize:vertical; line-height:1.5; }

    .textGrid{
      display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start;
    }
    @media (max-width: 980px){ .textGrid{ grid-template-columns:1fr; } }
    .statusBox{
      margin-top:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--stroke);
      background: rgba(255,250,252,0.98); font-size:12px; color:var(--muted);
    }
    .textResults{ display:flex; flex-direction:column; gap:10px; }
    .resultItem{
      padding:12px; border-radius:14px; border:1px solid var(--stroke); background: rgba(255,255,255,0.98);
    }
    .resultItem b{ display:block; margin-bottom:6px; }
    .resultText{ font-size:13px; color:var(--text); line-height:1.4; white-space:pre-wrap; }
    .resultItem video{ width:100%; margin-top:10px; border-radius:12px; border:1px solid var(--stroke); background:#000; }

    .btn{
      padding:12px 16px;
      border-radius:var(--btnRadius);
      border:1px solid transparent;
      background: var(--btnGrad);
      color:var(--btnText);
      font-weight:800;
      cursor:pointer;
      box-shadow: var(--btnShadow);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); box-shadow:0 18px 38px rgba(176,0,78,0.28); }
    .btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }

    .small{ font-size:12px; color:var(--muted); line-height:1.4; }

    .dialogues{ max-height: 520px; overflow:auto; padding: 6px 10px 14px; }
    .segRow{
      padding:10px 10px;
      border-radius:14px;
      border:1px solid rgba(4,20,18,0.08);
      margin-top:10px;
      background: rgba(255,255,255,0.98);
      cursor:pointer;
      transition: background .12s ease, border-color .12s ease;
    }
    .segRow:hover{ border-color: rgba(176,0,78,0.30); }
    .segRow.active{
      border-color: rgba(15,118,110,0.75);
      background: rgba(15,118,110,0.09);
      box-shadow: 0 14px 30px rgba(20,184,166,0.14);
    }
    .segTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .ts{ font-size:12px; color:var(--muted); }
    .segText{ margin-top:6px; font-size:14px; line-height:1.35; color:var(--text); }
    .mutedSmall{ margin-top:6px; font-size:12px; color:#5e5477; }
    .glossLine{ margin-top:8px; font-size:12px; color:var(--muted); }
    .glossValue{ color:var(--text); font-weight:700; }
    .glossChips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .glossChip{ border-radius:999px; padding:5px 10px; font-size:12px; border:1px solid transparent; position:relative; }
    .glossChip.good{ background:rgba(16,185,129,0.16); color:#0f6b49; border-color:rgba(16,185,129,0.40); }
    .glossChip.bad{ background:rgba(239,68,68,0.16); color:#a12626; border-color:rgba(239,68,68,0.40); }
    .glossChip.alpha{ background:rgba(99,102,241,0.15); color:#3730a3; border-color:rgba(99,102,241,0.40); font-style:italic; }
    .glossChip.alpha .glossAlphaLetters{ font-size:9px; letter-spacing:1.5px; color:#6366f1; margin-left:4px; font-style:normal; }
    .glossChip[data-preview="1"]{ cursor:pointer; }
    .glossMap{ opacity:1; margin-left:6px; font-weight:600; color:#4d4269; }
    .glossEditRow{ display:flex; gap:8px; margin-top:10px; }
    .glossInput{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke2); background:rgba(255,255,255,0.98); color:var(--text); }
    .miniBtn{ padding:10px 14px; border-radius:14px; border:1px solid rgba(176,0,78,0.20); background:rgba(176,0,78,0.08); color:var(--text); font-weight:700; cursor:pointer; }
    .miniBtn:hover{ background:rgba(176,0,78,0.14); }
    .segPreview{ margin-top:10px; width:100%; border-radius:12px; border:1px solid var(--stroke); background:#000; }
    .hoverPreview{ position:fixed; z-index:80; width:180px; display:none; pointer-events:none; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.18); box-shadow:0 20px 50px rgba(0,0,0,0.35); background:#000; }
    .hoverPreview video{ width:100%; display:block; }

    /* Overlay */
    .overlay{
      position:fixed; inset:0; z-index:50;
      display:none;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(8px);
      align-items:center; justify-content:center;
      padding:16px;
    }
    .overlay.show{ display:flex; }
    .ovBox{
      width:min(520px, 92vw);
      border-radius:18px;
      border:1px solid var(--stroke2);
      background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,250,252,0.99));
      box-shadow: 0 28px 90px rgba(4,20,18,0.18);
      overflow:hidden;
    }
    .ovTop{ padding:14px; border-bottom:1px solid var(--stroke); display:flex; gap:10px; align-items:center; color:var(--text); }
    .spinner{
      width:18px; height:18px; border-radius:999px;
      border:2px solid rgba(4,20,18,0.18);
      border-top-color: var(--accent2);
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin{ to{ transform:rotate(360deg);} }
    .ovBody{ padding:14px; }
    .bar{ height:10px; border-radius:999px; background: rgba(4,20,18,0.06); overflow:hidden; border:1px solid rgba(4,20,18,0.08); }
    .fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
    .ovMeta{ margin-top:10px; display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
    .ovMsg{ margin-top:10px; font-size:13px; color:#2b204a; }

    /* Hidden videos for double buffer */
    #islA, #islB{ display:none; }

    /* Main subtitle box under player */
    .subBox{
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,0.96);
      box-shadow: 0 10px 30px rgba(4,20,18,0.06);
    }
    .subLabel{
      font-size: 11px;
      color: #4d4269;
      margin-bottom: 4px;
      font-weight:700;
    }
    .subText{
      font-size: 18px;
      line-height: 1.5;
      font-weight: 800;
      color:#1f1638;
      min-height: 28px;
      user-select: text;
    }
    .downloadBtn{
      white-space: nowrap;
    }
    .suggestionWrap{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .suggestionChip{
      border:1px solid var(--stroke);
      background:#fff;
      color:var(--text);
      border-radius:14px;
      padding:10px 14px;
      font-size:14px;
      cursor:pointer;
      box-shadow:0 8px 20px rgba(41,51,89,0.08);
    }
    .suggestionChip:hover{
      transform:translateY(-1px);
      border-color: rgba(15,118,110,0.30);
    }

    /* Screen share stage */
    #screenShareStage{
      position:relative; width:100%; border-radius:18px; overflow:hidden;
      background:#020e0d; border:1px solid var(--stroke);
      box-shadow:0 18px 55px rgba(4,20,18,0.12); min-height:200px;
    }
    #screenShareVideo{ width:100%; display:block; min-height:200px; object-fit:contain; background:#000; }

    /* Splash screen */
    .splashScreen{
      position:fixed;
      inset:0;
      z-index:99999;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background: radial-gradient(circle at top, rgba(15,118,110,0.14), rgba(255,255,255,0.98) 42%, rgba(221,242,238,0.99));
      transition: opacity .45s ease, visibility .45s ease;
    }
    .splashScreen.hidden{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    .splashCard{
      width:min(560px, 94vw);
      background:#ffffff;
      border:1px solid rgba(15,118,110,0.16);
      border-radius:26px;
      box-shadow:0 28px 80px rgba(4,24,22,0.18);
      padding:28px 26px;
      text-align:center;
      color:#1d2433;
    }
    .splashLogo{
      width:88px; height:88px; object-fit:contain;
      margin:0 auto 14px auto; display:block;
    }
    .splashTitle{
      margin:0; font-size:30px; line-height:1.15; font-weight:800; color:#1a1f2b;
    }
    .splashText{ margin:10px 0 0 0; font-size:15px; color:#2b3446; }
    .splashLoader{
      margin:20px auto 10px auto; width:56px; height:56px; border-radius:50%;
      border:5px solid rgba(15,118,110,0.16); border-top-color:#0f766e;
      animation: spin 0.9s linear infinite;
    }
    .splashProgressWrap{
      width:100%; height:12px; border-radius:999px; background:#d0f0ec;
      overflow:hidden; margin:16px 0 8px 0; border:1px solid rgba(15,118,110,0.11);
    }
    .splashProgressBar{
      width:0%; height:100%; border-radius:999px;
      background:linear-gradient(90deg, #0f766e, #14b8a6);
      transition: width .18s ease;
    }
    .splashMeta{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; font-size:13px; color:#334155;
    }
    .splashLinkRow{
      display:flex; align-items:center; justify-content:center;
      gap:12px; flex-wrap:wrap; margin-top:18px;
    }
    .splashLink, .splashSkip{
      display:inline-flex; align-items:center; justify-content:center;
      min-height:42px; padding:0 16px; border-radius:12px;
      font-weight:700; text-decoration:none; cursor:pointer;
      transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
    }
    .splashLink{
      color:#ffffff !important;
      background:var(--btnGrad);
      box-shadow:var(--btnShadow);
    }
    .splashSkip{
      color:#263041 !important; background:#eef4ff;
      border:1px solid rgba(176,0,78,0.14);
    }
    .splashLink:hover, .splashSkip:hover{ transform:translateY(-1px); }

    /* Stronger readable light-theme text */
    body, .shell, .hero, .app, .card, .ovBox, .mini, .inputCard, .compareMetaBox, .compareVideoBox, .dialogueCard, .resultItem, .statusBox,
    .playerCard, .tabbar, .tab, .field, .field label, .small, .muted, .chip, .glossChip, .metaRow, .compareVideoTitle, .compareMetaBox div,
    .brand, .hero h1, .hero p, .playerHeader .h b, .playerHeader .h span, #mainSubtitle, #langInfo, #pillText, #selectedAvatarLabel, #selectedOriginalLabel,
    #vocabSearchStatus, #compareSearchStatus, #textToIslStatus, #speechStatus, #ovStage, #ovMsg, #ovHint, #ovPct, .ovTop, .ovBody{
      color:#1f2937 !important;
    }
    .small, .muted, .hero p, .playerHeader .h span, #langInfo, #ovHint{
      color:#334155 !important;
    }
    input, textarea, select, button{
      color:#18212f;
    }
    a{ color:#0a5550; }


/* --- Secondary style block (extracted from template) --- */

      .bm-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
      @media(max-width:800px){ .bm-grid2{ grid-template-columns:1fr; } }
      .bm-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px; }
      @media(max-width:1000px){ .bm-grid3{ grid-template-columns:1fr 1fr; } }
      @media(max-width:600px){ .bm-grid3{ grid-template-columns:1fr; } }
      .bm-chip { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; margin-right:4px; }
      .bm-best { background:#dcfce7; color:#15803d; }
      .bm-ours { background:#ede9fe; color:#6d28d9; }
      .bm-table { width:100%; border-collapse:collapse; font-size:13px; }
      .bm-table th { background:linear-gradient(135deg,#0f766e,#0369a1); color:#fff; padding:8px 10px; text-align:center; font-weight:700; }
      .bm-table td { padding:7px 10px; text-align:center; border-bottom:1px solid rgba(0,0,0,0.06); }
      .bm-table tr:last-child td { background:linear-gradient(135deg,rgba(79,70,229,0.08),rgba(6,182,212,0.06)); font-weight:700; }
      .bm-table tr:hover td { background:rgba(79,70,229,0.04); }
      .bm-best-cell { color:#15803d; font-weight:800; }
      .bm-metric-card { text-align:center; padding:12px 8px; }
      .bm-metric-val { font-size:2em; font-weight:800; color:#0f766e; line-height:1.1; }
      .bm-metric-lbl { font-size:11px; color:#64748b; margin-top:2px; }
      .bm-metric-sub { font-size:11px; color:#4f46e5; font-weight:600; margin-top:1px; }
      .bm-section-title { font-size:13px; color:#64748b; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
      .bm-section-title::after { content:''; flex:1; height:1px; background:rgba(0,0,0,0.08); }
      .bm-chart-wrap { position:relative; width:100%; }
      .bm-export-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
      .bm-run-btn { background:linear-gradient(135deg,#0f766e,#0369a1); color:#fff; border:none; border-radius:12px;
                    padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer; }
      .bm-run-btn:hover { opacity:0.88; }
      .bm-run-btn:disabled { opacity:0.45; cursor:not-allowed; }
      .bm-status { font-size:12px; color:#64748b; margin-top:6px; }
      .bm-legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
      .bm-cat-table { width:100%; border-collapse:collapse; font-size:12px; }
      .bm-cat-table th { background:rgba(15,118,110,0.12); color:#0f766e; padding:6px 10px; text-align:left; }
      .bm-cat-table td { padding:5px 10px; border-bottom:1px solid rgba(0,0,0,0.05); }
    
/* --- Secondary style block (extracted from template) --- */

      .pc-dropzone {
        border:2px dashed rgba(15,118,110,0.35);
        border-radius:12px;
        padding:28px 16px;
        text-align:center;
        cursor:pointer;
        transition:border-color 0.2s, background 0.2s;
        background:rgba(15,118,110,0.03);
      }
      .pc-dropzone:hover, .pc-dropzone.drag-over {
        border-color:#0f766e;
        background:rgba(15,118,110,0.07);
      }
      .pc-dz-icon { font-size:2em; margin-bottom:6px; }
      .pc-dz-label { font-size:13px; font-weight:600; color:#0f766e; }
      .pc-dz-sub { font-size:11px; color:#64748b; margin-top:3px; }
      .pc-file-name { font-size:12px; color:#0369a1; font-weight:600; margin-top:8px;
                      background:rgba(3,105,161,0.07); padding:4px 10px; border-radius:8px; }
    
/* --- Secondary style block (extracted from template) --- */

      .fb-wrap { max-width:780px; margin:0 auto; }
      .fb-hero { text-align:center; margin-bottom:28px; }
      .fb-hero h2 { font-size:22px; font-weight:800; color:#b0004e; margin-bottom:6px; }
      .fb-hero p  { font-size:13px; color:#64748b; line-height:1.6; }
      .fb-section-title { font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase;
                          letter-spacing:.06em; margin:18px 0 10px; display:flex; align-items:center; gap:8px; }
      .fb-section-title::after { content:''; flex:1; height:1px; background:rgba(0,0,0,0.08); }
      .fb-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
      @media(max-width:600px){ .fb-grid2{ grid-template-columns:1fr; } }
      .fb-field { display:flex; flex-direction:column; gap:5px; margin-bottom:2px; }
      .fb-field label { font-size:12px; font-weight:700; color:#374151; }
      .fb-field input, .fb-field select, .fb-field textarea {
        width:100%; padding:8px 12px; border:1px solid rgba(176,0,78,0.22);
        border-radius:10px; font-size:13px; outline:none;
        background:#fafbff; transition:border-color .15s;
      }
      .fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus {
        border-color:#b0004e; box-shadow:0 0 0 3px rgba(176,0,78,0.10);
      }
      .fb-field textarea { resize:vertical; min-height:72px; }
      .fb-q-card { background:#fff5f8; border:1px solid rgba(176,0,78,0.14);
                   border-radius:14px; padding:14px 16px; margin-bottom:10px; }
      .fb-q-title { font-size:13px; font-weight:700; color:#1a0010; margin-bottom:4px; }
      .fb-q-hint  { font-size:11px; color:#b0004e; margin-bottom:10px; }
      .fb-scale   { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
      .fb-scale-label { font-size:11px; color:#64748b; white-space:nowrap; }
      .fb-scale input[type=radio] { display:none; }
      .fb-scale label.fb-scale-btn {
        display:inline-flex; align-items:center; justify-content:center;
        width:36px; height:36px; border-radius:50%;
        border:2px solid rgba(176,0,78,0.25);
        font-size:13px; font-weight:700; color:#b0004e;
        cursor:pointer; transition:all .15s;
        background:#fff;
      }
      .fb-scale input[type=radio]:checked + label.fb-scale-btn {
        background:linear-gradient(135deg,#b0004e,#c8005c);
        color:#fff; border-color:transparent;
        box-shadow:0 4px 12px rgba(176,0,78,0.30);
      }
      .fb-scale label.fb-scale-btn:hover {
        border-color:#b0004e; background:#fff0f5;
      }
      .fb-radio-group { display:flex; flex-direction:column; gap:6px; }
      .fb-radio-opt  { display:flex; align-items:center; gap:8px; cursor:pointer; }
      .fb-radio-opt input[type=radio] { accent-color:#b0004e; width:15px; height:15px; }
      .fb-radio-opt span { font-size:13px; color:#374151; }
      .fb-submit-btn {
        width:100%; padding:13px; border:none; border-radius:14px; cursor:pointer;
        background:linear-gradient(135deg,#b0004e,#c8005c);
        color:#fff; font-size:15px; font-weight:800;
        box-shadow:0 8px 22px rgba(176,0,78,0.28);
        transition:opacity .15s, transform .15s;
        margin-top:20px;
      }
      .fb-submit-btn:hover { opacity:.88; transform:translateY(-1px); }
      .fb-submit-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
      .fb-status { text-align:center; font-size:13px; margin-top:10px; min-height:20px; }
      .fb-success { color:#15803d; font-weight:700; }
      .fb-error   { color:#dc2626; font-weight:700; }
      .fb-req { color:#dc2626; }

/* ── CCV Site Footer ── */
.siteFooter {
  margin-top: 40px;
  padding: 18px 16px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
}
.siteFooter a { color: #b0004e; text-decoration: none; font-weight: 600; }
.siteFooter a:hover { text-decoration: underline; }
.siteFooter .footerLogos { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.siteFooter .footerLogos img { height:28px; width:auto; opacity:0.85; }

/* ── CCV Navbar Brand ── */
.ccvBrand { display:flex; align-items:center; gap:8px; }
.ccvBrand img.ccvLogo { height:36px; width:auto; }
.ccvBrandText { display:flex; flex-direction:column; }
.ccvBrandKicker { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#b0004e; }
.ccvBrandTitle { font-size:15px; font-weight:900; color:#111; letter-spacing:-.02em; font-family:'Poppins',sans-serif; }

/* ── Aurora orbs (hidden in CCV theme) ── */
.auroraOrb { display: none; }

/* ═══════════════════════════════════════════════════════════
   History Panel — right-side drawer
═══════════════════════════════════════════════════════════ */
#histBtn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(176,0,78,0.28);
  background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,245,248,0.98));
  font-size:12px; font-weight:700; color:var(--accent);
  cursor:pointer; box-shadow:0 4px 12px rgba(176,0,78,0.10);
  transition:box-shadow .15s, transform .15s;
  white-space:nowrap;
}
#histBtn:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(176,0,78,0.18); }
#histBtn.active { background:linear-gradient(135deg,#b0004e,#c8005c); color:#fff; border-color:transparent; }

#historyPanel {
  position:fixed; top:0; right:0; bottom:0; z-index:900;
  width:360px; max-width:95vw;
  background:#fff; border-left:1px solid rgba(176,0,78,0.14);
  box-shadow:-8px 0 40px rgba(41,51,89,0.13);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#historyPanel.open { transform:translateX(0); }

#historyPanel .histHeader {
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(176,0,78,0.10);
  display:flex; align-items:center; justify-content:space-between;
}
#historyPanel .histHeader h3 {
  font-size:15px; font-weight:800; color:#111;
  font-family:'Poppins',sans-serif; margin:0;
}
#histCloseBtn {
  background:none; border:none; cursor:pointer;
  color:#6b7280; font-size:20px; line-height:1; padding:4px; border-radius:8px;
  transition:background .15s, color .15s;
}
#histCloseBtn:hover { background:#fff0f5; color:#b0004e; }

#historyList {
  flex:1; overflow-y:auto; padding:12px 16px;
  display:flex; flex-direction:column; gap:10px;
}
#historyList::-webkit-scrollbar { width:6px; }
#historyList::-webkit-scrollbar-thumb { background:rgba(176,0,78,0.25); border-radius:6px; }

.hist-empty {
  text-align:center; color:#9ca3af; font-size:13px;
  padding:32px 16px;
}

.hist-item {
  background:linear-gradient(180deg,#fff,#fff5f8);
  border:1px solid rgba(176,0,78,0.14);
  border-radius:16px;
  padding:12px 14px;
  cursor:pointer;
  transition:box-shadow .15s, transform .15s, border-color .15s;
  position:relative;
}
.hist-item:hover {
  border-color:rgba(176,0,78,0.38);
  box-shadow:0 4px 16px rgba(176,0,78,0.12);
  transform:translateY(-1px);
}
.hist-item.hist-active {
  border-color:#b0004e;
  box-shadow:0 6px 22px rgba(176,0,78,0.20);
}
.hist-thumb {
  width:100%; border-radius:10px; aspect-ratio:16/9;
  object-fit:cover; background:#f3f4f6;
  display:block; margin-bottom:8px;
}
.hist-meta {
  font-size:12px; color:#374151; line-height:1.5;
}
.hist-meta .hist-preview {
  font-size:13px; font-weight:700; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px;
}
.hist-meta .hist-stats {
  color:#6b7280; font-size:11px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hist-meta .hist-stats span { display:inline-flex; align-items:center; gap:3px; }
.hist-badge {
  display:inline-block; font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:999px;
  background:rgba(176,0,78,0.10); color:#b0004e;
  margin-left:auto; letter-spacing:.04em;
}

/* ── Per-segment download button ── */
.seg-dl-btn {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px; padding:4px 10px;
  border-radius:999px; border:1px solid rgba(176,0,78,0.28);
  background:#fff5f8; color:#b0004e;
  font-size:11px; font-weight:700; cursor:pointer;
  text-decoration:none;
  transition:background .15s, box-shadow .15s;
}
.seg-dl-btn:hover { background:#ffe0ed; box-shadow:0 2px 8px rgba(176,0,78,0.15); }

/* ── Merged ISL download section inside player card ── */
#mergeSection {
  margin-top:14px; padding:14px 16px;
  border:1px solid rgba(176,0,78,0.14);
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fff8fb);
  display:none;
}
#mergeSection.visible { display:block; }
#mergeSection h4 {
  font-size:13px; font-weight:800; color:#111;
  margin:0 0 10px; font-family:'Poppins',sans-serif;
}
#dlMergedBtn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(135deg,#b0004e,#c8005c);
  color:#fff; border:none; cursor:pointer;
  font-size:13px; font-weight:700;
  box-shadow:0 6px 18px rgba(176,0,78,0.28);
  transition:opacity .15s, transform .15s;
}
#dlMergedBtn:hover { opacity:.9; transform:translateY(-1px); }
#dlMergedBtn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
#dlMergedStatus { font-size:12px; color:#6b7280; margin-top:8px; min-height:16px; }
#dlMergedLink {
  display:none; margin-top:8px;
  padding:8px 18px; border-radius:999px;
  background:linear-gradient(135deg,#15803d,#16a34a);
  color:#fff; font-size:13px; font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(21,128,61,0.28);
  transition:opacity .15s;
  align-items:center; gap:6px;
}
#dlMergedLink.ready { display:inline-flex; }
#dlMergedLink:hover { opacity:.9; }

/* Overlay backdrop when history panel is open on narrow screens */
#histBackdrop {
  display:none; position:fixed; inset:0; z-index:899;
  background:rgba(0,0,0,0.35);
}
#histBackdrop.open { display:block; }