:root {
    --bg-primary: #0E0E14;
    --bg-secondary: #16161F;
    --bg-card: #1C1C28;
    --bg-card2: #20202E;
    --accent: #7C6FCD;
    --accent-blue: #5B8DEF;
    --accent-teal: #4ECDC4;
    --accent-warn: #FFD166;
    --accent-danger: #EF476F;
    --text: #F0EFF5;
    --text-sec: #8F8FA8;
    --text-muted: #4E4E65;
    --border: rgba(255,255,255,0.06);
    --border-accent: rgba(124,111,205,0.2);
    --radius-card: 16px;
    --radius-btn: 12px;
    --radius-pill: 50px;
    --nav-h: 72px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
  }
  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  
  html, body {
    height: 100%;
    background: var(--bg-primary);
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }
  
  /* Remove seleção azul de texto */
  * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Remove highlight/foco azul em botões, inputs, links */
  button,
  a,
  input,
  textarea,
  select {
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  
  /* Evita zoom por double tap em mobile */
  button,
  a,
  [role="button"],
  .clickable {
    touch-action: manipulation;
  }
  
  /* Evita menu/cópia ao segurar no mobile */
  img,
  button,
  a,
  .card,
  .nav-item {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }

  input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}
  
  /* ── LAYOUT ──────────────────────────────────────────── */
  #app {
    position: fixed;
    inset: 0;
    bottom: calc(var(--nav-h) + var(--safe-bottom)); /* JS sobrescreve para '0px' quando nav some */
  }
   
  #app.hidden { display: none; }
  
  .tab-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  .tab-screen.active {
    opacity: 1;
    pointer-events: all;
  }  
  
  .screen-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 16px 24px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .screen-scroll::-webkit-scrollbar { display: none; }

  .app-header {
    display: flex;
    align-items: center;
    gap: 12px;
  
    /* Ocupa a largura total compensando o padding do .screen-scroll */
    margin: 0 -16px;
    padding: calc(var(--safe-top) + 14px) 16px 14px;
  
    position: sticky;
    top: 0;
    z-index: 10;
  
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg, #0E0E14) 82%, transparent);
  }
  
  /* Título centralizado de verdade */
  .app-header .page-title {
    flex: 1;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  
  /* Botão voltar */
  .back-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Espaçador direito espelha o botão esquerdo para centralizar o título */
  .app-header .header-spacer {
    flex-shrink: 0;
    width: 36px;
  }

  .header-left { flex: 1; min-width: 0; }
  .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .greeting-sub { font-size: 12px; color: var(--text-sec); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .greeting-name { font-size: 24px; font-weight: 800; line-height: 1.1; }

  .app-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 16px;
    gap: 10px;
  }
  
  .streak-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(239,71,111,0.12);
    border: 1px solid rgba(239,71,111,0.25);
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    font-size: 14px;
    font-weight: 700;
    color: #EF476F;
  }
  .streak-pill i { font-size: 13px; animation: flame-pulse 1.5s ease-in-out infinite; }
  @keyframes flame-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
  
  .avatar-btn { background: none; border: none; cursor: pointer; padding: 0; }
  .avatar-mini {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: white;
    box-shadow: 0 0 10px rgba(124,111,205,0.25);
  }
  .icon-btn { background: none; border: none; color: var(--text-sec); cursor: pointer; padding: 4px; font-size: 18px; }
  
  /* ── HERO CARD ───────────────────────────────────────── */
  .hero-card {
    background: linear-gradient(135deg, #1e1b32, #1a1e2e);
    border-radius: var(--radius-card);
    padding: 16px;
    border: 1px solid var(--border-accent);
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(124,111,205,0.12);
  }
  .hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .hero-date { font-size: 12px; color: var(--text-sec); font-weight: 600; margin-bottom: 2px; text-transform: capitalize; }
  .hero-summary { font-size: 13px; color: var(--text-muted); }
  .hero-pct { font-family: 'Rajdhani', sans-serif; font-size: 32px; font-weight: 700; color: var(--accent); line-height: 1; }
  
  .progress-track {
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 12px;
  }
  .progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent), var(--accent-teal));
    width: 0%;
    transition: width 0.7s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 8px rgba(124,111,205,0.35);
  }
  
  .hero-next {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
  }
  .hero-next-label { font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .hero-next-label i { font-size: 10px; }
  .hero-next-task { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  /* ── SECTION HEADERS ─────────────────────────────────── */
  .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 2px; }
  .section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
  .section-title i { font-size: 11px; }
  .collapsible { cursor: pointer; }
  .sec-chevron { font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
  .sec-chevron.open { transform: rotate(180deg); }
  .collapsible-body { overflow: hidden; }
  .task-section { margin-bottom: 20px; }
  
  .empty-inline { font-size: 13px; color: var(--text-muted); padding: 12px 4px; }
  
  /* ── TASK CARDS ──────────────────────────────────────── */
  .task-list { display: flex; flex-direction: column; gap: 9px; }
  
  .task-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    transition: transform 0.12s, opacity 0.25s;
  }
  .task-card.completed { opacity: 0.4; }
  .task-card.completed .task-title { text-decoration: line-through; color: var(--text-sec); }
  .task-card.overdue { border-color: rgba(239,71,111,0.25); }
  .task-card.overdue .task-title { color: #EF8FA8; }
  .task-title {
    /* mantenha as propriedades existentes e adicione: */
    transition: max-height 0.3s ease, white-space 0s 0.3s;
    max-height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .task-title.expanded {
    max-height: 10em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    transition: max-height 0.3s ease;
  }
  .task-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s;
  }
  
.task-assigned-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(91, 141, 239, 0.12);
  color: #5B8DEF;
  border: 1px solid rgba(91, 141, 239, 0.2);
}
.task-assigned-tag i { font-size: 9px; }
  
  /* Hold ring */
  .task-check-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .task-check-ring {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color 0.3s, background 0.3s;
  }
  .task-check-ring i { font-size: 13px; opacity: 0; color: var(--accent-teal); transition: opacity 0.2s; }
  .task-card.completed .task-check-ring { background: rgba(78,205,196,0.12); border-color: var(--accent-teal); }
  .task-card.completed .task-check-ring i { opacity: 1; }
  .hold-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-teal) 0%, transparent 0%);
    pointer-events: none;
  }
  .task-content { flex: 1; min-width: 0; }
  .task-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
  .task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .task-cat-tag {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--radius-pill);
  }
  .task-imp-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); }
  .imp-mandatory { background: rgba(239,71,111,0.14); color: #EF476F; }
  .imp-necessary { background: rgba(255,209,102,0.14); color: #FFD166; }
  .imp-standard  { background: rgba(124,111,205,0.14); color: var(--accent); }
  .imp-idea      { background: rgba(143,143,168,0.1);  color: var(--text-sec); }
  .task-meta-extra { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); }
  .task-meta-extra i { font-size: 9px; }
  .task-overdue-tag { font-size: 10px; color: #EF476F; font-weight: 700; }
  .task-xp { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: var(--accent-warn); flex-shrink: 0; }
  .task-card-inner * {
    pointer-events: none;
  }
  
  .task-action-btn {
    pointer-events: all;
  }
  /* Swipe actions */
  .task-actions {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    transform: translateX(100%);
    pointer-events: none;
  }
  .task-actions.visible { pointer-events: all; }
  .task-action-btn {
    width: 40px; height: 40px;
    border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
  }
  .action-postpone { background: rgba(255,209,102,0.18); color: #FFD166; }
  .action-delete   { background: rgba(239,71,111,0.18); color: #EF476F; }
  
  /* First task hint */
  .gesture-hint {
    font-size: 11px;
    color: var(--accent);
    background: rgba(124,111,205,0.1);
    border: 1px solid rgba(124,111,205,0.2);
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .gesture-hint i { font-size: 12px; }
  .gesture-hint.hidden { display: none; }
  .task-title.expanded {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  
  /* ── PLAN SCREEN ─────────────────────────────────────── */
  .plan-tabs {
    display: flex; gap: 6px; overflow-x: auto;
    margin-bottom: 16px; padding-bottom: 2px;
  }
  .plan-tabs::-webkit-scrollbar { display: none; }
  .plan-tab {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 12px; font-weight: 700;
    color: var(--text-sec);
    cursor: pointer; white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    transition: all 0.15s;
  }
  .plan-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(124,111,205,0.1); }
  
  .plan-filters { margin-bottom: 12px; overflow-x: auto; }
  .plan-filters::-webkit-scrollbar { display: none; }
  .cat-chips { display: flex; gap: 8px; padding-bottom: 2px; width: max-content; }
  .cat-chip {
    display: flex; align-items: center; gap: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 7px 13px;
    cursor: pointer; white-space: nowrap;
    font-size: 13px; font-weight: 700;
    transition: border-color 0.15s, background 0.15s;
  }
  .cat-chip i { font-size: 12px; color: var(--text); }
  .cat-chip.active { border-color: var(--accent); background: rgba(124,111,205,0.1); color: var(--accent); }
  .cat-chip .cc-count {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-pill);
    padding: 1px 7px;
  }
  
  .plan-group { margin-bottom: 20px; }
  .plan-group-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .plan-group-title i { font-size: 10px; }
  
  .plan-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); }
  .plan-empty i { font-size: 32px; margin-bottom: 12px; opacity: 0.3; display: block; }
  .plan-empty p { font-size: 14px; }
  
  /* Overdue count badge on tab */
  .plan-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-danger);
    color: white;
    font-size: 9px; font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
  }
  
  /* #region FAB */
  .fab {
    position: fixed;
    right: 20px;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px);
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--accent);
    border: none; color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(124,111,205,0.35);
    cursor: pointer;
    font-size: 20px;
    transition: transform 0.12s;
    z-index: 50;
  }
  .fab:active { transform: scale(0.92); }

  /* #endregion */
  
  /* #region FAB estado de voz */
  .fab {
    transition: transform 0.12s, background 0.35s, box-shadow 0.35s;
    overflow: visible; /* ← era hidden, precisa ser visible pro ring externo */
  }
  .fab.voice-mode {
    background: var(--accent-danger);
    box-shadow: 0 4px 24px rgba(71, 133, 239, 0.45);
  }
  
  /* ── Anel de progresso SVG (hold progress) ── */
  .fab-hold-ring {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 51;
  }
  .fab-hold-ring circle {
    fill: none;
    stroke: rgba(71, 121, 239, 0.9);
    stroke-width: 3;
    stroke-linecap: round;
    /* circumference de um círculo r=27 ≈ 169.6 */
    stroke-dasharray: 169.6;
    stroke-dashoffset: 169.6;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset linear, stroke 0.2s;
    filter: drop-shadow(0 0 4px rgba(71, 107, 239, 0.8));
  }
  .fab-hold-ring.active {
    opacity: 1;
  }
  
  /* Halo de brilho externo que pulsa durante o hold */
  .fab-hold-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(71, 152, 239, 0.3) 0%, rgba(239,71,111,0) 70%);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    z-index: 49;
    transition: opacity 0.15s, transform 0.15s;
  }
  .fab-hold-glow.active {
    opacity: 1;
    transform: scale(1);
    animation: hold-glow-pulse 0.5s ease-in-out infinite alternate;
  }
  @keyframes hold-glow-pulse {
    from { transform: scale(1);    opacity: 0.6; }
    to   { transform: scale(1.25); opacity: 1;   }
  }
  
  /* FAB escala levemente durante o hold */
  .fab.holding {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(71, 133, 239, 0.4);
  }
  
  /* ── Implosão ao completar o hold ── */
  .fab-implode-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(71, 133, 239, 0.0);
    transform: scale(0);
    pointer-events: none;
    transition: none;
  }
  .fab-implode-ring.animate {
    animation: fab-implode 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  @keyframes fab-implode {
    0%   { transform: scale(2.6); background: rgba(71, 133, 239, 0.0); }
    35%  { transform: scale(1.1); background: rgba(71, 133, 239, 0.6); }
    100% { transform: scale(0);   background: rgba(239,71,111,0.0); }
  }
  
  /* ── Voice sheet ── */
  .voice-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
  }
  .voice-sheet.visible { display: block; }
  
  .voice-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .voice-sheet-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-secondary);
    border-radius: 22px 22px 0 0;
    padding: 14px 18px;
    padding-bottom: calc(28px + var(--safe-bottom));
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
  }
  .voice-sheet.visible .voice-sheet-panel {
    transform: translateY(0);
  }
  
  .voice-sheet-handle {
    width: 38px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto 20px;
  }
  
  .voice-mic-wrap {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(239,71,111,0.12);
    border: 1px solid rgba(239,71,111,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--accent-danger);
    margin-bottom: 16px;
    position: relative;
  }
  .voice-mic-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(239,71,111,0.15);
    animation: orb-ring 2s ease-out infinite;
  }
  @keyframes orb-ring {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  
  .voice-sheet-label {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
  }
  .voice-sheet-hint {
    font-size: 13px;
    color: var(--text-sec);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .voice-transcript {
    font-size: 13px;
    color: var(--accent-warn);
    font-weight: 600;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    min-height: 20px;
    max-width: 300px;
    width: 100%;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .voice-transcript.visible { opacity: 1; }
  
  .voice-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 48px;
    width: 100%;
    margin-bottom: 24px;
  }
  .voice-bar {
    width: 4px;
    border-radius: 4px;
    background: var(--accent-danger);
    opacity: 0.75;
    transition: height 0.08s ease;
    min-height: 4px;
    max-height: 44px;
    height: 8px;
    align-self: center;
  }
  
  .voice-stop-btn {
    width: 100%;
    padding: 15px;
    border-radius: var(--radius-btn);
    border: none;
    background: var(--accent-danger);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.1s;
    box-shadow: 0 4px 14px rgba(239,71,111,0.28);
  }
  .voice-stop-btn:active { transform: scale(0.97); }
  
  .voice-cancel-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    padding: 13px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s;
  }
  .voice-cancel-btn:active { transform: scale(0.97); }
  
  .voice-generating-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    border: 1px solid rgba(239,71,111,0.18);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .voice-gen-spinner {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(239,71,111,0.2);
    border-top-color: var(--accent-danger);
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .voice-gen-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
  }
  .voice-gen-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }
  /* #endregion */

