:root {
  --bg-principal: #FAF8F5; --bg-card: #F3EBE1; --bg-input: #FFFFFF;
  --border-color: #E2D5C4; --text-primary: #4A3F35; --text-secondary: #8C7A6B;
  --accent: #B89B72; --receita: #10B981; --despesa: #F43F5E; --transf: #3B82F6;
}
body.dark-mode {
  --bg-principal: #121212; --bg-card: #1E1E1E; --bg-input: #2C2C2C;
  --border-color: #383838; --text-primary: #F3F4F6; --text-secondary: #9CA3AF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='55' height='55'%3E%3Cpath fill='%23FFFFFF' fill-opacity='0.03' d='M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64z'/%3E%3C/svg%3E");
}
body.dark-mode .floating-tray { background: rgba(30, 30, 30, 0.95); border-top: 1px solid var(--border-color); }
body.dark-mode .fab-tema { box-shadow: 0 4px 10px rgba(255,255,255,0.05); }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--bg-principal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='55' height='55'%3E%3Cpath fill='%238C7A6B' fill-opacity='0.04' d='M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64z'/%3E%3C/svg%3E"); background-repeat: repeat; color: var(--text-primary); padding-bottom: 100px; transition: background-color 0.3s ease, color 0.3s ease; }

/* Login */
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-principal); z-index: 10000; display: flex; justify-content: center; align-items: center; padding: 20px; }
.login-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; width: 100%; max-width: 400px; padding: 32px; box-shadow: 0 10px 25px rgba(74, 63, 53, 0.05); text-align: center; }
.login-header .login-logo { font-size: 2.5rem; color: var(--accent); margin-bottom: 12px; }
.login-header h2 { color: var(--text-primary); margin-bottom: 6px; font-size: 1.6rem; }
.login-header p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 24px; }
.login-instrucao { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.4; }
#btn-google-container { display: flex; justify-content: center; margin-top: 10px; }

