body {
  margin:0; padding:0; font-family:'Inter',sans-serif; background:#F6F8F7; color:#16202E;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 220px;
  background: #101A23; /* DA bleu foncé */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  z-index: 20;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.main {
  margin-left: 220px;
  background: #F6F8F7;
  min-height: 100vh;
  padding-bottom: 60px;
}

.sidebar-logo {
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 1.3rem;
}

.sidebar-logo a:hover {
  background: none;
}

.sidebar-logo img {
  width: 40px;
  height: 40px;
}

.sidebar-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
}

.sidebar-menu-title {
  color: #7d8b9a;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 12px 22px 8px 24px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d9e1ea; /* bleu clair/gris */
  font-size: 1.06rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sidebar-link.active {
  background: rgba(33, 65, 103, 0.6); /* bleu profond */
  color: #ffffff;
  font-weight: 600;
}

.topbar {
  height:54px; background:#fff; border-bottom:1px solid #e0e2e7;
  display:flex; align-items:center; justify-content:space-between; padding:0 34px 0 32px; gap:36px;
  position:sticky; top:0; z-index:12;
}
.topbar h2 {font-size:1.3rem; margin:0; color:#213145; font-weight:700;}
.topbar-right {display:flex; align-items:center; gap:16px;}
.points-label {color:#818A99; font-size:1rem;}
.points-bar {background:#edf3f6; border-radius:8px; width:66px; height:8px; margin-left:8px; margin-right:6px;
  display:inline-block;vertical-align:middle;position:relative;}
.points-bar-fill {background:#4FDE95; border-radius:8px 0 0 8px; width:38px; height:8px; display:block;}
.connect-btn {
  background:#16202E; color:#fff; padding:8px 20px; border:none; border-radius:20px; font-size:1.05rem; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.connect-btn:hover { background: #214267; }
.banner {
  margin:24px 20px 10px 24px; border-radius:18px; background:
    linear-gradient(90deg, #D0F6CB 0%, #D7F1F6 85%, #FAF3E7 100%);
  min-height:84px; display:flex; align-items:center; padding:24px 32px; position:relative; overflow:hidden;
}
.banner h1 {font-size:2.06rem; font-weight:700; margin:0 0 6px 0;}
.banner-desc {font-size:1.1rem; color:#43508D;}
.banner-image {
  position:absolute; right:22px; top:4px; height:74px; opacity:.7; pointer-events:none;
}
.filters-bar {
  margin:18px 22px 0 24px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:flex-start;
}
.quick-filters-bg {
  background:linear-gradient(90deg,#D0F6CB 30%,#D7F1F6 100%);
  border-radius:14px; display:flex; gap:9px; padding:6px 19px; box-shadow:0 1.5px 4px #aef18431;
}
.quick-filter-btn {
  background:#fff; color:#204a1b; border:none; font-weight:600; font-size:1.05rem;
  padding:8px 21px; border-radius:9px; cursor:pointer; transition:.16s;
  outline:none; box-shadow:0 0.5px 1.3px #6c8c4263;
}
.quick-filter-btn.selected,.quick-filter-btn:hover { background:#bee8c9; color:#16202E;}
.table-filters-bar {
  display:flex; justify-content:flex-end; align-items:center;
  margin:14px 16px 0 0; gap:18px;
}
.filter-box {
  background:#fff; border-radius:12px; box-shadow:0 .5px 2px #C1EC7C22;
  display:flex; align-items:center; gap:7px; padding:2px 16px 2px 8px; border:1px solid #e9ecef;
  font-size:1.06rem;
}
.filter-box input {
  background:none; border:none; outline:none; width:60px; font-size:1rem; color:#234111;
}
.filter-label {
  color:#7ab876; font-weight:600; font-size:1rem;
}

.earn-table-container {
  background:#fff; border-radius:15px; box-shadow:0 0 6px #b2d9be15;
  padding:32px 22px 24px 22px; margin:28px 20px 0 24px; 
}

.earn-table-container table {
  border-collapse:collapse; width:100%; background:none;
}
.earn-table-container th, .earn-table-container td {
  text-align:left; padding:13px 9px; font-size:1.12rem;
}
.earn-table-container th {
  color:#213145; font-weight:700; cursor:pointer; background:none; user-select:none; position:relative;
}
.earn-table-container th .sort-indicator {
  display:inline-block; margin-left:4px; font-size:1em; width:1em; color:#9aca7e;
  font-weight:900; pointer-events:none;
}
.earn-table-container tbody tr {
  border-radius:5px; transition:background .18s;
}
.earn-table-container tbody tr:hover {
  background:#b2d9be15;
}
.earn-table-container table a {
  text-decoration: none;
}
.sidebar-logo a {
  text-decoration: none;
}
.earn-table-container td:last-child {
  text-align: right;
}
.pool-title { font-weight:600; font-size:1.08em;}
.reward-icon {
  background: linear-gradient(87deg,#d7edc9 0%,#eaffef 100%);
  border-radius:7px; padding:3px 7px; color:#287e43; font-size:.92em; margin-right:5px; font-weight:500;
  border:1px solid #b7d3a2;
  display:inline-block; line-height:1.25;
}
.empty-msg {
  text-align:center; color:#b7bfc8; padding:26px; font-weight:500; font-size:1.1rem; letter-spacing:.3px;
}
.deposit-btn {
  display: inline-block;
  background-color: #103a5c;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.deposit-btn:hover {
  background-color: #1a4d75;
  box-shadow: 0 4px 10px rgba(16, 58, 92, 0.2);
  transform: scale(1.035);
}

.earn-table-container td img {
  width: 30px;
  height: 30px;
}

.imgL {
  text-align: center;
}
.network-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  background: rgba(33, 65, 103, 0.6);
  color: #fff;
  cursor: pointer;
  gap: 10px;
  font-size: 1rem;
  margin-bottom: 8px;
}
.network-icon {
  height: 22px;
  width: 22px;
}
.network-name {
  flex-grow: 1;
  text-align: left;
}
.network-status {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7CF59A;
}
.network-status .dot {
  width: 8px;
  height: 8px;
  background: #7CF59A;
  border-radius: 50%;
}
a {
  text-decoration: none;
}