/* === Advent Pro === */
@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;600&display=swap');

/* === Global === */
body, html { font-family: 'Advent Pro', sans-serif; }
.toiaf-title, .toiaf-title-sm { font-family: 'Advent Pro', sans-serif; }

/* === Page container === */
.toiaf-wrap{
  max-width: 1200px;
  width: min(96vw, 1200px);
  margin: 32px auto;
  padding: clamp(12px, 2vw, 24px);
}

/* Title */
.toiaf-title{
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  line-height: .9;
  text-align: center;
  margin: 0 0 18px;
}

.toiaf-title-sm { font-size: 22px; text-align:center; margin: 12px 0 6px; }

/* === Form rows === */
.toiaf-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}
.toiaf-row label{ font-weight: 600; opacity: .9; text-align: center; }

.toiaf-row input[type="text"],
.toiaf-row input[type="number"],
.toiaf-row input[type="file"],
.toiaf-row textarea,
.toiaf-row select{
  width: min(960px, 92vw);
  margin: 0 auto;
  padding: 14px 16px;
  font-size: clamp(16px, 2.1vw, 18px);
  line-height: 1.35;
  color: #fff;
  background: #0b0b0b;
  border: 1px solid #232323;
  border-radius: 12px;
  outline: none;
}

.toiaf-help{ text-align:center; color:#9aa0a6; font-size:13px; }

/* Actions */
.toiaf-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}
.toiaf-btn,.toiaf-btn--primary,.toiaf-btn--ghost{
  appearance:none; border:1px solid #333; padding:11px 16px; border-radius:14px; cursor:pointer; background:#111; color:#eee; font-weight:600;
}
.toiaf-btn--primary{ background:#ff1dc2; border-color:#ff1dc2; color:#000; }
.toiaf-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Progress */
.toiaf-progress{ width:min(960px,92vw); height:10px; background:#1c1c1c; border-radius:999px; overflow:hidden; margin:12px auto 6px; }
.toiaf-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,#6eff00,#ff1dc2); transition:width .2s ease; }
.toiaf-status{ text-align:center; color:#9aa0a6; }

/* Divider */
.toiaf-div{ border:0; border-top:1px solid #222; width:min(960px,92vw); margin:22px auto; }

/* Video overlays */
.toiaf-video-wrap{ position:relative; width:min(960px,92vw); margin:18px auto 8px; border-radius:12px; overflow:hidden; }
.toiaf-watermark{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:.9; mix-blend-mode:screen; }
.toiaf-watermark img{ max-width:45%; width:clamp(140px,30vw,380px); height:auto; filter:drop-shadow(0 2px 14px rgba(255,29,194,.35)); }
.toiaf-creator-badge{ position:absolute; top:14px; right:14px; background:rgba(0,0,0,.62); border:1px solid rgba(255,29,194,.5); color:#fff; padding:8px 12px; border-radius:999px; font-weight:600; letter-spacing:.25px; backdrop-filter:blur(3px); }

/* Desktop labels right aligned */
@media (min-width: 900px){
  .toiaf-row{ grid-template-columns: 220px 1fr; }
  .toiaf-row label{ text-align: right; padding-right: 10px; }
  .toiaf-help{ grid-column:2; text-align:left; }
}