/* ===========================
   THEME & GLOBAL
   =========================== */
:root{
  --bg:#0b132b;
  --card:#1c2541;
  --muted:#9aa7bd;
  --accent:#2ec4b6;
  --accent-2:#3a86ff;
  --text:#f6f7fb;
  --danger:#ff4d6d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b132b 0%,#0e1a3a 100%);
  color:var(--text);
}

.wrap{max-width:960px;margin:0 auto;padding:24px 16px 64px}

/* ===========================
   HEADER / TABS
   =========================== */
.hero{text-align:center;margin-bottom:8px}
.hero h1{margin:.2em 0 .1em}
.subtitle{color:var(--muted);margin:.2rem 0 .6rem}

.tabs{display:flex;gap:8px;justify-content:center;margin:8px 0 16px}
.tab{
  padding:10px 14px;border:none;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--text);
  cursor:pointer;transition:transform .08s ease,opacity .15s ease
}
.tab:active{transform:scale(.98)}
.tab.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#00111a;font-weight:700}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* ===========================
   CARDS & COMMON
   =========================== */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
}

.card-title{
  margin: 6px 0 8px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: #cfe3ff;
}

/* alerts / loaders */
.alert{
  background:rgba(255,77,109,.1);
  border:1px solid rgba(255,77,109,.5);
  color:#ffd9e1;
  padding:10px 12px;border-radius:10px;margin-top:12px
}

.loader{
  border:4px solid rgba(255,255,255,.2);
  border-top:4px solid var(--accent);
  border-radius:50%;
  width:40px;height:40px;
  animation:spin 1s linear infinite;
  margin:16px auto 0
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================
   URL FORM
   =========================== */
.url-form{display:flex;gap:10px}
.url-form input{
  flex:1;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:var(--text);outline:none
}
.url-form input::placeholder{color:#c7d1e6;opacity:.6}
.url-form button{
  padding:12px 18px;border:none;border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#00111a;font-weight:700;cursor:pointer;transition:transform .08s ease
}
.url-form button:active{transform:scale(.98)}
.url-form button:disabled{opacity:.6;cursor:not-allowed}

/* ===========================
   SUGGESTIONS LIST
   =========================== */
#results-container{display:grid;gap:14px}

.suggestion{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px;
}
.suggestion__header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem
}
.summary{
  margin:6px 0 10px;color:var(--text);
  background:rgba(46,196,182,.08);
  border:1px solid rgba(46,196,182,.32);
  padding:10px 12px;border-radius:10px;line-height:1.45
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

.time-editor{
  display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.05);
  padding:8px 10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.06)
}
.time-editor label{font-weight:700;color:#cfe3ff}
.time-editor input{
  width:120px;text-align:center;padding:8px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);color:var(--text)
}

.context{display:grid;gap:10px;margin-top:10px}
.context__label{font-size:.9rem;color:#b9c6dd;margin-bottom:6px}
blockquote{
  margin:0;padding:10px 12px;border-left:3px solid var(--accent);
  background:rgba(255,255,255,.05);border-radius:10px
}

/* actions */
.actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.cut-btn,.download-btn,.make-format-btn,.format-retry,.format-close{
  border:none;text-decoration:none;display:inline-block;text-align:center;
  padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#00111a
}

/* ===========================
   PER-CARD PROGRESS (under card)
   =========================== */
.progress-local{
  margin-top:12px;padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:rgba(255,255,255,.04)
}
.progress-header{font-size:.95rem;color:#cfe3ff;margin-bottom:6px}
.progress-title{margin:0 0 8px;font-size:.95rem;color:#cfe3ff}
.progress{
  width:100%;height:14px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;overflow:hidden
}
.progress .bar{
  width:0%;height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .35s ease
}
.muted{color:var(--muted);margin:.4rem 0 0}
.local-error{
  margin-top:10px;background:rgba(255,77,109,.1);
  border:1px solid rgba(255,77,109,.5);
  color:#ffd9e1;padding:10px 12px;border-radius:10px
}
.progress-actions{margin-top:8px}
.stop-btn{
  background:#ff768d;color:#1e0a0a;border:none;border-radius:10px;
  padding:8px 12px;font-weight:700
}

/* ===========================
   PER-CARD FORMATTING PANEL (under card)
   =========================== */
.format-local{
  margin-top:12px;padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:rgba(255,255,255,.04)
}
.format-spinner{margin:6px 0 8px;color:var(--muted)}
.format-local .format-error{
  margin-top:8px;background:rgba(255,77,109,.1);
  border:1px solid rgba(255,77,109,.5);
  color:#ffd9e1;padding:8px 10px;border-radius:10px
}
.format-local h4{
  margin:8px 0 6px;font-size:.95rem;color:#cfe3ff
}
.format-local .format-result{
  border-top:1px dashed rgba(255,255,255,.12);
  margin-top:8px;padding-top:8px
}
.format-actions{display:flex;gap:10px;flex-wrap:wrap}
.format-actions .format-retry,
.format-actions .format-close{
  border:none;text-decoration:none;display:inline-block;text-align:center;
  padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#00111a
}

/* ===========================
   FORMAT TAB (full video)
   =========================== */
.format-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  border-radius:14px;padding:18px
}

/* ===========================
   TEXTAREAS (unified, no scroll)
   =========================== */
.ui-textarea,
.format-result textarea,
#format-result textarea{
  width:100%;
  min-height:40px;
  height:auto;          /* actual height set by JS */
  overflow:hidden;      /* no scrollbars */
  resize:none;          /* not resizable by user */
  margin:6px 0 12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  line-height:1.46;
  font-family:inherit;
  font-size:0.96rem;
}

/* ===========================
   MISC
   =========================== */
a.download-btn{color:#00111a}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal {
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  overflow: hidden;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.modal-header h3 {
  margin: 0; font-size: 18px; color: #111827;
}
.modal-body {
  padding: 18px 20px; color: #374151;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid #f3f4f6;
}
.btn {
  border: none; border-radius: 10px; padding: 9px 14px; cursor: pointer;
  font-size: 14px;
}
.btn-primary {
  background: #0d6efd; color: #fff;
}
.btn-primary:hover { background: #0b5ed7; }
.btn-secondary {
  background: #eef2f7; color: #1f2937;
}
.btn-secondary:hover { background: #e5eaf1; }