.legend-box-page {
  	padding: 18px 0 28px;
    margin: auto;
    margin-top: 80px;
    width: 80%;
  }

  .legend-box-layout {
  	/* display: grid; */
  	display:block;
  	grid-template-columns: 210px 1fr;
  	gap: 14px;
  	align-items: start
  }

  .legend-box-sidebar {
  	background: var(--th-card-bg, linear-gradient(180deg, rgba(52, 38, 29, .96), rgba(30, 22, 16, .96)));
  	border: 2px solid var(--th-border-secondary, rgba(255, 204, 136, .26));
  	border-radius: 10px;
  	box-shadow: inset 0 0 0 1px var(--th-border-light, rgba(255, 217, 156, .1)), 0 8px 16px rgba(0, 0, 0, .26), 0 0 25px var(--th-glow-primary, rgba(255, 180, 100, .1));
  	padding: 10px
  }

  .legend-box-sidebar h3 {
  	margin: 0 0 8px;
  	font-size: 15px;
  	color: var(--th-text-secondary, #ffd89f);
  	border-bottom: 1px solid var(--th-border-secondary, rgba(255, 209, 133, .22));
  	padding-bottom: 8px
  }

  .legend-box-sidebar ul {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	display: grid;
  	gap: 6px
  }

  .legend-box-sidebar a {
  	display: block;
  	font-size: 12px;
  	color: var(--th-text-secondary, #f1d3ad);
  	text-decoration: none;
  	padding: 8px 10px;
  	border: 1px solid var(--th-border-secondary, rgba(255, 204, 132, .18));
  	border-radius: 6px;
  	background: var(--th-bg-mid, rgba(255, 183, 92, .04));
  	transition: all .15s ease
  }

  .legend-box-sidebar a:hover {
  	transform: translate(3px);
  	background: var(--th-glow-primary, rgba(255, 183, 92, .14));
  	border-color: var(--th-border-primary, rgba(255, 204, 132, .4));
  	box-shadow: 0 0 10px var(--th-glow-primary, rgba(255, 180, 100, .15))
  }

  .legend-box-main {
  	/* background: var(--th-card-bg, linear-gradient(180deg, rgba(47, 35, 26, .94), rgba(29, 22, 17, .95))); */
  	border: 2px solid var(--th-border-secondary, rgba(255, 204, 136, .24));
    /* border: 1px solid rgba(242, 210, 155, 0.28); */
  	border-radius: 10px;
  	box-shadow: inset 0 0 0 1px var(--th-border-light, rgba(255, 217, 156, .1)), 0 8px 16px rgba(0, 0, 0, .3), 0 0 25px var(--th-glow-primary, rgba(255, 180, 100, .1));
  	padding: 12px
  }

  .legend-box-crumb {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	font-size: 12px;
  	color: var(--th-text-muted, #d8b489);
  	margin-bottom: 10px
  }

  .legend-box-crumb a {
  	color: var(--th-text-secondary, #ffe6bf)
  }

  .legend-box-crumb a:hover {
  	color: var(--th-primary, #ffd700)
  }

  .legend-box-panel,
  .legend-box-qrs {
  	background: var(--th-bg-mid, rgba(255, 248, 234, .05));
  	border: 1px solid var(--th-border-secondary, rgba(255, 199, 120, .2));
  	border-radius: 10px;
  	padding: 14px
  }

  .legend-box-qrs {
  	margin-top: 12px
  }

  .legend-box-panel h2 {
  	margin: 0;
  	color: #d3d3d3;
  	font-size: 26px;
  	text-align: center;
    font-weight: bold;
  }

  .legend-box-panel>p {
  	margin: 8px 0 14px;
  	text-align: center;
  	color: var(--th-text-muted, #d5b182);
  	font-size: 12px
  }

  .legend-box-tabs {
  	display: flex;
  	gap: 8px;
  	justify-content: center;
  	margin-bottom: 12px
  }

  .legend-box-tabs button {
  	border: 1px solid var(--th-primary, #cc9145);
  	background: var(--th-btn-primary, linear-gradient(180deg, #ffe6ab, #edbc6c));
  	color: var(--th-btn-text, #5a3405);
  	min-width: 110px;
  	height: 34px;
  	border-radius: 999px;
  	cursor: pointer;
  	font-weight: 600;
  	transition: all .2s ease
  }

  .legend-box-tabs button:hover {
  	filter: brightness(1.1);
  	box-shadow: 0 0 12px var(--th-glow-primary, rgba(255, 182, 74, .3))
  }

  .legend-box-tabs button.active {
  	background: var(--th-btn-hover, linear-gradient(180deg, #ffcf72, #d98d2e));
  	color: var(--th-btn-text, #3a2106);
  	box-shadow: 0 0 12px var(--th-glow-primary, rgba(255, 182, 74, .36))
  }
  .legend-download-grid {
  	display: grid;
  	grid-template-columns: repeat(2, minmax(0, 1fr));
  	gap: 10px
  }

  .legend-download-card {
  	border: 1px solid var(--th-border-secondary, rgba(255, 202, 127, .24));
  	border-radius: 8px;
  	background: var(--th-bg-mid, rgba(255, 222, 169, .06));
  	padding: 12px;
  	transition: all .2s ease
  }

  .legend-download-card:hover {
  	border-color: var(--th-border-primary, rgba(255, 202, 127, .4));
  	box-shadow: 0 0 15px var(--th-glow-primary, rgba(255, 180, 100, .15))
  }

  .legend-download-card h4 {
  	margin: 0 0 8px;
  	color: #d3d3d3;
  	font-size: 15px;
    font-weight: bold;
  }

  .legend-download-card p {
  	margin: 4px 0;
  	color: var(--th-text-muted, #e6c79d);
  	font-size: 12px
  }
  .legend-box-qrs h3 {
  	margin: 0 0 12px;
  	text-align: center;
  	color: #d3d3d3;
  	font-size: 20px;
    font-weight: bold;
  }

  .legend-qr-wrap {
  	display: grid;
  	grid-template-columns: repeat(2, minmax(0, 1fr));
  	gap: 10px
  }

  .legend-qr-card {
  	border: 1px solid var(--th-border-secondary, rgba(255, 202, 127, .24));
  	border-radius: 8px;
  	padding: 10px;
  	text-align: center;
  	background: var(--th-bg-mid, rgba(255, 222, 169, .06));
  	transition: all .2s ease
  }

  .legend-qr-card:hover {
  	border-color: var(--th-border-primary, rgba(255, 202, 127, .4));
  	box-shadow: 0 0 12px var(--th-glow-primary, rgba(255, 180, 100, .15))
  }

  .legend-qr-card strong {
  	display: block;
  	color: #d3d3d3;
  	font-size: 13px;
  	margin-bottom: 8px
  }

  .legend-qr-card img {
  	width: 140px;
  	height: 140px;
  	border-radius: 6px;
  	background: #fff;
  	padding: 6px;
    margin: auto;
  }
  .legend-actions {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap
  }

  .legend-actions a {
      display: inline-block;
      border: 1px solid var(--th-primary, #cf9448);
      padding: 6px 13px;
      color: var(--th-btn-text, #4e2f08);
      font-size: 12px;
      text-decoration: none;
      background: var(--th-btn-primary, linear-gradient(180deg, #ffe8b0, #efbe6f));
      border-radius: 999px;
      transition: all .2s ease
  }

  .legend-actions a:hover {
      filter: brightness(1.1);
      box-shadow: 0 0 12px var(--th-glow-primary, rgba(255, 180, 100, .3))
  }
  .legend-actions a, .links a {
      position: relative;
      background: linear-gradient(145deg, rgba(212, 168, 75, .15), rgba(184, 134, 11, .1));
      border: 1px solid rgba(212, 168, 75, .3);
      color: #d4a84b;
      font-weight: 600;
      letter-spacing: .5px;
      overflow: hidden;
      transition: all .3s ease;
  }
  @media (max-width: 992px) {
    .legend-download-grid,.legend-qr-wrap {
        grid-template-columns: 1fr
    }
    .legend-box-page{
      width: 100%;
    }
  }
  @media (max-width: 640px) {
    .legend-box-page{
      width: 100%;
    }
  }