/* ── BOTTOM NAV ──────────────────────────────────────── */
  .bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    /* padding-bottom absorve o home indicator do iPhone */
    padding: 8px 12px calc(8px + var(--safe-bottom));
    display: flex;
    justify-content: center;
    z-index: 100;
  }
  
  .bottom-nav.hidden {
    visibility: hidden;
    pointer-events: none;
    /* remove display:none daqui */
  }
  
  .nav-pill {
    display: flex; gap: 4px;
    background: rgba(22,22,31,0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124,111,205,0.14);
    border-radius: var(--radius-pill);
    padding: 6px;
    width: 100%; max-width: 360px;
  }
  .nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; background: none; border: none;
    color: var(--text-muted); border-radius: 40px; cursor: pointer;
    transition: color 0.2s, background 0.2s;
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700;
  }
  .nav-btn i { font-size: 18px; }
  .nav-btn.active { color: var(--accent); background: rgba(124,111,205,0.14); box-shadow: 0 0 10px rgba(124,111,205,0.18); }
  .nav-btn:active { transform: scale(0.93); }
  
  /* ── MISSIONS ────────────────────────────────────────── */
  .missions-list { display: flex; flex-direction: column; gap: 12px; }
  .mission-timer { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-sec); font-family: 'JetBrains Mono', monospace; }
  .mission-timer i { font-size: 12px; }
  
  .mission-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 15px;
    border: 1px solid var(--border);
  }
  .mission-card.bonus { border-color: rgba(255,209,102,0.2); background: linear-gradient(135deg, #1C1C28, #201e2f); }
  .mission-card.done { opacity: 0.48; }
  .mission-card.done .mission-title { text-decoration: line-through; }
  .bonus-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,209,102,0.12); color: #FFD166;
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: var(--radius-pill);
    margin-bottom: 6px; letter-spacing: 0.04em;
  }
  .bonus-badge i { font-size: 10px; }
  .mission-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
  .mission-title { font-weight: 700; font-size: 14px; flex: 1; padding-right: 10px; }
  .mission-reward { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
  .mission-xp { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: var(--accent-warn); }
  .mission-coins { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-sec); }
  .mission-progress-track { height: 5px; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill); overflow: hidden; }
  .mission-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width 0.5s ease; }
  .mission-card.bonus .mission-progress-fill { background: var(--accent-warn); }
  .mission-progress-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
  .mission-done-mark { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent-teal); font-weight: 700; margin-top: 8px; }
  .mission-done-mark i { font-size: 13px; }
  
  /* ── FOCUS ───────────────────────────────────────────── */
  .session-counter { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-sec); }
  .session-counter i { font-size: 12px; color: var(--accent-warn); }
  .focus-task-selector { margin-bottom: 16px; }
  .focus-select-label { font-size: 11px; color: var(--text-sec); font-weight: 700; display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
  .focus-duration-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .focus-dur-label { font-size: 13px; color: var(--text-sec); white-space: nowrap; min-width: 110px; }
  #dur-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; outline: none;
  }
  #dur-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px;
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px rgba(124,111,205,0.4); cursor: pointer;
  }
  .timer-ring-container { position: relative; width: 220px; height: 220px; margin: 0 auto 28px; }
  .timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 10; }
  .ring-fill {
    fill: none; stroke: var(--accent); stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 603; stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.4s;
    filter: drop-shadow(0 0 8px rgba(124,111,205,0.4));
  }
  .ring-fill.running { stroke: var(--accent-teal); filter: drop-shadow(0 0 8px rgba(78,205,196,0.4)); }
  .timer-display { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .timer-time { font-family: 'Rajdhani', sans-serif; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
  .timer-state { font-size: 13px; color: var(--text-sec); font-weight: 600; margin-top: 4px; }
  .focus-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .focus-btn {
    border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.12s;
  }
  .focus-btn i { font-size: 20px; }
  .focus-btn.primary { width: 70px; height: 70px; background: var(--accent); color: white; box-shadow: 0 4px 18px rgba(124,111,205,0.32); }
  .focus-btn.secondary { width: 50px; height: 50px; background: var(--bg-card); color: var(--text-sec); border: 1px solid var(--border); }
  .focus-btn:active { transform: scale(0.91); }
  
  /* ── MENU SHEET ──────────────────────────────────────── */
  .menu-profile-row {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }
  .menu-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; color: white;
    box-shadow: 0 0 14px rgba(124,111,205,0.25);
    flex-shrink: 0;
  }
  .menu-avatar-info .menu-name { font-size: 16px; font-weight: 800; }
  .menu-avatar-info .menu-level { font-size: 12px; color: var(--text-sec); }
  .menu-xp-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  .menu-xp-track { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; }
  .menu-xp-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.5s; }
  .menu-xp-val { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
  
  .menu-nav { display: flex; flex-direction: column; gap: 4px; }
  .menu-nav-btn {
    display: flex; align-items: center; gap: 12px;
    background: none; border: none; border-radius: var(--radius-btn);
    padding: 13px 12px; color: var(--text); font-family: 'Nunito', sans-serif;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background 0.15s; text-align: left; position: relative;
  }
  .menu-nav-btn i { font-size: 16px; color: var(--text-sec); width: 20px; text-align: center; }
  .menu-nav-btn:active { background: var(--bg-card); }
  .menu-badge {
    position: absolute; right: 12px;
    background: var(--accent-danger); color: white;
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: var(--radius-pill);
  }
  
  /* ── BOTTOM SHEETS ───────────────────────────────────── */
  .bottom-sheet { position: fixed; inset: 0; z-index: 200; }
  .bottom-sheet.hidden { display: none; }
  .sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); }
  .sheet-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--bg-secondary);
    border-radius: 22px 22px 0 0;
    padding: 14px 18px;
    padding-bottom: calc(22px + var(--safe-bottom));
    border-top: 1px solid rgba(255,255,255,0.07);
    max-height: 92vh; overflow-y: auto;
  }
  .sheet-panel::-webkit-scrollbar { display: none; }
  .sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); margin: 0 auto 14px; }
  .sheet-title { font-size: 17px; font-weight: 800; margin-bottom: 18px; }
  
  /* ── FORMS ───────────────────────────────────────────── */
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 7px; }
  .form-row { display: flex; gap: 10px; margin-bottom: 0; }
  .form-row .form-group { margin-bottom: 16px; }
  .half { flex: 1; min-width: 0; }
  
  .text-input, .date-input, .num-input, .select-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 11px 13px;
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
  }
  .text-input:focus, .date-input:focus, .num-input:focus, .select-input:focus {
    outline: none; border-color: var(--accent);
  }
  .text-input::placeholder, .num-input::placeholder { color: var(--text-muted); }
  /* Adicione junto ao bloco .text-input, .date-input ... */
