* { box-sizing: border-box; margin: 0; padding: 0; }
        :root {
            --bg:  #0d1117;
            --sf:  #161b22;
            --sf2: #1c2333;
            --bd:  #30363d;
            --ac:  #58a6ff;
            --gn:  #3fb950;
            --rd:  #f85149;
            --bl:  #1f6feb;
            --tx:  #e6edf3;
            --mu:  #8b949e;
            --r:   8px;
            --ac2: #1f6feb;
            --gold: #f0a500;
        }
        body { background: var(--bg); color: var(--tx); font-family: 'Barlow', sans-serif; font-size: 15px; min-height: 100vh; }
        header { background: linear-gradient(135deg, #0a0f1e 0%, #0d1f3c 60%, #0B3D6B 100%); border-bottom: 2px solid var(--ac); padding: 8px 12px; position: sticky; top: 0; z-index: 100; }
        .header-top { display: flex; align-items: stretch; gap: 10px; }

        .header-logo { display: flex; align-items: center; gap: 10px; flex: 1; }
        .logo-icon { flex-shrink: 0; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #f0a50022 0%, transparent 70%); border-radius: 50%; border: 1px solid #f0a50033; box-shadow: 0 0 10px rgba(240,165,0,0.2); }
        .logo-icon img { height: 72px; width: auto; display: block; }
        .logo-text-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
        .logo-text { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 900; color: #f0a500; text-transform: uppercase; line-height: 1; letter-spacing: 2px; }
        .logo-sub { font-size: 11px; color: #c8d8f0; font-weight: 300; }

        .header-right { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex-shrink: 0; }
        .header-btns { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
        .header-user { display: flex; align-items: center; justify-content: flex-end; }
        .sync-btn { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--bd); background: transparent; color: #c8d8f0; font-size: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; white-space: nowrap; }
        .sync-btn.ok { border-color: var(--gn); color: var(--gn); background: #0a2a15; }
        .sync-btn.err { border-color: var(--rd); color: var(--rd); background: #1a0808; }
        .logout-btn { padding: 3px 10px; border-radius: 20px; border: 1px solid #ff6b6b; background: transparent; color: #ff6b6b; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
        .logout-btn:hover { background: #1a0808; }
        .user-pill { display: flex; align-items: center; background: var(--sf2); border: 1px solid var(--bd); border-radius: 20px; overflow: hidden; max-width: 160px; }
        .user-avatar { width: 22px; height: 22px; border-radius: 50%; background: #f0a500; color: #000; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; margin: 2px; box-shadow: 0 0 6px rgba(240,165,0,0.5); }
        .user-info { font-size: 11px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px 0 3px; }

        .filtro-wrap { position: relative; display: inline-block; margin-top: 10px; }
        .filtro-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; color: var(--mu); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; transition: .2s; }
        .filtro-btn:hover, .filtro-btn.ativo { border-color: var(--ac); color: var(--ac); background: #091525; }
        .filtro-btn .filtro-badge { background: var(--ac); color: #000; border-radius: 10px; font-size: 10px; font-weight: 800; padding: 1px 6px; margin-left: 2px; }
        .filtro-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: 92vw; background: var(--sf); border: 1px solid var(--ac); border-radius: 10px; z-index: 90; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
        .filtro-dropdown.aberto { display: block; }

        .filtro-grupo { border-bottom: 1px solid var(--bd); }
        .filtro-grupo:last-of-type { border-bottom: none; }
        .filtro-grupo-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; cursor: pointer; user-select: none; transition: .15s; }
        .filtro-grupo-header:hover { background: var(--sf2); }
        .filtro-grupo-header .fg-titulo { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tx); display: flex; align-items: center; gap: 7px; }
        .filtro-grupo-header .fg-seta { font-size: 11px; color: var(--mu); transition: transform .2s; }
        .filtro-grupo-header .fg-sel { font-size: 10px; background: var(--ac); color: #000; border-radius: 10px; padding: 1px 6px; font-weight: 800; }

        .filtro-grupo-body { display: none; border-top: 1px solid var(--bd); background: var(--sf2); max-height: 200px; overflow-y: auto; }
        .filtro-grupo-body.aberto { display: block; }
        .filtro-grupo-header.aberto .fg-seta { transform: rotate(180deg); }
        .filtro-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; font-size: 13px; cursor: pointer; transition: .15s; color: var(--tx); }
        .filtro-item:hover { background: #091525; }
        .filtro-item.selecionado { color: var(--ac); font-weight: 600; }
        .filtro-item.selecionado::after { content: '✓'; font-weight: 800; color: var(--ac); }
        .filtro-limpar { display: block; width: 100%; padding: 9px 14px; text-align: center; font-size: 11px; color: var(--mu); background: none; border: none; border-top: 1px solid var(--bd); cursor: pointer; font-family: 'Barlow', sans-serif; }
        .filtro-limpar:hover { color: var(--rd); }
        .tabs { display: none; background: var(--sf); border-bottom: 1px solid var(--bd); overflow-x: auto; }
        @media (min-width: 768px) { .tabs { display: flex; } }
        .tab { padding: 12px 16px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mu); border-bottom: 3px solid transparent; transition: 0.2s; flex-shrink: 0; }
        .tab:hover { color: var(--tx); background: var(--sf2); } .tab.active { color: var(--ac); border-bottom-color: var(--ac); background: var(--sf2); }
        .page { display: none; padding: 20px; padding-bottom: 90px; max-width: 1200px; margin: 0 auto; } .page.active { display: block; }
        @media (min-width: 768px) { .page { padding-bottom: 40px; } }
        .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; }
        .card { background: #161b22; border: 1px solid #30363d; border-radius: var(--r); padding: 16px; position: relative; overflow: hidden; transition: border-color .2s; }
        .card:hover { border-color: #58a6ff55; }
        .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
        .card.gn::before { background: var(--gn); } .card.rd::before { background: var(--rd); } .card.bl::before { background: var(--bl); } .card.ac::before { background: var(--ac); }
        .card-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mu); margin-bottom: 8px; }
        .card-val { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700; }
        .card-val.ac { color: var(--ac); } .card-val.gn { color: var(--gn); } .card-val.rd { color: var(--rd); } .card-val.bl { color: var(--bl); }
        .stitle { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ac); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; }
        .fgrid { display: grid; grid-template-columns: 1fr; gap: 11px; } .fgrid.c2 { grid-template-columns: 1fr 1fr; } .fgrid.c3 { grid-template-columns: 1fr 1fr 1fr; } .fgrid.c4 { grid-template-columns: repeat(4, 1fr); }
        @media (max-width: 600px) { .fgrid.c2, .fgrid.c3, .fgrid.c4 { grid-template-columns: 1fr; } }
        .fg { display: flex; flex-direction: column; gap: 4px; position: relative; }
        label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--mu); font-weight: 600; }
        input, select, textarea { background: var(--sf2); border: 1px solid var(--bd); border-radius: 6px; color: var(--tx); padding: 9px 11px; font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; width: 100%; }
        input:focus, select:focus { border-color: var(--ac); }
        .crow { background: var(--sf2); border: 1px solid var(--bd); border-radius: var(--r); padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 4px; }
        .ci { text-align: center; } .ci .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--mu); margin-bottom: 3px; }
        .ci .val { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; }
        .btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; transition: 0.15s; }
        .btn-p { background: var(--ac); color: #fff; } .btn-p:hover { filter: brightness(1.15); }
        .btn-d { background: var(--rd); color: #fff; } .btn-d:hover { filter: brightness(1.2); }
        .btn-g { background: var(--gn); color: #fff; } .btn-g:hover { filter: brightness(1.2); }
        .btn-o { background: transparent; border: 1px solid var(--bd); color: var(--mu); } .btn-o:hover { border-color: var(--ac); color: var(--ac); }
        .btn-sm { padding: 5px 10px; font-size: 11px; }
        .brow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
        .twrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--bd); }
        table { width: 100%; border-collapse: collapse; font-size: 13px; }
        th { background: var(--sf2); color: var(--mu); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--bd); }
        td { padding: 9px 11px; border-bottom: 1px solid #1f2530; vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--sf2); }
        .tfoot td { background: #091525; border-top: 2px solid var(--ac); font-weight: 700; color: var(--ac); }
        .tr { text-align: right; } .ac { color: var(--ac); } .gn { color: var(--gn); } .rd { color: var(--rd); } .mu { color: var(--mu); } .bold { font-weight: 700; }
        .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
        .badge::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .b-ok  { background: #0b2a18; color: #34C759; border: 1px solid #34C75940; }
        .b-ok::before  { background: #34C759; box-shadow: 0 0 5px #34C75999; }
        .b-pd  { background: #1a0a0a; color: #FF6B6B; border: 1px solid #FF3B3040; }
        .b-pd::before  { background: #FF3B30; box-shadow: 0 0 5px #FF3B3099; }
        .b-pt  { background: #1a1400; color: #FFD60A; border: 1px solid #FFD60A40; }
        .b-pt::before  { background: #FFD60A; box-shadow: 0 0 5px #FFD60A99; }
        .inss-badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; cursor: pointer; font-weight: 700; border: 1px solid var(--ac); background: #0a2040; color: var(--ac); user-select: none; }
        .inss-badge.manual { background: #0a2a15; color: var(--gn); border-color: var(--gn); }
        .ac-box { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 80; background: var(--sf2); border: 1px solid var(--ac); border-radius: 0 0 8px 8px; max-height: 170px; overflow-y: auto; }
        .ac-item { padding: 9px 13px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--bd); transition: 0.1s; } .ac-item:hover { background: var(--sf); } .ac-section { padding: 7px 13px 4px; font-size: 10px; font-weight: 800; color: var(--ac); text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--bd); } .ac-empty { padding: 10px 13px; color: var(--mu); font-size: 12px; } .city-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.18) !important; }
        .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 200; align-items: center; justify-content: center; padding: 16px; } .modal-bg.open { display: flex; }
        .modal { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: 22px; }
        .modal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700; color: var(--ac); margin-bottom: 16px; }
        .sinfo { background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
        .sinfo-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--bd); font-size: 13px; } .sinfo-row:last-child { border-bottom: none; }
        .tag { background: var(--sf2); border: 1px solid var(--bd); border-radius: 20px; padding: 3px 10px; font-size: 11px; color: var(--mu); }
        .empty { text-align: center; padding: 40px 20px; color: var(--mu); } .empty .ico { font-size: 36px; margin-bottom: 10px; opacity: 0.4; }

        #login-screen { position: fixed; inset: 0; background: linear-gradient(160deg, #0a0f1e 0%, #061529 50%, #0B3D6B 100%); z-index: 500; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        #login-screen.hidden { display: none; }
        .login-box { width: 100%; max-width: 360px; padding: 0 24px; text-align: center; }
        .login-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
        .login-logo img { height: 96px; width: auto; filter: drop-shadow(0 4px 28px rgba(11,125,219,0.6)) brightness(1.05); }
        .login-box h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 800; color: #f0a500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2px; line-height: 1.1; }
        .login-box .login-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; color: #c8d8f0; letter-spacing: 2px; margin-bottom: 36px; font-weight: 500; }
        .login-footer { margin-top: 20px; font-size: 11px; color: #4a6080; }


        .google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 20px; background: #fff; color: #1a1a1a; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; font-family: 'Barlow', sans-serif; cursor: pointer; transition: .2s; box-shadow: 0 2px 16px rgba(0,0,0,.5); }
        .google-btn:hover:not(:disabled) { background: #f0f0f0; box-shadow: 0 4px 24px rgba(240,165,0,0.3); transform: translateY(-1px); }
        .google-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
        .google-btn img { width: 20px; height: 20px; flex-shrink: 0; }

        #session-lock-screen { position: fixed; inset: 0; background: var(--bg); z-index: 600; display: none; align-items: center; justify-content: center; flex-direction: column; }
        #session-lock-screen.show { display: flex; }
        .lock-box { background: var(--sf); border: 2px solid var(--rd); border-radius: 16px; padding: 36px 30px; width: 100%; max-width: 360px; text-align: center; }
        .lock-box .lock-icon { font-size: 48px; margin-bottom: 12px; }
        .lock-box h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; color: var(--rd); margin-bottom: 8px; }
        .lock-box p { font-size: 13px; color: var(--mu); margin-bottom: 6px; line-height: 1.5; }
        .lock-box .lock-device { font-size: 12px; color: var(--tx); background: var(--sf2); border: 1px solid var(--bd); border-radius: 6px; padding: 6px 12px; margin: 12px 0; }
        .lock-box .lock-time { font-size: 11px; color: var(--mu); margin-bottom: 20px; }
        .lock-actions { display: flex; flex-direction: column; gap: 8px; }
        .lock-btn-takeover { padding: 12px; border-radius: 8px; background: var(--rd); color: #fff; border: none; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: 1px; }
        .lock-btn-takeover:hover { filter: brightness(1.15); }
        .lock-btn-cancel { padding: 10px; border-radius: 8px; background: transparent; color: var(--mu); border: 1px solid var(--bd); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; cursor: pointer; }

        .toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: auto; transform: translate(-50%, 14px); background: #f7fbff; border: 1px solid #b8d7ff; border-left: 5px solid var(--ac); border-radius: 14px; padding: 13px 16px; font-size: 14px; font-weight: 800; color: #0d1b2a; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 99999; width: min(86vw, 420px); max-width: 420px; box-shadow: 0 12px 32px rgba(0,0,0,.35); text-align: left; line-height: 1.35; }
        .toast.show { opacity: 1; transform: translate(-50%, 0); }
        .toast.err { border-color: #ff453a; border-left-color: #ff453a; background: #fff4f2; color: #7a120d; }
        .toast.ok { border-color: #b8ebc4; border-left-color: var(--gn); background: #effaf2; color: #0f5132; }
        @media (max-width: 700px) { .toast { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; padding: 12px 14px; } }

        .hint { font-size: 11px; color: var(--mu); margin-top: 2px; min-height: 15px; }
        .hint.ok { color: var(--gn); } .hint.warn { color: var(--ac); } .hint.err { color: var(--rd); }
        .tipo-abast-btns { display: flex; gap: 6px; }
        .tipo-abast-btns button { flex: 1; padding: 8px 6px; border-radius: 6px; border: 1px solid var(--bd); background: var(--sf2); color: var(--mu); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.15s; }
        .tipo-abast-btns button.ativo { border-color: var(--ac); background: #0a2040; color: var(--ac); }
        .tipo-abast-btns button.ativo.parcial { border-color: var(--bl); background: #0d1a2e; color: var(--bl); }
        .secao-arla { background: var(--sf2); border: 1px solid #1f6feb44; border-radius: 8px; padding: 12px; margin-top: 10px; }
        .secao-arla-header { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--bl); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

        .secao-pneu { background: var(--sf2); border: 1px solid #34C75944; border-radius: 8px; padding: 12px; margin-top: 10px; display: none; }
        .secao-pneu.visivel { display: block; }
        .secao-pneu-title { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--gn); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
        .pneu-posicao-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
        .pneu-posicao-btn { padding: 7px 10px; border-radius: 6px; border: 1px solid var(--bd); background: var(--sf); color: var(--mu); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; white-space: nowrap; }
        .pneu-posicao-btn.sel { border-color: var(--gn); background: #0a2a15; color: var(--gn); }
        .pneu-tag { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; background: #0a2a15; color: var(--gn); border: 1px solid #2ea04333; margin-left: 4px; }
        .preview-media { background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; padding: 10px 14px; margin-top: 10px; display: none; gap: 16px; flex-wrap: wrap; align-items: center; }
        .preview-media.visivel { display: flex; }
        .preview-media .pm-item { text-align: center; min-width: 80px; }
        .preview-media .pm-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--mu); }
        .preview-media .pm-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--gn); }
        .preview-media .pm-val.zero { color: var(--mu); }

        #cached-users-section { display: none !important; }

        .fr-view-toggle { display: flex; gap: 6px; margin: 10px 0 12px; }
        .fr-view-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--bd); background: var(--sf2); color: var(--mu); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s; letter-spacing: 1px; text-transform: uppercase; }
        .fr-view-btn.ativo { border-color: var(--ac); background: #091525; color: var(--ac); }
        .frete-cards-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
        @media (min-width: 600px) { .frete-cards-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1000px) { .frete-cards-grid { grid-template-columns: repeat(3, 1fr); } }
        .frete-card { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
        .frete-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
        .frete-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
        .frete-card.fc-pago::before { background: var(--gn); }
        .frete-card.fc-pendente::before { background: var(--rd); }
        .frete-card.fc-parcial::before { background: #FFD60A; }
        .fc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
        .fc-cliente { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; color: var(--tx); line-height: 1.2; flex: 1; }
        .fc-placa { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; background: var(--sf2); border: 1px solid var(--bd); border-radius: 6px; padding: 3px 8px; color: var(--mu); white-space: nowrap; margin-left: 8px; }
        .fc-rota { font-size: 12px; color: var(--mu); margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
        .fc-rota-arrow { color: var(--ac); font-weight: 700; }
        .fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
        .fc-item { background: var(--sf2); border-radius: 8px; padding: 8px 10px; }
        .fc-item-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mu); margin-bottom: 3px; font-weight: 600; }
        .fc-item-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; }
        .fc-item-val.ac { color: var(--ac); } .fc-item-val.gn { color: var(--gn); } .fc-item-val.rd { color: var(--rd); }
        .fc-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--bd); }
        .fc-date { font-size: 11px; color: var(--mu); }
        .fc-actions { display: flex; gap: 5px; }

        .search-bar-wrap { position: relative; margin-bottom: 12px; }
        .search-bar-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; opacity: .6; }
        .search-bar { width: 100%; padding: 10px 12px 10px 36px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; color: var(--tx); font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; transition: border-color .2s; }
        .search-bar:focus { border-color: var(--ac); }
        .search-bar::placeholder { color: var(--mu); font-size: 13px; }

        .quick-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
        .qf-btn { padding: 5px 13px; border-radius: 20px; border: 1px solid var(--bd); background: var(--sf2); color: var(--mu); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
        .qf-btn:hover { border-color: var(--ac); color: var(--ac); }
        .qf-btn.ativo { border-color: var(--ac); background: #091525; color: var(--ac); }

        .chart-container { background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
        .chart-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mu); margin-bottom: 14px; }
        .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; overflow-x: auto; padding-bottom: 4px; }
        .chart-bar-group { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 36px; flex-shrink: 0; }
        .chart-bar-wrap { display: flex; gap: 2px; align-items: flex-end; height: 100px; }
        .chart-bar { border-radius: 4px 4px 0 0; min-height: 2px; transition: opacity .15s; cursor: default; }
        .chart-bar:hover { opacity: .8; }
        .chart-bar-lbl { font-size: 9px; color: var(--mu); text-align: center; letter-spacing: .5px; white-space: nowrap; }
        .chart-bar-val { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; color: var(--mu); text-align: center; white-space: nowrap; }
        .chart-legend { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
        .chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mu); }
        .chart-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
        .chart-pie-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
        .chart-pie-legend { flex: 1; min-width: 140px; }
        .chart-pie-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--bd); font-size: 12px; gap: 8px; }
        .chart-pie-row:last-child { border-bottom: none; }
        .chart-pie-cat { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
        .chart-pie-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .chart-pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); }
        .chart-pie-amount { color: var(--rd); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; }
        .chart-pie-pct { color: var(--mu); font-size: 10px; white-space: nowrap; min-width: 36px; text-align: right; }
        .rel-loading { text-align: center; padding: 40px; color: var(--mu); font-size: 13px; }

        .db-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
        @media (min-width: 600px) { .db-hero { grid-template-columns: repeat(4, 1fr); } }
        .db-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 18px 16px 14px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 5px;
            transition: border-color .2s, box-shadow .2s;
        }
        .db-card:hover { border-color: #58a6ff55; box-shadow: 0 0 0 1px #58a6ff22, 0 8px 24px rgba(0,0,0,.4); }
        .db-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            border-radius: 10px 10px 0 0;
        }
        .db-card.c-recv::after  { background: var(--ac); }
        .db-card.c-paid::after  { background: var(--gn); }
        .db-card.c-desp::after  { background: var(--rd); }
        .db-card.c-lucro::after { background: #bc8cff; }
        .db-card .dc-icon { font-size: 18px; opacity: .9; }
        .db-card .dc-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--mu); font-weight: 600; }
        .db-card .dc-val { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; line-height: 1.1; }
        .db-card .dc-sub { font-size: 10px; color: var(--mu); }
        .db-card.c-recv .dc-val  { color: #79c0ff; }
        .db-card.c-paid .dc-val  { color: var(--gn); }
        .db-card.c-desp .dc-val  { color: var(--rd); }
        .db-card.c-lucro .dc-val { color: #bc8cff; }
        .dc-progress { height: 3px; background: #30363d; border-radius: 4px; margin-top: 6px; overflow: hidden; }
        .dc-progress-bar { height: 100%; border-radius: 4px; background: var(--gn); transition: width .5s ease; }

        .db-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .db-mini-item { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 10px 12px; text-align: center; }
        .db-mini-item .dm-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mu); margin-bottom: 4px; }
        .db-mini-item .dm-val { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; }

        .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        @media (min-width: 600px) { .cf-grid { grid-template-columns: repeat(4, 1fr); } }
        .cf-card {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: border-color .2s;
        }
        .cf-card:hover { border-color: #58a6ff44; }
        .cf-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--mu); font-weight: 700; }
        .cf-value { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 800; line-height: 1; }
        .cf-detail { font-size: 10px; color: var(--mu); }
        .cf-bar-wrap { height: 3px; background: #30363d; border-radius: 4px; margin-top: 4px; overflow: hidden; }
        .cf-bar { height: 100%; border-radius: 4px; transition: width .5s ease; }
        .cf-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mu); margin-bottom: 10px; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
        .cf-section-title::before { content: ''; display: block; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }

        .db-section-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mu); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .db-section-title span { color: var(--ac); }

        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            height: 54px;
            background: linear-gradient(180deg, #0d1829 0%, #0a0f1e 100%);
            border-top: 1px solid var(--bd);
            z-index: 150;
            padding: 0 4px;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-shadow: 0 -4px 20px rgba(0,0,0,.45);
        }
        @media (max-width: 767px) { .bottom-nav { display: flex; } }
        .bn-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            cursor: pointer;
            padding: 8px 0;
            border: none;
            background: none;
            color: var(--mu);
            transition: color .15s, transform .12s;
            -webkit-tap-highlight-color: transparent;
            position: relative;
        }
        .bn-item:active { transform: scale(.92); }
        .bn-item.active { color: var(--ac); }
        .bn-item .bn-icon { font-size: 20px; line-height: 1; }
        .bn-item .bn-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }

        .bn-item.active::after {
            content: '';
            position: absolute;
            top: 6px;
            width: 28px; height: 28px;
            background: rgba(11,125,219,.15);
            border-radius: 50%;
        }

        .bn-badge {
            position: absolute;
            top: 4px; right: calc(50% - 18px);
            background: var(--rd);
            color: #fff;
            font-size: 8px;
            font-weight: 800;
            border-radius: 10px;
            padding: 1px 4px;
            min-width: 14px;
            text-align: center;
            line-height: 1.4;
            display: none;
        }
        .bn-badge.show { display: block; }

