#f-fixo:checked+#fixo-slider {
        background: #1a6b4a;
    }

    #f-fixo:checked~#fixo-thumb {
        transform: translateX(20px);
    }

    .ext-tab {
        flex: 1;
        padding: 12px;
        border: none;
        background: none;
        color: #aaa;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all .15s
    }

    .ext-tab.active {
        color: #1a6b4a;
        border-bottom-color: #1a6b4a
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    body {
        font-family: system-ui, sans-serif;
        background: #f0f2f0;
        color: #1a1a1a;
        min-height: 100vh
    }

    .app {
        max-width: 430px;
        margin: 0 auto;
        background: #f0f2f0;
        min-height: 100vh;
        display: flex;
        flex-direction: column
    }

    .topbar {
        background: #1a6b4a;
        color: white;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 60
    }

    .topbar-title {
        font-size: 15px;
        font-weight: 500
    }

    .date-strip {
        background: white;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0
    }

    .date-nav {
        cursor: pointer;
        color: #1a6b4a;
        font-size: 22px;
        padding: 0 8px;
        background: none;
        border: none
    }

    .saldo-card {
        background: white;
        border-radius: 12px;
        border: 1px solid #e8e8e8
    }

    .fat-card {
        background: white;
        margin: 12px;
        border-radius: 12px;
        border: 1px solid #e8e8e8
    }

    .saldo-header {
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .saldo-badge {
        background: #e8f5ee;
        color: #1a6b4a;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px
    }

    .previsao-badge {
        background: #fff3e0;
        color: #e67e22;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 6px;
    }

    .saldo-valor {
        font-size: 17px;
        font-weight: 600
    }

    .resumo-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0 12px 12px
    }

    .resumo-card {
        background: white;
        border-radius: 10px;
        border: 1px solid #e8e8e8;
        padding: 12px
    }

    .resumo-label {
        font-size: 11px;
        color: #888;
        margin-bottom: 4px
    }

    .resumo-valor {
        font-size: 17px;
        font-weight: 600
    }

    .section-title {
        font-size: 11px;
        font-weight: 600;
        color: #888;
        padding: 8px 16px 4px;
        text-transform: uppercase;
        letter-spacing: .5px
    }

    .chart-card {
        background: white;
        margin: 0 12px 12px;
        border-radius: 12px;
        border: 1px solid #e8e8e8;
        padding: 16px
    }

    .donut-wrap {
        display: grid;
        align-items: center;
        gap: 16px
    }

    .legend {
        margin: 0 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px
    }

    .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0
    }

    .legend-label {
        color: #666;
        flex: 1
    }

    .legend-val {
        font-weight: 600;
        font-size: 12px
    }

    .lancamentos {
        background: white;
        margin: 12px;
        border-radius: 12px;
        border: 1px solid #e8e8e8;
        overflow: hidden
    }

    .lanc-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background .1s
    }

    .lanc-item:last-child {
        border-bottom: none
    }

    .lanc-item:hover {
        background: #f9f9f9
    }

    .lanc-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0
    }

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

    .lanc-desc {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .lanc-cat {
        font-size: 12px;
        color: #888
    }

    .lanc-valor {
        font-size: 14px;
        font-weight: 600
    }

    .lanc-pago {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 2px;
        display: inline-block
    }

    .pago-sim {
        background: #e8f5ee;
        color: #1a6b4a
    }

    .pago-nao {
        background: #fdf2f0;
        color: #c0392b
    }

    .fab {
        width: 54px;
        height: 100%;
        background: #1a6b4a;
        color: white;
        font-size: 28px;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100
    }

    .bottom-nav {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 1px solid #e8e8e8;
        display: flex;
        z-index: 50
    }

    .nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 10px 0 8px;
        cursor: pointer;
        border: none;
        background: none;
        color: #aaa;
        font-size: 10px;
        font-family: inherit;
        transition: color .15s
    }

    .nav-btn.active {
        color: #1a6b4a
    }

    .nav-icon {
        font-size: 20px
    }

    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s
    }

    .modal-overlay.open {
        opacity: 1;
        pointer-events: all
    }

    .modal {
        background: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        transform: translateY(100%);
        transition: transform .3s;
        max-height: 90vh;
        overflow-y: auto
    }

    .modal-overlay.open .modal {
        transform: translateY(0)
    }

    .modal-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px
    }

    .modal-close {
        float: right;
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        color: #aaa
    }

    .form-row {
        margin-bottom: 14px
    }

    .form-label {
        font-size: 12px;
        color: #888;
        margin-bottom: 5px;
        display: block
    }

    .form-input {
        width: 100%;
        padding: 11px 12px;
        border-radius: 8px;
        border: 1px solid #ddd;
        background: white;
        color: #1a1a1a;
        font-size: 14px;
        font-family: inherit
    }

    .form-input:focus {
        outline: none;
        border-color: #1a6b4a
    }

    .toggle-row {
        display: flex;
        gap: 8px;
        margin-bottom: 14px
    }

    .toggle-btn {
        flex: 1;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
        background: #f5f5f5;
        color: #888;
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        transition: all .15s
    }

    .toggle-btn.active-r {
        background: #e8f5ee;
        color: #1a6b4a;
        border-color: #1a6b4a;
        font-weight: 600
    }

    .toggle-btn.active-d {
        background: #fdf2f0;
        color: #c0392b;
        border-color: #c0392b;
        font-weight: 600
    }

    .btn-salvar {
        width: 100%;
        padding: 14px;
        background: #1a6b4a;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        margin-top: 4px
    }

    .btn-salvar:disabled {
        background: #aaa;
        cursor: not-allowed
    }

    .screen {
        display: none;
        flex: 1;
        overflow-y: auto
    }

    .screen.active {
        display: block
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #aaa;
        font-size: 14px
    }

    .auth-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
        background: #f0f2f0
    }

    .auth-card {
        background: white;
        border-radius: 16px;
        padding: 28px 24px;
        width: 100%;
        max-width: 380px;
        border: 1px solid #e8e8e8
    }

    .auth-logo {
        text-align: center;
        margin-bottom: 24px
    }

    .auth-logo .logo-icon {
        font-size: 40px;
        display: block;
        margin-bottom: 8px
    }

    .auth-logo h1 {
        font-size: 20px;
        font-weight: 700;
        color: #1a6b4a
    }

    .auth-logo p {
        font-size: 13px;
        color: #888;
        margin-top: 4px
    }

    .auth-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e0e0e0
    }

    .auth-tab {
        flex: 1;
        padding: 10px;
        border: none;
        background: #f5f5f5;
        color: #888;
        font-size: 13px;
        font-family: inherit;
        cursor: pointer;
        font-weight: 500
    }

    .auth-tab.active {
        background: #1a6b4a;
        color: white
    }

    .auth-btn {
        width: 100%;
        padding: 13px;
        background: #1a6b4a;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        margin-top: 8px
    }

    .auth-btn:disabled {
        background: #aaa
    }

    .msg {
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 12px;
        display: none
    }

    .msg.erro {
        background: #fdf2f0;
        color: #c0392b;
        display: block
    }

    .msg.ok {
        background: #e8f5ee;
        color: #1a6b4a;
        display: block
    }

    .admin-card {
        background: white;
        margin: 12px;
        border-radius: 12px;
        border: 1px solid #e8e8e8;
        overflow: hidden
    }

    .admin-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f0
    }

    .admin-item:last-child {
        border-bottom: none
    }

    .admin-nome {
        font-size: 14px;
        font-weight: 500
    }

    .admin-email {
        font-size: 12px;
        color: #888
    }

    .btn-aprovar {
        padding: 6px 14px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 600;
        font-family: inherit
    }

    .btn-aprovar.aprovar {
        background: #e8f5ee;
        color: #1a6b4a
    }

    .btn-aprovar.revogar {
        background: #fdf2f0;
        color: #c0392b
    }

    .sync-bar {
        background: #1a6b4a;
        color: white;
        text-align: center;
        font-size: 12px;
        padding: 4px;
        display: none
    }

    .sync-bar.show {
        display: block
    }

    .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        cursor: pointer;
        font-size: 15px;
        color: #1a1a1a;
        transition: background .1s
    }

    .menu-item:hover {
        background: #f5f5f5
    }

    .menu-icon {
        font-size: 18px;
        width: 24px;
        text-align: center
    }

    .desck-saldo-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .desck-saldo-card-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    @media (min-width: 768px) {
        body {
            overflow: hidden;
            height: 100vh;
        }

        #main-app {
            height: 100vh;
            overflow: hidden;
        }

        .none-display {
            display: none;
        }

        .saldo-card {
            margin: 0px;
            background: none;
            border: none;
            padding: 12px 0px;
        }

        .saldo-badge {
            background: none;
            font-size: 11px;
            color: #888;
            margin-bottom: 4px;
            font-weight: unset;
            padding: 0px;
            border-radius: 0px;
        }

        .previsao-badge {
            background: none;
            font-size: 11px;
            color: #888;
            font-weight: unset;
            padding: 0px;
            border-radius: 0px;
            margin-bottom: 4px;
        }

        .desck-saldo-card {
            display: table-column-group;
            grid-template-columns: 1fr 1fr;
            background: white;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid #e8e8e8;
            margin-bottom: 0px;
        }

        .desck-saldo-card-item {
            display: grid;
            gap: 0;
        }

        .desck-resumo-saldo {
            display: grid;
            background: white;
            border-radius: 10px;
            border: 1px solid #e8e8e8;
            padding: 12px;
        }

        .desck-saldo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 0px 6px;
        }

        .app {
            max-width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: 15% 1fr 20%;
            grid-template-rows: 57px auto 1fr;
            grid-template-areas:
                "topbar topbar topbar"
                "sidebar datestrip rightcol"
                "sidebar maincol rightcol";
            overflow: hidden;
        }

        .topbar {
            grid-area: topbar;
            position: static;
        }

        .date-strip {
            grid-area: datestrip;
            position: static;
            border-bottom: 1px solid #e0e0e0;
            border-right: 1px solid #e8e8e8;
        }

        .donut-wrap {
            display: flex;
        }

        /* Sidebar desktop */
        #desktop-sidebar {
            grid-area: sidebar;
            display: flex !important;
            flex-direction: column;
            background: white;
            border-right: 1px solid #e8e8e8;
            overflow-y: auto;
        }

        /* Coluna central */
        #main-col {
            grid-area: maincol;
            overflow-y: auto;
            background: #f0f2f0;
        }

        /* Coluna direita */
        #right-col {
            grid-area: rightcol;
            display: flex !important;
            flex-direction: column;
            background: white;
            border-left: 1px solid #e8e8e8;
            overflow-y: auto;
            padding: 12px;
            gap: 12px;
        }

        /* Esconder nav bottom e fab no desktop */
        .bottom-nav {
            display: none !important;
        }

        .fab {
            right: 236px;
            bottom: 20px;
        }

        /* Telas ocupam toda a coluna central */
        .screen {
            margin: auto;
            max-width: 80%;
            min-height: 100%;
        }

        /* Ajus tes de cards no desktop */
        .resumo-cards {
            grid-template-columns: 1fr 1fr;
            padding: 12px 0px;
            margin: 0px;
        }

    }

    @media (max-width: 1154px) {
        .desck-saldo {
            grid-template-columns: 1fr;
            margin: 0px;
        }

        .saldo-card {
            padding: 0px 0px;
            margin: 12px;
        }

        .resumo-cards {
            margin: 0px 12px;
        }

        .desck-saldo-grid {
            grid-template-columns: 1fr 1fr;
        }

        .desck-saldo-card {
            padding: 12px 14px;
        }

        .app {
            grid-template-columns: 15% 1fr 30%;
        }
    }

    @media (max-width: 767px) {
        #desktop-sidebar {
            display: none !important;
        }

        #right-col {
            display: none !important;
        }
    }

    .donut-wrap {
        display: grid;
    }

    .ds-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        cursor: pointer;
        font-size: 13px;
        color: #444;
        transition: background .1s;
        border-radius: 0;
    }

    .ds-item:hover {
        background: #f5f5f5
    }

    .ds-item.active {
        background: #e8f5ee;
        color: #1a6b4a;
        font-weight: 600
    }