.time-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 11px 13px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace; /* mono fica bonito em horário */
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.time-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Esconde o ícone nativo do Chrome/Safari — deixa o campo limpo */
.time-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  cursor: pointer;
}
  /* Quick add */
  .quick-add-row { margin-bottom: 4px; }
  .quick-add-row input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid rgba(124,111,205,0.25);
    border-radius: var(--radius-btn);
    padding: 12px 14px;
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
  }
  .quick-add-row input:focus { outline: none; border-color: var(--accent); }
  .quick-add-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }
  .quick-add-hint code { color: var(--accent); background: rgba(124,111,205,0.1); padding: 1px 5px; border-radius: 5px; font-family: 'JetBrains Mono', monospace; }
  
  .category-pills { display: flex; flex-wrap: wrap; gap: 7px; }
  .cat-pill-sel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-pill); padding: 6px 13px;
    font-size: 12px; font-weight: 700; color: var(--text-sec);
    cursor: pointer; transition: all 0.13s; font-family: 'Nunito', sans-serif;
  }
  .cat-pill-sel.active { border-color: var(--accent); color: var(--accent); background: rgba(124,111,205,0.1); }
  
  .importance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .imp-btn {
    display: flex; align-items: center; gap: 7px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-btn); padding: 10px 11px;
    color: var(--text); font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.13s;
  }
  .imp-btn.active { border-color: var(--accent); background: rgba(124,111,205,0.1); }
  .imp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .imp-dot.imp-mandatory { background: #EF476F; }
  .imp-dot.imp-necessary { background: #FFD166; }
  .imp-dot.imp-standard  { background: var(--accent); }
  .imp-dot.imp-idea      { background: var(--text-muted); }
  .imp-xp { font-family: 'Rajdhani', sans-serif; font-size: 11px; color: var(--text-muted); margin-left: auto; }
  
  .color-picker { display: flex; flex-wrap: wrap; gap: 10px; }
  .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.14s, transform 0.14s; }
  .color-swatch.active { border-color: white; transform: scale(1.18); }
  .icon-picker { display: flex; flex-wrap: wrap; gap: 7px; }
  .icon-option {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.13s; font-size: 15px;
  }
  .icon-option.active { border-color: var(--accent); background: rgba(124,111,205,0.14); }

  /* ── SUBTASK INNER (necessário para translate do swipe) ── */
.mtc-subtask-inner {
  display: flex;
  align-items: center;
  width: 100%;
  transition: transform 0.15s, opacity 0.15s;
  will-change: transform;
}

/* ── SUBTASK CONTEXT SHEET ───────────────────────────── */
/* Reutiliza .ctx-menu-nav / .ctx-menu-btn já existentes  */
/* Apenas garante que o sheet de subtarefa tem o mesmo    */
/* visual do task-context-sheet                           */
#subtask-context-sheet .sheet-panel,
#edit-subtask-sheet .sheet-panel,
#delete-subtask-modal .sheet-panel {
  /* herda tudo de .sheet-panel — nenhuma sobrescrita     */
}

/* ── EDIT SUBTASK SHEET — campos ─────────────────────── */
#edit-subtask-sheet .form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}

#edit-subtask-sheet .task-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 11px 13px;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

#edit-subtask-sheet .task-input:focus {
  outline: none;
  border-color: var(--accent);
}

#edit-subtask-sheet .task-input::placeholder {
  color: var(--text-muted);
}

/* Grid 2 colunas: duração + XP */
.edit-st-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* ── DELETE SUBTASK MODAL — ícone de lixeira ─────────── */
.delete-subtask-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(239, 71, 111, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: #EF476F;
}

/* ── FEEDBACK VISUAL DO SWIPE NA SUBTAREFA ───────────── */
.mtc-subtask {
  position: relative;
  overflow: hidden;
  /* garante que o background de hint seja aplicado       */
  transition: background 0.1s;
}

/* Hint de delete (←) — vermelho por baixo */
.mtc-subtask::before {
  content: '\f1f8'; /* fa-trash unicode */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #EF476F;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 0;
}
/* Mostra ícone conforme background hint injetado via JS  */
/* O JS seta item.style.background — usamos o sinal de   */
/* cor para mostrar o ícone correspondente via classes    */
.mtc-subtask.swiping-left::before  { opacity: 0.55; }
.mtc-subtask.swiping-right::after  { opacity: 0.55; }

