:root{
	--bg:#0e0f11; --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);
}
*{box-sizing:border-box}
body{height:100%}
body{
	margin:0; 
	/*background: radial-gradient(1200px 600px at 10% -10%, rgba(240,185,11,.08), transparent 60%),radial-gradient(900px 500px at 100% 0%, rgba(0,208,156,.08), transparent 60%), var(--bg);*/
	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(240,185,11,.08), transparent 60%),
	radial-gradient(900px 500px at 100% 0%, rgba(0,208,156,.08), transparent 60%),
	var(--bg);
	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:linear-gradient(180deg, rgba(19,20,23,.95) 0%, rgba(19,20,23,.8) 100%);
	border-bottom:1px solid var(--line); box-shadow:var(--shadow);
}
.topbar {
	max-width: 1100px;
	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{height:28px; width:28px; display:grid; place-items:center; border-radius:10px; background:conic-gradient(from 140deg, var(--accent), #ffd666, var(--accent)); color:#000}
.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:#1a1d22; 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:#2a2f37}
.tab.active{background:#333940; color:var(--accent); font-weight:700}

/* Layout */
.container {
	max-width: 1100px;
	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}
.card{grid-column: span 12; background:linear-gradient(180deg,#15171b,#121317); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;font-size: 12px}
.modal_card {
	grid-column: span 12;
	background: linear-gradient(180deg,#15171b,#121317);
	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} }
.card h3{margin:0 0 10px; font-size:16px; color:#e9eef5}
.muted{color:var(--muted)}

/* Inputs */
.row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
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(180deg,#f6d66a,#f0b90b);
	color: #111;
	border: none;
	border-radius: 12px;
	padding: 7px 12px;
	cursor: pointer;
	font-weight: 700;
	transition: .2s ease;
	box-shadow: 0 6px 18px rgba(240,185,11,.2);
	font-size: 14px;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#e35466; color:#e7edf3; border:1px solid #2c333c; box-shadow:none}
.btn.danger{background:linear-gradient(180deg,#ff8f8f,#ff4d4d); color:#111}
.btn.full{width:100%}

/* Tables */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}
table{width:100%; border-collapse:collapse}
thead th{background:#1a1d22; 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: #101216;
	border-top: 1px solid var(--line);
	padding: 10px 14px;
	color: #7f8892;
	font-size: 12px;
	text-align: center;
	z-index: 100;
}
/* 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 .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: 5px 0;
}