:root {
    --bg-900: #0f1724;
    --panel: #131417;
    --card: #16181c;
    --accent: #f0b90b;
    --muted: #a7b0b8;
    --line: #252a31;
    --good: #00d09c;
    --danger: #ff4d4d;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --glass: rgba(255, 255, 255, 0.04);
}

* {
    box-sizing: border-box
}

body {
    height: 100%
}

body {
    margin: 0;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(16, 185, 129, 0.06), transparent 6%),
        radial-gradient(1000px 500px at 90% 90%, rgba(6, 182, 212, 0.04), transparent 8%),
        var(--bg-900);
    color: #fff;
    font-family: 'SolaimanLipi', sans-serif;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(16, 185, 129, 0.06), transparent 6%),
        radial-gradient(1000px 500px at 90% 90%, rgba(6, 182, 212, 0.04), transparent 8%),
        var(--bg-900);
    color: #fff;
    font-family: 'SolaimanLipi', sans-serif;
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    z-index: -1;
    /* যাতে মূল কনটেন্টের নিচে থাকে */
}

a {
    color: var(--accent)
}

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(8px);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--line);
}

.topbar {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.brand .logo {
    --from: #10b981;
    --to: #22d3ee;
    height: 32px;
    width: 32px;
    display: grid;
    color: #fff;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--from), var(--to));
}

.brand span {
    color: var(--accent);
    font-size: 18px
}

.clock {
    font-size: 14px;
    color: var(--muted)
}

/* Nav Toggle */
.menu-toggle {
    font-size: 22px;
    cursor: pointer;
    border: none;
    background: none;
    color: #fff;
    display: flex;
    align-items: center;
}

/* Nav Menu */
.nav {
    display: none;
    flex-direction: column;
    background: #14515c;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid var(--line);
    position: absolute;
    right: 12px;
    top: 58px;
    min-width: 200px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    z-index: 99;
}

.nav.show {
    display: flex
}

.tab {
    border: none;
    background: none;
    color: #e7edf3;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    transition: .2s ease;
    width: 100%;
    text-decoration: none;
}

.tab:hover {
    background: #fffafa2c
}

.tab.active {
    background: #ffffff4f;
    color: var(--accent);
    font-weight: 700
}

/* Layout */
.container {
    max-width: 1300px;
    margin: 18px auto 90px;
    padding: 0 12px;
    /*padding-bottom: 50px;*/
}

section {
    display: none
}

section.active {
    display: block;
    animation: fadeIn .3s ease
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Cards */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px
}

.headtext {
    grid-column: span 12;
    padding: 10px;
    font-size: 11px;
}


.card {
    grid-column: span 12;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    font-size: 11px;
}

.modal_card {
    grid-column: span 12;
    background: #353c47;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0px;
    font-size: 12px;
}

.modal-header {
    border: none;
}

@media(min-width:720px) {
    .card.span-6 {
        grid-column: span 6
    }

    .card.span-4 {
        grid-column: span 4
    }

    .headtext.span-6 {
        grid-column: span 6
    }

    .headtext.span-4 {
        grid-column: span 4
    }
}

.card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #e9eef5
}

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

input,
select,
button,
textarea {
    font-family: 'SolaimanLipi', sans-serif;
    font-size: 14px;
    color: #e7edf3
}

input,
select,
textarea {
    background: #111318;
    border: 1px solid #2a2f37;
    border-radius: 12px;
    padding: 12px 12px;
    outline: none;
    width: 100%
}

input:focus,
select:focus,
textarea:focus {
    border-color: #3c4654;
    box-shadow: 0 0 0 3px rgba(240, 185, 11, .12)
}

.btn {
    background: linear-gradient(90deg, #14c185, #0ddfff);
    color: #111;
    border: none;
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
    font-weight: 700;
    transition: .2s ease;
    box-shadow: 0 6px 18px rgba(240, 185, 11, .2);
    font-size: 12px;
}

.btn:hover {
    transform: translateY(-1px);
    color: white;
}

.btn.ghost {
    background: linear-gradient(298deg, #2d8cbc, #acf0e1);
    color: #000;
    border: 1px solid #2c333c;
    box-shadow: none
}

.btn.ghost2 {
    background: linear-gradient(280deg, #f841a6, #a30505);
    color: #000;
    border: 1px solid #2c333c;
    box-shadow: none
}

.btn.ghost3 {
    background: linear-gradient(90deg, #14c185, #0ddfff);
    color: #000;
    border: 1px solid #2c333c;
    box-shadow: none
}

.btn.ghost:hover {
    color: #0c67a2;
}

.btn.ghost2:hover {
    color: #fff;
}

.btn.ghost3:hover {
    color: #fff;
}

.btn.danger {
    background: linear-gradient(280deg, #f841a6, #a30505);
    color: #111
}

.btn.full {
    width: 100%
}

/* Tables */
.table-wrap {
    overflow: auto;
    border: 1px solid #4f4f4f8f;
    border-radius: 12px
}

table {
    width: 100%;
    border-collapse: collapse
}

thead th {
    background: #4d586ba9;
    color: #dbe3ea;
    text-align: left;
    padding: 10px;
    white-space: nowrap
}

tbody td {
    padding: 10px;
    border-top: 1px solid var(--line);
    white-space: nowrap
}

/* Footer */
footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid #585a5db0;
    padding: 10px 14px;
    color: #7f8892;
    font-size: 12px;
    text-align: center;
    z-index: 100;
}

.glass {
    background: var(--glass) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Helper pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #111318;
    border: 1px solid #2a2f37;
    font-size: 12px
}

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

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

.hide {
    display: none;
}

a {
    text-decoration: none;
}

.select2-dropdown {
    background-color: #333844 !important;
    border: 1px solid #aaa !important;
}

.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"] {
    color: #f3bf1e !important;
    background-color: #111318 !important;
}

.select2-search__field {
    background-color: #333844 !important;
}

.select2-container--bootstrap4 .select2-selection {
    width: 100%;
    background-color: #111318 !important;
    border: 1px solid #2a2f37 !important;
    border-radius: 10px !important;
    padding: 6px 12px;
    height: 42px !important;
    color: #fff !important;
}
.row{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.row .select2-container--bootstrap4 .select2-selection--single {
    height: 45px !important;
    font-size: 16px;
    padding: 3px 0;
}

.select2.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    padding-left: .75rem;
    line-height: calc(1.5em + .75rem);
    color: #c8d2dd;
}

.row .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #80bdff;
    -webkit-box-shadow: 0 0 0 3px rgba(240, 185, 11, .12) !important;
    ;
    box-shadow: 0 0 0 3px rgba(240, 185, 11, .12) !important;
    ;
}

.methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.buy-btn {
    background: linear-gradient(to right, #e35466, #e35466);
    border: 2px solid #e35466;
    color: #fff;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 6px 12px rgba(108, 117, 125, 0.3);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    font-family: 'SolaimanLipi', sans-serif;
}