/* Gerador de Narrativas Odontológicas - Dark Mode */

:root {
    --bg-dark: #070a10;
    --bg-shell: #0b1220;
    --bg-card: #0f1a2b;
    --bg-card-2: #0d1626;
    --bg-input: rgba(255,255,255,.06);
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #2f6fed;
    --accent-hover: #255bd6;
    --success: #22c55e;
    --warning: #eab308;
    --danger: #ef4444;
    --border: rgba(255,255,255,.10);
    --border-2: rgba(255,255,255,.06);
    --radius: 14px;
    --shadow: 0 14px 45px rgba(0,0,0,.45);
    --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box;
}

body.dark {
    background:
        radial-gradient(900px 450px at 50% 18%, rgba(47,111,237,.18), rgba(7,10,16,0) 65%),
        radial-gradient(900px 450px at 18% 28%, rgba(33,120,255,.10), rgba(7,10,16,0) 60%),
        radial-gradient(900px 450px at 82% 28%, rgba(33,120,255,.08), rgba(7,10,16,0) 60%),
        var(--bg-dark);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
}

.topbar {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-user .user-name {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.topbar-user .btn-logout,
.topbar-user .btn-login {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.topbar-user .btn-logout {
    background: rgba(239,68,68,.2);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.4);
}

.topbar-user .btn-logout:hover {
    background: rgba(239,68,68,.35);
}

.topbar-user .btn-login {
    background: var(--accent);
    color: #fff;
}

.topbar-user .btn-login:hover {
    background: var(--accent-hover);
}

.tabs {
    display: inline-flex;
    gap: .25rem;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: .35rem;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
}

.tab {
    color: rgba(241,245,249,.85);
    text-decoration: none;
    padding: .6rem 1rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.tab:hover {
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
}

.tab.active {
    background: var(--accent);
    color: #fff;
}

.tab-icon {
    opacity: .95;
}

.main-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2.5rem;
}

/* Center hero (imagem 1) */
.hero-center {
    text-align: center;
    margin: .75rem 0 1.25rem;
}

.hero-title {
    margin: 0;
    font-size: 2rem;
    letter-spacing: .2px;
}

.hero-subtitle {
    margin: .4rem 0 0;
    color: rgba(241,245,249,.7);
    font-size: 1rem;
}

.step-center {
    text-align: center;
    margin: 1.25rem 0 1rem;
}

.step-h {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Cards */
.card {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.narrative-card {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.1);
}

.reload-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    min-height: 200px;
    text-align: center;
    border-style: dashed;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.03);
}

.reload-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: .9;
}

.reload-text {
    color: rgba(241,245,249,.8);
    font-size: .95rem;
}

.reload-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

.reload-link:hover { text-decoration: underline; color: var(--accent-hover); }

/* Etapa 2 (imagem 2) - Headlines list */
.page-headlines {
    max-width: 980px;
    margin: 0 auto;
}

.step-actions {
    margin-top: .75rem;
    display: inline-flex;
    gap: .75rem;
    align-items: center;
}

.link-action {
    color: rgba(47,111,237,.95);
    text-decoration: none;
    font-size: .9rem;
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.link-action:hover { text-decoration: underline; }

.btn-soft {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(241,245,249,.88);
    padding: .5rem .9rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
}

.btn-soft:hover {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
}

.headline-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

.headline-row {
    margin: 0;
}

.headline-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    color: #fff;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
}