/* Garante que o inner fique na frente dos ::before/after */
.mtc-subtask-inner { position: relative; z-index: 1; }
  
  /* Postpone opts */
  .postpone-opts { display: flex; flex-direction: column; gap: 6px; }
  .postpone-opt {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-btn); padding: 13px 14px;
    font-size: 14px; font-weight: 700; color: var(--text);
    font-family: 'Nunito', sans-serif; cursor: pointer; transition: border-color 0.13s;
  }
  .postpone-opt:active { border-color: var(--accent); }
  .postpone-opt i { font-size: 14px; color: var(--text-sec); width: 18px; text-align: center; }
  
  /* ── BUTTONS ─────────────────────────────────────────── */
  .btn-primary {
    background: var(--accent); color: white; border: none;
    border-radius: var(--radius-btn); padding: 14px 24px;
    font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: transform 0.12s;
    box-shadow: 0 4px 14px rgba(124,111,205,0.28);
  }
  .btn-primary:active { transform: scale(0.97); }
  .btn-danger {
    background: rgba(239,71,111,0.12); color: var(--accent-danger);
    border: 1px solid rgba(239,71,111,0.25);
    border-radius: var(--radius-btn); padding: 14px 24px;
    font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .w-full { width: 100%; }
  .mt-16 { margin-top: 16px; }
  
  /* ── SETTINGS ────────────────────────────────────────── */
  .settings-card { background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--border); overflow: hidden; }
  .settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .settings-row:last-child { border-bottom: none; }
  .settings-label { font-size: 14px; font-weight: 600; color: var(--text-sec); }
  .settings-val { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--accent); }
  .settings-input {
    background: none; border: none; color: var(--text); font-family: 'Nunito', sans-serif;
    font-size: 14px; font-weight: 700; text-align: right; outline: none; max-width: 160px;
  }
  .settings-select {
    background: none; border: none; color: var(--text); font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700; text-align: right; outline: none; max-width: 180px;
    -webkit-appearance: none; appearance: none; cursor: pointer;
  }
  /* #region conquistas */

  /* ── Grid principal ── */
  .badges-grid {
    display: flex; flex-direction: column;
    gap: 0; padding: 4px 0;
  }

  /* ── Cabeçalho de seção por raridade ── */
  .badge-section-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
    margin-top: 20px;
  }
  .badge-section-header:first-child { margin-top: 4px; }

  .badge-rarity-pill {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 10px; border-radius: 20px;
  }
  .badge-rarity-count {
    font-size: 12px; color: var(--text-sec); font-weight: 600;
  }

  /* ── Linha de badges por raridade ── */
  .badge-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
  }

  /* ── Badge individual ── */
  .badge-item {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: 14px 8px 12px;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.18s;
  }
  .badge-item.unlocked:active { transform: scale(0.96); }
  .badge-item.locked {
    opacity: 0.4;
    filter: grayscale(0.7);
  }

  /* ── Ícones ── */
  .badge-icon        { font-size: 26px; margin-bottom: 2px; }
  .badge-icon-locked { font-size: 22px; color: var(--text-muted); opacity: 0.35; margin-bottom: 2px; }

  /* ── Textos ── */
  .badge-name { font-size: 11px; font-weight: 700; color: var(--text);     line-height: 1.2; }
  .badge-desc { font-size: 10px;                   color: var(--text-muted); line-height: 1.3; }

  /* ── Toast de conquista desbloqueada ── */
  #achievement-toast {
    pointer-events: none;
  }

  /* ── TIMELINE ────────────────────────────────────────── */
  .timeline { display: flex; flex-direction: column; }
  .timeline-item {
    display: flex; gap: 12px; padding-bottom: 20px;
    position: relative; opacity: 0; transform: translateX(-12px);
    transition: opacity 0.35s, transform 0.35s;
  }
  .timeline-item.visible { opacity: 1; transform: translateX(0); }
  .timeline-item::before {
    content: ''; position: absolute; left: 14px; top: 30px; bottom: 0;
    width: 1px; background: rgba(255,255,255,0.06);
  }
  .timeline-item:last-child::before { display: none; }
  .timeline-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(124,111,205,0.12);
    border: 1px solid rgba(124,111,205,0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px; color: var(--accent);
  }
  .timeline-title { font-weight: 700; font-size: 13px; }
  .timeline-date  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

  /* #endregion */

  /* #region Onboarding */
  /* ── ONBOARDING ──────────────────────────────────────── */
.onboarding {
  position: fixed; inset: 0;
  background: var(--bg-primary);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; z-index: 900;
  overflow: hidden;
}
.onboarding.hidden { display: none; }

/* Partículas */
#ob-particles {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Barra de progresso global */
.ob-progress-track {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.06); z-index: 2;
}
.ob-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal, #4ECDC4));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Screens */
.ob-screen {
  display: none; flex-direction: column;
  width: 100%; max-width: 400px;
  gap: 0; position: relative; z-index: 1;
  animation: none;
}
.ob-screen.active { display: flex; }
.ob-screen.ob-enter {
  animation: obSlideIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ob-screen.ob-exit {
  animation: obSlideOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes obSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes obSlideOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-40px) scale(0.97); }
}

/* Logo */
.ob-logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 800; color: var(--accent);
  margin-bottom: 36px;
}
.ob-logo-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(124,111,205,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent);
  box-shadow: 0 0 20px rgba(124,111,205,0.25);
  animation: logoPulse 2.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 20px rgba(124,111,205,0.25); }
  50%      { box-shadow: 0 0 36px rgba(124,111,205,0.5); }
}

/* ── Typewriter base ── */
@keyframes obTypewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes obCursorBlink {
  0%,100% { border-color: transparent; }
  50%      { border-color: var(--accent); }
}
@keyframes obFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Textos só animam quando o screen está .active */
.ob-screen.active .ob-step-label,
.ob-screen.active .ob-title,
.ob-screen.active .ob-heading {
  overflow: hidden;
  white-space: nowrap;
  display: block;
  width: 0;
  animation:
    obTypewriter 0.55s steps(30, end) forwards,
    obCursorBlink 0.6s step-end 3;
  border-right: 2px solid var(--accent);
}

/* Step label aparece primeiro */
.ob-screen.active .ob-step-label {
  animation-delay: 0s, 0s;
  animation-duration: 0.3s, 0.6s;
}

/* Título/heading aparece logo após o label */
.ob-screen.active .ob-title,
.ob-screen.active .ob-heading {
  animation-delay: 0.2s, 0.2s;
  white-space: normal; /* permite quebra de linha */
  /* typewriter em altura ao invés de largura para multi-linha */
  width: auto;
  max-height: 0; overflow: hidden;
  animation:
    obRevealLines 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s forwards,
    obCursorBlink 0.6s step-end 0.2s 3;
}

@keyframes obRevealLines {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 200px; opacity: 1; }
}

/* Remove cursor após animar */
.ob-screen.active .ob-title,
.ob-screen.active .ob-heading {
  border-right: 2px solid transparent;
  animation:
    obRevealLines 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s forwards,
    obCursorBlink 0.55s step-end 0.2s 4;
}

/* Sub e hint: fade-up escalonado */
.ob-screen.active .ob-sub {
  opacity: 0;
  animation: obFadeUp 0.4s ease 0.65s forwards;
}
.ob-screen.active .ob-hint {
  opacity: 0;
  animation: obFadeUp 0.4s ease 0.6s forwards;
}

/* Step label: typewriter curto */
.ob-screen.active .ob-step-label {
  overflow: hidden; white-space: nowrap;
  display: inline-block; width: 0;
  border-right: 2px solid var(--accent);
  animation:
    obTypewriter 0.25s steps(5, end) 0s forwards,
    obCursorBlink 0.5s step-end 0s 3;
}

/* Títulos */
.ob-title {
  font-size: 30px; font-weight: 800;
  line-height: 1.2; margin-bottom: 14px;
}
.ob-title-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-teal, #4ECDC4));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ob-sub {
  font-size: 14px; color: var(--text-sec);
  margin-bottom: 36px; line-height: 1.6;
}
.ob-heading {
  font-size: 22px; font-weight: 800;
  margin-bottom: 6px;
}
.ob-hint {
  font-size: 13px; color: var(--text-sec);
  margin-bottom: 20px; line-height: 1.5;
}
.ob-step-label {
  font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 10px;
}

/* Input com ícone */
.ob-input-wrap {
  position: relative; margin-bottom: 20px;
}
.ob-input-icon {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-sec); font-size: 15px;
  pointer-events: none;
}
.ob-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-accent, rgba(124,111,205,0.3));
  border-radius: var(--radius-btn, 12px);
  padding: 15px 16px 15px 44px;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ob-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,111,205,0.15);
}

/* Opções */
.ob-options {
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 20px;
}
.ob-opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-btn, 12px);
  padding: 14px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--text); cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
  text-align: left;
}
.ob-opt:active { transform: scale(0.98); }
.ob-opt-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--text-sec);
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.ob-opt-text {
  display: flex; flex-direction: column; gap: 2px;
}
.ob-opt-text strong { font-size: 14px; font-weight: 700; }
.ob-opt-text small  { font-size: 12px; color: var(--text-sec); font-weight: 400; }

.ob-opt.selected {
  border-color: var(--accent);
  background: rgba(124,111,205,0.1);
  animation: optPop 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.ob-opt.selected .ob-opt-icon {
  background: rgba(124,111,205,0.2);
  color: var(--accent);
}
.ob-opt.selected .ob-opt-text small { color: rgba(124,111,205,0.85); }

@keyframes optPop {
  0%   { transform: scale(0.97); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Meta diária (stepper) */
.ob-daily-goal-row {
  display: flex; align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 14px 16px;
  margin-bottom: 20px;
}
.ob-goal-label {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.ob-goal-label i { color: var(--accent); }
.ob-goal-stepper {
  display: flex; align-items: center; gap: 16px;
}
.ob-goal-stepper span {
  font-size: 20px; font-weight: 800;
  min-width: 28px; text-align: center;
  font-family: 'Rajdhani', sans-serif;
  color: var(--accent);
}
.ob-step-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(124,111,205,0.15);
  border: 1px solid rgba(124,111,205,0.3);
  color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background 0.15s, transform 0.1s;
}
.ob-step-btn:active { transform: scale(0.9); }
.ob-step-btn:hover { background: rgba(124,111,205,0.28); }

/* Botão CTA com shimmer */
.ob-cta-pulse {
  position: relative; overflow: hidden;
}
.ob-cta-pulse::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 2.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -100%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}

/* Botão finish com glow */
.ob-finish-btn {
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(124,111,205,0.35);
  transition: box-shadow 0.2s, transform 0.15s;
}
.ob-finish-btn:hover {
  box-shadow: 0 6px 32px rgba(124,111,205,0.5);
  transform: translateY(-1px);
}
.ob-finish-btn:active { transform: scale(0.98); }

/* ── STEP 7: Animação de conclusão ───────────────────── */
.ob-finish-anim {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 32px 0;
}

.ob-ring-wrap {
  position: relative;
  width: 140px; height: 140px;
}
.ob-ring-svg {
  width: 140px; height: 140px;
  transform: rotate(-90deg);
}
.ob-ring-bg {
  fill: none;
  stroke: rgba(124,111,205,0.12);
  stroke-width: 8;
}
.ob-ring-arc {
  fill: none;
  stroke: url(#ob-grad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327; /* 2π×52 */
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ob-ring-arc.complete {
  stroke-dashoffset: 0;
}

.ob-ring-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: var(--accent);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.ob-ring-icon.show {
  transform: scale(1);
}
.ob-ring-icon.explode {
  animation: ringExplode 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes ringExplode {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); color: var(--accent-teal, #4ECDC4); }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1.1); }
}

/* Partículas de explosão */
.ob-burst {
  position: absolute; inset: 0;
  pointer-events: none;
}
.ob-burst-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  animation: burstDot 0.7s ease-out forwards;
}
@keyframes burstDot {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(1); opacity: 0; }
}

.ob-finish-label {
  font-size: 24px; font-weight: 800;
  text-align: center; opacity: 0;
  transition: opacity 0.4s ease 0.3s;
  overflow: hidden; white-space: nowrap;
  width: 0; border-right: 2px solid var(--accent);
}
.ob-finish-label.show {
  opacity: 1; width: auto;
  animation:
    obTypewriter 0.6s steps(22, end) forwards,
    obCursorBlink 0.5s step-end 4;
  border-right: 2px solid var(--accent);
}

.ob-finish-sub {
  font-size: 14px; color: var(--text-sec);
  text-align: center; opacity: 0;
  transition: opacity 0.4s ease;
}
.ob-finish-sub.show { opacity: 1; }

/* ── STEP 8: Tutorial ────────────────────────────────── */
.ob-tut-header {
  margin-bottom: 8px;
}

/* visual card mockup */
.ob-tut-visual {
  background: var(--bg-card);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 16px;
  min-height: 180px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  animation: obFadeUp 0.35s ease forwards;
}

/* linhas skeleton que aparecem no visual */
.tut-row {
  display: flex; align-items: center; gap: 10px;
}
.tut-icon-box {
  width: 36px; height: 36px; border-radius: 10px;
  flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 16px;
}
.tut-line { height: 10px; border-radius: 5px; flex: 1; }
.tut-line.short { max-width: 60%; }
.tut-line.xsmall { max-width: 35%; }
.tut-badge {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.tut-bar-track {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06); width: 100%;
}
.tut-bar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-teal,#4ECDC4));
}
.tut-highlight {
  position: absolute; inset: 0;
  border: 2px solid var(--accent);
  border-radius: 16px;
  opacity: 0;
  animation: tutPulse 1.8s ease-in-out infinite;
}
@keyframes tutPulse {
  0%,100% { opacity: 0; }
  50%      { opacity: 0.5; }
}

/* dots de navegação */
.ob-tut-dots {
  display: flex; justify-content: center;
  gap: 6px; margin-bottom: 20px;
}
.ob-tut-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.15);
  transition: width 0.3s, background 0.3s;
}
.ob-tut-dot.active {
  width: 20px;
  background: var(--accent);
}

/* nav buttons */
.ob-tut-nav {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.ob-tut-skip {
  background: none; border: none;
  color: var(--text-sec); font-family: 'Nunito', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 10px 4px;
  transition: color 0.2s;
}
.ob-tut-skip:hover { color: var(--text); }
.ob-tut-nav .btn-primary {
  flex: 1;
}

/* typewriter aplicada ao tutorial */
.ob-screen.active #ob-tut-title {
  overflow: hidden; white-space: normal;
  max-height: 0; opacity: 0;
  border-right: 2px solid transparent;
  animation:
    obRevealLines 0.5s cubic-bezier(0.4,0,0.2,1) 0.15s forwards,
    obCursorBlink 0.55s step-end 0.15s 4;
}
.ob-screen.active #ob-tut-step-label {
  overflow: hidden; white-space: nowrap;
  display: inline-block; width: 0;
  border-right: 2px solid var(--accent);
  animation:
    obTypewriter 0.22s steps(5, end) 0s forwards,
    obCursorBlink 0.5s step-end 0s 3;
}
.ob-screen.active #ob-tut-desc {
  opacity: 0;
  animation: obFadeUp 0.4s ease 0.55s forwards;
}
/* #endregion */
  
.levelup-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.levelup-overlay.hidden { display: none; }

.levelup-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,16,0.92);
  backdrop-filter: blur(6px);
}

.levelup-content {
  position: relative;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.levelup-badge-wrap {
  position: relative;
  width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}

.levelup-ring-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.levelup-ring-bg {
  fill: none;
  stroke: rgba(255,209,102,0.1);
  stroke-width: 4;
}

.levelup-ring-glow {
  fill: none;
  stroke: #FFD166;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  animation: levelup-arc 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
  filter: drop-shadow(0 0 6px rgba(255,209,102,0.6));
}

@keyframes levelup-arc {
  to { stroke-dashoffset: 0; }
}

.levelup-badge-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

.levelup-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #FFD166;
  opacity: 0.85;
  text-transform: uppercase;
}

.levelup-number {
  font-family: 'Rajdhani', sans-serif;
  font-size: 88px; font-weight: 700;
  color: #FFD166;
  line-height: 0.95;
}

.levelup-title {
  font-size: 24px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.levelup-sub {
  font-size: 13px;
  color: var(--text-sec);
  margin: 0;
}

.levelup-rewards {
  margin-top: 8px;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

.levelup-reward-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,209,102,0.1);
  border: 1px solid rgba(255,209,102,0.25);
  color: #FFD166;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
/* ── SNACKBAR ────────────────────────────────────────── */
.snackbar {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 10px);
  left: 12px; right: 12px;
  background: #2a2a3a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-btn);
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  z-index: 300;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);

  /* estado inicial: fora do fluxo visual */
  opacity: 0;
  transform: translateY(16px);
}

.snackbar.hidden {
  display: none;
}

/* Entrada: sobe + fade in */
.snackbar.sb-enter {
  animation: sb-in 0.28s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

/* Saída: desce + fade out */
.snackbar.sb-exit {
  animation: sb-out 0.22s ease-in forwards;
}

@keyframes sb-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sb-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

#snackbar-undo {
  background: none; border: none;
  color: var(--accent);
  font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 800;
  cursor: pointer; padding: 0;
  /* pequeno pulse no hover para dar destaque */
  transition: opacity 0.15s;
}
#snackbar-undo:hover { opacity: 0.75; }

