/* Consistent controls and layouts from compact phones to desktop. */
.filter-group,.collection-tools { display:flex;align-items:center;gap:4px;flex-wrap:wrap; }
.filter-group { position:relative;isolation:isolate;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface); }
.filter-group .selection-indicator { background:var(--surface-3);border-radius:8px; }
.filter-group .chip.active { background:transparent;border-color:transparent; }
.collection-tools .refresh-btn,.filter-bar .sort-select { min-height:42px;border-radius:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:500;transition:background .18s,color .18s,border-color .18s; }
.filter-bar .sort-select { color:var(--text); }
.collection-tools .refresh-btn:hover:not(:disabled) { background:var(--surface-2);color:var(--text);border-color:color-mix(in srgb,var(--text) 22%,transparent); }
.collection-tools .refresh-btn.active { background:var(--surface-3);color:var(--text);border-color:color-mix(in srgb,var(--text) 25%,transparent); }
.collection-tools { gap:8px;margin-left:auto; }
.filter-group .chip { border-radius:8px; }
.icon-btn { border-radius:9px;min-height:34px;padding:8px 11px;transition:background .16s,border-color .16s,color .16s; }
.pin-button[aria-pressed=false] { color:var(--text);border-color:var(--line);background:var(--surface); }
.pin-button[aria-pressed=true] { color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-dim); }
.pin-button[aria-pressed=true]:hover { background:color-mix(in srgb,var(--accent) 18%,var(--surface)); }
.pinned-heading .profile-eyebrow,.pinned-label { color:var(--muted); }
.pinned-rating { color:var(--gold); }
.search-item,.season-block { border-radius:12px; }
.search-overlay,.detail-modal { overscroll-behavior:contain; }
.search-scroll,.detail-body { overscroll-behavior:contain; }
.auth-view-panel { max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain; }
button,a,input,select,textarea,[role=button] { touch-action:manipulation; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .stub .poster-wrap { transition:transform .22s ease,box-shadow .22s ease; }
 .stub .poster-wrap:hover { transform:translateY(-3px);box-shadow:0 12px 28px #0003; }
}
@media(max-width:820px) {
 .wrap { padding:20px 16px max(32px,env(safe-area-inset-bottom)); }
 #topnav { gap:10px;padding:10px 16px; }
 #topnav .nav-tabs { flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;max-width:100%; }
 #topnav .nav-tab { flex:1 0 auto;min-height:42px;padding:10px 13px; }
 #topnav .nav-tabs::-webkit-scrollbar { display:none; }
 #topnav .nav-icon-btn,#topnav .avatar { width:42px;height:42px; }
 .filter-bar { display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:16px;margin-bottom:22px; }
 .filter-group { flex-wrap:nowrap; }
 .filter-group .chip { flex:1;padding:10px 6px;min-height:40px;font-size:12px;white-space:nowrap; }
 .collection-tools { margin:0;display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr; }
 .collection-tools .refresh-btn { padding:8px 6px;min-height:42px;font-size:11px;white-space:normal; }
 .sort-select { width:100%;min-height:44px;margin:0; }
 .search-overlay,.detail-modal { top:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0; }
 .search-overlay-head { padding: max(16px,env(safe-area-inset-top)) 16px 12px; }
 .search-overlay-close,.detail-close,.drawer-close,.search-close { min-width:40px;min-height:40px; }
 .search-scroll { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
 .search-filters-row { flex-wrap:wrap; }
 .search-filters-row select { min-width:0;max-width:100%;flex:1; }
 .search-clear { width:30px;height:30px;right:8px; }
 .search-item-row { padding:14px;min-height:110px; }
 .search-add-btn { min-height:44px;border-radius:10px; }
 .detail-header-row { padding:0 18px;align-items:flex-start; }
 .detail-body { padding:20px 18px max(28px,env(safe-area-inset-bottom)); }
 .detail-title { overflow-wrap:anywhere; }
 .episode-guide-toolbar select { width:100%;max-width:100%;min-height:44px; }
 .season-toggle-btn { min-height:40px;max-width:115px;white-space:normal; }
 .ep-checkbox { min-width:36px;min-height:36px; }
 .episode-synopsis summary { padding:8px 0; }
 .pinned-row { gap:12px;scroll-padding-left:0; }
 .pinned-card { flex-basis:300px;max-width:92%;padding:16px; }
 .bulk-bar { gap:8px;padding:12px;flex-wrap:wrap; }
 .bulk-bar .icon-btn { min-height:42px; }
 .section-head { gap:12px;align-items:center; }
 #add-title-btn { flex-shrink:0;min-height:42px; }
 .admin-dialog { max-height:94dvh;width:calc(100% - 24px);padding:20px; }
 .admin-dialog form { flex-direction:column; }
 .admin-dialog input,.admin-dialog select,.admin-dialog button { min-height:44px; }
 .toast { max-width:calc(100vw - 32px);bottom:max(20px,env(safe-area-inset-bottom)); }
}
@media(max-width:520px) {
 input,textarea,select,.field input,.note-input,.search-bar input,#settings-drawer .field input { font-size:16px; }
 .grid,.skel-grid { gap:24px 12px; }
 .stub { min-width:0; }
 .stub .stub-actions { gap:7px; }
 .stub .stub-actions .icon-btn,.stub .pin-button { font-size:11px;min-height:38px;padding:8px 9px; }
 .stub .stars { gap:0;display:flex; }
 .stub .stars button.star { flex:1;min-width:0;min-height:36px;padding:4px 0;font-size:20px; }
 .note-editor summary { padding:11px 0;line-height:1.5; }
 .stub .ep-row { gap:8px;line-height:1.5; }
 .library-hero { min-height:265px;padding:30px 20px;margin-top:8px; }
 .library-hero h1 { font-size:32px;letter-spacing:-1px; }
 .library-hero p { line-height:1.6; }
 #stats-body .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #stats-body .stat-card { padding:18px 14px; }
 #stats-body .stat-num { font-size:28px; }
 #settings-drawer { width:calc(100% - 16px);max-width:calc(100% - 16px);border-radius:20px; }
 #settings-drawer .settings-nav button { min-height:42px; }
 #settings-drawer .settings-content { padding:18px 16px; }
 .share-row { flex-wrap:wrap; }
 .share-row input { flex:1;min-width:140px; }
 .detail-poster { width:88px; }
}
@media(max-width:350px) {
 #topnav .brand { font-size:10px;gap:5px; }
 #topnav .brand-mark { width:24px; }
 #topnav { padding-inline:10px; }
 #topnav .nav-right { gap:3px; }
 #topnav .nav-icon-btn,#topnav .avatar { width:38px;height:40px; }
 .section-head { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .icon-btn { transition:none; } }