:root {
            color-scheme: dark;
            --bg: #050505;
            --panel: #111111;
            --panel2: #191919;
            --text: #f5f5f5;
            --muted: #a3a3a3;
            --line: #303030;
            --gold: #f5f5f5;
            --green: #e5e5e5;
            --red: #fb7185
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #050505;
            color: var(--text);
            font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
            min-height: 100vh
        }

        .wrap {
            max-width: 1000px;
            margin: auto;
            padding: 24px 16px 48px
        }

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 22px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .mark {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: #f5f5f5;
            color: #050505;
            font-size: 23px;
            font-weight: 900
        }

        .brand h1 {
            font-size: 22px;
            margin: 0
        }

        .brand p {
            margin: 3px 0 0;
            color: var(--muted);
            font-size: 13px
        }

        .card {
            background: var(--panel2);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 20px;
            margin: 14px 0;
            box-shadow: 0 14px 36px #0002
        }

        .hidden {
            display: none !important
        }

        .muted {
            color: var(--muted)
        }

        .small {
            font-size: 13px
        }

        .btn {
            border: 0;
            border-radius: 11px;
            padding: 12px 15px;
            font: inherit;
            font-weight: 750;
            cursor: pointer;
            background: #f5f5f5;
            color: #050505
        }

        .btn.secondary {
            background: var(--panel2);
            border: 1px solid var(--line);
            color: var(--text)
        }

        .btn.danger {
            background: #292929;
            color: #f5f5f5;
            border: 1px solid #555
        }

        .btn:disabled {
            opacity: 1;
            cursor: wait
        }

        .row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center
        }

        .row>* {
            flex: 1
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px
        }

        .stat {
            padding: 16px;
            border: 1px solid var(--line);
            background: var(--panel2);
            border-radius: 14px;
            min-width: 0
        }

        .stat .label {
            font-size: 13px;
            color: var(--muted)
        }

        .stat .value {
            font-size: clamp(19px, 4vw, 26px);
            font-weight: 850;
            margin-top: 7px;
            overflow-wrap: anywhere
        }

        .stat.total .value {
            color: #f5f5f5
        }

        label {
            display: block;
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 7px
        }

        input,
        textarea,

        select {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 11px;
            padding: 12px;
            background: var(--panel2);
            color: var(--text);
            font: inherit;
            outline: none
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: #f5f5f5
        }

        textarea {
            min-height: 72px;
            resize: vertical
        }

        .field {
            margin-bottom: 15px
        }

        .formgrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
        }

        h2 {
            font-size: 18px;
            margin: 0 0 14px
        }

        .status {
            padding: 12px 14px;
            border-radius: 12px;
            background: #191919;
            color: #e5e5e5;
            margin: 12px 0;
            font-size: 14px;
            overflow-wrap: anywhere
        }

        .status.error {
            background: #40212b;
            color: #ffd5dd
        }

        .status.good {
            background: #123526;
            color: #c9f9da
        }

        .tablewrap {
            max-height: 430px;
            overflow: auto;
            border-radius: 10px;
        }

        .tablewrap thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: var(--panel);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 650px
        }

        th,
        td {
            text-align: left;
            padding: 12px 10px;
            border-bottom: 1px solid var(--line);
            font-size: 14px
        }

        th {
            color: var(--muted);
            font-weight: 650
        }

        td.amount {
            font-weight: 750;
            white-space: nowrap
        }

        .actions {
            display: flex;
            gap: 8px
        }

        .actions button {
            padding: 8px 10px;
            font-size: 13px
        }

        .empty {
            text-align: center;
            padding: 24px;
            color: var(--muted)
        }

        .foot {
            text-align: center;
            color: var(--muted);
            font-size: 12px;
            margin-top: 24px
        }

        .pill {
            display: inline-block;
            padding: 5px 9px;
            border: 1px solid var(--line);
            border-radius: 99px;
            color: var(--muted);
            font-size: 12px
        }

        .positive {
            color: var(--green)
        }

        .negative {
            color: var(--red)
        }


        /* Compact one-section-at-a-time accordion */
        .accordion-card {
            padding: 0;
            overflow: hidden;
        }

        .accordion-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 19px 20px;
            border: 0;
            background: transparent;
            color: var(--text);
            text-align: left;
            cursor: pointer;
            font: inherit;
            font-size: 17px;
            font-weight: 750;
        }

        .accordion-toggle:hover {
            background: rgba(255, 255, 255, .035);
        }

        .accordion-toggle:focus-visible {
            outline: 2px solid #f5f5f5;
            outline-offset: -3px;
        }

        .accordion-chevron {
            flex: 0 0 auto;
            color: #f5f5f5;
            font-size: 22px;
            line-height: 1;
            transition: transform .18s ease;
        }

        .accordion-toggle[aria-expanded="true"] .accordion-chevron {
            transform: rotate(180deg);
        }

        .accordion-panel {
            padding: 0 20px 20px;
            border-top: 1px solid var(--line);
        }

        .accordion-panel[hidden] {
            display: none !important;
        }


        /* App navigation and screen layout */
        .app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 8px 0 18px; }
        .screen { display:none; padding-bottom: 92px; }
        .screen.active { display:block; }
        .bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background:rgba(17,17,17,.97); border-top:1px solid var(--line); backdrop-filter:blur(14px); box-shadow:0 -8px 24px #0003; }
        .nav-btn { border:0; background:transparent; color:var(--muted); border-radius:12px; min-width:0; padding:7px 2px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
        .nav-btn .nav-icon { font-size:20px; line-height:1.2; }
        .nav-btn.active { color:#f5f5f5; background:rgba(255,255,255,.09); }
        .home-balance-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .home-total { border-color:rgba(255,255,255,.35); }
        .home-total .value { color:#f5f5f5; font-size:clamp(27px,6vw,36px); }
        .screen-heading { margin:4px 0 14px; font-size:22px; }
        .quick-note { padding:12px 14px; border-radius:12px; background:var(--panel2); color:var(--muted); font-size:13px; margin-bottom:14px; }
        @media(max-width:600px) { .wrap { padding-bottom:105px; } .bottom-nav { padding-left:4px; padding-right:4px; } .nav-btn { font-size:10px; } .home-balance-grid { grid-template-columns:1fr 1fr; } }

        @media(max-width:600px) {
            .accordion-toggle {
                padding: 17px 16px;
            }

            .accordion-panel {
                padding: 0 16px 16px;
            }
        }

        @media(max-width:600px) {
            .wrap {
                padding: 17px 12px 35px
            }

            .card {
                padding: 16px
            }

            .grid {
                grid-template-columns: 1fr
            }

            .formgrid {
                grid-template-columns: 1fr
            }

            .brand h1 {
                font-size: 20px
            }

            .top .btn {
                width: 100%
            }

            .top #userArea {
                width: 100%
            }
        }

        .auth-field { margin:12px 0; }
        .auth-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
        .auth-actions .btn { flex:1; min-width:130px; }
        .auth-link { border:0; background:none; color:#f5f5f5; font:inherit; font-weight:700; padding:8px 0; cursor:pointer; }
        .auth-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:17px 0; }
        .auth-divider:before,.auth-divider:after { content:""; height:1px; background:var(--line); flex:1; }
        #mainStatus { display:none !important; }
        #loginStatus { display:none !important; }
        #toast { position:fixed; left:50%; bottom:92px; transform:translate(-50%,14px); opacity:0; pointer-events:none; z-index:100; max-width:min(92vw,460px); padding:11px 16px; border-radius:12px; background:#191919; color:#fff; box-shadow:0 8px 24px #0003; font-size:14px; transition:.2s; }
        #toast.show { opacity:1; transform:translate(-50%,0); }
        #toast.error { background:#9d2639; }
        body.light #toast { background:#191919; color:#fff; }

    
/* Cashlog opening splash and reusable transparent loading overlay */
#splashScreen{position:fixed;inset:0;z-index:999;background:#050505;display:flex;align-items:center;justify-content:center;transition:opacity .28s ease,visibility .28s ease;}
#splashScreen.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.splash-content{display:flex;flex-direction:column;align-items:center;gap:22px;transform:translateY(-2vh);}
.splash-wallet{width:clamp(82px,22vw,118px);height:auto;animation:walletBounce 1.25s ease-in-out infinite;}
.splash-name{font-size:clamp(25px,7vw,34px);font-weight:800;letter-spacing:.19em;color:#f7f7f7;}
@keyframes walletBounce{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-13px) scale(1,1)}55%{transform:translateY(0) scale(1.06,.94)}65%{transform:translateY(-3px) scale(.98,1.02)} }
.loading-overlay{position:fixed;inset:0;z-index:900;background:rgba(5,5,5,.48);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease;backdrop-filter:blur(2px);}
.loading-overlay.show{opacity:1;visibility:visible;pointer-events:all;}
.loading-overlay .splash-content{gap:14px;}
.loading-overlay .splash-wallet{width:clamp(58px,15vw,82px);}
.loading-overlay .splash-name{font-size:18px;letter-spacing:.16em;}
body{background:#050505;}
.mark{background:transparent;color:#f5f5f5;border:1px solid #383838;}
.btn{background:#f5f5f5;color:#050505;}
.nav-btn.active{color:#fff;background:rgba(255,255,255,.09);}
.auth-link{color:#f5f5f5;}
input:focus,textarea:focus,select:focus{border-color:#f5f5f5;}

/* Official CASHLOG lettermark assets */
.mark img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;}


/* V7 themes, device lock and settings */
:root{color-scheme:dark} body.light{color-scheme:light;--bg:#f3f4f6;--panel:#fff;--panel2:#fff;--text:#171717;--muted:#666;--line:#d8d8d8;background:#f3f4f6;color:#171717} body.light .card,body.light .stat{background:#fff;border-color:#ddd;box-shadow:0 8px 24px #0000000a} body.light input,body.light textarea,body.light select{background:#fff;color:#171717;border-color:#d5d5d5} body.light .btn.secondary{background:#f4f4f5;color:#171717;border-color:#ddd} body.light .bottom-nav{background:rgba(255,255,255,.96);border-color:#ddd} body.light .nav-btn{color:#666} body.light .nav-btn.active{background:#eee;color:#111} body.light .auth-link{color:#171717} body.light #splashScreen{background:#f3f4f6} body.light .splash-name{color:#111} body.light .loading-overlay{background:rgba(255,255,255,.55)}
.app-lock{position:fixed;inset:0;z-index:1200;background:var(--bg,#050505);display:grid;place-items:center;padding:22px}.lock-card{width:min(100%,390px);text-align:center;background:var(--panel2,#191919);border:1px solid var(--line,#333);border-radius:22px;padding:28px 22px}.lock-logo{width:74px;height:74px;object-fit:contain}.pin-input{font-size:28px;letter-spacing:.5em;text-align:center;max-width:220px;margin:14px auto}.lock-card form .btn{width:100%}.lock-card .auth-link{display:block;margin:14px auto 0}.lock-card #lockError{color:#e66;margin-top:12px}.settings-panel hr{border:0;border-top:1px solid var(--line);margin:20px 0}.settings-panel .row .btn{flex:1}.settings-panel{margin-bottom:110px}

/* V7.1: Settings is a dedicated full-screen view, not an inline section. */
.settings-panel{
  position:fixed;
  inset:0;
  z-index:1100;
  width:100%;
  height:100vh;
  height:100dvh;
  margin:0;
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  border:0;
  border-radius:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--bg,#050505);
  box-shadow:none;
}
.settings-panel > .row:first-child{
  position:sticky;
  top:0;
  z-index:2;
  padding:8px 0 14px;
  background:var(--bg,#050505);
  border-bottom:1px solid var(--line,#333);
}
.settings-panel h2{margin:0}
body.cashlog-settings-open{overflow:hidden}
.app-lock{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--bg,#050505);
  padding:calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
}
body.cashlog-locked{overflow:hidden!important}
body.cashlog-locked > .wrap,
body.cashlog-locked > #toast{pointer-events:none}
body.light .settings-panel{background:var(--bg,#f3f4f6)}
body.light .settings-panel > .row:first-child{background:var(--bg,#f3f4f6)}


/* CASHLOG V7.2 — dedicated Settings route and true full-screen PIN lock */
.cashlog-settings-view{position:fixed!important;inset:0!important;z-index:2000!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;margin:0!important;padding:calc(18px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;border:0!important;border-radius:0!important;background:var(--bg,#050505)!important;box-shadow:none!important;display:block!important}
.cashlog-settings-view.hidden{display:none!important}
body.cashlog-settings-open{overflow:hidden!important}
body.cashlog-settings-open>.wrap{visibility:hidden!important;pointer-events:none!important}
body.cashlog-settings-open>.foot{display:none!important}
body.cashlog-settings-open .cashlog-settings-view{visibility:visible!important;pointer-events:auto!important}
.app-lock{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;z-index:2147483000!important;display:grid!important;place-items:center!important;overflow:hidden!important;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))!important;background:var(--bg,#050505)!important}
.app-lock.hidden{display:none!important}
.lock-card{width:min(88vw,360px)!important;max-width:360px!important;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow-y:auto!important;box-sizing:border-box!important;margin:auto!important;padding:clamp(18px,5vw,28px)!important;border-radius:22px!important;text-align:center!important}
.lock-logo{display:block!important;width:clamp(54px,16vw,72px)!important;height:clamp(54px,16vw,72px)!important;margin:0 auto 12px!important}
.lock-card h2{font-size:clamp(20px,5.5vw,25px)!important;margin:8px 0!important}
.lock-card p{font-size:14px!important;line-height:1.45!important}
.pin-input{display:block!important;width:min(100%,220px)!important;max-width:220px!important;min-height:54px!important;font-size:22px!important;letter-spacing:.45em!important;margin:16px auto!important;box-sizing:border-box!important}
.lock-card button{min-height:46px!important;font-size:15px!important}
body.cashlog-locked{overflow:hidden!important;overscroll-behavior:none!important}
body.cashlog-locked>.wrap,body.cashlog-locked>.foot,body.cashlog-locked>#toast{visibility:hidden!important;pointer-events:none!important}
.cashlog-version{margin:28px 0 6px!important;padding-top:14px!important;border-top:1px solid var(--line)!important;text-align:center!important;font-size:12px!important;color:var(--muted)!important}
@media(max-width:380px){.lock-card{padding:18px 16px!important}.lock-card .auth-link{font-size:13px!important}.pin-input{max-width:190px!important}}


/* Cashlog public release 1.0: About view and simple unlock interactions */
.about-brand{text-align:center;padding:18px 0 24px}
.about-brand img{width:68px;height:68px;object-fit:contain}
.about-brand h3{margin:8px 0 2px;font-size:22px}
.about-brand p{margin:0}
.about-guide p{padding:12px 14px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.about-guide p strong{display:inline-block;margin-bottom:4px}
.about-heading{position:sticky;top:0;z-index:2;padding:8px 0 14px;background:var(--bg,#050505);border-bottom:1px solid var(--line)}
.about-heading h2{margin:0}
#unlockForm{display:flex;flex-direction:column;align-items:center;gap:2px}
#unlockForm .pin-input{width:min(100%,220px)}