/* ── XP TOAST ────────────────────────────────────────── */
.xp-toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--accent-warn);
  color: #0E0E14;
  font-family: 'Rajdhani', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  max-width: 260px;
  white-space: nowrap;
  transition: max-width 0.15s, font-size 0.15s;
}

.xp-toast.hidden  { display: none; }
.xp-toast.visible { animation: toast-anim var(--toast-dur, 1.9s) forwards; }
  
  /* ── DAY SUMMARY ─────────────────────────────────────── */
  .fullmodal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
  .fullmodal.hidden { display: none; }
  .fullmodal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); }
  .fullmodal-panel {
    position: relative; background: var(--bg-secondary);
    border-radius: 22px 22px 0 0; padding: 22px 20px;
    padding-bottom: calc(30px + var(--safe-bottom));
    width: 100%; max-width: 430px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .ds-header { text-align: center; margin-bottom: 20px; }
  .ds-icon { font-size: 28px; color: var(--accent-warn); margin-bottom: 8px; display: block; }
  .ds-header h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
  .ds-sub { font-size: 13px; color: var(--text-sec); }
  .ds-cards { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
  .ds-card {
    background: var(--bg-card); border-radius: var(--radius-card);
    padding: 13px 16px; display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--border);
  }
  .ds-card-label { font-size: 13px; color: var(--text-sec); }
  .ds-card-val { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: var(--accent-warn); }
  
  /* ── UTILS ───────────────────────────────────────────── */
  .hidden { display: none !important; }
  .rajdhani { font-family: 'Rajdhani', sans-serif; }

  .empty-first-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 16px;
    text-align: center;
  }
  .empty-first-cta i {
    font-size: 26px;
    color: var(--accent-purple, #7C6FCD);
    margin-bottom: 6px;
    opacity: .85;
  }
  .empty-first-cta p {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
  }
  .empty-first-cta span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 240px;
  }
  /* ── Lembrete antecipado & Modo Insistente ─────────── */
.remind-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.remind-pill {
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.remind-pill.active {
  background: var(--accent-teal, #4ECDC4);
  color: #0e0e14;
  border-color: var(--accent-teal, #4ECDC4);
}

/* Badge ON ao lado do label */
.insistent-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #EF476F22;
  color: #EF476F;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Toggle switch genérico */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border, #333);
  border-radius: 34px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #EF476F;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Indicador visual no card de tarefa */
.task-remind-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-teal, #4ECDC4);
  background: var(--accent-teal, #4ECDC4)1a;
  border-radius: 6px;
  padding: 2px 6px;
}

.task-insistent-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #EF476F;
  background: #EF476F1a;
  border-radius: 6px;
  padding: 2px 6px;
}

/* ── Context Menu nav ───────────────────────────────── */
.ctx-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 2px;
}

.ctx-menu-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--bg-card, #1a1a24);
  border: 1px solid var(--border, #2a2a3a);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.ctx-menu-btn:active {
  background: var(--bg-hover, #22223a);
}

.ctx-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ctx-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ctx-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #fff);
}

.ctx-text small {
  font-size: 11px;
  color: var(--text-muted, #888);
  line-height: 1.3;
}

.ctx-arrow {
  font-size: 11px;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

/* ── Feedback visual durante o swipe ────────────────── */
.task-card {
  transition: background 0.05s;
}

.task-card-inner {
  transition: transform 0.05s linear, opacity 0.05s linear;
  will-change: transform;
}

/* ── MISSION TASK CARD (task expandida com subtasks) ─────── */
.mission-task-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid rgba(124, 111, 205, 0.35);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(124,111,205,0.08), 0 4px 18px rgba(0,0,0,0.18);
}

/* Faixa colorida lateral */
.mission-task-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #7C6FCD), #4ECDC4);
  border-radius: 3px 0 0 3px;
}

/* ── Cabeçalho da missão ── */
.mtc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 10px 18px;
  cursor: pointer;
  user-select: none;
}

.mtc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124,111,205,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--accent, #7C6FCD);
  flex-shrink: 0;
}

.mtc-info {
  flex: 1;
  min-width: 0;
}

.mtc-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.mtc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mtc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(124,111,205,0.14);
  color: var(--accent, #7C6FCD);
}

.mtc-xp-total {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warn, #FFD166);
  flex-shrink: 0;
}

.mtc-chevron {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.mtc-chevron.open { transform: rotate(180deg); }

/* ── Barra de progresso ── */
.mtc-progress-wrap {
  padding: 0 14px 0 18px;
  margin-bottom: 2px;
}

.mtc-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}

.mtc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7C6FCD), #4ECDC4);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

.mtc-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
  margin-bottom: 8px;
  padding-right: 0;
}

/* ── Lista de subtasks ── */
.mtc-subtasks {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

.mtc-subtasks.open {
  max-height: 600px;
}

.mtc-subtask-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px 10px 18px;
}

/* ── Subtask item ── */
.mtc-subtask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 4px;
  border-radius: 10px;
  transition: background 0.12s;
  position: relative;
}

.mtc-subtask:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 0;
  height: 1px;
  background: var(--border, #2a2a3a);
  opacity: 0.5;
}

/* Hold ring para subtask */
.mtc-sub-check-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mtc-sub-check-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s;
}

.mtc-sub-check-ring i {
  font-size: 11px;
  opacity: 0;
  color: var(--accent-teal, #4ECDC4);
  transition: opacity 0.2s;
}

.mtc-subtask.done .mtc-sub-check-ring {
  background: rgba(78,205,196,0.12);
  border-color: var(--accent-teal, #4ECDC4);
}

.mtc-subtask.done .mtc-sub-check-ring i { opacity: 1; }

.mtc-sub-hold-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-teal) 0%, transparent 0%);
  pointer-events: none;
}

.mtc-sub-content {
  flex: 1;
  min-width: 0;
}

.mtc-sub-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 2px;
  margin-left: 5px;
  transition: color 0.2s;
}

.mtc-subtask.done .mtc-sub-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.mtc-sub-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mtc-sub-time {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.mtc-sub-tip {
  font-size: 10px;
  color: var(--accent, #7C6FCD);
  font-style: italic;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.mtc-sub-xp {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-warn, #FFD166);
  flex-shrink: 0;
}

/* ── Estado loading (aguardando IA) ── */
.mtc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 18px;
}

.mtc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(124,111,205,0.2);
  border-top-color: var(--accent, #7C6FCD);
  border-radius: 50%;
  animation: mtc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes mtc-spin {
  to { transform: rotate(360deg); }
}

.mtc-loading-text {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Estado de erro ── */
.mtc-error {
  padding: 10px 16px 14px 18px;
  font-size: 12px;
  color: #EF476F;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Missão concluída (todas subtasks done) ── */
.mission-task-card.all-done {
  opacity: 0.5;
  border-color: rgba(78,205,196,0.2);
}

.mission-task-card.all-done::before {
  background: var(--accent-teal, #4ECDC4);
}

/* ── MISSION TASK CARD (task expandida com subtasks) ─────── */
.mission-task-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid rgba(124, 111, 205, 0.35);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(124,111,205,0.08), 0 4px 18px rgba(0,0,0,0.18);
}

/* Faixa colorida lateral */
.mission-task-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #7C6FCD), #4ECDC4);
  border-radius: 3px 0 0 3px;
}

/* ── Cabeçalho da missão ── */
.mtc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 10px 18px;
  cursor: pointer;
  user-select: none;
}

.mtc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124,111,205,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--accent, #7C6FCD);
  flex-shrink: 0;
}

.mtc-info {
  flex: 1;
  min-width: 0;
}

.mtc-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.mtc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mtc-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(124,111,205,0.14);
  color: var(--accent, #7C6FCD);
}

.mtc-xp-total {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-warn, #FFD166);
  flex-shrink: 0;
}

.mtc-chevron {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.mtc-chevron.open { transform: rotate(180deg); }

/* ── Barra de progresso ── */
.mtc-progress-wrap {
  padding: 0 14px 0 18px;
  margin-bottom: 2px;
}

.mtc-progress-track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}

.mtc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #7C6FCD), #4ECDC4);
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

.mtc-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
  margin-bottom: 8px;
  padding-right: 0;
}

/* ── Lista de subtasks ── */
.mtc-subtasks {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

.mtc-subtasks.open {
  max-height: none;
}

.mtc-subtask-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 10px 10px 18px;
}

/* ── Subtask item ── */
.mtc-subtask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 4px;
  border-radius: 10px;
  transition: background 0.12s;
  position: relative;
}

.mtc-subtask:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 0;
  height: 1px;
  background: var(--border, #2a2a3a);
  opacity: 0.5;
}

/* Hold ring para subtask */
.mtc-sub-check-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mtc-sub-check-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s, background 0.25s;
}

