/* Backoffice forms + log box, auth, extension, filters, table, loading. */
/* backoffice — CDN settings form */
.cdn-form { display:grid; grid-template-columns:180px 1fr; gap:12px 18px; align-items:start; }
.cdn-form > label { font-weight:600; color:var(--muted); font-size:13px; padding-top:11px; }
.cdn-form input:not([type=checkbox]) { width:100%; background:var(--bg); border:1px solid var(--border2);
  color:var(--text); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none; }
.cdn-form input:not([type=checkbox]):focus { border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.cdn-check { display:flex; align-items:center; gap:8px; color:var(--text); padding-top:8px; cursor:pointer; }
@media (max-width:640px) { .cdn-form { grid-template-columns:1fr; gap:4px 0; } .cdn-form > label { padding-top:10px; } }

/* streaming log box (backoffice "reprocessar") */
.logbox { margin-top:12px; max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-word;
  background:var(--bg); border:1px solid var(--border2); border-radius:12px; padding:12px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.55; color:var(--text); }

/* backoffice */
.bo-plan { background:var(--elevated); color:var(--text); border:1px solid var(--border2);
  border-radius:8px; padding:5px 8px; font-size:13px; font-family:inherit; cursor:pointer; }
.bo-plan:focus { outline:none; border-color:var(--blue); }

/* auth */
.auth-wrap { max-width:420px; margin:6vh auto 0; }
.auth-card { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.auth-card input { background:var(--bg); border:1px solid var(--border2); color:var(--text);
  border-radius:12px; padding:13px 16px; font-size:15px; font-family:inherit; outline:none; }
.auth-card input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.auth-card .btn { margin-top:4px; }
.auth-toggle { font-size:13px; text-align:center; }
.auth-toggle a { cursor:pointer; margin-left:6px; }
/* OTP: 6 caixas de dígito (modo verify). Herdam o look base de .auth-card input. */
.otp { display:flex; gap:8px; }
.auth-card .otp-box { flex:1; min-width:0; padding:0; height:54px; text-align:center;
  font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.auth-card a.disabled { opacity:.5; pointer-events:none; }
/* aviso de beta + aceite de políticas no cadastro */
.auth-note { background:color-mix(in oklch, var(--blue) 10%, transparent);
  border:1px solid color-mix(in oklch, var(--blue) 28%, transparent); border-radius:12px;
  padding:11px 13px; font-size:12.5px; line-height:1.45; color:var(--text); }
.auth-policy { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--muted);
  line-height:1.4; cursor:pointer; }
.auth-policy input[type=checkbox] { width:16px; height:16px; flex:none; margin-top:1px; accent-color:var(--blue); }
.auth-policy a { color:var(--blue); }
.auth-remember { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text);
  cursor:pointer; }
.auth-remember input[type=checkbox] { width:16px; height:16px; flex:none; accent-color:var(--blue); }
/* selo de status verde (OTP confirmado / acesso liberado) no backoffice */
.badge-ok { color:var(--ok); font-weight:700; font-size:12px; }

/* intl phone input: bandeira/DDI + número, com dropdown de países */
.phone { position:relative; display:flex; align-items:stretch; gap:0;
  background:var(--bg); border:1px solid var(--border2); border-radius:12px; }
.phone:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklch, var(--tx-cyan) 30%, transparent); }
.phone-flag { display:flex; align-items:center; gap:6px; padding:0 12px; cursor:pointer;
  background:transparent; border:0; border-right:1px solid var(--border2); color:var(--text);
  font-size:15px; font-family:inherit; border-radius:12px 0 0 12px; }
.phone-flag:hover { background:var(--elevated); }
.phone-flag #phoneFlag { font-size:18px; line-height:1; }
.phone-dial { font-weight:600; color:var(--muted); font-size:14px; }
.phone-caret { color:var(--faint); font-size:11px; }
.phone-num { flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); padding:13px 16px; font-size:15px; font-family:inherit; }
.phone-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  background:var(--elevated); border:1px solid var(--border2); border-radius:12px;
  box-shadow:0 16px 36px -8px oklch(0% 0 0 / 0.5); overflow:hidden; }
.phone-search { width:100%; box-sizing:border-box; background:var(--bg); color:var(--text);
  border:0; border-bottom:1px solid var(--border2); padding:11px 14px; font-size:14px;
  font-family:inherit; outline:none; }
.phone-list { list-style:none; margin:0; padding:4px; max-height:240px; overflow-y:auto; }
.phone-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.phone-item:hover { background:var(--bg); }
.phone-item-flag { font-size:18px; line-height:1; flex:none; }
.phone-item-name { flex:1; min-width:0; font-size:14px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone-item-dial { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }

/* extension page */
.steps-list { margin:0; padding-left:20px; color:#cbd2dd; font-size:14px; }
.steps-list li { margin:8px 0; line-height:1.5; }
.steps-list li::marker { color:var(--purple); font-weight:700; }
code { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px;
  padding:1px 6px; font-size:12px; color:#e6e9f0; }

/* per-post performance status */
.status-pill { display:inline-block; font-size:10px; font-weight:700; padding:3px 9px;
  border-radius:999px; text-transform:uppercase; letter-spacing:.04em; align-self:flex-start; }
.status-pill.up { background:rgba(34,197,94,.15); color:var(--ok); }
.status-pill.down { background:color-mix(in oklch, var(--danger) 18%, transparent); color:var(--danger); }
.status-pill.mid { background:rgba(154,163,178,.15); color:var(--muted); }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter { background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:13px; color:var(--muted); cursor:pointer; }
.filter.active { color:#fff; background:var(--grad-btn); border-color:transparent; }

/* table */
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:13px; }
th { color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.06em; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:var(--elevated); }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.pill.done { background:rgba(34,197,94,.15); color:var(--ok); }
.pill.failed { background:color-mix(in oklch, var(--danger) 18%, transparent); color:var(--danger); }
.pill.processing { background:rgba(245,158,11,.15); color:var(--warn); }

/* loading steps */
.steps { display:flex; flex-direction:column; gap:12px; max-width:420px; margin-top:10px; }
.step { display:flex; align-items:center; gap:12px; color:var(--muted); }
.step .dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--border2);
  display:grid; place-items:center; font-size:11px; flex:none; }
.step.active { color:var(--text); }
.step.active .dot { border-color:var(--purple); }
.step.done .dot { background:var(--ok); border-color:var(--ok); color:#06210f; }
.spinner { width:16px; height:16px; border:2px solid var(--border2); border-top-color:var(--purple);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }