/* PayGate UI */
:root {
    --brand: #e2136e;
    --brand-600: #c80f60;
    --brand-50: #fdeef5;
    --ink: #101828;
    --muted: #667085;
    --line: #eaecf0;
    --bg: #f5f6fa;
    --sidebar: #141927;
    --sidebar-2: #1c2233;
    --sidebar-text: #aab2c5;
    --radius: 14px;
    --sidebar-w: 264px;
    --bs-font-sans-serif: "Inter", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--ink);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 226, 19, 110;
    --bs-link-hover-color: var(--brand-600);
    --bs-link-hover-color-rgb: 200, 15, 96;
    --bs-border-color: var(--line);
    --bs-primary: var(--brand);
    --bs-primary-rgb: 226, 19, 110;
}
body { font-family: var(--bs-font-sans-serif); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-brand { color: var(--brand) !important; }
.min-w-0 { min-width: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 700; letter-spacing: -.01em; }

/* Buttons & forms */
.btn { border-radius: 10px; font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus, .btn-brand:active { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; }
.btn-outline-secondary { --bs-btn-color: #344054; --bs-btn-border-color: #d0d5dd; --bs-btn-hover-bg: #f9fafb; --bs-btn-hover-color: #101828; --bs-btn-hover-border-color: #d0d5dd; --bs-btn-active-bg: #f2f4f7; --bs-btn-active-color: #101828; }
.btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-size: 1.25rem; }
.form-control, .form-select { border-radius: 10px; border-color: #d0d5dd; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #f08bb8; box-shadow: 0 0 0 4px rgba(226, 19, 110, .12); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 500; font-size: .9rem; color: #344054; }
.nav-pills .nav-link { color: #475467; border-radius: 8px; }
.nav-pills .nav-link.active { background: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link, .page-link.active { background: var(--brand); border-color: var(--brand); }
.alert { border-radius: 12px; border: 1px solid transparent; }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .38em .6em; }

/* Cards & tables */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; padding: .9rem 1.15rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-header a { font-weight: 500; font-size: .875rem; }
.card > .table-responsive:last-child, .card > .table-responsive:last-child .table { border-radius: 0 0 var(--radius) var(--radius); }
.table { --bs-table-hover-bg: #fafbfc; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; border-color: var(--line); }
.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table-responsive .table td { white-space: nowrap; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: #f9fafb; white-space: nowrap; }
.list-group-item { border-color: var(--line); padding: .8rem 1.15rem; }
pre.code { background: #141927; color: #e4e7ec; padding: 1rem 1.1rem; border-radius: 10px; font-size: .8rem; overflow-x: auto; }

/* Stat cards */
.stat-card .card-body { padding: 1.15rem 1.2rem; }
.stat-card .label { color: var(--muted); font-size: .8rem; font-weight: 500; }
.stat-card .value { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card .sub { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.tone-brand { background: var(--brand-50); color: var(--brand); }
.tone-green { background: #ecfdf3; color: #12b76a; }
.tone-blue { background: #eff4ff; color: #2e61e6; }
.tone-amber { background: #fffaeb; color: #dc6803; }
.tone-violet { background: #f4f3ff; color: #6e51e0; }

/* Chart */
.hchart { display: flex; gap: .5rem; height: 240px; }
.hchart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 24px; font-size: .72rem; color: #98a2b3; text-align: right; min-width: 2.6rem; }
.hchart-axis span { line-height: 1; transform: translateY(-.35em); }
.hchart-axis span:last-child { transform: translateY(.35em); }
.hchart-plot { position: relative; flex: 1; min-width: 0; }
.hchart-grid { position: absolute; inset: 0 0 24px 0; display: flex; flex-direction: column; justify-content: space-between; }
.hchart-grid i { border-top: 1px dashed #eaecf0; }
.hchart-grid i:last-child { border-top: 1px solid #d0d5dd; }
.hchart-bars { position: absolute; inset: 0; display: flex; align-items: stretch; }
.hchart-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; padding-bottom: 24px; position: relative; }
.hchart-bar { width: 58%; max-width: 30px; background: linear-gradient(180deg, #f0468f, var(--brand)); border-radius: 6px 6px 2px 2px; transition: opacity .15s; }
.hchart-col:hover .hchart-bar { opacity: .8; }
.hchart-label { position: absolute; bottom: 0; font-size: .7rem; color: #98a2b3; white-space: nowrap; }
@media (max-width: 575.98px) { .hchart-label:not(.is-today):not(.sm-keep) { display: none; } }
.chart-empty { position: absolute; inset: 0 0 24px 0; display: flex; flex-direction: column; gap: .35rem; align-items: center; justify-content: center; color: var(--muted); font-size: .875rem; }
.chart-empty i { font-size: 1.6rem; opacity: .5; }

/* Panel shell */
.panel { background: var(--bg); }
.sidebar, .sidebar.offcanvas-lg { background-color: var(--sidebar) !important; color: #fff; }
.sidebar { width: var(--sidebar-w); border-right: 0 !important; }
.sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 100vh; width: 100%; }
@media (min-width: 992px) {
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; overflow-y: auto; }
    .main { margin-left: var(--sidebar-w); }
}
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.1rem; }
.brand:hover { color: #fff; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 12px rgba(226, 19, 110, .4); }
.sidebar-account { margin: 0 1rem .75rem; padding: .8rem .9rem; background: var(--sidebar-2); border-radius: 12px; color: #fff; font-size: .9rem; }
.role-badge { display: inline-block; margin-top: .35rem; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #e4e7ec; }
.role-badge.is-own { background: rgba(46, 144, 250, .2); color: #b2ddff; }
.sidebar-nav { padding: .25rem .75rem 1rem; flex: 1; }
.nav-section { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #667085; padding: 1rem .75rem .4rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; margin-bottom: 2px; border-radius: 10px; color: var(--sidebar-text); font-weight: 500; font-size: .92rem; }
.nav-item i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(226, 19, 110, .35); }
.sidebar-foot { padding: 1rem 1.5rem; font-size: .75rem; color: #667085; }

.topbar { position: sticky; top: 0; z-index: 1020; height: 64px; display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-title { font-weight: 600; color: #344054; }
.balance-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); font-size: .875rem; }
.balance-pill strong { color: var(--ink); }
.user-btn { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .25rem .75rem .25rem .25rem; font-weight: 500; font-size: .9rem; color: #344054; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.content { padding: 1.75rem; max-width: 1480px; }
@media (max-width: 575.98px) { .content { padding: 1rem; } .topbar { padding: 0 1rem; } }
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.content > h1.h4 { font-size: 1.5rem; margin-bottom: 1.25rem !important; }

/* Public / auth / checkout */
.auth-bg { background: radial-gradient(1200px 600px at 10% -10%, #fde3ef 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #e6ebff 0%, transparent 55%), #f7f8fb; min-height: 100vh; }
.auth-bg .brand, .brand-lg { color: var(--ink); font-size: 1.5rem; font-weight: 800; }
.auth-bg .card { border-radius: 18px; box-shadow: 0 12px 40px rgba(16, 24, 40, .08); }
.checkout-bg { background: radial-gradient(1000px 500px at 50% -20%, #fde3ef 0%, transparent 60%), #f7f8fb; min-height: 100vh; }
.checkout-card { border-radius: 20px; overflow: hidden; box-shadow: 0 16px 48px rgba(16, 24, 40, .1); }
.checkout-head { background: linear-gradient(135deg, var(--brand), #b10b56); color: #fff; padding: 1.35rem 1.5rem; }
.checkout-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; }
.btn-bkash { background: var(--brand); color: #fff; font-weight: 700; padding: .9rem; font-size: 1.05rem; border-radius: 12px; }
.btn-bkash:hover { background: var(--brand-600); color: #fff; }
.mode-option { cursor: pointer; border: 2px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; height: 100%; transition: border-color .15s, background .15s; }
.mode-option:hover { border-color: #f5b5d2; }
.btn-check:checked + .mode-option { border-color: var(--brand); background: var(--brand-50); }
.hero { background: radial-gradient(900px 500px at 0% 0%, #fde3ef 0%, transparent 60%), radial-gradient(800px 500px at 100% 100%, #e6ebff 0%, transparent 55%), #fff; }
.navbar-brand.text-brand { color: var(--ink) !important; }