.media-library { --media-border: #38393a; position: fixed; z-index: 100; inset: auto; box-sizing: border-box; width: 640px; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; color: #f7f7f7; background: #1d1e1f; border: 1px solid #303132; border-radius: 23px; box-shadow: 0 12px 35px #0005, 0 0 0 4px #18191ac9; font-family: Inter, sans-serif; container: media-library / inline-size; }
.media-library[open] { display: flex; flex-direction: column; animation: media-library-open 140ms ease-out; }
@keyframes media-library-open { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.media-library *, .media-library *::before, .media-library *::after { box-sizing: border-box; }
.media-library button, .media-library input, .media-library select { font: inherit; }
.media-library button { cursor: pointer; }
.media-library button:disabled { cursor: default; }
.media-library button:focus-visible, .media-library input:focus-visible, .media-library select:focus-visible, .media-library-panel:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.media-library svg { width: 21px; height: 21px; flex-shrink: 0; }
.media-library-header { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 13px; }
.media-library-tabs { display: flex; align-items: center; gap: 5px; min-width: 0; }
.media-library-tabs button { padding: 10px 14px; border: 0; border-radius: 999px; color: #9b9c9e; background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.media-library-tabs button[aria-selected="true"] { color: #131415; background: #fff; }
.media-library-tabs button:hover:not([aria-selected="true"]) { background: #292a2b; color: #fff; }
.media-library-close { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: #292a2b; color: #ededed; }
.media-library-close:hover { background: #38393a; }
.media-library-body { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0 5px 5px; border: 1px solid #2c2d2e; border-radius: 23px 23px 18px 18px; background: #262728; overflow: hidden; }
.media-library-toolbar { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px; border-bottom: 1px solid #1b1c1d; }
.media-library-recency { display: flex; gap: 5px; }
.media-library-recency button { padding: 10px 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #9b9c9e; font-size: 13px; font-weight: 500; }
.media-library-recency button[aria-pressed="true"] { border-color: #414243; background: #303132; color: #fff; }
.media-library-link-import { display: flex; align-items: center; flex: 1; min-width: 145px; max-width: 285px; margin-left: auto; padding: 0 3px 0 10px; border: 1px solid #424344; border-radius: 10px; background: #202122; }
.media-library-link-import[hidden] { display: none; }
.media-library-link-import input { width: 100%; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: #f7f7f7; font-size: 11px; outline-offset: 0; }
.media-library-link-import input::placeholder { color: #a1a2a4; }
.media-library-link-import button { display: grid; flex-shrink: 0; place-items: center; width: 31px; height: 31px; padding: 6px; border: 0; border-radius: 7px; background: #fff; color: #18191a; }
.media-library-link-import button:disabled { background: #343536; color: #88898b; }
.media-library-link-import svg { width: 17px; height: 17px; }
.media-library-download { display: flex; align-items: center; flex-shrink: 0; flex-wrap: wrap; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #3a3b3c; color: #d7d8d9; font-size: 11px; }
.media-library-download[hidden] { display: none; }
.media-library-download progress { width: 90px; max-width: 100%; height: 5px; margin-left: auto; accent-color: #fff; }
.media-library-download button { padding: 5px 8px; border: 1px solid #555; border-radius: 6px; background: transparent; color: #ddd; font-size: 10px; }
.media-library-type select, .media-library-sort select { max-width: 130px; padding: 7px 0; border: 0; background: #262728; color: #b1b2b4; font-size: 12px; cursor: pointer; }
.media-library-sort { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.media-library-sort svg { width: 18px; height: 18px; color: #919295; }
.media-library-panel { flex: 1; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #505152 transparent; scrollbar-width: thin; }
.media-library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,130px),1fr)); gap: 14px; align-content: start; }
.media-library-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 100%; aspect-ratio: 1; padding: 12px; border: 1px dashed #505152; border-radius: 16px; background: #303132; color: #fff; }
.media-library-upload:hover { border-color: #aaa; background: #38393a; }
.media-library-upload-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #626365; border-radius: 50%; background: radial-gradient(circle at 50% 35%,#555658,#333436); box-shadow: inset 0 1px 4px #ffffff16,0 3px 12px #0002; }
.media-library-upload-icon svg { width: 26px; height: 26px; }
.media-library-upload strong { font-size: 13px; font-weight: 500; }
.media-library-upload-hint { margin-top: -8px; color: #a4a5a7; font-size: 10px; }
.media-library-item { position: relative; min-width: 0; }
.media-library-choose { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 16px; background: #303132; color: #fff; }
.media-library-choose:hover { border-color: #777; }
.media-library-item.is-selected .media-library-choose { border-color: #fff; }
.media-library-choose[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; width: 28px; height: 28px; margin: auto; border: 3px solid #ffffff55; border-top-color: #fff; border-radius: 50%; background: #222b; box-shadow: 0 0 0 8px #222b; animation: media-library-import 800ms linear infinite; }
@keyframes media-library-import { to { transform: rotate(360deg); } }
.media-library-preview { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.media-library-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 50%,#0002); pointer-events: none; }
.media-library-play svg { width: 31px; height: 31px; fill: #fff; stroke-width: 0; filter: drop-shadow(0 1px 4px #0005); }
.media-library-duration { position: absolute; bottom: 9px; right: 9px; padding: 4px 6px; border-radius: 5px; background: #0009; color: #fff; font-size: 10px; }
.media-library-check { position: absolute; top: 10px; left: 10px; display: none; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; color: #171819; }
.media-library-check svg { width: 17px; height: 17px; stroke-width: 2; }
.media-library-item.is-selected .media-library-check { display: grid; }
.media-library-favorite { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 29px; height: 29px; padding: 6px; border: 1px solid #ffffff30; border-radius: 50%; background: #1516179e; color: #fff; opacity: 0; }
.media-library-favorite svg { width: 15px; height: 15px; }
.media-library-item:hover .media-library-favorite, .media-library-item:focus-within .media-library-favorite, .media-library-favorite[aria-pressed="true"] { opacity: 1; }
.media-library-favorite[aria-pressed="true"] svg { fill: currentColor; }
.media-library-caption { display: flex; flex-direction: column; gap: 5px; padding: 9px 2px 0; }
.media-library-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #dfdfe0; }
.media-library-source { color: #969799; font-size: 10px; }
.media-library-unavailable { display: grid; position: absolute; inset: 0; justify-items: center; align-content: center; gap: 10px; padding: 12px; color: #a5a6a8; font-size: 11px; }
.media-library-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 25px 8px 15px; text-align: center; }
.media-library-empty[hidden], .media-library-error[hidden], .media-library-type[hidden] { display: none; }
.media-library-empty > svg { width: 30px; height: 30px; margin-bottom: 4px; color: #858688; }
.media-library-empty strong { font-size: 14px; font-weight: 500; }
.media-library-empty p { max-width: 365px; margin: 0; color: #a2a3a5; font-size: 12px; line-height: 1.6; }
.media-library-retry, .media-library-more { padding: 9px 15px; border: 1px solid #555; border-radius: 999px; background: #353637; color: #fff; font-size: 12px; }
.media-library-more { grid-column: 1/-1; justify-self: center; }
.media-library-error { flex-shrink: 0; margin: 0; padding: 10px 23px; border-top: 1px solid #655047; color: #ffd0ba; background: #302723; font-size: 12px; line-height: 1.5; }
@media (hover: none) { .media-library-favorite { opacity: 1; } }
@container media-library (max-width: 480px) { .media-library-header { padding: 11px 8px; gap: 3px; } .media-library-tabs { flex: 1; justify-content: space-between; gap: 0; } .media-library-tabs button { padding: 10px 8px; font-size: 10px; } .media-library-close { width: 30px; height: 30px; } }
@media (max-width: 760px) { .media-library { width: calc(100vw - 28px); height: min(650px,calc(100dvh - 36px)); border-radius: 23px; } .media-library-header { padding: 13px; gap: 5px; } .media-library-tabs { gap: 0; } .media-library-tabs button { padding: 10px 12px; font-size: 12px; } .media-library-close { width: 36px; height: 36px; } .media-library-toolbar { flex-wrap: wrap; gap: 10px; padding: 11px 14px; } .media-library-sort { margin-left: auto; } .media-library-type select, .media-library-sort select { font-size: 11px; } .media-library-panel { padding: 15px; } .media-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .media-library-upload-icon { width: 46px; height: 46px; } .media-library-upload { gap: 11px; } .media-library-upload strong { font-size: 11px; } .media-library-upload-hint { font-size: 9px; } }
@media (max-width: 480px) { .media-library { width: calc(100vw - 20px); height: calc(100dvh - 36px); border-radius: 20px; } .media-library-header { padding: 11px 8px; gap: 3px; } .media-library-tabs { flex: 1; justify-content: space-between; } .media-library-tabs button { padding: 10px 8px; font-size: 10px; } .media-library-close { width: 30px; height: 30px; } .media-library-close svg { width: 17px; height: 17px; } .media-library-body { margin-inline: 4px; border-radius: 17px 17px 14px 14px; } .media-library-recency button { padding: 8px 11px; font-size: 11px; } .media-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; } .media-library-panel { padding: 14px; } .media-library-upload strong { font-size: 12px; } .media-library-upload-icon { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .media-library *, .media-library *::before, .media-library *::after { scroll-behavior: auto; transition: none; animation: none; } }

@media (max-width:480px) { .media-library-link-import { order:3; flex-basis:100%; max-width:none; margin-left:0; } .media-library-link-import input { font-size:16px; } .media-library-link-import input::placeholder { font-size:11px; } }