:root{
    --app-bg:#f3f6fb;
    --app-dark:#11203a;
    --app-muted:#667085;
    --app-primary:#2155ff;
    --app-primary-soft:#edf3ff;
    --app-card:#ffffff;
    --app-border:#e6ebf3;
    --app-shadow:0 24px 60px rgba(15,23,42,.08);
    --success:#159947;
    --success-soft:#e9fbf0;
    --warning:#d97706;
    --warning-soft:#fff5df;
    --danger:#dc2626;
    --danger-soft:#ffe9e8;
    --teal:#0f766e;
    --teal-soft:#e4f8f6;
    --rose:#e11d48;
    --rose-soft:#ffe8f0;
}

body{
    background:
        radial-gradient(circle at top left, rgba(33,85,255,.08), transparent 28%),
        radial-gradient(circle at top right, rgba(20,184,166,.08), transparent 20%),
        var(--app-bg);
    color:var(--app-dark);
    font-family:Manrope,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

.fw-black{font-weight:900}
.text-white-75{color:rgba(255,255,255,.78)}
.brand-logo{width:38px;height:38px;border-radius:12px;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.auth-logo{width:72px;height:72px;border-radius:22px;box-shadow:0 14px 32px rgba(15,23,42,.16)}
.landing-brand-logo{width:46px;height:46px;border-radius:16px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12)}

.app-topbar{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
}

.app-topbar .btn-light.active{
    background:var(--app-primary-soft);
    color:var(--app-primary);
    border-color:#d8e5ff;
}

.app-main{padding-bottom:95px}

.mobile-header{
    position:sticky;
    top:0;
    z-index:1020;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--app-border);
}

.mobile-bottom-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:1040;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:8px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;
    box-shadow:0 15px 40px rgba(16,24,40,.18);
}

.mobile-bottom-nav a{
    text-decoration:none;
    color:#667085;
    text-align:center;
    border-radius:18px;
    padding:10px 4px;
    font-size:12px;
    font-weight:700;
}

.mobile-bottom-nav a i{
    display:block;
    font-size:20px;
}

.mobile-bottom-nav a.active{
    background:linear-gradient(135deg,#2155ff,#14b8a6);
    color:white;
}

.logo-bubble{
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,#facc15,#fb7185);
    display:grid;
    place-items:center;
    font-weight:900;
    color:#111827;
    box-shadow:0 12px 30px rgba(250,204,21,.28);
}

.landing-body{background:#0f172a}
.landing-hero{
    min-height:100vh;
    background:radial-gradient(circle at top left,#2155ff 0,#0f172a 38%,#111827 100%);
}

.feature-pill{
    display:inline-flex;
    gap:8px;
    align-items:center;
    border-radius:999px;
    padding:10px 14px;
    color:white;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
}

.hero-card{
    border-radius:32px;
    background:rgba(255,255,255,.96);
    padding:28px;
}

.mini-card{
    border-radius:22px;
    background:#f8fafc;
    padding:18px;
    border:1px solid #edf2f7;
}

.mini-card span{
    display:block;
    color:#667085;
    font-weight:700;
}

.mini-card strong{font-size:1.5rem}

.fake-chart{
    height:220px;
    border-radius:24px;
    background:
        linear-gradient(135deg,rgba(33,85,255,.18),rgba(20,184,166,.18)),
        repeating-linear-gradient(90deg,transparent 0 35px,rgba(33,85,255,.15) 36px 38px);
    position:relative;
    overflow:hidden;
}

.fake-chart:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:45px;
    height:80px;
    background:linear-gradient(135deg,transparent 0 18%,#2155ff 19% 20%,transparent 21% 39%,#14b8a6 40% 42%,transparent 43% 59%,#22c55e 60% 62%,transparent 63%);
}

.auth-body{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at top,#2155ff,#0f172a 55%,#111827);
    padding:16px;
}

.auth-card{
    width:min(100%,430px);
    border-radius:28px;
    background:white;
    padding:32px;
}

.page-intro{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:26px 28px;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
    border:1px solid rgba(255,255,255,.75);
    box-shadow:var(--app-shadow);
}

.dashboard-intro:before,
.customer-intro:before{
    content:"";
    position:absolute;
    inset:auto -60px -80px auto;
    width:220px;
    height:220px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(33,85,255,.2), transparent 70%);
}

.eyebrow-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(33,85,255,.09);
    color:var(--app-primary);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.02em;
}

.soft-shadow-btn{box-shadow:0 16px 30px rgba(33,85,255,.22)}

.stat-card{
    position:relative;
    min-height:138px;
    border-radius:26px;
    background:var(--app-card);
    padding:20px;
    box-shadow:var(--app-shadow);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.9);
}

.stat-card:before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.7));
}

