:root {
  --neutral-bg: #edf4fb;
  --neutral-surface: rgba(255, 255, 255, 0.9);
  --neutral-surface-soft: rgba(245, 248, 252, 0.92);
  --neutral-border: rgba(98, 143, 204, 0.18);
  --neutral-text: #1d3147;
  --neutral-muted: #687b91;
  --neutral-accent: #5d95d6;
  --neutral-accent-dark: #477fbe;
  --neutral-danger: #bf6c83;
  --neutral-shadow: 0 18px 40px rgba(55, 94, 148, 0.12);
  --neutral-glow: 0 0 0 1px rgba(148, 186, 232, 0.18), 0 16px 36px rgba(88, 126, 180, 0.14);
}

body {
  background: var(--neutral-bg) !important;
  color: var(--neutral-text) !important;
  background-image:
    radial-gradient(circle at top left, rgba(159, 197, 242, 0.22), transparent 28%),
    radial-gradient(circle at right 15%, rgba(93, 149, 214, 0.12), transparent 24%) !important;
}

.navbar,
.header,
.footer {
  background: linear-gradient(135deg, #143356 0%, #245894 58%, #5d95d6 100%) !important;
  box-shadow: 0 12px 26px rgba(33, 79, 136, 0.18) !important;
}

.navbar-brand,
.nav-link,
.header h1,
.header h4,
.header p,
.footer,
.footer p {
  color: #f5f5f4 !important;
}

.navbar-brand:hover,
.nav-link:hover {
  color: #edf3fb !important;
}

.section-title h2,
.card-title,
.qr-title,
#playerTitle,
h1,
h2,
h3 {
  color: var(--neutral-text);
}

.section-title p,
.card-text,
.shop-search-subtitle,
.qr-instruction,
.result-meta,
.download-stats,
.song-item .song-info,
.song-item .song-info i + span {
  color: var(--neutral-muted) !important;
}

.card,
.qr-card,
.music-container,
.result-item,
.result-card,
.product-item,
.data-table,
.container > .modal-content,
.address-section,
.total-section {
  background: var(--neutral-surface) !important;
  border: 1px solid var(--neutral-border) !important;
  box-shadow: var(--neutral-glow) !important;
  backdrop-filter: blur(14px) !important;
}

.card:hover,
.qr-card:hover,
.music-container:hover,
.result-item:hover,
.product-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 44px rgba(55, 94, 148, 0.14) !important;
}

.card-footer,
.qr-instruction,
.song-list-container,
.result-item,
.address-section,
.total-section {
  background: var(--neutral-surface-soft) !important;
  border-color: var(--neutral-border) !important;
}

.card-price,
.result-link,
.card-footer a.card-link,
.download-button,
.song-item .song-info i,
#playerTitle::after,
.result-link:hover {
  color: var(--neutral-accent) !important;
}

.carousel-item img,
.card img.card-img-top,
.qr-image,
.product-image {
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(59, 97, 150, 0.12) !important;
}

.btn-primary,
.btn-success,
.btn-secondary,
.btn-shop,
.shop-search-button,
.modal-close,
.pay-button,
button,
.download-button {
  background: linear-gradient(135deg, #7db2ea 0%, #5b8ed1 100%) !important;
  border-color: var(--neutral-accent) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(74, 120, 183, 0.18) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-secondary:hover,
.btn-shop:hover,
.shop-search-button:hover,
.modal-close:hover,
.pay-button:hover,
button:hover,
.download-button:hover {
  background: linear-gradient(135deg, #8bbdf0 0%, #6b9bdb 100%) !important;
  border-color: var(--neutral-accent-dark) !important;
  transform: translateY(-1px);
}

.delete-btn {
  color: var(--neutral-danger) !important;
}

.delete-btn:hover {
  color: #994848 !important;
}

.shop-search-box,
.search-box {
  background: var(--neutral-surface) !important;
  border: 1px solid var(--neutral-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--neutral-glow) !important;
  backdrop-filter: blur(12px) !important;
}

.shop-search-input,
#keyword,
.search-form .form-control,
.quantity-input,
input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--neutral-text) !important;
  border: 1px solid var(--neutral-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.shop-search-input:focus,
#keyword:focus,
.search-form .form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(93, 149, 214, 0.52) !important;
  box-shadow: 0 0 0 4px rgba(159, 197, 242, 0.16) !important;
  outline: none !important;
}

.song-item {
  border-left: 3px solid transparent !important;
}

.song-item:hover {
  background: rgba(110, 156, 214, 0.12) !important;
  border-left-color: var(--neutral-accent) !important;
  transform: translateX(2px) !important;
}

.song-item.active {
  background: rgba(110, 156, 214, 0.16) !important;
  border-left-color: var(--neutral-accent) !important;
}

#playerTitle::after {
  background: var(--neutral-accent) !important;
}

.loading-spinner {
  border-top-color: var(--neutral-accent) !important;
}

.song-list-container::-webkit-scrollbar-thumb:hover {
  background: #7da9da !important;
}

.table-header {
  background: linear-gradient(135deg, #234161, #4a79b1) !important;
  border-bottom-color: rgba(159, 197, 242, 0.24) !important;
}

.data-table {
  color: #eef7ff !important;
  background: rgba(18, 39, 69, 0.94) !important;
}

.table-row {
  border-bottom-color: rgba(120, 190, 255, 0.18) !important;
}

.table-row:hover {
  background: rgba(107, 156, 217, 0.12) !important;
}

.result-card,
.modal-content {
  border-radius: 14px !important;
}

.error-message {
  background: rgba(255, 240, 245, 0.92) !important;
  color: #b14e6a !important;
  border: 1px solid rgba(224, 129, 161, 0.3) !important;
}