:root {
      --header-height: 70px;
      --header-height-mobile: 52px;
      --max-width: 1200px;
      --right-col-width: 300px;
      --gap: 28px;
      --border: 1px solid #eff2f5;
      --sidebar-top: var(--gap);
    }
    body {
      margin: 0;
      font-family: "Inter", sans-serif;
      background: #fff url(img/bg.gif) repeat-x 0 70px;
	  font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
    }
	a{text-decoration:none;color:#3861fb}
	a:hover{color:#3081e1}
	p{margin:0 0 10px 0}
	h1,h2{margin:15px 0 10px 0}
	
	.main-content p{line-height:140%;}
	
    .wrapper {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0;
      position: relative;
      z-index: 1;
      background: none;
    }
    .header {
      height: var(--header-height);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8px;
      border-bottom: var(--border);
      background: #fff;
      position: relative;
      z-index: 10;
      transition: height 0.3s;
    }
    .logo {
      font-weight: bold;
      font-size: 1.3rem;
    }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      background: none;
      border: none;
      padding: 0;
      transition: 0.3s;
      z-index: 1101;
    }
    .hamburger span {
      width: 30px;
      height: 4px;
      background: #23373b;
      border-radius: 2px;
      transition: 0.4s cubic-bezier(.4,2.08,.55,.44);
      display: block;
      position: relative;
    }
    .hamburger.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px,7px);
    }
    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: translateX(-10px);
    }
    .hamburger.open span:nth-child(3) {
      transform: rotate(-45deg) translate(7px,-7px);
    }
    .menu {
      display: flex;
      gap: 32px;
    }
    .menu a{
      font-weight: bold;color: #000;
    }
    .menu a:hover{
      color:#3081e1
    }
    .main-area {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: var(--gap);
      max-width: var(--max-width);
      margin: 0 auto;
      padding: var(--gap) 0 0 0;
      min-height: 100vh;
      box-sizing: border-box;
    }
    .main-content {
      background: #fff;
      padding: 10px;
      min-height: 600px;
      box-sizing: border-box;
      flex: 1 1 0%;
    }
    .right-sidebar {
      width: var(--right-col-width);
      min-width: var(--right-col-width);
      max-width: var(--right-col-width);
      background: #fff;
      box-sizing: border-box;
      text-align: center;
      font-size: 1rem;
      z-index: 5;
      top: var(--sidebar-top);
      align-self: flex-start;
      display: block;
      transition: top 0.2s;
    }
    /* --- Full width section between main and footer --- */
    .full-width-section {
      width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
      background: #CCC;
      padding: 60px 0;
      text-align: center;
      font-size: 1.5rem;
      color: #222;
    }
    .footer {
      max-width: var(--max-width);
      margin: 60px auto 20px auto;
      padding: 24px 0 0 0;
      text-align: center;
      color: #888;
      border-top: var(--border);
      background: #fff;
    }
    /* ---- MOBILE & TABLET RESPONSIVE ---- */
    @media (max-width: 900px) {
      .main-area {
        flex-direction: column;
        gap: 0;
        padding: 20px 8px 0 8px;
      }
      .main-content {
        font-size: 1rem;
        min-width: 0;
      }
      .right-sidebar {
        display: none !important;
      }
    }
    @media (max-width: 700px) {
		    body {  background-image: none	}
      .header {
        height: var(--header-height-mobile);
        padding: 0 10px;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
      }
      .logo {
        font-size: 1rem;
      }
      .menu {
        display: none;
      }
      .hamburger {
        display: flex;
      }
      .main-area {
        padding-top: 14px;
      }
	.tools-board{margin:20px 0 25px 0 !important}
	.market-cap-card.card-a {
	position: relative !important;
	margin: 0 auto 20px auto !important;
    }	
	.market-cap-card.card-b div{width:30.9% !important;font-size: 0.875rem !important;}
					.market-cap-card.card-b div.last br{display:none}
	  
	  
	  
    }
	
	@media (max-width: 440px) {
			    .pill-box {  display: table !important}
				.table{padding:10px 10px 5px 10px !important}
				.table .thide{display:none}
				.table .tshow{display:table-cell !important;font-size:0.875rem;color:#616e85}

	}
    /* Hamburger mobile menu panel */
    .mobile-menu {
      display: none;
      flex-direction: column;
      position: fixed;
      top: var(--header-height-mobile);
      left: 0; right: 0;
      background: #fff;
      z-index: 1100;
      box-shadow: 0 4px 20px rgba(0,0,0,0.10);
      animation: fadeIn 0.25s;
    }
    .mobile-menu.open {
      display: flex !important;
    }
    .mobile-menu a {
      padding: 18px 20px;
      border-bottom: 1px solid #eee;
      color: #23373b;
      text-decoration: none;
      font-size: 1.2rem;
      background: #fff;
      transition: background 0.18s;
    }
    .mobile-menu a:last-child {
      border-bottom: none;
    }
    .mobile-menu a:active {
      background: #f0f0f0;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-16px);}
      to { opacity: 1; transform: translateY(0);}
    }
	.tools-board{margin:20px 0 25px 270px}
	 .market-cap-card {
      min-height: 169px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 2px 16px 0 rgba(24, 39, 75, 0.07), 0 1.5px 4px 0 rgba(24, 39, 75, 0.03);
      padding: 10px 10px;
      box-sizing: border-box;
      flex-direction: column;
      /* Optional: smooth corners on all browsers */
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;

	  
    }
		 .market-cap-card.card-a {
	width: 250px;
	position: absolute;
	margin-left:-270px;
	  
    }		 
	.market-cap-card.card-b {
	  width:100%
    }
		.market-cap-card.card-b div{
	  width: 31%;
	  display: block;
	  float:left;
	  text-align:center;
	  border-right:2px solid #eff2f5;
	  height:149px;
	  align-content: center;
	  padding: 0 1%;
	  
	  
    }
		.market-cap-card.card-b div.last{
border:0
	  
    }
		.market-cap-card.card-b div span.price{

font-size: 1.75rem;
display:block;	  
margin: 15px 0;
font-weight: bold;
    color: #2563EB;
    }
			.market-cap-card.card-b div span.coin{
 
color: #bfc1c4;
			}
	
	    .pill-box {
      display: inline-flex;
	  font-size:0.938rem;
      align-items: center;
      background-color: #f0f6ff;
      background-repeat: no-repeat;
	  background-position: 10px center;
      border-radius: 999px;
      padding: 8px 18px 8px 14px;
      color: #000;
	  font-weight: 500;
	  margin: 0 5px 10px;
    }
	.pill-box:hover {background-color: #e7efff;color:#000}
	.pill-box.icon-chart{background-image:url(img/icon-chart.png);background-size:20px 13px;padding-left:34px}
	
.table{background:#f8fafd;border-radius:15px;padding:10px 15px 5px 15px;-webkit-border-radius:15px;-moz-border-radius:15px;margin-bottom:10px}
.table table{border-collapse:collapse;width:100%;margin-bottom:15px;border-spacing:0}
.table thead{font-weight:bold;background:#ececec}
.table thead th{padding:7px 5px}
.table th{text-align:left}
.table th,td{border-bottom:1px solid #eff2f5;padding:7px 5px;text-align:center}
.table .tleft{text-align:left}
.table .tshow{display:none}

.refresh{border-radius:15px;padding:10px 10px 10px 40px;-webkit-border-radius:15px;-moz-border-radius:15px;margin-bottom:10px;background: #f8fafd url(img/icon-refresh.gif) no-repeat 10px center;   background-size:26px 26px;line-height:140%}