.mtc-sub-check-ring i {
  font-size: 11px;
  opacity: 0;
  color: var(--accent-teal, #4ECDC4);
  transition: opacity 0.2s;
}

.mtc-subtask.done .mtc-sub-check-ring {
  background: rgba(78,205,196,0.12);
  border-color: var(--accent-teal, #4ECDC4);
}

.mtc-subtask.done .mtc-sub-check-ring i { opacity: 1; }

.mtc-sub-hold-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-teal) 0%, transparent 0%);
  pointer-events: none;
}


.mtc-sub-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mtc-sub-time {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.mtc-sub-tip {
  font-size: 10px;
  color: var(--accent, #7C6FCD);
  font-style: italic;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.mtc-sub-xp {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-warn, #FFD166);
  flex-shrink: 0;
}

/* ── Estado loading (aguardando IA) ── */
.mtc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 18px;
}

.mtc-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(124,111,205,0.2);
  border-top-color: var(--accent, #7C6FCD);
  border-radius: 50%;
  animation: mtc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes mtc-spin {
  to { transform: rotate(360deg); }
}

.mtc-loading-text {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Estado de erro ── */
.mtc-error {
  padding: 10px 16px 14px 18px;
  font-size: 12px;
  color: #EF476F;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Missão concluída (todas subtasks done) ── */
.mission-task-card.all-done {
  opacity: 0.5;
  border-color: rgba(78,205,196,0.2);
}

.mission-task-card.all-done::before {
  background: var(--accent-teal, #4ECDC4);
}
/* ── Task type toggle (Tarefa / Missão) ─────────────── */
.task-type-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.task-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--border, #2a2a3a);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.task-type-btn.active {
  background: rgba(124,111,205,0.14);
  color: var(--accent, #7C6FCD);
  border-color: rgba(124,111,205,0.4);
}

.task-type-btn[data-type="mission"].active,
.task-type-btn[data-mode="ai"].active {
  background: rgba(255,209,102,0.1);
  color: #FFD166;
  border-color: rgba(255,209,102,0.35);
}

.task-type-hint {
  font-size: 11px;
  color: #FFD166;
  background: rgba(255,209,102,0.08);
  border: 1px solid rgba(255,209,102,0.2);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-type-hint.hidden { display: none; }

/* ── Notas / Mais informações ───────────────────────── */
.task-notes-input {
  width: 100%;
  background: var(--bg-input, rgba(255,255,255,0.05));
  border: 1px solid var(--border, #2a2a3a);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  padding: 10px 12px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.task-notes-input:focus {
  border-color: rgba(124,111,205,0.5);
}

.notes-char-counter {
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Botão "+" no cabeçalho do mission card ─────────── */
.mtc-add-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(124,111,205,0.3);
  background: rgba(124,111,205,0.1);
  color: var(--accent, #7C6FCD);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.mtc-add-btn:active {
  background: rgba(124,111,205,0.25);
}

/* ── Sugestão de IA no sheet de subtask ─────────────── */
.ai-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #2a2a3a);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.ai-suggestion-item.selected {
  border-color: rgba(124,111,205,0.5);
  background: rgba(124,111,205,0.08);
}

.ai-suggestion-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-suggestion-item.selected .ai-suggestion-check {
  background: var(--accent, #7C6FCD);
  border-color: var(--accent, #7C6FCD);
  color: #fff;
}

.ai-suggestion-info { flex: 1; min-width: 0; }

.ai-suggestion-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.ai-suggestion-meta {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── CALENDÁRIO SAZONAL ───────────────────────────────────── */

/* Legenda de tipos */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.cal-legend-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}

/* Bloco mensal */
.cal-month-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 14px;
}
.cal-month-block.cal-month-today {
  border-color: rgba(124,111,205,0.35);
  box-shadow: 0 0 0 1px rgba(124,111,205,0.18);
}

/* Cabeçalho do mês */
.cal-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}
.cal-month-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
}
.cal-month-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Lista de eventos */
.cal-events {
  display: flex;
  flex-direction: column;
}

/* Linha de evento */
.cal-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.15s;
}
.cal-event-row:last-child {
  border-bottom: none;
}
.cal-event-row.cal-event-today {
  background: rgba(124,111,205,0.07);
}

/* Coluna de data */
.cal-event-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
}
.cal-event-day {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.cal-event-weekday {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Ícone */
.cal-event-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* Informações do evento */
.cal-event-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-event-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badge "hoje" */
.cal-today-badge {
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}
@keyframes toast-anim {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
/* ── CAL: chips de tarefas na row ─── */
.cal-task-chips {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.cal-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.cal-task-chip i { font-size: 9px; }
.cal-task-chip-pending {
  background: rgba(124,111,205,0.14);
  color: var(--accent);
}
.cal-task-chip-done {
  background: rgba(78,205,196,0.12);
  color: var(--accent-teal);
}

/* Seta à direita indicando que é clicável */
.cal-row-arrow {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 2px;
}

/* Feedback visual de hold */
.cal-event-row {
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.cal-event-row:active,
.cal-event-row.cal-event-holding {
  background: rgba(124,111,205,0.10);
  transform: scale(0.985);
}

/* ── CAL DAY SHEET ───────────────── */
.cal-day-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.cal-day-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cal-day-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-day-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day-date {
  font-size: 12px;
  color: var(--text-sec);
  text-transform: capitalize;
}
.cal-day-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cal-day-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

/* Rows de task dentro do sheet */
.cal-day-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cal-day-task-row:active { border-color: var(--accent); }
.cal-day-task-row.cal-day-task-done { opacity: 0.5; }
.cal-day-task-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-day-task-dot.imp-mandatory { background: #EF476F; }
.cal-day-task-dot.imp-necessary { background: #FFD166; }
.cal-day-task-dot.imp-standard  { background: var(--accent); }
.cal-day-task-dot.imp-idea      { background: var(--text-muted); }
.cal-day-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-day-task-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day-task-cat {
  font-size: 10px;
  font-weight: 700;
}
.cal-day-empty {
  text-align: center;
  padding: 28px 0 20px;
  color: var(--text-muted);
}
.cal-day-empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.3;
}
.cal-day-empty p {
  font-size: 13px;
}
/* ── SEASONAL BANNER (tela Hoje) ──────────────────────────── */
.seasonal-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid;          /* cor vinda de style="" */
  border-radius: var(--radius-card);
  padding: 13px 14px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  position: relative;
  overflow: hidden;
}
.seasonal-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--banner-accent, var(--accent));
  border-radius: 3px 0 0 3px;
}
.seasonal-banner:active { transform: scale(0.985); background: var(--bg-card2); }

.seasonal-banner-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.seasonal-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.seasonal-banner-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seasonal-banner-desc {
  font-size: 11px;
  color: var(--text-sec);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seasonal-banner-arrow {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.6;
}
/* #region empresa */
/* ═══════════════════════════════════════════════════════════
   EMPRESA — Estilos
   ═══════════════════════════════════════════════════════════ */

/* ── Botões gerais ── */
.btn-secondary {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
}
.btn-secondary:active { transform: scale(0.97); }
.mt-10 { margin-top: 10px; }

/* ── Rótulo de seção nas settings ── */
.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ── Welcome / Empty state ── */
.empresa-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 8px 16px;
  gap: 0;
}
.empresa-welcome-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(124,111,205,0.18), rgba(91,141,239,0.12));
  border: 1px solid rgba(124,111,205,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--accent);
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(124,111,205,0.15);
}
.empresa-welcome-title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.2;
}
.empresa-welcome-sub {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 280px;
}

/* ── Hero card da empresa ── */
.empresa-hero-card {
  background: linear-gradient(135deg, #1e1b32, #1a1e2e);
  border-radius: var(--radius-card);
  padding: 16px;
  border: 1px solid var(--border-accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 24px rgba(124,111,205,0.1);
}
.empresa-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.empresa-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124,111,205,0.25);
}
.empresa-hero-name {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empresa-hero-meta {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 2px;
}
.empresa-settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.empresa-settings-btn:active { background: rgba(255,255,255,0.1); }

/* ── Código de convite ── */
.empresa-invite-row {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.empresa-invite-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.empresa-invite-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.2em;
}
.empresa-copy-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(124,111,205,0.12);
  border: 1px solid rgba(124,111,205,0.25);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.empresa-copy-btn:active { transform: scale(0.9); }

/* ── Tabs internas ── */
.empresa-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.empresa-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.empresa-tab i { font-size: 12px; }
.empresa-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,111,205,0.1);
}

.empresa-tab-content { display: none; }
.empresa-tab-content.active { display: block; }

/* ── Cabeçalho de seção interna ── */
.empresa-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.empresa-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.empresa-add-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(124,111,205,0.12);
  border: 1px solid rgba(124,111,205,0.25);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.1s;
}
.empresa-add-btn:active { transform: scale(0.9); }

/* ── Filtros ── */
.empresa-filter-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 2px;
}
.empresa-filter-row::-webkit-scrollbar { display: none; }
.empresa-filter-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sec);
  white-space: nowrap;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all 0.13s;
}
.empresa-filter-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,111,205,0.1);
}

