/* Giro Bio's warm dashboard language adapted to the Giro Studio editor. */
:root {
  color-scheme: light;
  --bg: #f7f5ef;
  --sidebar: #061526;
  --panel: #fffefa;
  --panel2: #fbf8f0;
  --line: #e8dfcd;
  --muted: #526174;
  --text: #102338;
  --yellow: #e5b963;
  --green: #11704b;
  --radius: 16px;
}
body {background:var(--bg);color:var(--text)}
body::selection {background:#f7eacb}

/* Dark brand rail, light task workspace. */
.sidebar {
  background:linear-gradient(165deg,#061526,#0d2540 64%,#071927);
  border-right:1px solid #17344b;
  box-shadow:none;
  color:#f7f0dd;
}
.brand-mark {color:#e5b963;filter:drop-shadow(0 0 8px #e5b96345)}
.brand-studio {color:#f0e8d4}
.brand small,.nav-label,.sidebar-version {color:#a9bcc9}
.workspace {background:#17334b;border-color:#36546a;box-shadow:none}
.workspace-icon {background:#35516a;color:#f3c775}
.workspace strong {color:#f8f0dc}
.workspace small,.local-tag {color:#bdccd1}
.nav-item {color:#c9d7dd}
.nav-item:hover {background:#24425b;color:#fff}
.nav-item.active {
  background:#e5b963;color:#061526;border-color:#e5b963;
  box-shadow:0 6px 18px #0003;
}
.nav-item.active svg {color:#061526}
.nav-count {background:#29455b;color:#ecf1ee}
.nav-item.active .nav-count {background:#061526;color:#f7eacb}
.sidebar-note {background:#132e43;border-color:#38566c}
.sidebar-note .note-orbit,.sidebar-note strong,.text-button {color:#f1c778}
.sidebar-note p,.engine-state small {color:#c3d0d4}
.engine-state strong {color:#f0ece0}
.engine-state .status-dot,.local-indicator .status-dot {background:#60ce9b;box-shadow:0 0 9px #60ce9b55}

.main-wrap {background:var(--bg)}
.topbar {background:#f7f5efeF;border-bottom:1px solid #e3d8c4;color:#102338}
.breadcrumbs {color:#5c6876}
.breadcrumbs strong {color:#102338}
.breadcrumb-slash {color:#a5967e}
.local-indicator {color:#416857}
.account-button {background:#fffefa;border-color:#d8c8aa;color:#26384b}
.account-button:hover {background:#f7eacb;border-color:#ab8650}
main {max-width:1440px}
.eyebrow {color:#956117}
.eyebrow>span {background:#956117;box-shadow:0 0 0 4px #95611715}
h1,.page-heading h1 {color:#102338}
em,.page-heading h1 em {color:#956117;text-shadow:none}
.page-heading {border-bottom-color:#e0d5c1}
.page-heading::after {background:#956117}
.page-heading p {color:#526174}
.page-heading>.button.secondary {background:#fffefa}
.button {box-shadow:none}
.button.primary {background:#956117;border-color:#956117;color:#fff;box-shadow:0 6px 15px #95611727}
.button.primary:hover {background:#794d11;border-color:#794d11;color:#fff}
.button.secondary {background:#fffefa;border-color:#d6c4a5;color:#744a10}
.button.secondary:hover {background:#f7eacb;border-color:#ad854a;color:#744a10}
.button.ghost {color:#744a10}
.button.ghost:hover {color:#523308}

/* Cards, forms, and choices use the same warm surfaces as Giro Bio. */
.editor,.panel,.project-card,.asset-card,.preview-column {
  background:#fffefa;border:1px solid #e5d9c5;
  box-shadow:0 4px 14px #1023380f;
}
.editor-top {background:#fbf8f0;border-bottom-color:#e8dfcd}
.project-indicator {background:#956117;box-shadow:0 0 0 4px #9561171b}
.editor-top input:not([type=checkbox]):not([type=range]) {color:#102338}
.save-state {color:#5e6a78}
.step-tabs {background:#fffefa;border-bottom-color:#e8dfcd}
.step-tab {color:#596a78}
.step-tab:hover {color:#102338;background:#fbf8f0}
.step-tab.active {background:#f7eacb;color:#744a10;border-bottom-color:#956117}
.step-tab>span {background:#f1eadb;border-color:#d8c8aa;color:#4c5a6a}
.step-tab.active>span {background:#956117;border-color:#956117;color:#fff}
.section-heading h2,.preview-heading h2,.panel h2 {color:#102338}
.section-heading p {color:#58697b}
.source-option,.caption-option,.voice-option,.aspect-option {
  background:#fffefa;border-color:#ded1bd;color:#102338;
  box-shadow:0 1px 2px #10233809;
}
.source-option:hover,.caption-option:hover,.voice-option:hover,.aspect-option:hover {
  background:#fbf8f0;border-color:#bfa77f;
}
.source-option.active,.caption-option.active,.voice-option.active,.aspect-option.active {
  background:#f7eacb;border-color:#a77125;
  box-shadow:inset 0 0 0 1px #a7712526,0 3px 10px #95611713;
}
.source-option strong,.caption-option strong,.voice-option strong,.aspect-option strong {color:#102338}
.source-option.active strong {color:#744a10}
.source-option small,.caption-option small,.voice-option small,.aspect-option small {color:#526174}
.source-icon,.voice-avatar {background:#f1eadb;color:#956117}
.source-option.active .source-icon,.voice-avatar.yellow {background:#e8d39f;color:#744a10}
.voice-avatar.cyan,.voice-avatar.purple {background:#e5ebee;color:#344e68}
.radio-dot {border-color:#9f9079}
.active>.radio-dot {background:#956117;border-color:#956117;box-shadow:inset 0 0 0 2px #fffefa}
.field-label label,label,.field-label>span:first-child {color:#25384b}
.field-label>span:last-child:not(:first-child),.inspiration>span {color:#6d7780}
input:not([type=checkbox]):not([type=range]),textarea,select {
  background:#fffefa;border-color:#ccbaa0;color:#102338;
}
textarea::placeholder,input::placeholder {color:#667586}
textarea:hover,input:not([type=checkbox]):hover,select:hover {border-color:#956117}
input:focus-visible,textarea:focus-visible,select:focus-visible {outline:2px solid #95611788;border-color:#956117}
.inspiration button {background:#fbf8f0;border-color:#ddcfb6;color:#744a10}
.inspiration button>span {color:#956117}
.inspiration button:hover {background:#f7eacb;border-color:#ad854a;color:#744a10}
.ai-button {background:#f7eacb;border-color:#c6a666;color:#744a10}
.ai-button:hover {background:#ead59f;color:#523308}
.script-meta,.field-hint,.advanced-fields summary {color:#586a77}
.advanced-fields {border-color:#e8dfcd}
.editor-footer {background:#fbf8f0;border-top-color:#e8dfcd}
.caption-sample {background:linear-gradient(135deg,#254055,#071b30)}
.caption-option.no-caption svg {color:#956117}
.tiny-badge {color:#744a10;border-color:#c6a666;background:#fff8e8}
.upload-zone {background:#fbf8f0;border-color:#cbb995;color:#526174}
.upload-zone:hover,.upload-zone.dragging {background:#f7eacb;border-color:#956117}
.upload-zone b {color:#744a10}
.upload-zone small {color:#586a77}
.upload-icon {background:#f1eadb;color:#956117}
.selected-image {background:#fffefa;border-color:#d8c8aa}
.image-actions button {color:#744a10}
.image-actions small {color:#5d6c79}
.switch-row {border-color:#e8dfcd}
.switch-row small {color:#586a77}
.render-summary,.render-readiness {background:#f7eacb;border-color:#d3b981}
.render-summary strong,.render-readiness strong {color:#744a10}
.render-summary p,.render-readiness ul {color:#465667}
.render-readiness button {color:#744a10}
.render-readiness.ready {background:#e9f7ee;border-color:#a3d8b9}
.render-readiness.ready strong {color:#11704b}
#duration-warning {color:#744a10;border-color:#c7ae7e}
.save-conflict {background:#fff2d9;border-color:#c9a469;color:#25384b}
.save-conflict p {color:#5c5347}
.job-banner {background:#e7f4ec;border-color:#b5d9c3;color:#1c5238}
.job-banner strong,.job-banner p {color:#1c5238}
.job-banner.failed {background:#fde6e3;border-color:#dda5a0}
.job-banner.failed strong {color:#9e3028}
.job-track {background:#c5d7cb}
.job-track span {background:#11704b}

/* The film remains dark inside a light preview card. */
.preview-heading h2 {color:#102338}
.live-badge {background:#f7eacb;border-color:#d1b173;color:#744a10}
.live-badge>span {background:#956117;box-shadow:none}
.preview-surface {background:#061526;border-color:#c8b99e;box-shadow:inset 0 0 0 5px #f1eadb,0 9px 22px #1023381c}
.preview-captions,.caption-sample {color:#fff}
.preview-captions b,.caption-sample.giro b {color:#ffe100}
.preview-captions.classic,.caption-sample.classic {color:#ffe100}
.preview-captions.classic b,.caption-sample.classic b {color:#00ff6e}
.preview-hook {color:#ffe100}
.video-progress span {background:#ffe100}
.preview-controls>span,.preview-details strong {color:#25384b}
.preview-controls>span>small,.preview-controls .preview-ratio {color:#647385}
.play-button {background:#102338;border-color:#102338;color:#fff}
.play-button:hover {color:#e5b963}
.preview-controls .icon-button {color:#744a10}
.preview-notice,.photo-credit,.preview-details span {color:#526174}
.preview-notice {border-bottom-color:#e8dfcd}
.tip-card {background:#fbf8f0;border-color:#e5d9c5}
.tip-card>span,.tip-card strong {color:#744a10}
.tip-card p {color:#526174}
.photo-credit a {color:#744a10}

/* Library, identity, account, and dialogs. */
.library-toolbar {border-color:#e4d7c1}
.filter-tabs>button {color:#526174}
.filter-tabs>button.active {background:#f7eacb;border-color:#d4bc88;color:#744a10}
.project-card-top {background:radial-gradient(circle at 74% 22%,#e5b96370,transparent 40%),linear-gradient(135deg,#21415a,#061526)}
.project-card-top .project-orbit svg {color:#e5b963}
.project-card-body h3,.asset-card h3 {color:#102338}
.project-card-body p,.asset-card small {color:#526174}
.project-status {background:#fffefaeE;color:#25384b;border-color:#dacbab}
.project-status.complete {color:#11704b;border-color:#87b99e}
.project-status.running,.project-status.queued {color:#744a10;border-color:#c4a15c}
.project-status.failed {color:#b3261e}
.empty-state {border-color:#cdbb9d;background:#fffefa}
.empty-state h2 {color:#102338}
.empty-state p {color:#526174}
.empty-state>span svg {color:#956117}
.brand-hero {background:radial-gradient(circle at 17% 40%,#e5b96344,transparent 45%),linear-gradient(135deg,#173750,#061526);border-color:#173750;color:#fff}
.brand-hero h2,.brand-hero p {color:#fff}
.panel p,.provider-row {color:#526174}
.provider-row {border-color:#e8dfcd}
.provider-row>span:last-child {color:#11704b}
.provider-row>span.missing {color:#956117}
dialog {background:#fffefa;border-color:#d6c4a5;color:#102338}
.auth-dialog>p,.confirm-dialog p,.auth-footnote {color:#526174}
.auth-tabs {border-color:#e8dfcd}
.auth-tabs button {color:#526174}
.auth-tabs button.active {color:#744a10;border-bottom-color:#956117}
.toast {background:#102338;border-color:#102338;color:#fff}
.toast.error {background:#8d2b26;border-color:#8d2b26;color:#fff}
.page-footer,.page-footer>span:last-child {color:#697787}
.page-footer b {color:#956117}

@media(max-width:720px) {
  body {background:#f7f5ef}
  .sidebar,.sidebar.open {
    position:fixed;inset:auto 0 0;width:100%;height:auto;
    display:flex;flex-direction:row;align-items:center;justify-content:space-around;
    padding:6px 5px calc(6px + env(safe-area-inset-bottom));
    transform:none;transition:none;box-shadow:0 -5px 22px #10233820;
    background:#fffefa;border:0;border-top:1px solid #e0d5c1;color:#526174;
  }
  .sidebar .brand,.sidebar .workspace,.sidebar .nav-label,.sidebar .sidebar-note,
  .sidebar .engine-state,.sidebar .sidebar-version {display:none}
  .sidebar nav,.sidebar-bottom {display:contents}
  .sidebar .nav-item {
    width:20%;min-width:0;min-height:56px;margin:0;padding:5px 2px;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
    border:0;border-radius:8px;font-size:9px;text-align:center;
    color:#526174;white-space:nowrap;
  }
  .sidebar .nav-item svg {width:19px;height:19px}
  .sidebar .nav-item.active {background:#f7eacb;color:#744a10;box-shadow:none}
  .sidebar .nav-plus,.sidebar .nav-count {display:none}
  #menu-button,#menu-backdrop {display:none!important}
  .topbar {background:#fffefa;height:60px}
  main {padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .page-heading p {color:#526174}
  .preview-column {background:#fffefa}
  .save-state {color:#526174}
  .project-card,.asset-card {box-shadow:0 3px 10px #1023380c}
}
@media(max-width:360px) {
  .sidebar .nav-item {font-size:8px}
  .sidebar .nav-item svg {width:17px;height:17px}
}

/* Auth dialog keeps a dark surface: its text needs light colors to stay readable. */
.auth-dialog h2,.confirm-dialog h2{color:#f3f6f7}
.auth-dialog label{color:#b9c8cf}
.auth-dialog>p,.confirm-dialog p,.auth-footnote{color:#a3b4bd}
.usage-row span:last-child{color:inherit;font-weight:600}


/* ---- Saldo pré-pago ---- */
.credit-chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid #d6c4a5;background:#fffefa;color:#744a10;font-size:11px;font-weight:600;white-space:nowrap}
.credit-chip svg{width:15px;height:15px}
.credit-chip:hover{background:#f7eacb;border-color:#ad854a}
.credit-chip.low{background:#fff2d9;border-color:#c9a469;color:#8a4b0b}
.credit-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:14px 18px;border:1px solid #c9a469;background:#fff2d9;border-radius:10px;color:#25384b}
.credit-banner strong{display:block;font-size:13px;color:#25384b}
.credit-banner p{margin:2px 0 0;font-size:12px;color:#5c5347}
.credit-panel{grid-column:1/-1}
.credit-balance{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.credit-balance strong{font-size:34px;letter-spacing:-1px;color:#102338}
.credit-balance span{font-size:13px;color:#744a10;font-weight:600}
.recharge-box{margin:6px 0 20px;padding:16px 18px;border:1px dashed #d6c4a5;border-radius:10px;background:#fffdf7}
.recharge-steps{margin:0 0 14px;padding-left:20px;color:#25384b;font-size:12px;line-height:1.9}
.recharge-actions{display:flex;gap:9px;flex-wrap:wrap}
.credit-panel h3{font-size:13px;margin:4px 0 6px;color:#102338}
.ledger{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto}
.ledger li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eadfcd;font-size:12px;color:#25384b}
.ledger li small{display:block;color:#7a8794;font-size:10px;margin-top:2px;font-weight:400}
.ledger li span:last-child{text-align:right;font-weight:600;white-space:nowrap}
.ledger .debit{color:#9a3412}
.ledger .credit{color:#1c6b43}
.ledger li.empty{color:#7a8794;justify-content:flex-start}
.giro-dialog{width:560px}
.giro-dialog label{display:block;color:#b9c8cf}
.giro-dialog .recharge-steps{color:#d6e1e6}
.giro-dialog .recharge-steps strong{color:#fff}
.giro-dialog form>.button{width:100%;margin-top:10px}
.giro-dialog .inline-field{display:flex;gap:8px;align-items:center}
.giro-dialog .inline-field .button{white-space:nowrap}
.giro-dialog .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#client-welcome{width:100%;min-height:180px;font-size:12px;margin-bottom:14px}
.amount-options{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0}
.amount-options button{padding:8px 12px;border-radius:999px;border:1px solid #476070;background:transparent;color:#e6eef1;font-size:11px}
.amount-options button:hover{border-color:#ffe100;color:#fff}
/* ---- Administração ---- */
.admin-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.admin-summary div{background:#fffefa;border:1px solid #ded1bd;border-radius:10px;padding:14px 16px}
.admin-summary small{display:block;color:#526174;font-size:11px}
.admin-summary strong{font-size:22px;color:#102338}
.admin-table-wrap{padding:0;overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:12px;color:#25384b}
.admin-table th{text-align:left;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#7a8794;padding:12px 16px;border-bottom:1px solid #eadfcd;font-weight:600}
.admin-table td{padding:12px 16px;border-bottom:1px solid #f0e7d8;vertical-align:middle}
.admin-table td strong{color:#102338}
.admin-table td small{display:block;color:#7a8794;font-size:11px}
.admin-table tr.no-credit td:nth-child(2),.admin-table tr.no-credit td:nth-child(3){color:#9a3412;font-weight:700}
.admin-table td.empty{color:#526174;padding:24px 16px}
.admin-table .button{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.admin-summary{grid-template-columns:1fr 1fr}.credit-banner{flex-direction:column;align-items:flex-start}.giro-dialog .two-fields{grid-template-columns:1fr}.credit-chip{padding:6px 10px;font-size:10px}}

/* ---- Pix com QR Code ---- */
.recharge-layout{display:flex;gap:22px;align-items:flex-start;justify-content:space-between}
.recharge-layout>div{flex:1;min-width:0}
.pix-qr{margin:0;flex:none;text-align:center}
.pix-qr img{display:block;width:156px;height:156px;border-radius:10px;background:#fff;border:1px solid #ded1bd}
.pix-qr figcaption{font-size:10px;color:#7a8794;margin-top:6px;max-width:156px}
.giro-dialog .pix-qr figcaption{color:#b9c8cf}
.giro-dialog .recharge-actions{display:flex;gap:9px;flex-wrap:wrap}
@media (max-width:760px){.recharge-layout{flex-direction:column}.pix-qr{align-self:center}}

/* ---- Iconografia e UX (Lucide) ---- */
.voice-avatar svg{width:17px;height:17px}
.inspiration button svg,#readiness-list button svg{width:12px;height:12px;margin-left:2px;vertical-align:-1px}
.panel h2{display:flex;align-items:center;gap:10px}
.panel h2>span[data-icon]{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#f7eacb;color:#956117;flex:none}
.panel h2>span[data-icon] svg{width:17px;height:17px}
#logout-button{display:inline-flex;align-items:center;gap:8px}
#logout-button[hidden]{display:none}
#logout-button svg{width:16px;height:16px}
.step-tab>span svg{width:12px;height:12px}
.step-tab.done>span{background:#e7f4ec;border-color:#9fd0b4;color:#1c6b43}
.toast{display:flex;align-items:center;gap:10px}
.toast[hidden]{display:none}
.toast svg{width:18px;height:18px;flex:none;color:#7ce2aa}
.toast.error svg{color:#ffb4a3}
@media(max-width:720px){
  .sidebar .nav-item{flex:1 1 0;width:auto}
  .sidebar .nav-text{font-size:0}
  .sidebar .nav-text::after{content:attr(data-short);font-size:10px;font-weight:600;letter-spacing:.1px}
}
@media(max-width:360px){.sidebar .nav-text::after{font-size:9px}}
.footer-brand{display:inline-flex;align-items:center;gap:6px}.footer-brand svg{width:14px;height:14px}