/* ══════════════════════════════════════
   RESPONSIVE — все медиа-запросы
══════════════════════════════════════ */

/* ── Left rail + header — мобильный ── */
@media (max-width: 900px) {
    #left-rail { transform: translateX(-100%); background: var(--surface); }
    #left-rail.open { transform: translateX(0); }
    #app-main { margin-left: 0; }

    .main-header { left: 0; }
    .logo-mobile {
        display: block;
        font-family: var(--fd); font-size: .9rem; font-weight: 900;
        letter-spacing: -.03em; text-transform: uppercase;
        color: var(--text); text-decoration: none; flex-shrink: 0;
    }
    .logo-mobile em { font-style: normal; color: var(--primary); }
    .hamburger { display: flex; }
    .text-btn   { display: none; }

}
@media (min-width: 901px) {
    .hamburger { display: none; }
}


/* ── General mobile ── */
@media (max-width: 768px) {
    body { padding-bottom: 72px; }

    main { flex-direction: column; gap: 0; }
    #left_panel, #right_panel { width: 100%; }
    #right_panel { padding: 0 8px 16px; gap: 6px; }

    #artifact-hero { height: 185px; margin-bottom: -14px; }

    /* Player */
    #player { height: 72px; padding: 0 13px; gap: 10px; }
    #title_block { width: 175px; }
    #img_cover   { width: 44px; height: 44px; border-radius: 6px; }
    #controls button img { width: 21px; height: 21px; }
    #img_play_icon { width: 30px !important; height: 30px !important; }
    #volume_wrapper, #extra_block { display: none; }
    #time { font-size: .66rem; min-width: 76px; }
    #playlist { left: 0; right: 0; bottom: 72px; max-width: 100%; border-radius: 16px 16px 0 0; }
    #comments_panel { right: 0; left: 0; width: 100%; border-radius: 16px 16px 0 0; bottom: 72px; }

    .toast { right: 8px; left: 8px; max-width: 100%; }

    /* Track / artist cards */
    .tc-cover  { width: 68px; min-width: 68px; }
    .tc-right  { display: none; }
    .ac-right  { display: none; }

    /* Profile */
    .main-layout { grid-template-columns: 1fr; }
    .sidebar     { position: static; }
    .profile-head-inner { flex-direction: column; align-items: flex-start; }
    .profile-stats-row  { margin-top: 10px; }

    /* Settings */
    .settings-grid { grid-template-columns: 1fr; }
    .preview-card  { display: none; }
    .save-btn-wrap { padding: 14px 0; }
    .btn-save      { flex: 1; justify-content: center; }

    /* Upload */
    .upload-card    { grid-template-columns: 1fr; }
    .left-panel     { border-right: none; border-bottom: 1px solid var(--border); }
    .fields-grid    { grid-template-columns: 1fr 1fr; }
    .fields-grid .span3 { grid-column: span 2; }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
    .pw { padding: 0; }
    #carousel-container { padding: 0 4px; }
    #artifact-hero { height: 165px; border-radius: 14px; }
    .carousel-item img { width: 100px; height: 100px; }
    .ci-title { max-width: 100px; font-size: .62rem; }
    .c-play   { top: 50px; width: 32px; height: 32px; }

    #player  { height: 68px; padding: 0 10px; gap: 9px; }
    #title_block { width: 145px; }
    #img_cover { width: 40px; height: 40px; }
    #controls button img { width: 19px; height: 19px; }
    #img_play_icon { width: 28px !important; height: 28px !important; }
    #time { display: none; }

    .cover-popup { left: 8px; }
    .cover-popup-img { width: 200px; height: 200px; }
    .tc-stats { display: none; }
    .ac-ava   { width: 42px; height: 42px; font-size: .9rem; }

    /* Profile */
    .profile-cover { height: 150px; }
    .profile-avatar, .avatar-initials { width: 88px; height: 88px; font-size: 1.7rem; }
    .profile-head  { margin-top: -44px; }

    /* Settings */
    .lang-grid { grid-template-columns: repeat(2,1fr); }

    /* Upload */
    .fields-grid { grid-template-columns: 1fr; }
    .fields-grid .span2, .fields-grid .span3 { grid-column: span 1; }
    .right-panel { padding: 24px 20px; }
}