/* Separate touch layout. Desktop keeps its layout; larger tablets use coarse-pointer detection. */
.mobile-app-bar, .mobile-menu-backdrop, .mobile-only { display: none; }
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  html { scroll-padding-top: 78px; }
  body { overflow-wrap: normal; }
  .shell, body.shell-sidebar-collapsed .shell { display: block; width: 100%; padding: 0 16px 32px; min-width: 0; }
  .shell > .view { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
  .mobile-app-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: env(safe-area-inset-top) 4px 0; margin-bottom: 16px; background: #f6eeeb; border-bottom: 1px solid #ddd8d7; }
  .mobile-app-bar img { width: 112px; max-height: 34px; object-fit: contain; }
  .mobile-app-bar strong { margin-left: auto; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-app-bar button { background: #012f46; color: white; width: 44px; padding: 0; font-size: 24px !important; }
  .shell-sidebar-toggle { display: none !important; }
  .topbar, body.shell-sidebar-collapsed .topbar { position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(330px, 88vw); height: 100vh; height: 100dvh; display: flex; flex-direction: column; grid-row: auto; gap: 18px; margin: 0; border-radius: 0 24px 24px 0; padding: max(24px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: #012f46; opacity: 1; transform: translateX(-105%); pointer-events: none; overflow-y: auto; overscroll-behavior: contain; }
  body.mobile-menu-open .topbar { transform: translateX(0); pointer-events: auto; }
  .topbar { touch-action: pan-y pinch-zoom; }
  .topbar .brand { display: grid; padding: 8px 12px; }
  .topbar .brand img { width: 150px; }
  .topbar .tabs { display: flex; flex-direction: column; flex: 1 0 auto; overflow: visible; gap: 4px; padding: 0; }
  .topbar .tab { width: 100%; min-height: 48px; text-align: left; white-space: normal; padding: 12px 14px; }
  .topbar .account-menu { display: flex; flex: 0 0 auto; justify-content: space-between; margin-top: auto; min-width: 0; }
  .topbar .account-copy { text-align: left; }
  .topbar .account-copy strong { color: white; }
  .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 110; border: 0; border-radius: 0; background: #001d2b80; width: 100%; height: 100%; margin: 0; padding: 0; }
  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open .mobile-menu-backdrop { display: block; }
  .mobile-menu-close { align-self: flex-end; padding: 8px 14px; color: #fff; border-color: #72909d; background: transparent; }
  .mobile-only { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  body.auth-required .mobile-menu-backdrop, body.auth-loading .mobile-menu-backdrop { display: none; }
  .view h1 { font-size: 27px; line-height: 1.2; }
  .view h2 { font-size: 23px; line-height: 1.25; }
  .panel { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 18px; border-radius: 18px; }
  .panel > *, .section-head > *, .device-head > *, .modal-dialog > * { min-width: 0; }
  .section-head, .section-head.compact, .device-head, .client-points-head, .ad-load-inspector-head { flex-wrap: wrap; gap: 12px; }
  .actions, .form-actions, .device-actions, .knowledge-actions, .client-points-tools, .campaign-slot-templates, .media-filter-controls, .client-general-save-actions { flex-wrap: wrap; gap: 8px; }
  button, .icon-button, .icon-only, .expand-button, .media-tree-toggle, .device-power { min-height: 44px; }
  button:not(.icon-button):not(.icon-only) { white-space: normal; overflow-wrap: normal; word-break: normal; }
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { min-height: 44px; min-width: 0; max-width: 100%; box-sizing: border-box; font-size: 16px !important; }
  label { min-width: 0; }
  input[type=checkbox], input[type=radio] { min-width: 22px; width: 22px; height: 22px; flex: 0 0 22px; }
  :focus-visible { outline: 2px solid #087394; outline-offset: 3px; }
  .client-settings-tabs, .device-tabs, .segmented { max-width: 100%; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px 3px; gap: 6px; }
  .client-settings-tabs button, .device-tabs button, .segmented button { flex: 0 0 auto; white-space: nowrap !important; scroll-snap-align: start; }
  .mobile-table-scroll, .analytics-scroll, .permission-matrix, .hour-schedule, .rotation-key-matrix { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mobile-table-scroll > table { min-width: 620px; }
  .mobile-table-scroll th, .mobile-table-scroll td { padding: 12px 10px; }
  .permission-matrix table { min-width: 720px; }
  .client-row { min-height: 76px; }
  .directory-search input { flex: 1 1 260px; width: 100%; }
  .client-general-grid, .applications-grid, .broadcast-report-grid, .audio-order-grid, .watermark-grid, .contact-form, .client-manager-form, .campaign-grid, .os-build-grid, .user-form-grid, .device-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotation-rules-layout { grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); }
  .application-card, .client-general-card, .broadcast-setting-card { min-width: 0; }
  .app-install-actions, .campaign-location, .campaign-ad-item { min-width: 0; max-width: 100%; }
  .campaign-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-load-item { grid-template-columns: 28px 60px 46px minmax(0, 1fr) 48px; gap: 6px; }
  .ad-load-card > header { flex-wrap: wrap; gap: 8px; }
  .campaign-slots { max-width: 100%; overflow-x: auto; }
  .campaign-slots table { min-width: 680px; }
  .media-browser { grid-template-columns: 220px minmax(0, 1fr); min-width: 0; }
  .media-pane-divider { display: none; }
  .media-sidebar { grid-column: 1; min-width: 0; max-height: calc(100dvh - 110px); overflow-y: auto; }
  .media-pane { grid-column: 2; min-width: 0; overflow: hidden; padding: 14px; }
  .media-toolbar { flex-wrap: wrap; gap: 10px; }
  .media-toolbar > *, .media-title, .media-breadcrumb { min-width: 0; max-width: 100%; }
  .media-breadcrumb { flex-wrap: wrap; }
  .media-list { max-width: 100%; overflow-x: auto; }
  .media-row .mobile-row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; gap: 8px; position: sticky; left: 0; }
  #mediaFilterControls { gap: 8px; }
  #mediaFilterControls label { flex: 1 1 140px; }
  .media-tree-row { grid-template-columns: 36px minmax(0, 1fr); }
  .media-tree-toggle { width: 36px; }
  .media-tree-label { min-height: 44px; padding-block: 10px; }
  .category-search-result { min-height: 54px; }
  .clock-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .clock-settings-panel, .clock-library-panel, .clock-workspace-panel { grid-column: 1 !important; position: static; width: 100%; height: auto; min-width: 0; max-height: none; }
  .clock-settings-panel { grid-row: 1 !important; }
  .clock-library-panel { grid-row: 2 !important; }
  .clock-workspace-panel { grid-row: 3 !important; }
  .clock-layout-divider { display: none; }
  .clock-category-library { min-height: 0 !important; max-height: 260px !important; overflow-y: auto !important; }
  .clock-source-toolbar { flex-wrap: wrap; }
  .clock-category { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 52px; gap: 8px; padding: 7px 10px; }
  .clock-category .category-search-path { grid-column: 1 / -1; }
  .clock-category .mobile-only { grid-column: 3; grid-row: 1; width: 44px; padding: 0; }
  .clock-toolbar { flex-wrap: wrap; }
  .clock-name-slot { width: 100%; min-width: 0; }
  .clock-container-row, .clock-block-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .clock-editor-body { grid-template-columns: minmax(0, 1fr) !important; }
  .clock-order-panel, .clock-wheel-panel { min-width: 0; width: 100%; position: static !important; max-height: none !important; }
  .clock-wheel-stage { min-width: 0 !important; width: min(100%, 340px) !important; }
  .clock-dropzone { min-height: 160px !important; max-height: 60dvh !important; overflow-y: auto !important; }
  .clock-item { min-height: 56px; grid-template-columns: 24px 72px minmax(0, 1fr) 44px; }
  .clock-item .mobile-row-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
  .clock-item-source { min-width: 0; }
  .clock-item-source-name { white-space: normal; }
  .clock-block-strip { max-width: 100%; overflow-x: auto; }
  .clock-block-track, .clock-block-time-axis { min-width: 640px; }
  .clock-name-slot .clock-block-tab.is-movable { touch-action: pan-x pan-y pinch-zoom; }
  .clock-block-resize-handle { display: none; } /* Exact start/duration inputs remain available. */
  .clock-order-summary { flex-wrap: wrap; }
  .clock-schedule-cell { min-height: 50px; }
  .hour-schedule > * { min-width: 0; }
  .hour-grid, .week-schedule-grid { min-width: 720px; }
  .modal { padding: 12px; align-items: center; }
  .modal-dialog, .device-dialog, .audio-markup-dialog, .playlist-generation-dialog { box-sizing: border-box; width: min(720px, calc(100vw - 24px)); min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
  .modal-head, .device-dialog .device-head { align-items: flex-start; gap: 12px; }
  .modal-head h2, .device-dialog h2 { font-size: 22px; }
  .modal-head button, .device-dialog #deviceClose { flex: 0 0 44px; }
  .modal-actions, .device-actions { position: sticky; bottom: -20px; padding: 12px 0; background: #fff; border-top: 1px solid #e3e8ec; z-index: 2; }
  .media-context-menu, .clock-item-context-menu, .clock-context-menu, .clock-block-context-menu, .device-column-menu { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .media-context-menu button, .clock-item-context-menu button { min-height: 44px; }
  .media-upload-panel { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 24px)); max-height: min(70dvh, 640px); }
  .media-upload-list { min-height: 0; overflow-y: auto; }
  .device-list { min-width: 0; max-width: 100%; overflow-x: auto; }
  .device-row > .mobile-device-more { display: none; }
  .device-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .device-filters input { grid-column: 1 / -1; }
  .device-table-tools { flex-wrap: wrap; }
  .device-fields { gap: 14px; }
  .device-history-item dl { grid-template-columns: 1fr 1fr; }
  .device-history-item dd { min-width: 0; }
  .audio-markup-layout, .audio-markup-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audio-markup-waveform { max-width: 100%; }
  .mobile-scroll-hint { color: #637386; font-size: 12px; margin: 6px 0; }
}
@media (max-width: 700px) {
  .shell, body.shell-sidebar-collapsed .shell { padding: 0 max(12px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-bottom)); }
  .mobile-app-bar { gap: 10px; }
  .mobile-app-bar img { width: 100px; }
  .panel { padding: 14px; border-radius: 16px; }
  .section-head, .section-head.compact, .device-head, .client-points-head { align-items: stretch; }
  .section-head > div:first-child { width: 100%; }
  .actions, .client-points-tools { width: 100%; }
  .actions > button, .form-actions > button { flex: 1 1 140px; }
  .device-head > button { flex: 1 1 100%; white-space: normal !important; }
  .client-general-grid, .client-general-row, .applications-grid, .broadcast-report-grid, .audio-order-grid, .watermark-grid, .contact-form, .client-manager-form, .campaign-grid, .os-build-grid, .user-form-grid, .device-fields, .rotation-rules-layout, .schedule-exchange-manual, .schedule-exchange-item, .economy-tariff-row, .economy-point-row, .economy-audio-production-row, .credentials-activity-dates, .audio-markup-layout, .audio-markup-fields { grid-template-columns: minmax(0, 1fr); }
  .client-general-span-2, .user-form-wide { grid-column: auto; }
  .application-card { padding: 18px; }
  .campaign-locations, .ad-load-filters { grid-template-columns: minmax(0, 1fr); }
  .ad-hour-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rotation-rule-param-row { grid-template-columns: minmax(0, 1fr) 88px; }
  .rotation-rule-table-head { grid-template-columns: minmax(0, 1fr) 88px; }
  .rotation-source-list { max-height: 45dvh; overflow-y: auto; }
  .auth-page { padding: 24px 16px; }
  .auth-brand-panel { display: none; }
  .login-card { padding: 24px; }
  .login-card > img { display: block; width: 140px; padding: 0; }
  .login-card h1 { font-size: 26px; }
  .media-browser { display: block; }
  .media-sidebar { display: none; width: 100%; max-height: 48dvh; border: 0; border-bottom: 1px solid #d5e0e7; padding: 12px; }
  .media-browser.mobile-folders-open .media-sidebar { display: grid; }
  .media-pane { padding: 12px; }
  .media-toolbar > div { width: 100%; }
  #mediaFilterControls { width: 100%; }
  #mediaFilterControls label { flex: 1 1 120px; }
  #mediaFilterControls input, #mediaFilterControls select { width: 100%; }
  .media-table-head { display: flex; width: 100%; min-width: 0; overflow-x: auto; gap: 8px; }
  .media-table-head > span { display: none; }
  .media-table-head > span:nth-child(4) { display: block; margin-left: auto; }
  .media-table-head > button { flex: 0 0 auto; }
  .media-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto !important; width: 100% !important; min-width: 0; gap: 8px; padding: 12px 8px; border-bottom: 1px solid #e2e8ed; }
  .media-row > * { min-width: 0; }
  .media-row .media-name { grid-column: 2 / -1; white-space: normal; }
  .media-row .media-name-text { white-space: normal; overflow-wrap: anywhere; }
  .media-row .media-duration { grid-column: 2; }
  .media-row .media-rotation-cell { grid-column: 3; }
  .media-row .media-bpm, .media-row .media-camelot, .media-row .media-key, .media-row .media-size, .media-row .media-uploader, .media-row .media-date, .media-row .media-modified { display: none; }
  .media-row .mobile-row-actions { grid-column: 2 / -1; display: flex; gap: 8px; justify-content: flex-end; position: static; }
  .media-row .mobile-row-actions button { min-width: 44px; padding: 8px 12px; }
  .media-rotation-rating { height: 44px; touch-action: pan-y pinch-zoom; }
  .location-row, #clientLocationCards.point-columns-enabled .location-row { width: 100%; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .location-row > *, #clientLocationCards.point-columns-enabled .location-row > * { grid-column: auto; grid-row: auto; min-width: 0; }
  .location-name-cell { grid-column: 2 / -1 !important; }
  .location-id, .location-version { grid-column: 2 !important; }
  .location-now-playing { grid-column: 1 / -1 !important; white-space: normal; }
  .location-actions { grid-column: 1 / -1 !important; flex-wrap: wrap; }
  .point-columns-header { display: none !important; }
  .device-list { overflow: visible; }
  .device-columns-header { display: none !important; }
  .device-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100% !important; min-width: 0; gap: 12px; padding: 16px; border-radius: 16px; }
  .device-row > .device-cell { position: static !important; left: auto !important; display: block; background: transparent !important; box-shadow: none !important; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .device-row > .device-cell::before { content: attr(data-mobile-label); display: block; color: #687c89; font-size: 11px; margin-bottom: 5px; }
  .device-row > [data-device-column=number] { font-size: 18px; }
  .device-row > [data-device-column=number]::before, .device-row > [data-device-column=position]::before { display: none; }
  .device-row > [data-device-column=position] { display: flex !important; align-items: center; gap: 10px; }
  .device-row > [data-device-column=point], .device-row > [data-device-column=track] { grid-column: 1 / -1; }
  .device-row > [data-device-column=point] > * { white-space: normal; overflow: visible; }
  .device-row > .mobile-device-detail { display: none; }
  .device-row.mobile-details-open > .mobile-device-detail:not([hidden]) { display: block; }
  .device-row > .mobile-device-more { display: flex; grid-column: 1 / -1; width: 100%; }
  .device-group-row { width: 100%; }
  .device-group-content { position: static; max-width: 100%; flex-wrap: wrap; gap: 8px; }
  .device-group-content strong { white-space: normal; }
  .device-table-tools { display: none; }
  .clock-container-row, .clock-block-controls { grid-template-columns: minmax(0, 1fr); }
  .clock-block-controls > label { grid-column: auto; }
  .clock-item { grid-template-columns: 24px 60px minmax(0, 1fr) 44px; gap: 6px; }
  .clock-item-start { font-size: 10px; white-space: nowrap; }
  .clock-item-source-duration { display: block; }
  .clock-block-track, .clock-block-time-axis { min-width: 600px; }
  .clock-block-time-axis { position: relative; }
  .clock-ad-overlays { flex-wrap: wrap; }
  .modal { padding: 0; align-items: end; }
  .modal-dialog, .device-dialog, .audio-markup-dialog, .playlist-generation-dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); padding: 18px; max-height: calc(100dvh - 16px); border-radius: 22px 22px 12px 12px; }
  .modal-actions, .device-actions { bottom: -18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal-actions > button, .device-actions > button { flex: 1 1 100px; }
  .modal-head { align-items: start; }
  .device-history-item dl { grid-template-columns: minmax(0, 1fr); }
  .device-history-item dt { font-weight: 600; }
  .android-diagnostics-info dl { grid-template-columns: minmax(0, 1fr); }
  .android-cache-row, .android-apk-submit, .android-device-actions, .litestreamer-device-settings { grid-template-columns: minmax(0, 1fr); }
  .media-upload-head { flex-wrap: wrap; }
  .media-upload-actions { margin-left: auto; }
  .media-upload-panel { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1024px), (prefers-reduced-motion: reduce) and (max-width: 1366px) and (pointer: coarse) {
  .topbar { transition: none; }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .clock-category { grid-template-columns: minmax(0, 1fr) auto 44px 44px; }
  .clock-category [data-mobile-folder-open] { grid-column: 3; }
  .clock-category [data-mobile-add-source] { grid-column: 4; }
  .clock-category .category-search-path { grid-column: 1 / -1; }
  .mobile-grid-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .mobile-grid-scroll > .hour-schedule { overflow: visible; }
  .mobile-grid-scroll .clock-schedule-grid { min-width: 760px; overflow: visible; }
  .mobile-grid-scroll .clock-schedule-grid.date-mode { min-width: 0; }
  .clock-schedule-cell { touch-action: auto; }
  .mobile-grid-controls { display: flex; gap: 8px; flex-wrap: wrap; }
  .mobile-grid-controls button[aria-pressed=true] { background: #012f46; color: white; }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .client-settings-tabs { width: 100%; max-width: 100%; box-sizing: border-box; margin-left: 0; }
  .economy-period-fields .inline-field { min-width: 0; flex: 1 1 160px; }
  .economy-period-fields input { width: 100%; }
  .audio-markup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audio-markup-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 700px) {
  .economy-period-fields .inline-field { flex-basis: 100%; }
  .audio-markup-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .clock-settings-panel .clock-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .clock-settings-panel .clock-toolbar > .clock-select-field { flex: 1 1 100%; width: 100%; }
  .clock-settings-panel .clock-toolbar > button { flex: 1 1 120px; }
  .clock-settings-panel .clock-toolbar > .clock-name-slot { flex: 1 1 100%; width: 100%; }
  .clock-settings-panel .clock-container-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock-settings-panel .clock-container-row > * { grid-column: auto !important; grid-row: auto; min-width: 0; }
  .clock-settings-panel .clock-container-row .clock-identity-field { grid-column: 1 / -1 !important; }
  .clock-settings-panel .clock-block-settings { width: 100%; box-sizing: border-box; }
  .clock-settings-panel .clock-block-settings input, .clock-settings-panel .clock-block-settings select, .clock-settings-panel .clock-block-settings button { min-height: 44px !important; height: auto !important; max-height: none !important; }
  .clock-settings-panel .clock-blocks-heading { flex-wrap: wrap; }
  .clock-item { height: auto !important; }
  .clock-item button { min-height: 44px; min-width: 44px; }
  .clock-wheel-panel { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; gap: 12px; }
  .clock-wheel-meta { width: 100%; min-width: 0; text-align: center; }
  .clock-wheel-meta small { display: none; }
  .clock-wheel-panel::after { content: 'Добавляйте категории кнопкой + в библиотеке'; color: #637386; font-size: 12px; text-align: center; }
}
@media (max-width: 700px) {
  .clock-settings-panel .clock-container-row { grid-template-columns: minmax(0, 1fr); }
  .clock-settings-panel .clock-block-settings > label { flex: 1 1 100%; }
  .clock-settings-panel .clock-block-settings > button { flex: 1 1 100%; white-space: normal; }
}

/* Compact controls retain the original desktop DOM and event handlers. */
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .modal { z-index: 200; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); align-items: center; }
  .modal-dialog, .device-dialog, .audio-markup-dialog, .playlist-generation-dialog { padding: 16px; width: min(720px, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 16px; scroll-padding-top: 80px; }
  .modal-head, .device-dialog > .device-head { position: sticky; top: -16px; z-index: 4; background: #fff; padding: 12px 0; margin-top: -12px; border-bottom: 1px solid #e3e8ec; align-items: center; }
  .modal-head h2 { font-size: 19px; margin: 0; }
  .modal-head p { margin: 4px 0 0; font-size: 12px; }
  .modal-head button { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .modal-actions, .device-actions { bottom: -16px; margin-bottom: -16px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); }
  .credentials-activity-dates, .credentials-economy-dates, .playlist-generation-dates { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  input[type=date] { width: 100%; padding: 8px; font-size: 14px !important; }
  .credentials-section-head { gap: 8px; flex-wrap: wrap; }
  .credentials-section-head p, .credentials-activity-block > .field-hint { font-size: 12px; line-height: 1.4; }
  .credentials-activity-block, .credentials-economy-block { padding: 10px; gap: 8px; }
  .mobile-disclosure { min-width: 0; }
  .mobile-disclosure > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; box-sizing: border-box; border: 1px solid #cbd8e3; border-radius: 9px; color: #06364f; background: #fff; cursor: pointer; list-style: none; font-size: 14px; }
  .mobile-disclosure > summary::-webkit-details-marker { display: none; }
  #mobileMediaFilters > summary::after { content: '⌄'; margin-left: auto; }
  #mobileMediaFilters[open] > summary::after { content: '⌃'; }
  #mobileMediaFilters { flex: 1 1 180px; }
  #mobileMediaFilters:not([open]) #mediaFilterControls { display: none; }
  #mobileMediaFilters[open] #mediaFilterControls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 10px; gap: 8px; width: 100%; }
  .media-filterbar.search-open #mobileMediaFilters { display: none; }
  #mediaFilterControls label { width: auto; min-width: 0; }
  #mediaFilterControls label span { font-size: 12px; }
  #mediaFilterControls > :first-child, #mediaFilterControls > :nth-child(6), #mediaGenerationStatus { grid-column: 1 / -1; }
  .media-toolbar .actions { display: flex; flex-wrap: nowrap; width: auto; align-items: center; gap: 6px; }
  .media-toolbar .actions > button { flex: 0 0 auto; }
  .mobile-toolbar-more { position: relative; flex: 0 0 44px; }
  .mobile-toolbar-more > summary { justify-content: center; width: 44px; font-size: 24px; padding: 0; }
  .mobile-overflow-actions { position: absolute; top: 50px; right: 0; z-index: 8; display: flex; flex-wrap: wrap; gap: 6px; width: 180px; padding: 10px; border: 1px solid #cbd8e3; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px #012f4620; }
  .mobile-toolbar-more:not([open]) .mobile-overflow-actions { display: none; }
  #clientPage > .section-head > .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #clientPage > .section-head > .actions button { flex: 1 1 110px; padding: 10px 12px; white-space: nowrap; font-size: 14px !important; }
  .status, .badge, .location-status { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
}
@media (max-width: 700px) {
  #dashboardMetrics { display: none !important; }
  .shell, body.shell-sidebar-collapsed .shell { padding-inline: max(10px,env(safe-area-inset-left)); }
  .mobile-app-bar { margin-bottom: 10px; min-height: 56px; }
  .section-head p { font-size: 13px; line-height: 1.4; }
  #clientPage > .section-head > .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #clientPage > .section-head > .actions button { width: 100%; }
  #clientPage > .section-head > .actions button:last-child { grid-column: 1 / -1; }
  .media-pane { padding: 8px; }
  .media-toolbar { gap: 8px; padding: 10px; }
  .media-toolbar > div:first-child { width: 100%; }
  .media-toolbar > .actions { width: 100%; justify-content: flex-end; }
  .media-toolbar #mediaUp { margin-right: auto; }
  #mediaStats { font-size: 12px; margin-top: 4px; }
  .media-filterbar { padding: 8px; gap: 8px; }
  .media-breadcrumbs { padding: 10px; font-size: 13px; }
  .media-row { padding: 8px 6px; gap: 4px 8px; }
  .media-row .mobile-row-actions { gap: 4px; }
  .media-row .mobile-row-actions button { width: 44px; padding: 0; }
  .media-row .media-name-text { font-size: 14px; }
  .device-row { padding: 12px; gap: 8px 12px; border-radius: 12px; }
  .device-row > .device-cell { font-size: 13px; }
  .device-row > .device-cell::before { margin-bottom: 3px; font-size: 10px; }
  .device-row > [data-device-column=number] { font-size: 16px; align-self: center; text-align: right; }
  .device-group-content { display: grid; grid-template-columns: 22px 44px minmax(0,1fr) auto; gap: 6px; }
  .device-group-content strong { font-size: 14px; }
  .device-group-content .muted { grid-column: 3; font-size: 11px; }
  .device-group-content button { font-size: 12px !important; padding: 6px 8px; }
  .location-row, #clientLocationCards.point-columns-enabled .location-row { grid-template-columns: 36px minmax(0,1fr) minmax(72px,auto); padding: 12px; gap: 8px; }
  .location-row .location-status { white-space: nowrap; }
  .location-name-cell { font-size: 15px; }
  .location-row .location-id { font-size: 14px; }
  .location-row .location-now-playing { font-size: 14px; }
  .economy-period-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .economy-period-fields .inline-field { width: auto; }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .media-filterbar { grid-template-columns: 44px minmax(0,1fr); min-height: 0; }
  #mobileMediaFilters { grid-column: 2; grid-row: 1; align-self: start; }
  .media-filterbar.search-open .media-search { grid-column: 2; grid-row: 1; }
  #mediaFilterControls { grid-auto-flow: row; grid-auto-columns: auto; }
  #mediaFilterControls .media-filter-field { height: auto; grid-template-rows: auto 44px; min-width: 0; }
  #mediaFilterControls input, #mediaFilterControls select { height: 44px; max-height: none; }
  #watermarkRevision { white-space: normal; overflow-wrap: anywhere; }
  .rotation-rules-layout > *, .rotation-transition-settings > *, .rotation-rule-param-row > *, .rotation-window-grid > * { min-width: 0; }
  .rotation-rule-param-row span { overflow-wrap: break-word; }
  .rotation-rule-table-head { grid-template-columns: minmax(0,1fr) 110px; }
  .rotation-rules-layout .checkbox-line { white-space: normal; }
  .economy-period-fields .inline-field { min-width: 0; }
}
@media (max-width: 700px) {
  #mediaBrowser { height: auto; min-height: 0; }
  #mediaDropArea { overflow: visible; height: auto; display: block; }
  .media-browser.mobile-folders-open .media-sidebar { display: block; }
  #mediaDropArea .media-dropzone { min-height: 0; }
  .rotation-window-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .rotation-rules-layout { overflow-wrap: anywhere; }
  .rotation-rules-layout button { overflow-wrap: normal; }
  .economy-period-fields input { min-width: 0 !important; width: 100% !important; }
}
@media (max-width: 700px) {
  #mediaBrowser .media-sidebar { height: auto; max-height: 38dvh; }
}
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .media-filterbar .media-search-toggle { margin: 0; align-self: start; height: 44px; min-height: 44px; max-height: none; }
  .media-filterbar:not(.search-open) .media-search { display: none; }
  .media-filterbar { padding-block: 8px; }
}
@media (max-width: 700px) {
  .economy-period-fields .inline-field { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; }
}