/* Páginas e Layout Geral */
.page { display: none; padding: 20px; animation: fadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.container { max-width: 800px; margin: 0 auto; }
header { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
#mes-atual { font-size: 12px; color: var(--text-secondary); background: var(--bg-card); padding: 5px 12px; border-radius: 20px; }

/* Botões do Header */
.btn-logout, .btn-premium { background: transparent; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.btn-logout { border: 1px solid var(--despesa); color: var(--despesa); }
.btn-logout:hover { background: var(--despesa); color: white; }
.btn-premium { border: 1px solid var(--accent); color: var(--accent); }
.btn-premium:hover { background: var(--accent); color: white; }
.period-btn { font-size: 12px; color: var(--text-secondary); background: var(--bg-card); padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border-color); cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; transition: 0.2s; }
.period-btn:active { transform: scale(0.95); }

/* Resumos e Cards */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.summary-card { position: relative; overflow: hidden; padding: 22px; border-radius: 20px; border: none; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: transform 0.2s; min-height: 110px; }
.summary-card.receita { background: linear-gradient(135deg, var(--receita), #059669); color: white; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); }
.summary-card.despesa { background: linear-gradient(135deg, var(--despesa), #E11D48); color: white; box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3); }
.summary-card span { font-size: 12px; color: rgba(255,255,255,0.9); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; z-index: 1; }
.summary-card p { font-size: 26px; font-weight: 800; margin-top: 8px; color: white !important; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.summary-card .bg-icon { position: absolute; right: -15px; top: -10px; font-size: 90px; opacity: 0.15; transform: rotate(-15deg); pointer-events: none; }

/* Transações */
.history-box { background: var(--bg-input); border-radius: 16px; border: 1px solid var(--border-color); overflow: hidden; }
.daily-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 15px 8px 15px; background: transparent; border-bottom: 1px solid var(--border-color); }
.daily-date { font-size: 13px; font-weight: 800; color: var(--text-primary); text-transform: capitalize; }
.daily-summaries { display: flex; gap: 6px; }
.daily-tag { font-size: 11px; padding: 4px 8px; border-radius: 8px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.daily-tag.income { background: rgba(16, 185, 129, 0.15); color: var(--receita); }
.daily-tag.expense { background: rgba(244, 63, 94, 0.15); color: var(--despesa); }
.transaction-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); transition: background 0.2s; cursor: pointer; background: var(--bg-input); }
.transaction-item:hover { background: var(--bg-card); }
.transaction-item:last-child { border-bottom: none; }
.transaction-left { display: flex; align-items: center; gap: 14px; }
.transaction-icon-box { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.transaction-info h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; color: var(--text-primary); }
.transaction-info p { font-size: 12px; color: var(--text-secondary); }
.transaction-value { text-align: right; font-weight: 800; font-size: 15px; }
.tag-conta { font-size: 10px; background: var(--bg-card); padding: 2px 6px; border-radius: 6px; font-weight: 600; color: var(--text-secondary); }

/* Navegação e FAB */
.floating-tray { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; background: rgba(74, 63, 53, 0.95); backdrop-filter: blur(10px); padding: 10px; border-radius: 30px; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 900; transition: background 0.3s ease; }
.nav-item { color: #D6C9B8; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; padding: 10px 15px; border-radius: 20px; position: relative; }
.nav-item.active { background: var(--accent); color: white; }
.nav-item.active span { display: inline; }
.nav-item span { display: none; font-size: 12px; font-weight: 600; }
.fab { position: fixed; bottom: 90px; right: 25px; width: 56px; height: 56px; background: var(--despesa); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); cursor: pointer; z-index: 899; transition: background 0.3s ease, transform 0.2s ease; }
.fab:active { transform: scale(0.9); }
.fab-tema { display: none; position: fixed; top: 15px; right: 15px; width: 40px; height: 40px; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 800; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.3s; }
.fab-tema:active { transform: scale(0.9); }

/* Modais Base */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; align-items: flex-end; justify-content: center; z-index: 1020; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--bg-principal); width: 100%; max-width: 800px; height: 92vh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: 0.3s ease; overflow: hidden; }
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-header { flex-shrink: 0; padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--bg-principal); z-index: 10; }
.type-tabs { display: flex; background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); }
.type-tab { padding: 10px 20px; font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: 0.2s; }
.type-tab.active[data-type="DESPESA"] { background: var(--despesa); color: white; }
.type-tab.active[data-type="RECEITA"] { background: var(--receita); color: white; }
.type-tab.active[data-type="TRANSFERENCIA"] { background: var(--transf); color: white; }
.modal-body { flex: 1; min-height: 0; display: block; overflow-y: auto; background: var(--bg-principal); }

/* Grid e Calculadora */
#modal-registro .modal-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { #modal-registro .modal-body { grid-template-columns: 1fr 380px; overflow: hidden; } }
.modal-inputs { padding: 20px; overflow-y: auto; height: 100%; }
.category-section h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; display: flex; justify-content: space-between; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 10px; }
.cat-btn { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s; color: var(--text-secondary); user-select: none; position: relative; overflow: hidden; }
.cat-btn i { font-size: 22px; color: var(--cat-color, var(--text-secondary)); transition: 0.2s; }
.cat-btn span { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.1; word-break: break-word; position: relative; z-index: 2; }
.cat-btn.selected { background: var(--cat-color, var(--accent)); color: white; border-color: var(--cat-color, var(--accent)); transform: scale(0.95); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.cat-btn.selected i, .cat-btn.selected span { color: white; }
.cat-btn.btn-config { border-style: dashed; color: var(--accent); }

.transfer-layout { display: flex; flex-direction: column; gap: 15px; padding: 10px 0; }
.transfer-btn { background: var(--bg-input); border: 1px dashed var(--transf); color: var(--text-primary); padding: 15px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; width: 100%; }
.transfer-btn.selected { background: rgba(59, 130, 246, 0.1); border-style: solid; }
.transfer-separator { text-align: center; color: var(--border-color); font-size: 16px; display: flex; justify-content: center; }
.transfer-separator i { background: var(--bg-card); padding: 8px; border-radius: 50%; border: 1px solid var(--border-color); color: var(--text-secondary); }

.right-panel { background: var(--bg-card); padding: 20px; display: flex; flex-direction: column; border-left: 1px solid var(--border-color); height: 100%; }
.top-discrete { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.amount-display-discrete { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; }
.amount-display-discrete .currency { font-size: 16px; color: var(--text-secondary); }
.amount-display-discrete #display-valor { font-size: 36px; font-weight: 700; color: var(--text-primary); }
.input-discrete { background: transparent; border: none; border-bottom: 1px dashed var(--border-color); padding: 8px 0; font-size: 13px; color: var(--text-primary); outline: none; text-align: right; width: 100%; }
.input-discrete::placeholder { color: #A89F91; }

.bottom-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 55px); gap: 8px; margin-top: auto; }
.btn-num { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; font-size: 20px; font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; transition: background 0.1s; }
.btn-num:active { background: var(--bg-card); }
.btn-op { color: var(--accent); font-size: 22px; }
.btn-save-num { background: var(--accent); color: white; font-size: 12px; border: none; gap: 3px; }
.btn-batch-save { background: var(--transf); color: white; font-size: 11px; border: none; gap: 3px; }
.btn-delete-tx { background: var(--despesa); color: white; font-size: 11px; border: none; gap: 3px; }
.btn-save-num:active, .btn-batch-save:active, .btn-delete-tx:active { filter: brightness(0.9); }
.control-toggle { font-size: 9px; color: var(--text-secondary); gap: 4px; user-select: none; }
.control-toggle input { accent-color: var(--accent); transform: scale(1.1); }

/* Ícones e Cores */
.icons-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-height: 200px; overflow-y: auto; padding: 5px; }
.icon-option { background: var(--bg-input); font-size: 18px; color: var(--text-secondary); text-align: center; padding: 12px 0; border-radius: 12px; cursor: pointer; border: 1px solid var(--border-color); transition: 0.2s; }
.icon-option.selected { background: var(--accent); color: white; border-color: var(--accent); transform: scale(0.95); }
.color-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.color-option { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; transition: 0.2s; border: 2px solid transparent; box-sizing: border-box; }
.color-option.selected { transform: scale(1.1); border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-principal) inset; }

