/* ============================================================
 *  OneTab Studio — Pre-publish Gate styling (professional)
 *  Additive, scoped under #pregateCard. Uses theme-v2 tokens.
 * ============================================================ */

#pregateCard {
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,0.10), transparent 42%),
    var(--ot-bg-surface, #12131a);
  border: 1px solid var(--ot-border, rgba(255,255,255,.08));
  border-radius: 16px;
  box-shadow: var(--ot-shadow-2, 0 4px 12px rgba(0,0,0,.3));
  padding: 20px 22px 22px;
  margin-bottom: 24px;
  overflow: hidden;
}
#pregateCard::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--ot-accent, #6366f1), #a855f7 55%, transparent);
  opacity: .8;
}

/* ── header ── */
.pg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pg-badge-icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--ot-accent-soft, rgba(99,102,241,.15));
  border: 1px solid rgba(99,102,241,.28);
  color: #c7ccff;
}
.pg-head-txt { line-height: 1.25; }
.pg-title { font-size: 15px; font-weight: 700; color: var(--ot-text-primary, #f8fafc); letter-spacing: .2px; }
.pg-sub { font-size: 11.5px; color: var(--ot-text-muted, #64748b); margin-top: 2px; }
.pg-chip-offline {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.28);
}

/* ── input row ── */
.pg-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pg-field { display: flex; flex-direction: column; gap: 6px; }
.pg-field.ch  { flex: 1 1 170px; min-width: 150px; }
.pg-field.ty  { flex: 0 1 118px; min-width: 104px; }
.pg-field.tm  { flex: 0 1 96px;  min-width: 84px;  }
.pg-field.ti  { flex: 3 1 260px; min-width: 200px; }
.pg-label { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ot-text-muted, #64748b); }
.pg-input {
  width: 100%; box-sizing: border-box;
  background: var(--ot-bg-base, #0a0b10);
  border: 1px solid var(--ot-border, rgba(255,255,255,.08));
  border-radius: 9px; padding: 10px 12px;
  font-size: 13px; color: var(--ot-text-primary, #f8fafc);
  outline: none; transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.pg-input::placeholder { color: var(--ot-text-muted, #64748b); }
.pg-input:focus { border-color: var(--ot-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
select.pg-input { cursor: pointer; }

.pg-btn {
  flex: none; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border: none; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.pg-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,.45); }
.pg-btn:active:not(:disabled) { transform: translateY(0); }
.pg-btn:disabled { opacity: .6; cursor: default; }

/* ── result ── */
.pg-result { margin-top: 4px; }
.pg-inline-msg { margin-top: 12px; font-size: 12.5px; font-weight: 500; }
.pg-inline-msg.err { color: var(--ot-status-danger, #EF4444); }

.pg-scorewrap {
  margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--ot-border, rgba(255,255,255,.08));
}
@media (max-width: 640px) { .pg-scorewrap { grid-template-columns: 1fr; gap: 16px; justify-items: center; } }

/* gauge */
.pg-gauge { position: relative; width: 118px; height: 118px; flex: none; }
.pg-gauge svg { transform: rotate(-90deg); }
.pg-gauge-track { fill: none; stroke: var(--ot-bg-elevated, #1b1c26); stroke-width: 10; }
.pg-gauge-fill  { fill: none; stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }
.pg-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.pg-gauge-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.pg-gauge-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ot-text-muted, #64748b); margin-top: 4px; }

.pg-verdict-side { min-width: 0; }
.pg-verdict-label { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.pg-verdict-note { font-size: 11.5px; color: var(--ot-text-muted, #64748b); margin-bottom: 14px; }

/* meters */
.pg-meter { margin-bottom: 12px; }
.pg-meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.pg-meter-name { font-size: 12px; color: var(--ot-text-secondary, #94a3b8); font-weight: 500; }
.pg-meter-val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-meter-val .mut { color: var(--ot-text-muted, #64748b); font-weight: 500; }
.pg-track { height: 7px; border-radius: 4px; background: var(--ot-bg-elevated, #1b1c26); overflow: hidden; }
.pg-fill { height: 100%; border-radius: 4px; width: 0; transition: width 1s cubic-bezier(.22,1,.36,1); }

/* stat strip + best window */
.pg-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pg-stat {
  flex: 1 1 150px; min-width: 130px;
  background: var(--ot-bg-base, #0a0b10);
  border: 1px solid var(--ot-border, rgba(255,255,255,.08));
  border-radius: 10px; padding: 11px 14px;
}
.pg-stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ot-text-muted, #64748b); margin-bottom: 5px; }
.pg-stat-val { font-size: 15px; font-weight: 700; color: var(--ot-text-primary, #f8fafc); font-variant-numeric: tabular-nums; }
.pg-stat-val .sub { font-size: 11px; font-weight: 500; color: var(--ot-text-muted, #64748b); margin-left: 4px; }
.pg-stat-val .win { color: #a855f7; }

/* advice */
.pg-advice { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pg-adv {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.6; color: var(--ot-text-secondary, #94a3b8);
  background: var(--ot-bg-base, #0a0b10);
  border: 1px solid var(--ot-border, rgba(255,255,255,.06));
  border-left-width: 3px; border-radius: 8px; padding: 9px 12px;
}
.pg-adv .ic { flex: none; margin-top: 1px; font-size: 13px; }