:root {
  color-scheme: dark;
  --primary: #283b56;
  --primary-dark: #1d2b3f;
  --primary-light: #405a78;
  --accent: #419ecd;
  --accent-hover: #55baff;
  --accent-strong: #e45d72;
  --accent-blue: #55baff;
  --bg: #111923;
  --panel: #1a2738;
  --panel-2: #1d2b3f;
  --line: #344a64;
  --text: #f7f8fa;
  --muted: #aab6c5;
  --success: #55baff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% -30%, #203b59 0, transparent 55%), var(--bg); color: var(--text); }
button, input { font: inherit; }
button, .upload-button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .55rem; color: var(--accent-blue); font-size: .7rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.55rem); line-height: 1.15; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.topbar { height: 68px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(75, 105, 139, .45); background: rgba(18, 29, 44, .88); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.04rem; letter-spacing: -.035em; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; }
.brand-blue { color: var(--accent-blue); }
.top-actions { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #55baff; box-shadow: 0 0 12px #419ecd88; margin-right: 5px; }
.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 45px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.hero .muted { margin: .65rem 0 0; font-size: .93rem; }
.primary-button, .quiet-button, .danger-button, .copy-button, .icon-button { border: 1px solid transparent; border-radius: 8px; padding: .72rem .95rem; color: var(--text); font-weight: 700; font-size: .83rem; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #071a2b; background: var(--accent-blue); box-shadow: 0 4px 18px #419ecd20; }
.primary-button:hover { background: #82d0ff; transform: translateY(-1px); }
.quiet-button, .icon-button { background: #ffffff03; color: var(--muted); border-color: var(--line); }
.quiet-button:hover, .icon-button:hover { color: var(--text); border-color: var(--primary-light); background: #ffffff08; }
.danger-button { background: #d94b65; color: white; }
.danger-button:hover { background: #ed637b; }
.plus { font-size: 1.15rem; line-height: .8; }
.drop-zone { min-height: 174px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); border: 1px dashed #496b91; border-radius: 12px; background: linear-gradient(135deg, #1a2c41aa, #172638aa); transition: background-color .15s ease, border-color .15s ease; outline: none; text-align: center; padding: 20px; }
.drop-zone strong { color: var(--text); font-size: .92rem; }
.drop-zone > span { font-size: .82rem; }
.drop-zone small { margin-top: 6px; font-size: .7rem; color: #8094ab; }
.drop-zone:hover, .drop-zone:focus, .drop-zone.dragging { border-color: var(--accent-blue); background: #419ecd12; }
.upload-cloud { color: var(--accent-blue); margin-bottom: 5px; }
.upload-cloud svg { width: 32px; height: 32px; }
.notice { padding: .8rem 1rem; margin-top: 15px; border: 1px solid #419ecd66; border-radius: 8px; color: #82d0ff; background: #419ecd12; font-size: .83rem; }
 .notice.error { color: #ff9aaa; border-color: #e45d7266; background: #e45d7210; }
.upload-progress { margin-top: 14px; padding: 16px 18px; border: 1px solid #344a64; border-radius: 10px; background: linear-gradient(135deg, #1a2c41, #172638); }
.upload-progress-top, .upload-progress-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.upload-progress-top { font-size: .85rem; }
.upload-progress-top strong:last-child { color: var(--accent-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.upload-progress-file { margin-top: 4px; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
.progress-track { height: 9px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: #0c1724; border: 1px solid #344a64; }
.progress-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #419ecd, #82d0ff); transition: width .12s linear; box-shadow: 0 0 12px #55baff44; }
.upload-progress-bottom { margin-top: 8px; color: var(--muted); font-size: .73rem; font-variant-numeric: tabular-nums; }
#uploadProgressPercent { color: #bce5ff; font-weight: 750; }
.toolbar { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; }
.toolbar .eyebrow { margin-bottom: .3rem; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 24px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; color: #a8c6e4; background: var(--panel); font-size: .72rem; vertical-align: 2px; margin-left: 5px; }
.search-wrap { display: flex; align-items: center; gap: 8px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.search-wrap:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 3px #419ecd1b; }
.search-wrap svg { width: 17px; color: #8296ad; flex: 0 0 auto; }
input[type="search"], .login-card input { width: 260px; padding: .75rem 0; border: 0; color: var(--text); background: transparent; outline: none; font-size: .82rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; align-items: stretch; }
.file-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, #1c2b3e, #182536); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.file-card:hover { border-color: #53779d; transform: translateY(-2px); box-shadow: 0 10px 30px #0000001c; }
.preview { width: 100%; aspect-ratio: 16 / 10; min-height: 0; display: grid; place-items: center; overflow: hidden; position: relative; background: repeating-conic-gradient(#1d2b3f 0 25%, #263b54 0 50%) 50% / 18px 18px; }
.preview img, .preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview video { background: #101a27; }
.file-symbol { color: #8ebfe8; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; border: 1px solid #52799d; border-radius: 12px; padding: 18px; background: #419ecd12; }
.file-info { min-width: 0; flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: flex-start; }
.file-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 650; font-size: .84rem; }
.file-meta { margin-top: 5px; color: var(--muted); font-size: .72rem; display: flex; justify-content: space-between; gap: 8px; }
.file-type { color: #83caff; text-transform: uppercase; letter-spacing: .05em; font-size: .65rem; font-weight: 750; }
.card-actions { display: grid; grid-template-columns: minmax(0, 1fr) 128px 38px; gap: 6px; margin-top: auto; padding-top: 12px; }
.copy-button { min-width: 0; min-height: 36px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #263c55; color: #e8f5ff; padding: .45rem .35rem; font-size: .72rem; }
.copy-button:hover { background: #315273; }
.icon-button { display: grid; place-items: center; padding: .5rem; color: var(--muted); }
.icon-button svg { width: 15px; height: 15px; }
.icon-button.delete { color: #ff8294; }
.empty { padding: 65px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.empty h2 { color: var(--text); margin: 10px 0 6px; }
.empty p { font-size: .85rem; margin-bottom: 18px; }
.empty-icon { font-size: 2.5rem; color: var(--accent-blue); }
footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); color: #8194a9; font-size: .72rem; }
.login-page { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 12px 0 35px; }
.login-card { width: min(410px, 100%); padding: 34px; border: 1px solid #354c67; border-radius: 14px; background: linear-gradient(145deg, #1c2b3e, #172333); box-shadow: 0 22px 70px #00000024; }
.login-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 24px; color: var(--accent-blue); background: #419ecd16; border: 1px solid #419ecd55; border-radius: 12px; }
.login-icon svg { width: 31px; }
.login-card h1 { font-size: 2rem; }
.login-card .muted { margin: .6rem 0 24px; font-size: .87rem; }
.login-card form { display: grid; gap: 9px; }
.login-card label, .dialog-label { margin-top: 7px; color: #bdc9d8; font-size: .76rem; font-weight: 650; }
.login-card input, .dialog-input { width: 100%; padding: .78rem .85rem; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #111c2a; outline: none; }
.login-card input:focus, .dialog-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px #419ecd1b; }
.full-width { width: 100%; margin-top: 14px; }
.message { min-height: 1rem; color: #ff9aaa; font-size: .78rem; }
.login-foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #8295aa; font-size: .7rem; line-height: 1.6; }
code { color: #a8dfff; }
dialog { width: min(430px, calc(100% - 32px)); padding: 27px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); box-shadow: 0 16px 40px #111923a6; }
dialog::backdrop { background: #0b121bd9; backdrop-filter: blur(4px); }
dialog h2 { margin-top: 0; font-size: 1.4rem; }
dialog .muted { font-size: .82rem; line-height: 1.5; }
.dialog-label { display: block; margin: 20px 0 7px; }
.dialog-input { background: var(--panel-2); }
.dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 24px; }
@media (max-width: 600px) {
  .topbar { height: 62px; padding: 0 16px; }
  .status-label { display: none; }
  .shell { width: calc(100% - 28px); padding-top: 29px; }
  .hero { align-items: stretch; flex-direction: column; gap: 20px; }
  .upload-button { width: 100%; }
  .toolbar { align-items: stretch; flex-direction: column; justify-content: center; gap: 14px; padding: 28px 0 17px; }
  .search-wrap, input[type="search"] { width: 100%; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
  .file-card { display: flex; flex-direction: column; }
  .preview { width: 100%; aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .file-info { padding: 10px; }
  .file-title { font-size: .77rem; }
  .file-meta { font-size: .66rem; }
  .card-actions { grid-template-columns: minmax(0, 1fr) 128px 38px; gap: 5px; margin-top: auto; padding-top: 10px; }
  .copy-button { min-height: 34px; font-size: .68rem; padding: .4rem .2rem; }
  .icon-button { min-height: 34px; padding: .3rem; }
  .login-card { padding: 27px 22px; }
  footer { font-size: .66rem; }
}
.small-note { font-size: .78rem; margin: .45rem 0 0; }
.admin-panel { margin: 18px 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #1c2b3e, #182536); }
.admin-heading .muted { font-size: .82rem; margin: .5rem 0 0; }
.create-user-form { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.4fr) auto; gap: 12px; align-items: end; margin: 18px 0; }
.create-user-form label { display: grid; gap: 7px; color: #bdc9d8; font-size: .76rem; font-weight: 650; }
.create-user-form input { width: 100%; min-width: 0; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #111c2a; }
.users-list { display: grid; gap: 8px; }
.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #344a64; border-radius: 8px; background: #11192388; }
.user-main { min-width: 0; display: grid; gap: 4px; }
.user-main strong { overflow-wrap: anywhere; font-size: .84rem; }
.user-main span, .users-empty { color: var(--muted); font-size: .72rem; }
.user-delete { flex: 0 0 auto; padding: .5rem .65rem; font-size: .72rem; }
@media (max-width: 600px) { .create-user-form { grid-template-columns: minmax(0, 1fr); } .admin-panel { padding: 13px; } .user-row { align-items: flex-start; } .user-delete { padding: .45rem; } }

/* Click-to-preview lightbox */
.preview-trigger { cursor: zoom-in; }
.preview-trigger:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -3px; }
.preview-dialog { width: min(1100px, calc(100% - 28px)); max-width: 1100px; max-height: calc(100dvh - 28px); padding: 14px; overflow: hidden; }
.preview-dialog-content { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100dvh - 56px); }
.preview-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.preview-dialog-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: .95rem; }
.preview-dialog-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.preview-dialog-media { display: grid; place-items: center; min-height: 0; max-height: calc(100dvh - 100px); overflow: hidden; border-radius: 8px; background: #080d14; }
.preview-dialog-media img, .preview-dialog-media video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; }
.preview-dialog-media video { width: auto; }
.preview-close { flex: 0 0 auto; }
.preview-nav-button { min-width: 36px; min-height: 36px; padding: .4rem .65rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.preview-position { color: var(--text-secondary, #9aa8ba); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-nav-button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) {
  .preview-dialog { padding: 9px; width: calc(100% - 16px); }
  .preview-dialog-content { max-height: calc(100dvh - 36px); gap: 8px; }
  .preview-dialog-header { gap: 6px; }
  .preview-dialog-title { font-size: .8rem; }
  .preview-dialog-controls { gap: 4px; }
  .preview-nav-button { min-width: 32px; min-height: 32px; padding: .3rem .5rem; }
  .preview-close { padding: .35rem .55rem; }
  .preview-dialog-media { max-height: calc(100dvh - 90px); }
  .preview-dialog-media img, .preview-dialog-media video { max-height: calc(100dvh - 100px); }
}



/* Mobile usability improvements */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
button, input, .drop-zone {
  -webkit-tap-highlight-color: transparent;
}
button, .upload-button, .icon-button, .preview-trigger {
  touch-action: manipulation;
}
button:focus-visible, a:focus-visible, input:focus-visible, .drop-zone:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
  }
  .brand { gap: 7px; font-size: .98rem; }
  .brand-mark { width: 30px; height: 30px; flex: 0 0 30px; }
  .top-actions { gap: 6px; }
  #logoutBtn { padding: .55rem .65rem; font-size: .74rem; }
  .shell {
    width: calc(100% - 24px);
    padding: 22px 0 max(28px, env(safe-area-inset-bottom));
  }
  h1 { font-size: clamp(1.75rem, 8vw, 2.15rem); }
  .hero { gap: 15px; margin-bottom: 18px; padding-bottom: 18px; }
  .hero .muted { font-size: .86rem; line-height: 1.5; }
  .upload-button { min-height: 46px; }
  .drop-zone {
    min-height: 142px;
    padding: 18px 14px;
    gap: 7px;
  }
  .drop-zone strong { font-size: .9rem; }
  .drop-zone > span { font-size: .78rem; line-height: 1.45; }
  .drop-zone small { max-width: 290px; line-height: 1.5; }
  .upload-progress { padding: 13px; }
  .upload-progress-top, .upload-progress-bottom { gap: 8px; }
  .upload-progress-top { font-size: .8rem; }
  .upload-progress-bottom { font-size: .68rem; }
  .upload-progress-bottom span:last-child { text-align: right; }
  .toolbar { min-height: 0; padding: 25px 0 14px; gap: 12px; }
  .toolbar h2 { font-size: 1.12rem; }
  .search-wrap { min-height: 44px; padding: 0 12px; }
  input[type="search"] { min-width: 0; font-size: 16px; } /* prevents iOS zoom */
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .file-card { border-radius: 12px; }
  .preview { aspect-ratio: 16 / 9; }
  .file-info { padding: 12px; }
  .file-title { font-size: .9rem; }
  .file-meta { align-items: center; flex-wrap: wrap; font-size: .72rem; }
  .card-actions { padding-top: 12px; gap: 6px; }
  .copy-button, .icon-button { min-height: 42px; font-size: .76rem; }
  .icon-button { min-width: 38px; }
  .empty { padding: 42px 16px; }
  footer { flex-direction: column; gap: 8px; margin-top: 26px; padding-top: 16px; }
  .login-page { min-height: auto; padding: 10px 0 26px; }
  .login-card { width: 100%; padding: 25px 19px; }
  .login-card h1 { font-size: 1.85rem; }
  .login-card input, .dialog-input, .create-user-form input { font-size: 16px; min-height: 44px; }
  .login-card form { gap: 8px; }
  .full-width { min-height: 46px; }
  .admin-panel { margin: 16px 0 20px; }
  .create-user-form { gap: 12px; }
  .create-user-form .primary-button { min-height: 44px; }
  .user-row { gap: 10px; padding: 10px; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions button { min-height: 42px; flex: 1 1 auto; }
  dialog:not(.preview-dialog) { padding: 21px 17px; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .preview-dialog {
    width: calc(100% - 12px);
    max-width: none;
    max-height: calc(100dvh - 12px);
    padding: 8px;
    border-radius: 12px;
  }
  .preview-dialog-content { max-height: calc(100dvh - 30px); gap: 8px; }
  .preview-dialog-header { align-items: center; gap: 5px; }
  .preview-dialog-title { font-size: .78rem; }
  .preview-dialog-controls { gap: 4px; }
  .preview-nav-button { min-width: 36px; min-height: 40px; padding: .35rem; }
  .preview-position { min-width: 36px; text-align: center; font-size: .72rem; }
  .preview-close { min-height: 40px; padding: .35rem .55rem; }
  .preview-dialog-media { max-height: calc(100dvh - 82px); }
  .preview-dialog-media img, .preview-dialog-media video {
    max-width: 100%;
    max-height: calc(100dvh - 92px);
  }
}
@media (max-width: 380px) {
  .shell { width: calc(100% - 20px); }
  .card-actions { grid-template-columns: minmax(0, 1fr) 96px 36px; gap: 5px; }
  .copy-button { padding-left: .2rem; padding-right: .2rem; font-size: .7rem; }
  .icon-button { min-width: 36px; }
  .preview-dialog-title { max-width: 75px; }
  .preview-nav-button { min-width: 32px; }
  .preview-position { min-width: 31px; }
  .preview-close { padding: .3rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* Card preview fixes: full image visible, videos never blank */
.preview-bg { display: none !important; }
.play-badge { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(8, 13, 20, .62); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.play-badge svg { width: 22px; height: 22px; margin-left: 2px; }
.preview video, .preview img { pointer-events: none; }
.preview:has(video) { background: linear-gradient(145deg, #1d2b3f, #101a27); }
@media (max-width: 600px) {
  .preview { aspect-ratio: 4 / 3; background: #0d1520; }
  .preview .preview-img, .preview video { position: relative; z-index: 1; object-fit: contain; }
  .preview .preview-bg { display: block !important; position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) saturate(1.2) brightness(.55); transform: scale(1.05); z-index: 0; }
  .preview video { background: #0d1520; }
  .play-badge { z-index: 2; }
}

/* Card action buttons: size the copy icon, rebalance columns */
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.copy-button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.card-actions, .card-actions { grid-template-columns: minmax(0, 1fr) 44px 44px; }
@media (max-width: 600px) { .card-actions { grid-template-columns: minmax(0, 1fr) 46px 46px; } }
@media (max-width: 380px) { .card-actions { grid-template-columns: minmax(0, 1fr) 42px 42px; } }

/* Pin preview media inside the card box so it can never overflow or crop oddly */
@media (max-width: 600px) {
  .preview .preview-img, .preview video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; z-index: 1; }
  .preview .preview-bg { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; }
}


/* Shuffle button */
.toolbar-tools { display: flex; align-items: center; gap: 10px; }
.shuffle-button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; white-space: nowrap; }
.shuffle-button svg { width: 17px; height: 17px; flex: 0 0 auto; }
.shuffle-button svg.spin { animation: shuffle-spin .45s ease; }
@keyframes shuffle-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .toolbar-tools { width: 100%; }
  .toolbar-tools .search-wrap { flex: 1 1 auto; min-width: 0; }
  .shuffle-button { min-height: 44px; padding: .6rem .8rem; }
}