.stat-card span{
    display:block;
    color:var(--app-muted);
    font-weight:800;
    font-size:.84rem;
    letter-spacing:.01em;
}

.stat-card strong{
    display:block;
    font-size:1.5rem;
    margin-top:10px;
    line-height:1.15;
}

.stat-card small{
    display:block;
    color:var(--app-muted);
    margin-top:8px;
    font-weight:700;
}

.stat-card i{
    position:absolute;
    right:18px;
    bottom:16px;
    font-size:42px;
    opacity:.18;
}

.accent-indigo{background:linear-gradient(180deg,#ffffff,#f3f4ff)}
.accent-indigo:before{background:linear-gradient(90deg,#4f46e5,#818cf8)}
.accent-blue{background:linear-gradient(180deg,#ffffff,#eef6ff)}
.accent-blue:before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.accent-green{background:linear-gradient(180deg,#ffffff,#edfdf2)}
.accent-green:before{background:linear-gradient(90deg,#16a34a,#4ade80)}
.accent-amber{background:linear-gradient(180deg,#ffffff,#fff7ed)}
.accent-amber:before{background:linear-gradient(90deg,#d97706,#fbbf24)}
.accent-teal{background:linear-gradient(180deg,#ffffff,#edfcfb)}
.accent-teal:before{background:linear-gradient(90deg,#0f766e,#2dd4bf)}
.accent-rose{background:linear-gradient(180deg,#ffffff,#fff1f5)}
.accent-rose:before{background:linear-gradient(90deg,#e11d48,#fb7185)}

.filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.filter-pills button{
    border:1px solid #dbe3f0;
    background:rgba(255,255,255,.92);
    border-radius:999px;
    padding:8px 14px;
    font-weight:800;
    color:#667085;
}

.filter-pills button.active{
    background:linear-gradient(135deg,#2155ff,#14b8a6);
    color:#fff;
    border-color:transparent;
    box-shadow:0 14px 30px rgba(33,85,255,.22);
}

.filter-badge{
    background:rgba(33,85,255,.1);
    color:var(--app-primary);
    padding:9px 14px;
    font-weight:800;
}

.overview-panel,
.insight-panel{
    border-radius:28px;
    box-shadow:var(--app-shadow);
    background:rgba(255,255,255,.92);
}

.overview-panel canvas{
    min-height:340px;
}

.insight-card{
    border-radius:20px;
    padding:16px;
    background:#f7f9fc;
    border:1px solid #e6ebf3;
}

.insight-card.watch{
    background:#fff7f7;
    border-color:#ffe1df;
}

.insight-card-head,
.insight-card-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.insight-card-head strong{display:block}
.insight-card-head small{display:block;color:var(--app-muted);margin-top:3px}
.insight-card-meta{
    margin-top:12px;
    color:var(--app-muted);
    font-size:.9rem;
    font-weight:700;
}

.insight-card-note{
    margin-top:10px;
    color:var(--app-dark);
    font-weight:700;
}

.tone-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:7px 11px;
    font-size:.76rem;
    font-weight:800;
    white-space:nowrap;
}

.tone-success{background:var(--success-soft);color:var(--success)}
.tone-primary{background:var(--app-primary-soft);color:var(--app-primary)}
.tone-warning{background:var(--warning-soft);color:var(--warning)}
.tone-danger{background:var(--danger-soft);color:var(--danger)}
.tone-muted{background:#f2f4f7;color:#667085}

.customer-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    height:100%;
    border-radius:30px;
    padding:22px;
    background:
        radial-gradient(circle at top right, rgba(33,85,255,.1), transparent 26%),
        linear-gradient(180deg,#ffffff,#fdfdff);
    border:1px solid rgba(255,255,255,.95);
    box-shadow:var(--app-shadow);
}

.customer-card-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.customer-identity{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.customer-avatar{
    width:54px;
    height:54px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2155ff,#14b8a6);
    color:#fff;
    font-size:1.15rem;
    font-weight:900;
    box-shadow:0 16px 30px rgba(33,85,255,.24);
}

.customer-meta-text{
    color:var(--app-muted);
    font-size:.92rem;
    font-weight:700;
}

.action-icon-btn{
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    border:1px solid #e3e8f2;
}

.customer-health-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:20px;
    background:#f6f8fc;
    border:1px solid #e8edf5;
}

.customer-health-bar small{
    display:block;
    color:var(--app-muted);
    font-weight:800;
}

.customer-health-bar strong{
    display:block;
    margin-top:3px;
    font-size:1rem;
}

.health-meta{
    display:flex;
    justify-content:flex-end;
}

.customer-currency-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.currency-panel{
    border-radius:22px;
    padding:16px;
    border:1px solid #e8edf5;
}

.currency-panel-usd{
    background:linear-gradient(180deg,#f4f8ff,#ffffff);
}

.currency-panel-sos{
    background:linear-gradient(180deg,#fff9ef,#ffffff);
}

.currency-panel-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.currency-panel-head strong{
    font-size:1.05rem;
    line-height:1.2;
}

.currency-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--app-muted);
    font-weight:800;
    font-size:.82rem;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.metric-grid small,
.progress-meta span{
    display:block;
    color:var(--app-muted);
    font-weight:800;
    font-size:.78rem;
}

.metric-grid strong{
    display:block;
    margin-top:4px;
    font-size:.98rem;
    line-height:1.25;
}

.progress-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:14px;
}

.return-progress{
    height:10px;
    border-radius:999px;
    background:#e9eef7;
    overflow:hidden;
    margin-top:8px;
}

.return-progress-bar{
    display:block;
    height:100%;
    border-radius:999px;
    transition:width .25s ease;
}

.return-progress-bar.tone-success{background:linear-gradient(90deg,#16a34a,#4ade80)}
.return-progress-bar.tone-primary{background:linear-gradient(90deg,#2155ff,#60a5fa)}
.return-progress-bar.tone-warning{background:linear-gradient(90deg,#d97706,#fbbf24)}
.return-progress-bar.tone-danger{background:linear-gradient(90deg,#dc2626,#fb7185)}
.return-progress-bar.tone-muted{background:linear-gradient(90deg,#98a2b3,#cbd5e1)}

.customer-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    border-radius:18px;
    padding:13px 15px;
    background:#f8fafc;
    border:1px dashed #d6dfec;
    color:var(--app-muted);
    font-weight:700;
}

.customer-footer-row{
    margin-top:auto;
}

.customer-dates{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    color:var(--app-muted);
    font-size:.88rem;
    font-weight:800;
}

.customer-dates span{
    display:inline-flex;
    gap:7px;
    align-items:center;
}

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

.action-btn{
    border-radius:16px;
    font-weight:800;
    padding:11px 12px;
}

.soft-panel{
    border-radius:18px;
    background:#f8fafc;
    padding:12px;
    border:1px solid #eef2f7;
}

.empty-state-card{
    display:grid;
    place-items:center;
    gap:6px;
    min-height:180px;
    border-radius:28px;
    background:rgba(255,255,255,.88);
    border:1px dashed #d8e0ec;
    box-shadow:var(--app-shadow);
    color:var(--app-muted);
    text-align:center;
    padding:24px;
}

.empty-state-card i{font-size:2rem;color:#98a2b3}
.empty-state-card strong{color:var(--app-dark)}
.empty-state-card.compact{min-height:auto;padding:22px}

.history-stack{
    display:grid;
    gap:14px;
}

.history-entry{
    display:flex;
    gap:14px;
    align-items:flex-start;
    border-radius:22px;
    padding:16px;
    border:1px solid #e8edf5;
    background:#fff;
}

.history-entry.credit{background:#f5f9ff}
.history-entry.return{background:#f0fcf5}
.history-entry.adjustment{background:#fffaf1}

.history-entry-icon{
    width:44px;
    height:44px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:#eef3ff;
    color:var(--app-primary);
    font-size:1.15rem;
    flex-shrink:0;
}

.history-entry.return .history-entry-icon{
    background:#e8fbef;
    color:var(--success);
}

.history-entry.adjustment .history-entry-icon{
    background:#fff2db;
    color:var(--warning);
}

.history-entry-body{flex:1}

.history-entry-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.history-entry-head strong{display:block}
.history-entry-head small{display:block;color:var(--app-muted);margin-top:4px}

.history-entry-amount{
    font-weight:900;
    font-size:1rem;
}

.history-entry-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:10px;
    color:var(--app-muted);
    font-size:.88rem;
    font-weight:800;
}

.history-entry-meta span{
    display:inline-flex;
    gap:6px;
    align-items:center;
}

.history-entry p{
    margin:12px 0 0;
    color:#475467;
}

.table thead th{
    color:#667085;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.badge-soft{background:#f2f4f7;color:#344054}

@media(max-width:991px){
    .customer-currency-grid{grid-template-columns:1fr}
}

@media(max-width:767px){
    .app-main{padding-top:18px}
    .page-intro{padding:22px 18px}
    .stat-card{min-height:126px;padding:16px}
    .stat-card strong{font-size:1.2rem}
    .filter-pills{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:4px;
    }
    .filter-pills button{white-space:nowrap}
    .hero-card{padding:20px}
    .display-4{font-size:2.35rem}
    .customer-actions{grid-template-columns:1fr}
    .customer-health-bar,
    .history-entry-head,
    .insight-card-head,
    .insight-card-meta{
        flex-direction:column;
        align-items:flex-start;
    }
}