.art-center { transform: translate(var(--art-x, 0px), var(--art-y, 0px)) rotate(-8deg); transition: transform .25s ease-out; }
.file-item { display: flex; align-items: center; transition: background-color .2s ease; }
.file-item + .file-item { border-top: 1px solid #edf2ed; }
.file-item:hover { background: #f8fbf8; }
.file-item .file-row { flex: 1; min-width: 0; }
.copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 42px;
    min-width: 112px;
    margin: 0 20px 0 0;
    padding: 0 14px;
    border: 1px solid #d5e5d8;
    border-radius: 10px;
    background: #f4f9f4;
    color: #416e53;
    font: 600 12px "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.copy-button:hover { border-color: #9dbda5; background: #e7f2e8; color: #254e38; }
.copy-button:active { transform: scale(.97); }
.copy-button:focus-visible { outline: 3px solid #82ab88; outline-offset: 4px; }
.copy-button.is-copied { border-color: #315d4b; background: #315d4b; color: #fff; }
.copy-icon { position: relative; display: block; width: 15px; height: 15px; flex: 0 0 15px; }
.copy-icon::before, .copy-icon::after { position: absolute; width: 9px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; content: ""; }
.copy-icon::before { top: 0; left: 0; opacity: .6; }
.copy-icon::after { top: 4px; left: 4px; background: #f4f9f4; }
.copy-button:hover .copy-icon::after { background: #e7f2e8; }
.copy-button.is-copied .copy-icon::before { display: none; }
.copy-button.is-copied .copy-icon::after { top: 2px; left: 3px; width: 8px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; border-radius: 0; background: transparent; transform: rotate(-45deg); }
.copy-status { min-height: 1.5em; margin: 8px 0 0; color: #527163; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    .art-center, .file-item, .copy-button { transition: none; }
}
@media (max-width: 680px) {
    .copy-button { margin-right: 10px; }
}
@media (max-width: 400px) {
    .copy-button { min-width: 42px; padding: 0; }
    .copy-label { display: none; }
    .file-type, .file-arrow { display: none; }
}