/* Shared controls, followed by phone and short-landscape layouts. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-viewport-height: 100dvh;
  --app-viewport-stable-height: 100dvh;
}
.library-browse-controls { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 8px; }
.filter-disclosure { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.filter-disclosure summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; list-style: none; color: var(--muted); font-size: 12px; cursor: pointer; touch-action: manipulation; }
.filter-disclosure summary::-webkit-details-marker { display: none; }
.filter-disclosure summary > span:last-child { margin-left: auto; }
.filter-disclosure[open] summary > span:last-child { transform: rotate(180deg); }
.filter-disclosure summary .icon { width: 16px; height: 16px; }
.filter-disclosure summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.filter-status { padding: 1px 6px; border-radius: 5px; color: var(--accent); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
.filter-disclosure .filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 2px 12px 12px; }
.filter-disclosure .filter-row > .author-filter { width: 100%; min-width: 0; max-width: none; }
.library-browse-controls .filter-reset { flex-shrink: 0; min-height: 44px; }
.library-section > .categories { margin: 0 0 20px; }
.sidebar { max-height: var(--app-viewport-stable-height); overflow-y: auto; overscroll-behavior: contain; }

@media (max-width: 760px), (max-width: 1000px) and (max-height: 500px) {
  :root { --safe-bottom: var(--app-safe-bottom); --mobile-nav-height: 62px; }
  html { scroll-padding-bottom: calc(150px + var(--app-safe-bottom)); }
  body { min-width: 0; -webkit-text-size-adjust: 100%; }
  body:has(.player-panel.is-open), body:has(dialog[open]) { overflow: hidden; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  main { padding: 0 calc(18px + var(--app-safe-right)) calc(156px + var(--app-safe-bottom)) calc(18px + var(--app-safe-left)); }
  .topbar { height: calc(62px + var(--app-safe-top)); padding-top: var(--app-safe-top); }
  .breadcrumb { font-size: 0; }
  .breadcrumb > * { display: none; }
  .breadcrumb::before { content: '眠屿'; color: var(--text-strong); font-size: 19px; letter-spacing: 2px; }
  .top-actions { gap: 6px; }
  .top-actions .icon-button, .avatar { width: 44px; height: 44px; }
  .top-actions .avatar { display: none; }
  .mode-badge { font-size: 9px; padding: 4px 8px; }
  .heading-row { margin: 10px 0 16px; gap: 15px; }
  .heading-row h1, .authors-heading h1, .feature-heading h1, .profile h1, .account-heading h1 { font-size: 26px; }
  .heading-row .search-box { width: 100%; }
  .search-box { height: 46px; }
  .search-box input, .feature-field input, .account-field input, .account-dialog .account-field input, .tools-ab input, .author-filter, .feature-tag-filter { font-size: 16px; }
  .search-box input { min-height: 44px; }
  .search-box kbd { display: none; }
  input:not([type="range"]), select, textarea { scroll-margin-top: 16px; scroll-margin-bottom: 24px; }
  .section-heading { gap: 8px; }
  .section-heading > div { gap: 6px; }
  .section-heading h2 { font-size: 13px; }
  .section-actions { gap: 5px; }
  .section-actions .text-button { min-height: 44px; padding: 8px 3px; font-size: 11px; white-space: nowrap; }
  .section-actions .icon { width: 15px; height: 15px; }
  .filter-disclosure .filter-row { grid-template-columns: 1fr; }
  .filter-disclosure .filter-row > #author-filter, .filter-disclosure .filter-row > #tag-filter, .filter-disclosure .filter-row > #sort-filter { max-width: none; min-height: 44px; }
  .library-section > .categories, .author-letters { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 6px; padding: 3px 0; margin: 0 0 16px; }
  .categories::-webkit-scrollbar, .author-letters::-webkit-scrollbar { display: none; }
  .category-button, .author-letters button { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .category-button { padding: 9px 13px; font-size: 12px; }
  .authors-heading { margin: 10px 0 18px; }
  .authors-toolbar { gap: 12px; margin-bottom: 14px; }
  .author-sort button { min-height: 44px; }
  .back-link { min-height: 44px; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .card-meta > .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .card-meta { gap: 5px; }
  .card-title, .card-artist { min-height: 36px; }
  .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .card-artist { display: flex; align-items: center; margin-top: 0; }
  .icon-button { width: 44px; height: 44px; min-width: 44px; }
  .outline-button, .text-button, .feature-button, .player-options .option-button, .player-tools-dialog button { min-height: 44px; }
  .feature-track { gap: 10px; }
  .feature-track-actions { gap: 2px; }
  .feature-icon-button { width: 44px; min-width: 44px; min-height: 44px; }
  .feature-track-actions .feature-small { min-height: 44px; }
  .feature-kind-tabs .feature-button, .account-segments .account-button { min-height: 44px; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 21; display: flex; align-items: center; justify-content: space-around; gap: 0; box-sizing: border-box; height: calc(var(--mobile-nav-height) + var(--app-safe-bottom)); padding: 5px calc(8px + var(--app-safe-right)) calc(5px + var(--app-safe-bottom)) calc(8px + var(--app-safe-left)); background: var(--panel); border-top: 1px solid var(--line); }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; width: auto; max-width: 96px; min-width: 0; min-height: 48px; padding: 4px; font-size: 10px; }
  .mobile-nav .icon { width: 20px; height: 20px; }
  .mini-player { display: flex; position: fixed; z-index: 20; left: calc(10px + var(--app-safe-left)); right: calc(10px + var(--app-safe-right)); bottom: calc(var(--mobile-nav-height) + 8px + var(--app-safe-bottom)); padding: 6px 8px 6px 6px; gap: 4px; border-radius: 13px; background: var(--surface); }
  .mini-info { min-width: 0; min-height: 44px; }
  .mini-info img { width: 40px; height: 40px; }
  .mini-info b { font-size: 12px; }
  .mini-player > .icon-button { flex: 0 0 44px; }
  .player-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: var(--app-viewport-height); max-height: none; z-index: 40; padding: 0 calc(24px + var(--app-safe-right)) calc(24px + var(--app-safe-bottom)) calc(24px + var(--app-safe-left)); overflow-y: auto; overscroll-behavior: contain; transform: translateY(110%); visibility: hidden; border: 0; }
  .player-panel.is-open { transform: translateY(0); visibility: visible; }
  .player-heading { position: sticky; top: 0; z-index: 2; min-height: calc(60px + var(--app-safe-top)); margin: 0 -4px; padding: var(--app-safe-top) 4px 0; background: var(--panel); }
  .mobile-player-close { display: grid; place-items: center; }
  .player-heading .player-kind { display: none; }
  .player-artwork { width: min(66vw, 280px); margin: 16px auto 0; }
  .now-playing-title { margin-top: 22px; gap: 4px; }
  .now-playing-title h2 { font-size: 20px; }
  .now-playing-title .icon-button { min-width: 44px; }
  .progress-area { margin-top: 14px; }
  .time-labels { margin-top: -4px; }
  .playback-controls { margin-top: 16px; }
  .big-play { width: 64px; height: 64px; }
  .player-options { margin-top: 18px; }
  .player-options .option-button { font-size: 12px; }
  .volume-control { margin-top: 14px; padding: 8px 0; }
  input[type="range"], .tools-slider input[type="range"] { height: 44px; margin: 0; padding: 0; background: transparent; }
  input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--accent) 0 var(--progress, 0%), var(--line) var(--progress, 0%) 100%); border-radius: 4px; }
  input[type="range"]::-webkit-slider-thumb, .tools-slider input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; background: var(--accent); border: 0; }
  input[type="range"]::-moz-range-track { height: 4px; background: var(--line); border-radius: 4px; }
  input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent); border-radius: 4px; }
  input[type="range"]::-moz-range-thumb, .tools-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--accent); border: 0; }
  dialog, .feature-dialog, .account-dialog, .player-tools-dialog, .video-dialog { position: fixed; inset: calc(12px + var(--app-safe-top)) var(--app-safe-right) auto var(--app-safe-left); max-width: calc(100vw - 24px - var(--app-safe-left) - var(--app-safe-right)); max-height: calc(var(--app-viewport-height) - 24px - var(--app-safe-top) - var(--app-safe-bottom)); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; }
  .feature-dialog, .account-dialog, .player-tools-dialog, .video-dialog { border-radius: 16px; }
  .player-tools-dialog { width: 480px; }
  .tools-heading { padding: 12px 16px; }
  .tools-section { padding: 18px 16px; }
  .tools-heading h2 { font-size: 19px; }
  .tools-heading p { margin-top: 3px; }
  .player-tools-dialog .tools-close { min-width: 44px; }
  .tools-slider { margin-top: 12px; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; }
  .tools-ab input { min-height: 44px; }
  .tools-ab button { font-size: 11px; }
  .video-heading { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 8px 12px; }
  .video-dialog video { max-height: calc(var(--app-viewport-height) - 180px - var(--app-safe-top) - var(--app-safe-bottom)); min-height: 90px; }
  .video-details { padding: 14px; gap: 6px; }
  .video-details > div { min-width: 0; }
  .video-details h2 { font-size: 17px; overflow-wrap: anywhere; }
  .video-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 14px 14px; }
  .video-actions > button { justify-content: center; min-width: 0; }
  .toast { bottom: calc(145px + var(--app-safe-bottom)); max-width: calc(100vw - 32px - var(--app-safe-left) - var(--app-safe-right)); white-space: normal; text-align: center; }
  .keyboard-open .mini-player, .keyboard-open .mobile-nav { display: none; }
  .keyboard-open main { padding-bottom: 28px; }
  .keyboard-open .toast { bottom: 16px; }
}

@media (max-width: 350px) {
  main { padding-left: calc(12px + var(--app-safe-left)); padding-right: calc(12px + var(--app-safe-right)); }
  .section-heading { align-items: flex-start; }
  .section-heading > div:first-child { padding-top: 10px; }
  .section-heading h2 { font-size: 12px; }
  .section-heading .muted { font-size: 10px; }
  .section-actions { gap: 2px; }
  .section-actions .text-button { gap: 3px; font-size: 10px; }
  .media-grid { gap: 20px 10px; }
  .card-meta { gap: 2px; }
  .feature-track { flex-wrap: wrap; }
  .feature-track-info { flex-basis: calc(100% - 90px); }
  .feature-track-actions { margin-left: auto; }
  .account-checkin { padding-left: 10px; padding-right: 10px; }
  .account-days { gap: 3px; }
  .account-section-heading h2 { font-size: 14px; }
  .account-section-heading > span { font-size: 10px; }
  .player-panel { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .player-artwork { width: min(46vw, 190px); margin-top: 8px; }
  .now-playing-title { margin-top: 14px; }
  .progress-area { margin-top: 5px; }
  .playback-controls { margin-top: 10px; }
  .player-options { margin-top: 10px; }
}
@media (min-width: 600px) and (max-width: 1000px) and (max-height: 500px) {
  :root { --mobile-nav-height: 56px; }
  .topbar { height: calc(44px + var(--app-safe-top)); }
  .heading-row { flex-direction: row; align-items: center; margin: 0 0 8px; }
  .heading-row .search-box { width: 260px; }
  .library-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .library-section > .section-heading, .library-section > .media-grid, .library-section > .empty-state { grid-column: 1 / -1; }
  .library-section > .section-heading { margin-bottom: 4px; }
  .library-browse-controls { grid-column: 2; grid-row: 2; margin: 0 0 10px; }
  .library-section > .categories { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 10px; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-player { left: max(calc(10px + var(--app-safe-left)), calc(50% - 250px)); right: max(calc(10px + var(--app-safe-right)), calc(50% - 250px)); }
  .player-panel { padding-left: calc(36% + var(--app-safe-left)); padding-right: calc(28px + var(--app-safe-right)); }
  .player-heading { margin-left: calc(-56.25% + 12px); }
  .player-artwork { position: absolute; top: calc(76px + var(--app-safe-top)); left: calc(24px + var(--app-safe-left)); width: min(25vw, 210px); margin: 0; }
  .now-playing-title { margin-top: 6px; }
  .progress-area { margin-top: 4px; }
  .playback-controls { margin-top: 7px; }
  .player-options { margin-top: 8px; }
  .volume-control { margin-top: 5px; }
  .video-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .video-dialog { width: 610px; }
  .video-details { padding-top: 8px; padding-bottom: 8px; }
}