.communication-media-library {
    --media-purple: #5b4bea;
    --media-ink: #172136;
    --media-muted: #91a0b5;
    --media-line: #dfe5ed;
    min-height: calc(100vh - 70px);
    margin: -20px;
    color: var(--media-ink);
    background: #f8fafc;
    font-size: 12px;
}
.communication-media-library * { box-sizing: border-box; }
.communication-media-library [hidden] { display: none !important; }
.communication-media-library button,
.communication-media-library input,
.communication-media-library select { font: inherit; }
.communication-media-library button { cursor: pointer; }
.communication-media-library a { color: inherit; text-decoration: none; }

.cmedia-header {
    min-height: 82px;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--media-line);
}
.cmedia-header h1 { margin: 0; color: #111a2c; font-size: 22px; font-weight: 790; letter-spacing: -.035em; }
.cmedia-header p { margin: 4px 0 0; color: #94a3b8; font-size: 11px; }
.cmedia-upload-button {
    min-height: 41px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(135deg, #6858f1, #503ddd);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(82, 63, 220, .22);
    font-size: 10px;
    font-weight: 750;
}
.cmedia-upload-button:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(82, 63, 220, .27); }
.cmedia-upload-button iconify-icon { font-size: 16px; }

.cmedia-layout { min-height: calc(100vh - 152px); display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.cmedia-sidebar { padding: 22px 17px 35px; background: #fff; border-right: 1px solid var(--media-line); }
.cmedia-storage { margin-bottom: 27px; padding: 16px; background: #eef1ff; border: 1px solid #dbe0ff; border-radius: 15px; }
.cmedia-storage > div { display: flex; justify-content: space-between; gap: 8px; color: #536176; font-size: 9px; }
.cmedia-storage b { color: #5546e4; }
.cmedia-storage > span { height: 7px; margin: 9px 0 8px; display: block; overflow: hidden; background: #d9e0ff; border-radius: 99px; }
.cmedia-storage > span i { height: 100%; display: block; background: linear-gradient(90deg, #7a6df5, #5544e5); border-radius: inherit; }
.cmedia-storage small { color: #8f9db1; font-size: 8px; }
.cmedia-side-section { margin-bottom: 24px; }
.cmedia-side-section > header { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.cmedia-side-section h2 { margin: 0; color: #718097; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cmedia-side-section > header button { width: 25px; height: 25px; display: grid; place-items: center; color: #8594a8; background: #f1f4f7; border: 0; border-radius: 8px; font-size: 15px; }
.cmedia-side-section > header button:hover { color: #5747df; background: #ecebff; }
.cmedia-folder-list, .cmedia-date-list { display: flex; flex-direction: column; gap: 3px; }
.cmedia-folder-list button {
    min-height: 37px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: #697890;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 10px;
    text-align: left;
}
.cmedia-folder-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmedia-folder-list button b { color: #9aa7b8; font-size: 8px; }
.cmedia-folder-list button iconify-icon { color: #f2b820; font-size: 16px; }
.cmedia-folder-list button:first-child iconify-icon { color: #6254e7; }
.cmedia-folder-list button:hover { background: #f7f9fb; }
.cmedia-folder-list button.is-active { color: #5545de; background: #eef0ff; border-color: #d8dcff; font-weight: 720; }
.cmedia-folder-list button.is-active b { padding: 2px 6px; color: #5545de; background: #d8dcff; border-radius: 99px; }
.cmedia-type-list { display: flex; flex-direction: column; gap: 2px; }
.cmedia-type-list label { min-height: 34px; padding: 0 9px; display: grid; grid-template-columns: 15px 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #65738a; border-radius: 9px; font-size: 10px; cursor: pointer; }
.cmedia-type-list label:hover { background: #f7f9fb; }
.cmedia-type-list input { width: 13px; height: 13px; accent-color: #6253e9; }
.cmedia-type-list iconify-icon { color: #31aade; font-size: 15px; }
.cmedia-type-list label:nth-child(2) iconify-icon { color: #a75ce2; }
.cmedia-type-list label:nth-child(3) iconify-icon { color: #ef5c6a; }
.cmedia-type-list label:nth-child(4) iconify-icon { color: #28ba8b; }
.cmedia-type-list b { color: #9aa7b8; font-size: 8px; }
.cmedia-date-list button { min-height: 35px; padding: 0 10px; color: #708097; background: transparent; border: 1px solid transparent; border-radius: 9px; font-size: 10px; text-align: left; }
.cmedia-date-list button:hover { background: #f7f9fb; }
.cmedia-date-list button.is-active { color: #5747df; background: #eef0ff; border-color: #dce0ff; font-weight: 700; }
.cmedia-tags-filter { display: flex; flex-wrap: wrap; gap: 5px; }
.cmedia-tags-filter button { min-height: 24px; padding: 0 9px; color: #617087; background: #f0f3f7; border: 0; border-radius: 99px; font-size: 8px; font-weight: 650; }
.cmedia-tags-filter button:hover, .cmedia-tags-filter button.is-active { color: #5545de; background: #e8e8ff; }

.cmedia-main { min-width: 0; padding: 0 22px 40px; }
.cmedia-toolbar {
    min-height: 75px;
    margin: 0 -22px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--media-line);
}
.cmedia-search {
    max-width: 430px;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    color: #93a2b6;
    background: #f8fafc;
    border: 1px solid #dfe5ed;
    border-radius: 11px;
}
.cmedia-search:focus-within { background: #fff; border-color: #a9a1f3; box-shadow: 0 0 0 3px rgba(89, 72, 235, .07); }
.cmedia-search input { min-width: 0; flex: 1; color: #48566b; background: transparent; border: 0; outline: 0; font-size: 10px; }
.cmedia-search iconify-icon { font-size: 17px; }
.cmedia-sort { height: 40px; }
.cmedia-sort select { height: 100%; padding: 0 31px 0 12px; color: #5f6e84; background: #fff; border: 1px solid #dfe5ed; border-radius: 11px; outline: 0; font-size: 9px; }
.cmedia-view-switch { height: 42px; padding: 3px; display: flex; background: #eef2f6; border-radius: 10px; }
.cmedia-view-switch button { width: 32px; display: grid; place-items: center; color: #8796aa; background: transparent; border: 0; border-radius: 8px; font-size: 16px; }
.cmedia-view-switch button.is-active { color: #5a4ae4; background: #fff; box-shadow: 0 1px 4px rgba(25, 35, 52, .11); }
.cmedia-visible-count { margin-left: auto; color: #8e9caf; font-size: 9px; white-space: nowrap; }
.cmedia-select-all { min-height: 36px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; color: #68778d; background: #f1f4f7; border: 0; border-radius: 10px; font-size: 9px; font-weight: 680; white-space: nowrap; }

.cmedia-dropzone {
    min-height: 83px;
    margin: 22px 0 16px;
    padding: 12px 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f4f6ff;
    border: 2px dashed #cbd3ff;
    border-radius: 14px;
    transition: background .18s, border-color .18s;
}
.cmedia-dropzone.is-dragging { background: #e9ecff; border-color: #6a5bea; }
.cmedia-dropzone > i { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; color: #6152e8; background: #e2e6ff; border-radius: 12px; font-size: 22px; font-style: normal; }
.cmedia-dropzone > div:not(.cmedia-upload-progress) { min-width: 0; flex: 1; }
.cmedia-dropzone strong { display: block; color: #445168; font-size: 10px; }
.cmedia-dropzone strong button { padding: 0; color: #5747df; background: transparent; border: 0; font-weight: 760; }
.cmedia-dropzone span { display: block; margin-top: 4px; color: #93a1b5; font-size: 8px; }
.cmedia-browse { min-height: 34px; padding: 0 13px; color: #5747df; background: #fff; border: 1px solid #cbd2fb; border-radius: 9px; font-size: 9px; font-weight: 720; }
.cmedia-upload-progress { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(244, 246, 255, .96); border-radius: 12px; }
.cmedia-upload-progress i { width: 140px; height: 5px; position: relative; overflow: hidden; background: #dce1f8; border-radius: 99px; }
.cmedia-upload-progress i::after { content: ""; width: 45%; position: absolute; inset-block: 0; left: -45%; background: #5c4ce8; border-radius: inherit; animation: cmedia-progress 1s infinite ease-in-out; }
.cmedia-upload-progress span { color: #5a4ae5; font-weight: 700; }
@keyframes cmedia-progress { to { left: 100%; } }

.cmedia-group { margin-top: 17px; }
.cmedia-group > h2 { margin: 0 0 12px; padding-bottom: 8px; color: #66758a; border-bottom: 1px solid #edf0f4; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.cmedia-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 13px; }
.cmedia-card {
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe5ed;
    border-radius: 13px;
    box-shadow: 0 2px 5px rgba(24, 34, 50, .04);
    transition: transform .17s, box-shadow .17s;
}
.cmedia-card:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(24, 34, 50, .1); }
.cmedia-card.is-checked { outline: 2px solid #6354eb; outline-offset: 1px; }
.cmedia-extension { padding: 4px 7px; position: absolute; z-index: 2; top: 8px; left: 8px; color: #fff; background: #18aadd; border-radius: 7px; font-size: 8px; font-weight: 800; }
.cmedia-card.is-video .cmedia-extension { background: #9d50d5; }
.cmedia-card.is-document .cmedia-extension { background: #ed4f5a; }
.cmedia-card.is-vector .cmedia-extension { background: #13b87e; }
.cmedia-card-select { position: absolute; z-index: 3; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; }
.cmedia-card:hover .cmedia-card-select, .cmedia-card.is-checked .cmedia-card-select { opacity: 1; }
.cmedia-card-select input { width: 16px; height: 16px; accent-color: #5d4be8; }
.cmedia-preview { height: 150px; position: relative; display: block; overflow: hidden; background: #edf2f6; }
.cmedia-preview img, .cmedia-preview video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .22s; }
.cmedia-card:hover .cmedia-preview img { transform: scale(1.025); }
.cmedia-file-icon { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #ee5d68; background: #fff2ef; font-size: 43px; font-style: normal; }
.cmedia-file-icon span { color: #6b788c; font-size: 9px; font-weight: 700; }
.cmedia-card.is-vector .cmedia-file-icon { color: #19a976; background: #f5fbf9; }
.cmedia-card.is-other .cmedia-file-icon { color: #6aa0e5; background: #eff7ff; }
.cmedia-play { width: 42px; height: 42px; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .25); border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(4px); font-style: normal; }
.cmedia-preview time { position: absolute; bottom: 7px; left: 8px; color: #fff; font-size: 8px; text-shadow: 0 1px 3px #000; }
.cmedia-card-body { padding: 10px 11px 9px; }
.cmedia-filename { display: block; overflow: hidden; color: #354157 !important; font-size: 9px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.cmedia-card-tags { min-height: 22px; margin-top: 6px; display: flex; gap: 4px; overflow: hidden; }
.cmedia-card-tags span { padding: 3px 6px; color: #5c4de0; background: #eeefff; border-radius: 5px; font-size: 7px; white-space: nowrap; }
.cmedia-card-tags span:nth-child(2n) { color: #67768b; background: #edf1f5; }
.cmedia-card-body footer { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #95a2b5; font-size: 7px; }
.cmedia-card-body footer span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmedia-card-body footer span:first-child iconify-icon { color: #f0b620; }
.cmedia-card-actions { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: flex; gap: 5px; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.cmedia-card:hover .cmedia-card-actions { opacity: 1; transform: none; }
.cmedia-card-actions a { width: 25px; height: 25px; display: grid; place-items: center; color: #5b4be5; background: #fff; border: 1px solid #e0e4eb; border-radius: 7px; box-shadow: 0 2px 6px rgba(20, 30, 45, .1); font-size: 13px; }

.cmedia-grid.is-list { grid-template-columns: 1fr; gap: 7px; }
.cmedia-grid.is-list .cmedia-card { min-height: 66px; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; }
.cmedia-grid.is-list .cmedia-preview { width: 80px; height: 64px; grid-row: 1; }
.cmedia-grid.is-list .cmedia-card-body { padding: 9px 14px; }
.cmedia-grid.is-list .cmedia-card-tags { min-height: auto; }
.cmedia-grid.is-list .cmedia-card-body footer { justify-content: flex-start; gap: 20px; }
.cmedia-grid.is-list .cmedia-extension { top: 5px; left: 5px; }
.cmedia-grid.is-list .cmedia-card-select { position: static; margin-right: 14px; opacity: 1; grid-column: 3; grid-row: 1; }
.cmedia-grid.is-list .cmedia-card-actions { right: 42px; bottom: 20px; opacity: 1; transform: none; }
.cmedia-empty { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #99a6b8; text-align: center; }
.cmedia-empty iconify-icon { margin-bottom: 9px; font-size: 39px; }
.cmedia-empty strong { color: #627086; font-size: 11px; }
.cmedia-empty span { margin-top: 4px; font-size: 9px; }

.cmedia-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .48); }
.cmedia-modal > form { width: min(420px, 100%); padding: 20px; background: #fff; border-radius: 15px; box-shadow: 0 25px 70px rgba(15, 23, 42, .23); }
.cmedia-modal form > header { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.cmedia-modal h2 { margin: 0; font-size: 16px; }
.cmedia-modal header button { width: 29px; height: 29px; display: grid; place-items: center; color: #8795a8; background: #f2f4f7; border: 0; border-radius: 8px; font-size: 17px; }
.cmedia-modal label { margin-bottom: 13px; display: block; color: #526075; font-size: 9px; font-weight: 700; }
.cmedia-modal input, .cmedia-modal select { width: 100%; height: 41px; margin-top: 6px; padding: 0 11px; color: #445269; background: #f8fafc; border: 1px solid #dfe5ed; border-radius: 9px; outline: 0; font-size: 10px; font-weight: 400; }
.cmedia-modal input:focus, .cmedia-modal select:focus { background: #fff; border-color: #9f96f1; }
.cmedia-modal form > footer { margin-top: 17px; display: flex; justify-content: flex-end; gap: 7px; }
.cmedia-modal footer button { min-height: 35px; padding: 0 13px; color: #66758a; background: #f0f3f6; border: 0; border-radius: 8px; font-size: 9px; font-weight: 700; }
.cmedia-modal footer button[type="submit"] { color: #fff; background: #5948e5; }

@media (max-width: 1450px) {
    .cmedia-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
}
@media (max-width: 1150px) {
    .cmedia-layout { grid-template-columns: 205px minmax(0, 1fr); }
    .cmedia-grid { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
    .cmedia-visible-count { display: none; }
}
@media (max-width: 850px) {
    .cmedia-layout { display: block; }
    .cmedia-sidebar { padding: 14px; border-right: 0; border-bottom: 1px solid var(--media-line); }
    .cmedia-storage { margin-bottom: 14px; }
    .cmedia-side-section { margin-bottom: 12px; }
    .cmedia-folder-list, .cmedia-date-list, .cmedia-type-list { flex-direction: row; overflow-x: auto; }
    .cmedia-folder-list button, .cmedia-date-list button { min-width: max-content; }
    .cmedia-type-list label { min-width: max-content; grid-template-columns: 15px 18px auto auto; }
    .cmedia-tags-filter { flex-wrap: nowrap; overflow-x: auto; }
}
@media (max-width: 650px) {
    .communication-media-library { margin: -12px; }
    .cmedia-header { padding: 15px; align-items: flex-start; flex-direction: column; }
    .cmedia-upload-button { width: 100%; justify-content: center; }
    .cmedia-main { padding-inline: 12px; }
    .cmedia-toolbar { min-height: 130px; margin-inline: -12px; padding: 12px; flex-wrap: wrap; }
    .cmedia-search { max-width: none; flex-basis: 100%; }
    .cmedia-visible-count { display: block; margin-left: 0; }
    .cmedia-select-all { margin-left: auto; }
    .cmedia-dropzone { padding: 17px; align-items: flex-start; flex-wrap: wrap; }
    .cmedia-dropzone > div:not(.cmedia-upload-progress) { flex-basis: calc(100% - 60px); }
    .cmedia-browse { width: 100%; }
    .cmedia-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 9px; }
    .cmedia-preview { height: 125px; }
}
@media (max-width: 420px) {
    .cmedia-grid { grid-template-columns: 1fr; }
    .cmedia-preview { height: 190px; }
}