:root { color-scheme: dark; }
.media-page { min-height: 100vh; padding: 114px 34px 34px; box-sizing: border-box; color: #f6f4ef; background: radial-gradient(circle at top right, rgba(255,107,53,.13), transparent 35%), #202226; }
.media-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.media-heading h1 { margin: 4px 0 8px; font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.04em; }
.media-heading p { max-width: 680px; margin: 0; color: #b8bcc4; }
.media-kicker { color: #ff8a5c !important; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.primary-button,.secondary-button,.media-toolbar button,.dialog-actions button,.media-selection button { min-height: 44px; border: 0; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.primary-button { color: #17181a; background: #ff7a45; box-shadow: 0 10px 25px rgba(255,107,53,.2); }
.secondary-button,.media-toolbar button,.media-selection button { color: #f6f4ef; background: #363940; }
button:focus-visible,input:focus-visible,select:focus-visible { outline: 3px solid #ff9b73; outline-offset: 2px; }
.quota-card { margin-bottom: 22px; padding: 18px; border: 1px solid #41444b; border-radius: 18px; background: rgba(46,48,53,.86); }
.quota-copy { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #d9dce1; }
.quota-track { height: 12px; overflow: hidden; border-radius: 99px; background: #17191c; }
.quota-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #48b985; transition: width .25s ease; }
.quota-card.warning .quota-track span { background: #e4a72d; }.quota-card.critical .quota-track span,.quota-card.full .quota-track span { background: #ef5b5b; }
.quota-warning { min-height: 1.2em; margin: 9px 0 0; color: #f3c16e; font-size: .9rem; }
.media-toolbar { display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap: 12px; align-items: end; margin-bottom: 18px; }
.search-control { grid-column: span 2; }
.media-toolbar label,.media-dialog label { display: grid; gap: 7px; color: #bfc3ca; font-size: .78rem; font-weight: 750; }
.media-toolbar input,.media-toolbar select,.media-dialog input,.media-dialog select { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid #4a4d54; border-radius: 11px; padding: 9px 11px; color: #fff; background: #292c31; font: inherit; }
.view-buttons { display: flex; gap: 6px; }.view-buttons button[aria-pressed="true"] { color: #17181a; background: #ff7a45; }
.status-message { min-height: 24px; color: #bfc3ca; }.status-message.error { color: #ff8d8d; }
.media-results { display: grid; gap: 14px; }.media-results.grid-view { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); }.media-results.list-view { grid-template-columns: 1fr; }
.media-card { position: relative; overflow: hidden; border: 1px solid #3d4047; border-radius: 16px; background: #2a2d32; transition: border-color .18s ease, transform .18s ease; }.media-card:hover { border-color: #686b72; transform: translateY(-2px); }
.media-card-main { width: 100%; color: inherit; background: transparent; }
.media-card-open { display: block; width: 100%; border: 0; padding: 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.media-preview { display: grid; place-items: center; aspect-ratio: 16/11; overflow: hidden; color: #9da1a9; background: linear-gradient(135deg,#191b1f,#32353b); }.media-preview img,.media-preview video { width: 100%; height: 100%; object-fit: cover; }.media-preview audio { width: calc(100% - 22px); }
.media-card-copy { padding: 14px; }.media-card-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.media-card-copy span { color: #aeb2ba; font-size: .82rem; }
.media-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }.media-card-button { min-height: 38px; box-sizing: border-box; border: 0; border-radius: 9px; padding: 8px 10px; color: #f6f4ef !important; background: #3a3d43; font: inherit; font-size: .78rem !important; font-weight: 750; text-decoration: none; cursor: pointer; }
.media-card-check { position: absolute; z-index: 2; top: 10px; left: 10px; width: 22px; height: 22px; accent-color: #ff7a45; }
.list-view .media-card { display: flex; }.list-view .media-card-check { position: static; align-self: center; margin: 14px 0 14px 14px; }.list-view .media-card-main { display: grid; grid-template-columns: 150px 1fr; }.list-view .media-card-open { align-self: stretch; }.list-view .media-preview { aspect-ratio: 4/3; }
.media-selection { position: sticky; z-index: 4; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 12px 15px; border-radius: 13px; background: #41444b; box-shadow: 0 10px 30px rgba(0,0,0,.25); }.media-selection[hidden] { display: none; }
.load-more { display: block; margin: 22px auto 0; }.load-more[hidden] { display: none; }
.media-dialog { width: min(680px,calc(100vw - 28px)); max-height: calc(100vh - 28px); box-sizing: border-box; overflow: auto; border: 1px solid #50535a; border-radius: 20px; padding: 22px; color: #f7f5f1; background: #25282d; box-shadow: 0 25px 90px rgba(0,0,0,.55); }.media-dialog::backdrop { background: rgba(5,6,8,.75); backdrop-filter: blur(5px); }
.media-dialog form { display: grid; gap: 18px; }.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.dialog-heading h2 { margin: 0; }.icon-button { width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: #3b3e44; font-size: 1.6rem; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }.detail-preview { display: grid; place-items: center; min-height: 240px; margin: 18px 0; overflow: hidden; border-radius: 14px; background: #17191c; }.detail-preview img,.detail-preview video { max-width: 100%; max-height: 420px; }.detail-preview audio { width: calc(100% - 30px); }
.detail-metadata { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }.detail-metadata dt { color: #9fa4ad; }.detail-metadata dd { margin: 0; overflow-wrap: anywhere; }.usage-list { padding-left: 20px; color: #c8cbd1; }
.empty-state { grid-column: 1/-1; padding: 60px 20px; border: 1px dashed #484b52; border-radius: 18px; text-align: center; color: #aeb2ba; }
@media (max-width: 1050px) { .media-toolbar { grid-template-columns: repeat(3,1fr); }.search-control { grid-column: span 2; } }
@media (max-width: 768px) { .media-library-page .dashboard-layout { display: block; }.media-page { padding-top: 24px; } }
@media (max-width: 700px) { .media-page { padding: 22px 15px 90px; }.media-heading { align-items: stretch; flex-direction: column; }.media-toolbar { grid-template-columns: 1fr 1fr; }.search-control { grid-column: 1/-1; }.view-buttons { justify-content: end; }.media-results.grid-view { grid-template-columns: repeat(2,minmax(0,1fr)); }.list-view .media-card-main { grid-template-columns: 100px 1fr; }.quota-copy { flex-direction: column; gap: 4px; }.dialog-actions > * { flex: 1 1 auto; } }
@media (max-width: 430px) { .media-results.grid-view { grid-template-columns: 1fr; }.media-toolbar { grid-template-columns: 1fr; }.search-control { grid-column: auto; } }
@media (max-width: 768px) { .media-library-page .main-header { box-sizing: border-box; max-width: 100%; padding-left: 16px; padding-right: 16px; } }