/* ==========================================================================
   MUSIC PORTAL STYLES
   ========================================================================== */

.limit-track { background: rgba(0, 80, 136, 0.1); height: 6px; border-radius: 3px; overflow: hidden; margin: 1rem 0; position: relative; }
.limit-fill { background: var(--color-fiery-orange); height: 100%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.limit-fill.danger { background: #d63031; }

.history-list { display: flex; flex-direction: column; gap: 0.75rem; background: transparent; border: none; }
.history-row { background: var(--color-snow-summit); border-radius: 1rem; padding: 1rem 1.5rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; box-shadow: 0 4px 12px -2px rgba(0, 80, 136, 0.08); transition: transform 0.2s, box-shadow 0.2s; }
.history-row:hover { transform: translateX(8px); box-shadow: 0 10px 24px -4px rgba(0, 80, 136, 0.12); border-left: 4px solid var(--color-fiery-orange); }

.download-zone { border: 2px dashed rgba(0, 80, 136, 0.25); border-radius: 1rem; padding: 2rem; text-align: center; background: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; box-sizing: border-box; }
.download-zone.active { border-color: var(--color-fiery-orange); background: rgba(255, 130, 58, 0.05); }

.loader-spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Специфичные настройки сетки админки для музыки */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
    .admin-grid { grid-template-columns: 1fr 1fr; }
    .asymmetric-tiered { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 2.5rem; }
}

@media (max-width: 767px) {
    .download-zone { padding: 1.25rem !important; }
    #downloadForm > div { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; }
    #downloadForm > div > div { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
    #downloadBtn { width: 100% !important; min-height: 50px !important; padding: 0 1rem !important; }
    .history-row { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 1rem !important; }
    .history-row > div:last-child { flex-direction: row !important; justify-content: flex-start !important; gap: 0.75rem !important; }
    #copyToast { bottom: 6rem !important; right: 1rem !important; left: 1rem !important; border-radius: 12px !important; }
}