*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06070d; --bg-elev:#0e1020; --bg-elev2:#161930;
  --border:#232853; --text:#e0e6f3; --muted:#8a92ad;
  --accent:#38bdf8; --accent-soft:rgba(56,189,248,.18);
  --success:#34d399; --danger:#f87171; --warn:#fbbf24;
}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;min-height:100vh}
.hidden{display:none !important}
.screen{min-height:100vh}
.muted{color:var(--muted)}
.small{font-size:12px}

/* LOGIN */
#screen-login{display:flex;align-items:center;justify-content:center}
.login-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;padding:40px;max-width:420px;width:90%}
.brand-wrap{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.brand-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#818cf8);box-shadow:0 0 16px var(--accent)}
.login-card h1{font-size:24px;letter-spacing:4px}
.login-tag{color:var(--muted);font-size:12px;letter-spacing:2px;margin-bottom:28px;text-transform:uppercase}

label{display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;margin-top:14px}
input,select,textarea{width:100%;padding:12px 14px;background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:60px}

button{font-family:inherit;cursor:pointer}
button.primary{display:inline-block;padding:12px 22px;background:linear-gradient(135deg,var(--accent),#1d4ed8);color:#02050f;border:none;border-radius:10px;font-size:14px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
button.primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-soft)}
button.primary.full{display:block;width:100%;padding:14px;margin-top:18px}
button.ghost{padding:8px 14px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:8px;font-size:13px}
button.ghost:hover{color:var(--text);border-color:var(--accent)}
button.ghost.small{padding:6px 10px;font-size:12px}

#login-msg{margin-top:12px;font-size:13px}
.err{color:var(--danger)} .ok{color:var(--success)}

/* APP */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0a0d1e,var(--bg));position:sticky;top:0;z-index:10;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:10px}
.brand h1{font-size:14px;font-weight:800;letter-spacing:4px}
.brand-tag{font-size:10px;color:var(--muted);letter-spacing:2px;margin-left:4px}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{background:transparent;color:var(--muted);border:1px solid transparent;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600}
.tab:hover{color:var(--text);background:var(--bg-elev)}
.tab.active{color:var(--text);background:var(--bg-elev2);border-color:var(--border)}
.user-area{display:flex;align-items:center;gap:10px}

main{max-width:1200px;margin:0 auto;padding:30px 26px}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadein .15s}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.tab-pane h2{margin-bottom:8px;font-size:24px;font-weight:800}
.tab-pane h3{margin:24px 0 12px;font-size:16px;font-weight:700}

.form-row{margin-bottom:22px}
.action-row{display:flex;gap:14px;align-items:center;margin:18px 0}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filter-row select{width:auto}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.toggle-row{padding:14px 16px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px}
.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:var(--text)}
.toggle-label input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);margin:0}
.toggle-label>span{font-weight:600}
.toggle-row>.muted.small{margin:6px 0 0 32px}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin-bottom:14px}
.card pre{background:#04050e;padding:10px;border-radius:6px;font-size:11px;overflow:auto;color:#8ee9ff}

.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg-elev);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted)}
.chip:hover{color:var(--text)}
.chip.selected{background:var(--accent);border-color:var(--accent);color:#02050f}

.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.preset{cursor:pointer;padding:12px;border-radius:10px;border:2px solid var(--border);background:var(--bg-elev);transition:all .15s}
.preset:hover{transform:translateY(-2px)}
.preset.selected{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.preset-swatches{display:flex;gap:3px;margin-bottom:6px}
.preset-swatch{width:18px;height:18px;border-radius:3px}
.preset-name{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}

.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.template-card{cursor:pointer;padding:14px;border-radius:10px;border:2px solid var(--border);background:var(--bg-elev);display:flex;gap:10px}
.template-card:hover{border-color:var(--accent)}
.template-card.selected{border-color:var(--text)}
.template-icon{font-size:28px}
.template-name{font-weight:700;margin-bottom:2px;font-size:13px}
.template-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:30px}
.stat-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:18px}
.stat-card .lbl{font-size:11px;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase}
.stat-card .val{font-size:30px;font-weight:800;margin-top:4px}
.stat-card.accent .val{color:var(--accent)}
.stat-card.success .val{color:var(--success)}
.stat-card.danger .val{color:var(--danger)}

