/* instrument-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/instrument-sans-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/instrument-sans-v4-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/instrument-sans-v4-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/instrument-sans-v4-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
    --app-primary: #635bff;
    --app-primary-dark: #4b42db;
    --app-dark: #111827;
    --app-muted: #667085;
    --app-soft: #f6f8fb;
}

body {
    font-family: "Instrument Sans", sans-serif !important;
    background: var(--app-soft);
    color: var(--app-dark);
    font-size:14px;
}

.app-navbar {
    background: rgba(17, 24, 39, 0.96);
    backdrop-filter: blur(12px);
}

.brand-mark {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    color: #fff;
}

.hero-section {
    min-height: 620px;
    display: flex;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 20% 10%, rgba(99, 91, 255, 0.85), transparent 35%),
        radial-gradient(circle at 90% 20%, rgba(6, 182, 212, 0.55), transparent 30%),
        linear-gradient(135deg, #111827 0%, #1f2937 60%, #312e81 100%);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.78);
}

.py-lg-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
}

.hero-card {
    border-radius: 1.5rem;
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-dark);
    --bs-btn-hover-border-color: var(--app-primary-dark);
    --bs-btn-active-bg: var(--app-primary-dark);
    --bs-btn-active-border-color: var(--app-primary-dark);
}

.text-primary {
    color: var(--app-primary) !important;
}

.info-card,
.song-cover-card,
.code-card,
.meta-box {
    border-radius: 1.25rem;
}

.info-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(17, 24, 39, 0.08) !important;
}

.step-number {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #635bff, #06b6d4);
}

.code-card,
.json-output {
    background: #0f172a;
    color: #dbeafe;
}

.code-card pre,
.json-output {
    white-space: pre-wrap;
    word-break: break-word;
}

.song-cover {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.song-cover-card {
    overflow: hidden;
}

.meta-box {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    padding: 1rem;
    height: 100%;
}

.json-output {
    padding: 1.5rem;
    max-height: 520px;
    overflow: auto;
}

.table > :not(caption) > * > * {
    padding: 1rem 1.25rem;
}

@media (max-width: 991.98px) {
    .hero-section {
        min-height: auto;
    }
}

.playlist-cover {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.track-thumb {
    width: 52px;
    height: 52px;
    border-radius: 0.85rem;
    object-fit: cover;
}

.playlist-table-wrap {
    border: 1px solid #eef2f7;
    border-radius: 1rem;
    overflow: hidden;
}

.playlist-table tbody tr:last-child td {
    border-bottom: 0;
}

.playlist-page-header code,
.hero-section code {
    font-size: 0.9em;
}

.link-input-group .input-icon-btn {
    width: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.search-result-card {
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(17, 24, 39, 0.08);
}

.search-thumb {
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    object-fit: cover;
}

.min-w-0 {
    min-width: 0;
}

/* Search page alignment fixes */
.search-results-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.search-result-card {
    min-width: 0;
    max-width: 100%;
}

.search-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    width: 100%;
}

.search-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.search-media-wrap,
.search-thumb {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

.search-thumb {
    object-fit: cover;
    border-radius: 1rem;
    display: block;
}

.search-result-title,
.search-result-subtitle {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.search-result-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.search-result-subtitle {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.search-card-actions .btn {
    white-space: nowrap;
}
.btn svg {
width: 12px;
height: 12px;
}
.features{min-height: 342px;}
.content-link a {
  color: #1db954;
  text-decoration: none;  
}
.content-link a:hover {
  background-color:#1db954;
  color:#fff;  
  transition:.15s ease-in-out;  
}
.btn-outline-secondary hover{border:1px solid #198754 !important}

.footer {color:#c4c5c7}
.footer a{color:#c4c5c7}
.footer a:hover{color:#1db954}
@media (max-width: 575.98px) {
    .search-card-inner {
        gap: 0.85rem;
    }

    .search-media-wrap,
    .search-thumb {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }
}

/* Multilingual / RTL helpers */
[dir="rtl"] body {
    text-align: right;
}

[dir="rtl"] .search-card-inner {
    direction: rtl;
}

[dir="rtl"] .json-output,
[dir="rtl"] pre,
[dir="rtl"] code {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    text-align: right;
}

[dir="rtl"] .copy-btn,
[dir="rtl"] .refresh-btn,
[dir="rtl"] .submit-btn {
    direction: rtl;
}