body{background:linear-gradient(180deg,#f7fafc,#eef4fa)!important;}
.login-card,.card,.panel{box-shadow:0 2px 8px rgba(0,0,0,.08)!important;}
button,.btn,.sync-btn,.logout-btn{border-radius:20px!important;transition:all .2s ease!important;box-shadow:0 1px 4px rgba(0,0,0,.08)!important;}
.header-btns{margin-top:8px!important;}
.logo-icon img{height:58px!important;width:auto!important;}
.login-logo img{height:100px!important;width:auto!important;}

.material-symbols-rounded,
.mi{font-family:'Material Symbols Rounded';font-weight:500;font-style:normal;font-size:18px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:-3px}
.tab,.sync-btn,.logout-btn,.fr-view-btn,.filtro-btn{display:flex;align-items:center;gap:7px}
.tab{gap:8px}
.sync-btn::before{content:'sync';font-family:'Material Symbols Rounded';font-size:15px;vertical-align:-3px}
.logout-btn::before{content:'logout';font-family:'Material Symbols Rounded';font-size:15px;vertical-align:-3px}
button,.btn,.tab,.card,.panel,.login-card,.filtro-btn,input,select,textarea{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease,opacity .18s ease}
button:active,.btn:active,.tab:active{transform:scale(.98)}
.card:hover,.panel:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(13,110,253,.12)!important}
.twrap{border:1px solid rgba(13,110,253,.18);border-radius:14px;overflow:auto;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.06)}
table{border-collapse:separate!important;border-spacing:0!important;overflow:hidden}
thead th{position:sticky;top:0;z-index:5;background:linear-gradient(135deg,#003C8F,#0D6EFD)!important;color:#fff!important;font-weight:800;letter-spacing:.7px;text-transform:uppercase;font-size:11px;border-bottom:0!important;padding:12px 10px!important}
tbody td{padding:11px 10px!important;border-bottom:1px solid rgba(0,60,143,.08)!important;vertical-align:middle}
tbody tr:nth-child(even){background:rgba(13,110,253,.035)!important}
tbody tr:hover{background:rgba(52,168,83,.08)!important}
tbody tr:last-child td{border-bottom:0!important}
.status,.badge,.filtro-badge{border-radius:999px!important;padding:3px 8px!important;font-weight:800!important}
#splash-screen{position:fixed;inset:0;z-index:99999;background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);display:flex;align-items:center;justify-content:center;transition:opacity .35s ease,visibility .35s ease}
#splash-screen.splash-hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;animation:splashIn .45s ease both}
.splash-box img{width:118px;height:auto;filter:drop-shadow(0 8px 22px rgba(0,60,143,.18))}
.splash-title{font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#003C8F;line-height:1}
.splash-sub{font-size:13px;color:#4b6078;font-weight:600}
.splash-loader{width:38px;height:38px;border:4px solid rgba(13,110,253,.16);border-top-color:#0D6EFD;border-radius:50%;animation:spin .8s linear infinite;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splashIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:600px){thead th{font-size:10px;padding:10px 8px!important}tbody td{padding:10px 8px!important}.splash-box img{width:104px}.splash-title{font-size:22px}}

.header-btn,.btn-sync,.btn-logout{
height:38px!important;padding:0 16px!important;border-radius:20px!important;
font-size:13px!important;font-weight:600!important;transition:all .2s ease!important;
display:inline-flex!important;align-items:center!important;gap:6px!important;
}
.btn-sync{background:#0D6EFD!important;color:#fff!important;border:none!important;box-shadow:0 3px 10px rgba(13,110,253,.25)!important;}
.btn-logout{background:#fff!important;color:#0D6EFD!important;border:1px solid #D7E3FF!important;}

.km-status{display:none;margin-top:4px;font-size:12px;font-weight:700;border-radius:10px;padding:6px 8px;background:#eef2ff;color:#1d4ed8}
.km-status.ok{background:#e8f5e9;color:#166534}
.km-status.warn{background:#fff7ed;color:#9a3412}
.km-status.err{background:#fee2e2;color:#991b1b}

.check-card{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--bd);border-radius:14px;background:var(--sf);font-weight:800;color:var(--tx);cursor:pointer}.check-card input{width:18px;height:18px}.fg-destinos-extra{grid-column:1/-1}.destino-extra-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;margin-bottom:8px;position:relative}.destino-extra-row input{width:100%}.btn-remover-destino{height:44px;min-width:44px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);color:var(--rd);font-weight:900}.btn.small{padding:10px 14px;font-size:12px;border-radius:12px}.rota-resumo{font-size:11px;color:var(--mu);margin-top:6px;line-height:1.35}


/* Modo aplicativo: mantém o usuário dentro do app até usar Desligar */
#app-exit-guard{position:fixed;inset:0;background:rgba(3,8,20,.78);backdrop-filter:blur(6px);z-index:999999;display:none;align-items:center;justify-content:center;padding:22px;}
#app-exit-guard.show{display:flex;}
#app-exit-guard .guard-box{width:min(420px,92vw);background:#fff;border-radius:22px;padding:24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);color:#172033;}
#app-exit-guard .guard-icon{font-size:42px;margin-bottom:8px;}
#app-exit-guard h2{margin:0 0 8px;font-size:22px;color:#0D6EFD;}
#app-exit-guard p{margin:0 0 16px;color:#53627a;font-size:14px;line-height:1.35;}
#app-exit-guard button{border:0;border-radius:18px;padding:11px 18px;background:#0D6EFD;color:#fff;font-weight:800;cursor:pointer;}
body.app-mode-locked{overscroll-behavior-x:none;overscroll-behavior-y:auto;}
body.app-mode-locked .content, body.app-mode-locked .tab-content, body.app-mode-locked main{ -webkit-overflow-scrolling:touch; touch-action:pan-y; }

#sync-gate{display:none!important;}
#sync-gate.show{display:none!important;}
#sync-gate .sync-box{width:min(430px,92vw);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:26px;box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(8px);}
#sync-gate .sync-spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;margin:0 auto 16px;animation:syncSpin .9s linear infinite;}
#sync-gate h2{margin:0 0 8px;font-size:24px;color:#fff;}
#sync-gate p{margin:0;color:rgba(255,255,255,.88);font-size:14px;}
@keyframes syncSpin{to{transform:rotate(360deg)}}



/* Modal de desligamento seguro */
#shutdown-choice-screen{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:99998;display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
#shutdown-choice-screen.show{display:flex}
.shutdown-choice-box{width:min(440px,94vw);background:#fff;border-radius:22px;padding:22px;box-shadow:0 20px 70px rgba(0,0,0,.28);color:#172033;text-align:left}
.shutdown-choice-box h2{margin:0 0 8px;font-size:20px;color:#0D6EFD}
.shutdown-choice-box p{font-size:13px;line-height:1.45;color:#526173;margin:8px 0}
.shutdown-warning{background:#fff7e6;border:1px solid #ffd48a;color:#5f3b00;border-radius:14px;padding:10px 12px;margin:12px 0;font-size:12px;font-weight:700}
.shutdown-actions{display:grid;gap:10px;margin-top:16px}
.shutdown-actions button{width:100%;border:0;border-radius:16px;padding:12px 14px;font-weight:800;cursor:pointer;font-size:14px}
#shutdown-keep-btn{background:#0D6EFD;color:#fff}
#shutdown-switch-btn{background:#fff;color:#b42318;border:1px solid #f3b4ae}
#shutdown-cancel-btn{background:#f1f5f9;color:#334155}