/* ACCOUNTS */
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:20px}
.account-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px}
.account-card:hover{border-color:var(--accent)}
.account-card.default{border-color:var(--success);box-shadow:0 0 0 2px rgba(52,211,153,.1)}
.account-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--bg-elev2)}
.account-card .info{flex:1;min-width:0}
.account-card .name{font-weight:700;font-size:14px}
.account-card .uname{font-size:12px;color:var(--muted)}
.account-card .badge{padding:2px 8px;border-radius:999px;background:var(--success);color:#02050f;font-size:10px;font-weight:700}

/* CAROUSELS GRID (dashboard + historico) */
.carousels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.carousel-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.carousel-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.carousel-thumb{width:100%;aspect-ratio:4/5;background:var(--bg-elev2) center/cover;position:relative}
.carousel-thumb.empty{display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--muted)}
.carousel-thumb .badge{position:absolute;top:8px;right:8px;padding:3px 8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;border-radius:4px}
.carousel-meta{padding:10px}
.carousel-meta .topic{font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.carousel-meta .info{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--muted)}
.carousel-actions{display:flex;gap:4px;padding:0 10px 10px}
.carousel-actions button{flex:1;padding:5px;font-size:11px}

/* SCHEDULED */
.sched-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;flex-wrap:wrap}
.sched-row .when{font-weight:700;font-size:13px;min-width:130px}
.sched-row .kind{padding:3px 8px;background:var(--bg-elev2);border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase}
.sched-row .caption{flex:1;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:100px}
.sched-row .status{padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase}
.sched-row .status.scheduled{background:rgba(56,189,248,.15);color:var(--accent)}
.sched-row .status.published{background:rgba(52,211,153,.15);color:var(--success)}
.sched-row .status.failed,.sched-row .status.canceled{background:rgba(248,113,113,.15);color:var(--danger)}
.sched-row .status.publishing{background:rgba(251,191,36,.15);color:var(--warn)}

/* LOGS */
#logs-list{font-family:'JetBrains Mono','Courier New',monospace;font-size:11px}
.log-row{padding:6px 10px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:140px 60px 90px 1fr;gap:10px;align-items:center}
.log-row .ts{color:var(--muted)}
.log-row .lvl{font-weight:700;text-transform:uppercase;font-size:9px;padding:1px 6px;border-radius:4px}
.log-row .lvl.error{background:rgba(248,113,113,.2);color:var(--danger)}
.log-row .lvl.warn{background:rgba(251,191,36,.2);color:var(--warn)}
.log-row .lvl.info{background:rgba(56,189,248,.2);color:var(--accent)}
.log-row .lvl.debug{background:rgba(138,146,173,.2);color:var(--muted)}
.log-row .src{color:var(--muted)}
.log-row .msg{color:var(--text);overflow:hidden;text-overflow:ellipsis}

