.ham-file-card, .ham-file-card *, .ham-image-toolbar, .ham-image-toolbar * { box-sizing: border-box; }
.ham-file-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    width: 260px; max-width: 100%; min-width: 0; padding: 10px;
    border: 1px solid #dce1e9; border-radius: 10px; background: #fff; color: #263247;
    font: inherit; text-align: center;
}
.ham-file-card__thumbnail {
    display: flex; align-items: center; justify-content: center; height: 160px;
    width: 100%; min-width: 0; overflow: hidden; background: #f5f7fa; border-radius: 6px;
}
.ham-file-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; }
.ham-file-actions .ham-file-action, .ham-file-toolbar .ham-file-action {
    appearance: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px !important; max-width: 100%; min-width: 30px; height: 38px !important;
    margin: 0 !important; padding: 0 !important; border: 1px solid var(--ham-action-border, #dce3ed);
    border-radius: 10px !important; background: var(--ham-action-bg, #f1f5f9); color: var(--ham-action-color, #475569);
    box-shadow: none; font: inherit; font-size: 13px; line-height: 1.5; text-decoration: none; cursor: pointer;
}
.ham-file-actions .ham-file-action { width: 30px !important; height: 32px !important; border-radius: 8px !important; }
.ham-file-actions .ham-file-action--label { width: auto !important; height: 38px !important; gap: 6px; padding: 6px 10px !important; }
.ham-file-toolbar .ham-file-action--label { width: auto !important; gap: 8px; padding: 6px 12px !important; }
.ham-file-action svg { display: block; width: 19px; height: 19px; flex: 0 0 19px; }
.ham-file-action--download { --ham-action-color: #087f5b; --ham-action-bg: #e9f8f1; --ham-action-border: #bce7d2; }
.ham-file-action--preview { --ham-action-color: #215ac5; --ham-action-bg: #edf3ff; --ham-action-border: #c8d9ff; }
.ham-file-action--zoom-in { --ham-action-color: #087e96; --ham-action-bg: #e8f8fc; --ham-action-border: #bae4ef; }
.ham-file-action--zoom-out { --ham-action-color: #946200; --ham-action-bg: #fff7df; --ham-action-border: #efdda2; }
.ham-file-action--rotate { --ham-action-color: #7044b3; --ham-action-bg: #f3edff; --ham-action-border: #decef8; }
.ham-file-action--reset { --ham-action-color: #526278; --ham-action-bg: #f0f3f7; --ham-action-border: #d6dfe9; }
.ham-file-action--magnifier { --ham-action-color: #ad3d70; --ham-action-bg: #fff0f6; --ham-action-border: #f2cadc; }
.ham-file-actions .ham-file-action:hover, .ham-file-toolbar .ham-file-action:hover { filter: brightness(.96); border-color: currentColor; color: var(--ham-action-color, #475569); }
.ham-file-action:focus-visible { outline: 3px solid #9bc2ff; outline-offset: 2px; }
.ham-file-action:disabled { opacity: .45; cursor: default; }
.ham-file-action[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
/* Legacy Admin sets an important border on this host; only the shared card owns its outline. */
.show-script:has(> .ham-file-card) { display: block; width: 260px; max-width: 100%; padding: 0; border: 0 !important; box-shadow: none; }
.ham-image-toolbar { display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; gap: 6px; direction: rtl; min-width: 0; }
.ham-image-toolbar output { min-width: 48px; color: #44556f; font: inherit; font-size: 13px; text-align: center; direction: ltr; }
.ham-image-viewport { position: relative; background: #f5f7fa; border-radius: 6px; touch-action: none; user-select: none; cursor: grab; }
.ham-image-viewport:active { cursor: grabbing; }
.ham-image-viewport:focus-visible { outline: 2px solid #2f6edb; outline-offset: -2px; }
.ham-image-layer { position: absolute; left: 50%; top: 50%; transform-origin: center; }
.ham-image-layer > img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; pointer-events: none; }
.ham-image-lens { position: absolute; z-index: 1; overflow: hidden; border: 2px solid #2f6edb; border-radius: 50%; background: #f5f7fa; box-shadow: 0 3px 16px #0003; pointer-events: none; }
.ham-image-lens[hidden] { display: none !important; }
.ham-image-lens > img { position: absolute; max-width: none !important; max-height: none !important; transform-origin: center; }
@media (max-width: 575px) {
    .ham-image-toolbar { gap: 4px; }
    .ham-file-toolbar .ham-file-action { width: 34px !important; height: 36px !important; }
    .ham-file-toolbar .ham-file-action--label { width: auto !important; padding: 5px 8px !important; font-size: 12px; }
}