/* Botões Genéricos */
.btn-salvar-cat { background: var(--accent); color: white; border: none; padding: 12px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-cancelar-cat { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); padding: 12px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }

/* Componentes Estatísticas / Categorias / Calendário */
.cat-detail-item { background: var(--bg-input); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; }
.cat-detail-item:active { transform: scale(0.98); }
.cat-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cat-detail-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.cat-detail-value { font-size: 14px; font-weight: 800; }
.cat-detail-bar-bg { width: 100%; height: 8px; background: var(--bg-card); border-radius: 4px; overflow: hidden; }
.cat-detail-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.cat-detail-pct { font-size: 11px; color: var(--text-secondary); margin-top: 6px; text-align: right; font-weight: 600; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-top: 10px; }
.calendar-day-header { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; padding: 5px 0; }
.calendar-day { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; padding: 5px 2px; min-height: 48px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; transition: 0.2s; }
.calendar-day:active { transform: scale(0.95); }
.calendar-day.empty { background: transparent; border: none; cursor: default; }
.calendar-date { font-size: 11px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.calendar-value { font-size: 9px; font-weight: 800; word-break: break-all; line-height: 1.1; letter-spacing: -0.3px; }
.calendar-value.despesa { color: var(--despesa); }
.calendar-value.receita { color: var(--receita); }

/* --- NOVO: Estilos da Estante de Livros Razão --- */
.bookshelf-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 20px 15px 10px 15px;
  align-items: flex-end;
  border-bottom: 12px solid #8B5A2B;
  min-height: 140px;
  box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.5);
  border-radius: 0 0 5px 5px;
}

.book-spine {
  width: 50px;
  height: 130px;
  border-radius: 4px 10px 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 15px 5px;
  cursor: pointer;
  color: white;
  box-shadow: -3px 0 8px rgba(0,0,0,0.3) inset, 4px 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.book-spine:hover {
  transform: translateY(-10px) rotate(-3deg);
  box-shadow: -3px 0 8px rgba(0,0,0,0.3) inset, 6px 14px 12px rgba(0,0,0,0.3);
  z-index: 10;
}

.book-icon {
  font-size: 16px;
  margin-bottom: 10px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.book-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 75px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.book-delete {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--despesa);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 20;
}

.book-spine:hover .book-delete { opacity: 1; }

.capa-classic { border-left: 6px solid rgba(255, 255, 255, 0.3); border-right: 2px solid rgba(0, 0, 0, 0.2); }
.capa-modern { background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.1) 100%); border-left: 2px solid rgba(255, 255, 255, 0.2); }
.capa-leather { background-image: radial-gradient(circle, rgba(0,0,0,0.2) 2px, transparent 2px); background-size: 6px 6px; border-left: 4px solid rgba(255, 255, 255, 0.1); }
.cover-style-grid { display: flex; gap: 10px; }
.cover-option { flex: 1; height: 60px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); border: 2px solid transparent; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.cover-option.selected { border-color: var(--text-primary); transform: scale(1.05); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

/* --- NOVO: Estilos do Cartão de Crédito --- */
.credit-card-ui {
  position: relative;
  width: 100%;
  aspect-ratio: 1.58;
  border-radius: 16px;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.credit-card-ui:active {
  transform: scale(0.98);
}

.credit-card-ui::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cc-top { display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; position: relative; }
.cc-chip { font-size: 32px; color: rgba(255,255,255,0.8); }
.cc-brand { font-size: 36px; opacity: 0.9; }

.cc-middle { z-index: 2; position: relative; margin-top: auto; margin-bottom: 15px; }
.cc-name { font-size: 18px; font-weight: 700; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); text-transform: uppercase; }

.cc-bottom { display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; position: relative; }
.cc-block { display: flex; flex-direction: column; }
.cc-block span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; font-weight: 600; margin-bottom: 2px; }
.cc-block strong { font-size: 18px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.cc-dates-footer { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.2); padding: 6px 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; backdrop-filter: blur(5px); }

/* --- NOVOS: Botões de Ação Dinâmicos do Cartão --- */
.cc-actions {
  position: absolute; top: 15px; right: 15px;
  display: flex; gap: 8px; z-index: 10;
}
.cc-btn-action {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  display: flex; align-items: center; gap: 5px;
}
.cc-btn-action:hover { background: rgba(255,255,255,0.4); }

/* Toasts / Spinners */
.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10015; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--bg-input); color: var(--text-primary); padding: 12px 24px; border-radius: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: slideDown 0.3s ease; border: 1px solid var(--border-color); transition: opacity 0.3s ease; pointer-events: auto; }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#global-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10010; display: none; align-items: center; justify-content: center; flex-direction: column; color: white; gap: 15px; backdrop-filter: blur(3px); }
#global-spinner.open { display: flex; animation: fadeIn 0.2s ease; }
.spinner-circle { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid white; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }