.lxfinder-image {
    --image-ink: #261b36;
    --image-plum: #412557;
    --image-lime: #dcf88d;
    --image-line: #dcd2e6;
    --image-muted: #665973;
    margin-top: .8rem;
    color: var(--image-ink);
}
.lxfinder-image summary {
    display: inline-flex; align-items: center; gap: .7rem; cursor: pointer;
    min-height: 48px; padding: .42rem .8rem .42rem .45rem;
    border-radius: 14px; background: var(--image-plum); color: white;
    font-size: .9rem; font-weight: 750; line-height: 1.2; list-style: none;
    box-shadow: 0 4px 10px #261b3626;
}
.lxfinder-image summary::-webkit-details-marker { display: none; }
.lxfinder-image summary:hover, .lxfinder-image[open] summary { background: #2e1941; }
.lxfinder-image summary small { display: block; margin-top: .2rem; color: #e5d8ef; font-size: .68rem; font-weight: 500; }
.lxfinder-image-camera {
    display: grid; place-items: center; width: 36px; height: 36px; flex: none;
    border-radius: 10px; background: var(--image-lime); color: var(--image-ink);
}
.lxfinder-image-camera svg, .lxfinder-image-upload-icon svg { width: 21px; height: 21px; }
.lxfinder-image-chevron { margin-left: .2rem; font-size: 1.15rem; }
.lxfinder-image[open] .lxfinder-image-chevron { transform: rotate(180deg); }
.lxfinder-image form {
    margin-top: .8rem; padding: clamp(.8rem, 3vw, 1.4rem); border-radius: 18px;
    background: #fffcff; border: 1px solid var(--image-line);
    box-shadow: 0 8px 24px #28163710;
}
.lxfinder-image-heading h2 { margin: 0 0 .3rem; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.2; color: var(--image-ink); }
.lxfinder-image-heading p { margin: 0 0 .9rem; color: var(--image-muted); font-size: .86rem; line-height: 1.45; }
.lxfinder-image-upload { display: grid; gap: .65rem; }
.lxfinder-image-file {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .65rem;
    min-height: 76px; padding: .75rem; border: 1px dashed #9d80b1;
    border-radius: 14px; background: #f3eaf9; cursor: pointer;
}
.lxfinder-image-file:hover, .lxfinder-image-file[data-dragging=true] { background: #e9d8f6; border-color: var(--image-plum); }
.lxfinder-image-file[aria-disabled=true] { opacity: .68; cursor: default; }
.lxfinder-image-file input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: inherit;
}
.lxfinder-image-upload-icon {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border-radius: 11px; background: #e3d1f0; color: var(--image-plum);
}
.lxfinder-image-prompt { flex: 1 1 155px; display: grid; gap: .2rem; min-width: 0; }
.lxfinder-image-prompt strong { font-size: .88rem; }
.lxfinder-image-prompt > span, .lxfinder-image-selected small { color: var(--image-muted); font-size: .75rem; }
.lxfinder-image-file-cta {
    display: inline-flex; align-items: center; min-height: 38px; padding: .3rem .75rem;
    border-radius: 9px; background: var(--image-plum); color: white; font-size: .82rem; font-weight: 750;
}
.lxfinder-image-selected {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .7rem; align-items: center;
    padding: .55rem; border-radius: 12px; border: 1px solid var(--image-line); background: white;
}
.lxfinder-image-selected strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.lxfinder-image-preview { display: block; width: 56px; height: 56px; border-radius: 8px; background: #f2edf6; object-fit: contain; }
.lxfinder-image-privacy { margin: .7rem 0 .85rem; font-size: .75rem; color: var(--image-muted); line-height: 1.5; }
.lxfinder-image-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lxfinder-image button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 44px; padding: .4rem .85rem; border-radius: 10px; border: 0;
    font: inherit; font-size: .85rem; font-weight: 750; cursor: pointer;
}
.lxfinder-image .lxfinder-image-submit { background: var(--image-lime); color: #212e12; }
.lxfinder-image .lxfinder-image-submit:hover:not(:disabled) { background: #c6ee5b; }
.lxfinder-image button:disabled { cursor: default; }
.lxfinder-image .lxfinder-image-submit:disabled:not(:has(.lxfinder-image-spinner:not([hidden]))) { background: #ebe6ef; color: #685d72; }
.lxfinder-image .lxfinder-image-cancel, .lxfinder-image .lxfinder-image-remove { background: #f0e7f6; color: var(--image-ink); }
.lxfinder-image .lxfinder-image-remove { width: 44px; padding: 0; font-size: 1.2rem; }
.lxfinder-image .lxfinder-image-remove:disabled { opacity: .5; }
.lxfinder-image-status { margin: .75rem 0 .4rem; font-size: .81rem; line-height: 1.45; color: var(--image-muted); }
.lxfinder-image-status:empty { margin: 0; }
.lxfinder-image-status[data-kind=success] { color: #285b38; }
.lxfinder-image-status[data-kind=error] { color: #91283b; }
.lxfinder-image-status[data-kind=warning] { color: #7a4919; }
.lxfinder-image-progress { display: block; width: 100%; height: 7px; margin: .4rem 0; accent-color: var(--image-plum); }
.lxfinder-image-spinner {
    width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 2px solid #2633163d; border-top-color: #263316; animation: lxfinder-image-spin .8s linear infinite;
}
.lxfinder-image-skeleton, .lxfinder-image-results { display: grid; gap: .45rem; margin: .65rem 0 0; padding: 0; list-style: none; }
.lxfinder-image-skeleton > div {
    display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .7rem; align-items: center;
    padding: .6rem; background: #faf6fc; border: 1px solid #ebe3f1; border-radius: 12px;
}
.lxfinder-image-skeleton span { display: grid; gap: .35rem; }
.lxfinder-image-skeleton i, .lxfinder-image-skeleton b {
    display: block; border-radius: 8px; background: #e9e0ef;
    background-image: linear-gradient(100deg, transparent 25%, #fff8 50%, transparent 75%);
    background-size: 240% 100%; animation: lxfinder-image-shimmer 1.5s ease-in-out infinite;
}
.lxfinder-image-skeleton i { height: 42px; }
.lxfinder-image-skeleton b { width: 68%; height: 11px; }
.lxfinder-image-skeleton b:last-child { width: 38%; }
.lxfinder-image-results a {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .65rem .75rem; border: 1px solid var(--image-line); border-radius: 12px;
    background: #f8f1fc; color: var(--image-ink); overflow-wrap: anywhere; text-decoration: none;
}
.lxfinder-image-results a:hover { background: #eee1f7; }
.lxfinder-image-results a > span:first-child { display: grid; justify-items: start; gap: .25rem; }
.lxfinder-image-results small { background: #e7d7f2; color: #482866; border-radius: 5px; padding: .16rem .35rem; font-size: .7rem; font-weight: 750; }
.lxfinder-image-results strong { font-size: .88rem; }
.lxfinder-image-toast {
    position: fixed; z-index: 1200; inset-inline-end: max(16px, env(safe-area-inset-right)); inset-block-end: max(22px, env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 32px)); box-sizing: border-box; display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 44px; gap: .6rem; align-items: start;
    padding: .75rem; border-radius: 14px; background: #2d203b; color: white;
    box-shadow: 0 12px 34px #261b3640; animation: lxfinder-image-toast-in .2s ease-out;
}
.lxfinder-image-toast [data-image-toast-icon] { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #e8dbf5; color: #382248; font-weight: 800; }
.lxfinder-image-toast[data-kind=success] [data-image-toast-icon] { background: var(--image-lime); color: #253d15; }
.lxfinder-image-toast[data-kind=warning] [data-image-toast-icon] { background: #ffdf91; color: #572e09; }
.lxfinder-image-toast[data-kind=error] [data-image-toast-icon] { background: #ffc7d0; color: #75162d; }
.lxfinder-image-toast strong { display: block; margin-bottom: .2rem; font-size: .9rem; }
.lxfinder-image-toast p { margin: 0; color: #ede3f3; font-size: .77rem; line-height: 1.4; }
.lxfinder-image .lxfinder-image-toast button { width: 44px; padding: 0; background: #ffffff14; color: white; font-size: 1.2rem; }
.lxfinder-image :is(summary, button, a):focus-visible, .lxfinder-image-file:has(input:focus-visible) { outline: 2px solid #7f46a9; outline-offset: 3px; }
.lxfinder-image [hidden] { display: none !important; }
@media (max-width: 720px) {
    .lxfinder-image-toast { inset-block-end: calc(78px + env(safe-area-inset-bottom)); }
    .lxfinder-image-file-cta { margin-inline-start: 46px; }
    .lxfinder-image-actions .lxfinder-image-submit { flex: 1; }
}
@keyframes lxfinder-image-spin { to { transform: rotate(360deg); } }
@keyframes lxfinder-image-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes lxfinder-image-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .lxfinder-image-spinner, .lxfinder-image-skeleton i, .lxfinder-image-skeleton b, .lxfinder-image-toast { animation: none; }
}