/* ============================================================
       PALETA — editar aqui para mudar o visual completo
       Futuramente: carregar de tenant.cores para personalização por lojista
    ============================================================ */
    :root{
      /* Fundo e cards */
      --bg:#F0F4F8;
      --card:#FFFFFF;

      /* Texto */
      --dark:#0F172A;
      --muted:#64748B;

      /* Cor principal — azul profissional escuro */
      --primary:#1D6FE8;
      --primary-dark:#1558C0;
      --primary-light:#EBF2FF;

      /* Semânticas */
      --green:#10B981;
      --red:#EF4444;
      --yellow:#F59E0B;
      --blue:#3B82F6;
      --purple:#8B5CF6;

      /* Estrutura */
      --border:#E2E8F0;
      --shadow:0 4px 24px rgba(15,23,42,.08);
      --shadow-lg:0 20px 50px rgba(15,23,42,.12);
      --radius:16px;

      /* Sidebar */
      --sidebar:#0F172A;
      --sidebar-active:#1D6FE8;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Inter,system-ui,-apple-system,sans-serif;
      background:var(--bg);
      color:var(--dark);
      min-height:100vh;
    }

    /* ===== Scrollbar customizada ===== */
    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:#334155;border-radius:99px}
    ::-webkit-scrollbar-thumb:hover{background:#475569}

    /* ===== Layout responsivo ===== */
    .sidebar-desktop{display:none}
    .app-shell{
      max-width:430px;
      margin:0 auto;
      min-height:100vh;
      background:var(--bg);
      position:relative;
      overflow:hidden;
      box-shadow:0 0 0 1px rgba(0,0,0,.04),0 25px 80px rgba(0,0,0,.12);
    }

    @media(min-width:900px){
      body{display:flex;min-height:100vh}
      .app-shell{max-width:none;width:100%;box-shadow:none;background:var(--bg);overflow:visible}
      main#app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
      main#app > .main-col{min-width:0}
      .sidebar-desktop{
        display:flex;flex-direction:column;
        background:var(--sidebar);
        position:sticky;top:0;height:100vh;overflow-y:auto;
      }
      .topbar{padding:16px 32px}
      /* No desktop a sidebar já mostra logo e nome — esconde do topbar */
      .topbar .brand{display:none!important}
      /* Mostra o título da tela ativa no topbar desktop */
      .topbar-page-title{display:block!important}
      .content{padding:24px 32px 60px;max-width:1100px}
      .bottom-nav,.drawer,.drawer-backdrop,.icon-btn[data-action="menu"]{display:none!important}
    }

    /* ===== Topbar ===== */
    .topbar{
      position:sticky;top:0;z-index:30;
      display:flex;align-items:center;justify-content:space-between;
      padding:16px 18px 12px;
      background:rgba(240,244,248,.95);
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--border);
    }
    .brand{display:flex;align-items:center;gap:10px}
    .logo{
      width:44px;height:44px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--primary),#60A5FA);
      box-shadow:0 8px 20px rgba(14,165,233,.30);
      color:white;font-size:22px;
    }
    .brand h1{font-family:Nunito,sans-serif;font-size:22px;line-height:1;font-weight:900;color:var(--dark)}
    .brand span{font-size:11px;color:var(--muted);font-weight:600}
    .icon-btn{border:0;background:var(--card);width:46px;height:46px;border-radius:14px;font-size:22px;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;border:1px solid var(--border)}

    /* ===== Sidebar desktop ===== */
    .sidebar-brand{
      padding:22px 18px 18px;
      border-bottom:1px solid rgba(255,255,255,.06);
      display:flex;align-items:center;gap:12px;
    }
    .sidebar-brand .logo{width:40px;height:40px;font-size:19px}
    .sidebar-brand h1{font-family:Nunito;font-size:18px;color:#fff;font-weight:900}
    .sidebar-brand span{font-size:11px;color:rgba(255,255,255,.35);font-weight:600;display:block}
    .sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
    .sidebar-btn{
      width:100%;border:0;border-radius:12px;padding:11px 13px;
      display:flex;align-items:center;gap:10px;
      font-size:14px;font-weight:600;color:rgba(255,255,255,.55);
      background:transparent;cursor:pointer;text-align:left;transition:.15s;
      font-family:Inter,sans-serif;
    }
    .sidebar-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9)}
    .sidebar-btn.active{background:var(--sidebar-active);color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.40)}
    .sidebar-btn .icon{font-size:17px;width:20px;text-align:center;flex:0 0 auto}
    .sidebar-footer{padding:14px 10px;border-top:1px solid rgba(255,255,255,.06)}
    .sidebar-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;margin-bottom:4px}
    .sidebar-avatar{width:34px;height:34px;border-radius:10px;background:var(--primary);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
    .sidebar-user b{font-size:13px;color:#fff;font-weight:700;display:block}
    .sidebar-user small{font-size:11px;color:rgba(255,255,255,.35);font-weight:600}

    /* ===== Avatar do lojista (topbar) ===== */
    .user-avatar-btn{
      width:40px;height:40px;border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#ffb000);
      border:0;color:#fff;font-size:16px;font-weight:900;
      cursor:pointer;display:grid;place-items:center;
      box-shadow:0 6px 16px rgba(255,122,26,.30);
      font-family:Inter,sans-serif;
    }
    .user-dropdown{
      position:absolute;top:calc(100% + 10px);right:0;
      background:var(--card);border:1px solid var(--border);
      border-radius:20px;box-shadow:0 20px 50px rgba(75,43,19,.18);
      min-width:200px;overflow:hidden;z-index:100;
    }
    .user-dropdown-header{
      padding:14px 16px 12px;
      border-bottom:1px solid var(--border);
    }
    .user-dropdown-header b{display:block;font-size:14px;font-weight:900}
    .user-dropdown-header small{font-size:12px;color:var(--muted);font-weight:700}
    .user-dropdown-item{
      width:100%;border:0;background:transparent;
      padding:12px 16px;text-align:left;
      font-size:14px;font-weight:800;color:var(--dark);
      cursor:pointer;font-family:Inter,sans-serif;
      display:block;transition:.12s;
    }
    .user-dropdown-item:hover{background:var(--bg)}
    .user-dropdown-item.danger{color:var(--red)}
    @media(min-width:900px){
      .user-avatar-wrap{display:block!important}
      .icon-btn[data-action="menu"]{display:none!important}
    }

    /* ===== Conteúdo ===== */
    .content{padding:16px 18px 110px}
    .screen{display:none;animation:fade .25s ease}
    .screen.active{display:block}
    @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

    /* ===== Drawer mobile ===== */
    .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:none}
    .drawer-backdrop.open{display:block}
    .drawer{
      position:fixed;left:0;top:0;bottom:0;
      width:min(280px,85vw);
      background:var(--sidebar);
      z-index:90;padding:0;
      transform:translateX(-100%);
      transition:.28s ease;overflow-y:auto;
    }
    .drawer.open{transform:translateX(0)}
    .drawer-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:18px 14px;border-bottom:1px solid rgba(255,255,255,.06);
    }
    .drawer-head .brand-d{display:flex;align-items:center;gap:10px}
    .drawer-head h2{font-family:Nunito;font-size:17px;color:#fff;font-weight:900}
    .btn-close-drawer{border:0;background:rgba(255,255,255,.07);width:34px;height:34px;border-radius:10px;color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center}
    .drawer-nav{padding:10px;display:flex;flex-direction:column;gap:3px}

    /* ===== Bottom nav ===== */
    .bottom-nav{
      position:fixed;left:50%;bottom:0;transform:translateX(-50%);
      width:min(430px,100%);height:76px;
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(20px);
      border-top:1px solid var(--border);
      display:grid;grid-template-columns:repeat(4,1fr);
      padding:8px 8px;z-index:40;
    }
    .bottom-nav button{border:0;background:transparent;border-radius:12px;font-weight:700;color:var(--muted);font-size:11px;cursor:pointer;font-family:Inter,sans-serif}
    .bottom-nav button span{display:block;font-size:21px;margin-bottom:2px}
    .bottom-nav button.active{background:var(--primary-light);color:var(--primary-dark)}

    /* ===== Hero card ===== */
    .hero-card{
      background:linear-gradient(135deg,#0F172A 0%,#1E293B 55%,#0EA5E9 160%);
      color:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow-lg);
      position:relative;overflow:hidden;margin-bottom:16px;
    }
    .hero-card:after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;background:rgba(255,255,255,.05);border-radius:50%}
    .hello{font-size:14px;opacity:.8;font-weight:600;margin-bottom:6px}
    .balance-label{font-size:13px;opacity:.65}
    .balance{font-family:Nunito,sans-serif;font-weight:900;font-size:38px;letter-spacing:-1px;margin:3px 0 16px}
    .hero-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .mini-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px}
    .mini-box small{display:block;opacity:.65;font-size:11px;margin-bottom:4px;font-weight:600}
    .mini-box b{font-size:17px;font-weight:800}

    /* ===== Títulos de seção ===== */
    .section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
    .section-title h2{font-family:Nunito,sans-serif;font-size:20px;font-weight:900;color:var(--dark)}
    
    .section-title a, .section-title button, .view-all {
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      background: var(--card);
      border: 1.5px solid var(--border);
      padding: 7px 15px;
      border-radius: 20px;
      cursor: pointer;
      font-family: Inter, sans-serif;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    
    .section-title a:hover, .section-title button:hover, .view-all:hover {
      background: var(--primary);
      color: #ffffff !important;
      border-color: var(--primary);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .section-title a:active, .section-title button:active, .view-all:active {
      transform: translateY(0);
    }

    /* ===== Stat cards ===== */
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
    .stat-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:var(--shadow);min-height:110px}
    .stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:10px}
    .stat-card small{color:var(--muted);font-weight:600;font-size:12px}
    .stat-card strong{display:block;font-size:20px;font-weight:900;margin-top:3px;font-family:Nunito,sans-serif}
    .bg-green{background:#D1FAE5;color:#059669}
    .bg-red{background:#FEE2E2;color:#DC2626}
    .bg-yellow{background:#FEF3C7;color:#D97706}
    .bg-blue{background:#DBEAFE;color:#2563EB}
    .bg-purple{background:#EDE9FE;color:#7C3AED}

    /* ===== Gráfico pizza ===== */
    .chart-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
    .chart-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .pie{
      width:130px;height:130px;border-radius:50%;
      background:conic-gradient(var(--primary) 0 var(--p1),var(--green) var(--p1) var(--p2),var(--blue) var(--p2) var(--p3),var(--yellow) var(--p3) 100%);
      position:relative;flex:0 0 auto;
      box-shadow:0 8px 24px rgba(0,0,0,.10);
    }
    .pie:after{content:attr(data-total);position:absolute;inset:24px;background:white;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--dark);font-size:14px;text-align:center;font-family:Nunito}
    .legend{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
    .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}

    /* ===== Quick actions ===== */
    .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
    .action-btn{border:0;border-radius:18px;padding:16px 14px;background:var(--card);box-shadow:var(--shadow);font-weight:800;font-size:14px;text-align:left;cursor:pointer;color:var(--dark);border:1px solid var(--border);font-family:Inter,sans-serif}
    .action-btn span{display:block;font-size:26px;margin-bottom:6px}
    .main-action{grid-column:1/-1;background:linear-gradient(135deg,var(--primary),#3B82F6);color:white;font-size:18px;display:flex;align-items:center;justify-content:space-between;border:0;box-shadow:0 8px 20px rgba(29,111,232,.30)}

    /* ===== Lista de itens ===== */
    .list{display:grid;gap:10px}
    .item-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center}
    .item-thumb{width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-size:22px}
    .item-info{flex:1;min-width:0}
    .item-info h3{font-size:15px;font-weight:800;margin-bottom:2px;color:var(--dark)}
    .item-info p{font-size:12px;color:var(--muted);font-weight:600}
    .price{font-weight:900;color:var(--green);font-size:16px;margin-top:4px}
    .pill{font-size:11px;font-weight:800;padding:5px 10px;border-radius:99px;white-space:nowrap}
    .danger{background:#FEE2E2;color:#DC2626}
    .success{background:#D1FAE5;color:#059669}
    .warn{background:#FEF3C7;color:#D97706}

    /* ===== Formulários ===== */
    .form-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
    .field{margin-bottom:14px}
    .field label{display:block;font-weight:700;margin-bottom:7px;font-size:13px;color:var(--dark)}
    .field input,.field select,.field textarea{
      width:100%;height:52px;
      border:1.5px solid var(--border);border-radius:12px;
      padding:0 14px;font-size:15px;font-weight:600;
      background:var(--bg);color:var(--dark);font-family:Inter,sans-serif;
      outline:none;transition:border-color .15s;
    }
    .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:var(--card)}
    .field textarea{height:90px;padding:12px 14px;resize:vertical}
    .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .primary-btn{width:100%;height:56px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),#3B82F6);font-size:16px;color:white;font-weight:800;box-shadow:0 8px 20px rgba(29,111,232,.28);cursor:pointer;font-family:Inter,sans-serif;letter-spacing:.2px}
    .secondary-btn{width:100%;height:52px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);font-size:15px;color:var(--dark);font-weight:700;cursor:pointer;font-family:Inter,sans-serif}
    .small-btn{padding:4px 12px;border:1.5px solid var(--primary);border-radius:8px;background:transparent;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
    .text-green{color:var(--green)} .text-red{color:var(--red)}
    .danger-btn{width:100%;height:52px;border:1.5px solid #FEE2E2;border-radius:14px;background:#FFF5F5;font-size:15px;color:var(--red);font-weight:700;cursor:pointer;font-family:Inter,sans-serif}

    /* ===== Tags ===== */
    .tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1.5px solid var(--border);border-radius:99px;padding:7px 14px;font-weight:700;font-size:12px;cursor:pointer;font-family:Inter,sans-serif;color:var(--dark)}
    .tag-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
    .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
    .cor-chip{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s,border-color .15s;flex-shrink:0}
    .cor-chip.selecionada{border-color:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.3);transform:scale(1.15)}
    .icone-btn{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;font-size:22px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;padding:0}
    .icone-btn.selecionado{border-color:var(--primary);background:var(--primary-light)}
    .icone-btn-cat{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:10px 4px;transition:background .15s,border-color .15s;font-family:Inter,sans-serif}
    .icone-btn-cat span{font-size:24px;line-height:1}
    .icone-btn-cat small{font-size:9px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;word-break:break-word}
    .icone-btn-cat.selecionado{border-color:var(--primary);background:var(--primary-light)}
    .icone-btn-cat.selecionado small{color:var(--primary)}
    .unidade-chip{background:var(--bg);border:1.5px solid var(--border);border-radius:20px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;font-family:Inter,sans-serif;transition:all .15s;white-space:nowrap}
    .unidade-chip.selecionado{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
    .autocmpl-item{padding:11px 14px;font-size:13px;font-weight:600;color:var(--dark);cursor:pointer;border-bottom:1px solid var(--border);font-family:Inter,sans-serif}
    .autocmpl-item:last-child{border-bottom:none}
    .autocmpl-item:hover,.autocmpl-item:active{background:var(--primary-light)}

    /* ===== Calendário ===== */
    .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--card);border-radius:20px;padding:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
    .day-name{text-align:center;font-size:10px;color:var(--muted);font-weight:700;padding:4px 0}
    .day{height:44px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:13px;position:relative;color:var(--dark)}
    .day.good{background:#D1FAE5;color:#059669}
    .day.bad{background:#FEE2E2;color:#DC2626}
    .day.today{background:var(--primary);color:white}
    .day small{position:absolute;bottom:3px;font-size:8px;font-weight:700}
    .day.empty{background:transparent}

    /* ===== Toggle ===== */
    .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border)}
    .toggle-row:last-child{border-bottom:0}
    .toggle-row b{font-size:14px;font-weight:700;display:block;margin-bottom:2px;color:var(--dark)}
    .toggle-row small{font-size:12px;color:var(--muted);font-weight:500}
    .toggle{position:relative;width:48px;height:28px;background:var(--border);border-radius:99px;cursor:pointer;transition:.2s;flex:0 0 auto}
    .toggle:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
    .toggle.on{background:var(--primary)}
    .toggle.on:after{left:23px}

    /* ===== Misc ===== */
    .avatar-circle{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:900;color:#fff;flex:0 0 auto}
    .empty-state{text-align:center;padding:40px 20px;color:var(--muted)}
    .empty-state span{font-size:44px;display:block;margin-bottom:10px}
    .empty-state p{font-weight:600;font-size:14px;line-height:1.6}
    .badge-plan{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);color:var(--primary-dark);font-weight:800;font-size:12px;padding:6px 12px;border-radius:99px}
    .trial-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-weight:700;font-size:13px}
    .trial-banner button{border:0;background:var(--primary);color:#fff;font-weight:800;font-size:12px;padding:7px 14px;border-radius:99px;cursor:pointer;font-family:Inter,sans-serif;white-space:nowrap}
    .info-banner{background:#EFF6FF;border:1px solid #BFDBFE;color:#1D4ED8;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-weight:600;font-size:13px}
    .hidden{display:none!important}

    /* ===== Telas de auth ===== */
    .login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%)}
    .login-card{width:100%;max-width:400px;background:white;border-radius:28px;padding:28px;box-shadow:0 30px 60px rgba(0,0,0,.25);text-align:center}
    .big-logo{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,var(--primary),#38BDF8);display:grid;place-items:center;color:white;font-size:38px;margin:0 auto 16px;box-shadow:0 14px 28px rgba(14,165,233,.35)}
    .big-logo.big-logo-f5{background:linear-gradient(135deg,#6366f1,#818cf8);box-shadow:0 14px 28px rgba(99,102,241,.4);font-family:Nunito,Inter,sans-serif;font-weight:900;font-size:34px;letter-spacing:-1px}
    .login-card h1{font-family:Nunito;font-size:34px;font-weight:900;color:var(--dark)}
    .login-card p{color:var(--muted);font-weight:600;margin:10px 0 22px;line-height:1.5;font-size:14px}
    .google-btn{height:56px;border-radius:14px;border:1.5px solid var(--border);background:var(--card);width:100%;font-size:15px;font-weight:700;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-family:Inter,sans-serif;color:var(--dark)}
    .gsi-btn-wrap{width:100%;display:flex;justify-content:center;min-height:44px}
    .login-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12px;font-weight:700}
    .login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border)}
    .login-link{display:block;margin-top:14px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;cursor:pointer}
    .small-note{font-size:11px;margin-top:14px;color:var(--muted);line-height:1.5}

    /* ===== Tela de bloqueio ===== */
    .lock-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#1F0000 0%,#450000 100%)}
    .lock-card{width:100%;max-width:400px;background:white;border-radius:28px;padding:28px;box-shadow:0 30px 60px rgba(0,0,0,.25);text-align:center}
    .lock-icon{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,#EF4444,#F87171);display:grid;place-items:center;color:#fff;font-size:36px;margin:0 auto 16px;box-shadow:0 14px 28px rgba(239,68,68,.30)}
    .qr-box{width:190px;height:190px;margin:16px auto;background:var(--bg);border:1.5px dashed var(--border);border-radius:18px;display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:13px}
    .pix-copy{display:flex;gap:8px;margin-top:12px}
    .pix-copy input{flex:1;height:48px;border:1.5px solid var(--border);border-radius:12px;padding:0 12px;font-size:12px;background:var(--bg);color:var(--muted);font-family:Inter,sans-serif}
    .pix-copy button{height:48px;padding:0 16px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;font-family:Inter,sans-serif}

    /* ===== Onboarding ===== */
    .onboarding-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%)}
    .onboarding-card{width:100%;max-width:460px;background:white;border-radius:28px;padding:28px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
    .ob-step{display:none}
    .ob-step.active{display:block}
    .ob-progress{display:flex;gap:6px;margin-bottom:24px}
    .ob-dot{flex:1;height:4px;border-radius:99px;background:var(--border)}
    .ob-dot.done{background:var(--primary)}
    .onboarding-card h2{font-family:Nunito;font-size:22px;font-weight:900;margin-bottom:6px;color:var(--dark)}
    .onboarding-card > p,.ob-step > p{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:20px;line-height:1.5}
    .option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
    .option-btn{border:2px solid var(--border);border-radius:16px;padding:16px 12px;text-align:center;cursor:pointer;background:white;font-family:Inter,sans-serif;transition:all .15s}
    .option-btn .ob-icon{font-size:30px;display:block;margin-bottom:8px}
    .option-btn span{font-size:13px;font-weight:700;color:var(--dark)}
    .option-btn.selected{border-color:var(--primary);background:var(--primary-light)}
    .option-btn.option-destaque{grid-column:1/-1;position:relative;border-color:#f9a8d4;background:linear-gradient(135deg,#fdf2f8,#fff)}
    .option-btn.option-destaque.selected{border-color:#ec4899;background:#fce7f3}
    .option-btn.option-destaque small{display:block;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
    .option-btn .ob-tag{position:absolute;top:8px;right:10px;font-size:10.5px;font-weight:800;color:#be185d;background:#fce7f3;padding:2px 8px;border-radius:99px}
    .yn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
    .yn-btn{height:56px;border:2px solid var(--border);border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;background:white;font-family:Inter,sans-serif;color:var(--dark);transition:all .15s}
    .yn-btn.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}

    /* ===== TEMAS E PALETAS VISUAIS ===== */
    [data-theme="blue"] {
      --primary: #1D6FE8;
      --primary-dark: #1558C0;
      --primary-light: #EBF2FF;
      --sidebar-active: #1D6FE8;
    }
    [data-theme="emerald"] {
      --primary: #10B981;
      --primary-dark: #059669;
      --primary-light: #ECFDF5;
      --sidebar-active: #10B981;
    }
    [data-theme="amber"] {
      --primary: #D97706;
      --primary-dark: #B45309;
      --primary-light: #FEF3C7;
      --sidebar-active: #D97706;
    }
    [data-theme="rose"] {
      --primary: #F43F5E;
      --primary-dark: #BE123C;
      --primary-light: #FFF1F2;
      --sidebar-active: #F43F5E;
    }
    [data-theme="violet"] {
      --primary: #7C3AED;
      --primary-dark: #6D28D9;
      --primary-light: #F5F3FF;
      --sidebar-active: #7C3AED;
    }
    [data-theme="dark"] {
      --bg: #0F172A;
      --card: #1E293B;
      --dark: #F8FAFC;
      --muted: #94A3B8;
      --border: #334155;
      --sidebar: #1E293B;
      --sidebar-active: #38BDF8;
      --primary: #38BDF8;
      --primary-dark: #0284C7;
      --primary-light: #0B1329;
      --shadow: 0 4px 24px rgba(0,0,0,.3);
      --shadow-lg: 0 20px 50px rgba(0,0,0,.4);
    }
    [data-theme="light-total"] {
      --sidebar: #FFFFFF;
      --bg: #F8FAFC;
      --border: #E2E8F0;
      --primary: #1D6FE8;
      --primary-dark: #1558C0;
      --primary-light: #EBF2FF;
      --sidebar-active: #E2E8F0;
    }

    /* Ajustes para a sidebar quando o tema claro total estiver ativo */
    [data-theme="light-total"] .sidebar-desktop,
    [data-theme="light-total"] .drawer {
      background: var(--sidebar) !important;
      border-right: 1px solid var(--border) !important;
    }
    [data-theme="light-total"] .sidebar-brand h1,
    [data-theme="light-total"] .drawer-head h2 {
      color: var(--dark) !important;
    }
    [data-theme="light-total"] .sidebar-brand span,
    [data-theme="light-total"] .drawer-head span,
    [data-theme="light-total"] .sidebar-user small {
      color: var(--muted) !important;
    }
    [data-theme="light-total"] .sidebar-nav {
      border-top: 1px solid var(--border);
    }
    [data-theme="light-total"] .sidebar-btn {
      color: var(--muted) !important;
    }
    [data-theme="light-total"] .sidebar-btn:hover {
      background: var(--bg) !important;
      color: var(--dark) !important;
    }
    [data-theme="light-total"] .sidebar-btn.active {
      background: var(--primary-light) !important;
      color: var(--primary) !important;
      box-shadow: none !important;
    }
    [data-theme="light-total"] .sidebar-user b {
      color: var(--dark) !important;
    }
    [data-theme="light-total"] .sidebar-footer {
      border-top-color: var(--border) !important;
    }

    /* Grade de Temas (F5 Social style) */
    .tema-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }
    .tema-card {
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tema-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,.05);
    }
    .tema-card.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-light);
    }
    .tema-preview {
      width: 100%;
      height: 38px;
      border-radius: 8px;
      margin-bottom: 8px;
      border: 1px solid var(--border);
    }
    .tema-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 2px;
    }
    .tema-desc {
      font-size: 10px;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.3;
    }

    /* ===== Central de Notificações ===== */
    .notif-wrap {
      position: relative;
    }
    .notif-btn {
      background: #fff;
      border: 1.5px solid var(--border);
      color: var(--dark);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all .15s;
    }
    .notif-btn:hover {
      background: var(--bg);
    }
    .notif-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #ef4444;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      min-width: 18px;
      height: 18px;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid #fff;
      box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    }
    .notif-dropdown {
      position: absolute;
      right: 0;
      top: 48px;
      width: 320px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      z-index: 100;
      overflow: hidden;
      animation: fade .2s ease;
    }
    .notif-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }
    .notif-header h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
      color: var(--dark);
    }
    .notif-list {
      max-height: 320px;
      overflow-y: auto;
    }
    .notif-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 12px;
      align-items: flex-start;
      cursor: pointer;
      transition: background .12s;
    }
    .notif-item:last-child {
      border-bottom: none;
    }
    .notif-item:hover {
      background: rgba(99, 102, 241, 0.05);
    }
    .notif-icon {
      font-size: 18px;
      flex-shrink: 0;
    }
    .notif-content {
      flex: 1;
    }
    .notif-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 2px;
    }
    .notif-desc {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }
    .notif-empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
    }

    /* ===== Ícones visíveis apenas no desktop ===== */
    @media (max-width: 768px) {
      .desktop-only-icon {
        display: none !important;
      }
    }