:root {
      --glass-opacity: 0.60;
      --glass-blur: 18px;
      --video-dim: 0.45;
      --glass-tint: 15, 23, 42;
      --accent-color: #6366f1;
      --accent-glow: rgba(99, 102, 241, 0.35);
    }

    .accent-bg { background-color: var(--accent-color); }
    .accent-text { color: var(--accent-color); }
    .accent-border { border-color: var(--accent-color); }

    .glass-panel {
      background: rgba(var(--glass-tint), var(--glass-opacity));
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
    }

    .glass-card {
      display: flex;
      width: 100%;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none !important;
      cursor: pointer;
    }

    .glass-card:hover, .glass-card.search-selected {
      background: rgba(255, 255, 255, 0.10);
      border-color: var(--accent-color);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -5px var(--accent-glow);
    }

    .glass-input {
      background: rgba(0, 0, 0, 0.38);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(8px);
      color: #fff;
    }

    .glass-input:focus {
      border-color: var(--accent-color);
      outline: none;
      box-shadow: 0 0 0 2px var(--accent-glow);
    }

    .animated-bg {
      background: linear-gradient(-45deg, #090d16, #1e1b4b, #111827, #070a10);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Quickbar Liquid Dock */
    .liquid-dock {
      background: rgba(var(--glass-tint), calc(var(--glass-opacity) + 0.15));
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

    .pulse-dot { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    .cat-drag-handle, .ws-drag-handle, .quick-drag-handle { 
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }
    .cat-drag-handle:active, .ws-drag-handle:active, .quick-drag-handle:active { cursor: grabbing; }

    .drawer-slide { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    .drawer-slide.closed { transform: translateX(105%); }

    /* REGRAS DO MODO ZEN */
    .zen-active #mainHeaderTop,
    .zen-active #searchContainer,
    .zen-active #tagFilterBar,
    .zen-active #mainFooter,
    .zen-active #activeNotesWrapper,
    .zen-active #notesPillsContainer,
    .zen-active #pinnedNoteWidget,
    .zen-active #btnNewWs {
      display: none !important;
    }

    .zen-active #zenBottomSheet { display: flex !important; }
    .zen-active #zenNotesTriggerBtn { display: flex !important; }
    .zen-active .card-extra-info { display: none !important; }
    .zen-active #quickPinnedWrapper { margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; }

    /* Busca no ZEN: overlay que desliza de cima quando / é pressionado */
    #zenSearchScrim {
      display: none;
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    body.zen-search-open #zenSearchScrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 44;
      background: rgba(2, 6, 23, 0.30);
      opacity: 1;
      /* sem backdrop-filter: mantém a página nítida (a barra não fica borrada) */
    }
    /* A busca vive dentro do <header> (z-30); eleva acima do scrim p/ não escurecer o overlay */
    body.zen-search-open #mainHeader { z-index: 48; }
    /* esconde Acesso Rápido e linha de abas durante a busca zen (visual limpo) */
    body.zen-search-open #quickPinnedWrapper,
    body.zen-search-open #workspaceNavRow { display: none !important; }
    body.zen-search-open #searchContainer {
      display: block !important;
      position: fixed;
      top: 24px;
      left: 50%;
      width: min(94vw, 900px);
      max-width: min(94vw, 900px) !important;
      margin: 0 !important;
      z-index: 46;
      animation: zenSearchIn 0.3s ease both;
    }
    body.zen-search-open #searchContainer input#searchInput {
      font-size: 1rem;
      padding-top: 0.95rem;
      padding-bottom: 0.95rem;
      border-radius: 1.1rem;
    }
    @keyframes zenSearchIn {
      from { opacity: 0; transform: translate(-50%, -24px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }
    @keyframes zenSearchOut {
      from { opacity: 1; transform: translate(-50%, 0); }
      to { opacity: 0; transform: translate(-50%, -24px); }
    }
    body.zen-search-closing #searchContainer {
      animation: zenSearchOut 0.24s ease forwards;
      pointer-events: none;
    }
    body.zen-search-closing #zenSearchScrim { opacity: 0; }
    body.zen-search-open #searchContainer #searchResultsPanel {
      /* painel de resultados dentro do overlay zen */
      position: absolute;
      top: 100%;
      inset-inline: 0;
    }

    /* ==================================================================
       ROBUSTEZ (v1.2.1): classes que eram usadas mas nunca definidas
       ================================================================== */

    /* Grid de categorias com colunas dinâmicas via variável CSS.
       Evita depender do JIT do Tailwind Play para classes geradas em runtime
       (ex: lg:grid-cols-4) e funciona mesmo sem internet. */
    #categoriesContainer {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      align-items: start;
    }

    @media (min-width: 768px) {
      #categoriesContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      #categoriesContainer {
        grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
      }
    }

    /* Barra de abas sem scrollbar visível */
    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* Animação das janelas de notas */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in { animation: fadeInUp 0.28s ease both; }

    /* Foco acessível em diálogos (sem outline duplo de navegador) */
    [role="dialog"]:focus { outline: none; }

    /* Foco visível + cursor de navegação por teclado */
    :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
    .kb-selected {
      outline: 2px solid var(--accent-color) !important;
      outline-offset: 2px;
      box-shadow: 0 0 0 4px var(--accent-glow) !important;
    }
    .kb {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      color: #cbd5e1;
      line-height: 1.4;
    }
    html.theme-light .kb { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.15); color: #334155; }

    /* Fallback para col-spans das categorias (independe do JIT do Tailwind) */
    /* Ordem importa: .category-card (default span 1) ANTES de .col-span-full,
       senão o "full" perderia para o default. */
    .category-card { grid-column: span 1 / span 1; }
    .col-span-full { grid-column: 1 / -1; }
    .category-card.col-span-full { grid-column: 1 / -1; }
    @media (min-width: 768px) {
      .md\:col-span-2,
      .category-card.md\:col-span-2 { grid-column: span 2 / span 2; }
    }

    /* FIX: .glass-card define display:flex em styles.css (carregado DEPOIS do
       tailwind.css) e sobrescrevia o .hidden{display:none} — o filtro de busca
       "escondia" os cards mas eles continuavam visíveis. */
    .glass-card.hidden { display: none !important; }

    /* Hover de fundo do pill de nota minimizada (accent) */
    .group:hover .group-hover\:accent-bg { background-color: var(--accent-color); }

    /* ==================================================================
       TEMA CLARO (v1.3) — via classe em <html>, zero custo de runtime
       ================================================================== */
    html.theme-light body {
      background: linear-gradient(-45deg, #eef2ff, #e0e7ff, #f1f5f9, #eef2ff);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #0f172a;
    }
    html.theme-light .animated-bg {
      background: linear-gradient(-45deg, #eef2ff, #e0e7ff, #f1f5f9, #eef2ff);
      background-size: 400% 400%;
    }

    /* Superfícies de vidro claras */
    html.theme-light .glass-panel {
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(15, 23, 42, 0.12);
      box-shadow: 0 12px 40px 0 rgba(15, 23, 42, 0.10);
    }
    html.theme-light .glass-card {
      background: rgba(255, 255, 255, 0.66);
      border-color: rgba(15, 23, 42, 0.10);
    }
    html.theme-light .glass-card:hover,
    html.theme-light .glass-card.search-selected {
      background: rgba(255, 255, 255, 0.85);
      border-color: var(--accent-color);
    }
    html.theme-light .glass-input {
      background: rgba(255, 255, 255, 0.85);
      border-color: rgba(15, 23, 42, 0.18);
      color: #0f172a;
    }
    html.theme-light .liquid-dock {
      background: rgba(255, 255, 255, 0.72);
      border-color: rgba(15, 23, 42, 0.12);
      box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
    }

    /* Textos principais */
    html.theme-light .text-white,
    html.theme-light .text-slate-100,
    html.theme-light .text-slate-200,
    html.theme-light .text-slate-300 { color: #0f172a; }
    html.theme-light .text-slate-400,
    html.theme-light .text-slate-500 { color: #475569; }
    html.theme-light .text-indigo-300 { color: #4f46e5; }
    html.theme-light .text-amber-300,
    html.theme-light .text-amber-400 { color: #b45309; }
    html.theme-light .text-rose-300 { color: #be123c; }
    html.theme-light .text-emerald-300 { color: #047857; }
    html.theme-light .text-cyan-400 { color: #0e7490; }
    html.theme-light .text-sky-300 { color: #0369a1; }

    /* Fundos translúcidos escuros -> claros */
    html.theme-light .bg-white\/5,
    html.theme-light .bg-white\/10,
    html.theme-light .bg-white\/15 { background-color: rgba(15, 23, 42, 0.05); }
    html.theme-light .bg-black\/20 { background-color: rgba(15, 23, 42, 0.04); }
    html.theme-light .bg-slate-900\/90 { background-color: rgba(255, 255, 255, 0.9); }
    html.theme-light .bg-white\/10.hover\:bg-white\/20:hover { background-color: rgba(15, 23, 42, 0.10); }

    /* Seleção de linhas da palette e inputs */
    html.theme-light .bg-white\/10,
    html.theme-light .bg-white\/20 { background-color: rgba(15, 23, 42, 0.08); }
    html.theme-light .hover\:bg-white\/10:hover,
    html.theme-light .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.07); }
    html.theme-light .hover\:bg-white\/15:hover,
    html.theme-light .hover\:bg-white\/20:hover { background-color: rgba(15, 23, 42, 0.10); }
    html.theme-light .border-white\/10,
    html.theme-light .border-white\/15,
    html.theme-light .border-white\/20 { border-color: rgba(15, 23, 42, 0.12); }
    html.theme-light .border-white\/5 { border-color: rgba(15, 23, 42, 0.08); }

    /* Inputs de range */
    html.theme-light input[type="range"] { accent-color: var(--accent-color); }

    /* Scrollbar clara */
    html.theme-light ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.05); }
    html.theme-light ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.25); }
    html.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.4); }

    /* ==================================================================
       AURA ANIMADA NA BUSCA (gradiente em volta da barra)
       ================================================================== */
    .search-aura::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 1.1rem;
      padding: 2px;
      background: linear-gradient(120deg, #6366f1, #a855f7, #06b6d4, #f59e0b, #ec4899, #6366f1);
      background-size: 300% 300%;
      animation: auroraBorder 9s ease infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: 0;
      opacity: 0.45;
      transition: opacity 0.3s ease;
    }
    .search-aura:hover::before,
    .search-aura:focus-within::before { opacity: 1; }

    /* Fallback: sem suporte a mask de composição, desliga a aura (evita cobrir a barra) */
    @supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
      .search-aura::before { display: none; }
    }

    @keyframes auroraBorder {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ==================================================================
       ABA DA NOTA FIXADA (mobile): posição conforme o lado configurado
       ================================================================== */
    #pinnedNoteTab.pin-right { right: 0; left: auto; border-radius: 1rem 0 0 1rem; }
    #pinnedNoteTab.pin-left { left: 0; right: auto; border-radius: 0 1rem 1rem 0; }