/* ============================================================
   FinTrack Persona — Professional Theme Layer (v2)
   Tanpa CSS custom properties (optimizer hosting merusak var()).
   Semua nilai literal. Dimuat setelah build Tailwind.
   ============================================================ */

/* ---------- Kanvas & tipografi ---------- */
body {
    background-color: #eef0f7;
    background-image:
        radial-gradient(60rem 24rem at 110% -10%, rgba(109, 40, 217, .07), transparent 60%),
        radial-gradient(48rem 20rem at -20% 0%, rgba(42, 120, 214, .06), transparent 55%);
    background-attachment: fixed;
    color: #101322;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Kartu ---------- */
.ft-card {
    background-color: #ffffff;
    border: 1px solid rgba(16, 19, 34, .08);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 19, 34, .05), 0 12px 32px -16px rgba(16, 19, 34, .16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
a.ft-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.ft-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, .3);
    box-shadow: 0 2px 4px rgba(16, 19, 34, .05), 0 18px 40px -18px rgba(79, 70, 229, .35);
}

.ft-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #101322;
}
.ft-subtitle {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: #8a90a6;
}

/* ---------- Header ---------- */
header.sticky {
    background-color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(16, 19, 34, .07);
}

/* ---------- Tombol ---------- */
.ft-btn-primary {
    background-color: #4f46e5;
    background-image: linear-gradient(135deg, #4f46e5, #6d28d9);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .55);
    transition: filter .15s ease, transform .12s ease;
}
.ft-btn-primary:hover { filter: brightness(1.07); color: #ffffff; }
.ft-btn-primary:active { transform: translateY(1px); }
.ft-btn-soft {
    background-color: #e9ecf5;
    border-radius: 12px;
    color: #3c4257;
}
.ft-btn-soft:hover { background-color: #dde1ef; }

/* ---------- Input ---------- */
.ft-input {
    border-radius: 12px;
    border-color: rgba(16, 19, 34, .14);
    background-color: #ffffff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ft-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* ---------- Pills ---------- */
.ft-pill {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .28rem .6rem;
}

/* ---------- Bottom nav ---------- */
nav.fixed.bottom-0 {
    background-color: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(16, 19, 34, .07);
    box-shadow: 0 -10px 26px -20px rgba(16, 19, 34, .3);
}
nav.fixed.bottom-0 a, nav.fixed.bottom-0 button {
    position: relative;
    transition: color .15s ease;
}
nav.fixed.bottom-0 a.text-slate-900 { color: #4f46e5; }
nav.fixed.bottom-0 a.text-slate-900::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1.6rem; height: 3px;
    border-radius: 0 0 6px 6px;
    background-image: linear-gradient(90deg, #4f46e5, #6d28d9);
}

/* ---------- Hero saldo (dashboard) ---------- */
.fx-hero {
    background-color: #0b1020 !important;
    background-image:
        radial-gradient(28rem 14rem at 85% -20%, rgba(139, 92, 246, .38), transparent 65%),
        radial-gradient(20rem 12rem at -10% 110%, rgba(59, 130, 246, .24), transparent 60%),
        linear-gradient(135deg, #0b1020 0%, #1e1b4b 55%, #4c1d95 130%) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -20px rgba(30, 27, 75, .6) !important;
}
.fx-hero-total {
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    background-image: linear-gradient(90deg, #ffffff, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.fx-chip {
    background-color: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 12px !important;
}

/* ---------- Bar & skor ---------- */
.fx-combar { background-color: #e7e9f2; }
.fx-score { letter-spacing: -.02em; }

/* ---------- Baris item di dalam kartu ---------- */
.ft-card .bg-slate-50 {
    background-color: #f6f7fb;
    border: 1px solid rgba(16, 19, 34, .05);
}

/* ---------- Drawer ---------- */
#fx-menu { border-radius: 18px 0 0 18px; }
.fx-menu-item.fx-active {
    background-image: linear-gradient(90deg, rgba(79, 70, 229, .09), transparent);
    border-right: 3px solid #4f46e5;
}

/* ---------- FAB ---------- */
#fx-push-fab {
    background-image: linear-gradient(135deg, #4f46e5, #6d28d9);
    box-shadow: 0 14px 30px -10px rgba(79, 70, 229, .6);
}