/* Stiluri proprii platformei (fără build). Folosesc culorile temei Filament (--primary-*, --gray-*). */
[x-cloak] { display: none !important; }

.ot-collector { display: flex; flex-direction: column; gap: 1rem; max-width: 40rem; margin: 0 auto; width: 100%; }

.ot-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04);
    display: flex; flex-direction: column; gap: .9rem;
}
.ot-card h2 { font-size: 1.35rem; font-weight: 650; line-height: 1.3; color: var(--gray-900); margin: 0; }
.ot-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.ot-muted { color: var(--gray-500); }
.ot-small { font-size: .85rem; }
.ot-intro { background: var(--primary-50); border-radius: .75rem; padding: .85rem 1rem; color: var(--gray-700); }

/* Bara de stare */
.ot-status { display: flex; flex-wrap: wrap; gap: .5rem; }
.ot-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--gray-100); color: var(--gray-700);
    border-radius: 999px; padding: .3rem .75rem; font-size: .85rem;
}
.ot-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.ot-pill-ok { background: #ecfdf5; color: #047857; }
.ot-pill-off { background: #fff1f2; color: #be123c; }
.ot-pill-warn { background: #fffbeb; color: #b45309; }

/* Butoane */
.ot-btn {
    border-radius: .85rem; padding: .85rem 1.1rem; font-weight: 600; font-size: 1rem;
    border: 1px solid transparent; cursor: pointer; transition: transform .06s, background .15s;
    touch-action: manipulation;
}
.ot-btn:active { transform: scale(.98); }
.ot-btn-primary { background: var(--primary-600); color: #fff; }
.ot-btn-primary:hover { background: var(--primary-500); }
.ot-btn-secondary { background: #fff; border-color: var(--gray-300); color: var(--gray-700); }
.ot-btn-xl { padding: 1.15rem; font-size: 1.15rem; }
.ot-link { background: none; border: 0; color: var(--primary-600); font-weight: 500; cursor: pointer; padding: .25rem; }
.ot-danger { color: #e11d48; }
.ot-nav { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; }
.ot-nav .ot-btn-primary { flex: 1; }

/* Variante de răspuns */
.ot-options { display: grid; gap: .6rem; }
.ot-option {
    --ot-accent: var(--primary-600);
    text-align: left; font-size: 1.1rem; font-weight: 500;
    padding: 1rem 1.1rem; border-radius: .85rem;
    border: 2px solid var(--gray-200); background: #fff; color: var(--gray-800);
    cursor: pointer; touch-action: manipulation; transition: border-color .12s, background .12s;
    border-left-width: 6px; border-left-color: var(--ot-accent);
}
.ot-option:hover { border-color: var(--gray-300); border-left-color: var(--ot-accent); }
.ot-option.ot-selected { border-color: var(--ot-accent); background: var(--primary-50); font-weight: 650; }
.ot-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .5rem; }
.ot-scale-btn { text-align: center; border-left-width: 2px; padding: .9rem 0; }
.ot-input {
    width: 100%; font-size: 1.1rem; padding: .85rem 1rem; border-radius: .75rem;
    border: 1px solid var(--gray-300); background: #fff;
}
.ot-input:focus { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.ot-error { color: #e11d48; font-weight: 500; margin: 0; }

.ot-progress { height: .4rem; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.ot-progress > div { height: 100%; background: var(--primary-500); transition: width .2s; }

/* Ecrane */
.ot-start { text-align: center; align-items: stretch; }
.ot-list { display: grid; gap: .75rem; }
.ot-pick { text-align: left; cursor: pointer; gap: .25rem; }
.ot-pick:hover { border-color: var(--primary-300); }
.ot-tag {
    align-self: flex-start; background: #fef3c7; color: #92400e; font-size: .72rem; font-weight: 700;
    letter-spacing: .05em; border-radius: .4rem; padding: .15rem .5rem;
}
.ot-start .ot-tag { align-self: center; }
.ot-review { display: grid; gap: .5rem; margin: 0; }
.ot-review > div { border: 1px solid var(--gray-200); border-radius: .7rem; padding: .6rem .85rem; cursor: pointer; }
.ot-review dt { font-size: .85rem; color: var(--gray-500); }
.ot-review dd { margin: 0; font-weight: 600; color: var(--gray-900); }
.ot-done { align-items: center; text-align: center; padding: 2.5rem 1rem; }
.ot-check {
    width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center;
    background: #ecfdf5; color: #059669; font-size: 2rem; font-weight: 700;
}
.ot-empty { align-items: center; text-align: center; padding: 2rem 1rem; }
.ot-empty-icon { font-size: 2.2rem; }

.ot-point-picker { display: flex; flex-direction: column; gap: .35rem; max-width: 40rem; margin: 0 auto; width: 100%; }
.ot-point-picker label { font-size: .85rem; color: var(--gray-500); }
.ot-point-picker select {
    font-size: 1rem; padding: .7rem .9rem; border-radius: .75rem; border: 1px solid var(--gray-300); background: #fff;
}

/* Analiză: tabel estimare exit-poll */
.ot-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ot-table th { text-align: left; color: var(--gray-500); font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid var(--gray-200); }
.ot-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.ot-table td.num, .ot-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ot-bar { height: .55rem; border-radius: 999px; background: var(--gray-100); overflow: hidden; min-width: 6rem; }
.ot-bar > div { height: 100%; border-radius: 999px; }
.ot-note { font-size: .82rem; color: var(--gray-500); margin-top: .75rem; }
.ot-chip { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-right: .4rem; vertical-align: -1px; }
.ot-text-answers { display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; }
.ot-text-answers li { background: var(--gray-50); border-radius: .6rem; padding: .55rem .8rem; list-style: none; }
.ot-text-answers li small { color: var(--gray-500); display: block; margin-top: .15rem; }