:root{
    --paper:#FAFAFA;
    --paper-2:#FFFFFF;
    --rule:#EFEFEF;
    --margin:#FF6B6B;
    --ink:#1A1A2E;
    --ink-mute:#8E8EA0;
    --cover-900:#2D1B69;
    --cover-700:#6D28D9;
    --cover-500:#8B5CF6;
    --gold:#F59E0B;
    --stamp-red:#EF4444;
    --stamp-green:#10B981;
    --canvas:#F4F4F6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100%;height:100%;}
body{ background:var(--canvas); font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink); display:flex; justify-content:center; align-items:flex-start; }
svg{display:block;}

.app-container { width:100%; max-width:480px; height:100vh; display:flex; flex-direction:column; background:var(--paper); position:relative; box-shadow: 0 0 25px rgba(109,40,217,0.08); }
.mobile-frame { width: 100%; height: 100%; background:var(--paper); display:flex; flex-direction:column; position:relative; overflow:hidden; }

.status{ display:flex; justify-content:space-between; padding:12px 20px 4px; font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink); flex-shrink:0; }
.page-body{ flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; position:relative; scrollbar-width: none; }
.page-body::-webkit-scrollbar { display: none; }

.card-group { background:#fff; border:1px solid var(--rule); border-radius:20px; padding:16px; box-shadow:0 4px 16px rgba(109,40,217,0.04); }
/*
.quick-actions { display: flex; gap: 10px; overflow-x: auto; background: #fff; border: 1px solid var(--rule); border-radius: 20px; padding: 24px; box-shadow:0 4px 16px rgba(109,40,217,0.04); scrollbar-width: none; }
.quick-actions::-webkit-scrollbar { display: none; }

.q-action { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 11px; font-weight: 600; text-align: center; }
.q-icon { width: 44px; height: 44px; border-radius: 24px; background: rgba(139,92,246,0.1); display: flex; align-items: center; justify-content: center; color: var(--cover-700); }
.q-icon svg { width: 30px; height: 30px; stroke: currentColor; }
*/

.quick-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 4px 14px 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .quick-actions::-webkit-scrollbar { display: none; }
    .q-action {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: var(--ink);
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }
    .q-icon {
        width: 44px; height: 44px;
        border-radius: 14px;
        background: rgba(0,0,0,0.04);
        display: flex; align-items: center; justify-content: center;
    }
    .q-icon svg { width: 20px; height: 20px; stroke: currentColor; }


.navbar{ display:flex; border-top:1px solid var(--rule); background:var(--paper-2); padding:10px 8px 16px; flex-shrink:0; box-shadow:0 -4px 16px rgba(0,0,0,0.02); z-index:10; align-items:center; }
.navbar .nitem{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9px; color:var(--ink-mute); font-weight:600; text-decoration:none; }
.navbar .nitem svg{ width:20px; height:20px; stroke:var(--ink-mute); }
.navbar .nitem.on{ color:var(--cover-700); }
.navbar .nitem.on svg{ stroke:var(--cover-700); }

.fab-center {
    width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--cover-700), var(--cover-500));
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 8px 20px rgba(109,40,217,0.35); text-decoration: none; margin: 0 8px; flex-shrink: 0; cursor: pointer; border: none;
}
.fab-center svg { width: 24px; height: 24px; stroke: currentColor; }

.entries{ display:flex; flex-direction:column; gap:8px; }
.entry{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff; border:1px solid var(--rule); border-radius:14px; text-decoration:none; color:inherit; }
.stamp{ width:36px; height:36px; border-radius:12px; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stamp svg{ width:18px; height:18px; stroke:currentColor; }
.stamp.out{ background: rgba(239,68,68,0.1); color:var(--stamp-red); }
.stamp.in{ background: rgba(16,185,129,0.1); color:var(--stamp-green); }
.entry .info{ flex:1; min-width:0; }
.entry .info .n{ font-size:12.5px; font-weight:700; color:var(--ink); }
.entry .info .m{ font-size:10px; color:var(--ink-mute); margin-top:2px; font-family:'IBM Plex Mono', monospace; }
.entry .amt{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700; flex-shrink:0; }
.amt.out{ color:var(--stamp-red); }
.amt.in{ color:var(--stamp-green); }

.badge-freemium {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(253,230,138,0.25));
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--ink);
}

.field{ background:#FAFAFC; border:1px solid var(--rule); border-radius:12px; padding:10px 14px; flex-shrink:0; }
.field .fl{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:4px; }
.field .fv{ font-size:13px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; }
.field.big .fv{ font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:20px; color:var(--cover-900); }

.btn{
    background: linear-gradient(135deg, var(--cover-700), var(--cover-500));
    color: #fff; text-align:center; padding:12px; border-radius:12px; font-size:12.5px; font-weight:700; letter-spacing:0.3px;
    display:flex; align-items:center; justify-content:center; gap:6px; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(109,40,217,0.25);
}
.btn.gold{ background: linear-gradient(135deg, var(--gold), #FBBF24); color: var(--cover-900); box-shadow: 0 4px 12px rgba(245,158,11,0.25); }

.subhead{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-mute); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.subhead a{ color:var(--cover-700); text-decoration:none; font-weight:700; }