/* ── Lista de membros ── */
.empresa-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.empresa-member-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.empresa-member-card:active { border-color: var(--accent); }
.membro-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.membro-info { flex: 1; min-width: 0; }
.membro-nome {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.membro-grupo-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
}
.membro-no-grupo {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.membro-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(124,111,205,0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.membro-role-badge.admin {
  background: rgba(255,209,102,0.12);
  color: var(--accent-warn);
}

/* ── Tab Tarefas ── */
.empresa-tarefas-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.empresa-tarefa-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s;
}
.empresa-tarefa-card.concluida {
  opacity: 0.5;
  border-color: rgba(78,205,196,0.2);
}

/* Indicador de status (bolinha) */
.tarefa-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.tarefa-status-dot.pendente  { background: rgba(255,209,102,0.9); }
.tarefa-status-dot.concluida { background: var(--accent-teal); }

.tarefa-info { flex: 1; min-width: 0; }
.tarefa-titulo {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.empresa-tarefa-card.concluida .tarefa-titulo {
  text-decoration: line-through;
  color: var(--text-sec);
}
.tarefa-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.tarefa-assignee {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-sec);
  font-weight: 700;
}
.tarefa-assignee-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.tarefa-grupo-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.tarefa-data {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}
.tarefa-data.atrasada { color: #EF476F; }

/* ── Aviso não-admin ── */
.empresa-naoadmin-notice {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}
.empresa-naoadmin-notice i {
  font-size: 26px;
  opacity: 0.2;
  display: block;
  margin-bottom: 12px;
}
.empresa-naoadmin-notice p {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-sec);
}
.empresa-naoadmin-notice span {
  font-size: 12px;
  line-height: 1.5;
}

/* ── Empty grupos / tarefas ── */
.empresa-empty-groups {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}
.empresa-empty-groups i {
  font-size: 30px;
  opacity: 0.25;
  display: block;
  margin-bottom: 12px;
}
.empresa-empty-groups p {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.empresa-empty-groups span {
  font-size: 12px;
  line-height: 1.5;
}

/* ── Grupo card inline nas settings ── */
.settings-grupo-card {
  background: var(--bg-card);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: border-color 0.13s;
}
.settings-grupo-card:active { border-color: var(--accent); }
.settings-grupo-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.settings-grupo-info { flex: 1; min-width: 0; }
.settings-grupo-nome {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-grupo-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.settings-grupo-edit {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Campos bloqueados para não-admin ── */
#settings-empresa-nome:disabled,
#settings-empresa-segmento:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border) !important;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.02) 4px,
    rgba(255,255,255,0.02) 8px
  );
}

/* ── Dot "+N" no stack de membros ── */
.grupo-member-dot-more {
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: -0.5px;
}

/* ── Context menu de membro ── */
.membro-ctx-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.membro-ctx-menu.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  width: 100%;
}
.ctx-menu-item i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--text-sec);
}
.ctx-menu-item:active,
.ctx-menu-item:hover { background: rgba(255,255,255,0.06); }
.ctx-menu-item.danger     { color: var(--accent-danger); }
.ctx-menu-item.danger i   { color: var(--accent-danger); }

/* ── Membro sheet profile ── */
.membro-sheet-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.membro-avatar-big {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.membro-sheet-name {
  font-size: 16px;
  font-weight: 800;
}
.membro-sheet-role {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 2px;
}

/* ── Radio de grupo no sheet de membro ── */
.grupo-radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.13s;
}
.grupo-radio-option.selected {
  border-color: var(--accent);
  background: rgba(124,111,205,0.08);
}
.grupo-radio-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.grupo-radio-label { flex: 1; font-size: 14px; font-weight: 700; }
.grupo-radio-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: transparent;
  transition: all 0.15s;
}
.grupo-radio-option.selected .grupo-radio-check {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}
.grupo-radio-option.sem-grupo .grupo-radio-icon {
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
}

/* ── Segmento grid (criar empresa) ── */
.empresa-segmento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.empresa-seg-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: all 0.13s;
}
.empresa-seg-btn i { font-size: 13px; }
.empresa-seg-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(124,111,205,0.1);
}
/* ── Banner de atribuição de tarefa ── */
.atribuir-banner {
  margin-bottom: 14px;
}
.atribuir-banner.hidden { display: none; }

.atribuir-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(124,111,205,0.1);
  border: 1px solid rgba(124,111,205,0.25);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
}
.atribuir-banner-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.atribuir-banner-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 3px;
}
.atribuir-banner-nome {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.atribuir-banner-grupo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  opacity: 0.85;
}
.atribuir-banner-clear {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.atribuir-banner-clear:active { background: rgba(255,255,255,0.12); }
/* #endregion */

#gen-cards-overlay {
  position: fixed;
  bottom: 90px; /* acima do FAB */
  left: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

#gen-cards-overlay .voice-generating-card {
  pointer-events: auto;
}

/* #region auth */
/* ── AUTH SCREEN ─────────────────────────────────────── */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
  overflow-y: auto;
  background: var(--bg-primary);
}
.auth-screen.hidden { display: none; }

#auth-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.auth-screen > *:not(canvas) { position: relative; z-index: 1; }

/* Logo */
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.auth-logo-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  box-shadow: 0 0 18px rgba(124,111,205,0.35);
}

/* Tabs */
.auth-tabs {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  padding: 9px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-tab.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,111,205,0.3);
}

/* Painéis */
.auth-panel {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-panel.hidden { display: none; }

/* Input wrap */
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.auth-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 13px 42px;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-input::placeholder { color: var(--text-muted); }

/* Botão olho */
.auth-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.auth-eye-btn:active { color: var(--accent); }

/* Esqueci senha */
.auth-forgot {
  background: none;
  border: none;
  color: var(--accent);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: right;
  padding: 0;
  align-self: flex-end;
  margin-top: -4px;
}

/* Força da senha */
.auth-strength-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}
.auth-strength-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  border-radius: 4px;
  width: 0%;
  transition: width 0.35s, background 0.35s;
}
.auth-strength-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
  transition: color 0.35s;
}

/* Termos */
.auth-terms {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: -4px;
}
.auth-link { color: var(--accent); cursor: pointer; font-weight: 700; }

/* Feedback */
.auth-feedback {
  width: 100%;
  max-width: 340px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  transition: opacity 0.2s;
}
.auth-feedback.hidden { display: none; }
.auth-feedback.error {
  background: rgba(239,71,111,0.1);
  border-color: rgba(239,71,111,0.25);
  color: #EF476F;
}
.auth-feedback.success {
  background: rgba(78,205,196,0.1);
  border-color: rgba(78,205,196,0.25);
  color: var(--accent-teal);
}

/* Submit com loading */
.auth-submit-btn { position: relative; overflow: hidden; }
.auth-submit-btn.loading { pointer-events: none; opacity: 0.75; }
.auth-submit-btn.loading::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
/* ── AUTH BACKGROUND ─────────────────────────────────── */
#auth-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Gradiente radial suave que pulsa levemente */
.auth-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 40%, rgba(124,111,205,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 75% 65%, rgba(78,205,196,0.08) 0%, transparent 65%);
  animation: auth-pulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes auth-pulse {
  from { opacity: 0.6; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* Vinheta nas bordas para dar profundidade */
.auth-screen::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 50%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

/* ── TAGLINE ROTATIVA ────────────────────────────────── */
.auth-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: -12px;       /* menos agressivo que -20px */
  margin-bottom: 28px;
  width: 100%;             /* garante referência para o filho absoluto */
  max-width: 340px;        /* alinha com os outros elementos */
  height: 22px;            /* altura fixa confiável */
  position: relative;
  z-index: 2;
  /* overflow: visible → removido; o filho absolute não precisa disso */
}

.auth-tagline-text {
  display: block;
  position: absolute;
  left: 0;
  right: 0;                /* substitui width:100% de forma mais robusta */
  text-align: center;
  white-space: nowrap;     /* impede quebra de linha */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.auth-tagline-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.auth-tagline-text.leaving {
  opacity: 0;
  transform: translateY(-12px);
}

/* #endregion */