/* Fábrica de Vídeos Fluxon — estilo compartilhado */
:root{
  --bg:#F6F4EF;--surface:#FFFFFF;--surface-2:#FBFAF7;--ink:#151515;--ink-2:#55524C;--ink-3:#8A867E;
  --line:#E6E1D7;--acc:#FF6B2C;--acc-d:#E8541A;--acc-soft:#FFF0E8;--ok:#16A34A;--ok-soft:#E9F7EE;
  --warn:#B45309;--warn-soft:#FEF3E2;--err:#DC2626;--err-soft:#FDECEC;--radius:14px;
  --shadow:0 1px 2px rgba(20,20,20,.04),0 8px 24px -12px rgba(20,20,20,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:inherit}
img,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
.muted{color:var(--ink-2)}.small{font-size:13px}.tiny{font-size:12px;color:var(--ink-3)}
.row{display:flex;gap:10px;align-items:center}.wrap{flex-wrap:wrap}.grow{flex:1}.right{margin-left:auto}
.stack>*+*{margin-top:12px}
.hidden{display:none !important}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  padding:10px 16px;border-radius:10px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc-d)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--err)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.lg{padding:14px 22px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* formulários */
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.input,select.input,textarea.input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);outline:none}
.input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
textarea.input{resize:vertical;min-height:80px}
.field{margin-bottom:14px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:400}
.check input{margin-top:3px}

/* cartões e etiquetas */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.tag.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tag.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.tag.err{background:var(--err-soft);border-color:transparent;color:var(--err)}
.tag.acc{background:var(--acc-soft);border-color:transparent;color:var(--acc-d)}
.alert{padding:12px 14px;border-radius:10px;font-size:14px}
.alert.warn{background:var(--warn-soft);color:#7C3A06}
.alert.err{background:var(--err-soft);color:#8B1414}
.alert.ok{background:var(--ok-soft);color:#0E5A2B}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;
  font-size:14px;z-index:999;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
#toast.err{background:var(--err)}

/* spinner */
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* logo */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.03em;text-decoration:none}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--acc);display:grid;place-items:center;color:#fff;font-style:normal;font-size:15px}

/* tabela */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
.table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap{overflow-x:auto}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(20,20,20,.45);display:grid;place-items:center;z-index:900;padding:16px}
.modal{background:var(--surface);border-radius:18px;padding:24px;width:100%;max-width:460px;max-height:90vh;overflow:auto}
.modal h3{margin-bottom:10px}