.headline-btn:hover {
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.headline-text {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 650;
    font-size: .95rem;
    line-height: 1.35;
    color: rgba(241,245,249,.92);
}

.headline-arrow {
    font-size: 1.4rem;
    opacity: .75;
}

.mini-icon { opacity: .9; }

.hero-card {
    margin-bottom: 1.5rem;
}

.hero-card.compact {
    padding: 1rem 1.5rem;
}

.title-main {
    font-size: 1.5rem;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.title-icon {
    opacity: .9;
}

.slogan {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: 1rem;
}

/* Form theme */
.form-theme .theme-input-wrap {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.input-theme {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .75rem 1rem;
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}

.input-theme::placeholder {
    color: var(--text-muted);
}

.btn-send {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .75rem 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background .2s;
}

.btn-send:hover {
    background: var(--accent-hover);
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: 1rem;
}

.suggestions-label {
    color: var(--text-muted);
    font-size: .875rem;
    margin-right: .25rem;
}

.pill {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    padding: .35rem .75rem;
    font-size: .875rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.pill:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Step section */
.section-step {
    margin-top: 2rem;
}

.step-title {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.step-hint {
    color: var(--text-muted);
    margin: 0;
}

/* Narratives grid */
.narratives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.narrative-card {
    display: flex;
    flex-direction: column;
}

.narrative-card-title {
    font-size: 1rem;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.narrative-card-desc {
    color: var(--text-muted);
    font-size: .875rem;
    margin: 0 0 1rem;
    flex: 1;
}

.btn-select {
    align-self: flex-end;
    text-decoration: none;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .875rem;
    cursor: pointer;
    transition: background .2s;
}

.btn-select:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* Actions row */
.actions-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    align-items: center;
}

.regenerate-form .regenerate-label {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
}

.regenerate-form .format-select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .5rem .75rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    min-height: 42px;
    cursor: pointer;
}

.regenerate-form .format-select option {
    background: var(--bg-card);
    color: var(--text);
    padding: .5rem;
}

.form-hint {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: .5rem;
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem 1rem;
    text-decoration: none;
    font-size: .875rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: background .2s;
}

.btn-secondary:hover {
    background: var(--border);
    color: var(--text);
}

/* Estrutura / Edit */
.block-card {
    margin-bottom: 1.5rem;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.block-title {
    font-size: 1.1rem;
    margin: 0;
}

.btn-edit {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: .35rem .75rem;
    border-radius: var(--radius);
    font-size: .875rem;
    cursor: pointer;
}

.textarea-block {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: .75rem;
    font-size: .95rem;
    resize: vertical;
    min-height: 60px;
}

.block-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.block-num {
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    flex-shrink: 0;
}

.block-item-content {
    flex: 1;
}

.block-label {
    display: block;
    font-size: .9rem;
    margin-bottom: .25rem;
    color: var(--text-muted);
}

.link-back {
    color: var(--accent);
    font-size: .9rem;
    text-decoration: none;
}

.link-back:hover {
    text-decoration: underline;
}

.form-actions {
    margin-top: 2rem;
    text-align: center;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .6rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .2s;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-lg {
    padding: .75rem 1.5rem;
    font-size: 1.05rem;
}

.btn-success {
    background: var(--success);
}

.btn-success:hover {
    background: #16a34a;
}

/* Content page */
.content-card .content-label {
    font-size: .9rem;
    color: var(--text-muted);
    margin: 0 0 .5rem;
}

.content-title {
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.content-actions {
    margin-bottom: 1rem;
}

.teleprompter-actions-hidden {
    display: none !important;
}

.btn-teleprompter {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .2s;
}

.btn-teleprompter:hover {
    filter: brightness(1.1);
}

.content-body {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Carrossel (slider) na página de conteúdo */
.content-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .5rem;
    min-height: 200px;
    margin-bottom: 2.5rem;
}

.content-carousel-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
}

.content-carousel-track {
    display: flex;
    height: 100%;
    transition: transform .3s ease;
}

.content-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    min-height: 180px;
    display: none;
    padding: 1.5rem;
    box-sizing: border-box;
}

.content-carousel-slide.active {
    display: block;
}

.content-carousel-slide-inner {
    white-space: pre-wrap;
    line-height: 1.65;
    color: var(--text);
}

.content-carousel-slide-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1rem;
    line-height: 1.4;
}

.content-carousel-slide-body {
    color: var(--text);
    opacity: .95;
}

.content-carousel-btn {
    flex-shrink: 0;
    width: 44px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}

.content-carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.content-carousel-dots {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.content-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-input);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.content-carousel-dot:hover {
    background: var(--text-muted);
}

.content-carousel-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.2);
}

/* Teleprompter (Reels / Stories) */
.teleprompter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
}

.teleprompter-overlay[hidden] {
    display: none !important;
}

.teleprompter-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: #1a1a1a;
    border-bottom: 1px solid var(--border);
}

.teleprompter-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.teleprompter-sep {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0 .15rem;
}

.teleprompter-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.teleprompter-btn:hover {
    background: var(--border);
}

.teleprompter-speed-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
}

.teleprompter-speed-label select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .4rem .6rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

/* Opções do dropdown legíveis (fundo claro, texto escuro quando o menu abre) */
.teleprompter-speed-label select option {
    background: #ffffff;
    color: #0f172a;
    padding: .5rem;
}

.teleprompter-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background .2s;
}

