/* Shared responsive layer, loaded after the theme and UserCenter styles. */
#nav-toggle { display: none; }

@media (max-width: 1000px) {
    #page, body.home #page {
        width: 100%;
        max-width: 960px;
        box-sizing: border-box;
        padding: 0 16px;
    }
    #header, body.home #header { width: 100%; }
    #content { width: calc(100% - 260px); }
    .post-title { width: auto; float: none; }
    .entry { overflow-wrap: anywhere; }
    .entry img, .entry video, .entry iframe { max-width: 100%; }
    .entry img { height: auto; }
    .entry pre { max-width: 100%; overflow-x: auto; }
    .commentlist li, #commentform textarea { width: 100%; box-sizing: border-box; }
    #page > main, #page > main * { box-sizing: border-box; }
    #page > main .flex-1 { min-width: 0; }
}

@media (max-width: 768px) {
    body { background: #fff; }
    body.home, body:has(#hero) #page { min-height: 100dvh; }
    #page {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }
    #footer { margin-top: auto; }
    #header, body.home #header {
        height: auto;
        min-height: 82px;
        padding: 0 16px;
        margin: 0 -16px;
        width: calc(100% + 32px);
        box-sizing: border-box;
        background: linear-gradient(145deg, #327fa9, #135e93 70%);
        border-radius: 0 0 16px 16px;
    }
    #headerimg, body.home #headerimg {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 82px;
        height: auto;
        padding: 0 90px 0 0;
        box-sizing: border-box;
    }
    #headerimg > a { flex-shrink: 0; line-height: 0; }
    #livesino_logo { width: 52px; height: 52px; }
    #description, body.home #description {
        position: static;
        height: auto;
        margin: 0;
        color: rgba(255,255,255,0.3);
        font-size: 12px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }
    #header.nav-ready #nav-toggle {
        position: absolute;
        right: 16px;
        top: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 32px;
		line-height: 1;
        padding:6px;
        border: 1px solid rgba(255,255,255,.4);
        border-radius: 10px;
        background: rgba(255,255,255,.12);
        color: #fff;
        font-size: 14px;
        cursor: pointer;
    }
    .nav-toggle-icon { font: 28px/1 Arial, sans-serif; }
    #nav, body.home #nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 0;
        padding: 0 0 14px;
        overflow: visible;
    }
    #header.nav-ready:not(.nav-open) #nav { display: none; }
    #nav li { float: none; min-width: 0; }
    #nav .page_item a, body.home #nav .page_item a {
        padding: 13px 16px;
        border-radius: 8px;
        background: rgba(255,255,255,.09);
        font-size: 14px;
        line-height: 20px;
    }
    #nav .page_item a:hover { background: rgba(255,255,255,.2); }
    #nav-toggle:focus-visible, #nav a:focus-visible,
    .music-act:focus-visible, .home-pager button:focus-visible {
        outline: 2px solid #43b8ff;
        outline-offset: 2px;
    }
    #content, #sidebar { float: none; width: 100%; box-sizing: border-box; }
    #content { padding: 20px 0; overflow: visible; }
    #sidebar { padding: 0 0 24px; border-top: 1px solid #e2ecf6; }
    .post-title { margin-left: 0; }
    .post-title h2 { font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
    .post-date + .post-title { margin-left: 55px; }
    #hero { padding: 10px 0 40px; }
    .hero-inner { min-width: 0; width: 100%; }
    .player-card, .music-box { padding: 12px 10px 4px; border-radius: 16px; }
    /* Two rows per track: full title first, generously spaced actions below. */
    .player-card .aplayer .aplayer-list,
    .player-card .aplayer .aplayer-list ol { max-height: min(560px, 65svh) !important; }
    .player-card .aplayer .aplayer-list ol li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
        height: auto;
        padding: 4px 6px 0;
        line-height: 1.6;
        box-sizing: border-box;
        white-space: normal;
    }
    .player-card .aplayer .aplayer-list ol li .aplayer-list-index { margin: 0; }
    .player-card .aplayer .aplayer-list ol li .aplayer-list-title {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 16px;
    }
    .music-acts {
        /* 桌面端是绝对定位（防长标题把图标顶到裁切区），移动端这里要还原成 grid 项 */
        position: static;
        transform: none;
        grid-column: 2;
        float: none;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px;
        height: auto;
        margin: 0;
    }
    .music-act { width: 44px; height: 24px; flex-shrink: 0; }
    .music-plays { margin-right: auto; min-height: 24px; }
    /* Progress and time get separate rows, even on 320px screens. */
    .hq-player .aplayer .aplayer-info { height: auto; min-height: 84px; padding: 4px 4px 8px 10px; }
    .hq-player .aplayer .aplayer-info .aplayer-music { margin: 0 0 6px; height: 24px; }
    .hq-player .aplayer .aplayer-controller { display: flex; flex-wrap: wrap; }
    .hq-player .aplayer .aplayer-controller .aplayer-bar-wrap { flex: 0 0 100%; margin: 0; padding: 10px 0; }
    .hq-player .aplayer .aplayer-controller .aplayer-time {
        position: static;
        width: 100%;
        padding: 0;
        text-align: right;
        font-size: 12px;
        height: 32px;
        line-height: 32px;
    }
    .hq-player .aplayer .aplayer-time .aplayer-icon { width: 28px; height: 28px; }
    .hq-player .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap { display: none; }
    .home-pager { gap: 6px; padding-top: 16px; }
    .home-pager button { min-width: 44px; height: 44px; font-size: 14px; line-height: 42px; }
    .post-actions { gap: 6px; }
    .post-actions > :is(.uc-fav-btn, .uc-like-btn, .uc-dl-btn, .uc-plays) {
        gap: 4px;
        padding-inline: 6px;
        white-space: nowrap;
    }
    .mydj-lock { margin-top: 24px; padding: 28px 20px; }
    #page > main { overflow-wrap: anywhere; }
    #page > main > .max-w-7xl { padding-left: 0; padding-right: 0; }
    #page > main .p-6 { padding: 20px; }
    #page > main .sticky { position: static; }
    #page > main nav.space-y-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    #page > main nav.space-y-2 > * { margin-top: 0; }
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px; max-width: 100%; }
    #commentform textarea { float: none; }
    /* 评论：三个信息字段由一行三列折成单列，按钮占满整行 */
    #comments .comment-fields { grid-template-columns: 1fr; gap: 10px; }
    #comments .respond { padding: 14px 14px 12px; border-radius: 12px; }
    #comments .commentlist li.comment-item { padding: 12px; gap: 10px; }
    #comments .comment-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
    #comments .comment-content { font-size: 13.5px; }
    #commentform .form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    #commentform .form-actions #submit { width: 100%; margin-left: 0; }
    #commentform .form-foot { flex-direction: column; align-items: center; gap: 6px; }
    #commentform .form-tip { text-align: center; }
    /* 验证码：标签独占一行，输入框弹性收缩，图片与「换一张」留在同一行 */
    #commentform .field-captcha { flex-direction: column; align-items: stretch; gap: 6px; }
    #commentform .field-captcha label { display: block; }
    #commentform .captcha-row { gap: 8px; }
    #commentform input.captcha-input { flex: 1 1 88px; width: auto; min-width: 0; }
    #commentform .captcha-img { flex: 0 0 130px; width: 130px; height: 36px; }
    #commentform .captcha-refresh { height: 36px; padding: 0px 8px; }
    #footer { padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
    .footer-inner { padding: 6px 16px 0; line-height: 1.85; }
    .footer-brand { font-size: 12.5px; letter-spacing: 1px; }
    .footer-dot { margin: 0 5px; }
}

/* 音乐文章页：电脑和手机共用页脚贴底布局 */
#page:has(.post-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
}

#page:has(.post-actions) > :is(#header, #footer) {
    grid-column: 1 / -1;
}

#page:has(.post-actions) > #content {
    width: 100%;
    max-width: 670px;
}

/* 手机端：正文与侧栏上下排列 */
@media (max-width: 768px) {
    #page:has(.post-actions) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        min-height: 0;
    }
}