.aloe-client-library { width: min(880px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 22px; color: #17211d; background: #fbfcfa; box-shadow: 0 28px 90px rgb(15 35 27 / 28%); }
.aloe-client-library::backdrop { background: rgb(10 24 19 / 58%); backdrop-filter: blur(5px); }
.aloe-client-library__panel { padding: 22px; }
.aloe-client-library__panel > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.aloe-client-library__panel > header div { display: grid; gap: 3px; }
.aloe-client-library__panel > header span { color: #64736c; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aloe-client-library__panel > header strong { font-size: clamp(1.15rem, 2vw, 1.55rem); }
.aloe-client-library__panel > header button { width: 42px; height: 42px; border: 1px solid #d9e1dc; border-radius: 50%; background: #fff; color: #26352e; font-size: 1.5rem; cursor: pointer; }
.aloe-client-library__status { margin: 0 0 16px; color: #607068; }
.aloe-client-library__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; max-height: min(570px, calc(100vh - 190px)); overflow: auto; }
.aloe-client-library__item { display: grid; gap: 9px; min-width: 0; padding: 9px; border: 1px solid #dce5df; border-radius: 16px; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.aloe-client-library__item:hover, .aloe-client-library__item:focus-visible { border-color: #2f7d5b; outline: 0; transform: translateY(-2px); box-shadow: 0 10px 26px rgb(28 70 51 / 13%); }
.aloe-client-library__item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 11px; background: #f2f5f3; }
.aloe-client-library__item span { display: grid; min-width: 0; gap: 2px; }
.aloe-client-library__item strong { overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.aloe-client-library__item small { color: #718078; font-size: .7rem; }
@media (max-width: 560px) { .aloe-client-library { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; } .aloe-client-library__panel { padding: 16px; } .aloe-client-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