/* CALENDAR */
#calendar{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:20px;margin-top:20px;--fc-border-color:var(--border);--fc-page-bg-color:var(--bg-elev);--fc-neutral-bg-color:var(--bg-elev2);--fc-today-bg-color:rgba(56,189,248,.05);--fc-button-bg-color:var(--bg-elev2);--fc-button-border-color:var(--border);--fc-button-hover-bg-color:var(--accent);--fc-button-active-bg-color:var(--accent);--fc-event-bg-color:var(--accent);--fc-event-border-color:var(--accent)}
.fc,.fc *{color:var(--text)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;max-width:720px;width:90%;max-height:85vh;overflow:auto}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
#modal-body{padding:22px}
.progress{background:var(--bg-elev2);border-radius:999px;overflow:hidden;height:8px;margin:0 0 6px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#818cf8);width:0%;transition:width .4s}
#modal-progress-num{margin-bottom:14px}
#modal-log{background:#04050e;color:#8ee9ff;font-size:11px;padding:10px;border-radius:6px;max-height:120px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:'JetBrains Mono',monospace}
#modal-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
#modal-gallery:not(:empty){border:2px solid var(--accent);padding:10px;border-radius:8px;background:rgba(56,189,248,0.06)}
#modal-gallery img{width:100%;border-radius:6px;aspect-ratio:4/5;object-fit:cover;cursor:pointer;background:#1a1a1a}
#modal-gallery-title{display:none;font-size:13px;font-weight:700;color:var(--accent);margin-top:18px;margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase}
#modal-gallery-title.show{display:block}

/* COSTS TAB */
.costs-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 24px; }
.cost-card { padding: 22px 24px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; }
.cost-card.big { background: linear-gradient(135deg, var(--bg-elev2), #1c2050); }
.cost-card .lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.cost-card .val { font-size: 32px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cost-card.big .val { font-size: 44px; color: var(--accent); }
.cost-card .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.costs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.cost-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; }
.api-name { font-weight: 700; font-size: 14px; }
.api-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.api-cost { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cost-table { width: 100%; border-collapse: collapse; }
.cost-table th, .cost-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.cost-table th { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cost-table td.cost { color: var(--accent); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cost-table .kind-pill { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: var(--bg-elev2); color: var(--muted); }

.slide-thumb-wrap{position:relative}
.slide-thumb-wrap a{display:block}
.slide-edit-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.78);color:#fff;border:1px solid rgba(255,255,255,0.4);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.15s;z-index:2}
.slide-edit-btn:hover{background:var(--accent);border-color:#fff;transform:scale(1.1)}

.posting-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(59,130,246,0.95);color:#fff;padding:6px 14px;border-radius:20px;font-weight:700;font-size:13px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.published-badge{position:absolute;top:8px;left:8px;background:#16a34a;color:#fff;padding:4px 10px;border-radius:6px;font-weight:800;font-size:11px;letter-spacing:0.8px;box-shadow:0 4px 12px rgba(22,163,74,0.5);z-index:3}
.carousel-card.published{box-shadow:0 0 0 1.5px rgba(34,197,94,0.45) inset;border-radius:10px}

/* === FULLCALENDAR — scroll por dia evita layout deformado === */
.fc .fc-daygrid-day-frame{max-height:140px;overflow:hidden;display:flex;flex-direction:column}
.fc .fc-daygrid-day-events{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#475569 transparent}
.fc .fc-daygrid-day-events::-webkit-scrollbar{width:5px}
.fc .fc-daygrid-day-events::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
.fc .fc-daygrid-day-events::-webkit-scrollbar-track{background:transparent}
.fc .fc-daygrid-day.fc-day-today{background:rgba(56,189,248,0.06)}
.fc .fc-event{font-size:11px;padding:2px 4px;cursor:pointer}
.fc .fc-event:hover{filter:brightness(1.15)}
/* Indica que tem mais quando o dia transborda */
.fc .fc-daygrid-day-events:not(:hover){scrollbar-color:transparent transparent}

/* ===== MEDIA LIBRARY ===== */
.ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ml-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.15s, border-color 0.15s}
.ml-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.ml-thumb{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center}
.ml-thumb img,.ml-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.ml-preview-fallback{font-size:54px;color:#475569;text-align:center;padding:24px;width:100%}
.ml-kind-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,0.78);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:0.6px}
.ml-meta{padding:10px 12px;flex:1}
.ml-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.ml-actions{display:flex;gap:4px;padding:6px 10px 10px;border-top:1px solid var(--border)}
.ml-actions > *{flex:1;text-align:center;font-size:12px}

.scheduled-badge{position:absolute;top:8px;left:8px;background:#f59e0b;color:#fff;padding:4px 10px;border-radius:6px;font-weight:800;font-size:10.5px;letter-spacing:0.6px;box-shadow:0 4px 12px rgba(245,158,11,0.5);z-index:3;display:flex;align-items:center;gap:4px}
.carousel-card.scheduled{box-shadow:0 0 0 1.5px rgba(245,158,11,0.5) inset;border-radius:10px}

#modal-job-info{background:rgba(56,189,248,0.05);border:1px solid rgba(56,189,248,0.25);border-radius:10px;padding:14px 16px;margin:16px 0;font-size:13px;line-height:1.5}
#modal-job-info .mji-row{display:flex;gap:8px;margin-bottom:6px;align-items:flex-start}
#modal-job-info .mji-label{color:var(--accent);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.6px;min-width:120px;padding-top:2px}
#modal-job-info .mji-value{flex:1;color:var(--text);word-break:break-word}
#modal-job-info .mji-prompt{background:#0a0a0a;border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;max-height:160px;overflow-y:auto;color:#e0f2fe}
#modal-job-info .mji-pill{display:inline-block;background:rgba(56,189,248,0.15);border:1px solid rgba(56,189,248,0.4);color:#7dd3fc;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.5px;margin-right:4px;margin-top:2px}

/* === PILLS GENERICAS (usadas fora do modal-job-info) === */
.pill-tag{display:inline-block;background:rgba(56,189,248,0.15);border:1px solid rgba(56,189,248,0.4);color:#7dd3fc;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.5px;margin:3px 4px 3px 0}

.substyle-card{position:relative;background:#0a0a0a;border:2px solid #2a2a2a;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color 0.15s, transform 0.15s}
.substyle-card:hover{border-color:#fbbf24;transform:translateY(-2px)}
.substyle-card.selected{border-color:#fbbf24;box-shadow:0 0 0 1.5px #fbbf24 inset}
.substyle-card .substyle-thumb{aspect-ratio:4/5;width:100%;object-fit:cover;display:block}
.substyle-card .substyle-meta{padding:8px 10px;font-size:11px}
.substyle-card .substyle-name{font-weight:800;color:#fbbf24;font-size:12px}
.substyle-card .substyle-desc{color:#888;margin-top:2px;line-height:1.3}