.manga-panel.ninjaschoolonline-scroll{
		position:relative;
		border:3px solid #000000;
		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
		padding:20px;
		overflow:hidden;
	}

	/* Gift Code Page Styles */
	.giftcode-section {
	  padding: 20px 0;
	}

	/* Unified Comic Title Styling */
	.comic-ranking-header {
	  position: relative;
	  margin: 0 auto 25px;
	  text-align: center;
	}

	.manga-splash-title {
	  background-color: #ff6700;
	  border: 4px solid #000;
	  border-radius: 8px;
	  padding: 12px 20px;
	  display: inline-block;
	  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.8);
	  position: relative;
	  z-index: 1;
	  transform: rotate(-1deg);
	  margin: 0 auto;
	  max-width: 90%;
	}

	.splash-text {
	  color: white;
	  font-family: "Bangers", cursive, var(--heading-font);
	  font-size: 2.2rem;
	  margin: 0;
	  text-shadow: 2px 2px 0 #000;
	  -webkit-text-stroke: 1px black;
	  letter-spacing: 1px;
	}

	.splash-subtitle {
	  color: white;
	  font-size: 1rem;
	  font-weight: bold;
	  margin-top: 3px;
	  text-shadow: 1px 1px 0 #000;
	}

	/* Gift Code List */
	.giftcode-list {
	  display: flex;
	  flex-direction: column;
	  gap: 12px;
	  margin-bottom: 30px;
	}

	.giftcode-card {
	  background-color: white;
	  border: 3px solid var(--manga-border-color);
	  border-radius: 10px;
	  overflow: hidden;
	  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
	  transition: all 0.3s ease;
	}

	.giftcode-card:hover {
	  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	}

	.giftcode-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 15px;
	  cursor: pointer;
	  background-color: #f7f7f7;
	  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
	  transition: background-color 0.2s ease;
	}

	.giftcode-header:hover {
	  background-color: #f0f0f0;
	}

	.giftcode-title {
	  font-size: 1.1rem;
	  font-weight: bold;
	  color: var(--ninjaschoolonline-orange);
	  letter-spacing: 1px;
	  font-family: monospace;
	}

	.toggle-btn {
	  width: 30px;
	  height: 30px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  background-color: var(--ninjaschoolonline-orange);
	  color: white;
	}

	.toggle-icon {
	  transition: transform 0.3s ease;
	}

	/* Gift Code Details (Hidden by default) */
	.giftcode-details {
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.3s ease;
	  background-color: white;
	}

	/* Items List */
	.items-list {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	  gap: 12px;
	  padding: 15px;
	}

	.item-card {
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  padding: 10px;
	  border: 2px solid #f0f0f0;
	  border-radius: 8px;
	  background-color: #fcfcfc;
	  transition: all 0.2s ease;
	}

	.item-card:hover {
	  border-color: var(--ninjaschoolonline-orange);
	  background-color: #fff9f5;
	  transform: translateY(-2px);
	}

	/* Special styling for currency items */
	.currency-item {
	  background-color: #fffbf0;
	  border-color: #ffd700;
	  box-shadow: 0 2px 5px rgba(255, 215, 0, 0.2);
	}

	.currency-item:hover {
	  background-color: #fffcf5;
	  border-color: #ffcc00;
	  box-shadow: 0 3px 8px rgba(255, 215, 0, 0.3);
	}

	.currency-item .item-name {
	  color: #b8860b;
	  font-weight: bold;
	}

	.currency-item .quantity {
	  background-color: #ffd700;
	  color: #000;
	}

	.item-icon {
	  width: 40px;
	  height: 40px;
	  background-color: #f5f5f5;
	  border-radius: 8px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  overflow: hidden;
	  border: 1px solid #eee;
	}

	.item-icon img {
	  max-width: 100%;
	  max-height: 100%;
	  object-fit: contain;
	}

	.item-info {
	  flex: 1;
	  min-width: 0;
	}

	.item-name {
	  font-weight: bold;
	  margin-bottom: 5px;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  color: var(--dark-color);
	}

	.item-meta {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 8px;
	  font-size: 0.85rem;
	}

	.quantity {
	  font-weight: bold;
	  color: var(--ninjaschoolonline-orange);
	  background-color: #f8f8f8;
	  padding: 2px 8px;
	  border-radius: 12px;
	  border: 1px solid #eee;
	}

	.lock-status {
	  color: #666;
	}

	.lock-status.locked {
	  color: #e74c3c;
	}

	.lock-status.unlocked {
	  color: #2ecc71;
	}

	.expiry {
	  color: #666;
	}

	/* Empty State */
	.empty-codes {
	  text-align: center;
	  padding: 30px;
	  background-color: #f9f9f9;
	  border: 2px dashed #ddd;
	  border-radius: 10px;
	  color: #666;
	  font-style: italic;
	}

    .giftcode-list{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .giftcode-card{
      background:rgba(255,255,255,0.04);
      border-radius:16px;
      padding:16px 18px;
      border:1px solid rgba(255,255,255,0.08);
    }

    .giftcode-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .copy-code-btn{
      min-width:40px;
      width:40px;
      height:40px;
      border:none;
      border-radius:50%;
      background:#ff9800;
      color:#fff;
      cursor:pointer;
      transition:0.2s;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:15px;
      box-shadow:0 4px 10px rgba(255,152,0,0.35);
    }

    .copy-code-btn:hover{
      transform:scale(1.08);
      background:#ffb300;
    }
	
	.guide-text{
		grid-column:1 / -1;
		width:100%;
		padding:18px;
		color:#2c2c2c;
		line-height:1.9;
		font-size:15px;
		background:#fffdf8;
		border:2px solid rgba(255,152,0,0.12);
		border-radius:12px;
		font-weight:500;
		box-shadow:inset 0 1px 3px rgba(0,0,0,0.05);
	}

	.guide-text{
		padding-top:-44px !important;
	}

	.special-code-card{
		display:block;
		text-decoration:none;
		border:2px solid #ffcc00;
		transition:.25s;
	}

	.special-code-card:hover{
		transform:translateY(-2px);
		box-shadow:0 0 18px rgba(255,204,0,.35);
	}
	
	<style>
	.giftcode-card{
		cursor:pointer;
		transition:.2s;
	}

	.giftcode-card:hover{
		transform:translateY(-2px);
	}

	.giftcode-card.copied{
		border-color:#4caf50;
		box-shadow:0 0 15px rgba(76,175,80,.4);
	}
	</style>

	/* Responsive Styles */
	@media (max-width: 768px) {
	  .splash-text {
		font-size: 1.8rem;
	  }

	  .splash-subtitle {
		font-size: 0.9rem;
	  }

	  .giftcode-title {
		font-size: 1rem;
	  }

	  .items-list {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 10px;
	  }

	  .item-card {
		padding: 8px;
		gap: 10px;
	  }

	  .item-icon {
		width: 35px;
		height: 35px;
	  }

	  .item-meta {
		font-size: 0.8rem;
		gap: 6px;
	  }
	}

	@media (max-width: 576px) {
	  .manga-splash-title {
		padding: 10px 15px;
	  }

	  .splash-text {
		font-size: 1.5rem;
	  }

	  .splash-subtitle {
		font-size: 0.8rem;
	  }

	  .giftcode-header {
		padding: 12px;
	  }

	  .giftcode-title {
		font-size: 0.9rem;
		max-width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	  }

	  .items-list {
		grid-template-columns: 1fr;
		padding: 10px;
	  }

	  .item-card {
		padding: 8px;
	  }

	  .item-icon {
		width: 30px;
		height: 30px;
	  }

	  .item-name {
		font-size: 0.9rem;
	  }

	  .item-meta {
		font-size: 0.75rem;
	  }
	}