.teleprompter-close:hover {
    background: rgba(239, 68, 68, .2);
    border-color: var(--danger);
    color: #fca5a5;
}

.teleprompter-viewport {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.teleprompter-text {
    max-width: 720px;
    width: 100%;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.7;
    color: #fff;
    white-space: pre-wrap;
    text-align: center;
    will-change: transform;
    transition: font-size .15s ease;
}

.teleprompter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.approve-form {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    margin-bottom: .35rem;
    font-size: .9rem;
}

.form-row input,
.form-row select {
    width: 100%;
    padding: .5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1rem;
}

.form-row select option {
    background: var(--bg-card);
    color: var(--text);
}

.form-row + .btn {
    margin-top: 1rem;
}

/* Alerts */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.alert-error {
    background: rgba(239, 68, 68, .15);
    border: 1px solid var(--danger);
    color: #fca5a5;
}

.alert-success {
    background: rgba(34, 197, 94, .15);
    border: 1px solid var(--success);
    color: #86efac;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Planning / Kanban */
.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.view-toggle {
    display: flex;
    gap: .25rem;
}

.btn-view {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: .5rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: .9rem;
    transition: background .2s, color .2s;
}

.btn-view:hover,
.btn-view.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1000px) {
    .kanban-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
}

.kanban-col {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1rem;
    min-height: 200px;
}

.kanban-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
}

.kanban-col-title {
    font-size: 1rem;
    margin: 0;
}

.col-todo .kanban-col-header { border-bottom-color: #3b82f6; }
.col-doing .kanban-col-header { border-bottom-color: #eab308; }
.col-done .kanban-col-header { border-bottom-color: #8b5cf6; }
.col-published .kanban-col-header { border-bottom-color: #22c55e; }

.kanban-col-count {
    font-size: .8rem;
    color: var(--text-muted);
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 80px;
}

.item-card {
    padding: 1rem;
    cursor: grab;
}

.item-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.kanban-cards.drop-over {
    background: rgba(47, 111, 237, 0.1);
    border: 2px dashed var(--accent);
    border-radius: 8px;
}

.item-card-clickable {
    cursor: pointer;
}

.item-card-title {
    font-size: .95rem;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.item-card-format {
    display: inline-block;
    font-size: .75rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    margin-right: .5rem;
}

.format-carrossel { background: #ec4899; color: #fff; }
.format-reels { background: #f97316; color: #fff; }
.format-stories { background: #ef4444; color: #fff; }

.item-card-date {
    display: block;
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .35rem;
}

.item-card-actions {
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.form-status {
    display: inline;
    margin: 0;
}

.btn-status {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: 6px;
    cursor: pointer;
}

.btn-status:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: .5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-danger:hover {
    background: #dc2626;
}

.modal-view-body {
    margin: 1rem 0;
}

.modal-view-title {
    font-weight: 600;
    margin: 0 0 .5rem;
    line-height: 1.4;
}

.modal-view-meta {
    color: var(--text-muted);
    margin: 0 0 .75rem;
}

.link-narrative {
    color: var(--accent);
    font-size: .9rem;
}

.link-narrative:hover {
    text-decoration: underline;
}

.btn-add-task {
    width: 100%;
    margin-top: .5rem;
    padding: .5rem;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .9rem;
}

.btn-add-task:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal[hidden] {
    display: none;
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 420px;
    width: 90%;
    border: 1px solid var(--border);
}

.modal-content h3 {
    margin: 0 0 1rem;
}

.modal-content label {
    display: block;
    margin-bottom: .25rem;
    font-size: .9rem;
}

.modal-content input,
.modal-content select {
    width: 100%;
    padding: .5rem;
    margin-bottom: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.modal-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Calendar */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.btn-nav {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s;
}

.btn-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.calendar-title {
    font-size: 1.25rem;
    margin: 0;
}

.calendar-grid {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-input);
    padding: .5rem;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    min-height: 100px;
    padding: .5rem;
    border: 1px solid var(--border);
    font-size: .9rem;
}

.calendar-day.empty {
    background: var(--bg-dark);
}

.calendar-day.today {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.day-num {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.calendar-item {
    font-size: .75rem;
    padding: .25rem;
    margin-bottom: .25rem;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-item.format-carrossel { background: rgba(236,72,153,.3); }
.calendar-item.format-reels { background: rgba(249,115,22,.3); }
.calendar-item.format-stories { background: rgba(239,68,68,.3); }